vuux
Version:
Vue3 Nuxt3 Nuxt4 组件库
2 lines (1 loc) • 2.47 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue"),V=(t,u,h)=>{const o=n.ref(!1),m=n.ref(0),r=n.ref(0),f=n.ref(0),y=n.computed(()=>({"--wheel-theme":t.theme,"--wheel-width":`${t.width}px`,"--wheel-height":`${5*t.itemHeight}px`,"--wheel-item-height":`${t.itemHeight}px`})),i=n.computed(()=>["-",...t.list]),s=e=>e==="-"?null:typeof e=="string"||typeof e=="number"?e:e[t.value]!==void 0?e[t.value]:e,g=()=>{if(t.modelValue===void 0||t.modelValue===null)return 0;const e=i.value.findIndex(a=>s(a)===t.modelValue);return e>=0?e:0},l=n.ref(g()),c=n.computed(()=>Math.floor(5/2)),d=n.computed(()=>-l.value*t.itemHeight+c.value*t.itemHeight),E=n.computed(()=>({transform:`translateY(${o.value?r.value:d.value}px)`,transition:o.value?"none":"transform 0.3s ease"})),H=e=>typeof e=="string"||typeof e=="number"?String(e):e[t.label]!==void 0?String(e[t.label]):String(e),x=()=>i.value.length===0?null:s(i.value[l.value]),b=e=>{e.cancelable&&e.preventDefault(),e.deltaY>0?l.value=Math.min(l.value+1,i.value.length-1):l.value=Math.max(l.value-1,0),h("update:modelValue",x())},I=e=>!e.touches||e.touches.length===0?null:{clientY:e.touches[0].clientY},T=e=>{e.cancelable&&e.preventDefault();const a=I(e);a&&(o.value=!0,m.value=a.clientY,f.value=d.value,r.value=d.value)},Y=e=>{if(e.cancelable&&e.preventDefault(),!o.value)return;const a=I(e);if(!a)return;const v=a.clientY-m.value;r.value=f.value+v;const L=-((i.value.length-1)*t.itemHeight)+c.value*t.itemHeight,S=c.value*t.itemHeight;r.value=Math.max(L,Math.min(S,r.value))},M=()=>{if(!o.value)return;o.value=!1;const e=r.value,a=Math.round((-e+c.value*t.itemHeight)/t.itemHeight),v=Math.max(0,Math.min(i.value.length-1,a));v!==l.value&&(l.value=v,h("update:modelValue",x()))};return n.watch(()=>t.modelValue,e=>{if(e==null)l.value=0;else{const a=i.value.findIndex(v=>s(v)===e);a>=0&&a!==l.value&&(l.value=a)}}),n.watch(()=>t.list,()=>{l.value=g()},{deep:!0}),n.onMounted(()=>{u.value&&(u.value.addEventListener("wheel",b,{passive:!1}),u.value.addEventListener("touchstart",T,{passive:!1}),u.value.addEventListener("touchmove",Y,{passive:!1}),u.value.addEventListener("touchend",M))}),n.onUnmounted(()=>{u.value&&(u.value.removeEventListener("wheel",b),u.value.removeEventListener("touchstart",T),u.value.removeEventListener("touchmove",Y),u.value.removeEventListener("touchend",M))}),{styles:y,selectedIndex:l,flattenedItems:i,listStyles:E,getItemLabel:H}};exports.useWheelPicker=V;