@component-hook/picker 1.5.0 → 1.6.0

package/dist/vue/picker.es.js

@@ -93,7 +93,7 @@ function H(e) {
 }
 function U(e) {
 	if (!H(e)) return null;
-	let [t, n, r] = e.split(":");
+	let [t, n, r] = e.split(":", 3);
 	return {
 		hour: Number(t),
 		minute: Number(n),
@@ -222,7 +222,6 @@ var J = ["onClick"], Y = /* @__PURE__ */ a({
 		}
 		return n({ scrollToSelected: w }), (n, a) => (l(), r("div", {
 			class: "chook-picker-column",
-			"aria-label": "Picker column",
 			onTouchstartPassive: a[1] ||= (...e) => g(p) && g(p)(...e),
 			onTouchmove: a[2] ||= b((...e) => g(_) && g(_)(...e), ["prevent"]),
 			onTouchendPassive: a[3] ||= (...e) => g(v) && g(v)(...e),
@@ -232,6 +231,7 @@ var J = ["onClick"], Y = /* @__PURE__ */ a({
 			onMouseupPassive: a[7] ||= (...e) => g(v) && g(v)(...e),
 			onMouseleavePassive: a[8] ||= (...e) => g(v) && g(v)(...e)
 		}, [i("ul", {
+			"aria-label": "Picker column",
 			style: c({
 				overflowY: "hidden",
 				"--offset-y": `${g(u)}`,

package/dist/vue/picker.umd.js

@@ -1,2 +1,2 @@
 (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}
-/*$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});
+/*$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(`:`,3);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`,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`,{"aria-label":`Picker column`,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

@@ -1,30 +1,30 @@
 {
   "name": "@component-hook/picker",
-  "type": "module",
-  "version": "1.5.0",
+  "version": "1.6.0",
   "description": "Picker component with vue3 and react",
-  "author": "Tzuyi",
-  "license": "MIT",
+  "keywords": [
+    "date-picker",
+    "picker",
+    "react",
+    "time-picker",
+    "vue",
+    "vue3"
+  ],
   "homepage": "https://github.com/tzuyi0817/component-hook/tree/master/packages/picker#readme",
+  "bugs": {
+    "url": "https://github.com/tzuyi0817/component-hook/issues"
+  },
+  "license": "MIT",
+  "author": "Tzuyi",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/tzuyi0817/component-hook.git",
     "directory": "packages/picker"
   },
-  "bugs": {
-    "url": "https://github.com/tzuyi0817/component-hook/issues"
-  },
-  "publishConfig": {
-    "tag": "latest"
-  },
-  "keywords": [
-    "vue",
-    "vue3",
-    "react",
-    "picker",
-    "date-picker",
-    "time-picker"
+  "files": [
+    "dist"
   ],
+  "type": "module",
   "exports": {
     "./vue": {
       "types": "./dist/vue/picker.es.d.ts",
@@ -37,18 +37,18 @@
       "require": "./dist/react/picker.umd.js"
     }
   },
-  "files": [
-    "dist"
-  ],
-  "peerDependencies": {
-    "react": "^19.2.7",
-    "react-dom": "^19.2.7",
-    "vue": "^3.5.39"
+  "publishConfig": {
+    "tag": "latest"
   },
   "devDependencies": {
-    "@microsoft/api-extractor": "^7.58.5",
-    "sass-embedded": "^1.100.0",
-    "vite-plugin-dts": "^5.0.3"
+    "@microsoft/api-extractor": "^7.59.1",
+    "sass-embedded": "^1.104.1",
+    "vite-plugin-dts": "^5.1.0"
+  },
+  "peerDependencies": {
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "vue": "^3.5.43"
   },
   "scripts": {
     "build": "pnpm build:vue && pnpm build:react",