Picker.148c9d83.js 7.9 KB

1
  1. import{t as V,a1 as Te,N as w,aZ as Z,d as A,z as j,aB as D,av as R,R as y,aq as Oe,y as p,C as oe,W as le,aU as xe,a0 as ce,c as r,a4 as ie,au as Q,Z as M,w as _,x as se,am as W,v as Ce,u as pe,aM as ke,a_ as z,L as ye,E as Ee,_ as X,a$ as Se}from"./index.5f7ffb46.js";import{T as we,a as Pe}from"./index.6bbd7daa.js";const[Ie,O,ee]=V("picker"),ue=e=>e.find(a=>!a.disabled)||e[0];function Be(e,a){const n=e[0];if(n){if(Array.isArray(n))return"multiple";if(a.children in n)return"cascade"}return"default"}function $(e,a){a=Z(a,0,e.length);for(let n=a;n<e.length;n++)if(!e[n].disabled)return n;for(let n=a-1;n>=0;n--)if(!e[n].disabled)return n;return 0}const te=(e,a,n)=>a!==void 0&&!!e.find(c=>c[n.value]===a);function J(e,a,n){const c=e.findIndex(v=>v[n.value]===a),i=$(e,c);return e[i]}function Me(e,a,n){const c=[];let i={[a.children]:e},v=0;for(;i&&i[a.children];){const m=i[a.children],h=n.value[v];if(i=Te(h)?J(m,h,a):void 0,!i&&m.length){const u=ue(m)[a.value];i=J(m,u,a)}v++,c.push(m)}return c}function Ne(e){const{transform:a}=window.getComputedStyle(e),n=a.slice(7,a.length-1).split(", ")[5];return Number(n)}function He(e){return w({text:"text",value:"value",children:"children"},e)}const ne=200,ae=300,De=15,[re,q]=V("picker-column"),de=Symbol(re);var _e=A({name:re,props:{value:j,fields:D(Object),options:R(),readonly:Boolean,allowHtml:Boolean,optionHeight:D(Number),swipeDuration:D(j),visibleOptionNum:D(j)},emits:["change","clickOption","scrollInto"],setup(e,{emit:a,slots:n}){let c,i,v,m,h;const u=y(),b=y(),d=y(0),f=y(0),g=Oe(),x=()=>e.options.length,N=()=>e.optionHeight*(+e.visibleOptionNum-1)/2,k=s=>{let t=$(e.options,s);const o=-t*e.optionHeight,l=()=>{t>x()-1&&(t=$(e.options,s));const C=e.options[t][e.fields.value];C!==e.value&&a("change",C)};c&&o!==d.value?h=l:l(),d.value=o},T=()=>e.readonly||!e.options.length,F=s=>{c||T()||(h=null,f.value=ne,k(s),a("clickOption",e.options[s]))},E=s=>Z(Math.round(-s/e.optionHeight),0,x()-1),H=p(()=>E(d.value)),K=(s,t)=>{const o=Math.abs(s/t);s=d.value+o/.003*(s<0?-1:1);const l=E(s);f.value=+e.swipeDuration,k(l)},P=()=>{c=!1,f.value=0,h&&(h(),h=null)},Y=s=>{if(!T()){if(g.start(s),c){const t=Ne(b.value);d.value=Math.min(0,t-N())}f.value=0,i=d.value,v=Date.now(),m=i,h=null}},L=s=>{if(T())return;g.move(s),g.isVertical()&&(c=!0,ie(s,!0));const t=Z(i+g.deltaY.value,-(x()*e.optionHeight),e.optionHeight),o=E(t);o!==H.value&&a("scrollInto",e.options[o]),d.value=t;const l=Date.now();l-v>ae&&(v=l,m=t)},I=()=>{if(T())return;const s=d.value-m,t=Date.now()-v;if(t<ae&&Math.abs(s)>De){K(s,t);return}const l=E(d.value);f.value=ne,k(l),setTimeout(()=>{c=!1},0)},S=()=>{const s={height:`${e.optionHeight}px`};return e.options.map((t,o)=>{const l=t[e.fields.text],{disabled:C}=t,B=t[e.fields.value],be={role:"button",style:s,tabindex:C?-1:0,class:[q("item",{disabled:C,selected:B===e.value}),t.className],onClick:()=>F(o)},ge={class:"van-ellipsis",[e.allowHtml?"innerHTML":"textContent"]:l};return r("li",be,[n.option?n.option(t,o):r("div",ge,null)])})};return oe(de),le({stopMomentum:P}),xe(()=>{const s=c?Math.floor(-d.value/e.optionHeight):e.options.findIndex(l=>l[e.fields.value]===e.value),t=$(e.options,s),o=-t*e.optionHeight;c&&t<s&&P(),d.value=o}),ce("touchmove",L,{target:u}),()=>r("div",{ref:u,class:q(),onTouchstartPassive:Y,onTouchend:I,onTouchcancel:I},[r("ul",{ref:b,style:{transform:`translate3d(0, ${d.value+N()}px, 0)`,transitionDuration:`${f.value}ms`,transitionProperty:f.value?"all":"none"},class:q("wrapper"),onTransitionend:P},[S()])])}});const[$e]=V("picker-toolbar"),U={title:String,cancelButtonText:String,confirmButtonText:String},me=["cancel","confirm","title","toolbar"],Re=Object.keys(U);var fe=A({name:$e,props:U,emits:["confirm","cancel"],setup(e,{emit:a,slots:n}){const c=()=>{if(n.title)return n.title();if(e.title)return r("div",{class:[O("title"),"van-ellipsis"]},[e.title])},i=()=>a("cancel"),v=()=>a("confirm"),m=()=>{const u=e.cancelButtonText||ee("cancel");return r("button",{type:"button",class:[O("cancel"),Q],onClick:i},[n.cancel?n.cancel():u])},h=()=>{const u=e.confirmButtonText||ee("confirm");return r("button",{type:"button",class:[O("confirm"),Q],onClick:v},[n.confirm?n.confirm():u])};return()=>r("div",{class:O("toolbar")},[n.toolbar?n.toolbar():[m(),c(),h()]])}});const Ve=(e,a)=>{const n=y(e());return M(e,c=>{c!==n.value&&(n.value=c)}),M(n,c=>{c!==e()&&a(c)}),n},[ve,G]=V("picker-group"),he=Symbol(ve),Ae=w({tabs:R(),activeTab:_(0),nextStepText:String},U);var Le=A({name:ve,props:Ae,emits:["confirm","cancel","update:activeTab"],setup(e,{emit:a,slots:n}){const c=Ve(()=>e.activeTab,b=>a("update:activeTab",b)),{children:i,linkChildren:v}=se(he);v();const m=()=>+c.value<e.tabs.length-1&&e.nextStepText,h=()=>{m()?c.value=+c.value+1:a("confirm",i.map(b=>b.confirm()))},u=()=>a("cancel");return()=>{var b;const d=(b=n.default)==null?void 0:b.call(n),f=m()?e.nextStepText:e.confirmButtonText;return r("div",{class:G()},[r(fe,{title:e.title,cancelButtonText:e.cancelButtonText,confirmButtonText:f,onConfirm:h,onCancel:u},W(n,me)),r(we,{active:c.value,"onUpdate:active":g=>c.value=g,class:G("tabs"),shrink:!0,animated:!0,lazyRender:!1},{default:()=>[e.tabs.map((g,x)=>r(Pe,{title:g,titleClass:G("tab-title")},{default:()=>[d==null?void 0:d[x]]}))]})])}}});const Ue=w({loading:Boolean,readonly:Boolean,allowHtml:Boolean,optionHeight:_(44),showToolbar:Ce,swipeDuration:_(1e3),visibleOptionNum:_(6)},U),Fe=w({},Ue,{columns:R(),modelValue:R(),toolbarPosition:pe("top"),columnsFieldNames:Object});var je=A({name:Ie,props:Fe,emits:["confirm","cancel","change","scrollInto","clickOption","update:modelValue"],setup(e,{emit:a,slots:n}){const c=y(),i=y(e.modelValue.slice(0)),{parent:v}=oe(he),{children:m,linkChildren:h}=se(de);h();const u=p(()=>He(e.columnsFieldNames)),b=p(()=>ke(e.optionHeight)),d=p(()=>Be(e.columns,u.value)),f=p(()=>{const{columns:t}=e;switch(d.value){case"multiple":return t;case"cascade":return Me(t,u.value,i);default:return[t]}}),g=p(()=>f.value.some(t=>t.length)),x=p(()=>f.value.map((t,o)=>J(t,i.value[o],u.value))),N=p(()=>f.value.map((t,o)=>t.findIndex(l=>l[u.value.value]===i.value[o]))),k=(t,o)=>{if(i.value[t]!==o){const l=i.value.slice(0);l[t]=o,i.value=l}},T=()=>({selectedValues:i.value.slice(0),selectedOptions:x.value,selectedIndexes:N.value}),F=(t,o)=>{k(o,t),d.value==="cascade"&&i.value.forEach((l,C)=>{const B=f.value[C];te(B,l,u.value)||k(C,B.length?B[0][u.value.value]:void 0)}),X(()=>{a("change",w({columnIndex:o},T()))})},E=(t,o)=>{const l={columnIndex:o,currentOption:t};a("clickOption",w(T(),l)),a("scrollInto",l)},H=()=>{m.forEach(o=>o.stopMomentum());const t=T();return X(()=>{a("confirm",t)}),t},K=()=>a("cancel",T()),P=()=>f.value.map((t,o)=>r(_e,{value:i.value[o],fields:u.value,options:t,readonly:e.readonly,allowHtml:e.allowHtml,optionHeight:b.value,swipeDuration:e.swipeDuration,visibleOptionNum:e.visibleOptionNum,onChange:l=>F(l,o),onClickOption:l=>E(l,o),onScrollInto:l=>{a("scrollInto",{currentOption:l,columnIndex:o})}},{option:n.option})),Y=t=>{if(g.value){const o={height:`${b.value}px`},l={backgroundSize:`100% ${(t-b.value)/2}px`};return[r("div",{class:O("mask"),style:l},null),r("div",{class:[Se,O("frame")],style:o},null)]}},L=()=>{const t=b.value*+e.visibleOptionNum,o={height:`${t}px`};return r("div",{ref:c,class:O("columns"),style:o},[P(),Y(t)])},I=()=>{if(e.showToolbar&&!v)return r(fe,Ee(W(e,Re),{onConfirm:H,onCancel:K}),W(n,me))};M(f,t=>{t.forEach((o,l)=>{o.length&&!te(o,i.value[l],u.value)&&k(l,ue(o)[u.value.value])})},{immediate:!0});let S;return M(()=>e.modelValue,t=>{!z(t,i.value)&&!z(t,S)&&(i.value=t.slice(0),S=t.slice(0))},{deep:!0}),M(i,t=>{z(t,e.modelValue)||(S=t.slice(0),a("update:modelValue",S))},{immediate:!0}),ce("touchmove",ie,{target:c}),le({confirm:H,getSelectedOptions:()=>x.value}),()=>{var t,o;return r("div",{class:O()},[e.toolbarPosition==="top"?I():null,e.loading?r(ye,{class:O("loading")},null):null,(t=n["columns-top"])==null?void 0:t.call(n),L(),(o=n["columns-bottom"])==null?void 0:o.call(n),e.toolbarPosition==="bottom"?I():null])}}});export{Le as a,Ue as p,je as s};