@manik02/vue3-timepicker 0.2.2 → 0.4.0

package/dist/vue-timepicker.js

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