@component-hook/picker 1.2.0 → 1.2.1
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 +298 -286
- package/dist/react/picker.umd.js +3 -3
- package/dist/vue/picker.es.js +127 -126
- package/dist/vue/picker.umd.js +1 -1
- package/package.json +1 -1
package/dist/react/picker.umd.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
/*$vite$:1*/`,document.head.appendChild(
|
|
1
|
+
(function(D,f){typeof exports=="object"&&typeof module<"u"?f(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],f):(D=typeof globalThis<"u"?globalThis:D||self,f(D.picker={},D.React))})(this,(function(D,f){"use strict";var ne=document.createElement("style");ne.textContent=`:root{--chook-picker-background: #fff;--chook-picker-columns-margin: 0 1rem;--chook-picker-columns-backdrop: linear-gradient( to bottom, #f2f2f2 0px, #f2f2f2 .0625rem, transparent .0625rem, transparent calc(100% - .0625rem) , #f2f2f2 calc(100% - .0625rem) , #f2f2f2 100% );--chook-picker-mask-backdrop: linear-gradient(180deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4)), linear-gradient(0deg, rgba(255, 255, 255, .9), rgba(255, 255, 255, .4));--chook-picker-column-label-color: #323233;--chook-picker-column-label-padding: 0 .25rem;--chook-picker-column-font-size: 1rem;--chook-picker-column-font-weight: 500}.chook-picker-container{background:var(--chook-picker-background)}.chook-picker-columns{width:calc(100% - var(--chook-picker-columns-margin) * 2);height:13.5rem;overflow:hidden;position:relative;display:flex;margin:var(--chook-picker-columns-margin)}.chook-picker-columns-backdrop{background-image:var(--chook-picker-columns-backdrop);background-repeat:no-repeat;background-position:center;background-size:100% 3rem}.chook-picker-mask-backdrop{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;background-image:var(--chook-picker-mask-backdrop);background-repeat:no-repeat;background-position:top,bottom;background-size:100% 5.25rem}.chook-picker-loading{height:100%;width:100%;position:absolute;top:0;left:0}.chook-picker-column{flex:1 1 0%;overflow:hidden;padding:5.375rem 0;cursor:grab}.chook-picker-column ul{margin:0;padding:0;list-style:none}.chook-picker-column-item{height:3rem;display:flex;justify-content:center;align-items:center;cursor:grab}.chook-picker-column-label{color:var(--chook-picker-column-label-color);font-size:var(--chook-picker-column-font-size);font-weight:var(--chook-picker-column-font-weight);padding:var(--chook-picker-column-label-padding);text-overflow:ellipsis;overflow:hidden;white-space:nowrap;-webkit-user-select:none;user-select:none}
|
|
2
|
+
/*$vite$:1*/`,document.head.appendChild(ne);var B={exports:{}},U={};var re;function _e(){if(re)return U;re=1;var e=Symbol.for("react.transitional.element"),n=Symbol.for("react.fragment");function r(o,c,a){var d=null;if(a!==void 0&&(d=""+a),c.key!==void 0&&(d=""+c.key),"key"in c){a={};for(var s in c)s!=="key"&&(a[s]=c[s])}else a=c;return c=a.ref,{$$typeof:e,type:o,key:d,ref:c!==void 0?c:null,props:a}}return U.Fragment=n,U.jsx=r,U.jsxs=r,U}var L={};var oe;function Se(){return oe||(oe=1,process.env.NODE_ENV!=="production"&&(function(){function e(t){if(t==null)return null;if(typeof t=="function")return t.$$typeof===T?null:t.displayName||t.name||null;if(typeof t=="string")return t;switch(t){case w:return"Fragment";case M:return"Profiler";case _:return"StrictMode";case p:return"Suspense";case P:return"SuspenseList";case j:return"Activity"}if(typeof t=="object")switch(typeof t.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),t.$$typeof){case O:return"Portal";case b:return t.displayName||"Context";case l:return(t._context.displayName||"Context")+".Consumer";case g:var u=t.render;return t=t.displayName,t||(t=u.displayName||u.name||"",t=t!==""?"ForwardRef("+t+")":"ForwardRef"),t;case A:return u=t.displayName||null,u!==null?u:e(t.type)||"Memo";case I:u=t._payload,t=t._init;try{return e(t(u))}catch{}}return null}function n(t){return""+t}function r(t){try{n(t);var u=!1}catch{u=!0}if(u){u=console;var R=u.error,y=typeof Symbol=="function"&&Symbol.toStringTag&&t[Symbol.toStringTag]||t.constructor.name||"Object";return R.call(u,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",y),n(t)}}function o(t){if(t===w)return"<>";if(typeof t=="object"&&t!==null&&t.$$typeof===I)return"<...>";try{var u=e(t);return u?"<"+u+">":"<...>"}catch{return"<...>"}}function c(){var t=S.A;return t===null?null:t.getOwner()}function a(){return Error("react-stack-top-frame")}function d(t){if(N.call(t,"key")){var u=Object.getOwnPropertyDescriptor(t,"key").get;if(u&&u.isReactWarning)return!1}return t.key!==void 0}function s(t,u){function R(){z||(z=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",u))}R.isReactWarning=!0,Object.defineProperty(t,"key",{get:R,configurable:!0})}function E(){var t=e(this.type);return W[t]||(W[t]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),t=this.props.ref,t!==void 0?t:null}function m(t,u,R,y,Z,ee){var C=R.ref;return t={$$typeof:x,type:t,key:u,props:R,_owner:y},(C!==void 0?C:null)!==null?Object.defineProperty(t,"ref",{enumerable:!1,get:E}):Object.defineProperty(t,"ref",{enumerable:!1,value:null}),t._store={},Object.defineProperty(t._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(t,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(t,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:Z}),Object.defineProperty(t,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:ee}),Object.freeze&&(Object.freeze(t.props),Object.freeze(t)),t}function v(t,u,R,y,Z,ee){var C=u.children;if(C!==void 0)if(y)if(H(C)){for(y=0;y<C.length;y++)k(C[y]);Object.freeze&&Object.freeze(C)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else k(C);if(N.call(u,"key")){C=e(t);var X=Object.keys(u).filter(function(Je){return Je!=="key"});y=0<X.length?"{key: someKey, "+X.join(": ..., ")+": ...}":"{key: someKey}",Ee[C+y]||(X=0<X.length?"{"+X.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
|
|
3
3
|
let props = %s;
|
|
4
4
|
<%s {...props} />
|
|
5
5
|
React keys must be passed directly to JSX without using spread:
|
|
6
6
|
let props = %s;
|
|
7
|
-
<%s key={someKey} {...props} />`,C,P,X,P),Ee[P+C]=!0)}if(P=null,S!==void 0&&(r(S),P=""+S),m(u)&&(r(u.key),P=""+u.key),"key"in u){S={};for(var ee in u)ee!=="key"&&(S[ee]=u[ee])}else S=u;return P&&s(S,typeof t=="function"?t.displayName||t.name||"Unknown":t),d(t,P,S,o(),G,$)}function k(t){i(t)?t._store&&(t._store.validated=1):typeof t=="object"&&t!==null&&t.$$typeof===I&&(t._payload.status==="fulfilled"?i(t._payload.value)&&t._payload.value._store&&(t._payload.value._store.validated=1):t._store&&(t._store.validated=1))}function i(t){return typeof t=="object"&&t!==null&&t.$$typeof===R}var h=f,R=Symbol.for("react.transitional.element"),x=Symbol.for("react.portal"),w=Symbol.for("react.fragment"),_=Symbol.for("react.strict_mode"),O=Symbol.for("react.profiler"),l=Symbol.for("react.consumer"),T=Symbol.for("react.context"),g=Symbol.for("react.forward_ref"),p=Symbol.for("react.suspense"),A=Symbol.for("react.suspense_list"),N=Symbol.for("react.memo"),I=Symbol.for("react.lazy"),b=Symbol.for("react.activity"),M=Symbol.for("react.client.reference"),y=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,D=Object.prototype.hasOwnProperty,H=Array.isArray,F=console.createTask?console.createTask:function(){return null};h={react_stack_bottom_frame:function(t){return t()}};var z,be={},Te=h.react_stack_bottom_frame.bind(h,a)(),ve=F(c(a)),Ee={};L.Fragment=w,L.jsx=function(t,u,S){var C=1e4>y.recentlyCreatedOwnerStacks++;return v(t,u,S,!1,C?Error("react-stack-top-frame"):Te,C?F(c(t)):ve)},L.jsxs=function(t,u,S){var C=1e4>y.recentlyCreatedOwnerStacks++;return v(t,u,S,!0,C?Error("react-stack-top-frame"):Te,C?F(c(t)):ve)}})()),L}var re;function Re(){return re||(re=1,process.env.NODE_ENV==="production"?W.exports=_e():W.exports=Se()),W.exports}var Y=Re();const xe=Array.isArray;function Oe(e,n){if(se(e))return"multiple";const[r]=e;return r?.[n.children]?"cascade":"single"}function Me(e){return{children:e?.children||"children",label:e?.label||"label",value:e?.value||"value"}}function we(e,n,r){if(se(e))return[];const c=[];let o=e,a=0;for(;o;){const m=n[a];let s=ce(o,m,r);s===-1&&(s=0),c.push(o),a+=1,o=o[s]?.[r.children]}return c}function ye(e,n,r,c){const o=[...r];let a=e,m=n+1;for(;a?.[c.children];){const s=a[c.children][0];o[m]=s.value,a=s,m+=1}return o}function ce(e,n,r){return e.findIndex(c=>c?.[r.value]===n)}function se(e){const[n]=e;return xe(n)}function Ce(e,n){return e>n?"horizontal":n>e?"vertical":""}function V(e,n,r){const c=[];for(let o=e;o<=n;o++){const a=r(`${o}`);c.push({label:a,value:o})}return c}function ae(e,n){return e===n.getFullYear()}function ie(e,n){return e===n.getFullYear()}function Pe(e,n){return e===n.getMonth()+1}function Ae(e,n){return e===n.getMonth()+1}function Ne(e,n){return new Date(e,n,0).getDate()}function ue(e,n,r){const c=new Date,o=Date.now(),a=e.getTime(),m=n.getTime(),s=o>=a&&o<=m;return r==="year"?s?c.getFullYear():e.getFullYear():r==="month"?s?c.getMonth()+1:e.getMonth()+1:s?c.getDate():e.getDate()}function Z(e){return e}function Ye(e){return/^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/.test(e)}function le(e){if(!Ye(e))return null;const[n,r,c]=e.split(":");return{hour:Number(n),minute:Number(r),second:Number(c)}}function Q(e){return e.padStart(2,"0")}function fe(e,n,r){const c=Date.now(),{hour:o,minute:a,second:m}=e,{hour:s,minute:E,second:d}=n,v=new Date().setHours(o,a,m),k=new Date().setHours(s,E,d),i=c>=v&&c<=k;return r==="hour"?i?new Date().getHours():o:r==="minute"?i?new Date().getMinutes():a:i?new Date().getSeconds():m}function B(e){return f.forwardRef(e)}const Ie=16,J=48,je=.52,de=150,K=300,De=15,Fe=.008,me=5,Ve=["year","month","day"],He=["hour","minute","second"];function Xe(){const e={startX:0,startY:0,deltaX:0,deltaY:0,offsetX:0,offsetY:0};let n="",r=!0;const c=()=>n==="vertical",o=()=>n==="horizontal";function a(){e.deltaX=0,e.deltaY=0,e.offsetX=0,e.offsetY=0,n="",r=!0}function m(d){const v="touches"in d?d.touches[0]:d;a(),e.startX=v.clientX,e.startY=v.clientY}function s(d){if(!e.startX||!e.startY)return!0;const v="touches"in d?d.touches[0]:d;e.deltaX=Math.max(v.clientX,0)-e.startX,e.deltaY=v.clientY-e.startY,e.offsetX=Math.abs(e.deltaX),e.offsetY=Math.abs(e.deltaY);const k=10;(!n||e.offsetX<k&&e.offsetY<k)&&(n=Ce(e.offsetX,e.offsetY)),r&&(e.offsetX>me||e.offsetY>me)&&(r=!1)}function E(){e.startX=0,e.startY=0}return{pointer:e,move:s,start:m,stop:E,reset:a,isVertical:c,isHorizontal:o}}function Ue({column:e,onChange:n}){const c=Number.parseFloat(getComputedStyle(document.documentElement).fontSize)/Ie,[o,a]=f.useState(0),[m,s]=f.useState(0),E=f.useRef(0),d=f.useRef(0),v=f.useRef(0),k=f.useRef(!1),i=f.useRef(null),{pointer:h,start:R,move:x,stop:w}=f.useMemo(()=>Xe(),[]);function _(b){return b*c}function O(b){const M=e.length,y=Math.round(-b/_(J));return y<0?0:y>=M?M-1:y}function l(b){const M=-b*_(J),y=()=>n?.(b);k.current&&M!==o?i.current=y:y(),a(M)}function T(b){R(b),k.current=!0,s(0),d.current=Date.now(),E.current=o,v.current=E.current,i.current=null}function g(b){if(x(b))return;const y=e.length,D=E.current+h.deltaY,H=_((y-1)*-J),F=Math.min(Math.max(D,H),0),z=Date.now();a(F),!(z-d.current<=K)&&(d.current=z,v.current=F)}function p(){w();const b=o-v.current,M=Date.now()-d.current;if(M<K&&Math.abs(b)>De){A(b,M);return}const y=O(o);s(de),l(y),k.current=!1}function A(b,M){const y=Math.abs(b/M),D=o+y/Fe*(b<0?-1:1),H=O(D);s(K),l(H)}function N(){s(0),k.current=!1,i.current&&(i.current(),i.current=null)}function I(b,M="auto"){k.current&&M==="smooth"||(i.current=null,k.current=M==="smooth",s(M==="smooth"?de:0),l(b))}return{offsetY:o,transitionDuration:m,onPointerDown:T,onPointerMove:g,onPointerUp:p,stopInertialSliding:N,scrollToIndex:I}}function Le({column:e,fields:n,selectedIndex:r=0,onChange:c},o){const{offsetY:a,transitionDuration:m,onPointerDown:s,onPointerMove:E,onPointerUp:d,stopInertialSliding:v,scrollToIndex:k}=Ue({column:e,onChange:i});function i(x){x!==r&&c(x)}function h(x=r,w){k(x,w)}function R(x){x!==r&&h(x,"smooth")}return f.useImperativeHandle(o,()=>({scrollToSelected:h})),Y.jsx("div",{role:"presentation","aria-label":"Picker column",className:"chook-picker-column",onTouchStart:s,onTouchMove:E,onTouchEnd:d,onTouchCancel:d,onMouseDown:s,onMouseMove:E,onMouseUp:d,onMouseLeave:d,style:{overflowY:"hidden",touchAction:"none"},children:Y.jsx("ul",{style:{overflowY:"hidden",transform:`translate3d(0, ${a}px, 0)`,transitionDuration:`${m}ms`,transitionProperty:m?"all":"none",touchAction:"none"},onTransitionEnd:v,children:e.map((x,w)=>Y.jsx("div",{tabIndex:0,role:"button","aria-label":"Select option",className:"chook-picker-column-item",onClick:()=>R(w),onKeyDown:_=>{(_.key==="Enter"||_.key===" ")&&R(w)},children:Y.jsx("p",{className:"chook-picker-column-label",style:{transform:`rotate3d(1, 0, 0, ${(w*J+a)*je}deg)`},children:x?.[n.label]})},x?.[n.value]))})})}const pe=B(Le);pe.displayName="Column";function ze(e,n){const{loading:r,loadingSlot:c,columns:o,emptySlot:a,currentColumns:m,fields:s,selectedIndices:E,updateSelectedValueByIndex:d}=e,v=f.useRef([]);function k(i,h){v.current[i]?.scrollToSelected(h)}return f.useImperativeHandle(n,()=>({scrollColumnToSelected:k})),r?Y.jsxs(Y.Fragment,{children:[Y.jsx("div",{className:"chook-picker-loading",children:c}),Y.jsx("div",{className:"chook-picker-columns"})]}):o.length?Y.jsxs("div",{className:"chook-picker-columns chook-picker-columns-backdrop",onTouchMove:i=>i.stopPropagation(),children:[m.map((i,h)=>Y.jsx(pe,{ref:R=>{v.current[h]=R},column:i,fields:s,selectedIndex:E[h],onChange:R=>d(h,R)},h)),Y.jsx("div",{className:"chook-picker-mask-backdrop"})]}):Y.jsx("div",{className:"chook-picker-columns",children:a})}const he=B(ze);he.displayName="Columns";function q({values:e,columns:n,loading:r=!1,loadingSlot:c,emptySlot:o,columnsFieldNames:a,onChange:m}){const[s,E]=f.useState(e??[]),[d,v]=f.useState([]),k=f.useRef(null),i=Me(a),h=Oe(n,i),R=f.useMemo(()=>h==="single"?[n]:h==="multiple"?n:we(n,s,i),[n,h,s,i]);function x(_,O){const l=R[_],T=l[O]?.[i.value],g=s[_];if(T===g)return;const p=[...s];if(p[_]=T,h==="cascade"){const A=l[O],N=ye(A,_,p,i);E(N),m?.(N)}else E(p),m?.(p)}function w(_){return _.some((O,l)=>O!==s[l])}return f.useEffect(()=>{!e||!w(e)||E([...e])},[e]),f.useEffect(()=>{const _=R.length,O=[],l=[...s];let T=!1;for(let g=0;g<_;g++){const p=R[g],A=s[g],N=ce(p,A,i);if(N===-1){const b=(d[g]??0)>=p.length?Math.max(p.length-1,0):0;l[g]=p[b]?.[i.value],O[g]=b}else O[g]=N;O[g]!==d[g]&&(k.current?.scrollColumnToSelected(g,O[g]),T=!0)}T&&(E(l),v(O))},[s,R,i]),Y.jsx("div",{className:"chook-picker-container","aria-label":"Picker",children:Y.jsx(he,{ref:k,loading:r,loadingSlot:c,columns:n,emptySlot:o,currentColumns:R,fields:i,selectedIndices:d,updateSelectedValueByIndex:x})})}function We({values:e,columnsType:n=Ve,minDate:r=new Date(new Date().getFullYear()-10,0,1),maxDate:c=new Date(new Date().getFullYear()+10,11,31),formatYearLabel:o=Z,formatMonthLabel:a=Z,formatDayLabel:m=Z,onChange:s},E){const[d,v]=f.useState([]),k=f.useMemo(()=>e??d,[e,d]),i=f.useMemo(()=>{const l={year:h,month:R,day:x};return n.map(T=>l[T]())},[n,r,c,k,o,a,m]);function h(){const l=r.getFullYear(),T=c.getFullYear();return V(l,T,o)}function R(){const l=w("year"),T=ae(l,r)?r.getMonth()+1:1,g=ie(l,c)?c.getMonth()+1:12;return V(T,g,a)}function x(){const l=w("year"),T=w("month"),g=ae(l,r)&&Pe(T,r),p=ie(l,c)&&Ae(T,c),A=g?r.getDate():1,N=p?c.getDate():Ne(l,T);return V(A,N,m)}function w(l){const T=n.indexOf(l),g=k?.[T];return g?Number(g):ue(r,c,l)}function _(l){e||v(l),s?.(l)}function O(){const l=n.map(T=>ue(r,c,T));_(l)}return f.useEffect(()=>{(!e||!e.length)&&O()},[]),f.useImperativeHandle(E,()=>({setCurrentDate:O})),Y.jsx(q,{values:k,columns:i,onChange:_})}const ke=B(We);ke.displayName="DatePicker";function Be({values:e,columnsType:n=He,minTime:r,maxTime:c,formatHourLabel:o=Q,formatMinuteLabel:a=Q,formatSecondLabel:m=Q,onChange:s},E){const[d,v]=f.useState([]),k=f.useMemo(()=>e??d,[e,d]),i=f.useMemo(()=>le(r??"")??{hour:0,minute:0,second:0},[r]),h=f.useMemo(()=>le(c??"")??{hour:23,minute:59,second:59},[c]),R={hour:w,minute:_,second:O},x=n.map(p=>R[p]());function w(){return V(i.hour,h.hour,o)}function _(){const p=l("hour"),{hour:A,minute:N}=i,{hour:I,minute:b}=h;return V(p===A?N:0,p===I?b:59,a)}function O(){const p=l("hour"),A=l("minute"),{hour:N,minute:I,second:b}=i,{hour:M,minute:y,second:D}=h;return V(p===N&&A===I?b:0,p===M&&A===y?D:59,m)}function l(p){const A=n.indexOf(p),N=k?.[A];return N!==void 0?Number(N):fe(i,h,p)}function T(p){e||v(p),s?.(p)}function g(){const p=n.map(A=>fe(i,h,A));T(p)}return f.useEffect(()=>{(!e||!e.length)&&g()},[]),f.useImperativeHandle(E,()=>({setCurrentTime:g})),Y.jsx(q,{values:k,columns:x,onChange:T})}const ge=B(Be);ge.displayName="TimePicker",j.DatePicker=ke,j.Picker=q,j.TimePicker=ge,Object.defineProperty(j,Symbol.toStringTag,{value:"Module"})}));
|
|
7
|
+
<%s key={someKey} {...props} />`,y,C,X,C),Ee[C+y]=!0)}if(C=null,R!==void 0&&(r(R),C=""+R),d(u)&&(r(u.key),C=""+u.key),"key"in u){R={};for(var te in u)te!=="key"&&(R[te]=u[te])}else R=u;return C&&s(R,typeof t=="function"?t.displayName||t.name||"Unknown":t),m(t,C,R,c(),Z,ee)}function k(t){i(t)?t._store&&(t._store.validated=1):typeof t=="object"&&t!==null&&t.$$typeof===I&&(t._payload.status==="fulfilled"?i(t._payload.value)&&t._payload.value._store&&(t._payload.value._store.validated=1):t._store&&(t._store.validated=1))}function i(t){return typeof t=="object"&&t!==null&&t.$$typeof===x}var h=f,x=Symbol.for("react.transitional.element"),O=Symbol.for("react.portal"),w=Symbol.for("react.fragment"),_=Symbol.for("react.strict_mode"),M=Symbol.for("react.profiler"),l=Symbol.for("react.consumer"),b=Symbol.for("react.context"),g=Symbol.for("react.forward_ref"),p=Symbol.for("react.suspense"),P=Symbol.for("react.suspense_list"),A=Symbol.for("react.memo"),I=Symbol.for("react.lazy"),j=Symbol.for("react.activity"),T=Symbol.for("react.client.reference"),S=h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,N=Object.prototype.hasOwnProperty,H=Array.isArray,F=console.createTask?console.createTask:function(){return null};h={react_stack_bottom_frame:function(t){return t()}};var z,W={},Te=h.react_stack_bottom_frame.bind(h,a)(),ve=F(o(a)),Ee={};L.Fragment=w,L.jsx=function(t,u,R){var y=1e4>S.recentlyCreatedOwnerStacks++;return v(t,u,R,!1,y?Error("react-stack-top-frame"):Te,y?F(o(t)):ve)},L.jsxs=function(t,u,R){var y=1e4>S.recentlyCreatedOwnerStacks++;return v(t,u,R,!0,y?Error("react-stack-top-frame"):Te,y?F(o(t)):ve)}})()),L}var ce;function Re(){return ce||(ce=1,process.env.NODE_ENV==="production"?B.exports=_e():B.exports=Se()),B.exports}var Y=Re();const xe=Array.isArray;function Oe(e,n){if(ae(e))return"multiple";const[r]=e;return r?.[n.children]?"cascade":"single"}function Me(e){return{children:e?.children||"children",label:e?.label||"label",value:e?.value||"value"}}function we(e,n,r){if(ae(e))return[];const o=[];let c=e,a=0;for(;c;){const d=n[a];let s=se(c,d,r);s===-1&&(s=0),o.push(c),a+=1,c=c[s]?.[r.children]}return o}function ye(e,n,r,o){const c=[...r];let a=e,d=n+1;for(;a?.[o.children];){const s=a[o.children][0];c[d]=s.value,a=s,d+=1}return c}function se(e,n,r){return e.findIndex(o=>o?.[r.value]===n)}function ae(e){const[n]=e;return xe(n)}function Ce(e,n){return e>n?"horizontal":n>e?"vertical":""}function V(e,n,r){const o=[];for(let c=e;c<=n;c++){const a=r(`${c}`);o.push({label:a,value:c})}return o}function ie(e,n){return e===n.getFullYear()}function ue(e,n){return e===n.getFullYear()}function Pe(e,n){return e===n.getMonth()+1}function Ae(e,n){return e===n.getMonth()+1}function Ne(e,n){return new Date(e,n,0).getDate()}function le(e,n,r){const o=new Date,c=Date.now(),a=e.getTime(),d=n.getTime(),s=c>=a&&c<=d;return r==="year"?s?o.getFullYear():e.getFullYear():r==="month"?s?o.getMonth()+1:e.getMonth()+1:s?o.getDate():e.getDate()}function Q(e){return e}function Ye(e){return/^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/.test(e)}function fe(e){if(!Ye(e))return null;const[n,r,o]=e.split(":");return{hour:Number(n),minute:Number(r),second:Number(o)}}function K(e){return e.padStart(2,"0")}function de(e,n,r){const o=Date.now(),{hour:c,minute:a,second:d}=e,{hour:s,minute:E,second:m}=n,v=new Date().setHours(c,a,d),k=new Date().setHours(s,E,m),i=o>=v&&o<=k;return r==="hour"?i?new Date().getHours():c:r==="minute"?i?new Date().getMinutes():a:i?new Date().getSeconds():d}function J(e){return f.forwardRef(e)}const Ie=16,G=48,je=.52,me=150,q=300,De=15,Fe=.008,pe=5,Ve=["year","month","day"],He=["hour","minute","second"];function Xe(){const e={startX:0,startY:0,deltaX:0,deltaY:0,offsetX:0,offsetY:0};let n="",r=!0;const o=()=>n==="vertical",c=()=>n==="horizontal";function a(){e.deltaX=0,e.deltaY=0,e.offsetX=0,e.offsetY=0,n="",r=!0}function d(m){const v="touches"in m?m.touches[0]:m;a(),e.startX=v.clientX,e.startY=v.clientY}function s(m){if(!e.startX||!e.startY)return!0;const v="touches"in m?m.touches[0]:m;e.deltaX=Math.max(v.clientX,0)-e.startX,e.deltaY=v.clientY-e.startY,e.offsetX=Math.abs(e.deltaX),e.offsetY=Math.abs(e.deltaY);const k=10;(!n||e.offsetX<k&&e.offsetY<k)&&(n=Ce(e.offsetX,e.offsetY)),r&&(e.offsetX>pe||e.offsetY>pe)&&(r=!1)}function E(){e.startX=0,e.startY=0}return{pointer:e,move:s,start:d,stop:E,reset:a,isVertical:o,isHorizontal:c}}function Ue({column:e,onChange:n}){const o=Number.parseFloat(getComputedStyle(document.documentElement).fontSize)/Ie,[c,a]=f.useState(0),d=f.useRef(null),s=f.useRef(0),E=f.useRef(0),m=f.useRef(0),v=f.useRef(0),k=f.useRef(!1),i=f.useRef(null),{pointer:h,start:x,move:O,stop:w}=f.useMemo(()=>Xe(),[]);function _(T){return T*o}function M(T){const S=e.length,N=Math.round(-T/_(G));return N<0?0:N>=S?S-1:N}function l(T){const S=-T*_(G),N=()=>n?.(T);k.current&&S!==s.current?i.current=N:N(),p(S)}function b(T){x(T),k.current=!0,a(0),m.current=Date.now(),E.current=s.current,v.current=E.current,i.current=null}function g(T){if(O(T))return;const N=e.length,H=E.current+h.deltaY,F=_((N-1)*-G),z=Math.min(Math.max(H,F),0),W=Date.now();p(z),!(W-m.current<=q)&&(m.current=W,v.current=z)}function p(T){s.current=T,d.current&&d.current.style.setProperty("--offset-y",`${T}`)}function P(){w();const T=s.current-v.current,S=Date.now()-m.current;if(S<q&&Math.abs(T)>De){A(T,S);return}const N=M(s.current);a(me),l(N),k.current=!1}function A(T,S){const N=Math.abs(T/S),H=s.current+N/Fe*(T<0?-1:1),F=M(H);a(q),l(F)}function I(){a(0),k.current=!1,i.current&&(i.current(),i.current=null)}function j(T,S="auto"){k.current&&S==="smooth"||(i.current=null,k.current=S==="smooth",a(S==="smooth"?me:0),l(T))}return{columnRef:d,transitionDuration:c,onPointerDown:b,onPointerMove:g,onPointerUp:P,stopInertialSliding:I,scrollToIndex:j}}function Le({column:e,fields:n,selectedIndex:r=0,onChange:o},c){const{columnRef:a,transitionDuration:d,onPointerDown:s,onPointerMove:E,onPointerUp:m,stopInertialSliding:v,scrollToIndex:k}=Ue({column:e,onChange:i});function i(O){O!==r&&o(O)}function h(O=r,w){k(O,w)}function x(O){O!==r&&h(O,"smooth")}return f.useImperativeHandle(c,()=>({scrollToSelected:h})),Y.jsx("div",{role:"presentation","aria-label":"Picker column",className:"chook-picker-column",onTouchStart:s,onTouchMove:E,onTouchEnd:m,onTouchCancel:m,onMouseDown:s,onMouseMove:E,onMouseUp:m,onMouseLeave:m,style:{overflowY:"hidden",touchAction:"none"},children:Y.jsx("ul",{ref:a,style:{overflowY:"hidden",transform:"translate3d(0, calc(var(--offset-y) * 1px), 0)",transitionDuration:`${d}ms`,transitionProperty:d?"all":"none",touchAction:"none"},onTransitionEnd:v,children:e.map((O,w)=>Y.jsx("div",{tabIndex:0,role:"button","aria-label":"Select option",className:"chook-picker-column-item",onClick:()=>x(w),onKeyDown:_=>{(_.key==="Enter"||_.key===" ")&&x(w)},children:Y.jsx("p",{className:"chook-picker-column-label",style:{transform:`rotate3d(1, 0, 0, calc((${w*G} + var(--offset-y)) * ${je}deg)`},children:O?.[n.label]})},O?.[n.value]))})})}const he=J(Le);he.displayName="Column";function ze(e,n){const{loading:r,loadingSlot:o,columns:c,emptySlot:a,currentColumns:d,fields:s,selectedIndices:E,updateSelectedValueByIndex:m}=e,v=f.useRef([]);function k(i,h){v.current[i]?.scrollToSelected(h)}return f.useImperativeHandle(n,()=>({scrollColumnToSelected:k})),r?Y.jsxs(Y.Fragment,{children:[Y.jsx("div",{className:"chook-picker-loading",children:o}),Y.jsx("div",{className:"chook-picker-columns"})]}):c.length?Y.jsxs("div",{className:"chook-picker-columns chook-picker-columns-backdrop",onTouchMove:i=>i.stopPropagation(),children:[d.map((i,h)=>Y.jsx(he,{ref:x=>{v.current[h]=x},column:i,fields:s,selectedIndex:E[h],onChange:x=>m(h,x)},h)),Y.jsx("div",{className:"chook-picker-mask-backdrop"})]}):Y.jsx("div",{className:"chook-picker-columns",children:a})}const ke=J(ze);ke.displayName="Columns";function $({values:e,columns:n,loading:r=!1,loadingSlot:o,emptySlot:c,columnsFieldNames:a,onChange:d}){const[s,E]=f.useState(e??[]),[m,v]=f.useState([]),k=f.useRef(null),i=Me(a),h=Oe(n,i),x=f.useMemo(()=>h==="single"?[n]:h==="multiple"?n:we(n,s,i),[n,h,s,i]);function O(_,M){const l=x[_],b=l[M]?.[i.value],g=s[_];if(b===g)return;const p=[...s];if(p[_]=b,h==="cascade"){const P=l[M],A=ye(P,_,p,i);E(A),d?.(A)}else E(p),d?.(p)}function w(_){return _.some((M,l)=>M!==s[l])}return f.useEffect(()=>{!e||!w(e)||E([...e])},[e]),f.useEffect(()=>{const _=x.length,M=[],l=[...s];let b=!1;for(let g=0;g<_;g++){const p=x[g],P=s[g],A=se(p,P,i);if(A===-1){const j=(m[g]??0)>=p.length?Math.max(p.length-1,0):0;l[g]=p[j]?.[i.value],M[g]=j}else M[g]=A;M[g]!==m[g]&&(k.current?.scrollColumnToSelected(g,M[g]),b=!0)}b&&(E(l),v(M))},[s,x,i]),Y.jsx("div",{className:"chook-picker-container","aria-label":"Picker",children:Y.jsx(ke,{ref:k,loading:r,loadingSlot:o,columns:n,emptySlot:c,currentColumns:x,fields:i,selectedIndices:m,updateSelectedValueByIndex:O})})}function We({values:e,columnsType:n=Ve,minDate:r=new Date(new Date().getFullYear()-10,0,1),maxDate:o=new Date(new Date().getFullYear()+10,11,31),formatYearLabel:c=Q,formatMonthLabel:a=Q,formatDayLabel:d=Q,onChange:s},E){const[m,v]=f.useState([]),k=f.useMemo(()=>e??m,[e,m]),i=f.useMemo(()=>{const l={year:h,month:x,day:O};return n.map(b=>l[b]())},[n,r,o,k,c,a,d]);function h(){const l=r.getFullYear(),b=o.getFullYear();return V(l,b,c)}function x(){const l=w("year"),b=ie(l,r)?r.getMonth()+1:1,g=ue(l,o)?o.getMonth()+1:12;return V(b,g,a)}function O(){const l=w("year"),b=w("month"),g=ie(l,r)&&Pe(b,r),p=ue(l,o)&&Ae(b,o),P=g?r.getDate():1,A=p?o.getDate():Ne(l,b);return V(P,A,d)}function w(l){const b=n.indexOf(l),g=k?.[b];return g?Number(g):le(r,o,l)}function _(l){e||v(l),s?.(l)}function M(){const l=n.map(b=>le(r,o,b));_(l)}return f.useEffect(()=>{(!e||!e.length)&&M()},[]),f.useImperativeHandle(E,()=>({setCurrentDate:M})),Y.jsx($,{values:k,columns:i,onChange:_})}const ge=J(We);ge.displayName="DatePicker";function Be({values:e,columnsType:n=He,minTime:r,maxTime:o,formatHourLabel:c=K,formatMinuteLabel:a=K,formatSecondLabel:d=K,onChange:s},E){const[m,v]=f.useState([]),k=f.useMemo(()=>e??m,[e,m]),i=f.useMemo(()=>fe(r??"")??{hour:0,minute:0,second:0},[r]),h=f.useMemo(()=>fe(o??"")??{hour:23,minute:59,second:59},[o]),x={hour:w,minute:_,second:M},O=n.map(p=>x[p]());function w(){return V(i.hour,h.hour,c)}function _(){const p=l("hour"),{hour:P,minute:A}=i,{hour:I,minute:j}=h;return V(p===P?A:0,p===I?j:59,a)}function M(){const p=l("hour"),P=l("minute"),{hour:A,minute:I,second:j}=i,{hour:T,minute:S,second:N}=h;return V(p===A&&P===I?j:0,p===T&&P===S?N:59,d)}function l(p){const P=n.indexOf(p),A=k?.[P];return A!==void 0?Number(A):de(i,h,p)}function b(p){e||v(p),s?.(p)}function g(){const p=n.map(P=>de(i,h,P));b(p)}return f.useEffect(()=>{(!e||!e.length)&&g()},[]),f.useImperativeHandle(E,()=>({setCurrentTime:g})),Y.jsx($,{values:k,columns:O,onChange:b})}const be=J(Be);be.displayName="TimePicker",D.DatePicker=ge,D.Picker=$,D.TimePicker=be,Object.defineProperty(D,Symbol.toStringTag,{value:"Module"})}));
|
package/dist/vue/picker.es.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import "./index.css";
|
|
2
|
-
import { ref as R, readonly as Z, isRef as j, defineComponent as L, toRef as re, createElementBlock as Y, openBlock as k, unref as
|
|
2
|
+
import { ref as R, readonly as Z, isRef as j, defineComponent as L, toRef as re, createElementBlock as Y, openBlock as k, unref as h, withModifiers as oe, createElementVNode as C, normalizeStyle as q, Fragment as $, renderList as se, toDisplayString as ie, mergeModels as V, useModel as U, useTemplateRef as ce, computed as I, watchEffect as me, renderSlot as J, createBlock as B, nextTick as fe } from "vue";
|
|
3
3
|
const de = Array.isArray;
|
|
4
|
-
function pe(e,
|
|
4
|
+
function pe(e, l) {
|
|
5
5
|
if (ue(e)) return "multiple";
|
|
6
6
|
const [f] = e;
|
|
7
|
-
return f?.[
|
|
7
|
+
return f?.[l.children] ? "cascade" : "single";
|
|
8
8
|
}
|
|
9
9
|
function ve(e) {
|
|
10
10
|
return {
|
|
@@ -13,80 +13,80 @@ function ve(e) {
|
|
|
13
13
|
value: e?.value || "value"
|
|
14
14
|
};
|
|
15
15
|
}
|
|
16
|
-
function he(e,
|
|
16
|
+
function he(e, l, f) {
|
|
17
17
|
if (ue(e)) return [];
|
|
18
18
|
const o = [];
|
|
19
19
|
let u = e, i = 0;
|
|
20
20
|
for (; u; ) {
|
|
21
|
-
const
|
|
22
|
-
let m =
|
|
21
|
+
const v = l[i];
|
|
22
|
+
let m = le(u, v, f);
|
|
23
23
|
m === -1 && (m = 0), o.push(u), i += 1, u = u[m]?.[f.children];
|
|
24
24
|
}
|
|
25
25
|
return o;
|
|
26
26
|
}
|
|
27
|
-
function ge(e,
|
|
27
|
+
function ge(e, l, f, o) {
|
|
28
28
|
const u = [...f];
|
|
29
|
-
let i = e,
|
|
29
|
+
let i = e, v = l + 1;
|
|
30
30
|
for (; i?.[o.children]; ) {
|
|
31
31
|
const m = i[o.children][0];
|
|
32
|
-
u[
|
|
32
|
+
u[v] = m.value, i = m, v += 1;
|
|
33
33
|
}
|
|
34
34
|
return u;
|
|
35
35
|
}
|
|
36
|
-
function
|
|
37
|
-
return e.findIndex((o) => o?.[f.value] ===
|
|
36
|
+
function le(e, l, f) {
|
|
37
|
+
return e.findIndex((o) => o?.[f.value] === l);
|
|
38
38
|
}
|
|
39
39
|
function ue(e) {
|
|
40
|
-
const [
|
|
41
|
-
return de(
|
|
40
|
+
const [l] = e;
|
|
41
|
+
return de(l);
|
|
42
42
|
}
|
|
43
|
-
function Te(e,
|
|
44
|
-
return e >
|
|
43
|
+
function Te(e, l) {
|
|
44
|
+
return e > l ? "horizontal" : l > e ? "vertical" : "";
|
|
45
45
|
}
|
|
46
|
-
function b(e,
|
|
46
|
+
function b(e, l, f) {
|
|
47
47
|
const o = [];
|
|
48
|
-
for (let u = e; u <=
|
|
48
|
+
for (let u = e; u <= l; u++) {
|
|
49
49
|
const i = f(`${u}`);
|
|
50
50
|
o.push({ label: i, value: u });
|
|
51
51
|
}
|
|
52
52
|
return o;
|
|
53
53
|
}
|
|
54
|
-
function Q(e,
|
|
55
|
-
return e ===
|
|
54
|
+
function Q(e, l) {
|
|
55
|
+
return e === l.getFullYear();
|
|
56
56
|
}
|
|
57
|
-
function W(e,
|
|
58
|
-
return e ===
|
|
57
|
+
function W(e, l) {
|
|
58
|
+
return e === l.getFullYear();
|
|
59
59
|
}
|
|
60
|
-
function Me(e,
|
|
61
|
-
return e ===
|
|
60
|
+
function Me(e, l) {
|
|
61
|
+
return e === l.getMonth() + 1;
|
|
62
62
|
}
|
|
63
|
-
function xe(e,
|
|
64
|
-
return e ===
|
|
63
|
+
function xe(e, l) {
|
|
64
|
+
return e === l.getMonth() + 1;
|
|
65
65
|
}
|
|
66
|
-
function
|
|
67
|
-
return new Date(e,
|
|
66
|
+
function ye(e, l) {
|
|
67
|
+
return new Date(e, l, 0).getDate();
|
|
68
68
|
}
|
|
69
|
-
function _(e,
|
|
70
|
-
const o = /* @__PURE__ */ new Date(), u = Date.now(), i = e.getTime(),
|
|
69
|
+
function _(e, l, f) {
|
|
70
|
+
const o = /* @__PURE__ */ new Date(), u = Date.now(), i = e.getTime(), v = l.getTime(), m = u >= i && u <= v;
|
|
71
71
|
return f === "year" ? m ? o.getFullYear() : e.getFullYear() : f === "month" ? m ? o.getMonth() + 1 : e.getMonth() + 1 : m ? o.getDate() : e.getDate();
|
|
72
72
|
}
|
|
73
73
|
function N(e) {
|
|
74
74
|
return e;
|
|
75
75
|
}
|
|
76
|
-
function
|
|
76
|
+
function De(e) {
|
|
77
77
|
return /^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/.test(e);
|
|
78
78
|
}
|
|
79
79
|
function ee(e) {
|
|
80
|
-
if (!
|
|
81
|
-
const [
|
|
82
|
-
return { hour: Number(
|
|
80
|
+
if (!De(e)) return null;
|
|
81
|
+
const [l, f, o] = e.split(":");
|
|
82
|
+
return { hour: Number(l), minute: Number(f), second: Number(o) };
|
|
83
83
|
}
|
|
84
84
|
function H(e) {
|
|
85
85
|
return e.padStart(2, "0");
|
|
86
86
|
}
|
|
87
|
-
function te(e,
|
|
88
|
-
const o = Date.now(), { hour: u, minute: i, second:
|
|
89
|
-
return f === "hour" ? r ? (/* @__PURE__ */ new Date()).getHours() : u : f === "minute" ? r ? (/* @__PURE__ */ new Date()).getMinutes() : i : r ? (/* @__PURE__ */ new Date()).getSeconds() :
|
|
87
|
+
function te(e, l, f) {
|
|
88
|
+
const o = Date.now(), { hour: u, minute: i, second: v } = e, { hour: m, minute: d, second: p } = l, g = (/* @__PURE__ */ new Date()).setHours(u, i, v), M = (/* @__PURE__ */ new Date()).setHours(m, d, p), r = o >= g && o <= M;
|
|
89
|
+
return f === "hour" ? r ? (/* @__PURE__ */ new Date()).getHours() : u : f === "minute" ? r ? (/* @__PURE__ */ new Date()).getMinutes() : i : r ? (/* @__PURE__ */ new Date()).getSeconds() : v;
|
|
90
90
|
}
|
|
91
91
|
const ke = 16, F = 48, Se = 0.52, ne = 150, X = 300, Ye = 15, Ie = 8e-3, Oe = ["year", "month", "day"], be = ["hour", "minute", "second"];
|
|
92
92
|
function Ve() {
|
|
@@ -98,28 +98,28 @@ function Ve() {
|
|
|
98
98
|
offsetX: 0,
|
|
99
99
|
offsetY: 0
|
|
100
100
|
};
|
|
101
|
-
let
|
|
102
|
-
const f = () =>
|
|
101
|
+
let l = "";
|
|
102
|
+
const f = () => l === "vertical", o = () => l === "horizontal";
|
|
103
103
|
function u() {
|
|
104
|
-
e.deltaX = 0, e.deltaY = 0, e.offsetX = 0, e.offsetY = 0,
|
|
104
|
+
e.deltaX = 0, e.deltaY = 0, e.offsetX = 0, e.offsetY = 0, l = "";
|
|
105
105
|
}
|
|
106
106
|
function i(d) {
|
|
107
107
|
const p = "touches" in d ? d.touches[0] : d;
|
|
108
108
|
u(), e.startX = p.clientX, e.startY = p.clientY;
|
|
109
109
|
}
|
|
110
|
-
function
|
|
110
|
+
function v(d) {
|
|
111
111
|
if (!e.startX || !e.startY) return !0;
|
|
112
112
|
const p = "touches" in d ? d.touches[0] : d;
|
|
113
113
|
e.deltaX = Math.max(p.clientX, 0) - e.startX, e.deltaY = p.clientY - e.startY, e.offsetX = Math.abs(e.deltaX), e.offsetY = Math.abs(e.deltaY);
|
|
114
114
|
const g = 10;
|
|
115
|
-
(!
|
|
115
|
+
(!l || e.offsetX < g && e.offsetY < g) && (l = Te(e.offsetX, e.offsetY));
|
|
116
116
|
}
|
|
117
117
|
function m() {
|
|
118
118
|
e.startX = 0, e.startY = 0;
|
|
119
119
|
}
|
|
120
120
|
return {
|
|
121
121
|
pointer: e,
|
|
122
|
-
move:
|
|
122
|
+
move: v,
|
|
123
123
|
start: i,
|
|
124
124
|
stop: m,
|
|
125
125
|
reset: u,
|
|
@@ -127,47 +127,47 @@ function Ve() {
|
|
|
127
127
|
isHorizontal: o
|
|
128
128
|
};
|
|
129
129
|
}
|
|
130
|
-
function Ce({ column: e, onChange:
|
|
131
|
-
const o = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) / ke, u = R(0), i = R(0), { pointer:
|
|
132
|
-
let g = 0, M = 0, r = 0,
|
|
130
|
+
function Ce({ column: e, onChange: l }) {
|
|
131
|
+
const o = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) / ke, u = R(0), i = R(0), { pointer: v, start: m, move: d, stop: p } = Ve();
|
|
132
|
+
let g = 0, M = 0, r = 0, s = !1, t = null;
|
|
133
133
|
function n(T) {
|
|
134
|
-
m(T),
|
|
134
|
+
m(T), s = !0, i.value = 0, M = Date.now(), g = u.value, r = g, t = null;
|
|
135
135
|
}
|
|
136
136
|
function a(T) {
|
|
137
137
|
if (d(T)) return;
|
|
138
|
-
const
|
|
138
|
+
const D = j(e) ? e.value.length : e.length, E = g + v.deltaY, A = P((D - 1) * -F), G = Math.min(Math.max(E, A), 0), K = Date.now();
|
|
139
139
|
u.value = G, !(K - M <= X) && (M = K, r = G);
|
|
140
140
|
}
|
|
141
141
|
function c() {
|
|
142
142
|
p();
|
|
143
143
|
const T = u.value - r, x = Date.now() - M;
|
|
144
144
|
if (x < X && Math.abs(T) > Ye) {
|
|
145
|
-
|
|
145
|
+
y(T, x);
|
|
146
146
|
return;
|
|
147
147
|
}
|
|
148
|
-
const
|
|
149
|
-
i.value = ne, O(
|
|
148
|
+
const D = w(u.value);
|
|
149
|
+
i.value = ne, O(D), s = !1;
|
|
150
150
|
}
|
|
151
|
-
function
|
|
152
|
-
const
|
|
151
|
+
function y(T, x) {
|
|
152
|
+
const D = Math.abs(T / x), E = u.value + D / Ie * (T < 0 ? -1 : 1), A = w(E);
|
|
153
153
|
i.value = X, O(A);
|
|
154
154
|
}
|
|
155
155
|
function S() {
|
|
156
|
-
i.value = 0,
|
|
156
|
+
i.value = 0, s = !1, t && (t(), t = null);
|
|
157
157
|
}
|
|
158
158
|
function O(T) {
|
|
159
|
-
const x = -T * P(F),
|
|
160
|
-
|
|
159
|
+
const x = -T * P(F), D = () => l?.(T);
|
|
160
|
+
s && x !== u.value ? t = D : D(), u.value = x;
|
|
161
161
|
}
|
|
162
162
|
function w(T) {
|
|
163
|
-
const x = j(e) ? e.value.length : e.length,
|
|
164
|
-
return
|
|
163
|
+
const x = j(e) ? e.value.length : e.length, D = Math.round(-T / P(F));
|
|
164
|
+
return D < 0 ? 0 : D >= x ? x - 1 : D;
|
|
165
165
|
}
|
|
166
166
|
function P(T) {
|
|
167
167
|
return T * o;
|
|
168
168
|
}
|
|
169
169
|
function z(T, x = "auto") {
|
|
170
|
-
|
|
170
|
+
s && x === "smooth" || (t = null, s = x === "smooth", i.value = x === "smooth" ? ne : 0, O(T));
|
|
171
171
|
}
|
|
172
172
|
return {
|
|
173
173
|
offsetY: Z(u),
|
|
@@ -187,64 +187,65 @@ const we = ["onClick"], Pe = /* @__PURE__ */ L({
|
|
|
187
187
|
selectedIndex: { default: 0 }
|
|
188
188
|
},
|
|
189
189
|
emits: ["change"],
|
|
190
|
-
setup(e, { expose:
|
|
191
|
-
const o = e, u = f, { offsetY: i, transitionDuration:
|
|
190
|
+
setup(e, { expose: l, emit: f }) {
|
|
191
|
+
const o = e, u = f, { offsetY: i, transitionDuration: v, onPointerDown: m, onPointerMove: d, onPointerUp: p, stopInertialSliding: g, scrollToIndex: M } = Ce({
|
|
192
192
|
column: re(o, "column"),
|
|
193
193
|
onChange: r
|
|
194
194
|
});
|
|
195
195
|
function r(n) {
|
|
196
196
|
n !== o.selectedIndex && u("change", n);
|
|
197
197
|
}
|
|
198
|
-
function
|
|
198
|
+
function s(n = o.selectedIndex, a) {
|
|
199
199
|
M(n, a);
|
|
200
200
|
}
|
|
201
201
|
function t(n) {
|
|
202
|
-
n !== o.selectedIndex &&
|
|
202
|
+
n !== o.selectedIndex && s(n, "smooth");
|
|
203
203
|
}
|
|
204
|
-
return
|
|
204
|
+
return l({ scrollToSelected: s }), (n, a) => (k(), Y("div", {
|
|
205
205
|
class: "chook-picker-column",
|
|
206
206
|
"aria-label": "Picker column",
|
|
207
207
|
onTouchstartPassive: a[1] || (a[1] = //@ts-ignore
|
|
208
|
-
(...c) =>
|
|
208
|
+
(...c) => h(m) && h(m)(...c)),
|
|
209
209
|
onTouchmove: a[2] || (a[2] = oe(
|
|
210
210
|
//@ts-ignore
|
|
211
|
-
(...c) =>
|
|
211
|
+
(...c) => h(d) && h(d)(...c),
|
|
212
212
|
["prevent"]
|
|
213
213
|
)),
|
|
214
214
|
onTouchendPassive: a[3] || (a[3] = //@ts-ignore
|
|
215
|
-
(...c) =>
|
|
215
|
+
(...c) => h(p) && h(p)(...c)),
|
|
216
216
|
onTouchcancel: a[4] || (a[4] = //@ts-ignore
|
|
217
|
-
(...c) =>
|
|
217
|
+
(...c) => h(p) && h(p)(...c)),
|
|
218
218
|
onMousedownPassive: a[5] || (a[5] = //@ts-ignore
|
|
219
|
-
(...c) =>
|
|
219
|
+
(...c) => h(m) && h(m)(...c)),
|
|
220
220
|
onMousemovePassive: a[6] || (a[6] = //@ts-ignore
|
|
221
|
-
(...c) =>
|
|
221
|
+
(...c) => h(d) && h(d)(...c)),
|
|
222
222
|
onMouseupPassive: a[7] || (a[7] = //@ts-ignore
|
|
223
|
-
(...c) =>
|
|
223
|
+
(...c) => h(p) && h(p)(...c)),
|
|
224
224
|
onMouseleavePassive: a[8] || (a[8] = //@ts-ignore
|
|
225
|
-
(...c) =>
|
|
225
|
+
(...c) => h(p) && h(p)(...c))
|
|
226
226
|
}, [
|
|
227
227
|
C("ul", {
|
|
228
228
|
style: q({
|
|
229
229
|
overflowY: "hidden",
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
230
|
+
"--offset-y": `${h(i)}`,
|
|
231
|
+
transform: "translate3d(0, calc(var(--offset-y) * 1px), 0)",
|
|
232
|
+
transitionDuration: `${h(v)}ms`,
|
|
233
|
+
transitionProperty: h(v) ? "all" : "none"
|
|
233
234
|
}),
|
|
234
235
|
onTransitionend: a[0] || (a[0] = //@ts-ignore
|
|
235
|
-
(...c) =>
|
|
236
|
+
(...c) => h(g) && h(g)(...c))
|
|
236
237
|
}, [
|
|
237
|
-
(k(!0), Y(
|
|
238
|
+
(k(!0), Y($, null, se(e.column, (c, y) => (k(), Y("li", {
|
|
238
239
|
key: c?.[e.fields.value],
|
|
239
240
|
class: "chook-picker-column-item",
|
|
240
241
|
role: "button",
|
|
241
242
|
tabindex: "0",
|
|
242
|
-
onClick: (S) => t(
|
|
243
|
+
onClick: (S) => t(y)
|
|
243
244
|
}, [
|
|
244
245
|
C("p", {
|
|
245
246
|
class: "chook-picker-column-label",
|
|
246
247
|
style: q({
|
|
247
|
-
transform: `rotate3d(1, 0, 0, ${
|
|
248
|
+
transform: `rotate3d(1, 0, 0, calc((${y * h(F)} + var(--offset-y)) * ${h(Se)}deg)`
|
|
248
249
|
})
|
|
249
250
|
}, ie(c?.[e.fields.label]), 5)
|
|
250
251
|
], 8, we))), 128))
|
|
@@ -268,18 +269,18 @@ const we = ["onClick"], Pe = /* @__PURE__ */ L({
|
|
|
268
269
|
modelModifiers: {}
|
|
269
270
|
}),
|
|
270
271
|
emits: /* @__PURE__ */ V(["change"], ["update:modelValue"]),
|
|
271
|
-
setup(e, { emit:
|
|
272
|
-
const f = e, o =
|
|
272
|
+
setup(e, { emit: l }) {
|
|
273
|
+
const f = e, o = l, u = U(e, "modelValue"), i = R([]), v = ce("columnsRef"), m = I(() => ve(f.columnsFieldNames)), d = I(() => pe(f.columns, m.value)), p = I(() => {
|
|
273
274
|
const { columns: r } = f;
|
|
274
275
|
return d.value === "single" ? [r] : d.value === "multiple" ? r : he(r, u.value, m.value);
|
|
275
276
|
});
|
|
276
|
-
function g(r,
|
|
277
|
-
const t = p.value[r], n = t[
|
|
277
|
+
function g(r, s) {
|
|
278
|
+
const t = p.value[r], n = t[s]?.[m.value.value], a = u.value[r];
|
|
278
279
|
if (n === a) return;
|
|
279
280
|
const c = [...u.value];
|
|
280
281
|
if (c[r] = n, d.value === "cascade") {
|
|
281
|
-
const
|
|
282
|
-
u.value = ge(
|
|
282
|
+
const y = t[s];
|
|
283
|
+
u.value = ge(y, r, c, m.value);
|
|
283
284
|
} else
|
|
284
285
|
u.value = c;
|
|
285
286
|
fe(() => {
|
|
@@ -287,46 +288,46 @@ const we = ["onClick"], Pe = /* @__PURE__ */ L({
|
|
|
287
288
|
});
|
|
288
289
|
}
|
|
289
290
|
function M() {
|
|
290
|
-
const r = p.value.length,
|
|
291
|
+
const r = p.value.length, s = [];
|
|
291
292
|
for (let t = 0; t < r; t++) {
|
|
292
|
-
const n = p.value[t], a = u.value[t], c =
|
|
293
|
+
const n = p.value[t], a = u.value[t], c = le(n, a, m.value);
|
|
293
294
|
if (c === -1) {
|
|
294
295
|
const S = (i.value[t] ?? 0) >= n.length ? Math.max(n.length - 1, 0) : 0;
|
|
295
|
-
u.value[t] = n[S]?.[m.value.value],
|
|
296
|
+
u.value[t] = n[S]?.[m.value.value], s[t] = S;
|
|
296
297
|
} else
|
|
297
|
-
|
|
298
|
-
|
|
298
|
+
s[t] = c;
|
|
299
|
+
s[t] !== i.value[t] && v.value?.[t]?.scrollToSelected(s[t]);
|
|
299
300
|
}
|
|
300
|
-
i.value =
|
|
301
|
+
i.value = s;
|
|
301
302
|
}
|
|
302
303
|
return me(
|
|
303
304
|
() => {
|
|
304
305
|
M();
|
|
305
306
|
},
|
|
306
307
|
{ flush: "post" }
|
|
307
|
-
), (r,
|
|
308
|
-
e.loading ? (k(), Y(
|
|
308
|
+
), (r, s) => (k(), Y("div", Fe, [
|
|
309
|
+
e.loading ? (k(), Y($, { key: 0 }, [
|
|
309
310
|
C("div", Le, [
|
|
310
311
|
J(r.$slots, "loading")
|
|
311
312
|
]),
|
|
312
|
-
|
|
313
|
+
s[1] || (s[1] = C("div", { class: "chook-picker-columns" }, null, -1))
|
|
313
314
|
], 64)) : e.columns.length ? (k(), Y("div", {
|
|
314
315
|
key: 2,
|
|
315
316
|
class: "chook-picker-columns chook-picker-columns-backdrop",
|
|
316
|
-
onTouchmove:
|
|
317
|
+
onTouchmove: s[0] || (s[0] = oe(() => {
|
|
317
318
|
}, ["stop"]))
|
|
318
319
|
}, [
|
|
319
|
-
(k(!0), Y(
|
|
320
|
+
(k(!0), Y($, null, se(p.value, (t, n) => (k(), B(Pe, {
|
|
320
321
|
key: n,
|
|
321
322
|
ref_for: !0,
|
|
322
323
|
ref_key: "columnsRef",
|
|
323
|
-
ref:
|
|
324
|
+
ref: v,
|
|
324
325
|
column: t,
|
|
325
326
|
fields: m.value,
|
|
326
327
|
"selected-index": i.value[n],
|
|
327
328
|
onChange: (a) => g(n, a)
|
|
328
329
|
}, null, 8, ["column", "fields", "selected-index", "onChange"]))), 128)),
|
|
329
|
-
|
|
330
|
+
s[2] || (s[2] = C("div", { class: "chook-picker-mask-backdrop" }, null, -1))
|
|
330
331
|
], 32)) : (k(), Y("div", Ee, [
|
|
331
332
|
J(r.$slots, "empty")
|
|
332
333
|
]))
|
|
@@ -346,43 +347,43 @@ const we = ["onClick"], Pe = /* @__PURE__ */ L({
|
|
|
346
347
|
modelModifiers: {}
|
|
347
348
|
}),
|
|
348
349
|
emits: /* @__PURE__ */ V(["change"], ["update:modelValue"]),
|
|
349
|
-
setup(e, { expose:
|
|
350
|
-
const o = e, u = f, i =
|
|
351
|
-
const { columnsType: r, minDate:
|
|
350
|
+
setup(e, { expose: l, emit: f }) {
|
|
351
|
+
const o = e, u = f, i = U(e, "modelValue"), v = I(() => {
|
|
352
|
+
const { columnsType: r, minDate: s, maxDate: t } = o, n = {
|
|
352
353
|
year: m,
|
|
353
354
|
month: d,
|
|
354
355
|
day: p
|
|
355
356
|
};
|
|
356
|
-
return r.map((a) => n[a](
|
|
357
|
+
return r.map((a) => n[a](s, t));
|
|
357
358
|
});
|
|
358
359
|
i.value.length || M();
|
|
359
|
-
function m(r,
|
|
360
|
-
const t = r.getFullYear(), n =
|
|
360
|
+
function m(r, s) {
|
|
361
|
+
const t = r.getFullYear(), n = s.getFullYear();
|
|
361
362
|
return b(t, n, o.formatYearLabel);
|
|
362
363
|
}
|
|
363
|
-
function d(r,
|
|
364
|
-
const t = g("year"), n = Q(t, r) ? r.getMonth() + 1 : 1, a = W(t,
|
|
364
|
+
function d(r, s) {
|
|
365
|
+
const t = g("year"), n = Q(t, r) ? r.getMonth() + 1 : 1, a = W(t, s) ? s.getMonth() + 1 : 12;
|
|
365
366
|
return b(n, a, o.formatMonthLabel);
|
|
366
367
|
}
|
|
367
|
-
function p(r,
|
|
368
|
-
const t = g("year"), n = g("month"), a = Q(t, r) && Me(n, r), c = W(t,
|
|
369
|
-
return b(
|
|
368
|
+
function p(r, s) {
|
|
369
|
+
const t = g("year"), n = g("month"), a = Q(t, r) && Me(n, r), c = W(t, s) && xe(n, s), y = a ? r.getDate() : 1, S = c ? s.getDate() : ye(t, n);
|
|
370
|
+
return b(y, S, o.formatDayLabel);
|
|
370
371
|
}
|
|
371
372
|
function g(r) {
|
|
372
|
-
const { columnsType:
|
|
373
|
+
const { columnsType: s } = o, t = s.indexOf(r), n = i.value[t];
|
|
373
374
|
return n ? Number(n) : _(o.minDate, o.maxDate, r);
|
|
374
375
|
}
|
|
375
376
|
function M() {
|
|
376
377
|
const { columnsType: r } = o;
|
|
377
|
-
i.value = r.map((
|
|
378
|
+
i.value = r.map((s) => _(o.minDate, o.maxDate, s));
|
|
378
379
|
}
|
|
379
|
-
return
|
|
380
|
+
return l({
|
|
380
381
|
setCurrentDate: M
|
|
381
|
-
}), (r,
|
|
382
|
+
}), (r, s) => (k(), B(ae, {
|
|
382
383
|
modelValue: i.value,
|
|
383
|
-
"onUpdate:modelValue":
|
|
384
|
-
columns:
|
|
385
|
-
onChange:
|
|
384
|
+
"onUpdate:modelValue": s[0] || (s[0] = (t) => i.value = t),
|
|
385
|
+
columns: v.value,
|
|
386
|
+
onChange: s[1] || (s[1] = (t) => u("change", t))
|
|
386
387
|
}, null, 8, ["modelValue", "columns"]));
|
|
387
388
|
}
|
|
388
389
|
}), He = /* @__PURE__ */ L({
|
|
@@ -399,8 +400,8 @@ const we = ["onClick"], Pe = /* @__PURE__ */ L({
|
|
|
399
400
|
modelModifiers: {}
|
|
400
401
|
}),
|
|
401
402
|
emits: /* @__PURE__ */ V(["change"], ["update:modelValue"]),
|
|
402
|
-
setup(e, { expose:
|
|
403
|
-
const o = e, u = f, i =
|
|
403
|
+
setup(e, { expose: l, emit: f }) {
|
|
404
|
+
const o = e, u = f, i = U(e, "modelValue"), v = I(() => {
|
|
404
405
|
const { columnsType: t } = o, n = {
|
|
405
406
|
hour: p,
|
|
406
407
|
minute: g,
|
|
@@ -408,33 +409,33 @@ const we = ["onClick"], Pe = /* @__PURE__ */ L({
|
|
|
408
409
|
};
|
|
409
410
|
return t.map((a) => n[a]());
|
|
410
411
|
}), m = I(() => ee(o.minTime ?? "") ?? { hour: 0, minute: 0, second: 0 }), d = I(() => ee(o.maxTime ?? "") ?? { hour: 23, minute: 59, second: 59 });
|
|
411
|
-
i.value.length ||
|
|
412
|
+
i.value.length || s();
|
|
412
413
|
function p() {
|
|
413
414
|
const t = m.value.hour, n = d.value.hour;
|
|
414
415
|
return b(t, n, o.formatHourLabel);
|
|
415
416
|
}
|
|
416
417
|
function g() {
|
|
417
|
-
const t = r("hour"), { hour: n, minute: a } = m.value, { hour: c, minute:
|
|
418
|
-
return b(t === n ? a : 0, t === c ?
|
|
418
|
+
const t = r("hour"), { hour: n, minute: a } = m.value, { hour: c, minute: y } = d.value;
|
|
419
|
+
return b(t === n ? a : 0, t === c ? y : 59, o.formatMinuteLabel);
|
|
419
420
|
}
|
|
420
421
|
function M() {
|
|
421
|
-
const t = r("hour"), n = r("minute"), { hour: a, minute: c, second:
|
|
422
|
-
return b(t === a && n === c ?
|
|
422
|
+
const t = r("hour"), n = r("minute"), { hour: a, minute: c, second: y } = m.value, { hour: S, minute: O, second: w } = d.value;
|
|
423
|
+
return b(t === a && n === c ? y : 0, t === S && n === O ? w : 59, o.formatSecondLabel);
|
|
423
424
|
}
|
|
424
425
|
function r(t) {
|
|
425
426
|
const { columnsType: n } = o, a = n.indexOf(t), c = i.value[a];
|
|
426
427
|
return c !== void 0 ? Number(c) : te(m.value, d.value, t);
|
|
427
428
|
}
|
|
428
|
-
function
|
|
429
|
+
function s() {
|
|
429
430
|
const { columnsType: t } = o;
|
|
430
431
|
i.value = t.map((n) => te(m.value, d.value, n));
|
|
431
432
|
}
|
|
432
|
-
return
|
|
433
|
-
setCurrentTime:
|
|
433
|
+
return l({
|
|
434
|
+
setCurrentTime: s
|
|
434
435
|
}), (t, n) => (k(), B(ae, {
|
|
435
436
|
modelValue: i.value,
|
|
436
437
|
"onUpdate:modelValue": n[0] || (n[0] = (a) => i.value = a),
|
|
437
|
-
columns:
|
|
438
|
+
columns: v.value,
|
|
438
439
|
onChange: n[1] || (n[1] = (a) => u("change", a))
|
|
439
440
|
}, null, 8, ["modelValue", "columns"]));
|
|
440
441
|
}
|