Picker.66dfa715.js 7.0 KB

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