@manik02/vue3-timepicker 0.4.6 → 1.1.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/TimePicker/TimeColumn.vue.d.ts +4 -8
- package/dist/TimePicker/TimePicker.vue.d.ts +25 -25
- package/dist/TimePicker/types.d.ts +12 -41
- package/dist/TimePicker/useTimeMask.d.ts +0 -1
- package/dist/helpers.d.ts +2 -6
- package/dist/stories/TimePicker.stories.d.ts +100 -100
- package/dist/vue-timepicker.js +683 -731
- package/dist/vue-timepicker.umd.cjs +1 -1
- package/package.json +4 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
(function(K,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(K=typeof globalThis<"u"?globalThis:K||self,e(K.VueTimepicker={},K.Vue))})(this,(function(K,e){"use strict";const Te=["tabindex","onClick","onMousemove"],Z=e.defineComponent({__name:"TimeColumn",props:{items:{},activeIndex:{}},emits:["update:activeIndex","select"],setup(t,{emit:o}){const l=t,n=o,v=e.ref(null),y=e.ref(!1);let c=null;function N(p){const S=Array.from(p.querySelectorAll(".timepicker-option"));if(!S.length)return 0;const V=p.scrollTop+p.clientHeight/2;let I=0,L=Number.POSITIVE_INFINITY;for(let P=0;P<S.length;P++){const W=S[P],s=W.offsetTop+W.offsetHeight/2,u=Math.abs(s-V);u<L&&(L=u,I=P)}return I}function E(p){if(!l.items.length)return 0;if(!l.items[p]?.disabled)return p;for(let S=1;S<l.items.length;S++){const V=p-S,I=p+S;if(V>=0&&!l.items[V]?.disabled)return V;if(I<l.items.length&&!l.items[I]?.disabled)return I}return p}function M(){e.nextTick(()=>{const p=v.value;if(!p)return;const S=p.querySelector(".timepicker-option--active");if(S){const V=p.clientHeight,I=S.offsetTop,L=S.offsetHeight,P=I-V/2+L/2;y.value=!0,p.scrollTo({top:P,behavior:"auto"}),c&&clearTimeout(c),c=setTimeout(()=>{y.value=!1},70)}})}function R(){const p=v.value;if(!p||y.value)return;const S=N(p),V=E(S);l.items[V]?.disabled||(D.value=V)}e.onMounted(M),e.onBeforeUnmount(()=>{c&&clearTimeout(c)});function T(p){n("update:activeIndex",p),n("select",l.items[p]?.value)}function A(p){T(p)}const D=e.ref(l.activeIndex??0);return(p,S)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["timepicker-dropdown",{"timepicker-dropdown--short":p.items.length<=3}])},[e.createElementVNode("div",{ref_key:"menu",ref:v,class:"timepicker-dropdown__panel",role:"listbox",tabindex:"-1",onScroll:R},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(p.items,(V,I)=>(e.openBlock(),e.createElementBlock("div",{key:V.key,class:e.normalizeClass(["timepicker-option",{"timepicker-option--active":I===p.activeIndex,"timepicker-option--disabled":V.disabled,"timepicker-option--focused":I===D.value}]),role:"option",tabindex:V.disabled?-1:0,onClick:L=>!V.disabled&&A(I),onMousemove:L=>!V.disabled&&(D.value=I)},e.toDisplayString(V.text),43,Te))),128))],544)],2))}});function me(t){return t.h*3600+t.m*60+t.s}function fe(t){return/(a|A|p|P)/.test(t)}function re(t){return/k{1,2}/.test(t)}function O(t,o){if(!t||typeof t!="string")return{h:0,m:0,s:0};const l=t.match(/\d+/g)||[];let n=l[0]!==void 0?+l[0]:0;const v=+l[1]||0,y=+l[2]||0;return{h:n,m:v,s:y}}function Se(t){const o=t%12;return o===0?12:o}function pe(t,o){return o?t%12+12:t%12}function xe(t){return/(s|ss)/.test(t)}function ee(t,o){let{h:l,m:n,s:v}=o;const y=fe(t),c=l>=12?"PM":"AM";y&&(l=Se(l));const N=l===0?24:l,E={HH:String(l).padStart(2,"0"),H:String(l),hh:String(l).padStart(2,"0"),h:String(l),kk:String(N).padStart(2,"0"),k:String(N),mm:String(n).padStart(2,"0"),m:String(n),ss:String(v).padStart(2,"0"),s:String(v),A:c,a:c.toLowerCase(),P:c,p:c.toLowerCase()};return t.replace(/HH|hh|kk|mm|ss|H|h|k|m|s|A|a|P|p/g,M=>E[M]??M)}function z(t,o){return me(t)-me(o)}function Ve(t,o,l){return o&&z(t,o)<0?{...o}:l&&z(t,l)>0?{...l}:{...t}}function ve(t,o,l){return!(o&&z(t,o)<0||l&&z(t,l)>0)}function he(t,o){return o.some(([l,n])=>z(t,l)>=0&&z(t,n)<=0)}const ge=e.defineComponent({__name:"TimeSelection",props:{open:{type:Boolean},initTime:{},format:{},minTime:{},maxTime:{},disabledRanges:{},isTimeDisabled:{type:Function},hourStep:{},minuteStep:{},secondStep:{}},emits:["update:initTime","open","close","update:open"],setup(t,{emit:o}){function l(a){return Math.max(1,a??1)}const n=e.computed(()=>fe(c.format)),v=e.computed(()=>xe(c.format)),y=e.computed(()=>re(c.format)),c=t,N=o,E=e.computed({get:()=>c.open??!1,set:a=>{const d=c.open??!1;a!==d&&(N("update:open",a),N(a?"open":"close"))}}),M=e.ref(null);function R(a){if(!E.value)return;const d=a.target;M.value&&!M.value.contains(d)&&(E.value=!1)}e.onMounted(()=>document.addEventListener("mousedown",R)),e.onBeforeUnmount(()=>document.removeEventListener("mousedown",R));function T(a){a.key==="Escape"&&E.value&&(E.value=!1)}e.onMounted(()=>document.addEventListener("keydown",T)),e.onBeforeUnmount(()=>document.removeEventListener("keydown",T));const A=e.ref(0),D=e.ref(0),p=e.ref(0),S=e.ref(0);function V(a){const d=l(c.hourStep),g=l(c.minuteStep),k=l(c.secondStep);let w=a.h;n.value?(S.value=a.h>=12?1:0,w=a.h%12):y.value&&a.h===0&&(w=24),A.value=Math.floor(w/d),D.value=Math.floor(a.m/g),p.value=Math.floor(a.s/k)}e.watch(()=>c.initTime,a=>{V(a)},{immediate:!0});function I(a,d){const g=[];for(let k=0;k<a;k+=l(d))g.push({key:k,value:k,text:String(k).padStart(2,"0")});return g}function L(a,d){const g=l(d),k=[];for(let w=0;w<12;w+=g){const X=w===0?12:w,q=a?w===0?12:w+12:w;k.push({key:q,value:q,text:String(X).padStart(2,"0")})}return k}function P(a){const d=l(a),g=[];for(let k=0;k<24;k+=d){const w=k===0?24:k;g.push({key:k,value:k,text:String(w).padStart(2,"0")})}return g}const W=e.computed(()=>{if(!n.value)return y.value?P(c.hourStep):I(24,c.hourStep);const a=S.value===1;return L(a,c.hourStep)}),s=e.computed(()=>I(60,c.minuteStep)),u=e.computed(()=>I(60,c.secondStep)),m=e.computed(()=>/\s[ap]$/.test(c.format)),b=e.computed(()=>{const a=m.value?"am":"AM",d=m.value?"pm":"PM";return[{key:"AM",value:"AM",text:a},{key:"PM",value:"PM",text:d}]}),h=e.computed(()=>s.value.map(a=>Number(a.value??0))),x=e.computed(()=>v.value?u.value.map(a=>Number(a.value??0)):[0]);function U(a){return Number(a.value??0)}function se(a){const d=a.findIndex(g=>!g.disabled);return d>=0?d:0}function _(a){return!(!ve(a,c.minTime,c.maxTime)||he(a,c.disabledRanges??[])||c.isTimeDisabled?.(a))}const J=e.computed(()=>W.value.map(a=>{const d=U(a),g=h.value.some(k=>x.value.some(w=>_({h:d,m:k,s:w})));return{...a,disabled:!g}})),ne=e.computed(()=>{const a=Number(W.value[A.value]?.value??0);return s.value.map(d=>{const g=Number(d.value??0),k=x.value.some(w=>_({h:a,m:g,s:w}));return{...d,disabled:!k}})}),oe=e.computed(()=>{const a=Number(W.value[A.value]?.value??0),d=Number(s.value[D.value]?.value??0);return u.value.map(g=>{const k=Number(g.value??0);return{...g,disabled:!_({h:a,m:d,s:k})}})}),ie=e.computed(()=>{if(!n.value)return b.value;const a=Number(s.value[D.value]?.value??0),d=v.value?Number(u.value[p.value]?.value??0):0;return b.value.map(g=>{const k=g.value==="PM",w=L(k,c.hourStep).some(X=>_({h:Number(X.value??0),m:a,s:d}));return{...g,disabled:!w}})}),le=e.computed(()=>S.value===1?"PM":"AM"),Y=e.computed(()=>{const a=Number(W.value[A.value]?.value??0);return n.value?le.value==="PM"?pe(a,!0):pe(a,!1):y.value&&a===24?0:a}),ue=e.computed(()=>Number(s.value[D.value]?.value??0)),de=e.computed(()=>Number(u.value[p.value]?.value??0));function j(a,d,g){a.length&&(!a[d]||a[d].disabled)&&g(se(a))}e.watch(J,a=>{j(a,A.value,d=>{A.value=d})}),e.watch(ne,a=>{j(a,D.value,d=>{D.value=d})}),e.watch(oe,a=>{!v.value||!a.length||j(a,p.value,d=>{p.value=d})}),e.watch(ie,a=>{!n.value||!a.length||j(a,S.value,d=>{S.value=d})});function H(a){!v.value&&!n.value&&Q()}function ce(a){n.value||Q()}function F(a){Q()}function Q(){E.value=!1}return e.watch([Y,ue,de],([a,d,g])=>{N("update:initTime",{h:a,m:d,s:g})},{immediate:!0}),(a,d)=>E.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"vtp-cols",ref_key:"root",ref:M},[e.createVNode(Z,{activeIndex:A.value,"onUpdate:activeIndex":d[0]||(d[0]=g=>A.value=g),items:J.value,label:"Hours"},null,8,["activeIndex","items"]),e.createVNode(Z,{activeIndex:D.value,"onUpdate:activeIndex":d[1]||(d[1]=g=>D.value=g),items:ne.value,label:"Minutes",onSelect:H},null,8,["activeIndex","items"]),v.value?(e.openBlock(),e.createBlock(Z,{key:0,activeIndex:p.value,"onUpdate:activeIndex":d[2]||(d[2]=g=>p.value=g),items:oe.value,label:"Seconds",onSelect:ce},null,8,["activeIndex","items"])):e.createCommentVNode("",!0),n.value?(e.openBlock(),e.createBlock(Z,{key:1,activeIndex:S.value,"onUpdate:activeIndex":d[3]||(d[3]=g=>S.value=g),items:ie.value,label:"AM/PM",onSelect:F},null,8,["activeIndex","items"])):e.createCommentVNode("",!0)],512)):e.createCommentVNode("",!0)}});function Ae(t){return typeof t=="string"?G.test(t):Array.isArray(t)?t.length===2&&G.test(t[0]??"")&&G.test(t[1]??""):!1}function te(t){return t==null||typeof t=="string"||typeof t=="number"}function Ie(t){return t==null||typeof t=="string"||Array.isArray(t)||typeof t=="object"&&t!==null}const be=/^(HH|H|hh|h|kk|k):(mm|m)(?::(ss|s))?(?:\s*(A|a|P|p))?$/,G=/^([01]\d|2[0-3]):([0-5]\d)(:([0-5]\d))?$/,$=typeof __DEV__<"u"?__DEV__:typeof process<"u"&&process.env&&process.env.NODE_ENV!=="production",we={modelValue:{type:[String,Array],default:void 0,validator:t=>{let o;return Array.isArray(t)?o=t.length===2&&t.every(l=>G.test(l)):o=t==null||G.test(t),!o&&$&&console.error(`[VueTimepicker] \`modelValue\` is wrong. Received: ${t}`),o}},range:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},hideDropdown:{type:Boolean,default:!1},hourStep:{type:Number,default:1},minuteStep:{type:Number,default:1},secondStep:{type:Number,default:1},minTime:{type:String,default:void 0,validator:t=>{const o=t==null||G.test(t);return!o&&$&&console.error(`[VueTimepicker] \`minTime\` is wrong. Received: ${t}`),o}},maxTime:{type:String,default:void 0,validator:t=>{const o=t==null||G.test(t);return!o&&$&&console.error(`[VueTimepicker] \`maxTime\` is wrong. Received: ${t}`),o}},disabledTimes:{type:Array,default:void 0,validator:t=>{const o=t==null||t.every(Ae);return!o&&$&&console.error(`[VueTimepicker] \`disabledTimes\` is wrong. Received: ${JSON.stringify(t)}`),o}},isTimeDisabled:{type:Function,default:void 0},format:{type:String,default:"HH:mm",validator:t=>{const o=be.test(t);return!o&&$&&console.error(`[VueTimepicker] \`format\` format is wrong. Received: ${t}`),o}},placeholder:{type:String,default:"Select time"},id:{type:String,default:void 0,validator:t=>{const o=t==null||typeof t=="string";return!o&&$&&console.error(`[VueTimepicker] \`id\` must be a string. Received: ${t}`),o}},name:{type:String,default:void 0,validator:t=>{const o=t==null||typeof t=="string";return!o&&$&&console.error(`[VueTimepicker] \`name\` must be a string. Received: ${t}`),o}},tabindex:{type:Number,default:0,validator:t=>{const o=Number.isInteger(t);return!o&&$&&console.error(`[VueTimepicker] \`tabindex\` must be an integer. Received: ${t}`),o}},autocomplete:{type:String,default:"off",validator:t=>{const o=typeof t=="string";return!o&&$&&console.error(`[VueTimepicker] \`autocomplete\` must be a string. Received: ${t}`),o}},inputClass:{type:[String,Array,Object],default:void 0,validator:t=>{const o=Ie(t);return!o&&$&&console.error(`[VueTimepicker] \`inputClass\` must be a string, array, or object. Received: ${t}`),o}},inputWidth:{type:[String,Number],default:void 0,validator:t=>{const o=te(t);return!o&&$&&console.error(`[VueTimepicker] \`inputWidth\` must be a string or number. Received: ${t}`),o}},componentWidth:{type:[String,Number],default:void 0,validator:t=>{const o=te(t);return!o&&$&&console.error(`[VueTimepicker] \`componentWidth\` must be a string or number. Received: ${t}`),o}},minInputWidth:{type:[String,Number],default:void 0,validator:t=>{const o=te(t);return!o&&$&&console.error(`[VueTimepicker] \`minInputWidth\` must be a string or number. Received: ${t}`),o}},maxInputWidth:{type:[String,Number],default:void 0,validator:t=>{const o=te(t);return!o&&$&&console.error(`[VueTimepicker] \`maxInputWidth\` must be a string or number. Received: ${t}`),o}},size:{type:String,default:"md",validator:t=>{const o=t==="xs"||t==="sm"||t==="md"||t==="lg"||t==="xl";return!o&&$&&console.error(`[VueTimepicker] \`size\` is wrong. Received: ${t}`),o}}};function ye(t){const o=be.exec(t);if(!o)throw new Error(`[useTimeMask] Invalid format: ${t}`);const[,l,n,v,y]=o,c=[],N=!!y,E=/^k{1,2}$/.test(l);let M=0,R=23;return N?(M=1,R=12):E&&(M=1,R=24),c.push({token:l,min:M,max:R}),c.push({token:n,min:0,max:59}),v&&c.push({token:v,min:0,max:59}),{digitGroups:c,hasAmPm:!!y,ampmLowercase:y==="a"||y==="p"}}function Me(t){try{return ye(t)}catch{return ye("HH:mm")}}function ke(t){const o=e.computed(()=>Me(t.value)),l=e.computed(()=>o.value.digitGroups.length*2),n=e.ref([]),v=e.ref("AM"),y=e.ref("");function c(){const{digitGroups:s,hasAmPm:u}=o.value;let m="",b=0;for(let h=0;h<s.length;h++){for(let x=0;x<2;x++)b<n.value.length&&(m+=String(n.value[b]),b++);b===(h+1)*2&&h<s.length-1&&(m+=":")}if(u&&b>=l.value){const h=o.value.ampmLowercase?v.value.toLowerCase():v.value;m+=" "+h}return m}function N(s){const u=s*2;if(n.value.length<u+2)return;const m=n.value[u]*10+n.value[u+1],{min:b,max:h}=o.value.digitGroups[s],x=Math.max(b,Math.min(h,m));x!==m&&(n.value[u]=Math.floor(x/10),n.value[u+1]=x%10)}function E(){for(let s=0;s<o.value.digitGroups.length;s++)N(s)}function M(s){const u=c();let m=0;for(let b=0;b<Math.min(s,u.length);b++)/\d/.test(u[b])&&m++;return m}function R(s){return s+Math.floor(s/2)}function T(s,u){if(s>=l.value)return l.value;const m=[...n.value];m[s]=u,n.value=m;const b=Math.floor(s/2);return N(b),Math.min(s+1,l.value)}function A(s,u){const m=c();y.value=m,s.value=m;const b=u!==void 0?Math.min(R(u),m.length):m.length;s.selectionStart=s.selectionEnd=b,e.nextTick(()=>{document.activeElement===s&&(s.selectionStart=s.selectionEnd=b)})}function D(s){const u=s.key,m=s.target;if(["Tab","Escape","ArrowLeft","ArrowRight","Home","End"].includes(u)||s.metaKey||s.ctrlKey)return;s.preventDefault();const b=m.selectionStart??0,h=M(b);if(u==="Backspace"){h>0&&A(m,h-1);return}if(u!=="Delete"){if(o.value.hasAmPm){const x=u.toLowerCase();if(x==="a"){v.value="AM",A(m,h);return}if(x==="p"){v.value="PM",A(m,h);return}}if(/^\d$/.test(u)){const x=T(h,+u);A(m,x);return}}}function p(s){const u=s.target,m=u.value.replace(/\D/g,"").split("").map(Number).slice(0,l.value);n.value=m,E(),o.value.hasAmPm&&(/p/i.test(u.value)?v.value="PM":/a/i.test(u.value)&&(v.value="AM")),A(u)}function S(s){s.preventDefault();const u=s.clipboardData?.getData("text")??"",m=s.target,b=m.selectionStart??0,h=u.replace(/\D/g,"").split("").map(Number);let x=M(b);for(const U of h){if(x>=l.value)break;x=T(x,U)}o.value.hasAmPm&&(/p\.?m\.?/i.test(u)?v.value="PM":/a\.?m\.?/i.test(u)&&(v.value="AM")),A(m,x)}function V(s){const{digitGroups:u,hasAmPm:m}=o.value,b=[];let h=s.h;m?(v.value=s.h>=12?"PM":"AM",h=s.h%12,h===0&&(h=12)):re(t.value)&&(h=s.h===0?24:s.h),b.push(Math.floor(h/10),h%10),b.push(Math.floor(s.m/10),s.m%10),u.length>2&&b.push(Math.floor(s.s/10),s.s%10),n.value=b,y.value=c()}function I(){n.value=[],y.value="",v.value="AM"}function L(){if(n.value.length<l.value)return null;const s=[];for(let h=0;h<o.value.digitGroups.length;h++){const x=h*2;s.push(n.value[x]*10+n.value[x+1])}let u=s[0];const m=s[1],b=s[2]??0;return o.value.hasAmPm&&(u=v.value==="PM"?u===12?12:u+12:u===12?0:u),re(t.value)&&u===24&&(u=0),{h:u,m,s:b}}const P=e.computed(()=>n.value.length>=l.value),W=e.computed(()=>o.value.ampmLowercase);return{inputValue:y,handleKeydown:D,handleInput:p,handlePaste:S,setFromTime:V,clear:I,getParsedTime:L,isComplete:P,totalDigits:l,displayPosToDigitIndex:M,ampm:v,ampmLowercase:W}}const Pe=["data-size","data-validation","data-disabled"],Ne=["id","name","tabindex","autocomplete","value","placeholder","disabled"],Ee=["id","name","tabindex","autocomplete","value","placeholder","disabled"],De=e.defineComponent({__name:"TimePicker",props:we,emits:["update:modelValue","update:validationState","validate","open","close","error"],setup(t,{emit:o}){const l=e.ref(null),n=t,v=o,y=e.ref(!1),c=e.ref(!1),N=e.ref("valid"),E=e.ref("valid");function M(){y.value=!1,c.value=!1}function R(i,r){if(n.disabled&&r){M();return}r&&(i==="first"?c.value=!1:y.value=!1)}e.watch(y,i=>{R("first",i)}),e.watch(c,i=>{R("second",i)}),e.watch(()=>n.disabled,i=>{i&&M()}),e.watch(()=>n.hideDropdown,i=>{i&&M()});const T=e.computed({get(){if(Array.isArray(n.modelValue)){const[i,r]=n.modelValue;return[O(i,n.format),O(r,n.format)]}else return O(n.modelValue,n.format)},set(i){Array.isArray(i)?v("update:modelValue",[ee("HH:mm:ss",i[0]),ee("HH:mm:ss",i[1])]):v("update:modelValue",ee("HH:mm:ss",i))}}),A=e.computed(()=>n.minTime?O(n.minTime):null),D=e.computed(()=>n.maxTime?O(n.maxTime):null),p=e.computed(()=>!A.value||!D.value?!0:z(A.value,D.value)<=0),S=e.computed(()=>N.value==="out-of-range"||n.range&&E.value==="out-of-range"?"out-of-range":N.value==="invalid"||n.range&&E.value==="invalid"?"invalid":"valid"),V=e.computed(()=>(n.disabledTimes??[]).map(r=>{const f=Array.isArray(r)?r:[r,r],B=O(f[0]),C=O(f[1]);return z(B,C)<=0?[B,C]:[C,B]}));function I(i){return!!(he(i,V.value)||n.isTimeDisabled?.(i))}function L(i){return i==="first"?Array.isArray(T.value)?T.value[0]:T.value:Array.isArray(T.value)?T.value[1]:T.value}function P(i){const r=n.modelValue;return Array.isArray(r)?i==="first"?!!r[0]:!!r[1]:i==="second"?!1:typeof r=="string"&&r.length>0}function W(i,r){if(i==="first"){Array.isArray(T.value)?T.value=[r,T.value[1]]:T.value=r;return}Array.isArray(T.value)&&(T.value=[T.value[0],r])}function s(i,r,f,B){if(i==="first"?N.value=r:E.value=r,v("validate",{target:i,state:r,reason:f,value:B?ee("HH:mm:ss",B):null}),r==="valid"){l.value=null;return}if(r==="out-of-range"){l.value="OUT_OF_RANGE",v("error",{code:"OUT_OF_RANGE",message:"Time is outside min/max bounds and was clamped."});return}l.value=f??"BAD_TIME",v("error",{code:f??"BAD_TIME",message:f==="DISABLED"?"Time is disabled by disabledTimes or isTimeDisabled.":"Time is invalid."})}e.watch(S,i=>{v("update:validationState",i)},{immediate:!0});const u=e.computed(()=>p.value?A.value:null),m=e.computed(()=>p.value?D.value:null);function b(i){return Ve(i,u.value,m.value)}function h(i,r,f){const B=!ve(r,u.value,m.value),C=b(r);return I(C)?(f.emitValidation&&s(i,"invalid","DISABLED",C),!1):(W(i,C),f.emitValidation&&(B?s(i,"out-of-range","OUT_OF_RANGE",C):s(i,"valid",void 0,C)),!0)}const x=e.computed({get(){return Array.isArray(T.value)?T.value[0]:T.value},set(i){!P("first")&&!y.value||h("first",i,{emitValidation:!0})}}),U=e.computed({get(){return Array.isArray(T.value)?T.value[1]:T.value},set(i){!P("second")&&!c.value||Array.isArray(T.value)&&h("second",i,{emitValidation:!0})}});e.watch(()=>n.range,i=>{if(i){if(n.modelValue!=null&&!Array.isArray(n.modelValue))throw new RangeError(`Model value must be an array for range selection: ${n.modelValue}`)}else if(Array.isArray(n.modelValue))throw new RangeError(`Model value must be a single string for single time selection: ${n.modelValue}`)},{immediate:!0});function se(){P("first")&&h("first",L("first"),{emitValidation:!0}),n.range&&P("second")&&h("second",L("second"),{emitValidation:!0})}e.watch(()=>[u.value,m.value,V.value,n.isTimeDisabled,n.range],se,{immediate:!0});const _=e.computed(()=>n.format??"HH:mm:ss"),J=e.computed(()=>n.placeholder??"Select time"),ne=e.computed(()=>n.id),oe=e.computed(()=>n.range&&n.id?`${n.id}-end`:void 0),ie=e.computed(()=>n.name),le=e.computed(()=>n.range&&n.name?`${n.name}-end`:void 0);function Y(i){if(i==null)return;if(typeof i=="number")return`${i}px`;const r=i.trim();return r.length>0?r:void 0}const ue=e.computed(()=>{let i=Math.max(_.value.length,J.value.length);return/[AaPp]$/.test(_.value)&&(i=Math.max(i,_.value.length+1)),`${Math.min(20,Math.max(6,i))}ch`}),de=e.computed(()=>{const i={},r=Y(n.componentWidth),f=Y(n.inputWidth),B=Y(n.minInputWidth),C=Y(n.maxInputWidth);return r&&(i["--vtp-component-width"]=r),f&&(i["--vtp-input-width"]=f),B&&(i["--vtp-input-min-width"]=B),C&&(i["--vtp-input-max-width"]=C),i}),j=e.computed(()=>({width:`var(--vtp-input-width, ${ue.value})`,minWidth:"var(--vtp-input-min-width, 0)",maxWidth:"var(--vtp-input-max-width, none)"})),H=ke(_),ce=H.inputValue,F=ke(_),Q=F.inputValue,a=e.ref(null),d=e.ref(null),g=e.computed(()=>({left:`${(n.range&&c.value?d.value:a.value)?.offsetLeft??0}px`}));e.watch(()=>[x.value,_.value],([i])=>{if(!P("first")){H.clear();return}H.setFromTime(i)},{immediate:!0}),e.watch(()=>[U.value,_.value,n.range],([i,,r])=>{if(!r||!P("second")){F.clear();return}F.setFromTime(i)},{immediate:!0});function k(i,r,f){if(n.disabled)return!1;if(r.key==="Enter")return r.preventDefault(),q(i),!1;const B=/^\d$/.test(r.key);if(B&&(y.value=!1,c.value=!1),f.handleKeydown(r),B){const C=f.getParsedTime();C&&h(i,C,{emitValidation:!1})}return B}function w(i){const r=i.target,f=H.displayPosToDigitIndex(r.selectionStart??0),B=/^\d$/.test(i.key)&&f>=H.totalDigits.value-1;k("first",i,H)&&n.range&&B&&d.value&&(q("first"),e.nextTick(()=>{const ae=d.value;ae&&(ae.focus(),ae.selectionStart=ae.selectionEnd=0)}))}function X(i){k("second",i,F)}function q(i){const r=i==="first"?H:F,f=r.getParsedTime();f?h(i,f,{emitValidation:!0}):r.inputValue.value.trim()?s(i,"invalid","BAD_TIME"):!n.range&&i==="first"&&(v("update:modelValue",null),s("first","valid")),i==="first"?P("first")?H.setFromTime(x.value):H.clear():n.range&&(P("second")?F.setFromTime(U.value):F.clear())}return(i,r)=>(e.openBlock(),e.createElementBlock("div",{class:"timepicker-shell","data-size":n.size,"data-validation":S.value,"data-disabled":n.disabled?"true":"false",style:e.normalizeStyle(de.value)},[e.createElementVNode("div",{class:e.normalizeClass(["timepicker-shell__input",{"timepicker-shell__input--error":l.value,"timepicker-shell__input--disabled":n.disabled}])},[e.createElementVNode("input",{ref_key:"firstInputRef",ref:a,type:"text",class:e.normalizeClass(["timepicker-field",n.inputClass]),id:ne.value,name:ie.value,tabindex:n.tabindex,autocomplete:n.autocomplete,value:e.unref(ce),placeholder:J.value,style:e.normalizeStyle(j.value),disabled:n.disabled,onFocus:r[0]||(r[0]=f=>!n.disabled&&!n.hideDropdown&&(y.value=!0)),onKeydown:w,onInput:r[1]||(r[1]=(...f)=>e.unref(H).handleInput&&e.unref(H).handleInput(...f)),onPaste:r[2]||(r[2]=(...f)=>e.unref(H).handlePaste&&e.unref(H).handlePaste(...f)),onBlur:r[3]||(r[3]=f=>!n.disabled&&q("first"))},null,46,Ne),n.range?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[r[12]||(r[12]=e.createElementVNode("span",{class:"timepicker-separator"},"–",-1)),e.createElementVNode("input",{ref_key:"secondInputRef",ref:d,type:"text",class:e.normalizeClass(["timepicker-field",n.inputClass]),id:oe.value,name:le.value,tabindex:n.tabindex,autocomplete:n.autocomplete,value:e.unref(Q),placeholder:J.value,style:e.normalizeStyle(j.value),disabled:n.disabled,onFocus:r[4]||(r[4]=f=>!n.disabled&&!n.hideDropdown&&(c.value=!0)),onKeydown:X,onInput:r[5]||(r[5]=(...f)=>e.unref(F).handleInput&&e.unref(F).handleInput(...f)),onPaste:r[6]||(r[6]=(...f)=>e.unref(F).handlePaste&&e.unref(F).handlePaste(...f)),onBlur:r[7]||(r[7]=f=>!n.disabled&&q("second"))},null,46,Ee)],64)):e.createCommentVNode("",!0)],2),n.hideDropdown?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:"timepicker-popovers",style:e.normalizeStyle(g.value)},[e.createVNode(ge,{open:y.value,"onUpdate:open":r[8]||(r[8]=f=>y.value=f),initTime:x.value,"onUpdate:initTime":r[9]||(r[9]=f=>x.value=f),format:n.format,"hour-step":n.hourStep,"minute-step":n.minuteStep,"second-step":n.secondStep,"min-time":u.value,"max-time":m.value,"disabled-ranges":V.value,"is-time-disabled":n.isTimeDisabled},null,8,["open","initTime","format","hour-step","minute-step","second-step","min-time","max-time","disabled-ranges","is-time-disabled"]),n.range?(e.openBlock(),e.createBlock(ge,{key:0,open:c.value,"onUpdate:open":r[10]||(r[10]=f=>c.value=f),initTime:U.value,"onUpdate:initTime":r[11]||(r[11]=f=>U.value=f),format:n.format,"hour-step":n.hourStep,"minute-step":n.minuteStep,"second-step":n.secondStep,"min-time":u.value,"max-time":m.value,"disabled-ranges":V.value,"is-time-disabled":n.isTimeDisabled},null,8,["open","initTime","format","hour-step","minute-step","second-step","min-time","max-time","disabled-ranges","is-time-disabled"])):e.createCommentVNode("",!0)],4))],12,Pe))}});K.TimePicker=De,Object.defineProperty(K,Symbol.toStringTag,{value:"Module"})}));
|
|
1
|
+
(function(K,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(K=typeof globalThis<"u"?globalThis:K||self,e(K.VueTimepicker={},K.Vue))})(this,(function(K,e){"use strict";const Te=["tabindex","onClick","onMousemove"],Z=e.defineComponent({__name:"TimeColumn",props:{items:{},activeIndex:{}},emits:["update:activeIndex","select"],setup(n,{emit:u}){const s=n,t=u,f=e.ref(null),b=e.ref(s.activeIndex??0),g=e.ref(!1);let A=null;function D(v){const x=Array.from(v.querySelectorAll(".timepicker-option"));if(!x.length)return 0;const S=v.scrollTop+v.clientHeight/2;let I=0,F=Number.POSITIVE_INFINITY;for(let N=0;N<x.length;N++){const C=x[N],a=C.offsetTop+C.offsetHeight/2,l=Math.abs(a-S);l<F&&(F=l,I=N)}return I}function w(v){if(!s.items.length)return 0;if(!s.items[v]?.disabled)return v;for(let x=1;x<s.items.length;x++){const S=v-x,I=v+x;if(S>=0&&!s.items[S]?.disabled)return S;if(I<s.items.length&&!s.items[I]?.disabled)return I}return v}function L(){e.nextTick(()=>{const v=f.value;if(!v)return;const x=v.querySelector(".timepicker-option--active");if(x){const S=v.clientHeight,I=x.offsetTop,F=x.offsetHeight,N=I-S/2+F/2;g.value=!0,v.scrollTo({top:N,behavior:"auto"}),A&&clearTimeout(A),A=setTimeout(()=>{g.value=!1},70)}})}function M(){const v=f.value;if(!v||g.value)return;const x=D(v),S=w(x);s.items[S]?.disabled||(b.value=S)}e.onMounted(L),e.onBeforeUnmount(()=>{A&&clearTimeout(A)});function V(v){t("update:activeIndex",v),t("select",s.items[v]?.value)}return(v,x)=>(e.openBlock(),e.createElementBlock("div",{class:e.normalizeClass(["timepicker-dropdown",{"timepicker-dropdown--short":v.items.length<=3}])},[e.createElementVNode("div",{ref_key:"menu",ref:f,class:"timepicker-dropdown__panel",role:"listbox",tabindex:"-1",onScroll:M},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(v.items,(S,I)=>(e.openBlock(),e.createElementBlock("div",{key:S.key,class:e.normalizeClass(["timepicker-option",{"timepicker-option--active":I===v.activeIndex,"timepicker-option--disabled":S.disabled,"timepicker-option--focused":I===b.value}]),role:"option",tabindex:S.disabled?-1:0,onClick:F=>!S.disabled&&V(I),onMousemove:F=>!S.disabled&&(b.value=I)},e.toDisplayString(S.text),43,Te))),128))],544)],2))}});function me(n){return n.h*3600+n.m*60+n.s}function fe(n){return/(a|A|p|P)/.test(n)}function ue(n){return/k{1,2}/.test(n)}function _(n){if(!n||typeof n!="string")return{h:0,m:0,s:0};const u=(n.match(/\d+/g)||[]).map(Number);return{h:u[0]||0,m:u[1]||0,s:u[2]||0}}function pe(n){const u=n%12;return u===0?12:u}function xe(n,u){return u?n%12+12:n%12}function Ie(n){return/(s|ss)/.test(n)}function ee(n,u){let{h:s,m:t,s:f}=u;const b=fe(n),g=s>=12?"PM":"AM";b&&(s=pe(s));const A=s===0?24:s,D={HH:String(s).padStart(2,"0"),H:String(s),hh:String(s).padStart(2,"0"),h:String(s),kk:String(A).padStart(2,"0"),k:String(A),mm:String(t).padStart(2,"0"),m:String(t),ss:String(f).padStart(2,"0"),s:String(f),A:g,a:g.toLowerCase(),P:g,p:g.toLowerCase()};return n.replace(/HH|hh|kk|mm|ss|H|h|k|m|s|A|a|P|p/g,w=>D[w]??w)}function z(n,u){return me(n)-me(u)}function Ae(n,u,s){return u&&z(n,u)<0?{...u}:s&&z(n,s)>0?{...s}:{...n}}function ve(n,u,s){return!(u&&z(n,u)<0||s&&z(n,s)>0)}function he(n,u){return u.some(([s,t])=>z(n,s)>=0&&z(n,t)<=0)}const ge=e.defineComponent({__name:"TimeSelection",props:{open:{type:Boolean},initTime:{},format:{},minTime:{},maxTime:{},disabledRanges:{},isTimeDisabled:{type:Function},hourStep:{},minuteStep:{},secondStep:{}},emits:["update:initTime","open","close","update:open"],setup(n,{emit:u}){function s(r){return Math.max(1,r??1)}const t=n,f=u,b=e.computed(()=>fe(t.format)),g=e.computed(()=>Ie(t.format)),A=e.computed(()=>ue(t.format)),D=e.computed({get:()=>t.open??!1,set:r=>{const m=t.open??!1;r!==m&&(f("update:open",r),f(r?"open":"close"))}}),w=e.ref(null);function L(r){if(!D.value)return;const m=r.target;w.value&&!w.value.contains(m)&&(D.value=!1)}e.onMounted(()=>document.addEventListener("mousedown",L)),e.onBeforeUnmount(()=>document.removeEventListener("mousedown",L));function M(r){r.key==="Escape"&&D.value&&(D.value=!1)}e.onMounted(()=>document.addEventListener("keydown",M)),e.onBeforeUnmount(()=>document.removeEventListener("keydown",M));const V=e.ref(0),v=e.ref(0),x=e.ref(0),S=e.ref(0);function I(r){const m=s(t.hourStep),p=s(t.minuteStep),T=s(t.secondStep);let E=r.h;b.value?(S.value=r.h>=12?1:0,E=r.h%12):A.value&&r.h===0&&(E=24),V.value=Math.floor(E/m),v.value=Math.floor(r.m/p),x.value=Math.floor(r.s/T)}e.watch(()=>t.initTime,r=>{I(r)},{immediate:!0});function F(r,m){const p=[];for(let T=0;T<r;T+=s(m))p.push({key:T,value:T,text:String(T).padStart(2,"0")});return p}function N(r,m){const p=s(m),T=[];for(let E=0;E<12;E+=p){const ce=E===0?12:E,se=r?E===0?12:E+12:E;T.push({key:se,value:se,text:String(ce).padStart(2,"0")})}return T}function C(r){const m=s(r),p=[];for(let T=0;T<24;T+=m){const E=T===0?24:T;p.push({key:T,value:T,text:String(E).padStart(2,"0")})}return p}const a=e.computed(()=>{if(!b.value)return A.value?C(t.hourStep):F(24,t.hourStep);const r=S.value===1;return N(r,t.hourStep)}),l=e.computed(()=>F(60,t.minuteStep)),c=e.computed(()=>F(60,t.secondStep)),h=e.computed(()=>/\s[ap]$/.test(t.format)),y=e.computed(()=>{const r=h.value?"am":"AM",m=h.value?"pm":"PM";return[{key:"AM",value:"AM",text:r},{key:"PM",value:"PM",text:m}]}),k=e.computed(()=>l.value.map(r=>Number(r.value??0))),O=e.computed(()=>g.value?c.value.map(r=>Number(r.value??0)):[0]),U=e.computed(()=>Number(a.value[V.value]?.value??0)),Y=e.computed(()=>Number(l.value[v.value]?.value??0)),W=e.computed(()=>Number(c.value[x.value]?.value??0));function Q(r){const m=r.findIndex(p=>!p.disabled);return m>=0?m:0}function q(r){return!(!ve(r,t.minTime,t.maxTime)||he(r,t.disabledRanges??[])||t.isTimeDisabled?.(r))}function X(r,m){return r.map(p=>({...p,disabled:!m(Number(p.value??0))}))}const ne=e.computed(()=>X(a.value,r=>k.value.some(m=>O.value.some(p=>q({h:r,m,s:p}))))),ie=e.computed(()=>X(l.value,r=>O.value.some(m=>q({h:U.value,m:r,s:m})))),G=e.computed(()=>X(c.value,r=>q({h:U.value,m:Y.value,s:r}))),oe=e.computed(()=>{if(!b.value)return y.value;const r=Y.value,m=g.value?W.value:0;return y.value.map(p=>{const T=N(p.value==="PM",t.hourStep).some(E=>q({h:Number(E.value??0),m:r,s:m}));return{...p,disabled:!T}})});function J(r,m,p){e.watch(r,T=>{p&&!p()||T.length&&(!T[m.value]||T[m.value].disabled)&&(m.value=Q(T))})}J(ne,V),J(ie,v),J(G,x,()=>g.value),J(oe,S,()=>b.value);function ae(){!g.value&&!b.value&&R()}function H(){b.value||R()}function de(){R()}function R(){D.value=!1}return e.watch([U,Y,W],([r,m,p])=>{f("update:initTime",{h:r,m,s:p})},{immediate:!0}),(r,m)=>D.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"vtp-cols",ref_key:"root",ref:w},[e.createVNode(Z,{activeIndex:V.value,"onUpdate:activeIndex":m[0]||(m[0]=p=>V.value=p),items:ne.value,label:"Hours"},null,8,["activeIndex","items"]),e.createVNode(Z,{activeIndex:v.value,"onUpdate:activeIndex":m[1]||(m[1]=p=>v.value=p),items:ie.value,label:"Minutes",onSelect:ae},null,8,["activeIndex","items"]),g.value?(e.openBlock(),e.createBlock(Z,{key:0,activeIndex:x.value,"onUpdate:activeIndex":m[2]||(m[2]=p=>x.value=p),items:G.value,label:"Seconds",onSelect:H},null,8,["activeIndex","items"])):e.createCommentVNode("",!0),b.value?(e.openBlock(),e.createBlock(Z,{key:1,activeIndex:S.value,"onUpdate:activeIndex":m[3]||(m[3]=p=>S.value=p),items:oe.value,label:"AM/PM",onSelect:de},null,8,["activeIndex","items"])):e.createCommentVNode("",!0)],512)):e.createCommentVNode("",!0)}});function we(n){return typeof n=="string"?j.test(n):Array.isArray(n)?n.length===2&&j.test(n[0]??"")&&j.test(n[1]??""):!1}function te(n){return n==null||typeof n=="string"||typeof n=="number"}function Me(n){return n==null||typeof n=="string"||Array.isArray(n)||typeof n=="object"&&n!==null}const be=/^(HH|H|hh|h|kk|k):(mm|m)(?::(ss|s))?(?:\s*(A|a|P|p))?$/,j=/^([01]\d|2[0-3]):([0-5]\d)(:([0-5]\d))?$/,Ve=typeof __DEV__<"u"?__DEV__:typeof process<"u"&&process.env&&process.env.NODE_ENV!=="production";function B(n,u){return s=>{const t=n(s);return!t&&Ve&&console.error(`[VueTimepicker] ${u(s)}`),t}}const ye=n=>n==null||j.test(n),Ee={modelValue:{type:[String,Array],default:void 0,validator:B(n=>Array.isArray(n)?n.length===2&&n.every(u=>j.test(u)):n==null||j.test(n),n=>`\`modelValue\` is wrong. Received: ${n}`)},range:{type:Boolean,default:!1},disabled:{type:Boolean,default:!1},hideDropdown:{type:Boolean,default:!1},hourStep:{type:Number,default:1},minuteStep:{type:Number,default:1},secondStep:{type:Number,default:1},minTime:{type:String,default:void 0,validator:B(ye,n=>`\`minTime\` is wrong. Received: ${n}`)},maxTime:{type:String,default:void 0,validator:B(ye,n=>`\`maxTime\` is wrong. Received: ${n}`)},disabledTimes:{type:Array,default:void 0,validator:B(n=>n==null||n.every(we),n=>`\`disabledTimes\` is wrong. Received: ${JSON.stringify(n)}`)},isTimeDisabled:{type:Function,default:void 0},format:{type:String,default:"HH:mm",validator:B(n=>be.test(n),n=>`\`format\` format is wrong. Received: ${n}`)},placeholder:{type:String,default:"Select time"},id:{type:String,default:void 0,validator:B(n=>n==null||typeof n=="string",n=>`\`id\` must be a string. Received: ${n}`)},name:{type:String,default:void 0,validator:B(n=>n==null||typeof n=="string",n=>`\`name\` must be a string. Received: ${n}`)},tabindex:{type:Number,default:0,validator:B(n=>Number.isInteger(n),n=>`\`tabindex\` must be an integer. Received: ${n}`)},autocomplete:{type:String,default:"off",validator:B(n=>typeof n=="string",n=>`\`autocomplete\` must be a string. Received: ${n}`)},inputClass:{type:[String,Array,Object],default:void 0,validator:B(Me,n=>`\`inputClass\` must be a string, array, or object. Received: ${n}`)},inputWidth:{type:[String,Number],default:void 0,validator:B(te,n=>`\`inputWidth\` must be a string or number. Received: ${n}`)},componentWidth:{type:[String,Number],default:void 0,validator:B(te,n=>`\`componentWidth\` must be a string or number. Received: ${n}`)},minInputWidth:{type:[String,Number],default:void 0,validator:B(te,n=>`\`minInputWidth\` must be a string or number. Received: ${n}`)},maxInputWidth:{type:[String,Number],default:void 0,validator:B(te,n=>`\`maxInputWidth\` must be a string or number. Received: ${n}`)},size:{type:String,default:"md",validator:B(n=>["xs","sm","md","lg","xl"].includes(n),n=>`\`size\` is wrong. Received: ${n}`)}};function Se(n){const u=be.exec(n);if(!u)throw new Error(`[useTimeMask] Invalid format: ${n}`);const[,s,t,f,b]=u,g=[],A=!!b,D=/^k{1,2}$/.test(s);let w=0,L=23;return A?(w=1,L=12):D&&(w=1,L=24),g.push({token:s,min:w,max:L}),g.push({token:t,min:0,max:59}),f&&g.push({token:f,min:0,max:59}),{digitGroups:g,hasAmPm:!!b,ampmLowercase:b==="a"||b==="p"}}function De(n){try{return Se(n)}catch{return Se("HH:mm")}}function ke(n){const u=e.computed(()=>De(n.value)),s=e.computed(()=>u.value.digitGroups.length*2),t=e.ref([]),f=e.ref("AM"),b=e.ref("");function g(){const{digitGroups:a,hasAmPm:l}=u.value;let c="",h=0;for(let y=0;y<a.length;y++){for(let k=0;k<2;k++)h<t.value.length&&(c+=String(t.value[h]),h++);h===(y+1)*2&&y<a.length-1&&(c+=":")}if(l&&h>=s.value){const y=u.value.ampmLowercase?f.value.toLowerCase():f.value;c+=" "+y}return c}function A(a){const l=a*2;if(t.value.length<l+2)return;const c=t.value[l]*10+t.value[l+1],{min:h,max:y}=u.value.digitGroups[a],k=Math.max(h,Math.min(y,c));k!==c&&(t.value[l]=Math.floor(k/10),t.value[l+1]=k%10)}function D(){for(let a=0;a<u.value.digitGroups.length;a++)A(a)}function w(a){const l=g();let c=0;for(let h=0;h<Math.min(a,l.length);h++)/\d/.test(l[h])&&c++;return c}function L(a){return a+Math.floor(a/2)}function M(a,l){if(a>=s.value)return s.value;const c=[...t.value];c[a]=l,t.value=c;const h=Math.floor(a/2);return A(h),Math.min(a+1,s.value)}function V(a,l){const c=g();b.value=c,a.value=c;const h=l!==void 0?Math.min(L(l),c.length):c.length;a.selectionStart=a.selectionEnd=h,e.nextTick(()=>{document.activeElement===a&&(a.selectionStart=a.selectionEnd=h)})}function v(a){const l=a.key,c=a.target;if(["Tab","Escape","ArrowLeft","ArrowRight","Home","End"].includes(l)||a.metaKey||a.ctrlKey)return;a.preventDefault();const h=c.selectionStart??0,y=w(h);if(l==="Backspace"){y>0&&V(c,y-1);return}if(l!=="Delete"){if(u.value.hasAmPm){const k=l.toLowerCase();if(k==="a"){f.value="AM",V(c,y);return}if(k==="p"){f.value="PM",V(c,y);return}}if(/^\d$/.test(l)){const k=M(y,+l);V(c,k);return}}}function x(a){const l=a.target,c=l.value.replace(/\D/g,"").split("").map(Number).slice(0,s.value);t.value=c,D(),u.value.hasAmPm&&(/p/i.test(l.value)?f.value="PM":/a/i.test(l.value)&&(f.value="AM")),V(l)}function S(a){a.preventDefault();const l=a.clipboardData?.getData("text")??"",c=a.target,h=c.selectionStart??0,y=l.replace(/\D/g,"").split("").map(Number);let k=w(h);for(const O of y){if(k>=s.value)break;k=M(k,O)}u.value.hasAmPm&&(/p\.?m\.?/i.test(l)?f.value="PM":/a\.?m\.?/i.test(l)&&(f.value="AM")),V(c,k)}function I(a){const{digitGroups:l,hasAmPm:c}=u.value,h=[];let y=a.h;c?(f.value=a.h>=12?"PM":"AM",y=pe(a.h)):ue(n.value)&&(y=a.h===0?24:a.h),h.push(Math.floor(y/10),y%10),h.push(Math.floor(a.m/10),a.m%10),l.length>2&&h.push(Math.floor(a.s/10),a.s%10),t.value=h,b.value=g()}function F(){t.value=[],b.value="",f.value="AM"}function N(){if(t.value.length<s.value)return null;const a=[];for(let y=0;y<u.value.digitGroups.length;y++){const k=y*2;a.push(t.value[k]*10+t.value[k+1])}let l=a[0];const c=a[1],h=a[2]??0;return u.value.hasAmPm&&(l=xe(l,f.value==="PM")),ue(n.value)&&l===24&&(l=0),{h:l,m:c,s:h}}const C=e.computed(()=>t.value.length>=s.value);return{inputValue:b,handleKeydown:v,handleInput:x,handlePaste:S,setFromTime:I,clear:F,getParsedTime:N,isComplete:C,totalDigits:s,displayPosToDigitIndex:w,ampm:f}}const Pe=["data-size","data-validation","data-disabled"],Ne=["id","name","tabindex","autocomplete","value","placeholder","disabled"],$e=["id","name","tabindex","autocomplete","value","placeholder","disabled"],Be=e.defineComponent({__name:"TimePicker",props:Ee,emits:["update:modelValue","update:validationState","validate","open","close","error"],setup(n,{emit:u}){const s=e.ref(null),t=n,f=u,b=e.ref(!1),g=e.ref(!1),A=e.ref("valid"),D=e.ref("valid");function w(){b.value=!1,g.value=!1}function L(i,o){if(t.disabled&&o){w();return}o&&(i==="first"?g.value=!1:b.value=!1)}e.watch(b,i=>{L("first",i)}),e.watch(g,i=>{L("second",i)}),e.watch(()=>t.disabled,i=>{i&&w()}),e.watch(()=>t.hideDropdown,i=>{i&&w()});const M=e.computed({get(){if(Array.isArray(t.modelValue)){const[i,o]=t.modelValue;return[_(i),_(o)]}else return _(t.modelValue)},set(i){Array.isArray(i)?f("update:modelValue",[ee("HH:mm:ss",i[0]),ee("HH:mm:ss",i[1])]):f("update:modelValue",ee("HH:mm:ss",i))}}),V=e.computed(()=>t.minTime?_(t.minTime):null),v=e.computed(()=>t.maxTime?_(t.maxTime):null),x=e.computed(()=>!V.value||!v.value?!0:z(V.value,v.value)<=0),S=e.computed(()=>{const i=t.range?[A.value,D.value]:[A.value];return i.includes("out-of-range")?"out-of-range":i.includes("invalid")?"invalid":"valid"}),I=e.computed(()=>(t.disabledTimes??[]).map(o=>{const d=Array.isArray(o)?o:[o,o],P=_(d[0]),$=_(d[1]);return z(P,$)<=0?[P,$]:[$,P]}));function F(i){return!!(he(i,I.value)||t.isTimeDisabled?.(i))}function N(i){return Array.isArray(M.value)?M.value[i==="first"?0:1]:M.value}function C(i){const o=t.modelValue;return Array.isArray(o)?i==="first"?!!o[0]:!!o[1]:i==="second"?!1:typeof o=="string"&&o.length>0}function a(i,o){if(i==="first"){Array.isArray(M.value)?M.value=[o,M.value[1]]:M.value=o;return}Array.isArray(M.value)&&(M.value=[M.value[0],o])}function l(i,o,d,P){if(i==="first"?A.value=o:D.value=o,f("validate",{target:i,state:o,reason:d,value:P?ee("HH:mm:ss",P):null}),o==="valid"){s.value=null;return}if(o==="out-of-range"){s.value="OUT_OF_RANGE",f("error",{code:"OUT_OF_RANGE",message:"Time is outside min/max bounds and was clamped."});return}s.value=d??"BAD_TIME",f("error",{code:d??"BAD_TIME",message:d==="DISABLED"?"Time is disabled by disabledTimes or isTimeDisabled.":"Time is invalid."})}e.watch(S,i=>{f("update:validationState",i)},{immediate:!0});const c=e.computed(()=>x.value?V.value:null),h=e.computed(()=>x.value?v.value:null);function y(i){return Ae(i,c.value,h.value)}function k(i,o,d){const P=!ve(o,c.value,h.value),$=y(o);return F($)?(d.emitValidation&&l(i,"invalid","DISABLED",$),!1):(a(i,$),d.emitValidation&&(P?l(i,"out-of-range","OUT_OF_RANGE",$):l(i,"valid",void 0,$)),!0)}const O=e.computed({get:()=>N("first"),set(i){!C("first")&&!b.value||k("first",i,{emitValidation:!0})}}),U=e.computed({get:()=>N("second"),set(i){!C("second")&&!g.value||Array.isArray(M.value)&&k("second",i,{emitValidation:!0})}});e.watch(()=>t.range,i=>{if(i){if(t.modelValue!=null&&!Array.isArray(t.modelValue))throw new RangeError(`Model value must be an array for range selection: ${t.modelValue}`)}else if(Array.isArray(t.modelValue))throw new RangeError(`Model value must be a single string for single time selection: ${t.modelValue}`)},{immediate:!0});function Y(){C("first")&&k("first",N("first"),{emitValidation:!0}),t.range&&C("second")&&k("second",N("second"),{emitValidation:!0})}e.watch(()=>[c.value,h.value,I.value,t.isTimeDisabled,t.range],Y,{immediate:!0});const W=e.computed(()=>t.format??"HH:mm:ss"),Q=e.computed(()=>t.placeholder??"Select time"),q=e.computed(()=>t.id),X=e.computed(()=>t.range&&t.id?`${t.id}-end`:void 0),ne=e.computed(()=>t.name),ie=e.computed(()=>t.range&&t.name?`${t.name}-end`:void 0);function G(i){if(i==null)return;if(typeof i=="number")return`${i}px`;const o=i.trim();return o.length>0?o:void 0}const oe=e.computed(()=>{let i=Math.max(W.value.length,Q.value.length);return/[AaPp]$/.test(W.value)&&(i=Math.max(i,W.value.length+1)),`${Math.min(20,Math.max(6,i))}ch`}),J=e.computed(()=>{const i={},o=G(t.componentWidth),d=G(t.inputWidth),P=G(t.minInputWidth),$=G(t.maxInputWidth);return o&&(i["--vtp-component-width"]=o),d&&(i["--vtp-input-width"]=d),P&&(i["--vtp-input-min-width"]=P),$&&(i["--vtp-input-max-width"]=$),i}),ae=e.computed(()=>({width:`var(--vtp-input-width, ${oe.value})`,minWidth:"var(--vtp-input-min-width, 0)",maxWidth:"var(--vtp-input-max-width, none)"})),H=ke(W),de=H.inputValue,R=ke(W),r=R.inputValue,m=e.ref(null),p=e.ref(null),T=e.computed(()=>({left:`${(t.range&&g.value?p.value:m.value)?.offsetLeft??0}px`}));e.watch(()=>[O.value,W.value],([i])=>{if(!C("first")){H.clear();return}H.setFromTime(i)},{immediate:!0}),e.watch(()=>[U.value,W.value,t.range],([i,,o])=>{if(!o||!C("second")){R.clear();return}R.setFromTime(i)},{immediate:!0});function E(i,o,d){if(t.disabled)return!1;if(o.key==="Enter")return o.preventDefault(),re(i),!1;const P=/^\d$/.test(o.key);if(P&&(b.value=!1,g.value=!1),d.handleKeydown(o),P){const $=d.getParsedTime();$&&k(i,$,{emitValidation:!1})}return P}function ce(i){const o=i.target,d=H.displayPosToDigitIndex(o.selectionStart??0),P=/^\d$/.test(i.key)&&d>=H.totalDigits.value-1;E("first",i,H)&&t.range&&P&&p.value&&(re("first"),e.nextTick(()=>{const le=p.value;le&&(le.focus(),le.selectionStart=le.selectionEnd=0)}))}function se(i){E("second",i,R)}function re(i){const o=i==="first"?H:R,d=o.getParsedTime();d?k(i,d,{emitValidation:!0}):o.inputValue.value.trim()?l(i,"invalid","BAD_TIME"):!t.range&&i==="first"&&(f("update:modelValue",null),l("first","valid")),i==="first"?C("first")?H.setFromTime(O.value):H.clear():t.range&&(C("second")?R.setFromTime(U.value):R.clear())}return(i,o)=>(e.openBlock(),e.createElementBlock("div",{class:"timepicker-shell","data-size":t.size,"data-validation":S.value,"data-disabled":t.disabled?"true":"false",style:e.normalizeStyle(J.value)},[e.createElementVNode("div",{class:e.normalizeClass(["timepicker-shell__input",{"timepicker-shell__input--error":s.value,"timepicker-shell__input--disabled":t.disabled}])},[e.createElementVNode("input",{ref_key:"firstInputRef",ref:m,type:"text",class:e.normalizeClass(["timepicker-field",t.inputClass]),id:q.value,name:ne.value,tabindex:t.tabindex,autocomplete:t.autocomplete,value:e.unref(de),placeholder:Q.value,style:e.normalizeStyle(ae.value),disabled:t.disabled,onFocus:o[0]||(o[0]=d=>!t.disabled&&!t.hideDropdown&&(b.value=!0)),onKeydown:ce,onInput:o[1]||(o[1]=(...d)=>e.unref(H).handleInput&&e.unref(H).handleInput(...d)),onPaste:o[2]||(o[2]=(...d)=>e.unref(H).handlePaste&&e.unref(H).handlePaste(...d)),onBlur:o[3]||(o[3]=d=>!t.disabled&&re("first"))},null,46,Ne),t.range?(e.openBlock(),e.createElementBlock(e.Fragment,{key:0},[o[16]||(o[16]=e.createElementVNode("span",{class:"timepicker-separator"},"–",-1)),e.createElementVNode("input",{ref_key:"secondInputRef",ref:p,type:"text",class:e.normalizeClass(["timepicker-field",t.inputClass]),id:X.value,name:ie.value,tabindex:t.tabindex,autocomplete:t.autocomplete,value:e.unref(r),placeholder:Q.value,style:e.normalizeStyle(ae.value),disabled:t.disabled,onFocus:o[4]||(o[4]=d=>!t.disabled&&!t.hideDropdown&&(g.value=!0)),onKeydown:se,onInput:o[5]||(o[5]=(...d)=>e.unref(R).handleInput&&e.unref(R).handleInput(...d)),onPaste:o[6]||(o[6]=(...d)=>e.unref(R).handlePaste&&e.unref(R).handlePaste(...d)),onBlur:o[7]||(o[7]=d=>!t.disabled&&re("second"))},null,46,$e)],64)):e.createCommentVNode("",!0)],2),t.hideDropdown?e.createCommentVNode("",!0):(e.openBlock(),e.createElementBlock("div",{key:0,class:"timepicker-popovers",style:e.normalizeStyle(T.value)},[e.createVNode(ge,{open:b.value,"onUpdate:open":o[8]||(o[8]=d=>b.value=d),initTime:O.value,"onUpdate:initTime":o[9]||(o[9]=d=>O.value=d),format:t.format,"hour-step":t.hourStep,"minute-step":t.minuteStep,"second-step":t.secondStep,"min-time":c.value,"max-time":h.value,"disabled-ranges":I.value,"is-time-disabled":t.isTimeDisabled,onOpen:o[10]||(o[10]=d=>f("open")),onClose:o[11]||(o[11]=d=>f("close"))},null,8,["open","initTime","format","hour-step","minute-step","second-step","min-time","max-time","disabled-ranges","is-time-disabled"]),t.range?(e.openBlock(),e.createBlock(ge,{key:0,open:g.value,"onUpdate:open":o[12]||(o[12]=d=>g.value=d),initTime:U.value,"onUpdate:initTime":o[13]||(o[13]=d=>U.value=d),format:t.format,"hour-step":t.hourStep,"minute-step":t.minuteStep,"second-step":t.secondStep,"min-time":c.value,"max-time":h.value,"disabled-ranges":I.value,"is-time-disabled":t.isTimeDisabled,onOpen:o[14]||(o[14]=d=>f("open")),onClose:o[15]||(o[15]=d=>f("close"))},null,8,["open","initTime","format","hour-step","minute-step","second-step","min-time","max-time","disabled-ranges","is-time-disabled"])):e.createCommentVNode("",!0)],4))],12,Pe))}});K.TimePicker=Be,Object.defineProperty(K,Symbol.toStringTag,{value:"Module"})}));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@manik02/vue3-timepicker",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "1.1.0",
|
|
4
4
|
"description": "Vue 3 time picker component with multiple formats, range selection, min/max constraints, disabled times, validation, custom styling, TypeScript support and more.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": {
|
|
@@ -82,5 +82,8 @@
|
|
|
82
82
|
"vite-plugin-dts": "^4.5.4",
|
|
83
83
|
"vitest": "^4.0.18",
|
|
84
84
|
"vue-tsc": "^3.0.6"
|
|
85
|
+
},
|
|
86
|
+
"dependencies": {
|
|
87
|
+
"pump": "^1.0.0"
|
|
85
88
|
}
|
|
86
89
|
}
|