@manik02/vue3-timepicker 0.1.0 → 0.1.2

package/README.md

@@ -1,7 +1,13 @@
-# Vue Timepicker
+# Vue3 Timepicker
 
 A flexible, customisable timepicker component for Vue 3 with TypeScript support.
 
+| Demo | Default | Dark |
+|------|---------|------|
+| ![Demo](https://raw.githubusercontent.com/manos02/vue3-time-picker/main/assets/demo.gif) | ![Default](https://raw.githubusercontent.com/manos02/vue3-time-picker/main/assets/screenshot-default.png) | ![Dark](https://raw.githubusercontent.com/manos02/vue3-time-picker/main/assets/screenshot-dark.png) |
+
+![All themes](https://raw.githubusercontent.com/manos02/vue3-time-picker/main/assets/screenshot-all.png)
+
 - Single and range time selection
 - Multiple hour formats: 24-hour (`HH`/`H`), 12-hour (`hh`/`h` with AM/PM), 1-24 (`kk`/`k`)
 - Optional seconds
@@ -41,6 +47,7 @@ const time = ref("14:30:00");
 | `hourStep`   | `number`                             | `1`         | Step interval for the hour column.                                       |
 | `minuteStep` | `number`                             | `1`         | Step interval for the minute column.                                     |
 | `secondStep` | `number`                             | `1`         | Step interval for the second column.                                     |
+| `size`       | `"sm" \| "md" \| "lg"`               | `"md"`     | Size preset that maps to CSS variables.                                  |
 
 ## Format tokens
 
@@ -81,8 +88,10 @@ When `range` is `true`, `modelValue` must be a `[string, string]` array.
 ## 12-hour format
 
 ```vue
-<TimePicker v-model="time" format="hh:mm A" /> // AM/PM
-<TimePicker v-model="time" format="hh:mm a" /> // am/pm
+<TimePicker v-model="time" format="hh:mm A" />
+// AM/PM
+<TimePicker v-model="time" format="hh:mm a" />
+// am/pm
 ```
 
 Press `a` or `p` while focused to toggle between AM and PM.
@@ -95,6 +104,20 @@ Press `a` or `p` while focused to toggle between AM and PM.
 
 The dropdown columns will show values at the specified intervals (e.g. 00, 15, 30, 45 for a 15-minute step).
 
+## Size presets
+
+```vue
+<template>
+  <div class="sizes">
+    <TimePicker v-model="time" format="HH:mm" size="sm" />
+    <TimePicker v-model="time" format="HH:mm" size="md" />
+    <TimePicker v-model="time" format="HH:mm" size="lg" />
+  </div>
+</template>
+```
+
+Each preset sets a handful of CSS custom properties (`--vtp-font-size`, `--vtp-padding`, `--vtp-option-padding`, `--vtp-dropdown-radius`). You can still override any of them manually.
+
 ## CSS custom properties
 
 Style the component by setting CSS custom properties on `.timepicker-shell` or any ancestor element.

package/dist/TimePicker/TimePicker.vue.d.ts

@@ -25,6 +25,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly default: "HH:mm";
         readonly validator: (fmt: string) => boolean;
     };
+    readonly size: {
+        readonly type: import('vue').PropType<"sm" | "md" | "lg">;
+        readonly default: "md";
+        readonly validator: (v: string) => v is "sm" | "md" | "lg";
+    };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (v: string | [string, string] | null) => any;
     open: () => any;
@@ -60,6 +65,11 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         readonly default: "HH:mm";
         readonly validator: (fmt: string) => boolean;
     };
+    readonly size: {
+        readonly type: import('vue').PropType<"sm" | "md" | "lg">;
+        readonly default: "md";
+        readonly validator: (v: string) => v is "sm" | "md" | "lg";
+    };
 }>> & Readonly<{
     "onUpdate:modelValue"?: ((v: string | [string, string] | null) => any) | undefined;
     onOpen?: (() => any) | undefined;
@@ -75,6 +85,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     readonly minuteStep: number;
     readonly secondStep: number;
     readonly format: import('./types').TimeFormat;
+    readonly size: "sm" | "md" | "lg";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {
     secondInputRef: HTMLInputElement;
 }, any>;

package/dist/TimePicker/types.d.ts

@@ -42,6 +42,11 @@ export declare const timePickerProps: {
         readonly default: "HH:mm";
         readonly validator: (fmt: string) => boolean;
     };
+    readonly size: {
+        readonly type: PropType<"sm" | "md" | "lg">;
+        readonly default: "md";
+        readonly validator: (v: string) => v is "sm" | "md" | "lg";
+    };
 };
 export type TimePickerProps = ExtractPropTypes<typeof timePickerProps>;
 export declare const TimeSelectionProps: {

package/dist/vue-timepicker.css

@@ -1 +1 @@
-.timepicker-shell,.timepicker-shell *,.timepicker-shell *:before,.timepicker-shell *:after{box-sizing:border-box}.timepicker-shell{position:relative;display:inline-block;font-family:var(--vtp-font-family, inherit);font-size:var(--vtp-font-size, inherit);color:var(--vtp-color, inherit)}.timepicker-shell__input{display:inline-flex;align-items:center;gap:.25rem;padding:var(--vtp-padding, .375rem .5rem);border-radius:var(--vtp-border-radius, 6px);background:var(--vtp-bg, #fff);border:1px solid var(--vtp-border, #ccc);color:var(--vtp-color, inherit);transition:border-color .15s,box-shadow .15s}.timepicker-shell__input:focus-within{border-color:var(--vtp-focus-border, #66afe9);box-shadow:var(--vtp-focus-ring, 0 0 0 2px rgba(102, 175, 233, .3))}.timepicker-shell__input--error{border-color:var(--vtp-error-border, #e74c3c);box-shadow:var(--vtp-error-ring, 0 0 0 2px rgba(231, 76, 60, .15))}.timepicker-shell__input .timepicker-separator{color:var(--vtp-separator-color, currentColor);opacity:.5;flex:0 0 auto;-webkit-user-select:none;user-select:none;line-height:1}.timepicker-field{flex:0 0 auto;width:auto;min-width:0;border:0;background:transparent;font:inherit;color:inherit;padding:0;margin:0;text-align:center}.timepicker-field:focus{outline:none}.timepicker-field::placeholder{color:var(--vtp-color, inherit);opacity:.4}.timepicker-dropdown{display:inline-block}.timepicker-dropdown__panel{min-width:48px;max-height:var(--vtp-dropdown-max-height, 220px);overflow-y:auto;overflow-x:hidden;padding:.25rem .125rem .25rem .25rem;border:1px solid var(--vtp-dropdown-border, var(--vtp-border, #ccc));border-radius:var(--vtp-dropdown-radius, .5rem);background:var(--vtp-dropdown-bg, var(--vtp-bg, #fff));box-shadow:var(--vtp-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, .08));outline:none;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.25) transparent;scrollbar-gutter:stable}.timepicker-dropdown__panel::-webkit-scrollbar{width:5px}.timepicker-dropdown__panel::-webkit-scrollbar-thumb{background-color:#00000040;border-radius:3px}.timepicker-dropdown__panel::-webkit-scrollbar-track{background:transparent}.timepicker-option{padding:var(--vtp-option-padding, .3rem .5rem);border-radius:var(--vtp-option-radius, 4px);cursor:pointer;line-height:1.4;text-align:center;transition:background .1s}.timepicker-option--focused,.timepicker-option:hover{background:var(--vtp-option-hover-bg, rgba(0, 0, 0, .06))}.timepicker-option--active{background:var(--vtp-option-active-bg, #e8f0fe);color:var(--vtp-option-active-color, inherit);font-weight:var(--vtp-option-active-weight, 600)}.timepicker-option--disabled{opacity:.35;pointer-events:none}.vtp-cols{display:inline-flex;flex-wrap:nowrap;gap:var(--vtp-columns-gap, .25rem)}
+.timepicker-shell,.timepicker-shell *,.timepicker-shell *:before,.timepicker-shell *:after{box-sizing:border-box}.timepicker-shell{position:relative;display:inline-block;font-family:var(--vtp-font-family, inherit);font-size:var(--vtp-font-size, inherit);color:var(--vtp-color, inherit)}.timepicker-shell[data-size=sm]{--vtp-font-size: .875rem;--vtp-padding: .25rem .375rem;--vtp-option-padding: .2rem .375rem;--vtp-dropdown-radius: .4rem}.timepicker-shell[data-size=md]{--vtp-font-size: 1rem;--vtp-padding: .375rem .5rem;--vtp-option-padding: .3rem .5rem;--vtp-dropdown-radius: .5rem}.timepicker-shell[data-size=lg]{--vtp-font-size: 1.125rem;--vtp-padding: .5rem .65rem;--vtp-option-padding: .4rem .65rem;--vtp-dropdown-radius: .6rem}.timepicker-shell__input{display:inline-flex;align-items:center;gap:.25rem;padding:var(--vtp-padding, .375rem .5rem);border-radius:var(--vtp-border-radius, 6px);background:var(--vtp-bg, #fff);border:1px solid var(--vtp-border, #ccc);color:var(--vtp-color, inherit);transition:border-color .15s,box-shadow .15s}.timepicker-shell__input:focus-within{border-color:var(--vtp-focus-border, #66afe9);box-shadow:var(--vtp-focus-ring, 0 0 0 2px rgba(102, 175, 233, .3))}.timepicker-shell__input--error{border-color:var(--vtp-error-border, #e74c3c);box-shadow:var(--vtp-error-ring, 0 0 0 2px rgba(231, 76, 60, .15))}.timepicker-shell__input .timepicker-separator{color:var(--vtp-separator-color, currentColor);opacity:.5;flex:0 0 auto;-webkit-user-select:none;user-select:none;line-height:1}.timepicker-field{flex:0 0 auto;width:auto;min-width:0;border:0;background:transparent;font:inherit;color:inherit;padding:0;margin:0;text-align:center}.timepicker-field:focus{outline:none}.timepicker-field::placeholder{color:var(--vtp-color, inherit);opacity:.4}.timepicker-dropdown{display:inline-block}.timepicker-dropdown__panel{min-width:48px;max-height:var(--vtp-dropdown-max-height, 220px);overflow-y:auto;overflow-x:hidden;padding:.25rem .125rem .25rem .25rem;border:1px solid var(--vtp-dropdown-border, var(--vtp-border, #ccc));border-radius:var(--vtp-dropdown-radius, .5rem);background:var(--vtp-dropdown-bg, var(--vtp-bg, #fff));box-shadow:var(--vtp-dropdown-shadow, 0 4px 12px rgba(0, 0, 0, .08));outline:none;scrollbar-width:thin;scrollbar-color:rgba(0,0,0,.25) transparent;scrollbar-gutter:stable}.timepicker-dropdown__panel::-webkit-scrollbar{width:5px}.timepicker-dropdown__panel::-webkit-scrollbar-thumb{background-color:#00000040;border-radius:3px}.timepicker-dropdown__panel::-webkit-scrollbar-track{background:transparent}.timepicker-option{padding:var(--vtp-option-padding, .3rem .5rem);border-radius:var(--vtp-option-radius, 4px);cursor:pointer;line-height:1.4;text-align:center;transition:background .1s}.timepicker-option--focused,.timepicker-option:hover{background:var(--vtp-option-hover-bg, rgba(0, 0, 0, .06))}.timepicker-option--active{background:var(--vtp-option-active-bg, #e8f0fe);color:var(--vtp-option-active-color, inherit);font-weight:var(--vtp-option-active-weight, 600)}.timepicker-option--disabled{opacity:.35;pointer-events:none}.vtp-cols{display:inline-flex;flex-wrap:nowrap;gap:var(--vtp-columns-gap, .25rem)}

package/dist/vue-timepicker.js

@@ -1,15 +1,15 @@
-import { defineComponent as Q, ref as T, onMounted as z, watch as L, createElementBlock as F, openBlock as $, createElementVNode as K, Fragment as me, renderList as ce, normalizeClass as q, toDisplayString as de, nextTick as X, computed as y, onBeforeUnmount as Z, createCommentVNode as U, createVNode as O, createBlock as W, unref as I, normalizeStyle as _ } from "vue";
-const pe = { class: "timepicker-dropdown" }, ve = ["tabindex", "onClick", "onMousemove"], N = /* @__PURE__ */ Q({
+import { defineComponent as X, ref as w, onMounted as O, watch as E, createElementBlock as D, openBlock as b, createElementVNode as K, Fragment as ce, renderList as de, normalizeClass as q, toDisplayString as pe, nextTick as Y, computed as y, onBeforeUnmount as ee, createCommentVNode as B, createVNode as W, createBlock as J, unref as T, normalizeStyle as R } from "vue";
+const ve = { class: "timepicker-dropdown" }, fe = ["tabindex", "onClick", "onMousemove"], C = /* @__PURE__ */ X({
   __name: "TimeColumn",
   props: {
     items: {},
     activeIndex: {}
   },
   emits: ["update:activeIndex", "select"],
-  setup(l, { emit: i }) {
-    const s = l, o = i, p = T(null);
+  setup(s, { emit: r }) {
+    const l = s, o = r, p = w(null);
     function a() {
-      X(() => {
+      Y(() => {
         const v = p.value;
         if (!v) return;
         const g = v.querySelector(
@@ -21,12 +21,12 @@ const pe = { class: "timepicker-dropdown" }, ve = ["tabindex", "onClick", "onMou
         }
       });
     }
-    z(a), L(() => s.activeIndex, a);
+    O(a), E(() => l.activeIndex, a);
     function f(v) {
-      o("update:activeIndex", v), o("select", s.items[v]?.value);
+      o("update:activeIndex", v), o("select", l.items[v]?.value);
     }
-    const c = T(s.activeIndex ?? 0);
-    return (v, g) => ($(), F("div", pe, [
+    const c = w(l.activeIndex ?? 0);
+    return (v, g) => (b(), D("div", ve, [
       K("div", {
         ref_key: "menu",
         ref: p,
@@ -34,7 +34,7 @@ const pe = { class: "timepicker-dropdown" }, ve = ["tabindex", "onClick", "onMou
         role: "listbox",
         tabindex: "-1"
       }, [
-        ($(!0), F(me, null, ce(v.items, (h, x) => ($(), F("div", {
+        (b(!0), D(ce, null, de(v.items, (h, x) => (b(), D("div", {
           key: h.key,
           class: q(["timepicker-option", {
             "timepicker-option--active": x === v.activeIndex,
@@ -45,46 +45,46 @@ const pe = { class: "timepicker-dropdown" }, ve = ["tabindex", "onClick", "onMou
           tabindex: h.disabled ? -1 : 0,
           onClick: (m) => !h.disabled && f(x),
           onMousemove: (m) => !h.disabled && (c.value = x)
-        }, de(h.text), 43, ve))), 128))
+        }, pe(h.text), 43, fe))), 128))
       ], 512)
     ]));
   }
 });
-function ae(l) {
-  return /(a|A|p|P)/.test(l);
+function se(s) {
+  return /(a|A|p|P)/.test(s);
 }
-function fe(l) {
-  return /(p|P)/.test(l);
+function he(s) {
+  return /(p|P)/.test(s);
 }
-function J(l) {
-  return /k{1,2}/.test(l);
+function Q(s) {
+  return /k{1,2}/.test(s);
 }
-function j(l, i) {
-  if (!l) return { h: 0, m: 0, s: 0 };
-  const s = l.match(/\d+/g) || [];
-  let o = s[0] !== void 0 ? +s[0] : 0;
-  const p = +s[1] || 0, a = +s[2] || 0;
+function z(s, r) {
+  if (!s) return { h: 0, m: 0, s: 0 };
+  const l = s.match(/\d+/g) || [];
+  let o = l[0] !== void 0 ? +l[0] : 0;
+  const p = +l[1] || 0, a = +l[2] || 0;
   return { h: o, m: p, s: a };
 }
-function he(l) {
-  const i = l % 12;
-  return i === 0 ? 12 : i;
+function ge(s) {
+  const r = s % 12;
+  return r === 0 ? 12 : r;
 }
-function ee(l, i) {
-  return i ? l % 12 + 12 : l % 12;
+function te(s, r) {
+  return r ? s % 12 + 12 : s % 12;
 }
-function ge(l) {
-  return /(s|ss)/.test(l);
+function ke(s) {
+  return /(s|ss)/.test(s);
 }
-function B(l, i) {
-  let { h: s, m: o, s: p } = i;
-  const a = ae(l), f = s >= 12 ? "PM" : "AM";
-  a && (s = he(s));
-  const c = s === 0 ? 24 : s, v = {
-    HH: String(s).padStart(2, "0"),
-    H: String(s),
-    hh: String(s).padStart(2, "0"),
-    h: String(s),
+function _(s, r) {
+  let { h: l, m: o, s: p } = r;
+  const a = se(s), f = l >= 12 ? "PM" : "AM";
+  a && (l = ge(l));
+  const c = l === 0 ? 24 : l, v = {
+    HH: String(l).padStart(2, "0"),
+    H: String(l),
+    hh: String(l).padStart(2, "0"),
+    h: String(l),
     kk: String(c).padStart(2, "0"),
     k: String(c),
     mm: String(o).padStart(2, "0"),
@@ -96,9 +96,9 @@ function B(l, i) {
     P: f,
     p: f.toLowerCase()
   };
-  return l.replace(/HH|hh|kk|mm|ss|H|h|k|m|s|A|a|P|p/g, (g) => v[g] ?? g);
+  return s.replace(/HH|hh|kk|mm|ss|H|h|k|m|s|A|a|P|p/g, (g) => v[g] ?? g);
 }
-const te = /* @__PURE__ */ Q({
+const ne = /* @__PURE__ */ X({
   __name: "TimeSelection",
   props: {
     open: { type: Boolean },
@@ -109,33 +109,33 @@ const te = /* @__PURE__ */ Q({
     secondStep: {}
   },
   emits: ["update:initTime", "open", "close", "update:open"],
-  setup(l, { emit: i }) {
-    const s = y(() => ae(a.format)), o = y(() => ge(a.format)), p = y(() => J(a.format)), a = l, f = i, c = y({
+  setup(s, { emit: r }) {
+    const l = y(() => se(a.format)), o = y(() => ke(a.format)), p = y(() => Q(a.format)), a = s, f = r, c = y({
       get: () => a.open ?? !1,
       set: (u) => {
         const k = a.open ?? !1;
         u !== k && (f("update:open", u), f(u ? "open" : "close"));
       }
-    }), v = T(null);
+    }), v = w(null);
     function g(u) {
       if (!c.value) return;
       const k = u.target;
       v.value && !v.value.contains(k) && (c.value = !1);
     }
-    z(() => document.addEventListener("mousedown", g)), Z(
+    O(() => document.addEventListener("mousedown", g)), ee(
       () => document.removeEventListener("mousedown", g)
     );
     function h(u) {
       u.key === "Escape" && c.value && (c.value = !1);
     }
-    z(() => document.addEventListener("keydown", h)), Z(() => document.removeEventListener("keydown", h));
-    const x = T(Math.floor(a.initTime.h / a.hourStep) || 0), m = T(Math.floor(a.initTime.m / a.minuteStep) || 0), V = T(Math.floor(a.initTime.s / a.secondStep) || 0);
-    L(
+    O(() => document.addEventListener("keydown", h)), ee(() => document.removeEventListener("keydown", h));
+    const x = w(Math.floor(a.initTime.h / a.hourStep) || 0), m = w(Math.floor(a.initTime.m / a.minuteStep) || 0), H = w(Math.floor(a.initTime.s / a.secondStep) || 0);
+    E(
       () => a.initTime,
       (u) => {
         const k = Math.max(1, a.hourStep), M = Math.max(1, a.minuteStep), A = Math.max(1, a.secondStep);
-        let w = u.h;
-        s.value ? (H.value = u.h >= 12 ? 1 : 0, w = u.h % 12) : p.value && u.h === 0 && (w = 24), x.value = Math.floor(w / k), m.value = Math.floor(u.m / M), V.value = Math.floor(u.s / A);
+        let I = u.h;
+        l.value ? ($.value = u.h >= 12 ? 1 : 0, I = u.h % 12) : p.value && u.h === 0 && (I = 24), x.value = Math.floor(I / k), m.value = Math.floor(u.m / M), H.value = Math.floor(u.s / A);
       }
     );
     function P(u, k) {
@@ -144,103 +144,105 @@ const te = /* @__PURE__ */ Q({
         M.push({ key: A, value: A, text: String(A).padStart(2, "0") });
       return M;
     }
-    function C(u, k) {
+    function N(u, k) {
       const M = Math.max(1, k), A = [];
-      for (let w = 0; w < 12; w += M) {
-        const ie = w === 0 ? 12 : w, Y = u ? w === 0 ? 12 : w + 12 : w;
-        A.push({ key: Y, value: Y, text: String(ie).padStart(2, "0") });
+      for (let I = 0; I < 12; I += M) {
+        const me = I === 0 ? 12 : I, Z = u ? I === 0 ? 12 : I + 12 : I;
+        A.push({ key: Z, value: Z, text: String(me).padStart(2, "0") });
       }
       return A;
     }
-    function E(u) {
+    function L(u) {
       const k = Math.max(1, u), M = [];
       for (let A = 0; A < 24; A += k) {
-        const w = A === 0 ? 24 : A;
-        M.push({ key: A, value: A, text: String(w).padStart(2, "0") });
+        const I = A === 0 ? 24 : A;
+        M.push({ key: A, value: A, text: String(I).padStart(2, "0") });
       }
       return M;
     }
-    const H = T(fe(a.format) ? 1 : 0), D = y(() => {
-      if (!s.value)
-        return p.value ? E(a.hourStep) : P(24, a.hourStep);
-      const u = H.value === 1;
-      return C(u, a.hourStep);
-    }), b = y(() => P(60, a.minuteStep)), e = y(() => P(60, a.secondStep)), t = y(() => /\s[ap]$/.test(a.format)), n = y(() => {
+    const $ = w(he(a.format) ? 1 : 0), F = y(() => {
+      if (!l.value)
+        return p.value ? L(a.hourStep) : P(24, a.hourStep);
+      const u = $.value === 1;
+      return N(u, a.hourStep);
+    }), V = y(() => P(60, a.minuteStep)), e = y(() => P(60, a.secondStep)), t = y(() => /\s[ap]$/.test(a.format)), n = y(() => {
       const u = t.value ? "am" : "AM", k = t.value ? "pm" : "PM";
       return [
         { key: "AM", value: "AM", text: u },
         { key: "PM", value: "PM", text: k }
       ];
-    }), d = y(() => H.value === 1 ? "PM" : "AM"), r = y(() => {
-      const u = Number(D.value[x.value]?.value ?? 0);
-      return s.value ? d.value === "PM" ? ee(u, !0) : ee(u, !1) : p.value && u === 24 ? 0 : u;
+    }), d = y(() => $.value === 1 ? "PM" : "AM"), i = y(() => {
+      const u = Number(F.value[x.value]?.value ?? 0);
+      return l.value ? d.value === "PM" ? te(u, !0) : te(u, !1) : p.value && u === 24 ? 0 : u;
     }), S = y(
-      () => Number(b.value[m.value]?.value ?? 0)
-    ), G = y(
-      () => Number(e.value[V.value]?.value ?? 0)
+      () => Number(V.value[m.value]?.value ?? 0)
+    ), U = y(
+      () => Number(e.value[H.value]?.value ?? 0)
     );
-    function le(u) {
-      !o.value && !s.value && R();
-    }
     function re(u) {
-      s.value || R();
+      !o.value && !l.value && G();
+    }
+    function ie(u) {
+      l.value || G();
     }
     function ue(u) {
-      R();
+      G();
     }
-    function R() {
+    function G() {
       c.value = !1;
     }
-    return L(
-      [r, S, G],
+    return E(
+      [i, S, U],
       ([u, k, M]) => {
         f("update:initTime", { h: u, m: k, s: M });
       },
       { immediate: !0 }
-    ), (u, k) => c.value ? ($(), F("div", {
+    ), (u, k) => c.value ? (b(), D("div", {
       key: 0,
       class: "vtp-cols",
       ref_key: "root",
       ref: v
     }, [
-      O(N, {
+      W(C, {
         activeIndex: x.value,
         "onUpdate:activeIndex": k[0] || (k[0] = (M) => x.value = M),
-        items: D.value,
+        items: F.value,
         label: "Hours"
       }, null, 8, ["activeIndex", "items"]),
-      O(N, {
+      W(C, {
         activeIndex: m.value,
         "onUpdate:activeIndex": k[1] || (k[1] = (M) => m.value = M),
-        items: b.value,
+        items: V.value,
         label: "Minutes",
-        onSelect: le
+        onSelect: re
       }, null, 8, ["activeIndex", "items"]),
-      o.value ? ($(), W(N, {
+      o.value ? (b(), J(C, {
         key: 0,
-        activeIndex: V.value,
-        "onUpdate:activeIndex": k[2] || (k[2] = (M) => V.value = M),
+        activeIndex: H.value,
+        "onUpdate:activeIndex": k[2] || (k[2] = (M) => H.value = M),
         items: e.value,
         label: "Seconds",
-        onSelect: re
-      }, null, 8, ["activeIndex", "items"])) : U("", !0),
-      s.value ? ($(), W(N, {
+        onSelect: ie
+      }, null, 8, ["activeIndex", "items"])) : B("", !0),
+      l.value ? (b(), J(C, {
         key: 1,
-        activeIndex: H.value,
-        "onUpdate:activeIndex": k[3] || (k[3] = (M) => H.value = M),
+        activeIndex: $.value,
+        "onUpdate:activeIndex": k[3] || (k[3] = (M) => $.value = M),
         items: n.value,
         label: "AM/PM",
         onSelect: ue
-      }, null, 8, ["activeIndex", "items"])) : U("", !0)
-    ], 512)) : U("", !0);
+      }, null, 8, ["activeIndex", "items"])) : B("", !0)
+    ], 512)) : B("", !0);
   }
-}), se = /^(HH|H|hh|h|kk|k):(mm|m)(?::(ss|s))?(?:\s*(A|a|P|p))?$/, ne = /^([01]\d|2[0-3]):([0-5]\d)(:([0-5]\d))?$/, ke = {
+}), le = /^(HH|H|hh|h|kk|k):(mm|m)(?::(ss|s))?(?:\s*(A|a|P|p))?$/, oe = /^([01]\d|2[0-3]):([0-5]\d)(:([0-5]\d))?$/, j = typeof __DEV__ < "u" ? __DEV__ : typeof process < "u" && process.env && process.env.NODE_ENV !== "production", ye = {
   modelValue: {
     type: [String, Array],
     default: void 0,
-    validator: (l) => {
-      let i;
-      return Array.isArray(l) ? i = l.length === 2 && l.every((s) => ne.test(s)) : i = l == null || ne.test(l), i;
+    validator: (s) => {
+      let r;
+      return Array.isArray(s) ? r = s.length === 2 && s.every((l) => oe.test(l)) : r = s == null || oe.test(s), !r && j && console.error(
+        `[VueTimepicker] \`modelValue\` is wrong. Received: ${s}`
+      ), r;
     }
   },
   range: {
@@ -253,44 +255,57 @@ const te = /* @__PURE__ */ Q({
   format: {
     type: String,
     default: "HH:mm",
-    validator: (l) => se.test(l)
+    validator: (s) => {
+      const r = le.test(s);
+      return !r && j && console.error(
+        `[VueTimepicker] \`format\` format is wrong. Received: ${s}`
+      ), r;
+    }
+  },
+  size: {
+    type: String,
+    default: "md",
+    validator: (s) => {
+      const r = s === "sm" || s === "md" || s === "lg";
+      return !r && j && console.error(`[VueTimepicker] \`size\` is wrong. Received: ${s}`), r;
+    }
   }
 };
-function ye(l) {
-  const i = se.exec(l);
-  if (!i) throw new Error(`[useTimeMask] Invalid format: ${l}`);
-  const [, s, o, p, a] = i, f = [], c = !!a, v = /^k{1,2}$/.test(s);
+function Se(s) {
+  const r = le.exec(s);
+  if (!r) throw new Error(`[useTimeMask] Invalid format: ${s}`);
+  const [, l, o, p, a] = r, f = [], c = !!a, v = /^k{1,2}$/.test(l);
   let g = 0, h = 23;
-  return c ? (g = 1, h = 12) : v && (g = 1, h = 24), f.push({ token: s, min: g, max: h }), f.push({ token: o, min: 0, max: 59 }), p && f.push({ token: p, min: 0, max: 59 }), {
+  return c ? (g = 1, h = 12) : v && (g = 1, h = 24), f.push({ token: l, min: g, max: h }), f.push({ token: o, min: 0, max: 59 }), p && f.push({ token: p, min: 0, max: 59 }), {
     digitGroups: f,
     hasAmPm: !!a,
     ampmLowercase: a === "a" || a === "p"
   };
 }
-function oe(l) {
-  const i = y(() => ye(l.value)), s = y(() => i.value.digitGroups.length * 2), o = T([]), p = T("AM"), a = T("");
+function ae(s) {
+  const r = y(() => Se(s.value)), l = y(() => r.value.digitGroups.length * 2), o = w([]), p = w("AM"), a = w("");
   function f() {
-    const { digitGroups: e, hasAmPm: t } = i.value;
+    const { digitGroups: e, hasAmPm: t } = r.value;
     let n = "", d = 0;
-    for (let r = 0; r < e.length; r++) {
+    for (let i = 0; i < e.length; i++) {
       for (let S = 0; S < 2; S++)
         d < o.value.length && (n += String(o.value[d]), d++);
-      d === (r + 1) * 2 && r < e.length - 1 && (n += ":");
+      d === (i + 1) * 2 && i < e.length - 1 && (n += ":");
     }
-    if (t && d >= s.value) {
-      const r = i.value.ampmLowercase ? p.value.toLowerCase() : p.value;
-      n += " " + r;
+    if (t && d >= l.value) {
+      const i = r.value.ampmLowercase ? p.value.toLowerCase() : p.value;
+      n += " " + i;
     }
     return n;
   }
   function c(e) {
     const t = e * 2;
     if (o.value.length < t + 2) return;
-    const n = o.value[t] * 10 + o.value[t + 1], { min: d, max: r } = i.value.digitGroups[e], S = Math.max(d, Math.min(r, n));
+    const n = o.value[t] * 10 + o.value[t + 1], { min: d, max: i } = r.value.digitGroups[e], S = Math.max(d, Math.min(i, n));
     S !== n && (o.value[t] = Math.floor(S / 10), o.value[t + 1] = S % 10);
   }
   function v() {
-    for (let e = 0; e < i.value.digitGroups.length; e++)
+    for (let e = 0; e < r.value.digitGroups.length; e++)
       c(e);
   }
   function g(e) {
@@ -304,122 +319,122 @@ function oe(l) {
     return e + Math.floor(e / 2);
   }
   function x(e, t) {
-    if (e >= s.value) return s.value;
+    if (e >= l.value) return l.value;
     const n = [...o.value];
     n[e] = t, o.value = n;
     const d = Math.floor(e / 2);
-    return c(d), Math.min(e + 1, s.value);
+    return c(d), Math.min(e + 1, l.value);
   }
   function m(e, t) {
     const n = f();
     a.value = n, e.value = n;
     const d = t !== void 0 ? Math.min(h(t), n.length) : n.length;
-    e.selectionStart = e.selectionEnd = d, X(() => {
+    e.selectionStart = e.selectionEnd = d, Y(() => {
       document.activeElement === e && (e.selectionStart = e.selectionEnd = d);
     });
   }
-  function V(e) {
+  function H(e) {
     const t = e.key, n = e.target;
     if (["Tab", "Escape", "ArrowLeft", "ArrowRight", "Home", "End"].includes(
       t
     ) || e.metaKey || e.ctrlKey)
       return;
     e.preventDefault();
-    const d = n.selectionStart ?? 0, r = g(d);
+    const d = n.selectionStart ?? 0, i = g(d);
     if (t === "Backspace") {
-      r > 0 && m(n, r - 1);
+      i > 0 && m(n, i - 1);
       return;
     }
     if (t !== "Delete") {
-      if (i.value.hasAmPm) {
+      if (r.value.hasAmPm) {
         const S = t.toLowerCase();
         if (S === "a") {
-          p.value = "AM", m(n, r);
+          p.value = "AM", m(n, i);
           return;
         }
         if (S === "p") {
-          p.value = "PM", m(n, r);
+          p.value = "PM", m(n, i);
           return;
         }
       }
       if (/^\d$/.test(t)) {
-        const S = x(r, +t);
+        const S = x(i, +t);
         m(n, S);
         return;
       }
     }
   }
   function P(e) {
-    const t = e.target, n = t.value.replace(/\D/g, "").split("").map(Number).slice(0, s.value);
-    o.value = n, v(), i.value.hasAmPm && (/p/i.test(t.value) ? p.value = "PM" : /a/i.test(t.value) && (p.value = "AM")), m(t);
+    const t = e.target, n = t.value.replace(/\D/g, "").split("").map(Number).slice(0, l.value);
+    o.value = n, v(), r.value.hasAmPm && (/p/i.test(t.value) ? p.value = "PM" : /a/i.test(t.value) && (p.value = "AM")), m(t);
   }
-  function C(e) {
+  function N(e) {
     e.preventDefault();
-    const t = e.clipboardData?.getData("text") ?? "", n = e.target, d = n.selectionStart ?? 0, r = t.replace(/\D/g, "").split("").map(Number);
+    const t = e.clipboardData?.getData("text") ?? "", n = e.target, d = n.selectionStart ?? 0, i = t.replace(/\D/g, "").split("").map(Number);
     let S = g(d);
-    for (const G of r) {
-      if (S >= s.value) break;
-      S = x(S, G);
+    for (const U of i) {
+      if (S >= l.value) break;
+      S = x(S, U);
     }
-    i.value.hasAmPm && (/p\.?m\.?/i.test(t) ? p.value = "PM" : /a\.?m\.?/i.test(t) && (p.value = "AM")), m(n, S);
+    r.value.hasAmPm && (/p\.?m\.?/i.test(t) ? p.value = "PM" : /a\.?m\.?/i.test(t) && (p.value = "AM")), m(n, S);
   }
-  function E(e) {
-    const { digitGroups: t, hasAmPm: n } = i.value, d = [];
-    let r = e.h;
-    n ? (p.value = e.h >= 12 ? "PM" : "AM", r = e.h % 12, r === 0 && (r = 12)) : J(l.value) && (r = e.h === 0 ? 24 : e.h), d.push(Math.floor(r / 10), r % 10), d.push(Math.floor(e.m / 10), e.m % 10), t.length > 2 && d.push(Math.floor(e.s / 10), e.s % 10), o.value = d, a.value = f();
+  function L(e) {
+    const { digitGroups: t, hasAmPm: n } = r.value, d = [];
+    let i = e.h;
+    n ? (p.value = e.h >= 12 ? "PM" : "AM", i = e.h % 12, i === 0 && (i = 12)) : Q(s.value) && (i = e.h === 0 ? 24 : e.h), d.push(Math.floor(i / 10), i % 10), d.push(Math.floor(e.m / 10), e.m % 10), t.length > 2 && d.push(Math.floor(e.s / 10), e.s % 10), o.value = d, a.value = f();
   }
-  function H() {
-    if (o.value.length < s.value) return null;
+  function $() {
+    if (o.value.length < l.value) return null;
     const e = [];
-    for (let r = 0; r < i.value.digitGroups.length; r++) {
-      const S = r * 2;
+    for (let i = 0; i < r.value.digitGroups.length; i++) {
+      const S = i * 2;
       e.push(o.value[S] * 10 + o.value[S + 1]);
     }
     let t = e[0];
     const n = e[1], d = e[2] ?? 0;
-    return i.value.hasAmPm && (t = p.value === "PM" ? t === 12 ? 12 : t + 12 : t === 12 ? 0 : t), J(l.value) && t === 24 && (t = 0), { h: t, m: n, s: d };
+    return r.value.hasAmPm && (t = p.value === "PM" ? t === 12 ? 12 : t + 12 : t === 12 ? 0 : t), Q(s.value) && t === 24 && (t = 0), { h: t, m: n, s: d };
   }
-  const D = y(
-    () => o.value.length >= s.value
-  ), b = y(() => i.value.ampmLowercase);
+  const F = y(
+    () => o.value.length >= l.value
+  ), V = y(() => r.value.ampmLowercase);
   return {
     inputValue: a,
-    handleKeydown: V,
+    handleKeydown: H,
     handleInput: P,
-    handlePaste: C,
-    setFromTime: E,
-    getParsedTime: H,
-    isComplete: D,
-    totalDigits: s,
+    handlePaste: N,
+    setFromTime: L,
+    getParsedTime: $,
+    isComplete: F,
+    totalDigits: l,
     displayPosToDigitIndex: g,
     ampm: p,
-    ampmLowercase: b
+    ampmLowercase: V
   };
 }
-const Se = { class: "timepicker-shell" }, Me = ["value", "placeholder"], xe = ["value", "placeholder"], Ae = ["value", "placeholder"], Ie = /* @__PURE__ */ Q({
+const Me = ["data-size"], xe = ["value", "placeholder"], Ae = ["value", "placeholder"], Pe = ["value", "placeholder"], we = /* @__PURE__ */ X({
   __name: "TimePicker",
-  props: ke,
+  props: ye,
   emits: ["update:modelValue", "open", "close", "error"],
-  setup(l, { emit: i }) {
-    const s = T(null), o = l, p = i, a = T(!1), f = T(!1);
-    L(a, (e) => {
+  setup(s, { emit: r }) {
+    const l = w(null), o = s, p = r, a = w(!1), f = w(!1);
+    E(a, (e) => {
       e && (f.value = !1);
-    }), L(f, (e) => {
+    }), E(f, (e) => {
       e && (a.value = !1);
     });
     const c = y({
       get() {
         if (Array.isArray(o.modelValue)) {
           const [e, t] = o.modelValue;
-          return [j(e, o.format), j(t, o.format)];
+          return [z(e, o.format), z(t, o.format)];
         } else
-          return j(o.modelValue, o.format);
+          return z(o.modelValue, o.format);
       },
       set(e) {
         Array.isArray(e) ? p("update:modelValue", [
-          B("HH:mm:ss", e[0]),
-          B("HH:mm:ss", e[1])
-        ]) : p("update:modelValue", B("HH:mm:ss", e));
+          _("HH:mm:ss", e[0]),
+          _("HH:mm:ss", e[1])
+        ]) : p("update:modelValue", _("HH:mm:ss", e));
       }
     }), v = y({
       get() {
@@ -438,9 +453,9 @@ const Se = { class: "timepicker-shell" }, Me = ["value", "placeholder"], xe = ["
     });
     y(() => {
       if (!o.modelValue) return "—";
-      const e = (t) => B(o.format, t);
+      const e = (t) => _(o.format, t);
       return o.range ? `${e(v.value)} → ${e(g.value)}` : e(v.value);
-    }), L(
+    }), E(
       () => o.range,
       (e) => {
         if (e) {
@@ -458,14 +473,14 @@ const Se = { class: "timepicker-shell" }, Me = ["value", "placeholder"], xe = ["
     const h = y(() => o.format ?? "HH:mm:ss"), x = y(() => {
       let e = h.value.length;
       return /[AaPp]$/.test(h.value) && (e += 1), `${Math.min(12, Math.max(4, e))}ch`;
-    }), m = oe(h), V = m.inputValue, P = oe(h), C = P.inputValue;
-    L(
+    }), m = ae(h), H = m.inputValue, P = ae(h), N = P.inputValue;
+    E(
       () => [v.value, h.value],
       ([e]) => {
         m.setFromTime(e);
       },
       { immediate: !0 }
-    ), L(
+    ), E(
       () => [g.value, h.value, o.range],
       ([e, , t]) => {
         if (!t) {
@@ -476,94 +491,97 @@ const Se = { class: "timepicker-shell" }, Me = ["value", "placeholder"], xe = ["
       },
       { immediate: !0 }
     );
-    const E = T(null);
-    function H(e) {
+    const L = w(null);
+    function $(e) {
       if (e.key === "Enter") {
-        e.preventDefault(), b("first");
+        e.preventDefault(), V("first");
         return;
       }
       /^\d$/.test(e.key) && (a.value = !1, f.value = !1);
       const t = e.target, n = m.displayPosToDigitIndex(t.selectionStart ?? 0), d = /^\d$/.test(e.key) && n >= m.totalDigits.value - 1;
       if (m.handleKeydown(e), /^\d$/.test(e.key)) {
-        const r = m.getParsedTime();
-        r && (s.value = null, v.value = r);
+        const i = m.getParsedTime();
+        i && (l.value = null, v.value = i);
       }
-      o.range && d && E.value && (b("first"), X(() => {
-        const r = E.value;
-        r && (r.focus(), r.selectionStart = r.selectionEnd = 0);
+      o.range && d && L.value && (V("first"), Y(() => {
+        const i = L.value;
+        i && (i.focus(), i.selectionStart = i.selectionEnd = 0);
       }));
     }
-    function D(e) {
+    function F(e) {
       if (e.key === "Enter") {
-        e.preventDefault(), b("second");
+        e.preventDefault(), V("second");
         return;
       }
       if (/^\d$/.test(e.key) && (a.value = !1, f.value = !1), P.handleKeydown(e), /^\d$/.test(e.key)) {
         const t = P.getParsedTime();
-        t && (s.value = null, g.value = t);
+        t && (l.value = null, g.value = t);
       }
     }
-    function b(e) {
+    function V(e) {
       const n = (e === "first" ? m : P).getParsedTime();
-      n && (s.value = null, e === "first" ? v.value = n : o.range && (g.value = n)), e === "first" ? m.setFromTime(v.value) : o.range && P.setFromTime(g.value);
+      n && (l.value = null, e === "first" ? v.value = n : o.range && (g.value = n)), e === "first" ? m.setFromTime(v.value) : o.range && P.setFromTime(g.value);
     }
-    return (e, t) => ($(), F("div", Se, [
-      o.range ? ($(), F("div", {
+    return (e, t) => (b(), D("div", {
+      class: "timepicker-shell",
+      "data-size": o.size
+    }, [
+      o.range ? (b(), D("div", {
         key: 1,
-        class: q(["timepicker-shell__input", { "timepicker-shell__input--error": s.value }])
+        class: q(["timepicker-shell__input", { "timepicker-shell__input--error": l.value }])
       }, [
         K("input", {
           type: "text",
           class: "timepicker-field",
-          value: I(V),
+          value: T(H),
           placeholder: h.value,
-          style: _({ width: x.value }),
+          style: R({ width: x.value }),
           onFocus: t[4] || (t[4] = (n) => a.value = !0),
-          onKeydown: H,
+          onKeydown: $,
           onInput: t[5] || (t[5] = //@ts-ignore
-          (...n) => I(m).handleInput && I(m).handleInput(...n)),
+          (...n) => T(m).handleInput && T(m).handleInput(...n)),
           onPaste: t[6] || (t[6] = //@ts-ignore
-          (...n) => I(m).handlePaste && I(m).handlePaste(...n)),
-          onBlur: t[7] || (t[7] = (n) => b("first"))
-        }, null, 44, xe),
+          (...n) => T(m).handlePaste && T(m).handlePaste(...n)),
+          onBlur: t[7] || (t[7] = (n) => V("first"))
+        }, null, 44, Ae),
         t[16] || (t[16] = K("span", { class: "timepicker-separator" }, "–", -1)),
         K("input", {
           ref_key: "secondInputRef",
-          ref: E,
+          ref: L,
           type: "text",
           class: "timepicker-field",
-          value: I(C),
+          value: T(N),
           placeholder: h.value,
-          style: _({ width: x.value }),
+          style: R({ width: x.value }),
           onFocus: t[8] || (t[8] = (n) => f.value = !0),
-          onKeydown: D,
+          onKeydown: F,
           onInput: t[9] || (t[9] = //@ts-ignore
-          (...n) => I(P).handleInput && I(P).handleInput(...n)),
+          (...n) => T(P).handleInput && T(P).handleInput(...n)),
           onPaste: t[10] || (t[10] = //@ts-ignore
-          (...n) => I(P).handlePaste && I(P).handlePaste(...n)),
-          onBlur: t[11] || (t[11] = (n) => b("second"))
-        }, null, 44, Ae)
-      ], 2)) : ($(), F("div", {
+          (...n) => T(P).handlePaste && T(P).handlePaste(...n)),
+          onBlur: t[11] || (t[11] = (n) => V("second"))
+        }, null, 44, Pe)
+      ], 2)) : (b(), D("div", {
         key: 0,
-        class: q(["timepicker-shell__input", { "timepicker-shell__input--error": s.value }])
+        class: q(["timepicker-shell__input", { "timepicker-shell__input--error": l.value }])
       }, [
         K("input", {
           type: "text",
           class: "timepicker-field",
-          value: I(V),
+          value: T(H),
           placeholder: h.value,
-          style: _({ width: x.value }),
+          style: R({ width: x.value }),
           onFocus: t[0] || (t[0] = (n) => a.value = !0),
-          onKeydown: H,
+          onKeydown: $,
           onInput: t[1] || (t[1] = //@ts-ignore
-          (...n) => I(m).handleInput && I(m).handleInput(...n)),
+          (...n) => T(m).handleInput && T(m).handleInput(...n)),
           onPaste: t[2] || (t[2] = //@ts-ignore
-          (...n) => I(m).handlePaste && I(m).handlePaste(...n)),
-          onBlur: t[3] || (t[3] = (n) => b("first"))
-        }, null, 44, Me)
+          (...n) => T(m).handlePaste && T(m).handlePaste(...n)),
+          onBlur: t[3] || (t[3] = (n) => V("first"))
+        }, null, 44, xe)
       ], 2)),
       K("div", null, [
-        O(te, {
+        W(ne, {
           open: a.value,
           "onUpdate:open": t[12] || (t[12] = (n) => a.value = n),
           initTime: v.value,
@@ -573,7 +591,7 @@ const Se = { class: "timepicker-shell" }, Me = ["value", "placeholder"], xe = ["
           "minute-step": o.minuteStep,
           "second-step": o.secondStep
         }, null, 8, ["open", "initTime", "format", "hour-step", "minute-step", "second-step"]),
-        o.range ? ($(), W(te, {
+        o.range ? (b(), J(ne, {
           key: 0,
           open: f.value,
           "onUpdate:open": t[14] || (t[14] = (n) => f.value = n),
@@ -583,11 +601,11 @@ const Se = { class: "timepicker-shell" }, Me = ["value", "placeholder"], xe = ["
           "hour-step": o.hourStep,
           "minute-step": o.minuteStep,
           "second-step": o.secondStep
-        }, null, 8, ["open", "initTime", "format", "hour-step", "minute-step", "second-step"])) : U("", !0)
+        }, null, 8, ["open", "initTime", "format", "hour-step", "minute-step", "second-step"])) : B("", !0)
       ])
-    ]));
+    ], 8, Me));
   }
 });
 export {
-  Ie as TimePicker
+  we as TimePicker
 };

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"},O=["tabindex","onClick","onMousemove"],$=e.defineComponent({__name:"TimeColumn",props:{items:{},activeIndex:{}},emits:["update:activeIndex","select"],setup(s,{emit:c}){const r=s,a=c,f=e.ref(null);function l(){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(l),e.watch(()=>r.activeIndex,l);function v(h){a("update:activeIndex",h),a("select",r.items[h]?.value)}const d=e.ref(r.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,O))),128))],512)]))}});function K(s){return/(a|A|p|P)/.test(s)}function W(s){return/(p|P)/.test(s)}function N(s){return/k{1,2}/.test(s)}function C(s,c){if(!s)return{h:0,m:0,s:0};const r=s.match(/\d+/g)||[];let a=r[0]!==void 0?+r[0]:0;const f=+r[1]||0,l=+r[2]||0;return{h:a,m:f,s:l}}function J(s){const c=s%12;return c===0?12:c}function U(s,c){return c?s%12+12:s%12}function Q(s){return/(s|ss)/.test(s)}function L(s,c){let{h:r,m:a,s:f}=c;const l=K(s),v=r>=12?"PM":"AM";l&&(r=J(r));const d=r===0?24:r,h={HH:String(r).padStart(2,"0"),H:String(r),hh:String(r).padStart(2,"0"),h:String(r),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 G=e.defineComponent({__name:"TimeSelection",props:{open:{type:Boolean},initTime:{},format:{},hourStep:{},minuteStep:{},secondStep:{}},emits:["update:initTime","open","close","update:open"],setup(s,{emit:c}){const r=e.computed(()=>K(l.format)),a=e.computed(()=>Q(l.format)),f=e.computed(()=>N(l.format)),l=s,v=c,d=e.computed({get:()=>l.open??!1,set:u=>{const y=l.open??!1;u!==y&&(v("update:open",u),v(u?"open":"close"))}}),h=e.ref(null);function g(u){if(!d.value)return;const y=u.target;h.value&&!h.value.contains(y)&&(d.value=!1)}e.onMounted(()=>document.addEventListener("mousedown",g)),e.onBeforeUnmount(()=>document.removeEventListener("mousedown",g));function k(u){u.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(l.initTime.h/l.hourStep)||0),m=e.ref(Math.floor(l.initTime.m/l.minuteStep)||0),V=e.ref(Math.floor(l.initTime.s/l.secondStep)||0);e.watch(()=>l.initTime,u=>{const y=Math.max(1,l.hourStep),M=Math.max(1,l.minuteStep),A=Math.max(1,l.secondStep);let w=u.h;r.value?(I.value=u.h>=12?1:0,w=u.h%12):f.value&&u.h===0&&(w=24),x.value=Math.floor(w/y),m.value=Math.floor(u.m/M),V.value=Math.floor(u.s/A)});function P(u,y){const M=[];for(let A=0;A<u;A+=Math.max(1,y))M.push({key:A,value:A,text:String(A).padStart(2,"0")});return M}function H(u,y){const M=Math.max(1,y),A=[];for(let w=0;w<12;w+=M){const se=w===0?12:w,_=u?w===0?12:w+12:w;A.push({key:_,value:_,text:String(se).padStart(2,"0")})}return A}function b(u){const y=Math.max(1,u),M=[];for(let A=0;A<24;A+=y){const w=A===0?24:A;M.push({key:A,value:A,text:String(w).padStart(2,"0")})}return M}const I=e.ref(W(l.format)?1:0),B=e.computed(()=>{if(!r.value)return f.value?b(l.hourStep):P(24,l.hourStep);const u=I.value===1;return H(u,l.hourStep)}),T=e.computed(()=>P(60,l.minuteStep)),t=e.computed(()=>P(60,l.secondStep)),n=e.computed(()=>/\s[ap]$/.test(l.format)),o=e.computed(()=>{const u=n.value?"am":"AM",y=n.value?"pm":"PM";return[{key:"AM",value:"AM",text:u},{key:"PM",value:"PM",text:y}]}),p=e.computed(()=>I.value===1?"PM":"AM"),i=e.computed(()=>{const u=Number(B.value[x.value]?.value??0);return r.value?p.value==="PM"?U(u,!0):U(u,!1):f.value&&u===24?0:u}),S=e.computed(()=>Number(T.value[m.value]?.value??0)),F=e.computed(()=>Number(t.value[V.value]?.value??0));function ae(u){!a.value&&!r.value&&D()}function le(u){r.value||D()}function re(u){D()}function D(){d.value=!1}return e.watch([i,S,F],([u,y,M])=>{v("update:initTime",{h:u,m:y,s:M})},{immediate:!0}),(u,y)=>d.value?(e.openBlock(),e.createElementBlock("div",{key:0,class:"vtp-cols",ref_key:"root",ref:h},[e.createVNode($,{activeIndex:x.value,"onUpdate:activeIndex":y[0]||(y[0]=M=>x.value=M),items:B.value,label:"Hours"},null,8,["activeIndex","items"]),e.createVNode($,{activeIndex:m.value,"onUpdate:activeIndex":y[1]||(y[1]=M=>m.value=M),items:T.value,label:"Minutes",onSelect:ae},null,8,["activeIndex","items"]),a.value?(e.openBlock(),e.createBlock($,{key:0,activeIndex:V.value,"onUpdate:activeIndex":y[2]||(y[2]=M=>V.value=M),items:t.value,label:"Seconds",onSelect:le},null,8,["activeIndex","items"])):e.createCommentVNode("",!0),r.value?(e.openBlock(),e.createBlock($,{key:1,activeIndex:I.value,"onUpdate:activeIndex":y[3]||(y[3]=M=>I.value=M),items:o.value,label:"AM/PM",onSelect:re},null,8,["activeIndex","items"])):e.createCommentVNode("",!0)],512)):e.createCommentVNode("",!0)}}),z=/^(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))?$/,X={modelValue:{type:[String,Array],default:void 0,validator:s=>{let c;return Array.isArray(s)?c=s.length===2&&s.every(r=>R.test(r)):c=s==null||R.test(s),c}},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=>z.test(s)}};function Y(s){const c=z.exec(s);if(!c)throw new Error(`[useTimeMask] Invalid format: ${s}`);const[,r,a,f,l]=c,v=[],d=!!l,h=/^k{1,2}$/.test(r);let g=0,k=23;return d?(g=1,k=12):h&&(g=1,k=24),v.push({token:r,min:g,max:k}),v.push({token:a,min:0,max:59}),f&&v.push({token:f,min:0,max:59}),{digitGroups:v,hasAmPm:!!l,ampmLowercase:l==="a"||l==="p"}}function j(s){const c=e.computed(()=>Y(s.value)),r=e.computed(()=>c.value.digitGroups.length*2),a=e.ref([]),f=e.ref("AM"),l=e.ref("");function v(){const{digitGroups:t,hasAmPm:n}=c.value;let o="",p=0;for(let i=0;i<t.length;i++){for(let S=0;S<2;S++)p<a.value.length&&(o+=String(a.value[p]),p++);p===(i+1)*2&&i<t.length-1&&(o+=":")}if(n&&p>=r.value){const i=c.value.ampmLowercase?f.value.toLowerCase():f.value;o+=" "+i}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:i}=c.value.digitGroups[t],S=Math.max(p,Math.min(i,o));S!==o&&(a.value[n]=Math.floor(S/10),a.value[n+1]=S%10)}function h(){for(let t=0;t<c.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>=r.value)return r.value;const o=[...a.value];o[t]=n,a.value=o;const p=Math.floor(t/2);return d(p),Math.min(t+1,r.value)}function m(t,n){const o=v();l.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,i=g(p);if(n==="Backspace"){i>0&&m(o,i-1);return}if(n!=="Delete"){if(c.value.hasAmPm){const S=n.toLowerCase();if(S==="a"){f.value="AM",m(o,i);return}if(S==="p"){f.value="PM",m(o,i);return}}if(/^\d$/.test(n)){const S=x(i,+n);m(o,S);return}}}function P(t){const n=t.target,o=n.value.replace(/\D/g,"").split("").map(Number).slice(0,r.value);a.value=o,h(),c.value.hasAmPm&&(/p/i.test(n.value)?f.value="PM":/a/i.test(n.value)&&(f.value="AM")),m(n)}function H(t){t.preventDefault();const n=t.clipboardData?.getData("text")??"",o=t.target,p=o.selectionStart??0,i=n.replace(/\D/g,"").split("").map(Number);let S=g(p);for(const F of i){if(S>=r.value)break;S=x(S,F)}c.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}=c.value,p=[];let i=t.h;o?(f.value=t.h>=12?"PM":"AM",i=t.h%12,i===0&&(i=12)):N(s.value)&&(i=t.h===0?24:t.h),p.push(Math.floor(i/10),i%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,l.value=v()}function I(){if(a.value.length<r.value)return null;const t=[];for(let i=0;i<c.value.digitGroups.length;i++){const S=i*2;t.push(a.value[S]*10+a.value[S+1])}let n=t[0];const o=t[1],p=t[2]??0;return c.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 B=e.computed(()=>a.value.length>=r.value),T=e.computed(()=>c.value.ampmLowercase);return{inputValue:l,handleKeydown:V,handleInput:P,handlePaste:H,setFromTime:b,getParsedTime:I,isComplete:B,totalDigits:r,displayPosToDigitIndex:g,ampm:f,ampmLowercase:T}}const Z={class:"timepicker-shell"},ee=["value","placeholder"],te=["value","placeholder"],ne=["value","placeholder"],oe=e.defineComponent({__name:"TimePicker",props:X,emits:["update:modelValue","open","close","error"],setup(s,{emit:c}){const r=e.ref(null),a=s,f=c,l=e.ref(!1),v=e.ref(!1);e.watch(l,t=>{t&&(v.value=!1)}),e.watch(v,t=>{t&&(l.value=!1)});const d=e.computed({get(){if(Array.isArray(a.modelValue)){const[t,n]=a.modelValue;return[C(t,a.format),C(n,a.format)]}else return C(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,P=j(k),H=P.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){P.setFromTime({h:0,m:0,s:0});return}P.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)&&(l.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 i=m.getParsedTime();i&&(r.value=null,h.value=i)}a.range&&p&&b.value&&(T("first"),e.nextTick(()=>{const i=b.value;i&&(i.focus(),i.selectionStart=i.selectionEnd=0)}))}function B(t){if(t.key==="Enter"){t.preventDefault(),T("second");return}if(/^\d$/.test(t.key)&&(l.value=!1,v.value=!1),P.handleKeydown(t),/^\d$/.test(t.key)){const n=P.getParsedTime();n&&(r.value=null,g.value=n)}}function T(t){const o=(t==="first"?m:P).getParsedTime();o&&(r.value=null,t==="first"?h.value=o:a.range&&(g.value=o)),t==="first"?m.setFromTime(h.value):a.range&&P.setFromTime(g.value)}return(t,n)=>(e.openBlock(),e.createElementBlock("div",Z,[a.range?(e.openBlock(),e.createElementBlock("div",{key:1,class:e.normalizeClass(["timepicker-shell__input",{"timepicker-shell__input--error":r.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=>l.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,te),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(H),placeholder:k.value,style:e.normalizeStyle({width:x.value}),onFocus:n[8]||(n[8]=o=>v.value=!0),onKeydown:B,onInput:n[9]||(n[9]=(...o)=>e.unref(P).handleInput&&e.unref(P).handleInput(...o)),onPaste:n[10]||(n[10]=(...o)=>e.unref(P).handlePaste&&e.unref(P).handlePaste(...o)),onBlur:n[11]||(n[11]=o=>T("second"))},null,44,ne)],2)):(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["timepicker-shell__input",{"timepicker-shell__input--error":r.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=>l.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,ee)],2)),e.createElementVNode("div",null,[e.createVNode(G,{open:l.value,"onUpdate:open":n[12]||(n[12]=o=>l.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(G,{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)])]))}});E.TimePicker=oe,Object.defineProperty(E,Symbol.toStringTag,{value:"Module"})}));
+(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"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@manik02/vue3-timepicker",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "A flexible Vue 3 timepicker component with multiple format support, range selection, and fully customisable styling",
   "license": "MIT",
   "author": "Manos Savvides",