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