@component-hook/picker 1.2.0-alpha.0 → 1.2.1-alpha.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 +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,9 +1,9 @@
|
|
|
1
|
-
import { ref as R, readonly as Z, isRef as j, defineComponent as L, toRef as re, createElementBlock as Y, openBlock as k, unref as
|
|
1
|
+
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";
|
|
2
2
|
const de = Array.isArray;
|
|
3
|
-
function pe(e,
|
|
3
|
+
function pe(e, l) {
|
|
4
4
|
if (ue(e)) return "multiple";
|
|
5
5
|
const [f] = e;
|
|
6
|
-
return f?.[
|
|
6
|
+
return f?.[l.children] ? "cascade" : "single";
|
|
7
7
|
}
|
|
8
8
|
function ve(e) {
|
|
9
9
|
return {
|
|
@@ -12,80 +12,80 @@ function ve(e) {
|
|
|
12
12
|
value: e?.value || "value"
|
|
13
13
|
};
|
|
14
14
|
}
|
|
15
|
-
function he(e,
|
|
15
|
+
function he(e, l, f) {
|
|
16
16
|
if (ue(e)) return [];
|
|
17
17
|
const o = [];
|
|
18
18
|
let u = e, i = 0;
|
|
19
19
|
for (; u; ) {
|
|
20
|
-
const
|
|
21
|
-
let m =
|
|
20
|
+
const v = l[i];
|
|
21
|
+
let m = le(u, v, f);
|
|
22
22
|
m === -1 && (m = 0), o.push(u), i += 1, u = u[m]?.[f.children];
|
|
23
23
|
}
|
|
24
24
|
return o;
|
|
25
25
|
}
|
|
26
|
-
function ge(e,
|
|
26
|
+
function ge(e, l, f, o) {
|
|
27
27
|
const u = [...f];
|
|
28
|
-
let i = e,
|
|
28
|
+
let i = e, v = l + 1;
|
|
29
29
|
for (; i?.[o.children]; ) {
|
|
30
30
|
const m = i[o.children][0];
|
|
31
|
-
u[
|
|
31
|
+
u[v] = m.value, i = m, v += 1;
|
|
32
32
|
}
|
|
33
33
|
return u;
|
|
34
34
|
}
|
|
35
|
-
function
|
|
36
|
-
return e.findIndex((o) => o?.[f.value] ===
|
|
35
|
+
function le(e, l, f) {
|
|
36
|
+
return e.findIndex((o) => o?.[f.value] === l);
|
|
37
37
|
}
|
|
38
38
|
function ue(e) {
|
|
39
|
-
const [
|
|
40
|
-
return de(
|
|
39
|
+
const [l] = e;
|
|
40
|
+
return de(l);
|
|
41
41
|
}
|
|
42
|
-
function Te(e,
|
|
43
|
-
return e >
|
|
42
|
+
function Te(e, l) {
|
|
43
|
+
return e > l ? "horizontal" : l > e ? "vertical" : "";
|
|
44
44
|
}
|
|
45
|
-
function b(e,
|
|
45
|
+
function b(e, l, f) {
|
|
46
46
|
const o = [];
|
|
47
|
-
for (let u = e; u <=
|
|
47
|
+
for (let u = e; u <= l; u++) {
|
|
48
48
|
const i = f(`${u}`);
|
|
49
49
|
o.push({ label: i, value: u });
|
|
50
50
|
}
|
|
51
51
|
return o;
|
|
52
52
|
}
|
|
53
|
-
function Q(e,
|
|
54
|
-
return e ===
|
|
53
|
+
function Q(e, l) {
|
|
54
|
+
return e === l.getFullYear();
|
|
55
55
|
}
|
|
56
|
-
function W(e,
|
|
57
|
-
return e ===
|
|
56
|
+
function W(e, l) {
|
|
57
|
+
return e === l.getFullYear();
|
|
58
58
|
}
|
|
59
|
-
function Me(e,
|
|
60
|
-
return e ===
|
|
59
|
+
function Me(e, l) {
|
|
60
|
+
return e === l.getMonth() + 1;
|
|
61
61
|
}
|
|
62
|
-
function xe(e,
|
|
63
|
-
return e ===
|
|
62
|
+
function xe(e, l) {
|
|
63
|
+
return e === l.getMonth() + 1;
|
|
64
64
|
}
|
|
65
|
-
function
|
|
66
|
-
return new Date(e,
|
|
65
|
+
function ye(e, l) {
|
|
66
|
+
return new Date(e, l, 0).getDate();
|
|
67
67
|
}
|
|
68
|
-
function _(e,
|
|
69
|
-
const o = /* @__PURE__ */ new Date(), u = Date.now(), i = e.getTime(),
|
|
68
|
+
function _(e, l, f) {
|
|
69
|
+
const o = /* @__PURE__ */ new Date(), u = Date.now(), i = e.getTime(), v = l.getTime(), m = u >= i && u <= v;
|
|
70
70
|
return f === "year" ? m ? o.getFullYear() : e.getFullYear() : f === "month" ? m ? o.getMonth() + 1 : e.getMonth() + 1 : m ? o.getDate() : e.getDate();
|
|
71
71
|
}
|
|
72
72
|
function N(e) {
|
|
73
73
|
return e;
|
|
74
74
|
}
|
|
75
|
-
function
|
|
75
|
+
function De(e) {
|
|
76
76
|
return /^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/.test(e);
|
|
77
77
|
}
|
|
78
78
|
function ee(e) {
|
|
79
|
-
if (!
|
|
80
|
-
const [
|
|
81
|
-
return { hour: Number(
|
|
79
|
+
if (!De(e)) return null;
|
|
80
|
+
const [l, f, o] = e.split(":");
|
|
81
|
+
return { hour: Number(l), minute: Number(f), second: Number(o) };
|
|
82
82
|
}
|
|
83
83
|
function H(e) {
|
|
84
84
|
return e.padStart(2, "0");
|
|
85
85
|
}
|
|
86
|
-
function te(e,
|
|
87
|
-
const o = Date.now(), { hour: u, minute: i, second:
|
|
88
|
-
return f === "hour" ? r ? (/* @__PURE__ */ new Date()).getHours() : u : f === "minute" ? r ? (/* @__PURE__ */ new Date()).getMinutes() : i : r ? (/* @__PURE__ */ new Date()).getSeconds() :
|
|
86
|
+
function te(e, l, f) {
|
|
87
|
+
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;
|
|
88
|
+
return f === "hour" ? r ? (/* @__PURE__ */ new Date()).getHours() : u : f === "minute" ? r ? (/* @__PURE__ */ new Date()).getMinutes() : i : r ? (/* @__PURE__ */ new Date()).getSeconds() : v;
|
|
89
89
|
}
|
|
90
90
|
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"];
|
|
91
91
|
function Ve() {
|
|
@@ -97,28 +97,28 @@ function Ve() {
|
|
|
97
97
|
offsetX: 0,
|
|
98
98
|
offsetY: 0
|
|
99
99
|
};
|
|
100
|
-
let
|
|
101
|
-
const f = () =>
|
|
100
|
+
let l = "";
|
|
101
|
+
const f = () => l === "vertical", o = () => l === "horizontal";
|
|
102
102
|
function u() {
|
|
103
|
-
e.deltaX = 0, e.deltaY = 0, e.offsetX = 0, e.offsetY = 0,
|
|
103
|
+
e.deltaX = 0, e.deltaY = 0, e.offsetX = 0, e.offsetY = 0, l = "";
|
|
104
104
|
}
|
|
105
105
|
function i(d) {
|
|
106
106
|
const p = "touches" in d ? d.touches[0] : d;
|
|
107
107
|
u(), e.startX = p.clientX, e.startY = p.clientY;
|
|
108
108
|
}
|
|
109
|
-
function
|
|
109
|
+
function v(d) {
|
|
110
110
|
if (!e.startX || !e.startY) return !0;
|
|
111
111
|
const p = "touches" in d ? d.touches[0] : d;
|
|
112
112
|
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);
|
|
113
113
|
const g = 10;
|
|
114
|
-
(!
|
|
114
|
+
(!l || e.offsetX < g && e.offsetY < g) && (l = Te(e.offsetX, e.offsetY));
|
|
115
115
|
}
|
|
116
116
|
function m() {
|
|
117
117
|
e.startX = 0, e.startY = 0;
|
|
118
118
|
}
|
|
119
119
|
return {
|
|
120
120
|
pointer: e,
|
|
121
|
-
move:
|
|
121
|
+
move: v,
|
|
122
122
|
start: i,
|
|
123
123
|
stop: m,
|
|
124
124
|
reset: u,
|
|
@@ -126,47 +126,47 @@ function Ve() {
|
|
|
126
126
|
isHorizontal: o
|
|
127
127
|
};
|
|
128
128
|
}
|
|
129
|
-
function Ce({ column: e, onChange:
|
|
130
|
-
const o = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) / ke, u = R(0), i = R(0), { pointer:
|
|
131
|
-
let g = 0, M = 0, r = 0,
|
|
129
|
+
function Ce({ column: e, onChange: l }) {
|
|
130
|
+
const o = Number.parseFloat(getComputedStyle(document.documentElement).fontSize) / ke, u = R(0), i = R(0), { pointer: v, start: m, move: d, stop: p } = Ve();
|
|
131
|
+
let g = 0, M = 0, r = 0, s = !1, t = null;
|
|
132
132
|
function n(T) {
|
|
133
|
-
m(T),
|
|
133
|
+
m(T), s = !0, i.value = 0, M = Date.now(), g = u.value, r = g, t = null;
|
|
134
134
|
}
|
|
135
135
|
function a(T) {
|
|
136
136
|
if (d(T)) return;
|
|
137
|
-
const
|
|
137
|
+
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();
|
|
138
138
|
u.value = G, !(K - M <= X) && (M = K, r = G);
|
|
139
139
|
}
|
|
140
140
|
function c() {
|
|
141
141
|
p();
|
|
142
142
|
const T = u.value - r, x = Date.now() - M;
|
|
143
143
|
if (x < X && Math.abs(T) > Ye) {
|
|
144
|
-
|
|
144
|
+
y(T, x);
|
|
145
145
|
return;
|
|
146
146
|
}
|
|
147
|
-
const
|
|
148
|
-
i.value = ne, O(
|
|
147
|
+
const D = w(u.value);
|
|
148
|
+
i.value = ne, O(D), s = !1;
|
|
149
149
|
}
|
|
150
|
-
function
|
|
151
|
-
const
|
|
150
|
+
function y(T, x) {
|
|
151
|
+
const D = Math.abs(T / x), E = u.value + D / Ie * (T < 0 ? -1 : 1), A = w(E);
|
|
152
152
|
i.value = X, O(A);
|
|
153
153
|
}
|
|
154
154
|
function S() {
|
|
155
|
-
i.value = 0,
|
|
155
|
+
i.value = 0, s = !1, t && (t(), t = null);
|
|
156
156
|
}
|
|
157
157
|
function O(T) {
|
|
158
|
-
const x = -T * P(F),
|
|
159
|
-
|
|
158
|
+
const x = -T * P(F), D = () => l?.(T);
|
|
159
|
+
s && x !== u.value ? t = D : D(), u.value = x;
|
|
160
160
|
}
|
|
161
161
|
function w(T) {
|
|
162
|
-
const x = j(e) ? e.value.length : e.length,
|
|
163
|
-
return
|
|
162
|
+
const x = j(e) ? e.value.length : e.length, D = Math.round(-T / P(F));
|
|
163
|
+
return D < 0 ? 0 : D >= x ? x - 1 : D;
|
|
164
164
|
}
|
|
165
165
|
function P(T) {
|
|
166
166
|
return T * o;
|
|
167
167
|
}
|
|
168
168
|
function z(T, x = "auto") {
|
|
169
|
-
|
|
169
|
+
s && x === "smooth" || (t = null, s = x === "smooth", i.value = x === "smooth" ? ne : 0, O(T));
|
|
170
170
|
}
|
|
171
171
|
return {
|
|
172
172
|
offsetY: Z(u),
|
|
@@ -186,64 +186,65 @@ const we = ["onClick"], Pe = /* @__PURE__ */ L({
|
|
|
186
186
|
selectedIndex: { default: 0 }
|
|
187
187
|
},
|
|
188
188
|
emits: ["change"],
|
|
189
|
-
setup(e, { expose:
|
|
190
|
-
const o = e, u = f, { offsetY: i, transitionDuration:
|
|
189
|
+
setup(e, { expose: l, emit: f }) {
|
|
190
|
+
const o = e, u = f, { offsetY: i, transitionDuration: v, onPointerDown: m, onPointerMove: d, onPointerUp: p, stopInertialSliding: g, scrollToIndex: M } = Ce({
|
|
191
191
|
column: re(o, "column"),
|
|
192
192
|
onChange: r
|
|
193
193
|
});
|
|
194
194
|
function r(n) {
|
|
195
195
|
n !== o.selectedIndex && u("change", n);
|
|
196
196
|
}
|
|
197
|
-
function
|
|
197
|
+
function s(n = o.selectedIndex, a) {
|
|
198
198
|
M(n, a);
|
|
199
199
|
}
|
|
200
200
|
function t(n) {
|
|
201
|
-
n !== o.selectedIndex &&
|
|
201
|
+
n !== o.selectedIndex && s(n, "smooth");
|
|
202
202
|
}
|
|
203
|
-
return
|
|
203
|
+
return l({ scrollToSelected: s }), (n, a) => (k(), Y("div", {
|
|
204
204
|
class: "chook-picker-column",
|
|
205
205
|
"aria-label": "Picker column",
|
|
206
206
|
onTouchstartPassive: a[1] || (a[1] = //@ts-ignore
|
|
207
|
-
(...c) =>
|
|
207
|
+
(...c) => h(m) && h(m)(...c)),
|
|
208
208
|
onTouchmove: a[2] || (a[2] = oe(
|
|
209
209
|
//@ts-ignore
|
|
210
|
-
(...c) =>
|
|
210
|
+
(...c) => h(d) && h(d)(...c),
|
|
211
211
|
["prevent"]
|
|
212
212
|
)),
|
|
213
213
|
onTouchendPassive: a[3] || (a[3] = //@ts-ignore
|
|
214
|
-
(...c) =>
|
|
214
|
+
(...c) => h(p) && h(p)(...c)),
|
|
215
215
|
onTouchcancel: a[4] || (a[4] = //@ts-ignore
|
|
216
|
-
(...c) =>
|
|
216
|
+
(...c) => h(p) && h(p)(...c)),
|
|
217
217
|
onMousedownPassive: a[5] || (a[5] = //@ts-ignore
|
|
218
|
-
(...c) =>
|
|
218
|
+
(...c) => h(m) && h(m)(...c)),
|
|
219
219
|
onMousemovePassive: a[6] || (a[6] = //@ts-ignore
|
|
220
|
-
(...c) =>
|
|
220
|
+
(...c) => h(d) && h(d)(...c)),
|
|
221
221
|
onMouseupPassive: a[7] || (a[7] = //@ts-ignore
|
|
222
|
-
(...c) =>
|
|
222
|
+
(...c) => h(p) && h(p)(...c)),
|
|
223
223
|
onMouseleavePassive: a[8] || (a[8] = //@ts-ignore
|
|
224
|
-
(...c) =>
|
|
224
|
+
(...c) => h(p) && h(p)(...c))
|
|
225
225
|
}, [
|
|
226
226
|
C("ul", {
|
|
227
227
|
style: q({
|
|
228
228
|
overflowY: "hidden",
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
229
|
+
"--offset-y": `${h(i)}`,
|
|
230
|
+
transform: "translate3d(0, calc(var(--offset-y) * 1px), 0)",
|
|
231
|
+
transitionDuration: `${h(v)}ms`,
|
|
232
|
+
transitionProperty: h(v) ? "all" : "none"
|
|
232
233
|
}),
|
|
233
234
|
onTransitionend: a[0] || (a[0] = //@ts-ignore
|
|
234
|
-
(...c) =>
|
|
235
|
+
(...c) => h(g) && h(g)(...c))
|
|
235
236
|
}, [
|
|
236
|
-
(k(!0), Y(
|
|
237
|
+
(k(!0), Y($, null, se(e.column, (c, y) => (k(), Y("li", {
|
|
237
238
|
key: c?.[e.fields.value],
|
|
238
239
|
class: "chook-picker-column-item",
|
|
239
240
|
role: "button",
|
|
240
241
|
tabindex: "0",
|
|
241
|
-
onClick: (S) => t(
|
|
242
|
+
onClick: (S) => t(y)
|
|
242
243
|
}, [
|
|
243
244
|
C("p", {
|
|
244
245
|
class: "chook-picker-column-label",
|
|
245
246
|
style: q({
|
|
246
|
-
transform: `rotate3d(1, 0, 0, ${
|
|
247
|
+
transform: `rotate3d(1, 0, 0, calc((${y * h(F)} + var(--offset-y)) * ${h(Se)}deg)`
|
|
247
248
|
})
|
|
248
249
|
}, ie(c?.[e.fields.label]), 5)
|
|
249
250
|
], 8, we))), 128))
|
|
@@ -267,18 +268,18 @@ const we = ["onClick"], Pe = /* @__PURE__ */ L({
|
|
|
267
268
|
modelModifiers: {}
|
|
268
269
|
}),
|
|
269
270
|
emits: /* @__PURE__ */ V(["change"], ["update:modelValue"]),
|
|
270
|
-
setup(e, { emit:
|
|
271
|
-
const f = e, o =
|
|
271
|
+
setup(e, { emit: l }) {
|
|
272
|
+
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(() => {
|
|
272
273
|
const { columns: r } = f;
|
|
273
274
|
return d.value === "single" ? [r] : d.value === "multiple" ? r : he(r, u.value, m.value);
|
|
274
275
|
});
|
|
275
|
-
function g(r,
|
|
276
|
-
const t = p.value[r], n = t[
|
|
276
|
+
function g(r, s) {
|
|
277
|
+
const t = p.value[r], n = t[s]?.[m.value.value], a = u.value[r];
|
|
277
278
|
if (n === a) return;
|
|
278
279
|
const c = [...u.value];
|
|
279
280
|
if (c[r] = n, d.value === "cascade") {
|
|
280
|
-
const
|
|
281
|
-
u.value = ge(
|
|
281
|
+
const y = t[s];
|
|
282
|
+
u.value = ge(y, r, c, m.value);
|
|
282
283
|
} else
|
|
283
284
|
u.value = c;
|
|
284
285
|
fe(() => {
|
|
@@ -286,46 +287,46 @@ const we = ["onClick"], Pe = /* @__PURE__ */ L({
|
|
|
286
287
|
});
|
|
287
288
|
}
|
|
288
289
|
function M() {
|
|
289
|
-
const r = p.value.length,
|
|
290
|
+
const r = p.value.length, s = [];
|
|
290
291
|
for (let t = 0; t < r; t++) {
|
|
291
|
-
const n = p.value[t], a = u.value[t], c =
|
|
292
|
+
const n = p.value[t], a = u.value[t], c = le(n, a, m.value);
|
|
292
293
|
if (c === -1) {
|
|
293
294
|
const S = (i.value[t] ?? 0) >= n.length ? Math.max(n.length - 1, 0) : 0;
|
|
294
|
-
u.value[t] = n[S]?.[m.value.value],
|
|
295
|
+
u.value[t] = n[S]?.[m.value.value], s[t] = S;
|
|
295
296
|
} else
|
|
296
|
-
|
|
297
|
-
|
|
297
|
+
s[t] = c;
|
|
298
|
+
s[t] !== i.value[t] && v.value?.[t]?.scrollToSelected(s[t]);
|
|
298
299
|
}
|
|
299
|
-
i.value =
|
|
300
|
+
i.value = s;
|
|
300
301
|
}
|
|
301
302
|
return me(
|
|
302
303
|
() => {
|
|
303
304
|
M();
|
|
304
305
|
},
|
|
305
306
|
{ flush: "post" }
|
|
306
|
-
), (r,
|
|
307
|
-
e.loading ? (k(), Y(
|
|
307
|
+
), (r, s) => (k(), Y("div", Fe, [
|
|
308
|
+
e.loading ? (k(), Y($, { key: 0 }, [
|
|
308
309
|
C("div", Le, [
|
|
309
310
|
J(r.$slots, "loading")
|
|
310
311
|
]),
|
|
311
|
-
|
|
312
|
+
s[1] || (s[1] = C("div", { class: "chook-picker-columns" }, null, -1))
|
|
312
313
|
], 64)) : e.columns.length ? (k(), Y("div", {
|
|
313
314
|
key: 2,
|
|
314
315
|
class: "chook-picker-columns chook-picker-columns-backdrop",
|
|
315
|
-
onTouchmove:
|
|
316
|
+
onTouchmove: s[0] || (s[0] = oe(() => {
|
|
316
317
|
}, ["stop"]))
|
|
317
318
|
}, [
|
|
318
|
-
(k(!0), Y(
|
|
319
|
+
(k(!0), Y($, null, se(p.value, (t, n) => (k(), B(Pe, {
|
|
319
320
|
key: n,
|
|
320
321
|
ref_for: !0,
|
|
321
322
|
ref_key: "columnsRef",
|
|
322
|
-
ref:
|
|
323
|
+
ref: v,
|
|
323
324
|
column: t,
|
|
324
325
|
fields: m.value,
|
|
325
326
|
"selected-index": i.value[n],
|
|
326
327
|
onChange: (a) => g(n, a)
|
|
327
328
|
}, null, 8, ["column", "fields", "selected-index", "onChange"]))), 128)),
|
|
328
|
-
|
|
329
|
+
s[2] || (s[2] = C("div", { class: "chook-picker-mask-backdrop" }, null, -1))
|
|
329
330
|
], 32)) : (k(), Y("div", Ee, [
|
|
330
331
|
J(r.$slots, "empty")
|
|
331
332
|
]))
|
|
@@ -345,43 +346,43 @@ const we = ["onClick"], Pe = /* @__PURE__ */ L({
|
|
|
345
346
|
modelModifiers: {}
|
|
346
347
|
}),
|
|
347
348
|
emits: /* @__PURE__ */ V(["change"], ["update:modelValue"]),
|
|
348
|
-
setup(e, { expose:
|
|
349
|
-
const o = e, u = f, i =
|
|
350
|
-
const { columnsType: r, minDate:
|
|
349
|
+
setup(e, { expose: l, emit: f }) {
|
|
350
|
+
const o = e, u = f, i = U(e, "modelValue"), v = I(() => {
|
|
351
|
+
const { columnsType: r, minDate: s, maxDate: t } = o, n = {
|
|
351
352
|
year: m,
|
|
352
353
|
month: d,
|
|
353
354
|
day: p
|
|
354
355
|
};
|
|
355
|
-
return r.map((a) => n[a](
|
|
356
|
+
return r.map((a) => n[a](s, t));
|
|
356
357
|
});
|
|
357
358
|
i.value.length || M();
|
|
358
|
-
function m(r,
|
|
359
|
-
const t = r.getFullYear(), n =
|
|
359
|
+
function m(r, s) {
|
|
360
|
+
const t = r.getFullYear(), n = s.getFullYear();
|
|
360
361
|
return b(t, n, o.formatYearLabel);
|
|
361
362
|
}
|
|
362
|
-
function d(r,
|
|
363
|
-
const t = g("year"), n = Q(t, r) ? r.getMonth() + 1 : 1, a = W(t,
|
|
363
|
+
function d(r, s) {
|
|
364
|
+
const t = g("year"), n = Q(t, r) ? r.getMonth() + 1 : 1, a = W(t, s) ? s.getMonth() + 1 : 12;
|
|
364
365
|
return b(n, a, o.formatMonthLabel);
|
|
365
366
|
}
|
|
366
|
-
function p(r,
|
|
367
|
-
const t = g("year"), n = g("month"), a = Q(t, r) && Me(n, r), c = W(t,
|
|
368
|
-
return b(
|
|
367
|
+
function p(r, s) {
|
|
368
|
+
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);
|
|
369
|
+
return b(y, S, o.formatDayLabel);
|
|
369
370
|
}
|
|
370
371
|
function g(r) {
|
|
371
|
-
const { columnsType:
|
|
372
|
+
const { columnsType: s } = o, t = s.indexOf(r), n = i.value[t];
|
|
372
373
|
return n ? Number(n) : _(o.minDate, o.maxDate, r);
|
|
373
374
|
}
|
|
374
375
|
function M() {
|
|
375
376
|
const { columnsType: r } = o;
|
|
376
|
-
i.value = r.map((
|
|
377
|
+
i.value = r.map((s) => _(o.minDate, o.maxDate, s));
|
|
377
378
|
}
|
|
378
|
-
return
|
|
379
|
+
return l({
|
|
379
380
|
setCurrentDate: M
|
|
380
|
-
}), (r,
|
|
381
|
+
}), (r, s) => (k(), B(ae, {
|
|
381
382
|
modelValue: i.value,
|
|
382
|
-
"onUpdate:modelValue":
|
|
383
|
-
columns:
|
|
384
|
-
onChange:
|
|
383
|
+
"onUpdate:modelValue": s[0] || (s[0] = (t) => i.value = t),
|
|
384
|
+
columns: v.value,
|
|
385
|
+
onChange: s[1] || (s[1] = (t) => u("change", t))
|
|
385
386
|
}, null, 8, ["modelValue", "columns"]));
|
|
386
387
|
}
|
|
387
388
|
}), He = /* @__PURE__ */ L({
|
|
@@ -398,8 +399,8 @@ const we = ["onClick"], Pe = /* @__PURE__ */ L({
|
|
|
398
399
|
modelModifiers: {}
|
|
399
400
|
}),
|
|
400
401
|
emits: /* @__PURE__ */ V(["change"], ["update:modelValue"]),
|
|
401
|
-
setup(e, { expose:
|
|
402
|
-
const o = e, u = f, i =
|
|
402
|
+
setup(e, { expose: l, emit: f }) {
|
|
403
|
+
const o = e, u = f, i = U(e, "modelValue"), v = I(() => {
|
|
403
404
|
const { columnsType: t } = o, n = {
|
|
404
405
|
hour: p,
|
|
405
406
|
minute: g,
|
|
@@ -407,33 +408,33 @@ const we = ["onClick"], Pe = /* @__PURE__ */ L({
|
|
|
407
408
|
};
|
|
408
409
|
return t.map((a) => n[a]());
|
|
409
410
|
}), m = I(() => ee(o.minTime ?? "") ?? { hour: 0, minute: 0, second: 0 }), d = I(() => ee(o.maxTime ?? "") ?? { hour: 23, minute: 59, second: 59 });
|
|
410
|
-
i.value.length ||
|
|
411
|
+
i.value.length || s();
|
|
411
412
|
function p() {
|
|
412
413
|
const t = m.value.hour, n = d.value.hour;
|
|
413
414
|
return b(t, n, o.formatHourLabel);
|
|
414
415
|
}
|
|
415
416
|
function g() {
|
|
416
|
-
const t = r("hour"), { hour: n, minute: a } = m.value, { hour: c, minute:
|
|
417
|
-
return b(t === n ? a : 0, t === c ?
|
|
417
|
+
const t = r("hour"), { hour: n, minute: a } = m.value, { hour: c, minute: y } = d.value;
|
|
418
|
+
return b(t === n ? a : 0, t === c ? y : 59, o.formatMinuteLabel);
|
|
418
419
|
}
|
|
419
420
|
function M() {
|
|
420
|
-
const t = r("hour"), n = r("minute"), { hour: a, minute: c, second:
|
|
421
|
-
return b(t === a && n === c ?
|
|
421
|
+
const t = r("hour"), n = r("minute"), { hour: a, minute: c, second: y } = m.value, { hour: S, minute: O, second: w } = d.value;
|
|
422
|
+
return b(t === a && n === c ? y : 0, t === S && n === O ? w : 59, o.formatSecondLabel);
|
|
422
423
|
}
|
|
423
424
|
function r(t) {
|
|
424
425
|
const { columnsType: n } = o, a = n.indexOf(t), c = i.value[a];
|
|
425
426
|
return c !== void 0 ? Number(c) : te(m.value, d.value, t);
|
|
426
427
|
}
|
|
427
|
-
function
|
|
428
|
+
function s() {
|
|
428
429
|
const { columnsType: t } = o;
|
|
429
430
|
i.value = t.map((n) => te(m.value, d.value, n));
|
|
430
431
|
}
|
|
431
|
-
return
|
|
432
|
-
setCurrentTime:
|
|
432
|
+
return l({
|
|
433
|
+
setCurrentTime: s
|
|
433
434
|
}), (t, n) => (k(), B(ae, {
|
|
434
435
|
modelValue: i.value,
|
|
435
436
|
"onUpdate:modelValue": n[0] || (n[0] = (a) => i.value = a),
|
|
436
|
-
columns:
|
|
437
|
+
columns: v.value,
|
|
437
438
|
onChange: n[1] || (n[1] = (a) => u("change", a))
|
|
438
439
|
}, null, 8, ["modelValue", "columns"]));
|
|
439
440
|
}
|