@component-hook/picker 1.4.3 → 1.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/react/index.css +1 -1
- package/dist/react/picker.es.d.ts +10286 -0
- package/dist/react/picker.es.js +600 -720
- package/dist/react/picker.umd.js +3 -3
- package/dist/vue/index.css +1 -1
- package/dist/vue/picker.es.d.ts +10356 -59
- package/dist/vue/picker.es.js +428 -424
- package/dist/vue/picker.umd.js +2 -2
- package/package.json +7 -6
package/dist/vue/picker.umd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
/*$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"})}));
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("vue")):typeof define==`function`&&define.amd?define([`exports`,`vue`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.picker={},e.Vue))})(this,function(e,t){var n=document.createElement(`style`);n.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, #ffffffe6, #fff6), linear-gradient(0deg, #ffffffe6, #fff6);--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;margin:var(--chook-picker-columns-margin);display:flex;position:relative;overflow:hidden}.chook-picker-columns-backdrop{background-image:var(--chook-picker-columns-backdrop);background-position:50%;background-repeat:no-repeat;background-size:100% 3rem}.chook-picker-mask-backdrop{pointer-events:none;background-image:var(--chook-picker-mask-backdrop);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 5.25rem;width:100%;height:100%;position:absolute;top:0;left:0}.chook-picker-loading{width:100%;height:100%;position:absolute;top:0;left:0}.chook-picker-column{cursor:grab;flex:1;padding:5.375rem 0;overflow:hidden}.chook-picker-column ul{margin:0;padding:0;list-style:none}.chook-picker-column-item{cursor:grab;justify-content:center;align-items:center;height:3rem;display:flex}.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;white-space:nowrap;-webkit-user-select:none;user-select:none;overflow:hidden}
|
|
2
|
+
/*$vite$:1*/`,document.head.appendChild(n),Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var r=.52,i=.008,a=[`year`,`month`,`day`],o=[`hour`,`minute`,`second`],s=Array.isArray;function c(e,t){if(p(e))return`multiple`;let[n]=e;return n?.[t.children]?`cascade`:`single`}function l(e){return{children:e?.children||`children`,label:e?.label||`label`,value:e?.value||`value`}}function u(e,t,n){if(p(e))return[];let r=[],i=e,a=0;for(;i;){let e=t[a],o=f(i,e,n);o===-1&&(o=0),r.push(i),a+=1,i=i[o]?.[n.children]}return r}function d(e,t,n,r){let i=[...n],a=e,o=t+1;for(;a?.[r.children];){let e=a[r.children][0];i[o]=e.value,a=e,o+=1}return i}function f(e,t,n){return e.findIndex(e=>e?.[n.value]===t)}function p(e){let[t]=e;return s(t)}function m(e,t){return e>t?`horizontal`:t>e?`vertical`:``}function h(){let{fontSize:e}=getComputedStyle(document.documentElement);return Number(e.replace(`px`,``))||16}function g(e,t,n){let r=[];for(let i=e;i<=t;i++){let e=n(String(i));r.push({label:e,value:i})}return r}function _(e,t){return e===t.getFullYear()}function v(e,t){return e===t.getFullYear()}function y(e,t){return e===t.getMonth()+1}function b(e,t){return e===t.getMonth()+1}function x(e,t){return new Date(e,t,0).getDate()}function S(e,t,n){let r=new Date,i=Date.now(),a=e.getTime(),o=t.getTime(),s=i>=a&&i<=o;return n===`year`?s?r.getFullYear():e.getFullYear():n===`month`?(s?r.getMonth():e.getMonth())+1:s?r.getDate():e.getDate()}function C(e){return e}function w(e){return/^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/.test(e)}function T(e){if(!w(e))return null;let[t,n,r]=e.split(`:`);return{hour:Number(t),minute:Number(n),second:Number(r)}}function E(e){return e.padStart(2,`0`)}function D(e,t,n){let r=Date.now(),{hour:i,minute:a,second:o}=e,{hour:s,minute:c,second:l}=t,u=new Date().setHours(i,a,o),d=new Date().setHours(s,c,l),f=r>=u&&r<=d;return n===`hour`?f?new Date().getHours():i:n===`minute`?f?new Date().getMinutes():a:f?new Date().getSeconds():o}function O(){let e={startX:0,startY:0,deltaX:0,deltaY:0,offsetX:0,offsetY:0},t=``,n=!0,r=()=>t===`vertical`,i=()=>t===`horizontal`;function a(){e.deltaX=0,e.deltaY=0,e.offsetX=0,e.offsetY=0,t=``,n=!0}function o(t){let n=`touches`in t?t.touches[0]:t;a(),e.startX=n.clientX,e.startY=n.clientY}function s(r){if(!e.startX||!e.startY)return!0;let i=`touches`in r?r.touches[0]:r;e.deltaX=Math.max(i.clientX,0)-e.startX,e.deltaY=i.clientY-e.startY,e.offsetX=Math.abs(e.deltaX),e.offsetY=Math.abs(e.deltaY),(!t||e.offsetX<10&&e.offsetY<10)&&(t=m(e.offsetX,e.offsetY)),n&&(e.offsetX>5||e.offsetY>5)&&(n=!1)}function c(){e.startX=0,e.startY=0}return{pointer:e,move:s,start:o,stop:c,reset:a,isVertical:r,isHorizontal:i}}function k({column:e,onChange:n}){let r=h()/16,a=(0,t.ref)(0),o=(0,t.ref)(0),{pointer:s,start:c,move:l,stop:u}=O(),d=0,f=0,p=0,m=!1,g=null;function _(e){c(e),m=!0,o.value=0,f=Date.now(),d=a.value,p=d,g=null}function v(n){if(l(n))return;let r=(0,t.unref)(e).length,i=d+s.deltaY,o=w((r-1)*-48),c=Math.min(Math.max(i,o),0),u=Date.now();a.value=c,!(u-f<=300)&&(f=u,p=c)}function y(){u();let e=a.value-p,t=Date.now()-f;if(t<300&&Math.abs(e)>15){b(e,t);return}let n=C(a.value);o.value=150,S(n),m=!1}function b(e,t){let n=Math.abs(e/t),r=C(a.value+n/i*(e<0?-1:1));o.value=300,S(r)}function x(){o.value=0,m=!1,g&&=(g(),null)}function S(e){let t=-e*w(48),r=()=>n?.(e);m&&t!==a.value?g=r:r(),a.value=t}function C(n){let r=(0,t.unref)(e).length,i=Math.round(-n/w(48));return i<0?0:i>=r?r-1:i}function w(e){return e*r}function T(e,t=`auto`){m&&t===`smooth`||(g=null,m=t===`smooth`,o.value=t===`smooth`?150:0,S(e))}return{offsetY:(0,t.readonly)(a),transitionDuration:(0,t.readonly)(o),onPointerDown:_,onPointerMove:v,onPointerUp:y,stopInertialSliding:x,scrollToIndex:T}}var A=[`onClick`],j=(0,t.defineComponent)({__name:`PickerColumn`,props:{column:{},fields:{},selectedIndex:{default:0}},emits:[`change`],setup(e,{expose:n,emit:i}){let a=e,o=i,{offsetY:s,transitionDuration:c,onPointerDown:l,onPointerMove:u,onPointerUp:d,stopInertialSliding:f,scrollToIndex:p}=k({column:(0,t.toRef)(a,`column`),onChange:m});function m(e){e!==a.selectedIndex&&o(`change`,e)}function h(e=a.selectedIndex,t){p(e,t)}function g(e){e!==a.selectedIndex&&h(e,`smooth`)}return n({scrollToSelected:h}),(n,i)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{class:`chook-picker-column`,"aria-label":`Picker column`,onTouchstartPassive:i[1]||=(...e)=>(0,t.unref)(l)&&(0,t.unref)(l)(...e),onTouchmove:i[2]||=(0,t.withModifiers)((...e)=>(0,t.unref)(u)&&(0,t.unref)(u)(...e),[`prevent`]),onTouchendPassive:i[3]||=(...e)=>(0,t.unref)(d)&&(0,t.unref)(d)(...e),onTouchcancel:i[4]||=(...e)=>(0,t.unref)(d)&&(0,t.unref)(d)(...e),onMousedownPassive:i[5]||=(...e)=>(0,t.unref)(l)&&(0,t.unref)(l)(...e),onMousemovePassive:i[6]||=(...e)=>(0,t.unref)(u)&&(0,t.unref)(u)(...e),onMouseupPassive:i[7]||=(...e)=>(0,t.unref)(d)&&(0,t.unref)(d)(...e),onMouseleavePassive:i[8]||=(...e)=>(0,t.unref)(d)&&(0,t.unref)(d)(...e)},[(0,t.createElementVNode)(`ul`,{style:(0,t.normalizeStyle)({overflowY:`hidden`,"--offset-y":`${(0,t.unref)(s)}`,transform:`translate3d(0, calc(var(--offset-y) * 1px), 0)`,transitionDuration:`${(0,t.unref)(c)}ms`,transitionProperty:(0,t.unref)(c)?`all`:`none`}),onTransitionend:i[0]||=(...e)=>(0,t.unref)(f)&&(0,t.unref)(f)(...e)},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(e.column,(n,i)=>((0,t.openBlock)(),(0,t.createElementBlock)(`li`,{key:n?.[e.fields.value],class:`chook-picker-column-item`,role:`button`,tabindex:`0`,onClick:e=>g(i)},[(0,t.createElementVNode)(`p`,{class:`chook-picker-column-label`,style:(0,t.normalizeStyle)({transform:`rotate3d(1, 0, 0, calc((${i*(0,t.unref)(48)} + var(--offset-y)) * ${(0,t.unref)(r)}deg)`})},(0,t.toDisplayString)(n?.[e.fields.label]),5)],8,A))),128))],36)],32))}}),M={class:`chook-picker-container`,"aria-label":`Picker`},N={class:`chook-picker-loading`},P={key:1,class:`chook-picker-columns`},F=(0,t.defineComponent)({__name:`Picker`,props:(0,t.mergeModels)({columns:{},loading:{type:Boolean},columnsFieldNames:{}},{modelValue:{default:()=>[]},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`],[`update:modelValue`]),setup(e,{emit:n}){let r=e,i=n,a=(0,t.useModel)(e,`modelValue`),o=(0,t.ref)([]),s=(0,t.useTemplateRef)(`columnsRef`),p=(0,t.computed)(()=>l(r.columnsFieldNames)),m=(0,t.computed)(()=>c(r.columns,p.value)),h=(0,t.computed)(()=>{let{columns:e}=r;return m.value===`single`?[e]:m.value===`multiple`?e:u(e,a.value,p.value)});function g(e,n){let r=h.value[e],o=r[n]?.[p.value.value];if(o===a.value[e])return;let s=[...a.value];if(s[e]=o,m.value===`cascade`){let t=r[n];a.value=d(t,e,s,p.value)}else a.value=s;(0,t.nextTick)(()=>{i(`change`,a.value)})}function _(){let e=h.value.length,t=[];for(let n=0;n<e;n++){let e=h.value[n],r=a.value[n],i=f(e,r,p.value);if(i===-1){let r=(o.value[n]??0)>=e.length?Math.max(e.length-1,0):0;a.value[n]=e[r]?.[p.value.value],t[n]=r}else t[n]=i;t[n]!==o.value[n]&&s.value?.[n]?.scrollToSelected(t[n])}o.value=t}return(0,t.watchEffect)(()=>{_()},{flush:`post`}),(n,r)=>((0,t.openBlock)(),(0,t.createElementBlock)(`div`,M,[e.loading?((0,t.openBlock)(),(0,t.createElementBlock)(t.Fragment,{key:0},[(0,t.createElementVNode)(`div`,N,[(0,t.renderSlot)(n.$slots,`loading`)]),r[1]||=(0,t.createElementVNode)(`div`,{class:`chook-picker-columns`},null,-1)],64)):e.columns.length?((0,t.openBlock)(),(0,t.createElementBlock)(`div`,{key:2,class:`chook-picker-columns chook-picker-columns-backdrop`,onTouchmove:r[0]||=(0,t.withModifiers)(()=>{},[`stop`])},[((0,t.openBlock)(!0),(0,t.createElementBlock)(t.Fragment,null,(0,t.renderList)(h.value,(e,n)=>((0,t.openBlock)(),(0,t.createBlock)(j,{key:n,ref_for:!0,ref_key:`columnsRef`,ref:s,column:e,fields:p.value,"selected-index":o.value[n],onChange:e=>g(n,e)},null,8,[`column`,`fields`,`selected-index`,`onChange`]))),128)),r[2]||=(0,t.createElementVNode)(`div`,{class:`chook-picker-mask-backdrop`},null,-1)],32)):((0,t.openBlock)(),(0,t.createElementBlock)(`div`,P,[(0,t.renderSlot)(n.$slots,`empty`)]))]))}}),I=(0,t.defineComponent)({__name:`DatePicker`,props:(0,t.mergeModels)({columnsType:{default:()=>a},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:(0,t.mergeModels)([`change`],[`update:modelValue`]),setup(e,{expose:n,emit:r}){let i=e,a=r,o=(0,t.useModel)(e,`modelValue`),s=(0,t.computed)(()=>{let{columnsType:e,minDate:t,maxDate:n}=i,r={year:c,month:l,day:u};return e.map(e=>r[e](t,n))});o.value.length||f();function c(e,t){return g(e.getFullYear(),t.getFullYear(),i.formatYearLabel)}function l(e,t){let n=d(`year`);return g(_(n,e)?e.getMonth()+1:1,v(n,t)?t.getMonth()+1:12,i.formatMonthLabel)}function u(e,t){let n=d(`year`),r=d(`month`),a=_(n,e)&&y(r,e),o=v(n,t)&&b(r,t);return g(a?e.getDate():1,o?t.getDate():x(n,r),i.formatDayLabel)}function d(e){let{columnsType:t}=i,n=t.indexOf(e),r=o.value[n];return r?Number(r):S(i.minDate,i.maxDate,e)}function f(){let{columnsType:e}=i;o.value=e.map(e=>S(i.minDate,i.maxDate,e))}return n({setCurrentDate:f}),(e,n)=>((0,t.openBlock)(),(0,t.createBlock)(F,{modelValue:o.value,"onUpdate:modelValue":n[0]||=e=>o.value=e,columns:s.value,onChange:n[1]||=e=>a(`change`,e)},null,8,[`modelValue`,`columns`]))}}),L=(0,t.defineComponent)({__name:`TimePicker`,props:(0,t.mergeModels)({columnsType:{default:()=>o},minTime:{},maxTime:{},formatHourLabel:{type:Function,default:E},formatMinuteLabel:{type:Function,default:E},formatSecondLabel:{type:Function,default:E}},{modelValue:{default:()=>[]},modelModifiers:{}}),emits:(0,t.mergeModels)([`change`],[`update:modelValue`]),setup(e,{expose:n,emit:r}){let i=e,a=r,o=(0,t.useModel)(e,`modelValue`),s=(0,t.computed)(()=>{let{columnsType:e}=i,t={hour:u,minute:d,second:f};return e.map(e=>t[e]())}),c=(0,t.computed)(()=>T(i.minTime??``)??{hour:0,minute:0,second:0}),l=(0,t.computed)(()=>T(i.maxTime??``)??{hour:23,minute:59,second:59});o.value.length||m();function u(){let e=c.value.hour,t=l.value.hour;return g(e,t,i.formatHourLabel)}function d(){let e=p(`hour`),{hour:t,minute:n}=c.value,{hour:r,minute:a}=l.value;return g(e===t?n:0,e===r?a:59,i.formatMinuteLabel)}function f(){let e=p(`hour`),t=p(`minute`),{hour:n,minute:r,second:a}=c.value,{hour:o,minute:s,second:u}=l.value;return g(e===n&&t===r?a:0,e===o&&t===s?u:59,i.formatSecondLabel)}function p(e){let{columnsType:t}=i,n=t.indexOf(e),r=o.value[n];return r===void 0?D(c.value,l.value,e):Number(r)}function m(){let{columnsType:e}=i;o.value=e.map(e=>D(c.value,l.value,e))}return n({setCurrentTime:m}),(e,n)=>((0,t.openBlock)(),(0,t.createBlock)(F,{modelValue:o.value,"onUpdate:modelValue":n[0]||=e=>o.value=e,columns:s.value,onChange:n[1]||=e=>a(`change`,e)},null,8,[`modelValue`,`columns`]))}});e.DatePicker=I,e.Picker=F,e.TimePicker=L});
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@component-hook/picker",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.
|
|
4
|
+
"version": "1.5.0",
|
|
5
5
|
"description": "Picker component with vue3 and react",
|
|
6
6
|
"author": "Tzuyi",
|
|
7
7
|
"license": "MIT",
|
|
@@ -41,13 +41,14 @@
|
|
|
41
41
|
"dist"
|
|
42
42
|
],
|
|
43
43
|
"peerDependencies": {
|
|
44
|
-
"react": "^19.2.
|
|
45
|
-
"react-dom": "^19.2.
|
|
46
|
-
"vue": "^3.5.
|
|
44
|
+
"react": "^19.2.7",
|
|
45
|
+
"react-dom": "^19.2.7",
|
|
46
|
+
"vue": "^3.5.39"
|
|
47
47
|
},
|
|
48
48
|
"devDependencies": {
|
|
49
|
-
"
|
|
50
|
-
"
|
|
49
|
+
"@microsoft/api-extractor": "^7.58.5",
|
|
50
|
+
"sass-embedded": "^1.100.0",
|
|
51
|
+
"vite-plugin-dts": "^5.0.3"
|
|
51
52
|
},
|
|
52
53
|
"scripts": {
|
|
53
54
|
"build": "pnpm build:vue && pnpm build:react",
|