@component-hook/picker 1.5.1 → 1.6.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/picker.es.js +2 -2
- package/dist/react/picker.umd.js +1 -1
- package/dist/vue/picker.es.js +1 -1
- package/dist/vue/picker.umd.js +1 -1
- package/package.json +27 -27
package/dist/react/picker.es.js
CHANGED
|
@@ -223,7 +223,6 @@ function L({ column: e, fields: t, selectedIndex: r = 0, onChange: i }, a) {
|
|
|
223
223
|
}
|
|
224
224
|
return n(a, () => ({ scrollToSelected: g })), /* @__PURE__ */ s("div", {
|
|
225
225
|
role: "presentation",
|
|
226
|
-
"aria-label": "Picker column",
|
|
227
226
|
className: "chook-picker-column",
|
|
228
227
|
onTouchStart: u,
|
|
229
228
|
onTouchMove: d,
|
|
@@ -239,6 +238,7 @@ function L({ column: e, fields: t, selectedIndex: r = 0, onChange: i }, a) {
|
|
|
239
238
|
},
|
|
240
239
|
children: /* @__PURE__ */ s("ul", {
|
|
241
240
|
ref: o,
|
|
241
|
+
"aria-label": "Picker column",
|
|
242
242
|
style: {
|
|
243
243
|
overflowY: "hidden",
|
|
244
244
|
transform: "translate3d(0, calc(var(--offset-y) * 1px), 0)",
|
|
@@ -318,7 +318,7 @@ function V({ values: e, columns: n, loading: o = !1, loadingSlot: c, emptySlot:
|
|
|
318
318
|
return e.some((e, t) => e !== f[t]);
|
|
319
319
|
}
|
|
320
320
|
return t(() => {
|
|
321
|
-
|
|
321
|
+
e && E(e) && p([...e]);
|
|
322
322
|
}, [e]), t(() => {
|
|
323
323
|
let e = w.length, t = [], n = [...f], r = !1;
|
|
324
324
|
for (let i = 0; i < e; i++) {
|
package/dist/react/picker.umd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`react`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.picker={},e.React,e.react_jsx_runtime))})(this,function(e,t,n){var r=document.createElement(`style`);r.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(r),Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var i=.52,a=.008,o=[`year`,`month`,`day`],s=[`hour`,`minute`,`second`],c=Array.isArray;function l(e,t){if(m(e))return`multiple`;let[n]=e;return n?.[t.children]?`cascade`:`single`}function u(e){return{children:e?.children||`children`,label:e?.label||`label`,value:e?.value||`value`}}function d(e,t,n){if(m(e))return[];let r=[],i=e,a=0;for(;i;){let e=t[a],o=p(i,e,n);o===-1&&(o=0),r.push(i),a+=1,i=i[o]?.[n.children]}return r}function f(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 p(e,t,n){return e.findIndex(e=>e?.[n.value]===t)}function m(e){let[t]=e;return c(t)}function h(e,t){return e>t?`horizontal`:t>e?`vertical`:``}function g(){let{fontSize:e}=getComputedStyle(document.documentElement);return Number(e.replace(`px`,``))||16}function _(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 v(e,t){return e===t.getFullYear()}function y(e,t){return e===t.getFullYear()}function b(e,t){return e===t.getMonth()+1}function x(e,t){return e===t.getMonth()+1}function S(e,t){return new Date(e,t,0).getDate()}function C(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 w(e){return e}function T(e){return/^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/.test(e)}function E(e){if(!T(e))return null;let[t,n,r]=e.split(`:`,3);return{hour:Number(t),minute:Number(n),second:Number(r)}}function D(e){return e.padStart(2,`0`)}function O(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 k(e){return(0,t.forwardRef)(e)}function A(){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=h(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 j({column:e,onChange:n}){let r=g()/16,[i,o]=(0,t.useState)(0),s=(0,t.useRef)(null),c=(0,t.useRef)(0),l=(0,t.useRef)(0),u=(0,t.useRef)(0),d=(0,t.useRef)(0),f=(0,t.useRef)(!1),p=(0,t.useRef)(null),{pointer:m,start:h,move:_,stop:v}=(0,t.useMemo)(()=>A(),[]);function y(e){return e*r}function b(t){let n=e.length,r=Math.round(-t/y(48));return r<0?0:r>=n?n-1:r}function x(e){let t=-e*y(48),r=()=>n?.(e);f.current&&t!==c.current?p.current=r:r(),w(t)}function S(e){h(e),f.current=!0,o(0),u.current=Date.now(),l.current=c.current,d.current=l.current,p.current=null}function C(t){if(_(t))return;let n=e.length,r=l.current+m.deltaY,i=y((n-1)*-48),a=Math.min(Math.max(r,i),0),o=Date.now();w(a),!(o-u.current<=300)&&(u.current=o,d.current=a)}function w(e){c.current=e,s.current&&s.current.style.setProperty(`--offset-y`,String(e))}function T(){v();let e=c.current-d.current,t=Date.now()-u.current;if(t<300&&Math.abs(e)>15){E(e,t);return}let n=b(c.current);o(150),x(n),f.current=!1}function E(e,t){let n=Math.abs(e/t),r=b(c.current+n/a*(e<0?-1:1));o(300),x(r)}function D(){o(0),f.current=!1,p.current&&=(p.current(),null)}function O(e,t=`auto`){f.current&&t===`smooth`||(p.current=null,f.current=t===`smooth`,o(t===`smooth`?150:0),x(e))}return{columnRef:s,transitionDuration:i,onPointerDown:S,onPointerMove:C,onPointerUp:T,stopInertialSliding:D,scrollToIndex:O}}function M({column:e,fields:r,selectedIndex:a=0,onChange:o},s){let{columnRef:c,transitionDuration:l,onPointerDown:u,onPointerMove:d,onPointerUp:f,stopInertialSliding:p,scrollToIndex:m}=j({column:e,onChange:h});function h(e){e!==a&&o(e)}function g(e=a,t){m(e,t)}function _(e){e!==a&&g(e,`smooth`)}return(0,t.useImperativeHandle)(s,()=>({scrollToSelected:g})),(0,n.jsx)(`div`,{role:`presentation`,
|
|
2
|
+
/*$vite$:1*/`,document.head.appendChild(r),Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var i=.52,a=.008,o=[`year`,`month`,`day`],s=[`hour`,`minute`,`second`],c=Array.isArray;function l(e,t){if(m(e))return`multiple`;let[n]=e;return n?.[t.children]?`cascade`:`single`}function u(e){return{children:e?.children||`children`,label:e?.label||`label`,value:e?.value||`value`}}function d(e,t,n){if(m(e))return[];let r=[],i=e,a=0;for(;i;){let e=t[a],o=p(i,e,n);o===-1&&(o=0),r.push(i),a+=1,i=i[o]?.[n.children]}return r}function f(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 p(e,t,n){return e.findIndex(e=>e?.[n.value]===t)}function m(e){let[t]=e;return c(t)}function h(e,t){return e>t?`horizontal`:t>e?`vertical`:``}function g(){let{fontSize:e}=getComputedStyle(document.documentElement);return Number(e.replace(`px`,``))||16}function _(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 v(e,t){return e===t.getFullYear()}function y(e,t){return e===t.getFullYear()}function b(e,t){return e===t.getMonth()+1}function x(e,t){return e===t.getMonth()+1}function S(e,t){return new Date(e,t,0).getDate()}function C(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 w(e){return e}function T(e){return/^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/.test(e)}function E(e){if(!T(e))return null;let[t,n,r]=e.split(`:`,3);return{hour:Number(t),minute:Number(n),second:Number(r)}}function D(e){return e.padStart(2,`0`)}function O(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 k(e){return(0,t.forwardRef)(e)}function A(){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=h(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 j({column:e,onChange:n}){let r=g()/16,[i,o]=(0,t.useState)(0),s=(0,t.useRef)(null),c=(0,t.useRef)(0),l=(0,t.useRef)(0),u=(0,t.useRef)(0),d=(0,t.useRef)(0),f=(0,t.useRef)(!1),p=(0,t.useRef)(null),{pointer:m,start:h,move:_,stop:v}=(0,t.useMemo)(()=>A(),[]);function y(e){return e*r}function b(t){let n=e.length,r=Math.round(-t/y(48));return r<0?0:r>=n?n-1:r}function x(e){let t=-e*y(48),r=()=>n?.(e);f.current&&t!==c.current?p.current=r:r(),w(t)}function S(e){h(e),f.current=!0,o(0),u.current=Date.now(),l.current=c.current,d.current=l.current,p.current=null}function C(t){if(_(t))return;let n=e.length,r=l.current+m.deltaY,i=y((n-1)*-48),a=Math.min(Math.max(r,i),0),o=Date.now();w(a),!(o-u.current<=300)&&(u.current=o,d.current=a)}function w(e){c.current=e,s.current&&s.current.style.setProperty(`--offset-y`,String(e))}function T(){v();let e=c.current-d.current,t=Date.now()-u.current;if(t<300&&Math.abs(e)>15){E(e,t);return}let n=b(c.current);o(150),x(n),f.current=!1}function E(e,t){let n=Math.abs(e/t),r=b(c.current+n/a*(e<0?-1:1));o(300),x(r)}function D(){o(0),f.current=!1,p.current&&=(p.current(),null)}function O(e,t=`auto`){f.current&&t===`smooth`||(p.current=null,f.current=t===`smooth`,o(t===`smooth`?150:0),x(e))}return{columnRef:s,transitionDuration:i,onPointerDown:S,onPointerMove:C,onPointerUp:T,stopInertialSliding:D,scrollToIndex:O}}function M({column:e,fields:r,selectedIndex:a=0,onChange:o},s){let{columnRef:c,transitionDuration:l,onPointerDown:u,onPointerMove:d,onPointerUp:f,stopInertialSliding:p,scrollToIndex:m}=j({column:e,onChange:h});function h(e){e!==a&&o(e)}function g(e=a,t){m(e,t)}function _(e){e!==a&&g(e,`smooth`)}return(0,t.useImperativeHandle)(s,()=>({scrollToSelected:g})),(0,n.jsx)(`div`,{role:`presentation`,className:`chook-picker-column`,onTouchStart:u,onTouchMove:d,onTouchEnd:f,onTouchCancel:f,onMouseDown:u,onMouseMove:d,onMouseUp:f,onMouseLeave:f,style:{overflowY:`hidden`,touchAction:`none`},children:(0,n.jsx)(`ul`,{ref:c,"aria-label":`Picker column`,style:{overflowY:`hidden`,transform:`translate3d(0, calc(var(--offset-y) * 1px), 0)`,transitionDuration:`${l}ms`,transitionProperty:l?`all`:`none`,touchAction:`none`},onTransitionEnd:p,children:e.map((e,t)=>(0,n.jsx)(`div`,{tabIndex:0,role:`button`,"aria-label":`Select option`,className:`chook-picker-column-item`,onClick:()=>_(t),onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&_(t)},children:(0,n.jsx)(`p`,{className:`chook-picker-column-label`,style:{transform:`rotate3d(1, 0, 0, calc((${t*48} + var(--offset-y)) * ${i}deg)`},children:e?.[r.label]})},e?.[r.value]))})})}var N=k(M);N.displayName=`Column`;function P(e,r){let{loading:i,loadingSlot:a,columns:o,emptySlot:s,currentColumns:c,fields:l,selectedIndices:u,updateSelectedValueByIndex:d}=e,f=(0,t.useRef)([]);function p(e,t){f.current[e]?.scrollToSelected(t)}return(0,t.useImperativeHandle)(r,()=>({scrollColumnToSelected:p})),i?(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(`div`,{className:`chook-picker-loading`,children:a}),(0,n.jsx)(`div`,{className:`chook-picker-columns`})]}):o.length?(0,n.jsxs)(`div`,{className:`chook-picker-columns chook-picker-columns-backdrop`,onTouchMove:e=>e.stopPropagation(),children:[c.map((e,t)=>(0,n.jsx)(N,{ref:e=>{f.current[t]=e},column:e,fields:l,selectedIndex:u[t],onChange:e=>d(t,e)},t)),(0,n.jsx)(`div`,{className:`chook-picker-mask-backdrop`})]}):(0,n.jsx)(`div`,{className:`chook-picker-columns`,children:s})}var F=k(P);F.displayName=`Columns`;function I({values:e,columns:r,loading:i=!1,loadingSlot:a,emptySlot:o,columnsFieldNames:s,onChange:c}){let[m,h]=(0,t.useState)(e??[]),[g,_]=(0,t.useState)([]),v=(0,t.useRef)(null),y=u(s),b=l(r,y),x=(0,t.useMemo)(()=>b===`single`?[r]:b===`multiple`?r:d(r,m,y),[r,b,m,y]);function S(e,t){let n=x[e],r=n[t]?.[y.value];if(r===m[e])return;let i=[...m];if(i[e]=r,b===`cascade`){let r=n[t],a=f(r,e,i,y);h(a),c?.(a)}else h(i),c?.(i)}function C(e){return e.some((e,t)=>e!==m[t])}return(0,t.useEffect)(()=>{e&&C(e)&&h([...e])},[e]),(0,t.useEffect)(()=>{let e=x.length,t=[],n=[...m],r=!1;for(let i=0;i<e;i++){let e=x[i],a=m[i],o=p(e,a,y);if(o===-1){let r=(g[i]??0)>=e.length?Math.max(e.length-1,0):0;n[i]=e[r]?.[y.value],t[i]=r}else t[i]=o;t[i]!==g[i]&&(v.current?.scrollColumnToSelected(i,t[i]),r=!0)}r&&(h(n),_(t))},[m,x,y]),(0,n.jsx)(`div`,{className:`chook-picker-container`,"aria-label":`Picker`,children:(0,n.jsx)(F,{ref:v,loading:i,loadingSlot:a,columns:r,emptySlot:o,currentColumns:x,fields:y,selectedIndices:g,updateSelectedValueByIndex:S})})}function L({values:e,columnsType:r=o,minDate:i=new Date(new Date().getFullYear()-10,0,1),maxDate:a=new Date(new Date().getFullYear()+10,11,31),formatYearLabel:s=w,formatMonthLabel:c=w,formatDayLabel:l=w,onChange:u},d){let[f,p]=(0,t.useState)([]),m=(0,t.useMemo)(()=>e??f,[e,f]),h=(0,t.useMemo)(()=>{let e={year:g,month:T,day:E};return r.map(t=>e[t]())},[r,i,a,m,s,c,l]);function g(){return _(i.getFullYear(),a.getFullYear(),s)}function T(){let e=D(`year`);return _(v(e,i)?i.getMonth()+1:1,y(e,a)?a.getMonth()+1:12,c)}function E(){let e=D(`year`),t=D(`month`),n=v(e,i)&&b(t,i),r=y(e,a)&&x(t,a);return _(n?i.getDate():1,r?a.getDate():S(e,t),l)}function D(e){let t=r.indexOf(e),n=m?.[t];return n?Number(n):C(i,a,e)}function O(t){e||p(t),u?.(t)}function k(){O(r.map(e=>C(i,a,e)))}return(0,t.useEffect)(()=>{(!e||!e.length)&&k()},[]),(0,t.useImperativeHandle)(d,()=>({setCurrentDate:k})),(0,n.jsx)(I,{values:m,columns:h,onChange:O})}var R=k(L);R.displayName=`DatePicker`;function z({values:e,columnsType:r=s,minTime:i,maxTime:a,formatHourLabel:o=D,formatMinuteLabel:c=D,formatSecondLabel:l=D,onChange:u},d){let[f,p]=(0,t.useState)([]),m=(0,t.useMemo)(()=>e??f,[e,f]),h=(0,t.useMemo)(()=>E(i??``)??{hour:0,minute:0,second:0},[i]),g=(0,t.useMemo)(()=>E(a??``)??{hour:23,minute:59,second:59},[a]),v={hour:b,minute:x,second:S},y=r.map(e=>v[e]());function b(){return _(h.hour,g.hour,o)}function x(){let e=C(`hour`),{hour:t,minute:n}=h,{hour:r,minute:i}=g;return _(e===t?n:0,e===r?i:59,c)}function S(){let e=C(`hour`),t=C(`minute`),{hour:n,minute:r,second:i}=h,{hour:a,minute:o,second:s}=g;return _(e===n&&t===r?i:0,e===a&&t===o?s:59,l)}function C(e){let t=r.indexOf(e),n=m?.[t];return n===void 0?O(h,g,e):Number(n)}function w(t){e||p(t),u?.(t)}function T(){w(r.map(e=>O(h,g,e)))}return(0,t.useEffect)(()=>{(!e||!e.length)&&T()},[]),(0,t.useImperativeHandle)(d,()=>({setCurrentTime:T})),(0,n.jsx)(I,{values:m,columns:y,onChange:w})}var B=k(z);B.displayName=`TimePicker`,e.DatePicker=R,e.Picker=I,e.TimePicker=B});
|
package/dist/vue/picker.es.js
CHANGED
|
@@ -222,7 +222,6 @@ var J = ["onClick"], Y = /* @__PURE__ */ a({
|
|
|
222
222
|
}
|
|
223
223
|
return n({ scrollToSelected: w }), (n, a) => (l(), r("div", {
|
|
224
224
|
class: "chook-picker-column",
|
|
225
|
-
"aria-label": "Picker column",
|
|
226
225
|
onTouchstartPassive: a[1] ||= (...e) => g(p) && g(p)(...e),
|
|
227
226
|
onTouchmove: a[2] ||= b((...e) => g(_) && g(_)(...e), ["prevent"]),
|
|
228
227
|
onTouchendPassive: a[3] ||= (...e) => g(v) && g(v)(...e),
|
|
@@ -232,6 +231,7 @@ var J = ["onClick"], Y = /* @__PURE__ */ a({
|
|
|
232
231
|
onMouseupPassive: a[7] ||= (...e) => g(v) && g(v)(...e),
|
|
233
232
|
onMouseleavePassive: a[8] ||= (...e) => g(v) && g(v)(...e)
|
|
234
233
|
}, [i("ul", {
|
|
234
|
+
"aria-label": "Picker column",
|
|
235
235
|
style: c({
|
|
236
236
|
overflowY: "hidden",
|
|
237
237
|
"--offset-y": `${g(u)}`,
|
package/dist/vue/picker.umd.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
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(`:`,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`,"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});
|
|
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(`:`,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
CHANGED
|
@@ -1,30 +1,30 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@component-hook/picker",
|
|
3
|
-
"
|
|
4
|
-
"version": "1.5.1",
|
|
3
|
+
"version": "1.6.0",
|
|
5
4
|
"description": "Picker component with vue3 and react",
|
|
6
|
-
"
|
|
7
|
-
|
|
5
|
+
"keywords": [
|
|
6
|
+
"date-picker",
|
|
7
|
+
"picker",
|
|
8
|
+
"react",
|
|
9
|
+
"time-picker",
|
|
10
|
+
"vue",
|
|
11
|
+
"vue3"
|
|
12
|
+
],
|
|
8
13
|
"homepage": "https://github.com/tzuyi0817/component-hook/tree/master/packages/picker#readme",
|
|
14
|
+
"bugs": {
|
|
15
|
+
"url": "https://github.com/tzuyi0817/component-hook/issues"
|
|
16
|
+
},
|
|
17
|
+
"license": "MIT",
|
|
18
|
+
"author": "Tzuyi",
|
|
9
19
|
"repository": {
|
|
10
20
|
"type": "git",
|
|
11
21
|
"url": "git+https://github.com/tzuyi0817/component-hook.git",
|
|
12
22
|
"directory": "packages/picker"
|
|
13
23
|
},
|
|
14
|
-
"
|
|
15
|
-
"
|
|
16
|
-
},
|
|
17
|
-
"publishConfig": {
|
|
18
|
-
"tag": "latest"
|
|
19
|
-
},
|
|
20
|
-
"keywords": [
|
|
21
|
-
"vue",
|
|
22
|
-
"vue3",
|
|
23
|
-
"react",
|
|
24
|
-
"picker",
|
|
25
|
-
"date-picker",
|
|
26
|
-
"time-picker"
|
|
24
|
+
"files": [
|
|
25
|
+
"dist"
|
|
27
26
|
],
|
|
27
|
+
"type": "module",
|
|
28
28
|
"exports": {
|
|
29
29
|
"./vue": {
|
|
30
30
|
"types": "./dist/vue/picker.es.d.ts",
|
|
@@ -37,18 +37,18 @@
|
|
|
37
37
|
"require": "./dist/react/picker.umd.js"
|
|
38
38
|
}
|
|
39
39
|
},
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
],
|
|
43
|
-
"peerDependencies": {
|
|
44
|
-
"react": "^19.2.8",
|
|
45
|
-
"react-dom": "^19.2.8",
|
|
46
|
-
"vue": "^3.5.41"
|
|
40
|
+
"publishConfig": {
|
|
41
|
+
"tag": "latest"
|
|
47
42
|
},
|
|
48
43
|
"devDependencies": {
|
|
49
|
-
"@microsoft/api-extractor": "^7.
|
|
50
|
-
"sass-embedded": "^1.
|
|
51
|
-
"vite-plugin-dts": "^5.0
|
|
44
|
+
"@microsoft/api-extractor": "^7.59.1",
|
|
45
|
+
"sass-embedded": "^1.104.1",
|
|
46
|
+
"vite-plugin-dts": "^5.1.0"
|
|
47
|
+
},
|
|
48
|
+
"peerDependencies": {
|
|
49
|
+
"react": "^19.3.0",
|
|
50
|
+
"react-dom": "^19.3.0",
|
|
51
|
+
"vue": "^3.5.43"
|
|
52
52
|
},
|
|
53
53
|
"scripts": {
|
|
54
54
|
"build": "pnpm build:vue && pnpm build:react",
|