@manik02/vue3-timepicker 0.1.3 → 0.2.0

package/dist/vue-timepicker.umd.cjs

@@ -1 +1 @@
-(function(E,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(E=typeof globalThis<"u"?globalThis:E||self,e(E.VueTimepicker={},E.Vue))})(this,(function(E,e){"use strict";const q={class:"timepicker-dropdown"},W=["tabindex","onClick","onMousemove"],H=e.defineComponent({__name:"TimeColumn",props:{items:{},activeIndex:{}},emits:["update:activeIndex","select"],setup(s,{emit:i}){const l=s,a=i,f=e.ref(null);function r(){e.nextTick(()=>{const h=f.value;if(!h)return;const g=h.querySelector(".timepicker-option--active");if(g){const k=h.clientHeight,x=g.offsetTop,m=g.offsetHeight;h.scrollTop=x-k/2+m/2}})}e.onMounted(r),e.watch(()=>l.activeIndex,r);function v(h){a("update:activeIndex",h),a("select",l.items[h]?.value)}const d=e.ref(l.activeIndex??0);return(h,g)=>(e.openBlock(),e.createElementBlock("div",q,[e.createElementVNode("div",{ref_key:"menu",ref:f,class:"timepicker-dropdown__panel",role:"listbox",tabindex:"-1"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(h.items,(k,x)=>(e.openBlock(),e.createElementBlock("div",{key:k.key,class:e.normalizeClass(["timepicker-option",{"timepicker-option--active":x===h.activeIndex,"timepicker-option--disabled":k.disabled,"timepicker-option--focused":x===d.value}]),role:"option",tabindex:k.disabled?-1:0,onClick:m=>!k.disabled&&v(x),onMousemove:m=>!k.disabled&&(d.value=x)},e.toDisplayString(k.text),43,W))),128))],512)]))}});function _(s){return/(a|A|p|P)/.test(s)}function J(s){return/(p|P)/.test(s)}function N(s){return/k{1,2}/.test(s)}function D(s,i){if(!s)return{h:0,m:0,s:0};const l=s.match(/\d+/g)||[];let a=l[0]!==void 0?+l[0]:0;const f=+l[1]||0,r=+l[2]||0;return{h:a,m:f,s:r}}function Q(s){const i=s%12;return i===0?12:i}function U(s,i){return i?s%12+12:s%12}function X(s){return/(s|ss)/.test(s)}function L(s,i){let{h:l,m:a,s:f}=i;const r=_(s),v=l>=12?"PM":"AM";r&&(l=Q(l));const d=l===0?24:l,h={HH:String(l).padStart(2,"0"),H:String(l),hh:String(l).padStart(2,"0"),h:String(l),kk:String(d).padStart(2,"0"),k:String(d),mm:String(a).padStart(2,"0"),m:String(a),ss:String(f).padStart(2,"0"),s:String(f),A:v,a:v.toLowerCase(),P:v,p:v.toLowerCase()};return s.replace(/HH|hh|kk|mm|ss|H|h|k|m|s|A|a|P|p/g,g=>h[g]??g)}const z=e.defineComponent({__name:"TimeSelection",props:{open:{type:Boolean},initTime:{},format:{},hourStep:{},minuteStep:{},secondStep:{}},emits:["update:initTime","open","close","update:open"],setup(s,{emit:i}){const l=e.computed(()=>_(r.format)),a=e.computed(()=>X(r.format)),f=e.computed(()=>N(r.format)),r=s,v=i,d=e.computed({get:()=>r.open??!1,set:c=>{const y=r.open??!1;c!==y&&(v("update:open",c),v(c?"open":"close"))}}),h=e.ref(null);function g(c){if(!d.value)return;const y=c.target;h.value&&!h.value.contains(y)&&(d.value=!1)}e.onMounted(()=>document.addEventListener("mousedown",g)),e.onBeforeUnmount(()=>document.removeEventListener("mousedown",g));function k(c){c.key==="Escape"&&d.value&&(d.value=!1)}e.onMounted(()=>document.addEventListener("keydown",k)),e.onBeforeUnmount(()=>document.removeEventListener("keydown",k));const x=e.ref(Math.floor(r.initTime.h/r.hourStep)||0),m=e.ref(Math.floor(r.initTime.m/r.minuteStep)||0),V=e.ref(Math.floor(r.initTime.s/r.secondStep)||0);e.watch(()=>r.initTime,c=>{const y=Math.max(1,r.hourStep),M=Math.max(1,r.minuteStep),w=Math.max(1,r.secondStep);let P=c.h;l.value?(I.value=c.h>=12?1:0,P=c.h%12):f.value&&c.h===0&&(P=24),x.value=Math.floor(P/y),m.value=Math.floor(c.m/M),V.value=Math.floor(c.s/w)});function A(c,y){const M=[];for(let w=0;w<c;w+=Math.max(1,y))M.push({key:w,value:w,text:String(w).padStart(2,"0")});return M}function B(c,y){const M=Math.max(1,y),w=[];for(let P=0;P<12;P+=M){const ie=P===0?12:P,O=c?P===0?12:P+12:P;w.push({key:O,value:O,text:String(ie).padStart(2,"0")})}return w}function b(c){const y=Math.max(1,c),M=[];for(let w=0;w<24;w+=y){const P=w===0?24:w;M.push({key:w,value:w,text:String(P).padStart(2,"0")})}return M}const I=e.ref(J(r.format)?1:0),$=e.computed(()=>{if(!l.value)return f.value?b(r.hourStep):A(24,r.hourStep);const c=I.value===1;return B(c,r.hourStep)}),T=e.computed(()=>A(60,r.minuteStep)),t=e.computed(()=>A(60,r.secondStep)),n=e.computed(()=>/\s[ap]$/.test(r.format)),o=e.computed(()=>{const c=n.value?"am":"AM",y=n.value?"pm":"PM";return[{key:"AM",value:"AM",text:c},{key:"PM",value:"PM",text:y}]}),p=e.computed(()=>I.value===1?"PM":"AM"),u=e.computed(()=>{const c=Number($.value[x.value]?.value??0);return l.value?p.value==="PM"?U(c,!0):U(c,!1):f.value&&c===24?0:c}),S=e.computed(()=>Number(T.value[m.value]?.value??0)),F=e.computed(()=>Number(t.value[V.value]?.value??0));function re(c){!a.value&&!l.value&&K()}function se(c){l.value||K()}function le(c){K()}function K(){d.value=!1}return e.watch([u,S,F],([c,y,M])=>{v("update:initTime",{h:c,m:y,s:M})},{immediate:!0}),(c,y)=>d.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"vtp-cols",ref_key:"root",ref:h},[e.createVNode(H,{activeIndex:x.value,"onUpdate:activeIndex":y[0]||(y[0]=M=>x.value=M),items:$.value,label:"Hours"},null,8,["activeIndex","items"]),e.createVNode(H,{activeIndex:m.value,"onUpdate:activeIndex":y[1]||(y[1]=M=>m.value=M),items:T.value,label:"Minutes",onSelect:re},null,8,["activeIndex","items"]),a.value?(e.openBlock(),e.createBlock(H,{key:0,activeIndex:V.value,"onUpdate:activeIndex":y[2]||(y[2]=M=>V.value=M),items:t.value,label:"Seconds",onSelect:se},null,8,["activeIndex","items"])):e.createCommentVNode("",!0),l.value?(e.openBlock(),e.createBlock(H,{key:1,activeIndex:I.value,"onUpdate:activeIndex":y[3]||(y[3]=M=>I.value=M),items:o.value,label:"AM/PM",onSelect:le},null,8,["activeIndex","items"])):e.createCommentVNode("",!0)],512)):e.createCommentVNode("",!0)}}),G=/^(HH|H|hh|h|kk|k):(mm|m)(?::(ss|s))?(?:\s*(A|a|P|p))?$/,R=/^([01]\d|2[0-3]):([0-5]\d)(:([0-5]\d))?$/,C=typeof __DEV__<"u"?__DEV__:typeof process<"u"&&process.env&&process.env.NODE_ENV!=="production",Y={modelValue:{type:[String,Array],default:void 0,validator:s=>{let i;return Array.isArray(s)?i=s.length===2&&s.every(l=>R.test(l)):i=s==null||R.test(s),!i&&C&&console.error(`[VueTimepicker] \`modelValue\` is wrong. Received: ${s}`),i}},range:{type:Boolean,default:!1},hourStep:{type:Number,default:1},minuteStep:{type:Number,default:1},secondStep:{type:Number,default:1},format:{type:String,default:"HH:mm",validator:s=>{const i=G.test(s);return!i&&C&&console.error(`[VueTimepicker] \`format\` format is wrong. Received: ${s}`),i}},size:{type:String,default:"md",validator:s=>{const i=s==="sm"||s==="md"||s==="lg";return!i&&C&&console.error(`[VueTimepicker] \`size\` is wrong. Received: ${s}`),i}}};function Z(s){const i=G.exec(s);if(!i)throw new Error(`[useTimeMask] Invalid format: ${s}`);const[,l,a,f,r]=i,v=[],d=!!r,h=/^k{1,2}$/.test(l);let g=0,k=23;return d?(g=1,k=12):h&&(g=1,k=24),v.push({token:l,min:g,max:k}),v.push({token:a,min:0,max:59}),f&&v.push({token:f,min:0,max:59}),{digitGroups:v,hasAmPm:!!r,ampmLowercase:r==="a"||r==="p"}}function j(s){const i=e.computed(()=>Z(s.value)),l=e.computed(()=>i.value.digitGroups.length*2),a=e.ref([]),f=e.ref("AM"),r=e.ref("");function v(){const{digitGroups:t,hasAmPm:n}=i.value;let o="",p=0;for(let u=0;u<t.length;u++){for(let S=0;S<2;S++)p<a.value.length&&(o+=String(a.value[p]),p++);p===(u+1)*2&&u<t.length-1&&(o+=":")}if(n&&p>=l.value){const u=i.value.ampmLowercase?f.value.toLowerCase():f.value;o+=" "+u}return o}function d(t){const n=t*2;if(a.value.length<n+2)return;const o=a.value[n]*10+a.value[n+1],{min:p,max:u}=i.value.digitGroups[t],S=Math.max(p,Math.min(u,o));S!==o&&(a.value[n]=Math.floor(S/10),a.value[n+1]=S%10)}function h(){for(let t=0;t<i.value.digitGroups.length;t++)d(t)}function g(t){const n=v();let o=0;for(let p=0;p<Math.min(t,n.length);p++)/\d/.test(n[p])&&o++;return o}function k(t){return t+Math.floor(t/2)}function x(t,n){if(t>=l.value)return l.value;const o=[...a.value];o[t]=n,a.value=o;const p=Math.floor(t/2);return d(p),Math.min(t+1,l.value)}function m(t,n){const o=v();r.value=o,t.value=o;const p=n!==void 0?Math.min(k(n),o.length):o.length;t.selectionStart=t.selectionEnd=p,e.nextTick(()=>{document.activeElement===t&&(t.selectionStart=t.selectionEnd=p)})}function V(t){const n=t.key,o=t.target;if(["Tab","Escape","ArrowLeft","ArrowRight","Home","End"].includes(n)||t.metaKey||t.ctrlKey)return;t.preventDefault();const p=o.selectionStart??0,u=g(p);if(n==="Backspace"){u>0&&m(o,u-1);return}if(n!=="Delete"){if(i.value.hasAmPm){const S=n.toLowerCase();if(S==="a"){f.value="AM",m(o,u);return}if(S==="p"){f.value="PM",m(o,u);return}}if(/^\d$/.test(n)){const S=x(u,+n);m(o,S);return}}}function A(t){const n=t.target,o=n.value.replace(/\D/g,"").split("").map(Number).slice(0,l.value);a.value=o,h(),i.value.hasAmPm&&(/p/i.test(n.value)?f.value="PM":/a/i.test(n.value)&&(f.value="AM")),m(n)}function B(t){t.preventDefault();const n=t.clipboardData?.getData("text")??"",o=t.target,p=o.selectionStart??0,u=n.replace(/\D/g,"").split("").map(Number);let S=g(p);for(const F of u){if(S>=l.value)break;S=x(S,F)}i.value.hasAmPm&&(/p\.?m\.?/i.test(n)?f.value="PM":/a\.?m\.?/i.test(n)&&(f.value="AM")),m(o,S)}function b(t){const{digitGroups:n,hasAmPm:o}=i.value,p=[];let u=t.h;o?(f.value=t.h>=12?"PM":"AM",u=t.h%12,u===0&&(u=12)):N(s.value)&&(u=t.h===0?24:t.h),p.push(Math.floor(u/10),u%10),p.push(Math.floor(t.m/10),t.m%10),n.length>2&&p.push(Math.floor(t.s/10),t.s%10),a.value=p,r.value=v()}function I(){if(a.value.length<l.value)return null;const t=[];for(let u=0;u<i.value.digitGroups.length;u++){const S=u*2;t.push(a.value[S]*10+a.value[S+1])}let n=t[0];const o=t[1],p=t[2]??0;return i.value.hasAmPm&&(n=f.value==="PM"?n===12?12:n+12:n===12?0:n),N(s.value)&&n===24&&(n=0),{h:n,m:o,s:p}}const $=e.computed(()=>a.value.length>=l.value),T=e.computed(()=>i.value.ampmLowercase);return{inputValue:r,handleKeydown:V,handleInput:A,handlePaste:B,setFromTime:b,getParsedTime:I,isComplete:$,totalDigits:l,displayPosToDigitIndex:g,ampm:f,ampmLowercase:T}}const ee=["data-size"],te=["value","placeholder"],ne=["value","placeholder"],oe=["value","placeholder"],ae=e.defineComponent({__name:"TimePicker",props:Y,emits:["update:modelValue","open","close","error"],setup(s,{emit:i}){const l=e.ref(null),a=s,f=i,r=e.ref(!1),v=e.ref(!1);e.watch(r,t=>{t&&(v.value=!1)}),e.watch(v,t=>{t&&(r.value=!1)});const d=e.computed({get(){if(Array.isArray(a.modelValue)){const[t,n]=a.modelValue;return[D(t,a.format),D(n,a.format)]}else return D(a.modelValue,a.format)},set(t){Array.isArray(t)?f("update:modelValue",[L("HH:mm:ss",t[0]),L("HH:mm:ss",t[1])]):f("update:modelValue",L("HH:mm:ss",t))}}),h=e.computed({get(){return Array.isArray(d.value)?d.value[0]:d.value},set(t){Array.isArray(d.value)?d.value=[t,d.value[1]]:d.value=t}}),g=e.computed({get(){return Array.isArray(d.value)?d.value[1]:d.value},set(t){Array.isArray(d.value)&&(d.value=[d.value[0],t])}});e.computed(()=>{if(!a.modelValue)return"—";const t=n=>L(a.format,n);return a.range?`${t(h.value)} → ${t(g.value)}`:t(h.value)}),e.watch(()=>a.range,t=>{if(t){if(!Array.isArray(a.modelValue))throw new RangeError(`Model value must be an array for range selection: ${a.modelValue}`)}else if(Array.isArray(a.modelValue))throw new RangeError(`Model value must be a single string for single time selection: ${a.modelValue}`)},{immediate:!0});const k=e.computed(()=>a.format??"HH:mm:ss"),x=e.computed(()=>{let t=k.value.length;return/[AaPp]$/.test(k.value)&&(t+=1),`${Math.min(12,Math.max(4,t))}ch`}),m=j(k),V=m.inputValue,A=j(k),B=A.inputValue;e.watch(()=>[h.value,k.value],([t])=>{m.setFromTime(t)},{immediate:!0}),e.watch(()=>[g.value,k.value,a.range],([t,,n])=>{if(!n){A.setFromTime({h:0,m:0,s:0});return}A.setFromTime(t)},{immediate:!0});const b=e.ref(null);function I(t){if(t.key==="Enter"){t.preventDefault(),T("first");return}/^\d$/.test(t.key)&&(r.value=!1,v.value=!1);const n=t.target,o=m.displayPosToDigitIndex(n.selectionStart??0),p=/^\d$/.test(t.key)&&o>=m.totalDigits.value-1;if(m.handleKeydown(t),/^\d$/.test(t.key)){const u=m.getParsedTime();u&&(l.value=null,h.value=u)}a.range&&p&&b.value&&(T("first"),e.nextTick(()=>{const u=b.value;u&&(u.focus(),u.selectionStart=u.selectionEnd=0)}))}function $(t){if(t.key==="Enter"){t.preventDefault(),T("second");return}if(/^\d$/.test(t.key)&&(r.value=!1,v.value=!1),A.handleKeydown(t),/^\d$/.test(t.key)){const n=A.getParsedTime();n&&(l.value=null,g.value=n)}}function T(t){const o=(t==="first"?m:A).getParsedTime();o&&(l.value=null,t==="first"?h.value=o:a.range&&(g.value=o)),t==="first"?m.setFromTime(h.value):a.range&&A.setFromTime(g.value)}return(t,n)=>(e.openBlock(),e.createElementBlock("div",{class:"timepicker-shell","data-size":a.size},[a.range?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["timepicker-shell__input",{"timepicker-shell__input--error":l.value}])},[e.createElementVNode("input",{type:"text",class:"timepicker-field",value:e.unref(V),placeholder:k.value,style:e.normalizeStyle({width:x.value}),onFocus:n[4]||(n[4]=o=>r.value=!0),onKeydown:I,onInput:n[5]||(n[5]=(...o)=>e.unref(m).handleInput&&e.unref(m).handleInput(...o)),onPaste:n[6]||(n[6]=(...o)=>e.unref(m).handlePaste&&e.unref(m).handlePaste(...o)),onBlur:n[7]||(n[7]=o=>T("first"))},null,44,ne),n[16]||(n[16]=e.createElementVNode("span",{class:"timepicker-separator"},"–",-1)),e.createElementVNode("input",{ref_key:"secondInputRef",ref:b,type:"text",class:"timepicker-field",value:e.unref(B),placeholder:k.value,style:e.normalizeStyle({width:x.value}),onFocus:n[8]||(n[8]=o=>v.value=!0),onKeydown:$,onInput:n[9]||(n[9]=(...o)=>e.unref(A).handleInput&&e.unref(A).handleInput(...o)),onPaste:n[10]||(n[10]=(...o)=>e.unref(A).handlePaste&&e.unref(A).handlePaste(...o)),onBlur:n[11]||(n[11]=o=>T("second"))},null,44,oe)],2)):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["timepicker-shell__input",{"timepicker-shell__input--error":l.value}])},[e.createElementVNode("input",{type:"text",class:"timepicker-field",value:e.unref(V),placeholder:k.value,style:e.normalizeStyle({width:x.value}),onFocus:n[0]||(n[0]=o=>r.value=!0),onKeydown:I,onInput:n[1]||(n[1]=(...o)=>e.unref(m).handleInput&&e.unref(m).handleInput(...o)),onPaste:n[2]||(n[2]=(...o)=>e.unref(m).handlePaste&&e.unref(m).handlePaste(...o)),onBlur:n[3]||(n[3]=o=>T("first"))},null,44,te)],2)),e.createElementVNode("div",null,[e.createVNode(z,{open:r.value,"onUpdate:open":n[12]||(n[12]=o=>r.value=o),initTime:h.value,"onUpdate:initTime":n[13]||(n[13]=o=>h.value=o),format:a.format,"hour-step":a.hourStep,"minute-step":a.minuteStep,"second-step":a.secondStep},null,8,["open","initTime","format","hour-step","minute-step","second-step"]),a.range?(e.openBlock(),e.createBlock(z,{key:0,open:v.value,"onUpdate:open":n[14]||(n[14]=o=>v.value=o),initTime:g.value,"onUpdate:initTime":n[15]||(n[15]=o=>g.value=o),format:a.format,"hour-step":a.hourStep,"minute-step":a.minuteStep,"second-step":a.secondStep},null,8,["open","initTime","format","hour-step","minute-step","second-step"])):e.createCommentVNode("",!0)])],8,ee))}});E.TimePicker=ae,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})}));
+(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 de={class:"timepicker-dropdown"},ce=["tabindex","onClick","onMousemove"],J=e.defineComponent({__name:"TimeColumn",props:{items:{},activeIndex:{}},emits:["update:activeIndex","select"],setup(n,{emit:l}){const s=n,t=l,g=e.ref(null);function u(){e.nextTick(()=>{const S=g.value;if(!S)return;const f=S.querySelector(".timepicker-option--active");if(f){const V=S.clientHeight,M=f.offsetTop,x=f.offsetHeight;S.scrollTop=M-V/2+x/2}})}e.onMounted(u),e.watch(()=>s.activeIndex,u);function y(S){t("update:activeIndex",S),t("select",s.items[S]?.value)}const A=e.ref(s.activeIndex??0);return(S,f)=>(e.openBlock(),e.createElementBlock("div",de,[e.createElementVNode("div",{ref_key:"menu",ref:g,class:"timepicker-dropdown__panel",role:"listbox",tabindex:"-1"},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(S.items,(V,M)=>(e.openBlock(),e.createElementBlock("div",{key:V.key,class:e.normalizeClass(["timepicker-option",{"timepicker-option--active":M===S.activeIndex,"timepicker-option--disabled":V.disabled,"timepicker-option--focused":M===A.value}]),role:"option",tabindex:V.disabled?-1:0,onClick:x=>!V.disabled&&y(M),onMousemove:x=>!V.disabled&&(A.value=M)},e.toDisplayString(V.text),43,ce))),128))],512)]))}});function te(n){return n.h*3600+n.m*60+n.s}function ne(n){return/(a|A|p|P)/.test(n)}function me(n){return/(p|P)/.test(n)}function Y(n){return/k{1,2}/.test(n)}function U(n,l){if(!n||typeof n!="string")return{h:0,m:0,s:0};const s=n.match(/\d+/g)||[];let t=s[0]!==void 0?+s[0]:0;const g=+s[1]||0,u=+s[2]||0;return{h:t,m:g,s:u}}function fe(n){const l=n%12;return l===0?12:l}function ae(n,l){return l?n%12+12:n%12}function pe(n){return/(s|ss)/.test(n)}function q(n,l){let{h:s,m:t,s:g}=l;const u=ne(n),y=s>=12?"PM":"AM";u&&(s=fe(s));const A=s===0?24:s,S={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(g).padStart(2,"0"),s:String(g),A:y,a:y.toLowerCase(),P:y,p:y.toLowerCase()};return n.replace(/HH|hh|kk|mm|ss|H|h|k|m|s|A|a|P|p/g,f=>S[f]??f)}function F(n,l){return te(n)-te(l)}function ve(n,l,s){return l&&F(n,l)<0?{...l}:s&&F(n,s)>0?{...s}:{...n}}function oe(n,l,s){return!(l&&F(n,l)<0||s&&F(n,s)>0)}function ie(n,l){return l.some(([s,t])=>F(n,s)>=0&&F(n,t)<=0)}const re=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:l}){const s=e.computed(()=>ne(u.format)),t=e.computed(()=>pe(u.format)),g=e.computed(()=>Y(u.format)),u=n,y=l,A=e.computed({get:()=>u.open??!1,set:a=>{const h=u.open??!1;a!==h&&(y("update:open",a),y(a?"open":"close"))}}),S=e.ref(null);function f(a){if(!A.value)return;const h=a.target;S.value&&!S.value.contains(h)&&(A.value=!1)}e.onMounted(()=>document.addEventListener("mousedown",f)),e.onBeforeUnmount(()=>document.removeEventListener("mousedown",f));function V(a){a.key==="Escape"&&A.value&&(A.value=!1)}e.onMounted(()=>document.addEventListener("keydown",V)),e.onBeforeUnmount(()=>document.removeEventListener("keydown",V));const M=e.ref(Math.floor(u.initTime.h/u.hourStep)||0),x=e.ref(Math.floor(u.initTime.m/u.minuteStep)||0),B=e.ref(Math.floor(u.initTime.s/u.secondStep)||0);e.watch(()=>u.initTime,a=>{const h=Math.max(1,u.hourStep),b=Math.max(1,u.minuteStep),T=Math.max(1,u.secondStep);let I=a.h;s.value?(N.value=a.h>=12?1:0,I=a.h%12):g.value&&a.h===0&&(I=24),M.value=Math.floor(I/h),x.value=Math.floor(a.m/b),B.value=Math.floor(a.s/T)});function L(a,h){const b=[];for(let T=0;T<a;T+=Math.max(1,h))b.push({key:T,value:T,text:String(T).padStart(2,"0")});return b}function O(a,h){const b=Math.max(1,h),T=[];for(let I=0;I<12;I+=b){const ee=I===0?12:I,ue=a?I===0?12:I+12:I;T.push({key:ue,value:ue,text:String(ee).padStart(2,"0")})}return T}function _(a){const h=Math.max(1,a),b=[];for(let T=0;T<24;T+=h){const I=T===0?24:T;b.push({key:T,value:T,text:String(I).padStart(2,"0")})}return b}const N=e.ref(me(u.format)?1:0),$=e.computed(()=>{if(!s.value)return g.value?_(u.hourStep):L(24,u.hourStep);const a=N.value===1;return O(a,u.hourStep)}),D=e.computed(()=>L(60,u.minuteStep)),r=e.computed(()=>L(60,u.secondStep)),d=e.computed(()=>/\s[ap]$/.test(u.format)),c=e.computed(()=>{const a=d.value?"am":"AM",h=d.value?"pm":"PM";return[{key:"AM",value:"AM",text:a},{key:"PM",value:"PM",text:h}]}),p=e.computed(()=>D.value.map(a=>Number(a.value??0))),v=e.computed(()=>t.value?r.value.map(a=>Number(a.value??0)):[0]);function k(a){return Number(a.value??0)}function C(a){const h=a.findIndex(b=>!b.disabled);return h>=0?h:0}function w(a){return!(!oe(a,u.minTime,u.maxTime)||ie(a,u.disabledRanges??[])||u.isTimeDisabled?.(a))}const W=e.computed(()=>$.value.map(a=>{const h=k(a),b=p.value.some(T=>v.value.some(I=>w({h,m:T,s:I})));return{...a,disabled:!b}})),E=e.computed(()=>{const a=Number($.value[M.value]?.value??0);return D.value.map(h=>{const b=Number(h.value??0),T=v.value.some(I=>w({h:a,m:b,s:I}));return{...h,disabled:!T}})}),Q=e.computed(()=>{const a=Number($.value[M.value]?.value??0),h=Number(D.value[x.value]?.value??0);return r.value.map(b=>{const T=Number(b.value??0);return{...b,disabled:!w({h:a,m:h,s:T})}})}),j=e.computed(()=>{if(!s.value)return c.value;const a=Number(D.value[x.value]?.value??0),h=t.value?Number(r.value[B.value]?.value??0):0;return c.value.map(b=>{const T=b.value==="PM",I=O(T,u.hourStep).some(ee=>w({h:Number(ee.value??0),m:a,s:h}));return{...b,disabled:!I}})}),X=e.computed(()=>N.value===1?"PM":"AM"),Z=e.computed(()=>{const a=Number($.value[M.value]?.value??0);return s.value?X.value==="PM"?ae(a,!0):ae(a,!1):g.value&&a===24?0:a}),R=e.computed(()=>Number(D.value[x.value]?.value??0)),o=e.computed(()=>Number(r.value[B.value]?.value??0));e.watch(W,a=>{a.length&&(!a[M.value]||a[M.value].disabled)&&(M.value=C(a))}),e.watch(E,a=>{a.length&&(!a[x.value]||a[x.value].disabled)&&(x.value=C(a))}),e.watch(Q,a=>{!t.value||!a.length||(!a[B.value]||a[B.value].disabled)&&(B.value=C(a))}),e.watch(j,a=>{!s.value||!a.length||(!a[N.value]||a[N.value].disabled)&&(N.value=C(a))});function i(a){!t.value&&!s.value&&P()}function m(a){s.value||P()}function H(a){P()}function P(){A.value=!1}return e.watch([Z,R,o],([a,h,b])=>{y("update:initTime",{h:a,m:h,s:b})},{immediate:!0}),(a,h)=>A.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"vtp-cols",ref_key:"root",ref:S},[e.createVNode(J,{activeIndex:M.value,"onUpdate:activeIndex":h[0]||(h[0]=b=>M.value=b),items:W.value,label:"Hours"},null,8,["activeIndex","items"]),e.createVNode(J,{activeIndex:x.value,"onUpdate:activeIndex":h[1]||(h[1]=b=>x.value=b),items:E.value,label:"Minutes",onSelect:i},null,8,["activeIndex","items"]),t.value?(e.openBlock(),e.createBlock(J,{key:0,activeIndex:B.value,"onUpdate:activeIndex":h[2]||(h[2]=b=>B.value=b),items:Q.value,label:"Seconds",onSelect:m},null,8,["activeIndex","items"])):e.createCommentVNode("",!0),s.value?(e.openBlock(),e.createBlock(J,{key:1,activeIndex:N.value,"onUpdate:activeIndex":h[3]||(h[3]=b=>N.value=b),items:j.value,label:"AM/PM",onSelect:H},null,8,["activeIndex","items"])):e.createCommentVNode("",!0)],512)):e.createCommentVNode("",!0)}});function he(n){return typeof n=="string"?G.test(n):Array.isArray(n)?n.length===2&&G.test(n[0]??"")&&G.test(n[1]??""):!1}const le=/^(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))?$/,z=typeof __DEV__<"u"?__DEV__:typeof process<"u"&&process.env&&process.env.NODE_ENV!=="production",ge={modelValue:{type:[String,Array],default:void 0,validator:n=>{let l;return Array.isArray(n)?l=n.length===2&&n.every(s=>G.test(s)):l=n==null||G.test(n),!l&&z&&console.error(`[VueTimepicker] \`modelValue\` is wrong. Received: ${n}`),l}},range:{type:Boolean,default:!1},disabled:{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:n=>{const l=n==null||G.test(n);return!l&&z&&console.error(`[VueTimepicker] \`minTime\` is wrong. Received: ${n}`),l}},maxTime:{type:String,default:void 0,validator:n=>{const l=n==null||G.test(n);return!l&&z&&console.error(`[VueTimepicker] \`maxTime\` is wrong. Received: ${n}`),l}},disabledTimes:{type:Array,default:void 0,validator:n=>{const l=n==null||n.every(he);return!l&&z&&console.error(`[VueTimepicker] \`disabledTimes\` is wrong. Received: ${JSON.stringify(n)}`),l}},isTimeDisabled:{type:Function,default:void 0},format:{type:String,default:"HH:mm",validator:n=>{const l=le.test(n);return!l&&z&&console.error(`[VueTimepicker] \`format\` format is wrong. Received: ${n}`),l}},size:{type:String,default:"md",validator:n=>{const l=n==="xs"||n==="sm"||n==="md"||n==="lg"||n==="xl";return!l&&z&&console.error(`[VueTimepicker] \`size\` is wrong. Received: ${n}`),l}}};function ke(n){const l=le.exec(n);if(!l)throw new Error(`[useTimeMask] Invalid format: ${n}`);const[,s,t,g,u]=l,y=[],A=!!u,S=/^k{1,2}$/.test(s);let f=0,V=23;return A?(f=1,V=12):S&&(f=1,V=24),y.push({token:s,min:f,max:V}),y.push({token:t,min:0,max:59}),g&&y.push({token:g,min:0,max:59}),{digitGroups:y,hasAmPm:!!u,ampmLowercase:u==="a"||u==="p"}}function se(n){const l=e.computed(()=>ke(n.value)),s=e.computed(()=>l.value.digitGroups.length*2),t=e.ref([]),g=e.ref("AM"),u=e.ref("");function y(){const{digitGroups:r,hasAmPm:d}=l.value;let c="",p=0;for(let v=0;v<r.length;v++){for(let k=0;k<2;k++)p<t.value.length&&(c+=String(t.value[p]),p++);p===(v+1)*2&&v<r.length-1&&(c+=":")}if(d&&p>=s.value){const v=l.value.ampmLowercase?g.value.toLowerCase():g.value;c+=" "+v}return c}function A(r){const d=r*2;if(t.value.length<d+2)return;const c=t.value[d]*10+t.value[d+1],{min:p,max:v}=l.value.digitGroups[r],k=Math.max(p,Math.min(v,c));k!==c&&(t.value[d]=Math.floor(k/10),t.value[d+1]=k%10)}function S(){for(let r=0;r<l.value.digitGroups.length;r++)A(r)}function f(r){const d=y();let c=0;for(let p=0;p<Math.min(r,d.length);p++)/\d/.test(d[p])&&c++;return c}function V(r){return r+Math.floor(r/2)}function M(r,d){if(r>=s.value)return s.value;const c=[...t.value];c[r]=d,t.value=c;const p=Math.floor(r/2);return A(p),Math.min(r+1,s.value)}function x(r,d){const c=y();u.value=c,r.value=c;const p=d!==void 0?Math.min(V(d),c.length):c.length;r.selectionStart=r.selectionEnd=p,e.nextTick(()=>{document.activeElement===r&&(r.selectionStart=r.selectionEnd=p)})}function B(r){const d=r.key,c=r.target;if(["Tab","Escape","ArrowLeft","ArrowRight","Home","End"].includes(d)||r.metaKey||r.ctrlKey)return;r.preventDefault();const p=c.selectionStart??0,v=f(p);if(d==="Backspace"){v>0&&x(c,v-1);return}if(d!=="Delete"){if(l.value.hasAmPm){const k=d.toLowerCase();if(k==="a"){g.value="AM",x(c,v);return}if(k==="p"){g.value="PM",x(c,v);return}}if(/^\d$/.test(d)){const k=M(v,+d);x(c,k);return}}}function L(r){const d=r.target,c=d.value.replace(/\D/g,"").split("").map(Number).slice(0,s.value);t.value=c,S(),l.value.hasAmPm&&(/p/i.test(d.value)?g.value="PM":/a/i.test(d.value)&&(g.value="AM")),x(d)}function O(r){r.preventDefault();const d=r.clipboardData?.getData("text")??"",c=r.target,p=c.selectionStart??0,v=d.replace(/\D/g,"").split("").map(Number);let k=f(p);for(const C of v){if(k>=s.value)break;k=M(k,C)}l.value.hasAmPm&&(/p\.?m\.?/i.test(d)?g.value="PM":/a\.?m\.?/i.test(d)&&(g.value="AM")),x(c,k)}function _(r){const{digitGroups:d,hasAmPm:c}=l.value,p=[];let v=r.h;c?(g.value=r.h>=12?"PM":"AM",v=r.h%12,v===0&&(v=12)):Y(n.value)&&(v=r.h===0?24:r.h),p.push(Math.floor(v/10),v%10),p.push(Math.floor(r.m/10),r.m%10),d.length>2&&p.push(Math.floor(r.s/10),r.s%10),t.value=p,u.value=y()}function N(){if(t.value.length<s.value)return null;const r=[];for(let v=0;v<l.value.digitGroups.length;v++){const k=v*2;r.push(t.value[k]*10+t.value[k+1])}let d=r[0];const c=r[1],p=r[2]??0;return l.value.hasAmPm&&(d=g.value==="PM"?d===12?12:d+12:d===12?0:d),Y(n.value)&&d===24&&(d=0),{h:d,m:c,s:p}}const $=e.computed(()=>t.value.length>=s.value),D=e.computed(()=>l.value.ampmLowercase);return{inputValue:u,handleKeydown:B,handleInput:L,handlePaste:O,setFromTime:_,getParsedTime:N,isComplete:$,totalDigits:s,displayPosToDigitIndex:f,ampm:g,ampmLowercase:D}}const be=["data-size","data-validation","data-disabled"],ye=["value","placeholder","disabled"],Te=["value","placeholder","disabled"],Se=["value","placeholder","disabled"],Me=e.defineComponent({__name:"TimePicker",props:ge,emits:["update:modelValue","update:validationState","validate","open","close","error"],setup(n,{emit:l}){const s=e.ref(null),t=n,g=l,u=e.ref(!1),y=e.ref(!1),A=e.ref("valid"),S=e.ref("valid");e.watch(u,o=>{if(t.disabled&&o){u.value=!1;return}o&&(y.value=!1)}),e.watch(y,o=>{if(t.disabled&&o){y.value=!1;return}o&&(u.value=!1)}),e.watch(()=>t.disabled,o=>{o&&(u.value=!1,y.value=!1)});const f=e.computed({get(){if(Array.isArray(t.modelValue)){const[o,i]=t.modelValue;return[U(o,t.format),U(i,t.format)]}else return U(t.modelValue,t.format)},set(o){Array.isArray(o)?g("update:modelValue",[q("HH:mm:ss",o[0]),q("HH:mm:ss",o[1])]):g("update:modelValue",q("HH:mm:ss",o))}}),V=e.computed(()=>t.minTime?U(t.minTime):null),M=e.computed(()=>t.maxTime?U(t.maxTime):null),x=e.computed(()=>!V.value||!M.value?!0:F(V.value,M.value)<=0),B=e.computed(()=>A.value==="out-of-range"||t.range&&S.value==="out-of-range"?"out-of-range":A.value==="invalid"||t.range&&S.value==="invalid"?"invalid":"valid"),L=e.computed(()=>(t.disabledTimes??[]).map(i=>{const m=Array.isArray(i)?i:[i,i],H=U(m[0]),P=U(m[1]);return F(H,P)<=0?[H,P]:[P,H]}));function O(o){return!!(ie(o,L.value)||t.isTimeDisabled?.(o))}function _(o){return o==="first"?Array.isArray(f.value)?f.value[0]:f.value:Array.isArray(f.value)?f.value[1]:f.value}function N(o,i){if(o==="first"){Array.isArray(f.value)?f.value=[i,f.value[1]]:f.value=i;return}Array.isArray(f.value)&&(f.value=[f.value[0],i])}function $(o,i,m,H){if(o==="first"?A.value=i:S.value=i,g("validate",{target:o,state:i,reason:m,value:H?q("HH:mm:ss",H):null}),i==="valid"){s.value=null;return}if(i==="out-of-range"){s.value="OUT_OF_RANGE",g("error",{code:"OUT_OF_RANGE",message:"Time is outside min/max bounds and was clamped."});return}s.value=m??"BAD_TIME",g("error",{code:m??"BAD_TIME",message:m==="DISABLED"?"Time is disabled by disabledTimes or isTimeDisabled.":"Time is invalid."})}e.watch(B,o=>{g("update:validationState",o)},{immediate:!0});const D=e.computed(()=>x.value?V.value:null),r=e.computed(()=>x.value?M.value:null);function d(o){return ve(o,D.value,r.value)}function c(o,i,m){const H=!oe(i,D.value,r.value),P=d(i);return O(P)?(m.emitValidation&&$(o,"invalid","DISABLED",P),!1):(N(o,P),m.emitValidation&&(H?$(o,"out-of-range","OUT_OF_RANGE",P):$(o,"valid",void 0,P)),!0)}const p=e.computed({get(){return Array.isArray(f.value)?f.value[0]:f.value},set(o){c("first",o,{emitValidation:!0})}}),v=e.computed({get(){return Array.isArray(f.value)?f.value[1]:f.value},set(o){Array.isArray(f.value)&&c("second",o,{emitValidation:!0})}});e.computed(()=>{if(!t.modelValue)return"—";const o=i=>q(t.format,i);return t.range?`${o(p.value)} → ${o(v.value)}`:o(p.value)}),e.watch(()=>t.range,o=>{if(o){if(!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}),e.watch(()=>[D.value,r.value,t.range],()=>{c("first",_("first"),{emitValidation:!0}),t.range&&c("second",_("second"),{emitValidation:!0})},{immediate:!0}),e.watch(()=>[L.value,t.isTimeDisabled,t.range],()=>{c("first",_("first"),{emitValidation:!0}),t.range&&c("second",_("second"),{emitValidation:!0})},{immediate:!0});const k=e.computed(()=>t.format??"HH:mm:ss"),C=e.computed(()=>{let o=k.value.length;return/[AaPp]$/.test(k.value)&&(o+=1),`${Math.min(12,Math.max(4,o))}ch`}),w=se(k),W=w.inputValue,E=se(k),Q=E.inputValue;e.watch(()=>[p.value,k.value],([o])=>{w.setFromTime(o)},{immediate:!0}),e.watch(()=>[v.value,k.value,t.range],([o,,i])=>{if(!i){E.setFromTime({h:0,m:0,s:0});return}E.setFromTime(o)},{immediate:!0});const j=e.ref(null);function X(o){if(t.disabled)return;if(o.key==="Enter"){o.preventDefault(),R("first");return}/^\d$/.test(o.key)&&(u.value=!1,y.value=!1);const i=o.target,m=w.displayPosToDigitIndex(i.selectionStart??0),H=/^\d$/.test(o.key)&&m>=w.totalDigits.value-1;if(w.handleKeydown(o),/^\d$/.test(o.key)){const P=w.getParsedTime();P&&c("first",P,{emitValidation:!1})}t.range&&H&&j.value&&(R("first"),e.nextTick(()=>{const P=j.value;P&&(P.focus(),P.selectionStart=P.selectionEnd=0)}))}function Z(o){if(!t.disabled){if(o.key==="Enter"){o.preventDefault(),R("second");return}if(/^\d$/.test(o.key)&&(u.value=!1,y.value=!1),E.handleKeydown(o),/^\d$/.test(o.key)){const i=E.getParsedTime();i&&c("second",i,{emitValidation:!1})}}}function R(o){const m=(o==="first"?w:E).getParsedTime();m?c(o,m,{emitValidation:!0}):$(o,"invalid","BAD_TIME"),o==="first"?w.setFromTime(p.value):t.range&&E.setFromTime(v.value)}return(o,i)=>(e.openBlock(),e.createElementBlock("div",{class:"timepicker-shell","data-size":t.size,"data-validation":B.value,"data-disabled":t.disabled?"true":"false"},[t.range?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["timepicker-shell__input",{"timepicker-shell__input--error":s.value,"timepicker-shell__input--disabled":t.disabled}])},[e.createElementVNode("input",{type:"text",class:"timepicker-field",value:e.unref(W),placeholder:k.value,style:e.normalizeStyle({width:C.value}),disabled:t.disabled,onFocus:i[4]||(i[4]=m=>!t.disabled&&(u.value=!0)),onKeydown:X,onInput:i[5]||(i[5]=(...m)=>e.unref(w).handleInput&&e.unref(w).handleInput(...m)),onPaste:i[6]||(i[6]=(...m)=>e.unref(w).handlePaste&&e.unref(w).handlePaste(...m)),onBlur:i[7]||(i[7]=m=>!t.disabled&&R("first"))},null,44,Te),i[16]||(i[16]=e.createElementVNode("span",{class:"timepicker-separator"},"–",-1)),e.createElementVNode("input",{ref_key:"secondInputRef",ref:j,type:"text",class:"timepicker-field",value:e.unref(Q),placeholder:k.value,style:e.normalizeStyle({width:C.value}),disabled:t.disabled,onFocus:i[8]||(i[8]=m=>!t.disabled&&(y.value=!0)),onKeydown:Z,onInput:i[9]||(i[9]=(...m)=>e.unref(E).handleInput&&e.unref(E).handleInput(...m)),onPaste:i[10]||(i[10]=(...m)=>e.unref(E).handlePaste&&e.unref(E).handlePaste(...m)),onBlur:i[11]||(i[11]=m=>!t.disabled&&R("second"))},null,44,Se)],2)):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["timepicker-shell__input",{"timepicker-shell__input--error":s.value,"timepicker-shell__input--disabled":t.disabled}])},[e.createElementVNode("input",{type:"text",class:"timepicker-field",value:e.unref(W),placeholder:k.value,style:e.normalizeStyle({width:C.value}),disabled:t.disabled,onFocus:i[0]||(i[0]=m=>!t.disabled&&(u.value=!0)),onKeydown:X,onInput:i[1]||(i[1]=(...m)=>e.unref(w).handleInput&&e.unref(w).handleInput(...m)),onPaste:i[2]||(i[2]=(...m)=>e.unref(w).handlePaste&&e.unref(w).handlePaste(...m)),onBlur:i[3]||(i[3]=m=>!t.disabled&&R("first"))},null,44,ye)],2)),e.createElementVNode("div",null,[e.createVNode(re,{open:u.value,"onUpdate:open":i[12]||(i[12]=m=>u.value=m),initTime:p.value,"onUpdate:initTime":i[13]||(i[13]=m=>p.value=m),format:t.format,"hour-step":t.hourStep,"minute-step":t.minuteStep,"second-step":t.secondStep,"min-time":D.value,"max-time":r.value,"disabled-ranges":L.value,"is-time-disabled":t.isTimeDisabled},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(re,{key:0,open:y.value,"onUpdate:open":i[14]||(i[14]=m=>y.value=m),initTime:v.value,"onUpdate:initTime":i[15]||(i[15]=m=>v.value=m),format:t.format,"hour-step":t.hourStep,"minute-step":t.minuteStep,"second-step":t.secondStep,"min-time":D.value,"max-time":r.value,"disabled-ranges":L.value,"is-time-disabled":t.isTimeDisabled},null,8,["open","initTime","format","hour-step","minute-step","second-step","min-time","max-time","disabled-ranges","is-time-disabled"])):e.createCommentVNode("",!0)])],8,be))}});K.TimePicker=Me,Object.defineProperty(K,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manik02/vue3-timepicker",
-  "version": "0.1.3",
+  "version": "0.2.0",
   "description": "A flexible Vue 3 timepicker component with multiple format support, range selection, and fully customisable styling",
   "license": "MIT",
   "author": "Manos Savvides",
@@ -40,6 +40,8 @@
     "build": "vue-tsc -b && vite build",
     "prepublishOnly": "npm run build",
     "preview": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "test": "vitest run",
     "test:watch": "vitest"
   },
@@ -47,11 +49,16 @@
     "vue": "^3.3.0"
   },
   "devDependencies": {
+    "@storybook/addon-a11y": "^10.2.13",
+    "@storybook/addon-docs": "^10.2.13",
+    "@storybook/addon-links": "^10.2.13",
+    "@storybook/vue3-vite": "^10.2.13",
     "@types/node": "^24.3.0",
     "@vitejs/plugin-vue": "^6.0.1",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
     "happy-dom": "^20.6.3",
+    "storybook": "^10.2.13",
     "typescript": "~5.8.3",
     "vite": "^7.1.3",
     "vite-plugin-dts": "^4.5.4",