@component-hook/picker 1.2.0 → 1.2.1

package/dist/vue/picker.umd.js

@@ -1,2 +1,2 @@
 (function(S,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(S=typeof globalThis<"u"?globalThis:S||self,e(S.picker={},S.Vue))})(this,(function(S,e){"use strict";var L=document.createElement("style");L.textContent=`:root{--chook-picker-background: #fff;--chook-picker-columns-margin: 0 1rem;--chook-picker-columns-backdrop: linear-gradient( to bottom, #f2f2f2 0px, #f2f2f2 .0625rem, transparent .0625rem, transparent calc(100% - .0625rem) , #f2f2f2 calc(100% - .0625rem) , #f2f2f2 100% );--chook-picker-mask-backdrop: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)), linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4));--chook-picker-column-label-color: #323233;--chook-picker-column-label-padding: 0 .25rem;--chook-picker-column-font-size: 1rem;--chook-picker-column-font-weight: 500}.chook-picker-container{background:var(--chook-picker-background)}.chook-picker-columns{width:calc(100% - var(--chook-picker-columns-margin) * 2);height:13.5rem;overflow:hidden;position:relative;display:flex;margin:var(--chook-picker-columns-margin)}.chook-picker-columns-backdrop{background-image:var(--chook-picker-columns-backdrop);background-repeat:no-repeat;background-position:center;background-size:100% 3rem}.chook-picker-mask-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:var(--chook-picker-mask-backdrop);background-repeat:no-repeat;background-position:top,bottom;background-size:100% 5.25rem}.chook-picker-loading{height:100%;width:100%;position:absolute;top:0;left:0}.chook-picker-column{flex:1 1 0%;overflow:hidden;padding:5.375rem 0;cursor:grab}.chook-picker-column ul{margin:0;padding:0;list-style:none}.chook-picker-column-item{height:3rem;display:flex;justify-content:center;align-items:center;cursor:grab}.chook-picker-column-label{color:var(--chook-picker-column-label-color);font-size:var(--chook-picker-column-font-size);font-weight:var(--chook-picker-column-font-weight);padding:var(--chook-picker-column-label-padding);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none}
-/*$vite$:1*/`,document.head.appendChild(L);const G=Array.isArray;function K(n,a){if(A(n))return"multiple";const[f]=n;return f?.[a.children]?"cascade":"single"}function Z(n){return{children:n?.children||"children",label:n?.label||"label",value:n?.value||"value"}}function J(n,a,f){if(A(n))return[];const r=[];let c=n,u=0;for(;c;){const g=a[u];let d=N(c,g,f);d===-1&&(d=0),r.push(c),u+=1,c=c[d]?.[f.children]}return r}function Q(n,a,f,r){const c=[...f];let u=n,g=a+1;for(;u?.[r.children];){const d=u[r.children][0];c[g]=d.value,u=d,g+=1}return c}function N(n,a,f){return n.findIndex(r=>r?.[f.value]===a)}function A(n){const[a]=n;return G(a)}function W(n,a){return n>a?"horizontal":a>n?"vertical":""}function w(n,a,f){const r=[];for(let c=n;c<=a;c++){const u=f(`${c}`);r.push({label:u,value:c})}return r}function H(n,a){return n===a.getFullYear()}function R(n,a){return n===a.getFullYear()}function ee(n,a){return n===a.getMonth()+1}function ne(n,a){return n===a.getMonth()+1}function te(n,a){return new Date(n,a,0).getDate()}function X(n,a,f){const r=new Date,c=Date.now(),u=n.getTime(),g=a.getTime(),d=c>=u&&c<=g;return f==="year"?d?r.getFullYear():n.getFullYear():f==="month"?d?r.getMonth()+1:n.getMonth()+1:d?r.getDate():n.getDate()}function C(n){return n}function oe(n){return/^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/.test(n)}function $(n){if(!oe(n))return null;const[a,f,r]=n.split(":");return{hour:Number(a),minute:Number(f),second:Number(r)}}function E(n){return n.padStart(2,"0")}function z(n,a,f){const r=Date.now(),{hour:c,minute:u,second:g}=n,{hour:d,minute:p,second:k}=a,h=new Date().setHours(c,u,g),T=new Date().setHours(d,p,k),s=r>=h&&r<=T;return f==="hour"?s?new Date().getHours():c:f==="minute"?s?new Date().getMinutes():u:s?new Date().getSeconds():g}const re=16,V=48,le=.52,U=150,v=300,ae=15,ce=.008,ie=["year","month","day"],se=["hour","minute","second"];function ue(){const n={startX:0,startY:0,deltaX:0,deltaY:0,offsetX:0,offsetY:0};let a="";const f=()=>a==="vertical",r=()=>a==="horizontal";function c(){n.deltaX=0,n.deltaY=0,n.offsetX=0,n.offsetY=0,a=""}function u(p){const k="touches"in p?p.touches[0]:p;c(),n.startX=k.clientX,n.startY=k.clientY}function g(p){if(!n.startX||!n.startY)return!0;const k="touches"in p?p.touches[0]:p;n.deltaX=Math.max(k.clientX,0)-n.startX,n.deltaY=k.clientY-n.startY,n.offsetX=Math.abs(n.deltaX),n.offsetY=Math.abs(n.deltaY);const h=10;(!a||n.offsetX<h&&n.offsetY<h)&&(a=W(n.offsetX,n.offsetY))}function d(){n.startX=0,n.startY=0}return{pointer:n,move:g,start:u,stop:d,reset:c,isVertical:f,isHorizontal:r}}function me({column:n,onChange:a}){const r=Number.parseFloat(getComputedStyle(document.documentElement).fontSize)/re,c=e.ref(0),u=e.ref(0),{pointer:g,start:d,move:p,stop:k}=ue();let h=0,T=0,s=0,l=!1,t=null;function o(M){d(M),l=!0,u.value=0,T=Date.now(),h=c.value,s=h,t=null}function i(M){if(p(M))return;const y=e.isRef(n)?n.value.length:n.length,F=h+g.deltaY,P=O((y-1)*-V),j=Math.min(Math.max(F,P),0),q=Date.now();c.value=j,!(q-T<=v)&&(T=q,s=j)}function m(){k();const M=c.value-s,b=Date.now()-T;if(b<v&&Math.abs(M)>ae){x(M,b);return}const y=I(c.value);u.value=U,Y(y),l=!1}function x(M,b){const y=Math.abs(M/b),F=c.value+y/ce*(M<0?-1:1),P=I(F);u.value=v,Y(P)}function D(){u.value=0,l=!1,t&&(t(),t=null)}function Y(M){const b=-M*O(V),y=()=>a?.(M);l&&b!==c.value?t=y:y(),c.value=b}function I(M){const b=e.isRef(n)?n.value.length:n.length,y=Math.round(-M/O(V));return y<0?0:y>=b?b-1:y}function O(M){return M*r}function _(M,b="auto"){l&&b==="smooth"||(t=null,l=b==="smooth",u.value=b==="smooth"?U:0,Y(M))}return{offsetY:e.readonly(c),transitionDuration:e.readonly(u),onPointerDown:o,onPointerMove:i,onPointerUp:m,stopInertialSliding:D,scrollToIndex:_}}const de=["onClick"],fe=e.defineComponent({__name:"PickerColumn",props:{column:{},fields:{},selectedIndex:{default:0}},emits:["change"],setup(n,{expose:a,emit:f}){const r=n,c=f,{offsetY:u,transitionDuration:g,onPointerDown:d,onPointerMove:p,onPointerUp:k,stopInertialSliding:h,scrollToIndex:T}=me({column:e.toRef(r,"column"),onChange:s});function s(o){o!==r.selectedIndex&&c("change",o)}function l(o=r.selectedIndex,i){T(o,i)}function t(o){o!==r.selectedIndex&&l(o,"smooth")}return a({scrollToSelected:l}),(o,i)=>(e.openBlock(),e.createElementBlock("div",{class:"chook-picker-column","aria-label":"Picker column",onTouchstartPassive:i[1]||(i[1]=(...m)=>e.unref(d)&&e.unref(d)(...m)),onTouchmove:i[2]||(i[2]=e.withModifiers((...m)=>e.unref(p)&&e.unref(p)(...m),["prevent"])),onTouchendPassive:i[3]||(i[3]=(...m)=>e.unref(k)&&e.unref(k)(...m)),onTouchcancel:i[4]||(i[4]=(...m)=>e.unref(k)&&e.unref(k)(...m)),onMousedownPassive:i[5]||(i[5]=(...m)=>e.unref(d)&&e.unref(d)(...m)),onMousemovePassive:i[6]||(i[6]=(...m)=>e.unref(p)&&e.unref(p)(...m)),onMouseupPassive:i[7]||(i[7]=(...m)=>e.unref(k)&&e.unref(k)(...m)),onMouseleavePassive:i[8]||(i[8]=(...m)=>e.unref(k)&&e.unref(k)(...m))},[e.createElementVNode("ul",{style:e.normalizeStyle({overflowY:"hidden",transform:`translate3d(0, ${e.unref(u)}px, 0)`,transitionDuration:`${e.unref(g)}ms`,transitionProperty:e.unref(g)?"all":"none"}),onTransitionend:i[0]||(i[0]=(...m)=>e.unref(h)&&e.unref(h)(...m))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.column,(m,x)=>(e.openBlock(),e.createElementBlock("li",{key:m?.[n.fields.value],class:"chook-picker-column-item",role:"button",tabindex:"0",onClick:D=>t(x)},[e.createElementVNode("p",{class:"chook-picker-column-label",style:e.normalizeStyle({transform:`rotate3d(1, 0, 0, ${(x*e.unref(V)+e.unref(u))*e.unref(le)}deg)`})},e.toDisplayString(m?.[n.fields.label]),5)],8,de))),128))],36)],32))}}),pe={class:"chook-picker-container","aria-label":"Picker"},ke={class:"chook-picker-loading"},ge={key:1,class:"chook-picker-columns"},B=e.defineComponent({__name:"Picker",props:e.mergeModels({columns:{},loading:{type:Boolean},columnsFieldNames:{}},{modelValue:{default:[]},modelModifiers:{}}),emits:e.mergeModels(["change"],["update:modelValue"]),setup(n,{emit:a}){const f=n,r=a,c=e.useModel(n,"modelValue"),u=e.ref([]),g=e.useTemplateRef("columnsRef"),d=e.computed(()=>Z(f.columnsFieldNames)),p=e.computed(()=>K(f.columns,d.value)),k=e.computed(()=>{const{columns:s}=f;return p.value==="single"?[s]:p.value==="multiple"?s:J(s,c.value,d.value)});function h(s,l){const t=k.value[s],o=t[l]?.[d.value.value],i=c.value[s];if(o===i)return;const m=[...c.value];if(m[s]=o,p.value==="cascade"){const x=t[l];c.value=Q(x,s,m,d.value)}else c.value=m;e.nextTick(()=>{r("change",c.value)})}function T(){const s=k.value.length,l=[];for(let t=0;t<s;t++){const o=k.value[t],i=c.value[t],m=N(o,i,d.value);if(m===-1){const D=(u.value[t]??0)>=o.length?Math.max(o.length-1,0):0;c.value[t]=o[D]?.[d.value.value],l[t]=D}else l[t]=m;l[t]!==u.value[t]&&g.value?.[t]?.scrollToSelected(l[t])}u.value=l}return e.watchEffect(()=>{T()},{flush:"post"}),(s,l)=>(e.openBlock(),e.createElementBlock("div",pe,[n.loading?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("div",ke,[e.renderSlot(s.$slots,"loading")]),l[1]||(l[1]=e.createElementVNode("div",{class:"chook-picker-columns"},null,-1))],64)):n.columns.length?(e.openBlock(),e.createElementBlock("div",{key:2,class:"chook-picker-columns chook-picker-columns-backdrop",onTouchmove:l[0]||(l[0]=e.withModifiers(()=>{},["stop"]))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(k.value,(t,o)=>(e.openBlock(),e.createBlock(fe,{key:o,ref_for:!0,ref_key:"columnsRef",ref:g,column:t,fields:d.value,"selected-index":u.value[o],onChange:i=>h(o,i)},null,8,["column","fields","selected-index","onChange"]))),128)),l[2]||(l[2]=e.createElementVNode("div",{class:"chook-picker-mask-backdrop"},null,-1))],32)):(e.openBlock(),e.createElementBlock("div",ge,[e.renderSlot(s.$slots,"empty")]))]))}}),he=e.defineComponent({__name:"DatePicker",props:e.mergeModels({columnsType:{default:()=>ie},minDate:{default:()=>new Date(new Date().getFullYear()-10,0,1)},maxDate:{default:()=>new Date(new Date().getFullYear()+10,11,31)},formatYearLabel:{type:Function,default:C},formatMonthLabel:{type:Function,default:C},formatDayLabel:{type:Function,default:C}},{modelValue:{default:[]},modelModifiers:{}}),emits:e.mergeModels(["change"],["update:modelValue"]),setup(n,{expose:a,emit:f}){const r=n,c=f,u=e.useModel(n,"modelValue"),g=e.computed(()=>{const{columnsType:s,minDate:l,maxDate:t}=r,o={year:d,month:p,day:k};return s.map(i=>o[i](l,t))});u.value.length||T();function d(s,l){const t=s.getFullYear(),o=l.getFullYear();return w(t,o,r.formatYearLabel)}function p(s,l){const t=h("year"),o=H(t,s)?s.getMonth()+1:1,i=R(t,l)?l.getMonth()+1:12;return w(o,i,r.formatMonthLabel)}function k(s,l){const t=h("year"),o=h("month"),i=H(t,s)&&ee(o,s),m=R(t,l)&&ne(o,l),x=i?s.getDate():1,D=m?l.getDate():te(t,o);return w(x,D,r.formatDayLabel)}function h(s){const{columnsType:l}=r,t=l.indexOf(s),o=u.value[t];return o?Number(o):X(r.minDate,r.maxDate,s)}function T(){const{columnsType:s}=r;u.value=s.map(l=>X(r.minDate,r.maxDate,l))}return a({setCurrentDate:T}),(s,l)=>(e.openBlock(),e.createBlock(B,{modelValue:u.value,"onUpdate:modelValue":l[0]||(l[0]=t=>u.value=t),columns:g.value,onChange:l[1]||(l[1]=t=>c("change",t))},null,8,["modelValue","columns"]))}}),Me=e.defineComponent({__name:"TimePicker",props:e.mergeModels({columnsType:{default:()=>se},minTime:{},maxTime:{},formatHourLabel:{type:Function,default:E},formatMinuteLabel:{type:Function,default:E},formatSecondLabel:{type:Function,default:E}},{modelValue:{default:[]},modelModifiers:{}}),emits:e.mergeModels(["change"],["update:modelValue"]),setup(n,{expose:a,emit:f}){const r=n,c=f,u=e.useModel(n,"modelValue"),g=e.computed(()=>{const{columnsType:t}=r,o={hour:k,minute:h,second:T};return t.map(i=>o[i]())}),d=e.computed(()=>$(r.minTime??"")??{hour:0,minute:0,second:0}),p=e.computed(()=>$(r.maxTime??"")??{hour:23,minute:59,second:59});u.value.length||l();function k(){const t=d.value.hour,o=p.value.hour;return w(t,o,r.formatHourLabel)}function h(){const t=s("hour"),{hour:o,minute:i}=d.value,{hour:m,minute:x}=p.value;return w(t===o?i:0,t===m?x:59,r.formatMinuteLabel)}function T(){const t=s("hour"),o=s("minute"),{hour:i,minute:m,second:x}=d.value,{hour:D,minute:Y,second:I}=p.value;return w(t===i&&o===m?x:0,t===D&&o===Y?I:59,r.formatSecondLabel)}function s(t){const{columnsType:o}=r,i=o.indexOf(t),m=u.value[i];return m!==void 0?Number(m):z(d.value,p.value,t)}function l(){const{columnsType:t}=r;u.value=t.map(o=>z(d.value,p.value,o))}return a({setCurrentTime:l}),(t,o)=>(e.openBlock(),e.createBlock(B,{modelValue:u.value,"onUpdate:modelValue":o[0]||(o[0]=i=>u.value=i),columns:g.value,onChange:o[1]||(o[1]=i=>c("change",i))},null,8,["modelValue","columns"]))}});S.DatePicker=he,S.Picker=B,S.TimePicker=Me,Object.defineProperty(S,Symbol.toStringTag,{value:"Module"})}));
+/*$vite$:1*/`,document.head.appendChild(L);const G=Array.isArray;function K(n,a){if(A(n))return"multiple";const[f]=n;return f?.[a.children]?"cascade":"single"}function Z(n){return{children:n?.children||"children",label:n?.label||"label",value:n?.value||"value"}}function J(n,a,f){if(A(n))return[];const r=[];let c=n,u=0;for(;c;){const g=a[u];let d=N(c,g,f);d===-1&&(d=0),r.push(c),u+=1,c=c[d]?.[f.children]}return r}function Q(n,a,f,r){const c=[...f];let u=n,g=a+1;for(;u?.[r.children];){const d=u[r.children][0];c[g]=d.value,u=d,g+=1}return c}function N(n,a,f){return n.findIndex(r=>r?.[f.value]===a)}function A(n){const[a]=n;return G(a)}function W(n,a){return n>a?"horizontal":a>n?"vertical":""}function w(n,a,f){const r=[];for(let c=n;c<=a;c++){const u=f(`${c}`);r.push({label:u,value:c})}return r}function H(n,a){return n===a.getFullYear()}function R(n,a){return n===a.getFullYear()}function ee(n,a){return n===a.getMonth()+1}function ne(n,a){return n===a.getMonth()+1}function te(n,a){return new Date(n,a,0).getDate()}function X(n,a,f){const r=new Date,c=Date.now(),u=n.getTime(),g=a.getTime(),d=c>=u&&c<=g;return f==="year"?d?r.getFullYear():n.getFullYear():f==="month"?d?r.getMonth()+1:n.getMonth()+1:d?r.getDate():n.getDate()}function C(n){return n}function oe(n){return/^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/.test(n)}function $(n){if(!oe(n))return null;const[a,f,r]=n.split(":");return{hour:Number(a),minute:Number(f),second:Number(r)}}function E(n){return n.padStart(2,"0")}function z(n,a,f){const r=Date.now(),{hour:c,minute:u,second:g}=n,{hour:d,minute:p,second:k}=a,h=new Date().setHours(c,u,g),T=new Date().setHours(d,p,k),s=r>=h&&r<=T;return f==="hour"?s?new Date().getHours():c:f==="minute"?s?new Date().getMinutes():u:s?new Date().getSeconds():g}const re=16,V=48,le=.52,U=150,v=300,ae=15,ce=.008,ie=["year","month","day"],se=["hour","minute","second"];function ue(){const n={startX:0,startY:0,deltaX:0,deltaY:0,offsetX:0,offsetY:0};let a="";const f=()=>a==="vertical",r=()=>a==="horizontal";function c(){n.deltaX=0,n.deltaY=0,n.offsetX=0,n.offsetY=0,a=""}function u(p){const k="touches"in p?p.touches[0]:p;c(),n.startX=k.clientX,n.startY=k.clientY}function g(p){if(!n.startX||!n.startY)return!0;const k="touches"in p?p.touches[0]:p;n.deltaX=Math.max(k.clientX,0)-n.startX,n.deltaY=k.clientY-n.startY,n.offsetX=Math.abs(n.deltaX),n.offsetY=Math.abs(n.deltaY);const h=10;(!a||n.offsetX<h&&n.offsetY<h)&&(a=W(n.offsetX,n.offsetY))}function d(){n.startX=0,n.startY=0}return{pointer:n,move:g,start:u,stop:d,reset:c,isVertical:f,isHorizontal:r}}function me({column:n,onChange:a}){const r=Number.parseFloat(getComputedStyle(document.documentElement).fontSize)/re,c=e.ref(0),u=e.ref(0),{pointer:g,start:d,move:p,stop:k}=ue();let h=0,T=0,s=0,l=!1,t=null;function o(M){d(M),l=!0,u.value=0,T=Date.now(),h=c.value,s=h,t=null}function i(M){if(p(M))return;const y=e.isRef(n)?n.value.length:n.length,F=h+g.deltaY,P=O((y-1)*-V),j=Math.min(Math.max(F,P),0),q=Date.now();c.value=j,!(q-T<=v)&&(T=q,s=j)}function m(){k();const M=c.value-s,b=Date.now()-T;if(b<v&&Math.abs(M)>ae){x(M,b);return}const y=I(c.value);u.value=U,Y(y),l=!1}function x(M,b){const y=Math.abs(M/b),F=c.value+y/ce*(M<0?-1:1),P=I(F);u.value=v,Y(P)}function D(){u.value=0,l=!1,t&&(t(),t=null)}function Y(M){const b=-M*O(V),y=()=>a?.(M);l&&b!==c.value?t=y:y(),c.value=b}function I(M){const b=e.isRef(n)?n.value.length:n.length,y=Math.round(-M/O(V));return y<0?0:y>=b?b-1:y}function O(M){return M*r}function _(M,b="auto"){l&&b==="smooth"||(t=null,l=b==="smooth",u.value=b==="smooth"?U:0,Y(M))}return{offsetY:e.readonly(c),transitionDuration:e.readonly(u),onPointerDown:o,onPointerMove:i,onPointerUp:m,stopInertialSliding:D,scrollToIndex:_}}const de=["onClick"],fe=e.defineComponent({__name:"PickerColumn",props:{column:{},fields:{},selectedIndex:{default:0}},emits:["change"],setup(n,{expose:a,emit:f}){const r=n,c=f,{offsetY:u,transitionDuration:g,onPointerDown:d,onPointerMove:p,onPointerUp:k,stopInertialSliding:h,scrollToIndex:T}=me({column:e.toRef(r,"column"),onChange:s});function s(o){o!==r.selectedIndex&&c("change",o)}function l(o=r.selectedIndex,i){T(o,i)}function t(o){o!==r.selectedIndex&&l(o,"smooth")}return a({scrollToSelected:l}),(o,i)=>(e.openBlock(),e.createElementBlock("div",{class:"chook-picker-column","aria-label":"Picker column",onTouchstartPassive:i[1]||(i[1]=(...m)=>e.unref(d)&&e.unref(d)(...m)),onTouchmove:i[2]||(i[2]=e.withModifiers((...m)=>e.unref(p)&&e.unref(p)(...m),["prevent"])),onTouchendPassive:i[3]||(i[3]=(...m)=>e.unref(k)&&e.unref(k)(...m)),onTouchcancel:i[4]||(i[4]=(...m)=>e.unref(k)&&e.unref(k)(...m)),onMousedownPassive:i[5]||(i[5]=(...m)=>e.unref(d)&&e.unref(d)(...m)),onMousemovePassive:i[6]||(i[6]=(...m)=>e.unref(p)&&e.unref(p)(...m)),onMouseupPassive:i[7]||(i[7]=(...m)=>e.unref(k)&&e.unref(k)(...m)),onMouseleavePassive:i[8]||(i[8]=(...m)=>e.unref(k)&&e.unref(k)(...m))},[e.createElementVNode("ul",{style:e.normalizeStyle({overflowY:"hidden","--offset-y":`${e.unref(u)}`,transform:"translate3d(0, calc(var(--offset-y) * 1px), 0)",transitionDuration:`${e.unref(g)}ms`,transitionProperty:e.unref(g)?"all":"none"}),onTransitionend:i[0]||(i[0]=(...m)=>e.unref(h)&&e.unref(h)(...m))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(n.column,(m,x)=>(e.openBlock(),e.createElementBlock("li",{key:m?.[n.fields.value],class:"chook-picker-column-item",role:"button",tabindex:"0",onClick:D=>t(x)},[e.createElementVNode("p",{class:"chook-picker-column-label",style:e.normalizeStyle({transform:`rotate3d(1, 0, 0, calc((${x*e.unref(V)} + var(--offset-y)) * ${e.unref(le)}deg)`})},e.toDisplayString(m?.[n.fields.label]),5)],8,de))),128))],36)],32))}}),pe={class:"chook-picker-container","aria-label":"Picker"},ke={class:"chook-picker-loading"},ge={key:1,class:"chook-picker-columns"},B=e.defineComponent({__name:"Picker",props:e.mergeModels({columns:{},loading:{type:Boolean},columnsFieldNames:{}},{modelValue:{default:[]},modelModifiers:{}}),emits:e.mergeModels(["change"],["update:modelValue"]),setup(n,{emit:a}){const f=n,r=a,c=e.useModel(n,"modelValue"),u=e.ref([]),g=e.useTemplateRef("columnsRef"),d=e.computed(()=>Z(f.columnsFieldNames)),p=e.computed(()=>K(f.columns,d.value)),k=e.computed(()=>{const{columns:s}=f;return p.value==="single"?[s]:p.value==="multiple"?s:J(s,c.value,d.value)});function h(s,l){const t=k.value[s],o=t[l]?.[d.value.value],i=c.value[s];if(o===i)return;const m=[...c.value];if(m[s]=o,p.value==="cascade"){const x=t[l];c.value=Q(x,s,m,d.value)}else c.value=m;e.nextTick(()=>{r("change",c.value)})}function T(){const s=k.value.length,l=[];for(let t=0;t<s;t++){const o=k.value[t],i=c.value[t],m=N(o,i,d.value);if(m===-1){const D=(u.value[t]??0)>=o.length?Math.max(o.length-1,0):0;c.value[t]=o[D]?.[d.value.value],l[t]=D}else l[t]=m;l[t]!==u.value[t]&&g.value?.[t]?.scrollToSelected(l[t])}u.value=l}return e.watchEffect(()=>{T()},{flush:"post"}),(s,l)=>(e.openBlock(),e.createElementBlock("div",pe,[n.loading?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[e.createElementVNode("div",ke,[e.renderSlot(s.$slots,"loading")]),l[1]||(l[1]=e.createElementVNode("div",{class:"chook-picker-columns"},null,-1))],64)):n.columns.length?(e.openBlock(),e.createElementBlock("div",{key:2,class:"chook-picker-columns chook-picker-columns-backdrop",onTouchmove:l[0]||(l[0]=e.withModifiers(()=>{},["stop"]))},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(k.value,(t,o)=>(e.openBlock(),e.createBlock(fe,{key:o,ref_for:!0,ref_key:"columnsRef",ref:g,column:t,fields:d.value,"selected-index":u.value[o],onChange:i=>h(o,i)},null,8,["column","fields","selected-index","onChange"]))),128)),l[2]||(l[2]=e.createElementVNode("div",{class:"chook-picker-mask-backdrop"},null,-1))],32)):(e.openBlock(),e.createElementBlock("div",ge,[e.renderSlot(s.$slots,"empty")]))]))}}),he=e.defineComponent({__name:"DatePicker",props:e.mergeModels({columnsType:{default:()=>ie},minDate:{default:()=>new Date(new Date().getFullYear()-10,0,1)},maxDate:{default:()=>new Date(new Date().getFullYear()+10,11,31)},formatYearLabel:{type:Function,default:C},formatMonthLabel:{type:Function,default:C},formatDayLabel:{type:Function,default:C}},{modelValue:{default:[]},modelModifiers:{}}),emits:e.mergeModels(["change"],["update:modelValue"]),setup(n,{expose:a,emit:f}){const r=n,c=f,u=e.useModel(n,"modelValue"),g=e.computed(()=>{const{columnsType:s,minDate:l,maxDate:t}=r,o={year:d,month:p,day:k};return s.map(i=>o[i](l,t))});u.value.length||T();function d(s,l){const t=s.getFullYear(),o=l.getFullYear();return w(t,o,r.formatYearLabel)}function p(s,l){const t=h("year"),o=H(t,s)?s.getMonth()+1:1,i=R(t,l)?l.getMonth()+1:12;return w(o,i,r.formatMonthLabel)}function k(s,l){const t=h("year"),o=h("month"),i=H(t,s)&&ee(o,s),m=R(t,l)&&ne(o,l),x=i?s.getDate():1,D=m?l.getDate():te(t,o);return w(x,D,r.formatDayLabel)}function h(s){const{columnsType:l}=r,t=l.indexOf(s),o=u.value[t];return o?Number(o):X(r.minDate,r.maxDate,s)}function T(){const{columnsType:s}=r;u.value=s.map(l=>X(r.minDate,r.maxDate,l))}return a({setCurrentDate:T}),(s,l)=>(e.openBlock(),e.createBlock(B,{modelValue:u.value,"onUpdate:modelValue":l[0]||(l[0]=t=>u.value=t),columns:g.value,onChange:l[1]||(l[1]=t=>c("change",t))},null,8,["modelValue","columns"]))}}),Me=e.defineComponent({__name:"TimePicker",props:e.mergeModels({columnsType:{default:()=>se},minTime:{},maxTime:{},formatHourLabel:{type:Function,default:E},formatMinuteLabel:{type:Function,default:E},formatSecondLabel:{type:Function,default:E}},{modelValue:{default:[]},modelModifiers:{}}),emits:e.mergeModels(["change"],["update:modelValue"]),setup(n,{expose:a,emit:f}){const r=n,c=f,u=e.useModel(n,"modelValue"),g=e.computed(()=>{const{columnsType:t}=r,o={hour:k,minute:h,second:T};return t.map(i=>o[i]())}),d=e.computed(()=>$(r.minTime??"")??{hour:0,minute:0,second:0}),p=e.computed(()=>$(r.maxTime??"")??{hour:23,minute:59,second:59});u.value.length||l();function k(){const t=d.value.hour,o=p.value.hour;return w(t,o,r.formatHourLabel)}function h(){const t=s("hour"),{hour:o,minute:i}=d.value,{hour:m,minute:x}=p.value;return w(t===o?i:0,t===m?x:59,r.formatMinuteLabel)}function T(){const t=s("hour"),o=s("minute"),{hour:i,minute:m,second:x}=d.value,{hour:D,minute:Y,second:I}=p.value;return w(t===i&&o===m?x:0,t===D&&o===Y?I:59,r.formatSecondLabel)}function s(t){const{columnsType:o}=r,i=o.indexOf(t),m=u.value[i];return m!==void 0?Number(m):z(d.value,p.value,t)}function l(){const{columnsType:t}=r;u.value=t.map(o=>z(d.value,p.value,o))}return a({setCurrentTime:l}),(t,o)=>(e.openBlock(),e.createBlock(B,{modelValue:u.value,"onUpdate:modelValue":o[0]||(o[0]=i=>u.value=i),columns:g.value,onChange:o[1]||(o[1]=i=>c("change",i))},null,8,["modelValue","columns"]))}});S.DatePicker=he,S.Picker=B,S.TimePicker=Me,Object.defineProperty(S,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@component-hook/picker",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "Picker component with vue3 and react",
   "license": "MIT",
   "type": "module",