@component-hook/picker 1.4.4 → 1.5.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/index.css +1 -1
- package/dist/react/picker.es.js +422 -720
- package/dist/react/picker.umd.js +2 -7
- package/dist/vue/index.css +1 -1
- package/dist/vue/picker.es.d.ts +70 -59
- package/dist/vue/picker.es.js +428 -424
- package/dist/vue/picker.umd.js +2 -2
- package/package.json +7 -6
package/dist/react/picker.umd.js
CHANGED
|
@@ -1,7 +1,2 @@
|
|
|
1
|
-
(function(
|
|
2
|
-
/*$vite$:1*/`,document.head.appendChild(
|
|
3
|
-
let props = %s;
|
|
4
|
-
<%s {...props} />
|
|
5
|
-
React keys must be passed directly to JSX without using spread:
|
|
6
|
-
let props = %s;
|
|
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"})}));
|
|
1
|
+
(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require("react"),require("react/jsx-runtime")):typeof define==`function`&&define.amd?define([`exports`,`react`,`react/jsx-runtime`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.picker={},e.React,e.react_jsx_runtime))})(this,function(e,t,n){var r=document.createElement(`style`);r.textContent=`:root{--chook-picker-background:#fff;--chook-picker-columns-margin:0 1rem;--chook-picker-columns-backdrop:linear-gradient(to bottom, #f2f2f2 0px, #f2f2f2 .0625rem, transparent .0625rem, transparent calc(100% - .0625rem), #f2f2f2 calc(100% - .0625rem), #f2f2f2 100%);--chook-picker-mask-backdrop:linear-gradient(180deg, #ffffffe6, #fff6), linear-gradient(0deg, #ffffffe6, #fff6);--chook-picker-column-label-color:#323233;--chook-picker-column-label-padding:0 .25rem;--chook-picker-column-font-size:1rem;--chook-picker-column-font-weight:500}.chook-picker-container{background:var(--chook-picker-background)}.chook-picker-columns{width:calc(100% - var(--chook-picker-columns-margin) * 2);height:13.5rem;margin:var(--chook-picker-columns-margin);display:flex;position:relative;overflow:hidden}.chook-picker-columns-backdrop{background-image:var(--chook-picker-columns-backdrop);background-position:50%;background-repeat:no-repeat;background-size:100% 3rem}.chook-picker-mask-backdrop{pointer-events:none;background-image:var(--chook-picker-mask-backdrop);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 5.25rem;width:100%;height:100%;position:absolute;top:0;left:0}.chook-picker-loading{width:100%;height:100%;position:absolute;top:0;left:0}.chook-picker-column{cursor:grab;flex:1;padding:5.375rem 0;overflow:hidden}.chook-picker-column ul{margin:0;padding:0;list-style:none}.chook-picker-column-item{cursor:grab;justify-content:center;align-items:center;height:3rem;display:flex}.chook-picker-column-label{color:var(--chook-picker-column-label-color);font-size:var(--chook-picker-column-font-size);font-weight:var(--chook-picker-column-font-weight);padding:var(--chook-picker-column-label-padding);text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;overflow:hidden}
|
|
2
|
+
/*$vite$:1*/`,document.head.appendChild(r),Object.defineProperty(e,Symbol.toStringTag,{value:`Module`});var i=.52,a=.008,o=[`year`,`month`,`day`],s=[`hour`,`minute`,`second`],c=Array.isArray;function l(e,t){if(m(e))return`multiple`;let[n]=e;return n?.[t.children]?`cascade`:`single`}function u(e){return{children:e?.children||`children`,label:e?.label||`label`,value:e?.value||`value`}}function d(e,t,n){if(m(e))return[];let r=[],i=e,a=0;for(;i;){let e=t[a],o=p(i,e,n);o===-1&&(o=0),r.push(i),a+=1,i=i[o]?.[n.children]}return r}function f(e,t,n,r){let i=[...n],a=e,o=t+1;for(;a?.[r.children];){let e=a[r.children][0];i[o]=e.value,a=e,o+=1}return i}function p(e,t,n){return e.findIndex(e=>e?.[n.value]===t)}function m(e){let[t]=e;return c(t)}function h(e,t){return e>t?`horizontal`:t>e?`vertical`:``}function g(){let{fontSize:e}=getComputedStyle(document.documentElement);return Number(e.replace(`px`,``))||16}function _(e,t,n){let r=[];for(let i=e;i<=t;i++){let e=n(String(i));r.push({label:e,value:i})}return r}function v(e,t){return e===t.getFullYear()}function y(e,t){return e===t.getFullYear()}function b(e,t){return e===t.getMonth()+1}function x(e,t){return e===t.getMonth()+1}function S(e,t){return new Date(e,t,0).getDate()}function C(e,t,n){let r=new Date,i=Date.now(),a=e.getTime(),o=t.getTime(),s=i>=a&&i<=o;return n===`year`?s?r.getFullYear():e.getFullYear():n===`month`?(s?r.getMonth():e.getMonth())+1:s?r.getDate():e.getDate()}function w(e){return e}function T(e){return/^(?:[01]\d|2[0-3]):[0-5]\d:[0-5]\d$/.test(e)}function E(e){if(!T(e))return null;let[t,n,r]=e.split(`:`,3);return{hour:Number(t),minute:Number(n),second:Number(r)}}function D(e){return e.padStart(2,`0`)}function O(e,t,n){let r=Date.now(),{hour:i,minute:a,second:o}=e,{hour:s,minute:c,second:l}=t,u=new Date().setHours(i,a,o),d=new Date().setHours(s,c,l),f=r>=u&&r<=d;return n===`hour`?f?new Date().getHours():i:n===`minute`?f?new Date().getMinutes():a:f?new Date().getSeconds():o}function k(e){return(0,t.forwardRef)(e)}function A(){let e={startX:0,startY:0,deltaX:0,deltaY:0,offsetX:0,offsetY:0},t=``,n=!0,r=()=>t===`vertical`,i=()=>t===`horizontal`;function a(){e.deltaX=0,e.deltaY=0,e.offsetX=0,e.offsetY=0,t=``,n=!0}function o(t){let n=`touches`in t?t.touches[0]:t;a(),e.startX=n.clientX,e.startY=n.clientY}function s(r){if(!e.startX||!e.startY)return!0;let i=`touches`in r?r.touches[0]:r;e.deltaX=Math.max(i.clientX,0)-e.startX,e.deltaY=i.clientY-e.startY,e.offsetX=Math.abs(e.deltaX),e.offsetY=Math.abs(e.deltaY),(!t||e.offsetX<10&&e.offsetY<10)&&(t=h(e.offsetX,e.offsetY)),n&&(e.offsetX>5||e.offsetY>5)&&(n=!1)}function c(){e.startX=0,e.startY=0}return{pointer:e,move:s,start:o,stop:c,reset:a,isVertical:r,isHorizontal:i}}function j({column:e,onChange:n}){let r=g()/16,[i,o]=(0,t.useState)(0),s=(0,t.useRef)(null),c=(0,t.useRef)(0),l=(0,t.useRef)(0),u=(0,t.useRef)(0),d=(0,t.useRef)(0),f=(0,t.useRef)(!1),p=(0,t.useRef)(null),{pointer:m,start:h,move:_,stop:v}=(0,t.useMemo)(()=>A(),[]);function y(e){return e*r}function b(t){let n=e.length,r=Math.round(-t/y(48));return r<0?0:r>=n?n-1:r}function x(e){let t=-e*y(48),r=()=>n?.(e);f.current&&t!==c.current?p.current=r:r(),w(t)}function S(e){h(e),f.current=!0,o(0),u.current=Date.now(),l.current=c.current,d.current=l.current,p.current=null}function C(t){if(_(t))return;let n=e.length,r=l.current+m.deltaY,i=y((n-1)*-48),a=Math.min(Math.max(r,i),0),o=Date.now();w(a),!(o-u.current<=300)&&(u.current=o,d.current=a)}function w(e){c.current=e,s.current&&s.current.style.setProperty(`--offset-y`,String(e))}function T(){v();let e=c.current-d.current,t=Date.now()-u.current;if(t<300&&Math.abs(e)>15){E(e,t);return}let n=b(c.current);o(150),x(n),f.current=!1}function E(e,t){let n=Math.abs(e/t),r=b(c.current+n/a*(e<0?-1:1));o(300),x(r)}function D(){o(0),f.current=!1,p.current&&=(p.current(),null)}function O(e,t=`auto`){f.current&&t===`smooth`||(p.current=null,f.current=t===`smooth`,o(t===`smooth`?150:0),x(e))}return{columnRef:s,transitionDuration:i,onPointerDown:S,onPointerMove:C,onPointerUp:T,stopInertialSliding:D,scrollToIndex:O}}function M({column:e,fields:r,selectedIndex:a=0,onChange:o},s){let{columnRef:c,transitionDuration:l,onPointerDown:u,onPointerMove:d,onPointerUp:f,stopInertialSliding:p,scrollToIndex:m}=j({column:e,onChange:h});function h(e){e!==a&&o(e)}function g(e=a,t){m(e,t)}function _(e){e!==a&&g(e,`smooth`)}return(0,t.useImperativeHandle)(s,()=>({scrollToSelected:g})),(0,n.jsx)(`div`,{role:`presentation`,"aria-label":`Picker column`,className:`chook-picker-column`,onTouchStart:u,onTouchMove:d,onTouchEnd:f,onTouchCancel:f,onMouseDown:u,onMouseMove:d,onMouseUp:f,onMouseLeave:f,style:{overflowY:`hidden`,touchAction:`none`},children:(0,n.jsx)(`ul`,{ref:c,style:{overflowY:`hidden`,transform:`translate3d(0, calc(var(--offset-y) * 1px), 0)`,transitionDuration:`${l}ms`,transitionProperty:l?`all`:`none`,touchAction:`none`},onTransitionEnd:p,children:e.map((e,t)=>(0,n.jsx)(`div`,{tabIndex:0,role:`button`,"aria-label":`Select option`,className:`chook-picker-column-item`,onClick:()=>_(t),onKeyDown:e=>{(e.key===`Enter`||e.key===` `)&&_(t)},children:(0,n.jsx)(`p`,{className:`chook-picker-column-label`,style:{transform:`rotate3d(1, 0, 0, calc((${t*48} + var(--offset-y)) * ${i}deg)`},children:e?.[r.label]})},e?.[r.value]))})})}var N=k(M);N.displayName=`Column`;function P(e,r){let{loading:i,loadingSlot:a,columns:o,emptySlot:s,currentColumns:c,fields:l,selectedIndices:u,updateSelectedValueByIndex:d}=e,f=(0,t.useRef)([]);function p(e,t){f.current[e]?.scrollToSelected(t)}return(0,t.useImperativeHandle)(r,()=>({scrollColumnToSelected:p})),i?(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)(`div`,{className:`chook-picker-loading`,children:a}),(0,n.jsx)(`div`,{className:`chook-picker-columns`})]}):o.length?(0,n.jsxs)(`div`,{className:`chook-picker-columns chook-picker-columns-backdrop`,onTouchMove:e=>e.stopPropagation(),children:[c.map((e,t)=>(0,n.jsx)(N,{ref:e=>{f.current[t]=e},column:e,fields:l,selectedIndex:u[t],onChange:e=>d(t,e)},t)),(0,n.jsx)(`div`,{className:`chook-picker-mask-backdrop`})]}):(0,n.jsx)(`div`,{className:`chook-picker-columns`,children:s})}var F=k(P);F.displayName=`Columns`;function I({values:e,columns:r,loading:i=!1,loadingSlot:a,emptySlot:o,columnsFieldNames:s,onChange:c}){let[m,h]=(0,t.useState)(e??[]),[g,_]=(0,t.useState)([]),v=(0,t.useRef)(null),y=u(s),b=l(r,y),x=(0,t.useMemo)(()=>b===`single`?[r]:b===`multiple`?r:d(r,m,y),[r,b,m,y]);function S(e,t){let n=x[e],r=n[t]?.[y.value];if(r===m[e])return;let i=[...m];if(i[e]=r,b===`cascade`){let r=n[t],a=f(r,e,i,y);h(a),c?.(a)}else h(i),c?.(i)}function C(e){return e.some((e,t)=>e!==m[t])}return(0,t.useEffect)(()=>{!e||!C(e)||h([...e])},[e]),(0,t.useEffect)(()=>{let e=x.length,t=[],n=[...m],r=!1;for(let i=0;i<e;i++){let e=x[i],a=m[i],o=p(e,a,y);if(o===-1){let r=(g[i]??0)>=e.length?Math.max(e.length-1,0):0;n[i]=e[r]?.[y.value],t[i]=r}else t[i]=o;t[i]!==g[i]&&(v.current?.scrollColumnToSelected(i,t[i]),r=!0)}r&&(h(n),_(t))},[m,x,y]),(0,n.jsx)(`div`,{className:`chook-picker-container`,"aria-label":`Picker`,children:(0,n.jsx)(F,{ref:v,loading:i,loadingSlot:a,columns:r,emptySlot:o,currentColumns:x,fields:y,selectedIndices:g,updateSelectedValueByIndex:S})})}function L({values:e,columnsType:r=o,minDate:i=new Date(new Date().getFullYear()-10,0,1),maxDate:a=new Date(new Date().getFullYear()+10,11,31),formatYearLabel:s=w,formatMonthLabel:c=w,formatDayLabel:l=w,onChange:u},d){let[f,p]=(0,t.useState)([]),m=(0,t.useMemo)(()=>e??f,[e,f]),h=(0,t.useMemo)(()=>{let e={year:g,month:T,day:E};return r.map(t=>e[t]())},[r,i,a,m,s,c,l]);function g(){return _(i.getFullYear(),a.getFullYear(),s)}function T(){let e=D(`year`);return _(v(e,i)?i.getMonth()+1:1,y(e,a)?a.getMonth()+1:12,c)}function E(){let e=D(`year`),t=D(`month`),n=v(e,i)&&b(t,i),r=y(e,a)&&x(t,a);return _(n?i.getDate():1,r?a.getDate():S(e,t),l)}function D(e){let t=r.indexOf(e),n=m?.[t];return n?Number(n):C(i,a,e)}function O(t){e||p(t),u?.(t)}function k(){O(r.map(e=>C(i,a,e)))}return(0,t.useEffect)(()=>{(!e||!e.length)&&k()},[]),(0,t.useImperativeHandle)(d,()=>({setCurrentDate:k})),(0,n.jsx)(I,{values:m,columns:h,onChange:O})}var R=k(L);R.displayName=`DatePicker`;function z({values:e,columnsType:r=s,minTime:i,maxTime:a,formatHourLabel:o=D,formatMinuteLabel:c=D,formatSecondLabel:l=D,onChange:u},d){let[f,p]=(0,t.useState)([]),m=(0,t.useMemo)(()=>e??f,[e,f]),h=(0,t.useMemo)(()=>E(i??``)??{hour:0,minute:0,second:0},[i]),g=(0,t.useMemo)(()=>E(a??``)??{hour:23,minute:59,second:59},[a]),v={hour:b,minute:x,second:S},y=r.map(e=>v[e]());function b(){return _(h.hour,g.hour,o)}function x(){let e=C(`hour`),{hour:t,minute:n}=h,{hour:r,minute:i}=g;return _(e===t?n:0,e===r?i:59,c)}function S(){let e=C(`hour`),t=C(`minute`),{hour:n,minute:r,second:i}=h,{hour:a,minute:o,second:s}=g;return _(e===n&&t===r?i:0,e===a&&t===o?s:59,l)}function C(e){let t=r.indexOf(e),n=m?.[t];return n===void 0?O(h,g,e):Number(n)}function w(t){e||p(t),u?.(t)}function T(){w(r.map(e=>O(h,g,e)))}return(0,t.useEffect)(()=>{(!e||!e.length)&&T()},[]),(0,t.useImperativeHandle)(d,()=>({setCurrentTime:T})),(0,n.jsx)(I,{values:m,columns:y,onChange:w})}var B=k(z);B.displayName=`TimePicker`,e.DatePicker=R,e.Picker=I,e.TimePicker=B});
|
package/dist/vue/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
:root{--chook-picker-background
|
|
1
|
+
:root{--chook-picker-background:#fff;--chook-picker-columns-margin:0 1rem;--chook-picker-columns-backdrop:linear-gradient(to bottom, #f2f2f2 0px, #f2f2f2 .0625rem, transparent .0625rem, transparent calc(100% - .0625rem), #f2f2f2 calc(100% - .0625rem), #f2f2f2 100%);--chook-picker-mask-backdrop:linear-gradient(180deg, #ffffffe6, #fff6), linear-gradient(0deg, #ffffffe6, #fff6);--chook-picker-column-label-color:#323233;--chook-picker-column-label-padding:0 .25rem;--chook-picker-column-font-size:1rem;--chook-picker-column-font-weight:500}.chook-picker-container{background:var(--chook-picker-background)}.chook-picker-columns{width:calc(100% - var(--chook-picker-columns-margin) * 2);height:13.5rem;margin:var(--chook-picker-columns-margin);display:flex;position:relative;overflow:hidden}.chook-picker-columns-backdrop{background-image:var(--chook-picker-columns-backdrop);background-position:50%;background-repeat:no-repeat;background-size:100% 3rem}.chook-picker-mask-backdrop{pointer-events:none;background-image:var(--chook-picker-mask-backdrop);background-position:top,bottom;background-repeat:no-repeat;background-size:100% 5.25rem;width:100%;height:100%;position:absolute;top:0;left:0}.chook-picker-loading{width:100%;height:100%;position:absolute;top:0;left:0}.chook-picker-column{cursor:grab;flex:1;padding:5.375rem 0;overflow:hidden}.chook-picker-column ul{margin:0;padding:0;list-style:none}.chook-picker-column-item{cursor:grab;justify-content:center;align-items:center;height:3rem;display:flex}.chook-picker-column-label{color:var(--chook-picker-column-label-color);font-size:var(--chook-picker-column-font-size);font-weight:var(--chook-picker-column-font-weight);padding:var(--chook-picker-column-label-padding);text-overflow:ellipsis;white-space:nowrap;-webkit-user-select:none;user-select:none;overflow:hidden}
|
package/dist/vue/picker.es.d.ts
CHANGED
|
@@ -1,67 +1,91 @@
|
|
|
1
|
-
import { AllowedComponentProps } from 'vue';
|
|
2
|
-
import { ComponentCustomProps } from 'vue';
|
|
3
1
|
import { ComponentOptionsMixin } from 'vue';
|
|
4
2
|
import { ComponentProvideOptions } from 'vue';
|
|
5
3
|
import { DefineComponent } from 'vue';
|
|
6
4
|
import { PublicProps } from 'vue';
|
|
7
|
-
import { ShallowUnwrapRef } from 'vue';
|
|
8
5
|
import { VNode } from 'vue';
|
|
9
|
-
import { VNodeProps } from 'vue';
|
|
10
6
|
|
|
11
|
-
declare
|
|
7
|
+
declare const __VLS_export: <T extends string | number>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
8
|
+
props: PublicProps & __VLS_PrettifyLocal<(Props<T> & {
|
|
9
|
+
modelValue?: T[];
|
|
10
|
+
}) & {
|
|
11
|
+
onChange?: ((values: T[]) => any) | undefined;
|
|
12
|
+
"onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
|
|
13
|
+
}> & (typeof globalThis extends {
|
|
14
|
+
__VLS_PROPS_FALLBACK: infer P;
|
|
15
|
+
} ? P : {});
|
|
16
|
+
expose: (exposed: {}) => void;
|
|
17
|
+
attrs: any;
|
|
18
|
+
slots: {
|
|
19
|
+
loading?: (props: {}) => any;
|
|
20
|
+
} & {
|
|
21
|
+
empty?: (props: {}) => any;
|
|
22
|
+
};
|
|
23
|
+
emit: ((evt: "change", values: T[]) => void) & ((event: "update:modelValue", value: T[]) => void);
|
|
24
|
+
}>) => VNode & {
|
|
25
|
+
__ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
|
|
26
|
+
};
|
|
27
|
+
|
|
28
|
+
declare const __VLS_export_2: DefineComponent<__VLS_PublicProps, {
|
|
29
|
+
setCurrentDate: typeof setDefaultValues;
|
|
30
|
+
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
31
|
+
change: (values: number[]) => any;
|
|
32
|
+
"update:modelValue": (value: number[]) => any;
|
|
33
|
+
}, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
34
|
+
onChange?: ((values: number[]) => any) | undefined;
|
|
35
|
+
"onUpdate:modelValue"?: ((value: number[]) => any) | undefined;
|
|
36
|
+
}>, {
|
|
37
|
+
columnsType: DatePickerColumnType[];
|
|
38
|
+
minDate: Date;
|
|
39
|
+
maxDate: Date;
|
|
40
|
+
formatYearLabel: PickerFormatLabel;
|
|
41
|
+
formatMonthLabel: PickerFormatLabel;
|
|
42
|
+
formatDayLabel: PickerFormatLabel;
|
|
43
|
+
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
44
|
+
|
|
45
|
+
declare const __VLS_export_3: DefineComponent<__VLS_PublicProps_2, {
|
|
46
|
+
setCurrentTime: typeof setDefaultValues_2;
|
|
47
|
+
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
48
|
+
change: (values: number[]) => any;
|
|
49
|
+
"update:modelValue": (value: number[]) => any;
|
|
50
|
+
}, string, PublicProps, Readonly<__VLS_PublicProps_2> & Readonly<{
|
|
51
|
+
onChange?: ((values: number[]) => any) | undefined;
|
|
52
|
+
"onUpdate:modelValue"?: ((value: number[]) => any) | undefined;
|
|
53
|
+
}>, {
|
|
54
|
+
columnsType: TimePickerColumnType[];
|
|
55
|
+
formatHourLabel: PickerFormatLabel;
|
|
56
|
+
formatMinuteLabel: PickerFormatLabel;
|
|
57
|
+
formatSecondLabel: PickerFormatLabel;
|
|
58
|
+
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
59
|
+
|
|
60
|
+
declare type __VLS_ModelProps = {
|
|
61
|
+
modelValue?: number[];
|
|
62
|
+
};
|
|
63
|
+
|
|
64
|
+
declare type __VLS_ModelProps_2 = {
|
|
65
|
+
modelValue?: number[];
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
declare type __VLS_PrettifyLocal<T> = (T extends any ? {
|
|
12
69
|
[K in keyof T]: T[K];
|
|
13
|
-
}
|
|
70
|
+
} : {
|
|
71
|
+
[K in keyof T as K]: T[K];
|
|
72
|
+
}) & {};
|
|
14
73
|
|
|
15
74
|
declare type __VLS_Props = Props_2;
|
|
16
75
|
|
|
17
76
|
declare type __VLS_Props_2 = Props_3;
|
|
18
77
|
|
|
19
|
-
declare type __VLS_PublicProps =
|
|
20
|
-
modelValue?: number[];
|
|
21
|
-
} & __VLS_Props;
|
|
78
|
+
declare type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
22
79
|
|
|
23
|
-
declare type __VLS_PublicProps_2 =
|
|
24
|
-
modelValue?: number[];
|
|
25
|
-
} & __VLS_Props_2;
|
|
80
|
+
declare type __VLS_PublicProps_2 = __VLS_Props_2 & __VLS_ModelProps_2;
|
|
26
81
|
|
|
27
|
-
export declare const DatePicker:
|
|
28
|
-
setCurrentDate: typeof setDefaultValues;
|
|
29
|
-
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
30
|
-
change: (values: number[]) => any;
|
|
31
|
-
"update:modelValue": (value: number[]) => any;
|
|
32
|
-
}, string, PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
33
|
-
onChange?: ((values: number[]) => any) | undefined;
|
|
34
|
-
"onUpdate:modelValue"?: ((value: number[]) => any) | undefined;
|
|
35
|
-
}>, {
|
|
36
|
-
columnsType: DatePickerColumnType[];
|
|
37
|
-
minDate: Date;
|
|
38
|
-
maxDate: Date;
|
|
39
|
-
formatYearLabel: PickerFormatLabel;
|
|
40
|
-
formatMonthLabel: PickerFormatLabel;
|
|
41
|
-
formatDayLabel: PickerFormatLabel;
|
|
42
|
-
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
82
|
+
export declare const DatePicker: typeof __VLS_export_2;
|
|
43
83
|
|
|
44
84
|
export declare type DatePickerColumnType = 'year' | 'month' | 'day';
|
|
45
85
|
|
|
46
86
|
export declare type Direction = '' | 'vertical' | 'horizontal';
|
|
47
87
|
|
|
48
|
-
export declare const Picker:
|
|
49
|
-
props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
|
|
50
|
-
readonly onChange?: ((values: T[]) => any) | undefined;
|
|
51
|
-
readonly "onUpdate:modelValue"?: ((value: T[]) => any) | undefined;
|
|
52
|
-
} & VNodeProps & AllowedComponentProps & ComponentCustomProps, never>, "onChange" | "onUpdate:modelValue"> & ({
|
|
53
|
-
modelValue?: T[];
|
|
54
|
-
} & Props<T>) & Partial<{}>> & PublicProps;
|
|
55
|
-
expose(exposed: ShallowUnwrapRef< {}>): void;
|
|
56
|
-
attrs: any;
|
|
57
|
-
slots: {
|
|
58
|
-
loading?(_: {}): any;
|
|
59
|
-
empty?(_: {}): any;
|
|
60
|
-
};
|
|
61
|
-
emit: ((evt: "change", values: T[]) => void) & ((evt: "update:modelValue", value: T[]) => void);
|
|
62
|
-
}>) => VNode & {
|
|
63
|
-
__ctx?: Awaited<typeof __VLS_setup>;
|
|
64
|
-
};
|
|
88
|
+
export declare const Picker: typeof __VLS_export;
|
|
65
89
|
|
|
66
90
|
export declare type PickerColumn<T = string | number> = Array<PickerOption<T> | undefined>;
|
|
67
91
|
|
|
@@ -112,20 +136,7 @@ declare function setDefaultValues(): void;
|
|
|
112
136
|
|
|
113
137
|
declare function setDefaultValues_2(): void;
|
|
114
138
|
|
|
115
|
-
export declare const TimePicker:
|
|
116
|
-
setCurrentTime: typeof setDefaultValues_2;
|
|
117
|
-
}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
|
|
118
|
-
change: (values: number[]) => any;
|
|
119
|
-
"update:modelValue": (value: number[]) => any;
|
|
120
|
-
}, string, PublicProps, Readonly<__VLS_PublicProps_2> & Readonly<{
|
|
121
|
-
onChange?: ((values: number[]) => any) | undefined;
|
|
122
|
-
"onUpdate:modelValue"?: ((value: number[]) => any) | undefined;
|
|
123
|
-
}>, {
|
|
124
|
-
columnsType: TimePickerColumnType[];
|
|
125
|
-
formatHourLabel: PickerFormatLabel;
|
|
126
|
-
formatMinuteLabel: PickerFormatLabel;
|
|
127
|
-
formatSecondLabel: PickerFormatLabel;
|
|
128
|
-
}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
|
|
139
|
+
export declare const TimePicker: typeof __VLS_export_3;
|
|
129
140
|
|
|
130
141
|
export declare type TimePickerColumnType = 'hour' | 'minute' | 'second';
|
|
131
142
|
|