v-datepicker-lite 0.0.7 → 0.0.9

package/components/time-picker/TimePicker.vue.d.ts

@@ -4,6 +4,7 @@ interface Props {
     triggerClass?: string;
     style?: any;
     className?: any;
+    offset?: [number, number];
 }
 declare function __VLS_template(): {
     default?(_: {
@@ -13,16 +14,19 @@ declare function __VLS_template(): {
 declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     modelValue: any;
     timeFormat: string;
+    offset: () => number[];
 }>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     "update:modelValue": (value: string) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<Props>, {
     modelValue: any;
     timeFormat: string;
+    offset: () => number[];
 }>>> & Readonly<{
     "onUpdate:modelValue"?: (value: string) => any;
 }>, {
     timeFormat: "12h" | "24h";
     modelValue: string | null;
+    offset: [number, number];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/index.js

@@ -1,4 +1,4 @@
-import { defineComponent as J, computed as H, createElementBlock as _, openBlock as k, createElementVNode as x, Fragment as L, renderList as F, unref as w, toDisplayString as j, normalizeClass as A, ref as C, watch as le, nextTick as K, onMounted as Ie, createBlock as ie, createCommentVNode as U, normalizeStyle as Mt, createVNode as Ae, renderSlot as Fe, normalizeProps as je, guardReactiveProps as Ne, onUnmounted as zt, resolveDynamicComponent as Gt, Teleport as Ut, withCtx as Ee, createTextVNode as Jt, onBeforeUnmount as Zt } from "vue";
+import { defineComponent as J, computed as H, createElementBlock as _, openBlock as k, createElementVNode as M, Fragment as L, renderList as F, unref as w, toDisplayString as j, normalizeClass as A, ref as C, watch as le, nextTick as K, onMounted as Ie, createBlock as ie, createCommentVNode as U, normalizeStyle as xt, createVNode as Ae, renderSlot as Fe, normalizeProps as je, guardReactiveProps as Ne, onUnmounted as zt, resolveDynamicComponent as Gt, Teleport as Ut, withCtx as Ee, createTextVNode as Jt, onBeforeUnmount as Zt } from "vue";
 const St = (e, t = "YYYY-MM-DD") => {
   const n = e.getFullYear(), o = String(e.getMonth() + 1).padStart(2, "0"), r = String(e.getDate()).padStart(2, "0"), l = String(e.getHours()).padStart(2, "0"), c = String(e.getMinutes()).padStart(2, "0"), i = String(e.getSeconds()).padStart(2, "0"), a = String(e.getMilliseconds()).padStart(3, "0");
   return t.replace("YYYY", n.toString()).replace("MM", o).replace("DD", r).replace("HH", l).replace("mm", c).replace("ss", i).replace("sss", a);
@@ -122,13 +122,13 @@ const St = (e, t = "YYYY-MM-DD") => {
       i.isDisabled || o("select", i.date);
     };
     return (i, a) => (k(), _("div", en, [
-      x("table", tn, [
-        x("thead", null, [
-          x("tr", nn, [
+      M("table", tn, [
+        M("thead", null, [
+          M("tr", nn, [
             (k(!0), _(L, null, F(w(Tt), (u) => (k(), _("th", { key: u }, j(u), 1))), 128))
           ])
         ]),
-        x("tbody", rn, [
+        M("tbody", rn, [
           (k(!0), _(L, null, F(l.value, (u, p) => (k(), _("tr", {
             key: p,
             class: "date-picker-week-row"
@@ -137,7 +137,7 @@ const St = (e, t = "YYYY-MM-DD") => {
               key: `${d.year}-${d.month}-${d.day}`,
               class: "date-picker-day-cell"
             }, [
-              x("button", {
+              M("button", {
                 class: A([
                   "date-picker-day",
                   {
@@ -180,14 +180,14 @@ const St = (e, t = "YYYY-MM-DD") => {
       o("select", i);
     };
     return (c, i) => (k(), _("div", sn, [
-      x("table", ln, [
-        x("thead", null, [
-          x("tr", cn, [
-            i[0] || (i[0] = x("th", { class: "date-picker-weekday date-picker-week-header" }, "Wk", -1)),
+      M("table", ln, [
+        M("thead", null, [
+          M("tr", cn, [
+            i[0] || (i[0] = M("th", { class: "date-picker-weekday date-picker-week-header" }, "Wk", -1)),
             (k(!0), _(L, null, F(w(Tt), (a) => (k(), _("th", { key: a }, j(a), 1))), 128))
           ])
         ]),
-        x("tbody", un, [
+        M("tbody", un, [
           (k(!0), _(L, null, F(r.value, (a) => (k(), _("tr", {
             key: a.weekNumber,
             class: A([
@@ -198,14 +198,14 @@ const St = (e, t = "YYYY-MM-DD") => {
             ]),
             onClick: (u) => l(a)
           }, [
-            x("td", fn, [
-              x("div", pn, j(a.weekNumber), 1)
+            M("td", fn, [
+              M("div", pn, j(a.weekNumber), 1)
             ]),
             (k(!0), _(L, null, F(a.days, (u) => (k(), _("td", {
               key: `${u.year}-${u.month}-${u.day}`,
               class: "date-picker-day-cell"
             }, [
-              x("button", {
+              M("button", {
                 class: A([
                   "date-picker-day",
                   {
@@ -238,9 +238,9 @@ function vn(e, t = "24h", n = 15, o) {
       const O = i.value ? v === 0 ? " AM" : " PM" : "";
       for (let S = f; S <= (i.value ? 12 : 23); S++)
         for (let D = 0; D < 60; D += n) {
-          const y = (i.value, S), h = i.value ? S === 12 ? v === 0 ? 0 : 12 : S + v * 12 : S, P = `${String(y).padStart(2, "0")}:${String(D).padStart(2, "0")}` + O;
+          const y = (i.value, S), h = i.value ? S === 12 ? v === 0 ? 0 : 12 : S + v * 12 : S, $ = `${String(y).padStart(2, "0")}:${String(D).padStart(2, "0")}` + O;
           s.push({
-            display: P,
+            display: $,
             value: `${String(h).padStart(2, "0")}:${String(D).padStart(2, "0")}`,
             hour: h,
             minute: D
@@ -332,7 +332,7 @@ const hn = { class: "time-picker-container" }, gn = ["aria-selected", "onClick"]
         }, 3);
       });
     }), (d, b) => (k(), _("div", hn, [
-      x("div", {
+      M("div", {
         ref_key: "timeListRef",
         ref: r,
         class: "time-wheel",
@@ -351,7 +351,7 @@ const hn = { class: "time-picker-container" }, gn = ["aria-selected", "onClick"]
       ], 512)
     ]));
   }
-}), yn = { class: "year-view-layout" }, bn = { class: "years-section" }, wn = { class: "years-list" }, kn = ["onClick"], Dn = { class: "months-section" }, xn = { class: "date-picker-table date-picker-months-table" }, Mn = { class: "date-picker-months-body" }, Sn = ["onClick", "disabled"], _n = /* @__PURE__ */ J({
+}), yn = { class: "year-view-layout" }, bn = { class: "years-section" }, wn = { class: "years-list" }, kn = ["onClick"], Dn = { class: "months-section" }, Mn = { class: "date-picker-table date-picker-months-table" }, xn = { class: "date-picker-months-body" }, Sn = ["onClick", "disabled"], _n = /* @__PURE__ */ J({
   __name: "YearView",
   props: {
     currentDate: {},
@@ -379,8 +379,8 @@ const hn = { class: "time-picker-container" }, gn = ["aria-selected", "onClick"]
       o("month-select", d.month);
     };
     return (d, b) => (k(), _("div", yn, [
-      x("div", bn, [
-        x("div", wn, [
+      M("div", bn, [
+        M("div", wn, [
           (k(!0), _(L, null, F(c.value, (g) => (k(), _("button", {
             key: g,
             class: A([
@@ -394,9 +394,9 @@ const hn = { class: "time-picker-container" }, gn = ["aria-selected", "onClick"]
           }, j(g), 11, kn))), 128))
         ])
       ]),
-      x("div", Dn, [
-        x("table", xn, [
-          x("tbody", Mn, [
+      M("div", Dn, [
+        M("table", Mn, [
+          M("tbody", xn, [
             (k(!0), _(L, null, F(a.value, (g, m) => (k(), _("tr", {
               key: m,
               class: "date-picker-months-row"
@@ -405,7 +405,7 @@ const hn = { class: "time-picker-container" }, gn = ["aria-selected", "onClick"]
                 key: s.month,
                 class: "date-picker-month-cell"
               }, [
-                x("button", {
+                M("button", {
                   class: A([
                     "date-picker-month",
                     {
@@ -423,7 +423,7 @@ const hn = { class: "time-picker-container" }, gn = ["aria-selected", "onClick"]
       ])
     ]));
   }
-}), On = { class: "date-picker-content" }, Tn = { class: "date-picker-table date-picker-months-table" }, Pn = { class: "date-picker-months-body" }, $n = ["onClick", "disabled"], Cn = /* @__PURE__ */ J({
+}), On = { class: "date-picker-content" }, Tn = { class: "date-picker-table date-picker-months-table" }, $n = { class: "date-picker-months-body" }, Pn = ["onClick", "disabled"], Cn = /* @__PURE__ */ J({
   __name: "MonthView",
   props: {
     currentDate: {},
@@ -443,8 +443,8 @@ const hn = { class: "time-picker-container" }, gn = ["aria-selected", "onClick"]
       o("select", i.month);
     };
     return (i, a) => (k(), _("div", On, [
-      x("table", Tn, [
-        x("tbody", Pn, [
+      M("table", Tn, [
+        M("tbody", $n, [
           (k(!0), _(L, null, F(l.value, (u, p) => (k(), _("tr", {
             key: p,
             class: "date-picker-months-row"
@@ -453,7 +453,7 @@ const hn = { class: "time-picker-container" }, gn = ["aria-selected", "onClick"]
               key: d.month,
               class: "date-picker-month-cell"
             }, [
-              x("button", {
+              M("button", {
                 class: A([
                   "date-picker-month",
                   {
@@ -463,7 +463,7 @@ const hn = { class: "time-picker-container" }, gn = ["aria-selected", "onClick"]
                 ]),
                 onClick: (b) => c(d),
                 disabled: d.isDisabled
-              }, j(d.name), 11, $n)
+              }, j(d.name), 11, Pn)
             ]))), 128))
           ]))), 128))
         ])
@@ -501,42 +501,42 @@ const hn = { class: "time-picker-container" }, gn = ["aria-selected", "onClick"]
       o("current-date");
     };
     return (u, p) => (k(), _("div", En, [
-      x("button", {
+      M("button", {
         class: "date-picker-title",
         onClick: i,
         type: "button"
       }, j(r.value), 1),
-      x("button", {
+      M("button", {
         class: "date-picker-nav-button ml-auto",
         disabled: !u.canGoPrev,
         onClick: l,
         type: "button",
         "aria-label": "Previous"
       }, [
-        x("span", {
+        M("span", {
           class: "date-picker-nav-icon",
           innerHTML: w(Hn)
         }, null, 8, Fn)
       ], 8, Ln),
-      x("button", {
+      M("button", {
         class: "date-picker-nav-button",
         onClick: a,
         type: "button",
         "aria-label": "Current Date"
       }, [
-        x("span", {
+        M("span", {
           class: "date-picker-nav-icon",
           innerHTML: w(An)
         }, null, 8, jn)
       ]),
-      x("button", {
+      M("button", {
         class: "date-picker-nav-button",
         disabled: !u.canGoNext,
         onClick: c,
         type: "button",
         "aria-label": "Next"
       }, [
-        x("span", {
+        M("span", {
           class: "date-picker-nav-icon",
           innerHTML: w(Yn)
         }, null, 8, Vn)
@@ -549,14 +549,14 @@ function Wn(e, t) {
     if (!e.minDate) return !0;
     const h = ze(e.minDate);
     if (!h) return !0;
-    const M = n.value.getFullYear(), P = n.value.getMonth();
-    return new Date(M, P, 1) > h;
+    const x = n.value.getFullYear(), $ = n.value.getMonth();
+    return new Date(x, $, 1) > h;
   }), c = H(() => {
     if (!e.maxDate) return !0;
     const h = ze(e.maxDate);
     if (!h) return !0;
-    const M = n.value.getFullYear(), P = n.value.getMonth();
-    return new Date(M, P + 1, 0) < h;
+    const x = n.value.getFullYear(), $ = n.value.getMonth();
+    return new Date(x, $ + 1, 0) < h;
   }), i = () => {
     l.value && (n.value = new Date(n.value.getFullYear(), n.value.getMonth() - 1, 1));
   }, a = () => {
@@ -589,14 +589,14 @@ function Wn(e, t) {
   }, O = (h) => {
     n.value = new Date(h, n.value.getMonth(), 1), o.value = "date";
   }, S = (h) => {
-    const M = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3})?Z?$/, P = /^\d{4}-\d{2}-\d{2}$/;
-    return M.test(h) ? h.includes(".") ? "YYYY-MM-DDTHH:mm:ss.sssZ" : "YYYY-MM-DDTHH:mm:ssZ" : P.test(h) ? "YYYY-MM-DD" : e.format || "YYYY-MM-DD";
-  }, D = (h, M) => {
-    const P = S(M);
-    return P.includes("T") ? P.includes(".sss") ? h.toISOString() : h.toISOString().replace(/\.\d{3}Z$/, "Z") : St(h, P);
+    const x = /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}(\.\d{3})?Z?$/, $ = /^\d{4}-\d{2}-\d{2}$/;
+    return x.test(h) ? h.includes(".") ? "YYYY-MM-DDTHH:mm:ss.sssZ" : "YYYY-MM-DDTHH:mm:ssZ" : $.test(h) ? "YYYY-MM-DD" : e.format || "YYYY-MM-DD";
+  }, D = (h, x) => {
+    const $ = S(x);
+    return $.includes("T") ? $.includes(".sss") ? h.toISOString() : h.toISOString().replace(/\.\d{3}Z$/, "Z") : St(h, $);
   }, y = (h) => {
-    let M;
-    typeof e.value == "string" ? M = D(h, e.value) : M = h, t("update:value", M), t("change", M), t("select", M);
+    let x;
+    typeof e.value == "string" ? x = D(h, e.value) : x = h, t("update:value", x), t("change", x), t("select", x);
   };
   return {
     currentDate: n,
@@ -656,39 +656,39 @@ const Rn = { class: "date-picker" }, Bn = {
       onWeekSelect: D,
       onMonthSelect: y,
       onYearSelect: h,
-      emitValue: M
-    } = Wn(n, o), P = (T) => {
+      emitValue: x
+    } = Wn(n, o), $ = (T) => {
       if (n.mode === "dateTime" && a.value) {
-        const $ = new Date(a.value.getTime());
-        $.setHours(T.getHours(), T.getMinutes(), 0, 0), M($);
+        const P = new Date(a.value.getTime());
+        P.setHours(T.getHours(), T.getMinutes(), 0, 0), x(P);
       } else
-        M(T);
+        x(T);
     };
     return Ie(async () => {
       K(() => {
         r.value && (l.value = r.value.clientHeight);
       });
-    }), (T, $) => (k(), _("div", Rn, [
+    }), (T, P) => (k(), _("div", Rn, [
       T.mode !== "time" ? (k(), ie(In, {
         key: 0,
         "current-date": w(c),
         "view-mode": w(i),
         "can-go-prev": w(u),
         "can-go-next": w(p),
-        onPrev: $[0] || ($[0] = (Y) => w(i) === "year" ? w(s)() : w(i) === "month" ? w(g)() : w(d)()),
-        onNext: $[1] || ($[1] = (Y) => w(i) === "year" ? w(f)() : w(i) === "month" ? w(m)() : w(b)()),
+        onPrev: P[0] || (P[0] = (Y) => w(i) === "year" ? w(s)() : w(i) === "month" ? w(g)() : w(d)()),
+        onNext: P[1] || (P[1] = (Y) => w(i) === "year" ? w(f)() : w(i) === "month" ? w(m)() : w(b)()),
         onHeaderClick: w(O),
         onCurrentDate: w(v)
       }, null, 8, ["current-date", "view-mode", "can-go-prev", "can-go-next", "onHeaderClick", "onCurrentDate"])) : U("", !0),
-      x("div", {
+      M("div", {
         class: A({
           "date-picker-datetime-layout": T.mode === "dateTime" && w(i) === "date"
         }),
-        style: Mt({
+        style: xt({
           height: l.value !== 0 ? l.value + "px" : "100%"
         })
       }, [
-        x("div", {
+        M("div", {
           class: "date-picker-date-section",
           ref_key: "datePickerContent",
           ref: r
@@ -727,7 +727,7 @@ const Rn = { class: "date-picker" }, Bn = {
             "selected-time": w(a),
             "time-format": T.timeFormat,
             "time-interval": T.timeInterval,
-            onUpdate: P
+            onUpdate: $
           }, null, 8, ["selected-time", "time-format", "time-interval"])
         ])) : U("", !0)
       ], 6),
@@ -736,7 +736,7 @@ const Rn = { class: "date-picker" }, Bn = {
         "selected-time": w(a),
         "time-format": T.timeFormat,
         "time-interval": T.timeInterval,
-        onUpdate: P
+        onUpdate: $
       }, null, 8, ["selected-time", "time-format", "time-interval"])) : U("", !0)
     ]));
   }
@@ -778,9 +778,9 @@ const Rn = { class: "date-picker" }, Bn = {
       ref: l,
       class: "time-picker-dropdown"
     }, [
-      x("div", qn, [
-        x("div", zn, [
-          x("div", {
+      M("div", qn, [
+        M("div", zn, [
+          M("div", {
             ref_key: "hourScroll",
             ref: c,
             class: "time-picker-options-scroll"
@@ -793,8 +793,8 @@ const Rn = { class: "date-picker" }, Bn = {
             }, j(String(v).padStart(2, "0")), 11, Gn))), 128))
           ], 512)
         ]),
-        x("div", Un, [
-          x("div", {
+        M("div", Un, [
+          M("div", {
             ref_key: "minuteScroll",
             ref: i,
             class: "time-picker-options-scroll"
@@ -808,17 +808,17 @@ const Rn = { class: "date-picker" }, Bn = {
           ], 512)
         ]),
         s.is12Hour ? (k(), _("div", Zn, [
-          x("div", {
+          M("div", {
             ref_key: "periodScroll",
             ref: a,
             class: "time-picker-options-scroll"
           }, [
-            x("button", {
+            M("button", {
               type: "button",
               class: A(["time-picker-option-button", { selected: s.selectedPeriod === "AM" }]),
               onClick: f[0] || (f[0] = (v) => m("AM"))
             }, " AM ", 2),
-            x("button", {
+            M("button", {
               type: "button",
               class: A(["time-picker-option-button", { selected: s.selectedPeriod === "PM" }]),
               onClick: f[1] || (f[1] = (v) => m("PM"))
@@ -847,12 +847,12 @@ const Rn = { class: "date-picker" }, Bn = {
         return `${String(t.hour).padStart(2, "0")}:${o}`;
     });
     return (o, r) => Fe(o.$slots, "default", je(Ne({ displayTime: n.value })), () => [
-      x("button", {
+      M("button", {
         type: "button",
         class: A(["time-picker-input", o.triggerClass])
       }, [
-        x("span", Xn, j(n.value), 1),
-        r[0] || (r[0] = x("svg", {
+        M("span", Xn, j(n.value), 1),
+        r[0] || (r[0] = M("svg", {
           class: "time-picker-clock-icon",
           xmlns: "http://www.w3.org/2000/svg",
           width: "18",
@@ -864,23 +864,23 @@ const Rn = { class: "date-picker" }, Bn = {
           "stroke-linecap": "round",
           "stroke-linejoin": "round"
         }, [
-          x("circle", {
+          M("circle", {
             cx: "12",
             cy: "12",
             r: "10"
           }),
-          x("polyline", { points: "12,6 12,12 16,14" })
+          M("polyline", { points: "12,6 12,12 16,14" })
         ], -1))
       ], 2)
     ]);
   }
 }), fe = () => {
 };
-function Pt(e) {
+function $t(e) {
   return typeof e == "function" ? e() : e && typeof e == "object" && "value" in e ? e.value : e;
 }
 function He(e) {
-  return Pt(e);
+  return $t(e);
 }
 const er = typeof window > "u" || !window.navigator ? !1 : /iP(?:ad|hone|od)/.test(window.navigator.userAgent) || window.navigator.maxTouchPoints > 2 && /iPad|Macintosh/.test(window.navigator.userAgent);
 function Ge(e, t, n, o) {
@@ -897,7 +897,7 @@ function tr(e, t, n = {}) {
     Array.from(o.document.body.children).forEach((s) => s.addEventListener("click", fe, m)), o.document.documentElement.addEventListener("click", fe, m);
   }
   let a = !0;
-  const u = (m) => Pt(r).some((s) => {
+  const u = (m) => $t(r).some((s) => {
     if (typeof s == "string")
       return Array.from(o.document.querySelectorAll(s)).some((f) => f === m.target || m.composedPath().includes(f));
     {
@@ -945,10 +945,10 @@ function tr(e, t, n = {}) {
     }
   } : g;
 }
-var N = "top", B = "bottom", q = "right", V = "left", Ze = "auto", Se = [N, B, q, V], pe = "start", xe = "end", nr = "clippingParents", $t = "viewport", be = "popper", rr = "reference", vt = /* @__PURE__ */ Se.reduce(function(e, t) {
-  return e.concat([t + "-" + pe, t + "-" + xe]);
+var N = "top", B = "bottom", q = "right", V = "left", Ze = "auto", Se = [N, B, q, V], pe = "start", Me = "end", nr = "clippingParents", Pt = "viewport", be = "popper", rr = "reference", vt = /* @__PURE__ */ Se.reduce(function(e, t) {
+  return e.concat([t + "-" + pe, t + "-" + Me]);
 }, []), Ct = /* @__PURE__ */ [].concat(Se, [Ze]).reduce(function(e, t) {
-  return e.concat([t, t + "-" + pe, t + "-" + xe]);
+  return e.concat([t, t + "-" + pe, t + "-" + Me]);
 }, []), or = "beforeRead", ar = "read", sr = "afterRead", ir = "beforeMain", lr = "main", cr = "afterMain", ur = "beforeWrite", dr = "write", fr = "afterWrite", pr = [or, ar, sr, ir, lr, cr, ur, dr, fr];
 function Q(e) {
   return e ? (e.nodeName || "").toLowerCase() : null;
@@ -1153,15 +1153,15 @@ var wr = function(e, t) {
 function kr(e) {
   var t, n = e.state, o = e.name, r = e.options, l = n.elements.arrow, c = n.modifiersData.popperOffsets, i = Z(n.placement), a = Ke(i), u = [V, q].indexOf(i) >= 0, p = u ? "height" : "width";
   if (!(!l || !c)) {
-    var d = wr(r.padding, n), b = Xe(l), g = a === "y" ? N : V, m = a === "y" ? B : q, s = n.rects.reference[p] + n.rects.reference[a] - c[a] - n.rects.popper[p], f = c[a] - n.rects.reference[a], v = _e(l), O = v ? a === "y" ? v.clientHeight || 0 : v.clientWidth || 0 : 0, S = s / 2 - f / 2, D = d[g], y = O - b[p] - d[m], h = O / 2 - b[p] / 2 + S, M = ke(D, h, y), P = a;
-    n.modifiersData[o] = (t = {}, t[P] = M, t.centerOffset = M - h, t);
+    var d = wr(r.padding, n), b = Xe(l), g = a === "y" ? N : V, m = a === "y" ? B : q, s = n.rects.reference[p] + n.rects.reference[a] - c[a] - n.rects.popper[p], f = c[a] - n.rects.reference[a], v = _e(l), O = v ? a === "y" ? v.clientHeight || 0 : v.clientWidth || 0 : 0, S = s / 2 - f / 2, D = d[g], y = O - b[p] - d[m], h = O / 2 - b[p] / 2 + S, x = ke(D, h, y), $ = a;
+    n.modifiersData[o] = (t = {}, t[$] = x, t.centerOffset = x - h, t);
   }
 }
 function Dr(e) {
   var t = e.state, n = e.options, o = n.element, r = o === void 0 ? "[data-popper-arrow]" : o;
   r != null && (typeof r == "string" && (r = t.elements.popper.querySelector(r), !r) || Yt(t.elements.popper, r) && (t.elements.arrow = r));
 }
-const xr = {
+const Mr = {
   name: "arrow",
   enabled: !0,
   phase: "main",
@@ -1173,7 +1173,7 @@ const xr = {
 function he(e) {
   return e.split("-")[1];
 }
-var Mr = {
+var xr = {
   top: "auto",
   right: "auto",
   bottom: "auto",
@@ -1197,27 +1197,27 @@ function gt(e) {
   g = f.x, s = f.y;
   var v = c.hasOwnProperty("x"), O = c.hasOwnProperty("y"), S = V, D = N, y = window;
   if (u) {
-    var h = _e(n), M = "clientHeight", P = "clientWidth";
-    if (h === W(n) && (h = te(n), ee(h).position !== "static" && i === "absolute" && (M = "scrollHeight", P = "scrollWidth")), h = h, r === N || (r === V || r === q) && l === xe) {
+    var h = _e(n), x = "clientHeight", $ = "clientWidth";
+    if (h === W(n) && (h = te(n), ee(h).position !== "static" && i === "absolute" && (x = "scrollHeight", $ = "scrollWidth")), h = h, r === N || (r === V || r === q) && l === Me) {
       D = B;
       var T = d && h === y && y.visualViewport ? y.visualViewport.height : (
         // $FlowFixMe[prop-missing]
-        h[M]
+        h[x]
       );
       s -= T - o.height, s *= a ? 1 : -1;
     }
-    if (r === V || (r === N || r === B) && l === xe) {
+    if (r === V || (r === N || r === B) && l === Me) {
       S = q;
-      var $ = d && h === y && y.visualViewport ? y.visualViewport.width : (
+      var P = d && h === y && y.visualViewport ? y.visualViewport.width : (
         // $FlowFixMe[prop-missing]
-        h[P]
+        h[$]
       );
-      g -= $ - o.width, g *= a ? 1 : -1;
+      g -= P - o.width, g *= a ? 1 : -1;
     }
   }
   var Y = Object.assign({
     position: i
-  }, u && Mr), z = p === !0 ? Sr({
+  }, u && xr), z = p === !0 ? Sr({
     x: g,
     y: s
   }, W(n)) : {
@@ -1273,7 +1273,7 @@ function Tr(e) {
     }), i && a.removeEventListener("resize", n.update, Ye);
   };
 }
-const Pr = {
+const $r = {
   name: "eventListeners",
   enabled: !0,
   phase: "write",
@@ -1282,7 +1282,7 @@ const Pr = {
   effect: Tr,
   data: {}
 };
-var $r = {
+var Pr = {
   left: "right",
   right: "left",
   bottom: "top",
@@ -1290,7 +1290,7 @@ var $r = {
 };
 function Le(e) {
   return e.replace(/left|right|bottom|top/g, function(t) {
-    return $r[t];
+    return Pr[t];
   });
 }
 var Cr = {
@@ -1364,7 +1364,7 @@ function Ar(e, t) {
   return n.top = n.top + e.clientTop, n.left = n.left + e.clientLeft, n.bottom = n.top + e.clientHeight, n.right = n.left + e.clientWidth, n.width = e.clientWidth, n.height = e.clientHeight, n.x = n.left, n.y = n.top, n;
 }
 function bt(e, t, n) {
-  return t === $t ? Je(Hr(e, n)) : ue(t) ? Ar(t, n) : Je(Yr(te(e)));
+  return t === Pt ? Je(Hr(e, n)) : ue(t) ? Ar(t, n) : Je(Yr(te(e)));
 }
 function Er(e) {
   var t = De(We(e)), n = ["absolute", "fixed"].indexOf(ee(e).position) >= 0, o = n && R(e) ? _e(e) : e;
@@ -1419,20 +1419,20 @@ function jt(e) {
       case pe:
         a[u] = a[u] - (t[p] / 2 - n[p] / 2);
         break;
-      case xe:
+      case Me:
         a[u] = a[u] + (t[p] / 2 - n[p] / 2);
         break;
     }
   }
   return a;
 }
-function Me(e, t) {
+function xe(e, t) {
   t === void 0 && (t = {});
-  var n = t, o = n.placement, r = o === void 0 ? e.placement : o, l = n.strategy, c = l === void 0 ? e.strategy : l, i = n.boundary, a = i === void 0 ? nr : i, u = n.rootBoundary, p = u === void 0 ? $t : u, d = n.elementContext, b = d === void 0 ? be : d, g = n.altBoundary, m = g === void 0 ? !1 : g, s = n.padding, f = s === void 0 ? 0 : s, v = Et(typeof f != "number" ? f : Lt(f, Se)), O = b === be ? rr : be, S = e.rects.popper, D = e.elements[m ? O : b], y = Lr(ue(D) ? D : D.contextElement || te(e.elements.popper), a, p, c), h = ve(e.elements.reference), M = jt({
+  var n = t, o = n.placement, r = o === void 0 ? e.placement : o, l = n.strategy, c = l === void 0 ? e.strategy : l, i = n.boundary, a = i === void 0 ? nr : i, u = n.rootBoundary, p = u === void 0 ? Pt : u, d = n.elementContext, b = d === void 0 ? be : d, g = n.altBoundary, m = g === void 0 ? !1 : g, s = n.padding, f = s === void 0 ? 0 : s, v = Et(typeof f != "number" ? f : Lt(f, Se)), O = b === be ? rr : be, S = e.rects.popper, D = e.elements[m ? O : b], y = Lr(ue(D) ? D : D.contextElement || te(e.elements.popper), a, p, c), h = ve(e.elements.reference), x = jt({
     reference: h,
     element: S,
     placement: r
-  }), P = Je(Object.assign({}, S, M)), T = b === be ? P : h, $ = {
+  }), $ = Je(Object.assign({}, S, x)), T = b === be ? $ : h, P = {
     top: y.top - T.top + v.top,
     bottom: T.bottom - y.bottom + v.bottom,
     left: y.left - T.left + v.left,
@@ -1440,12 +1440,12 @@ function Me(e, t) {
   }, Y = e.modifiersData.offset;
   if (b === be && Y) {
     var z = Y[r];
-    Object.keys($).forEach(function(E) {
+    Object.keys(P).forEach(function(E) {
       var ne = [q, B].indexOf(E) >= 0 ? 1 : -1, re = [N, B].indexOf(E) >= 0 ? "y" : "x";
-      $[E] += z[re] * ne;
+      P[E] += z[re] * ne;
     });
   }
-  return $;
+  return P;
 }
 function Fr(e, t) {
   t === void 0 && (t = {});
@@ -1456,7 +1456,7 @@ function Fr(e, t) {
   });
   b.length === 0 && (b = d);
   var g = b.reduce(function(m, s) {
-    return m[s] = Me(e, {
+    return m[s] = xe(e, {
       placement: s,
       boundary: r,
       rootBoundary: l,
@@ -1485,8 +1485,8 @@ function Nr(e) {
         flipVariations: m,
         allowedAutoPlacements: s
       }) : X);
-    }, []), y = t.rects.reference, h = t.rects.popper, M = /* @__PURE__ */ new Map(), P = !0, T = D[0], $ = 0; $ < D.length; $++) {
-      var Y = D[$], z = Z(Y), E = he(Y) === pe, ne = [N, B].indexOf(z) >= 0, re = ne ? "width" : "height", I = Me(t, {
+    }, []), y = t.rects.reference, h = t.rects.popper, x = /* @__PURE__ */ new Map(), $ = !0, T = D[0], P = 0; P < D.length; P++) {
+      var Y = D[P], z = Z(Y), E = he(Y) === pe, ne = [N, B].indexOf(z) >= 0, re = ne ? "width" : "height", I = xe(t, {
         placement: Y,
         boundary: p,
         rootBoundary: d,
@@ -1498,15 +1498,15 @@ function Nr(e) {
       if (l && oe.push(I[z] <= 0), i && oe.push(I[G] <= 0, I[Oe] <= 0), oe.every(function(ae) {
         return ae;
       })) {
-        T = Y, P = !1;
+        T = Y, $ = !1;
         break;
       }
-      M.set(Y, oe);
+      x.set(Y, oe);
     }
-    if (P)
+    if ($)
       for (var Te = m ? 3 : 1, Re = function(ae) {
-        var X = D.find(function($e) {
-          var ye = M.get($e);
+        var X = D.find(function(Pe) {
+          var ye = x.get(Pe);
           if (ye)
             return ye.slice(0, ae).every(function(de) {
               return de;
@@ -1515,8 +1515,8 @@ function Nr(e) {
         if (X)
           return T = X, "break";
       }, ge = Te; ge > 0; ge--) {
-        var Pe = Re(ge);
-        if (Pe === "break") break;
+        var $e = Re(ge);
+        if ($e === "break") break;
       }
     t.placement !== T && (t.modifiersData[o]._skip = !0, t.placement = T, t.reset = !0);
   }
@@ -1548,9 +1548,9 @@ function kt(e) {
   });
 }
 function Ir(e) {
-  var t = e.state, n = e.name, o = t.rects.reference, r = t.rects.popper, l = t.modifiersData.preventOverflow, c = Me(t, {
+  var t = e.state, n = e.name, o = t.rects.reference, r = t.rects.popper, l = t.modifiersData.preventOverflow, c = xe(t, {
     elementContext: "reference"
-  }), i = Me(t, {
+  }), i = xe(t, {
     altBoundary: !0
   }), a = wt(c, o), u = wt(i, r, l), p = kt(a), d = kt(u);
   t.modifiersData[n] = {
@@ -1614,14 +1614,14 @@ function Ur(e) {
   return e === "x" ? "y" : "x";
 }
 function Jr(e) {
-  var t = e.state, n = e.options, o = e.name, r = n.mainAxis, l = r === void 0 ? !0 : r, c = n.altAxis, i = c === void 0 ? !1 : c, a = n.boundary, u = n.rootBoundary, p = n.altBoundary, d = n.padding, b = n.tether, g = b === void 0 ? !0 : b, m = n.tetherOffset, s = m === void 0 ? 0 : m, f = Me(t, {
+  var t = e.state, n = e.options, o = e.name, r = n.mainAxis, l = r === void 0 ? !0 : r, c = n.altAxis, i = c === void 0 ? !1 : c, a = n.boundary, u = n.rootBoundary, p = n.altBoundary, d = n.padding, b = n.tether, g = b === void 0 ? !0 : b, m = n.tetherOffset, s = m === void 0 ? 0 : m, f = xe(t, {
     boundary: a,
     rootBoundary: u,
     padding: d,
     altBoundary: p
-  }), v = Z(t.placement), O = he(t.placement), S = !O, D = Ke(v), y = Ur(D), h = t.modifiersData.popperOffsets, M = t.rects.reference, P = t.rects.popper, T = typeof s == "function" ? s(Object.assign({}, t.rects, {
+  }), v = Z(t.placement), O = he(t.placement), S = !O, D = Ke(v), y = Ur(D), h = t.modifiersData.popperOffsets, x = t.rects.reference, $ = t.rects.popper, T = typeof s == "function" ? s(Object.assign({}, t.rects, {
     placement: t.placement
-  })) : s, $ = typeof T == "number" ? {
+  })) : s, P = typeof T == "number" ? {
     mainAxis: T,
     altAxis: T
   } : Object.assign({
@@ -1633,14 +1633,14 @@ function Jr(e) {
   };
   if (h) {
     if (l) {
-      var E, ne = D === "y" ? N : V, re = D === "y" ? B : q, I = D === "y" ? "height" : "width", G = h[D], Oe = G + f[ne], oe = G - f[re], Te = g ? -P[I] / 2 : 0, Re = O === pe ? M[I] : P[I], ge = O === pe ? -P[I] : -M[I], Pe = t.elements.arrow, ae = g && Pe ? Xe(Pe) : {
+      var E, ne = D === "y" ? N : V, re = D === "y" ? B : q, I = D === "y" ? "height" : "width", G = h[D], Oe = G + f[ne], oe = G - f[re], Te = g ? -$[I] / 2 : 0, Re = O === pe ? x[I] : $[I], ge = O === pe ? -$[I] : -x[I], $e = t.elements.arrow, ae = g && $e ? Xe($e) : {
         width: 0,
         height: 0
-      }, X = t.modifiersData["arrow#persistent"] ? t.modifiersData["arrow#persistent"].padding : At(), $e = X[ne], ye = X[re], de = ke(0, M[I], ae[I]), Nt = S ? M[I] / 2 - Te - de - $e - $.mainAxis : Re - de - $e - $.mainAxis, Vt = S ? -M[I] / 2 + Te + de + ye + $.mainAxis : ge + de + ye + $.mainAxis, Be = t.elements.arrow && _e(t.elements.arrow), It = Be ? D === "y" ? Be.clientTop || 0 : Be.clientLeft || 0 : 0, rt = (E = Y == null ? void 0 : Y[D]) != null ? E : 0, Wt = G + Nt - rt - It, Rt = G + Vt - rt, ot = ke(g ? Ve(Oe, Wt) : Oe, G, g ? ce(oe, Rt) : oe);
+      }, X = t.modifiersData["arrow#persistent"] ? t.modifiersData["arrow#persistent"].padding : At(), Pe = X[ne], ye = X[re], de = ke(0, x[I], ae[I]), Nt = S ? x[I] / 2 - Te - de - Pe - P.mainAxis : Re - de - Pe - P.mainAxis, Vt = S ? -x[I] / 2 + Te + de + ye + P.mainAxis : ge + de + ye + P.mainAxis, Be = t.elements.arrow && _e(t.elements.arrow), It = Be ? D === "y" ? Be.clientTop || 0 : Be.clientLeft || 0 : 0, rt = (E = Y == null ? void 0 : Y[D]) != null ? E : 0, Wt = G + Nt - rt - It, Rt = G + Vt - rt, ot = ke(g ? Ve(Oe, Wt) : Oe, G, g ? ce(oe, Rt) : oe);
       h[D] = ot, z[D] = ot - G;
     }
     if (i) {
-      var at, Bt = D === "x" ? N : V, qt = D === "x" ? B : q, se = h[y], Ce = y === "y" ? "height" : "width", st = se + f[Bt], it = se - f[qt], qe = [N, V].indexOf(v) !== -1, lt = (at = Y == null ? void 0 : Y[y]) != null ? at : 0, ct = qe ? st : se - M[Ce] - P[Ce] - lt + $.altAxis, ut = qe ? se + M[Ce] + P[Ce] - lt - $.altAxis : it, dt = g && qe ? br(ct, se, ut) : ke(g ? ct : st, se, g ? ut : it);
+      var at, Bt = D === "x" ? N : V, qt = D === "x" ? B : q, se = h[y], Ce = y === "y" ? "height" : "width", st = se + f[Bt], it = se - f[qt], qe = [N, V].indexOf(v) !== -1, lt = (at = Y == null ? void 0 : Y[y]) != null ? at : 0, ct = qe ? st : se - x[Ce] - $[Ce] - lt + P.altAxis, ut = qe ? se + x[Ce] + $[Ce] - lt - P.altAxis : it, dt = g && qe ? br(ct, se, ut) : ke(g ? ct : st, se, g ? ut : it);
       h[y] = dt, z[y] = dt - se;
     }
     t.modifiersData[o] = z;
@@ -1737,7 +1737,7 @@ var Dt = {
   modifiers: [],
   strategy: "absolute"
 };
-function xt() {
+function Mt() {
   for (var e = arguments.length, t = new Array(e), n = 0; n < e; n++)
     t[n] = arguments[n];
   return !t.some(function(o) {
@@ -1781,23 +1781,23 @@ function ao(e) {
       forceUpdate: function() {
         if (!d) {
           var s = u.elements, f = s.reference, v = s.popper;
-          if (xt(f, v)) {
+          if (Mt(f, v)) {
             u.rects = {
               reference: eo(f, _e(v), u.options.strategy === "fixed"),
               popper: Xe(v)
-            }, u.reset = !1, u.placement = u.options.placement, u.orderedModifiers.forEach(function(P) {
-              return u.modifiersData[P.name] = Object.assign({}, P.data);
+            }, u.reset = !1, u.placement = u.options.placement, u.orderedModifiers.forEach(function($) {
+              return u.modifiersData[$.name] = Object.assign({}, $.data);
             });
             for (var O = 0; O < u.orderedModifiers.length; O++) {
               if (u.reset === !0) {
                 u.reset = !1, O = -1;
                 continue;
               }
-              var S = u.orderedModifiers[O], D = S.fn, y = S.options, h = y === void 0 ? {} : y, M = S.name;
+              var S = u.orderedModifiers[O], D = S.fn, y = S.options, h = y === void 0 ? {} : y, x = S.name;
               typeof D == "function" && (u = D({
                 state: u,
                 options: h,
-                name: M,
+                name: x,
                 instance: b
               }) || u);
             }
@@ -1815,7 +1815,7 @@ function ao(e) {
         m(), d = !0;
       }
     };
-    if (!xt(c, i))
+    if (!Mt(c, i))
       return b;
     b.setOptions(a).then(function(s) {
       !d && a.onFirstUpdate && a.onFirstUpdate(s);
@@ -1843,7 +1843,7 @@ function ao(e) {
     return b;
   };
 }
-var so = [Pr, Gr, Or, hr, qr, Vr, Zr, xr, Wr], io = /* @__PURE__ */ ao({
+var so = [$r, Gr, Or, hr, qr, Vr, Zr, Mr, Wr], io = /* @__PURE__ */ ao({
   defaultModifiers: so
 });
 function lo(e, t = [0, 8], n, o = {}) {
@@ -1925,16 +1925,16 @@ function lo(e, t = [0, 8], n, o = {}) {
     n === "hover" && m();
   }, D = (y) => !o.ignoreClickOutside || o.ignoreClickOutside.length === 0 ? !1 : o.ignoreClickOutside.some((h) => h.startsWith("#") ? y.id === h.substring(1) || y.closest(h) !== null : h.startsWith(".") ? y.classList.contains(h.substring(1)) || y.closest(h) !== null : y.matches(h) || y.closest(h) !== null);
   return Ie(async () => {
-    var y, h, M;
-    await K(), n === "click" && ((y = r.value) == null || y.addEventListener("click", s)), n === "hover" && ((h = r.value) == null || h.addEventListener("mouseenter", O), (M = r.value) == null || M.addEventListener("mouseleave", S)), tr(l, (P) => {
+    var y, h, x;
+    await K(), n === "click" && ((y = r.value) == null || y.addEventListener("click", s)), n === "hover" && ((h = r.value) == null || h.addEventListener("mouseenter", O), (x = r.value) == null || x.addEventListener("mouseleave", S)), tr(l, ($) => {
       if (a.value && n === "click") {
-        const T = P.target;
+        const T = $.target;
         D(T) || m();
       }
     });
   }), Zt(() => {
-    var y, h, M;
-    v(), n === "click" && ((y = r.value) == null || y.removeEventListener("click", s)), n === "hover" && ((h = r.value) == null || h.removeEventListener("mouseenter", O), (M = r.value) == null || M.removeEventListener("mouseleave", S));
+    var y, h, x;
+    v(), n === "click" && ((y = r.value) == null || y.removeEventListener("click", s)), n === "hover" && ((h = r.value) == null || h.removeEventListener("mouseenter", O), (x = r.value) == null || x.removeEventListener("mouseleave", S));
   }), le(
     () => e,
     () => {
@@ -1988,7 +1988,7 @@ const co = { class: "tooltip-wrapper" }, uo = /* @__PURE__ */ J({
     }), zt(() => {
       a();
     }), (d, b) => (k(), _("div", co, [
-      x("span", {
+      M("span", {
         ref_key: "triggerRef",
         ref: r,
         class: A(["tooltip-trigger", d.triggerClass])
@@ -2002,14 +2002,14 @@ const co = { class: "tooltip-wrapper" }, uo = /* @__PURE__ */ J({
         default: Ee(() => [
           w(u) ? (k(), _("div", {
             key: 0,
-            style: Mt(d.styles),
+            style: xt(d.styles),
             ref_key: "containerRef",
             ref: l,
             class: A(["tooltip-container tooltip-container--open", d.className]),
             role: "tooltip",
             "aria-hidden": "true"
           }, [
-            x("div", {
+            M("div", {
               class: A(["tooltip-content", d.contentClass])
             }, [
               Fe(d.$slots, "default", je(Ne({ isOpen: w(u) })), () => [
@@ -2026,14 +2026,17 @@ const co = { class: "tooltip-wrapper" }, uo = /* @__PURE__ */ J({
       })) : U("", !0)
     ]));
   }
-}), fo = { class: "v-time-picker" }, vo = /* @__PURE__ */ J({
+}), fo = { style: {
+  width: "100%"
+} }, vo = /* @__PURE__ */ J({
   __name: "TimePicker",
   props: {
     modelValue: { default: null },
     timeFormat: { default: "12h" },
     triggerClass: {},
     style: {},
-    className: {}
+    className: {},
+    offset: { default: () => [0, 10] }
   },
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
@@ -2066,8 +2069,13 @@ const co = { class: "tooltip-wrapper" }, uo = /* @__PURE__ */ J({
         placement: "bottom-start",
         onOnShow: m,
         teleport: "",
-        "class-name": s.className,
-        styles: s.style
+        offset: s.offset,
+        triggerClass: "w-full",
+        "class-name": `v-time-picker ${s.className}`,
+        styles: s.style,
+        style: {
+          width: "100%"
+        }
       }, {
         trigger: Ee(() => [
           Ae(Kn, {
@@ -2097,7 +2105,7 @@ const co = { class: "tooltip-wrapper" }, uo = /* @__PURE__ */ J({
           }, null, 8, ["selected-hour", "selected-minute", "selected-period", "is12-hour"])
         ]),
         _: 3
-      }, 8, ["class-name", "styles"])
+      }, 8, ["offset", "class-name", "styles"])
     ]));
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "v-datepicker-lite",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "description": "A lightweight Vue 3 date picker with date, time, date-time, week, and month modes",
   "type": "module",
   "author": "safdar-azeem",

package/style.css

@@ -1 +1 @@
-:root{--date-picker-primary: #2d66ed;--date-picker-primary-fg: #ffffff;--date-picker-text: inherit;--date-picker-border: #00000020;--date-picker-secondary: #00000010;--date-picker-hover: #00000010;--date-picker-disabled: #000000b4;--date-picker-today: #00000010;--date-picker-radius: .375em;--timer-picker-bg: white;--timer-picker-input-bg: white;--timer-picker-input-border: #00000020;--timer-picker-input-text: inherit;--timer-picker-input-text-size: .875em;--timer-picker-input-border-radius: .375em;--timer-picker-input-padding: .5em .75em}.ml-auto{margin-left:auto}.date-picker{position:relative;display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;color:var(--date-picker-text)}.date-picker-content{padding:0 .5em .5em}.date-picker-table{width:100%;border-collapse:collapse;border-spacing:0;margin:0}.date-picker-table:not(.date-picker-week-table) .date-picker-day-cell{padding:.13em}td,th{padding:0;margin:0;border:none}.date-picker-weekdays-row th{padding:.6em 0;font-size:.78em}.date-picker-weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:500;opacity:.5;padding:.25em}.date-picker-days-body tr{border:none}.date-picker-day{display:flex;align-items:center;justify-content:center;width:100%;height:2em;border:none;background:none;border-radius:var(--date-picker-radius);cursor:pointer;font-size:.95em;color:var(--date-picker-text)}.date-picker-day:hover{background:var(--date-picker-hover)}.date-picker-day.other-month{opacity:.4}.date-picker-day.today{background:var(--date-picker-today);font-weight:400}.date-picker-day.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.date-picker-day.disabled{cursor:not-allowed;opacity:.5}.date-picker-day.disabled:hover{background:none}.date-picker-datetime-layout{display:flex;gap:.65em;width:100%}.date-picker-date-section{flex:1;height:100%}.date-picker-datetime-layout .date-picker-date-section{width:75%}.date-picker-time-section{width:100%;max-width:74px;border-left:1px solid var(--date-picker-border);display:flex;flex-direction:column}.date-picker-time-section .time-picker-container{flex:1;overflow-y:auto}.date-picker-week-table .date-picker-week-row{cursor:pointer}.date-picker-week-table .date-picker-week-row:not(.selected):hover td{background:var(--date-picker-hover)}.date-picker-week-table td{border-radius:0;padding:0}.date-picker-week-table .date-picker-day-cell .date-picker-day{border-radius:0}.date-picker-week-header{text-align:center}.date-picker-week-row .date-picker-week-number-cell{height:90%;padding-right:5px;background:var(--date-picker-secondary);opacity:.7;border-bottom:1px solid var(--date-picker-border);text-align:center;width:2.5em;font-size:.8em}.date-picker-week-row:last-child .date-picker-week-number-cell{border-bottom:none}.date-picker-week-row.selected .date-picker-day{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.date-picker-months-table{width:100%}.date-picker-months-body .date-picker-month-cell{padding:2px}.date-picker-month{display:flex;align-items:center;justify-content:center;width:100%;height:2.5em;border:none;background:none;border-radius:var(--date-picker-radius);cursor:pointer;font-size:inherit;color:var(--date-picker-text)}.date-picker-month:hover{background:var(--date-picker-hover)}.date-picker-month.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.year-view-layout{display:flex;gap:1px;height:100%;padding-right:2px}.years-section{width:25%;min-width:60px;max-width:80px;border-right:1px solid var(--date-picker-border);display:flex;flex-direction:column;height:100%}.years-list{display:flex;flex-direction:column;flex:1;overflow-y:auto;overflow-x:hidden}.year-item{display:flex;align-items:center;justify-content:center;padding:.5em;border:none;background:none;cursor:pointer;font-size:.875em;color:var(--date-picker-text);transition:background-color .15s ease;white-space:nowrap;flex-shrink:0}.year-item:hover{background:var(--date-picker-hover)}.year-item.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.year-item.current{font-weight:600}.months-section{width:75%;display:flex;flex-direction:column;height:100%}.months-section .date-picker-months-table{overflow:auto;flex:1}.year-view-layout .months-section{padding:5px 3px;height:94.5%}.time-picker-container{height:100%;display:flex;flex-direction:column}.time-wheel{height:100%;overflow-y:auto;display:flex;flex-direction:column;border:1px solid var(--date-picker-border);border-radius:var(--date-picker-radius)}.time-option{height:30px;display:flex;align-items:center;justify-content:center;width:100%;cursor:pointer;font-size:.875em;color:var(--date-picker-text);flex-shrink:0}.time-option:hover{background:var(--date-picker-hover)}.time-option.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg);font-weight:500}.date-picker-time-section .time-wheel{border:none;border-radius:0;height:100%;max-height:none}.date-picker-header{display:flex;align-items:center;justify-content:space-between;padding:.45em .4em;gap:.2em;border-bottom:1px solid var(--date-picker-border)}.date-picker-nav-button{display:flex;align-items:center;justify-content:center;width:1.65em;height:1.65em;border:none;background:none;border-radius:var(--date-picker-radius);cursor:pointer;transition:background-color .15s ease;opacity:.7}.date-picker-nav-button:hover:not(:disabled){background:var(--date-picker-hover)}.date-picker-nav-button:disabled{opacity:.5;cursor:not-allowed}.date-picker-nav-icon,.date-picker-header *{color:inherit!important}.date-picker-nav-icon svg{width:1.3em;height:1.3em;color:inherit!important;fill:currentColor!important}.date-picker-title{font-weight:600;font-size:1em;cursor:pointer;padding:.25em .5em;border-radius:var(--date-picker-radius);transition:background-color .15s ease;border:none;background:none;color:inherit}.date-picker-title:hover{background:var(--date-picker-hover)}.date-picker svg{display:flex;color:inherit}.date-picker *::-webkit-scrollbar{height:3px;width:3px}.date-picker *::-webkit-scrollbar-track{border-radius:5px;background-color:transparent}.date-picker *::-webkit-scrollbar-track:hover{background-color:transparent}.date-picker *::-webkit-scrollbar-track:active{background-color:transparent}.date-picker *::-webkit-scrollbar-thumb{border-radius:2px;background-color:var(--date-picker-border)}.date-picker *::-webkit-scrollbar-thumb:hover{background-color:var(--date-picker-border)}.date-picker *::-webkit-scrollbar-thumb:active{background-color:var(--date-picker-border)}.time-picker-dropdown{background:var(--timer-picker-bg);border:1px solid var(--date-picker-border, #00000020);border-radius:var(--date-picker-radius, .375rem)}.time-picker-sections{display:flex}.time-picker-time-section{border-right:1px solid var(--date-picker-border, #00000020);display:flex;flex-direction:column;min-width:3.8em;padding:.05em}.time-picker-time-section:last-child{border-right:none}.time-picker-period-section{min-width:60px}.time-picker-options-scroll{max-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:2px}.time-picker-option-button{padding:.5rem;border:none;background:transparent;border-radius:var(--date-picker-radius, .375rem);cursor:pointer;font-size:.875em;color:var(--date-picker-text, inherit);transition:all .15s ease;text-align:center}.time-picker-option-button:hover{background:var(--date-picker-hover, #00000010)}.time-picker-option-button.selected{background:var(--date-picker-primary, #2d66ed);color:var(--date-picker-primary-fg, #ffffff);font-weight:500}.time-picker-options-scroll::-webkit-scrollbar{width:0px}.time-picker-options-scroll::-webkit-scrollbar-track{background:transparent}.v-time-picker{position:relative;width:100%}.time-picker-input{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--timer-picker-input-padding);border:1px solid var(--timer-picker-input-border);border-radius:var(--timer-picker-input-border-radius);background:var(--timer-picker-input-bg);cursor:pointer;font-size:var(--timer-picker-input-text-size);color:var(--date-picker-text, inherit);transition:all .15s ease}.time-display{font-weight:500}.time-picker-clock-icon{opacity:.6}
+:root{--date-picker-primary: #2d66ed;--date-picker-primary-fg: #ffffff;--date-picker-text: inherit;--date-picker-border: #00000020;--date-picker-secondary: #00000010;--date-picker-hover: #00000010;--date-picker-disabled: #000000b4;--date-picker-today: #00000010;--date-picker-radius: .375em;--timer-picker-bg: white;--timer-picker-input-bg: white;--timer-picker-input-border: #00000020;--timer-picker-input-text: inherit;--timer-picker-input-text-size: .875em;--timer-picker-input-border-radius: .375em;--timer-picker-input-padding: .5em .75em}.ml-auto{margin-left:auto}.date-picker{position:relative;display:inline-block;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;color:var(--date-picker-text)}.date-picker-content{padding:0 .5em .5em}.date-picker-table{width:100%;border-collapse:collapse;border-spacing:0;margin:0}.date-picker-table:not(.date-picker-week-table) .date-picker-day-cell{padding:.13em}td,th{padding:0;margin:0;border:none}.date-picker-weekdays-row th{padding:.6em 0;font-size:.78em}.date-picker-weekday{display:flex;align-items:center;justify-content:center;height:2em;font-size:.75em;font-weight:500;opacity:.5;padding:.25em}.date-picker-days-body tr{border:none}.date-picker-day{display:flex;align-items:center;justify-content:center;width:100%;height:2em;border:none;background:none;border-radius:var(--date-picker-radius);cursor:pointer;font-size:.95em;color:var(--date-picker-text)}.date-picker-day:hover{background:var(--date-picker-hover)}.date-picker-day.other-month{opacity:.4}.date-picker-day.today{background:var(--date-picker-today);font-weight:400}.date-picker-day.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.date-picker-day.disabled{cursor:not-allowed;opacity:.5}.date-picker-day.disabled:hover{background:none}.date-picker-datetime-layout{display:flex;gap:.65em;width:100%}.date-picker-date-section{flex:1;height:100%}.date-picker-datetime-layout .date-picker-date-section{width:75%}.date-picker-time-section{width:100%;max-width:74px;border-left:1px solid var(--date-picker-border);display:flex;flex-direction:column}.date-picker-time-section .time-picker-container{flex:1;overflow-y:auto}.date-picker-week-table .date-picker-week-row{cursor:pointer}.date-picker-week-table .date-picker-week-row:not(.selected):hover td{background:var(--date-picker-hover)}.date-picker-week-table td{border-radius:0;padding:0}.date-picker-week-table .date-picker-day-cell .date-picker-day{border-radius:0}.date-picker-week-header{text-align:center}.date-picker-week-row .date-picker-week-number-cell{height:90%;padding-right:5px;background:var(--date-picker-secondary);opacity:.7;border-bottom:1px solid var(--date-picker-border);text-align:center;width:2.5em;font-size:.8em}.date-picker-week-row:last-child .date-picker-week-number-cell{border-bottom:none}.date-picker-week-row.selected .date-picker-day{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.date-picker-months-table{width:100%}.date-picker-months-body .date-picker-month-cell{padding:2px}.date-picker-month{display:flex;align-items:center;justify-content:center;width:100%;height:2.5em;border:none;background:none;border-radius:var(--date-picker-radius);cursor:pointer;font-size:inherit;color:var(--date-picker-text)}.date-picker-month:hover{background:var(--date-picker-hover)}.date-picker-month.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.year-view-layout{display:flex;gap:1px;height:100%;padding-right:2px}.years-section{width:25%;min-width:60px;max-width:80px;border-right:1px solid var(--date-picker-border);display:flex;flex-direction:column;height:100%}.years-list{display:flex;flex-direction:column;flex:1;overflow-y:auto;overflow-x:hidden}.year-item{display:flex;align-items:center;justify-content:center;padding:.5em;border:none;background:none;cursor:pointer;font-size:.875em;color:var(--date-picker-text);transition:background-color .15s ease;white-space:nowrap;flex-shrink:0}.year-item:hover{background:var(--date-picker-hover)}.year-item.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg)}.year-item.current{font-weight:600}.months-section{width:75%;display:flex;flex-direction:column;height:100%}.months-section .date-picker-months-table{overflow:auto;flex:1}.year-view-layout .months-section{padding:5px 3px;height:94.5%}.time-picker-container{height:100%;display:flex;flex-direction:column}.time-wheel{height:100%;overflow-y:auto;display:flex;flex-direction:column;border:1px solid var(--date-picker-border);border-radius:var(--date-picker-radius)}.time-option{height:30px;display:flex;align-items:center;justify-content:center;width:100%;cursor:pointer;font-size:.875em;color:var(--date-picker-text);flex-shrink:0}.time-option:hover{background:var(--date-picker-hover)}.time-option.selected{background:var(--date-picker-primary);color:var(--date-picker-primary-fg);font-weight:500}.date-picker-time-section .time-wheel{border:none;border-radius:0;height:100%;max-height:none}.date-picker-header{display:flex;align-items:center;justify-content:space-between;padding:.45em .4em;gap:.2em;border-bottom:1px solid var(--date-picker-border)}.date-picker-nav-button{display:flex;align-items:center;justify-content:center;width:1.65em;height:1.65em;border:none;background:none;border-radius:var(--date-picker-radius);cursor:pointer;transition:background-color .15s ease;opacity:.7}.date-picker-nav-button:hover:not(:disabled){background:var(--date-picker-hover)}.date-picker-nav-button:disabled{opacity:.5;cursor:not-allowed}.date-picker-nav-icon,.date-picker-header *{color:inherit!important}.date-picker-nav-icon svg{width:1.3em;height:1.3em;color:inherit!important;fill:currentColor!important}.date-picker-title{font-weight:600;font-size:1em;cursor:pointer;padding:.25em .5em;border-radius:var(--date-picker-radius);transition:background-color .15s ease;border:none;background:none;color:inherit}.date-picker-title:hover{background:var(--date-picker-hover)}.date-picker svg{display:flex;color:inherit}.date-picker *::-webkit-scrollbar{height:3px;width:3px}.date-picker *::-webkit-scrollbar-track{border-radius:5px;background-color:transparent}.date-picker *::-webkit-scrollbar-track:hover{background-color:transparent}.date-picker *::-webkit-scrollbar-track:active{background-color:transparent}.date-picker *::-webkit-scrollbar-thumb{border-radius:2px;background-color:var(--date-picker-border)}.date-picker *::-webkit-scrollbar-thumb:hover{background-color:var(--date-picker-border)}.date-picker *::-webkit-scrollbar-thumb:active{background-color:var(--date-picker-border)}.time-picker-dropdown{background:var(--timer-picker-bg);border:1px solid var(--date-picker-border, #00000020);border-radius:var(--date-picker-radius, .375rem)}.time-picker-sections{display:flex}.time-picker-time-section{border-right:1px solid var(--date-picker-border, #00000020);display:flex;flex-direction:column;min-width:3.8em;padding:.05em}.time-picker-time-section:last-child{border-right:none}.time-picker-period-section{min-width:60px}.time-picker-options-scroll{max-height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:2px;padding:2px}.time-picker-option-button{padding:.5rem;border:none;background:transparent;border-radius:var(--date-picker-radius, .375rem);cursor:pointer;font-size:.875em;color:var(--date-picker-text, inherit);transition:all .15s ease;text-align:center}.time-picker-option-button:hover{background:var(--date-picker-hover, #00000010)}.time-picker-option-button.selected{background:var(--date-picker-primary, #2d66ed);color:var(--date-picker-primary-fg, #ffffff);font-weight:500}.time-picker-options-scroll::-webkit-scrollbar{width:0px}.time-picker-options-scroll::-webkit-scrollbar-track{background:transparent}.v-time-picker{z-index:999999999999}.time-picker-input{width:100%;display:flex;align-items:center;justify-content:space-between;padding:var(--timer-picker-input-padding);border:1px solid var(--timer-picker-input-border);border-radius:var(--timer-picker-input-border-radius);background:var(--timer-picker-input-bg);cursor:pointer;font-size:var(--timer-picker-input-text-size);color:var(--date-picker-text, inherit);transition:all .15s ease}.time-display{font-weight:500}.time-picker-clock-icon{opacity:.6}