vx-vue 0.7.0 → 0.7.1

package/dist/vxvue.es.js

@@ -1,6 +1,6 @@
-import { getCurrentScope as ye, onScopeDispose as we, unref as F, watch as Y, useAttrs as U, ref as y, computed as S, onUpdated as ke, openBlock as r, createElementBlock as c, normalizeClass as _, createElementVNode as i, mergeProps as O, withKeys as K, withModifiers as M, createCommentVNode as D, Fragment as A, renderList as B, renderSlot as P, toDisplayString as C, createVNode as z, Transition as te, withCtx as G, createTextVNode as E, nextTick as le, toValue as se, withDirectives as re, vModelText as $e, createBlock as W, onMounted as ue, pushScopeId as _e, popScopeId as Ce, resolveDynamicComponent as ie, resolveComponent as Se, vShow as Me, normalizeStyle as Ve } from "vue";
+import { getCurrentScope as xe, onScopeDispose as we, unref as F, watch as Y, useAttrs as U, ref as x, computed as S, onUpdated as ke, openBlock as r, createElementBlock as d, normalizeClass as _, createElementVNode as i, mergeProps as O, withKeys as K, withModifiers as V, createCommentVNode as D, Fragment as A, renderList as L, renderSlot as P, toDisplayString as C, createVNode as z, Transition as te, withCtx as G, createTextVNode as E, nextTick as le, toValue as se, withDirectives as re, vModelText as $e, createBlock as W, onMounted as ue, pushScopeId as _e, popScopeId as Ce, resolveDynamicComponent as ie, resolveComponent as Se, vShow as Me, normalizeStyle as Ve } from "vue";
 function De(e) {
-  return ye() ? (we(e), !0) : !1;
+  return xe() ? (we(e), !0) : !1;
 }
 function ce(e) {
   return typeof e == "function" ? e() : F(e);
@@ -11,22 +11,22 @@ function Te() {
   var e;
   return de && ((e = window == null ? void 0 : window.navigator) == null ? void 0 : e.userAgent) && /* @__PURE__ */ /iP(ad|hone|od)/.test(window.navigator.userAgent);
 }
-const Le = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a{1,2}|A{1,2}|m{1,2}|s{1,2}|Z{1,2}|SSS/g;
-function Be(e, m, t, s) {
+const Be = /\[([^\]]+)]|Y{1,4}|M{1,4}|D{1,2}|d{1,4}|H{1,2}|h{1,2}|a{1,2}|A{1,2}|m{1,2}|s{1,2}|Z{1,2}|SSS/g;
+function Le(e, m, t, s) {
   let a = e < 12 ? "AM" : "PM";
-  return s && (a = a.split("").reduce((l, d) => l += `${d}.`, "")), t ? a.toLowerCase() : a;
+  return s && (a = a.split("").reduce((l, c) => l += `${c}.`, "")), t ? a.toLowerCase() : a;
 }
 function ne(e, m, t = {}) {
   var s;
-  const a = e.getFullYear(), l = e.getMonth(), d = e.getDate(), n = e.getHours(), o = e.getMinutes(), v = e.getSeconds(), u = e.getMilliseconds(), b = e.getDay(), f = (s = t.customMeridiem) != null ? s : Be, g = {
+  const a = e.getFullYear(), l = e.getMonth(), c = e.getDate(), n = e.getHours(), o = e.getMinutes(), v = e.getSeconds(), u = e.getMilliseconds(), b = e.getDay(), f = (s = t.customMeridiem) != null ? s : Le, g = {
     YY: () => String(a).slice(-2),
     YYYY: () => a,
     M: () => l + 1,
     MM: () => `${l + 1}`.padStart(2, "0"),
     MMM: () => e.toLocaleDateString(t.locales, { month: "short" }),
     MMMM: () => e.toLocaleDateString(t.locales, { month: "long" }),
-    D: () => String(d),
-    DD: () => `${d}`.padStart(2, "0"),
+    D: () => String(c),
+    DD: () => `${c}`.padStart(2, "0"),
     H: () => String(n),
     HH: () => `${n}`.padStart(2, "0"),
     h: () => `${n % 12 || 12}`.padStart(1, "0"),
@@ -45,9 +45,9 @@ function ne(e, m, t = {}) {
     a: () => f(n, o, !0),
     aa: () => f(n, o, !0, !0)
   };
-  return m.replace(Le, (w, L) => {
+  return m.replace(Be, (w, B) => {
     var I, T;
-    return (T = L ?? ((I = g[w]) == null ? void 0 : I.call(g))) != null ? T : w;
+    return (T = B ?? ((I = g[w]) == null ? void 0 : I.call(g))) != null ? T : w;
   });
 }
 function X(e) {
@@ -61,12 +61,12 @@ function Q(...e) {
   if (typeof e[0] == "string" || Array.isArray(e[0]) ? ([t, s, a] = e, m = ve) : [m, t, s, a] = e, !m)
     return ee;
   Array.isArray(t) || (t = [t]), Array.isArray(s) || (s = [s]);
-  const l = [], d = () => {
+  const l = [], c = () => {
     l.forEach((u) => u()), l.length = 0;
   }, n = (u, b, f, g) => (u.addEventListener(b, f, g), () => u.removeEventListener(b, f, g)), o = Y(
     () => [X(m), ce(a)],
     ([u, b]) => {
-      if (d(), !u)
+      if (c(), !u)
         return;
       const f = Pe(b) ? { ...b } : b;
       l.push(
@@ -75,13 +75,13 @@ function Q(...e) {
     },
     { immediate: !0, flush: "post" }
   ), v = () => {
-    o(), d();
+    o(), c();
   };
   return De(v), v;
 }
 let oe = !1;
 function ae(e, m, t = {}) {
-  const { window: s = ve, ignore: a = [], capture: l = !0, detectIframe: d = !1 } = t;
+  const { window: s = ve, ignore: a = [], capture: l = !0, detectIframe: c = !1 } = t;
   if (!s)
     return;
   Fe && !oe && (oe = !0, Array.from(s.document.body.children).forEach((f) => f.addEventListener("click", ee)), s.document.documentElement.addEventListener("click", ee));
@@ -108,7 +108,7 @@ function ae(e, m, t = {}) {
       const g = X(e);
       g && (n = !f.composedPath().includes(g) && !o(f));
     }, { passive: !0 }),
-    d && Q(s, "blur", (f) => {
+    c && Q(s, "blur", (f) => {
       setTimeout(() => {
         var g;
         const w = X(e);
@@ -152,10 +152,10 @@ const Ie = ["value", "onKeydown"], Oe = { class: "flex absolute inset-y-0 right-
   },
   emits: ["update:modelValue", "blur", "submit"],
   setup(e, { emit: m }) {
-    const t = m, s = e, a = U(), d = (() => {
+    const t = m, s = e, a = U(), c = (() => {
       let k = 0;
       return ($) => ($ || "") + ++k;
-    })()((a.id || "autocomplete") + "-"), n = y([]), o = y(-1), v = y(0), u = y(!1), b = y(!1), f = y("top-0 translate-y-12"), g = y(!0), w = y(null), L = y(null), I = y(null), T = S(
+    })()((a.id || "autocomplete") + "-"), n = x([]), o = x(-1), v = x(0), u = x(!1), b = x(!1), f = x("top-0 translate-y-12"), g = x(!0), w = x(null), B = x(null), I = x(null), T = S(
       () => n.value.map((k, $) => ({
         id: (a.id || "autocomplete") + "-item-" + $,
         class: ["autocomplete-item", s.resultItemClass, { "bg-vxvue-700 text-white": o.value === $ }],
@@ -171,17 +171,17 @@ const Ie = ["value", "onKeydown"], Oe = { class: "flex absolute inset-y-0 right-
       spellcheck: "false",
       "aria-autocomplete": "list",
       "aria-haspopup": "listbox",
-      "aria-owns": d,
+      "aria-owns": c,
       "aria-expanded": u.value ? "true" : "false",
       "aria-activedescendant": o.value > -1 ? T.value[o.value].id : "",
       ...a
     })), h = S(() => ({
-      id: d,
+      id: c,
       class: ["autocomplete-list absolute min-w-full transform z-10", s.resultListClass, f.value],
       role: "listbox"
     })), p = () => {
       o.value = -1, n.value = [], u.value = !1, g.value = !0;
-    }, x = (k) => {
+    }, y = (k) => {
       const $ = s.search(k);
       if ($ instanceof Promise) {
         const N = ++v.value;
@@ -190,12 +190,12 @@ const Ie = ["value", "onKeydown"], Oe = { class: "flex absolute inset-y-0 right-
         });
       } else
         n.value = $, n.value.length === 0 ? p() : (o.value = s.autoSelect ? 0 : -1, u.value = !0);
-    }, V = () => {
+    }, M = () => {
       const k = n.value[o.value];
       return k && t("update:modelValue", s.getResultValue(k)), p(), k;
     }, R = (k) => {
-      t("update:modelValue", k), x(k);
-    }, Z = (k) => x(k.target.value), q = () => {
+      t("update:modelValue", k), y(k);
+    }, Z = (k) => y(k.target.value), q = () => {
       p(), t("blur");
     }, J = () => {
       const k = n.value.length;
@@ -206,13 +206,13 @@ const Ie = ["value", "onKeydown"], Oe = { class: "flex absolute inset-y-0 right-
       o.value = ((o.value + 1) % $ + $) % $;
     }, ge = () => {
       p(), t("update:modelValue", "");
-    }, be = () => t("submit", V()), xe = (k) => {
+    }, be = () => t("submit", M()), ye = (k) => {
       const $ = k.target.closest("[data-result-index]");
-      $ && (o.value = parseInt($.dataset.resultIndex, 10), t("submit", V()));
+      $ && (o.value = parseInt($.dataset.resultIndex, 10), t("submit", M()));
     };
     return ae(I, p), ke(() => {
       if (w.value) {
-        const k = L.value.getBoundingClientRect(), $ = w.value.getBoundingClientRect();
+        const k = B.value.getBoundingClientRect(), $ = w.value.getBoundingClientRect();
         g.value && n.value.length && (g.value = !1, f.value = k.bottom + $.height > window.innerHeight && window.innerHeight - k.bottom < k.top && window.pageYOffset + k.top - $.height > 0 ? "bottom-0  -translate-y-12" : "top-0 translate-y-12");
         const N = w.value.querySelector('[data-result-index="' + o.value + '"]');
         if (N) {
@@ -220,14 +220,14 @@ const Ie = ["value", "onKeydown"], Oe = { class: "flex absolute inset-y-0 right-
           j.top < $.top ? w.value.scrollTop -= $.top - j.top : j.bottom > $.bottom && (w.value.scrollTop += j.bottom - $.bottom);
         }
       }
-    }), (k, $) => (r(), c("div", {
+    }), (k, $) => (r(), d("div", {
       class: _(["inline-block relative", k.$attrs.class]),
       ref_key: "container",
       ref: I
     }, [
       i("input", O({
         ref_key: "input",
-        ref: L,
+        ref: B,
         class: "block pr-10 w-full form-input focus:border-vxvue",
         value: e.modelValue
       }, H.value, {
@@ -235,30 +235,30 @@ const Ie = ["value", "onKeydown"], Oe = { class: "flex absolute inset-y-0 right-
         onKeydown: [
           K(be, ["enter"]),
           K(ge, ["esc"]),
-          K(V, ["tab"]),
-          K(M(J, ["prevent"]), ["up"]),
-          K(M(pe, ["prevent"]), ["down"])
+          K(M, ["tab"]),
+          K(V(J, ["prevent"]), ["up"]),
+          K(V(pe, ["prevent"]), ["down"])
         ],
         onFocus: Z,
         onBlur: q
       }), null, 16, Ie),
       i("span", Oe, [
-        b.value ? (r(), c("svg", je, Ye)) : D("", !0)
+        b.value ? (r(), d("svg", je, Ye)) : D("", !0)
       ]),
-      n.value.length ? (r(), c("ul", O({
+      n.value.length ? (r(), d("ul", O({
         key: 0,
         ref_key: "resultList",
         ref: w
       }, h.value, {
-        onClick: xe,
-        onMousedown: $[1] || ($[1] = M(() => {
+        onClick: ye,
+        onMousedown: $[1] || ($[1] = V(() => {
         }, ["prevent"]))
       }), [
-        (r(!0), c(A, null, B(n.value, (N, j) => P(k.$slots, "result", {
+        (r(!0), d(A, null, L(n.value, (N, j) => P(k.$slots, "result", {
           result: N,
           props: T.value[j]
         }, () => [
-          (r(), c("li", O({
+          (r(), d("li", O({
             key: T.value[j].id
           }, T.value[j]), C(e.getResultValue(N)), 17))
         ])), 256))
@@ -293,21 +293,21 @@ const Ie = ["value", "onKeydown"], Oe = { class: "flex absolute inset-y-0 right-
     }
   },
   setup(e, { expose: m }) {
-    const t = e, s = y(""), a = y(""), l = y(!1);
-    let d = null, n = null;
-    const o = S(() => Array.isArray(t.buttons) ? t.buttons : [t.buttons]), v = y(null);
+    const t = e, s = x(""), a = x(""), l = x(!1);
+    let c = null, n = null;
+    const o = S(() => Array.isArray(t.buttons) ? t.buttons : [t.buttons]), v = x(null);
     return m({ open: (b, f) => (s.value = b, a.value = f, l.value = !0, le(() => v.value.firstElementChild.focus()), new Promise((g, w) => {
-      d = g, n = w;
-    })) }), (b, f) => (r(), c(A, null, [
-      l.value ? (r(), c("div", ze)) : D("", !0),
+      c = g, n = w;
+    })) }), (b, f) => (r(), d(A, null, [
+      l.value ? (r(), d("div", ze)) : D("", !0),
       z(te, { name: "appear" }, {
         default: G(() => [
-          l.value ? (r(), c("div", Re, [
+          l.value ? (r(), d("div", Re, [
             i("div", He, [
-              l.value ? (r(), c("div", Ue, [
+              l.value ? (r(), d("div", Ue, [
                 We,
                 i("div", qe, [
-                  s.value ? (r(), c("h3", {
+                  s.value ? (r(), d("h3", {
                     key: 0,
                     class: _(["py-4 pt-4 text-lg font-medium text-center sm:py-6", e.headerClass])
                   }, [
@@ -331,10 +331,10 @@ const Ie = ["value", "onKeydown"], Oe = { class: "flex absolute inset-y-0 right-
                       ref_key: "buttonsContainer",
                       ref: v
                     }, [
-                      (r(!0), c(A, null, B(o.value, (g, w) => (r(), c("button", {
+                      (r(!0), d(A, null, L(o.value, (g, w) => (r(), d("button", {
                         class: _([e.buttonClass, g.class]),
-                        onClick: M((L) => {
-                          l.value = !1, w === 0 ? F(d)() : F(n)();
+                        onClick: V((B) => {
+                          l.value = !1, w === 0 ? F(c)() : F(n)();
                         }, ["prevent"])
                       }, C(g.label), 11, Je))), 256))
                     ], 512)
@@ -350,30 +350,30 @@ const Ie = ["value", "onKeydown"], Oe = { class: "flex absolute inset-y-0 right-
   }
 };
 function Qe(e, m) {
-  const t = y(!1), s = se(m);
-  let a, l = s.toLowerCase().replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), d = [];
+  const t = x(!1), s = se(m);
+  let a, l = s.toLowerCase().replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), c = [];
   if ((a = s.match(/\bd\b/gi)) && a.length === 1)
     l = l.replace("d", "(\\d{1,2})");
   else if ((a = s.match(/\bdd\b/gi)) && a.length === 1)
     l = l.replace("dd", "(\\d{2})");
   else
     return { date: t };
-  if (d.push({ srcPos: s.toLowerCase().indexOf("d"), destPos: 2 }), (a = s.match(/\bm\b/gi)) && a.length === 1)
+  if (c.push({ srcPos: s.toLowerCase().indexOf("d"), destPos: 2 }), (a = s.match(/\bm\b/gi)) && a.length === 1)
     l = l.replace("m", "(\\d{1,2})");
   else if ((a = s.match(/\bmm\b/gi)) && a.length === 1)
     l = l.replace("mm", "(\\d{2})");
   else
     return { date: t };
-  if (d.push({ srcPos: s.toLowerCase().indexOf("m"), destPos: 1 }), (a = s.match(/\byyyy\b/gi)) && a.length === 1)
+  if (c.push({ srcPos: s.toLowerCase().indexOf("m"), destPos: 1 }), (a = s.match(/\byyyy\b/gi)) && a.length === 1)
     l = l.replace("yyyy", "(\\d{4})");
   else
     return { date: t };
-  if (d.push({ srcPos: s.toLowerCase().indexOf("y"), destPos: 0 }), !(a = se(e).match(l)))
+  if (c.push({ srcPos: s.toLowerCase().indexOf("y"), destPos: 0 }), !(a = se(e).match(l)))
     return { date: t };
-  a.shift(), d.sort((u, b) => u.srcPos < b.srcPos ? -1 : 1);
+  a.shift(), c.sort((u, b) => u.srcPos < b.srcPos ? -1 : 1);
   let n = [], o, v;
   for (; o = a.shift(); )
-    v = d.shift(), n[v.destPos] = o;
+    v = c.shift(), n[v.destPos] = o;
   return n = Date.parse(n.join("-")), n && (n = new Date(n), t.value = new Date(n.getFullYear(), n.getMonth(), n.getDate(), 0, 0, 0)), { date: t };
 }
 const et = { key: 0 }, tt = { class: "text-vxvue-700" }, lt = /* @__PURE__ */ i("svg", {
@@ -415,14 +415,14 @@ const et = { key: 0 }, tt = { class: "text-vxvue-700" }, lt = /* @__PURE__ */ i(
   },
   emits: ["update:modelValue", "toggle-datepicker"],
   setup(e, { emit: m }) {
-    const t = m, s = e, a = y(""), l = S(() => s.modelValue ? ne(s.modelValue, s.outputFormat) : ""), d = S(() => {
+    const t = m, s = e, a = x(""), l = S(() => s.modelValue ? ne(s.modelValue, s.outputFormat) : ""), c = S(() => {
       let n = Object.assign({}, U());
       return delete n.class, n;
     });
-    return Y(() => s.modelValue, (n) => a.value = n ? ne(n, s.outputFormat) : ""), (n, o) => (r(), c("div", {
+    return Y(() => s.modelValue, (n) => a.value = n ? ne(n, s.outputFormat) : ""), (n, o) => (r(), d("div", {
       class: _(["inline-block relative", n.$attrs.class])
     }, [
-      l.value ? (r(), c("div", et, [
+      l.value ? (r(), d("div", et, [
         i("div", {
           class: _(["block flex items-center w-full form-input bg-vxvue-50", { "pr-10": e.showButton }])
         }, [
@@ -432,7 +432,7 @@ const et = { key: 0 }, tt = { class: "text-vxvue-700" }, lt = /* @__PURE__ */ i(
             class: "inline-flex flex-shrink-0 justify-center items-center ml-2 w-4 h-4 rounded-full focus:text-white focus:outline-none text-vxvue hover:bg-vxvue-100 hover:text-vue-700 focus:bg-vxvue-700"
           }, at)
         ], 2)
-      ])) : re((r(), c("input", O({
+      ])) : re((r(), d("input", O({
         key: 1,
         type: "text",
         class: ["block w-full form-input peer focus:border-vxvue", { "pr-10": e.showButton }],
@@ -441,22 +441,22 @@ const et = { key: 0 }, tt = { class: "text-vxvue-700" }, lt = /* @__PURE__ */ i(
           var u;
           return t("update:modelValue", ((u = F(Qe)(a.value, s.inputFormat).date) == null ? void 0 : u.value) || null);
         }),
-        onInput: o[3] || (o[3] = M(() => {
+        onInput: o[3] || (o[3] = V(() => {
         }, ["prevent"]))
-      }, d.value), null, 16)), [
+      }, c.value), null, 16)), [
         [$e, a.value]
       ]),
-      e.showButton ? (r(), c("button", {
+      e.showButton ? (r(), d("button", {
         key: 2,
         class: "flex absolute inset-y-0 right-0 items-center px-2 text-vxvue-700 hover:text-vxvue",
-        onClick: o[4] || (o[4] = M((v) => t("toggle-datepicker"), ["stop"]))
+        onClick: o[4] || (o[4] = V((v) => t("toggle-datepicker"), ["stop"]))
       }, nt)) : D("", !0),
       P(n.$slots, "default")
     ], 2));
   }
 };
 function me(e, m) {
-  return r(), c("svg", {
+  return r(), d("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -470,7 +470,7 @@ function me(e, m) {
   ]);
 }
 function fe(e, m) {
-  return r(), c("svg", {
+  return r(), d("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -484,7 +484,7 @@ function fe(e, m) {
   ]);
 }
 function rt(e, m) {
-  return r(), c("svg", {
+  return r(), d("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -498,7 +498,7 @@ function rt(e, m) {
   ]);
 }
 function ut(e, m) {
-  return r(), c("svg", {
+  return r(), d("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -512,7 +512,7 @@ function ut(e, m) {
   ]);
 }
 function it(e, m) {
-  return r(), c("svg", {
+  return r(), d("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     viewBox: "0 0 24 24",
     fill: "currentColor",
@@ -541,36 +541,36 @@ const ct = { class: "flex flex-row items-center py-2 px-3 text-white bg-vxvue-70
     const t = e, s = m, a = (() => {
       let h = /* @__PURE__ */ new Date();
       return new Date(h.getFullYear(), h.getMonth(), h.getDate());
-    })(), l = y(new Date(a.getFullYear(), a.getMonth(), 1)), d = y(null), n = y(!t.hasInput), o = y("left-0"), v = y("top-0"), u = y(null), b = y(null), f = S(() => t.hasInput ? { class: ["absolute", n.value ? "block" : "hidden"] } : {}), g = S(() => {
-      const h = [], p = l.value.getFullYear(), x = l.value.getMonth(), V = new Date(p, x + 1, 0), R = new Date(p, x, 0).getDay() + 1 - t.startOfWeekIndex, Z = (6 + t.startOfWeekIndex - V.getDay()) % 7;
-      for (let q = -R, J = V.getDate() + Z; q < J; ++q)
-        h.push(new Date(p, x, q + 1));
+    })(), l = x(new Date(a.getFullYear(), a.getMonth(), 1)), c = x(null), n = x(!t.hasInput), o = x("left-0"), v = x("top-0"), u = x(null), b = x(null), f = S(() => t.hasInput ? { class: ["absolute", n.value ? "block" : "hidden"] } : {}), g = S(() => {
+      const h = [], p = l.value.getFullYear(), y = l.value.getMonth(), M = new Date(p, y + 1, 0), R = new Date(p, y, 0).getDay() + 1 - t.startOfWeekIndex, Z = (6 + t.startOfWeekIndex - M.getDay()) % 7;
+      for (let q = -R, J = M.getDate() + Z; q < J; ++q)
+        h.push(new Date(p, y, q + 1));
       return h;
     }), w = S(() => t.startOfWeekIndex ? t.dayNames.slice(1).concat(t.dayNames[0]) : t.dayNames.slice());
     Y(() => t.modelValue, (h) => {
-      h ? (d.value = new Date(h.getFullYear(), h.getMonth(), h.getDate()), l.value = new Date(d.value.getTime())) : (d.value = null, l.value = new Date(a.getTime())), l.value.setDate(1);
+      h ? (c.value = new Date(h.getFullYear(), h.getMonth(), h.getDate()), l.value = new Date(c.value.getTime())) : (c.value = null, l.value = new Date(a.getTime())), l.value.setDate(1);
     }, { immediate: !0 }), Y(n, (h) => {
       h && t.hasInput && le(() => {
-        const p = u.value.$el.getBoundingClientRect(), x = b.value.getBoundingClientRect();
-        o.value = p.left + x.width > window.innerWidth ? "right-0" : "left-0", v.value = p.bottom + x.height > window.innerHeight ? "bottom-0 -translate-y-12" : "top-0 translate-y-12";
+        const p = u.value.$el.getBoundingClientRect(), y = b.value.getBoundingClientRect();
+        o.value = p.left + y.width > window.innerWidth ? "right-0" : "left-0", v.value = p.bottom + y.height > window.innerHeight ? "bottom-0 -translate-y-12" : "top-0 translate-y-12";
       });
     }), ae(b, () => n.value = !1);
-    const L = () => {
+    const B = () => {
       l.value = new Date(l.value.getFullYear(), l.value.getMonth() - 1, 1), s("month-change", l.value);
     }, I = () => {
       l.value = new Date(l.value.getFullYear(), l.value.getMonth() + 1, 1), s("month-change", l.value);
     }, T = (h) => {
-      d.value = h, s("update:modelValue", h), n.value = !t.hasInput;
+      c.value = h, s("update:modelValue", h), n.value = !t.hasInput;
     }, H = (h) => {
-      d.value = h, s("update:modelValue", h);
+      c.value = h, s("update:modelValue", h);
     };
-    return (h, p) => (r(), c("div", {
+    return (h, p) => (r(), d("div", {
       class: _(["relative", h.$attrs.class])
     }, [
       e.hasInput ? (r(), W(ot, O({
         key: 0,
-        modelValue: d.value,
-        onToggleDatepicker: p[0] || (p[0] = (x) => n.value = !0),
+        modelValue: c.value,
+        onToggleDatepicker: p[0] || (p[0] = (y) => n.value = !0),
         "onUpdate:modelValue": H
       }, h.$attrs, {
         ref_key: "input",
@@ -590,45 +590,45 @@ const ct = { class: "flex flex-row items-center py-2 px-3 text-white bg-vxvue-70
       }), [
         i("div", ct, [
           i("button", {
-            onClick: M(L, ["stop"]),
+            onClick: V(B, ["stop"]),
             class: "flex-shrink-0 text-vxvue-100 hover:text-vxvue-50"
           }, [
             z(F(me), { class: "w-6 h-6" })
           ], 8, dt),
           i("div", vt, C(l.value.toLocaleString(e.locale, { month: "long" })) + " " + C(l.value.getFullYear()), 1),
           i("button", {
-            onClick: M(I, ["stop"]),
+            onClick: V(I, ["stop"]),
             class: "flex-shrink-0 text-vxvue-100 hover:text-vxvue-50"
           }, [
             z(F(fe), { class: "w-6 h-6" })
           ], 8, mt)
         ]),
         i("div", ft, [
-          (r(!0), c(A, null, B(w.value, (x, V) => (r(), c("div", {
+          (r(!0), d(A, null, L(w.value, (y, M) => (r(), d("div", {
             class: "py-2 text-center bg-gray-200",
-            key: V
-          }, C(x), 1))), 128)),
-          (r(!0), c(A, null, B(g.value, (x) => (r(), c("div", {
-            class: _(["text-center", x.getMonth() - l.value.getMonth() === 0 ? "text-vxvue-700" : "text-gray-400"])
+            key: M
+          }, C(y), 1))), 128)),
+          (r(!0), d(A, null, L(g.value, (y) => (r(), d("div", {
+            class: _(["text-center", y.getMonth() - l.value.getMonth() === 0 ? "text-vxvue-700" : "text-gray-400"])
           }, [
             i("button", {
               class: _([
                 {
-                  "bg-vxvue-700 text-white": d.value && x.getTime() === d.value.getTime(),
-                  "bg-gray-200": x.getTime() === F(a).getTime(),
-                  "text-red-400": e.validFrom && e.validFrom > x || e.validUntil && e.validUntil < x
+                  "bg-vxvue-700 text-white": c.value && y.getTime() === c.value.getTime(),
+                  "bg-gray-200": y.getTime() === F(a).getTime(),
+                  "text-red-400": e.validFrom && e.validFrom > y || e.validUntil && e.validUntil < y
                 },
                 "py-2 px-3 rounded-sm"
               ]),
-              disabled: e.validFrom && e.validFrom > x || e.validUntil && e.validUntil < x,
-              onClick: M((V) => e.validFrom && e.validFrom > x || e.validUntil && e.validUntil < x ? null : T(x), ["stop"])
-            }, C(x.getDate()), 11, ht)
+              disabled: e.validFrom && e.validFrom > y || e.validUntil && e.validUntil < y,
+              onClick: V((M) => e.validFrom && e.validFrom > y || e.validUntil && e.validUntil < y ? null : T(y), ["stop"])
+            }, C(y.getDate()), 11, ht)
           ], 2))), 256))
         ])
       ], 16)
     ], 2));
   }
-}, pt = ["for"], gt = ["id", "multiple", "accept"], xl = {
+}, pt = ["for"], gt = ["id", "multiple", "accept"], yl = {
   __name: "form-file-button",
   props: {
     modelValue: { type: Array },
@@ -639,20 +639,20 @@ const ct = { class: "flex flex-row items-center py-2 px-3 text-white bg-vxvue-70
   },
   emits: ["update:modelValue", "form-data"],
   setup(e, { emit: m }) {
-    const t = m, s = e, a = (d) => {
+    const t = m, s = e, a = (c) => {
       const n = new FormData();
-      for (let o of d)
+      for (let o of c)
         n.append(s.name, o, o.name);
       return n;
-    }, l = (d) => {
-      const n = d.target.files || d.dataTransfer.files;
+    }, l = (c) => {
+      const n = c.target.files || c.dataTransfer.files;
       if (n) {
         const o = [...n];
         t("update:modelValue", o), t("form-data", a(o));
       }
     };
-    return (d, n) => (r(), c("label", { for: e.id }, [
-      P(d.$slots, "default", {}, () => [
+    return (c, n) => (r(), d("label", { for: e.id }, [
+      P(c.$slots, "default", {}, () => [
         E("Upload")
       ]),
       i("input", {
@@ -665,38 +665,38 @@ const ct = { class: "flex flex-row items-center py-2 px-3 text-white bg-vxvue-70
       }, null, 40, gt)
     ], 8, pt));
   }
-}, bt = ["value"], xt = {
+}, bt = ["value"], yt = {
   key: 0,
   disabled: "",
   value: ""
-}, yt = ["value", "selected"], wt = {
+}, xt = ["value", "selected"], wt = {
   __name: "form-select",
   props: { options: Array, modelValue: [String, Number], disabledLabel: String },
   emits: ["update:modelValue"],
   setup(e, { emit: m }) {
     const t = m;
-    return (s, a) => (r(), c("select", O(s.$attrs, {
+    return (s, a) => (r(), d("select", O(s.$attrs, {
       value: e.modelValue,
       class: "form-select",
       onChange: a[0] || (a[0] = (l) => t("update:modelValue", l.target.value))
     }), [
-      e.disabledLabel ? (r(), c("option", xt, C(e.disabledLabel), 1)) : D("", !0),
-      (r(!0), c(A, null, B(e.options, (l) => (r(), c("option", {
+      e.disabledLabel ? (r(), d("option", yt, C(e.disabledLabel), 1)) : D("", !0),
+      (r(!0), d(A, null, L(e.options, (l) => (r(), d("option", {
         value: l.key !== void 0 ? l.key : l.label || l,
         selected: (l.key !== void 0 ? l.key : l.label || l) === e.modelValue
-      }, C(l.label || l), 9, yt))), 256))
+      }, C(l.label || l), 9, xt))), 256))
     ], 16, bt));
   }
-}, kt = ["aria-checked"], $t = ["checked"], yl = {
+}, kt = ["aria-checked"], $t = ["checked"], xl = {
   __name: "form-switch",
   props: ["modelValue"],
   emits: ["update:modelValue"],
   setup(e, { emit: m }) {
-    const t = e, s = m, a = S(() => t.modelValue ? "bg-vxvue" : "bg-slate-200"), l = S(() => t.modelValue ? "translate-x-5" : "translate-x-0"), d = S(() => {
+    const t = e, s = m, a = S(() => t.modelValue ? "bg-vxvue" : "bg-slate-200"), l = S(() => t.modelValue ? "translate-x-5" : "translate-x-0"), c = S(() => {
       let n = Object.assign({}, U());
       return delete n.class, n;
     });
-    return (n, o) => (r(), c(A, null, [
+    return (n, o) => (r(), d(A, null, [
       i("label", {
         class: _(n.$attrs.class)
       }, [
@@ -714,7 +714,7 @@ const ct = { class: "flex flex-row items-center py-2 px-3 text-white bg-vxvue-70
             value: "1",
             type: "checkbox",
             onChange: o[0] || (o[0] = (v) => s("update:modelValue", v.target.checked))
-          }, d.value, { checked: e.modelValue }), null, 16, $t)
+          }, c.value, { checked: e.modelValue }), null, 16, $t)
         ], 10, kt)
       ], 2),
       P(n.$slots, "default")
@@ -729,7 +729,7 @@ const he = (e, m) => {
 }, _t = (e) => (_e("data-v-1be10676"), e = e(), Ce(), e), Ct = {
   "aria-live": "assertive",
   class: "flex fixed inset-0 z-50 items-start py-6 px-4 pointer-events-none sm:p-6"
-}, St = { class: "flex flex-col items-center space-y-4 w-full" }, Mt = { class: "p-4" }, Vt = { class: "flex items-start" }, Dt = { class: "flex-shrink-0" }, At = { class: "flex-1 pt-0.5 ml-3 w-0" }, Pt = { class: "font-bold" }, Ft = { class: "mt-1" }, Tt = { class: "flex flex-shrink-0 ml-4" }, Lt = /* @__PURE__ */ _t(() => /* @__PURE__ */ i("span", { class: "sr-only" }, "Close", -1)), Bt = /* @__PURE__ */ Object.assign({
+}, St = { class: "flex flex-col items-center space-y-4 w-full" }, Mt = { class: "p-4" }, Vt = { class: "flex items-start" }, Dt = { class: "flex-shrink-0" }, At = { class: "flex-1 pt-0.5 ml-3 w-0" }, Pt = { class: "font-bold" }, Ft = { class: "mt-1" }, Tt = { class: "flex flex-shrink-0 ml-4" }, Bt = /* @__PURE__ */ _t(() => /* @__PURE__ */ i("span", { class: "sr-only" }, "Close", -1)), Lt = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "message-toast",
@@ -741,16 +741,16 @@ const he = (e, m) => {
   },
   emits: ["timeout", "close"],
   setup(e, { emit: m }) {
-    const t = e, s = m, a = y(null), l = S(() => typeof t.message == "string" ? [t.message] : t.message), d = () => {
+    const t = e, s = m, a = x(null), l = S(() => typeof t.message == "string" ? [t.message] : t.message), c = () => {
       window.clearTimeout(a.value), t.active && t.timeout && (a.value = window.setTimeout(() => {
         s("timeout");
       }, t.timeout));
     };
-    return Y(() => t.active, d), ue(d), (n, o) => (r(), c("div", Ct, [
+    return Y(() => t.active, c), ue(c), (n, o) => (r(), d("div", Ct, [
       i("div", St, [
         z(te, { name: "messagetoast-fade" }, {
           default: G(() => [
-            e.active ? (r(), c("div", {
+            e.active ? (r(), d("div", {
               key: 0,
               class: _(["overflow-hidden w-full max-w-sm rounded-md ring-1 ring-black ring-opacity-5 shadow-lg pointer-events-auto", n.$attrs.class])
             }, [
@@ -765,7 +765,7 @@ const he = (e, m) => {
                         E(C(e.title), 1)
                       ], !0)
                     ]),
-                    (r(!0), c(A, null, B(l.value, (v) => (r(), c("p", Ft, [
+                    (r(!0), d(A, null, L(l.value, (v) => (r(), d("p", Ft, [
                       P(n.$slots, "default", {}, () => [
                         E(C(v), 1)
                       ], !0)
@@ -776,7 +776,7 @@ const he = (e, m) => {
                       onClick: o[0] || (o[0] = (v) => s("close")),
                       class: "inline-flex text-white bg-black bg-opacity-20 rounded-sm focus:ring-2 focus:outline-none hover:text-stone-200 focus:ring-stone-200"
                     }, [
-                      Lt,
+                      Bt,
                       z(F(it), { class: "w-5 h-5" })
                     ])
                   ])
@@ -789,7 +789,7 @@ const he = (e, m) => {
       ])
     ]));
   }
-}), wl = /* @__PURE__ */ he(Bt, [["__scopeId", "data-v-1be10676"]]), It = {
+}), wl = /* @__PURE__ */ he(Lt, [["__scopeId", "data-v-1be10676"]]), It = {
   key: 0,
   class: "fixed inset-0 z-[9998] bg-white/50 backdrop-blur-sm",
   "aria-hidden": "true"
@@ -806,12 +806,12 @@ const he = (e, m) => {
   },
   emits: ["clicked-outside"],
   setup(e, { emit: m }) {
-    const t = m, s = y(null);
-    return ae(s, () => t("clicked-outside")), (a, l) => (r(), c(A, null, [
-      e.show ? (r(), c("div", It)) : D("", !0),
+    const t = m, s = x(null);
+    return ae(s, () => t("clicked-outside")), (a, l) => (r(), d(A, null, [
+      e.show ? (r(), d("div", It)) : D("", !0),
       z(te, { name: "appear" }, {
         default: G(() => [
-          e.show ? (r(), c("div", Ot, [
+          e.show ? (r(), d("div", Ot, [
             i("div", jt, [
               i("div", {
                 class: _(["overflow-hidden relative max-w-full bg-white rounded ring-1 ring-black ring-opacity-10 shadow-xl transition-all transform xl:max-w-screen-xl", e.containerClass]),
@@ -862,7 +862,7 @@ const he = (e, m) => {
   },
   emits: ["update:page"],
   setup(e, { emit: m }) {
-    const t = m, s = e, a = y(Math.ceil(s.total / s.perPage)), l = y(null), d = S(() => s.markerPosition === "above" ? "border-t-2 pt-4" : "border-b-2 pb-4"), n = S(() => {
+    const t = m, s = e, a = x(Math.ceil(s.total / s.perPage)), l = x(null), c = S(() => s.markerPosition === "above" ? "border-t-2 pt-4" : "border-b-2 pb-4"), n = S(() => {
       let u = [1];
       if (s.showAllPages || a.value <= 7) {
         for (let b = 2; b <= a.value; ++b)
@@ -879,28 +879,28 @@ const he = (e, m) => {
       a.value = Math.ceil(s.total / s.perPage), t("update:page", 1);
     }), Y(() => s.total, (u) => {
       a.value = Math.ceil(s.total / s.perPage), l.value > a.value && t("update:page", 1);
-    }), (u, b) => (r(), c("nav", Et, [
+    }), (u, b) => (r(), d("nav", Et, [
       i("div", Nt, [
-        e.showNavButtons ? (r(), c("a", {
+        e.showNavButtons ? (r(), d("a", {
           key: 0,
-          onClick: M(o, ["prevent"]),
+          onClick: V(o, ["prevent"]),
           href: "#",
-          class: _(["inline-flex items-center pr-1 text-sm font-medium text-gray-500 border-transparent hover:text-gray-700 hover:border-gray-300", [{ "cursor-default pointer-events-none": l.value <= 1 }, d.value]])
+          class: _(["inline-flex items-center pr-1 text-sm font-medium text-gray-500 border-transparent hover:text-gray-700 hover:border-gray-300", [{ "cursor-default pointer-events-none": l.value <= 1 }, c.value]])
         }, [
           z(F(me), { class: "w-5 h-5" }),
           E(" " + C(e.prevText), 1)
         ], 10, Yt)) : D("", !0)
       ]),
       i("div", zt, [
-        (r(!0), c(A, null, B(n.value, (f, g) => (r(), W(ie(f !== "dots" ? "a" : "span"), {
-          onClick: M((w) => f !== "dots" ? t("update:page", f) : null, ["prevent"]),
+        (r(!0), d(A, null, L(n.value, (f, g) => (r(), W(ie(f !== "dots" ? "a" : "span"), {
+          onClick: V((w) => f !== "dots" ? t("update:page", f) : null, ["prevent"]),
           key: g,
           href: f !== "dots" ? "#" : null,
           class: _(["inline-flex items-center px-4 text-sm font-medium", [{
             "border-vxvue-500 text-vxvue-700": f === l.value,
             "border-transparent text-gray-500": f !== l.value,
             "hover:text-gray-700 hover:border-gray-300": f !== "dots"
-          }, d.value]])
+          }, c.value]])
         }, {
           default: G(() => [
             E(C(f !== "dots" ? f : "..."), 1)
@@ -909,11 +909,11 @@ const he = (e, m) => {
         }, 1032, ["onClick", "href", "class"]))), 128))
       ]),
       i("div", Rt, [
-        e.showNavButtons ? (r(), c("a", {
+        e.showNavButtons ? (r(), d("a", {
           key: 0,
-          onClick: M(v, ["prevent"]),
+          onClick: V(v, ["prevent"]),
           href: "#",
-          class: _(["inline-flex items-center pl-1 text-sm font-medium text-gray-500 border-transparent hover:text-gray-700 hover:border-gray-300", [d.value, { "cursor-default pointer-events-none": l.value >= a.value }]])
+          class: _(["inline-flex items-center pl-1 text-sm font-medium text-gray-500 border-transparent hover:text-gray-700 hover:border-gray-300", [c.value, { "cursor-default pointer-events-none": l.value >= a.value }]])
         }, [
           E(C(e.nextText) + " ", 1),
           z(F(fe), { class: "w-5 h-5" })
@@ -923,7 +923,7 @@ const he = (e, m) => {
   }
 };
 function Ut(e, m) {
-  return r(), c("svg", {
+  return r(), d("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -939,7 +939,7 @@ function Ut(e, m) {
   ]);
 }
 function Wt(e, m) {
-  return r(), c("svg", {
+  return r(), d("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -964,20 +964,20 @@ const qt = ["value", "type"], _l = /* @__PURE__ */ Object.assign({ inheritAttrs:
   props: ["modelValue"],
   emits: ["update:modelValue"],
   setup(e, { emit: m }) {
-    const t = m, s = y(!1), a = S(() => {
+    const t = m, s = x(!1), a = S(() => {
       let l = Object.assign({}, U());
       return delete l.class, l;
     });
-    return (l, d) => (r(), c("div", {
+    return (l, c) => (r(), d("div", {
       class: _("inline-block relative " + U().class)
     }, [
       i("input", O({
         value: e.modelValue,
         type: s.value ? "text" : "password",
-        onInput: d[0] || (d[0] = (n) => t("update:modelValue", n.target.value))
+        onInput: c[0] || (c[0] = (n) => t("update:modelValue", n.target.value))
       }, a.value, { class: "block pr-10 w-full form-input peer" }), null, 16, qt),
       i("button", {
-        onClick: d[1] || (d[1] = M((n) => s.value = !s.value, ["stop"])),
+        onClick: c[1] || (c[1] = V((n) => s.value = !s.value, ["stop"])),
         class: "flex absolute inset-y-0 right-0 items-center pr-3 text-brand-700 hover:text-brand"
       }, [
         s.value ? (r(), W(F(Ut), {
@@ -999,20 +999,20 @@ const qt = ["value", "type"], _l = /* @__PURE__ */ Object.assign({ inheritAttrs:
   props: { branch: { type: Object, default: {} } },
   emits: ["branch-selected", "expand"],
   setup(e, { emit: m }) {
-    const t = e, s = m, a = y(!1);
+    const t = e, s = m, a = x(!1);
     return ue(() => {
       t.branch.current && s("expand", !0);
-    }), (l, d) => {
+    }), (l, c) => {
       const n = Se("simple-tree", !0);
-      return r(), c("div", {
+      return r(), d("div", {
         class: _([!e.branch.branches || !e.branch.branches.length ? "terminates" : "", l.$attrs.class])
       }, [
         i("div", Kt, [
-          e.branch.branches && e.branch.branches.length ? (r(), c(A, { key: 0 }, [
+          e.branch.branches && e.branch.branches.length ? (r(), d(A, { key: 0 }, [
             i("input", {
               type: "checkbox",
               id: "branch-" + e.branch.id,
-              onClick: d[0] || (d[0] = (o) => a.value = !a.value),
+              onClick: c[0] || (c[0] = (o) => a.value = !a.value),
               checked: a.value,
               class: "hidden"
             }, null, 8, Xt),
@@ -1023,18 +1023,18 @@ const qt = ["value", "type"], _l = /* @__PURE__ */ Object.assign({ inheritAttrs:
               (r(), W(ie(a.value ? F(rt) : F(ut)), { class: "w-4 h-4 border" }))
             ], 8, Gt)
           ], 64)) : D("", !0),
-          e.branch.current ? (r(), c("strong", Zt, C(e.branch.label), 1)) : (r(), c("a", {
+          e.branch.current ? (r(), d("strong", Zt, C(e.branch.label), 1)) : (r(), d("a", {
             key: 2,
             href: e.branch.path,
-            onClick: d[1] || (d[1] = M((o) => s("branch-selected", e.branch), ["prevent"]))
+            onClick: c[1] || (c[1] = V((o) => s("branch-selected", e.branch), ["prevent"]))
           }, C(e.branch.label), 9, Jt))
         ]),
-        e.branch.branches && e.branch.branches.length ? re((r(), c("ul", Qt, [
-          (r(!0), c(A, null, B(e.branch.branches, (o) => (r(), W(n, {
+        e.branch.branches && e.branch.branches.length ? re((r(), d("ul", Qt, [
+          (r(!0), d(A, null, L(e.branch.branches, (o) => (r(), W(n, {
             branch: o,
             key: o.id,
-            onBranchSelected: d[2] || (d[2] = (v) => s("branch-selected", v)),
-            onExpand: d[3] || (d[3] = (v) => {
+            onBranchSelected: c[2] || (c[2] = (v) => s("branch-selected", v)),
+            onExpand: c[3] || (c[3] = (v) => {
               a.value = v, s("expand", v);
             })
           }, null, 8, ["branch"]))), 128))
@@ -1049,17 +1049,24 @@ const qt = ["value", "type"], _l = /* @__PURE__ */ Object.assign({ inheritAttrs:
   props: {
     min: { type: Number, default: 0 },
     max: { type: Number, default: 100 },
+    vertical: Boolean,
     modelValue: { type: [Number, Array], validator(e) {
       return typeof e == "number" || e.every((m) => typeof m == "number");
     } }
   },
   emits: ["update:modelValue"],
   setup(e, { emit: m }) {
-    const t = e, s = m, a = U(), l = y({ x: null, y: null }), d = y({ w: null, h: null }), n = y(!1), o = y(null), v = y(0), u = S(() => {
+    const t = e, s = m, a = U(), l = x({ x: null, y: null }), c = x({ w: null, h: null }), n = x(!1), o = x(null), v = x(0), u = S(() => {
       const h = t.max, p = t.min;
-      return t.modelValue instanceof Array ? t.modelValue.map((x) => Math.max(Math.min(x, h), p) * 100 / (h - p)) : Math.max(Math.min(t.modelValue, h), p) * 100 / (h - p);
-    }), b = S(() => t.modelValue instanceof Array ? { left: Math.min(...u.value) + "%", width: Math.max(...u.value) - Math.min(...u.value) + "%" } : { width: u.value + "%" }), f = y({
-      class: "absolute top-0 w-5 h-5 bg-white rounded-full border-2 transition-colors duration-200 -translate-x-2.5 -translate-y-1.5 focus:ring-4 focus:outline-none border-vxvue cursor-grab touch-none hover:bg-vxvue focus:ring-vxvue/50",
+      return t.modelValue instanceof Array ? t.modelValue.map((y) => Math.max(Math.min(y, h), p) * 100 / (h - p)) : Math.max(Math.min(t.modelValue, h), p) * 100 / (h - p);
+    }), b = S(() => {
+      if (t.modelValue instanceof Array) {
+        const h = Math.min(...u.value) + "%", p = Math.max(...u.value) - Math.min(...u.value) + "%";
+        return t.vertical ? { bottom: h, height: p } : { left: h, width: p };
+      }
+      return t.vertical ? { bottom: 0, height: u.value + "%" } : { width: u.value + "%" };
+    }), f = x({
+      class: (t.vertical ? "left-0 -translate-x-1.5 translate-y-2.5" : "top-0 -translate-x-2.5 -translate-y-1.5") + " absolute w-5 h-5 bg-white rounded-full border-2 transition-colors duration-200 focus:ring-4 focus:outline-none border-vxvue cursor-grab touch-none hover:bg-vxvue focus:ring-vxvue/50",
       tabindex: 0,
       role: "slider",
       "aria-valuemin": t.min,
@@ -1067,35 +1074,37 @@ const qt = ["value", "type"], _l = /* @__PURE__ */ Object.assign({ inheritAttrs:
     }), g = (h) => {
       let p = parseFloat(h.toFixed(10));
       if (p = Math.min(t.max, Math.max(t.min, p)), t.modelValue instanceof Array) {
-        let x = [...t.modelValue];
-        x[v.value] = p, s("update:modelValue", x);
+        let y = [...t.modelValue];
+        y[v.value] = p, s("update:modelValue", y);
       } else
         s("update:modelValue", p);
     }, w = (h) => {
-      const { pageX: p, pageY: x } = h.touches ? h.touches[0] : h, V = (p - l.value.x) / d.value.w;
-      g(Math.floor((t.max - t.min) * V + t.min));
-    }, L = (h) => {
+      const { pageX: p, pageY: y } = h.touches ? h.touches[0] : h, M = t.vertical ? (-y + l.value.y) / c.value.h : (p - l.value.x) / c.value.w;
+      g(Math.floor((t.max - t.min) * M + t.min));
+    }, B = (h) => {
       n.value && (h.preventDefault(), w(h));
     }, I = (h) => {
       n.value = !0;
-      const p = document.documentElement, x = o.value.getBoundingClientRect();
+      const p = document.documentElement, y = o.value.getBoundingClientRect();
       l.value = {
-        x: x.left + p.scrollLeft - p.clientLeft,
-        y: x.top + p.scrollTop - p.clientTop
-      }, d.value = {
+        x: y.left + p.scrollLeft - p.clientLeft,
+        y: y.bottom + p.scrollTop - p.clientTop
+      }, c.value = {
         w: o.value.offsetWidth,
         h: o.value.offsetHeight
-      }, h.currentTarget.focus(), document.addEventListener("mousemove", L), document.addEventListener("mouseup", T);
+      }, h.currentTarget.focus(), document.addEventListener("mousemove", B), document.addEventListener("mouseup", T);
     }, T = () => {
-      n.value && (n.value = !1, document.removeEventListener("mousemove", L), document.removeEventListener("mouseup", T));
+      n.value && (n.value = !1, document.removeEventListener("mousemove", B), document.removeEventListener("mouseup", T));
     }, H = (h) => {
       h.keyCode >= 33 && h.keyCode <= 40 && h.preventDefault();
       const p = t.modelValue[v.value] ?? t.modelValue;
       switch (h.keyCode) {
         case 37:
+        case 40:
           g(p - 1);
           break;
         case 39:
+        case 38:
           g(p + 1);
           break;
         case 33:
@@ -1111,46 +1120,46 @@ const qt = ["value", "type"], _l = /* @__PURE__ */ Object.assign({ inheritAttrs:
           g(t.max);
       }
     };
-    return (h, p) => (r(), c("div", {
-      class: "relative w-full h-2 rounded-r-full rounded-l-full bg-slate-300",
+    return (h, p) => (r(), d("div", {
+      class: _(["relative  bg-slate-300", e.vertical ? "h-full w-2 rounded-t-full rounded-b-full" : "w-full h-2 rounded-r-full rounded-l-full"]),
       ref_key: "track",
       ref: o
     }, [
       i("div", {
-        class: "absolute h-full rounded-r-full rounded-l-full bg-vxvue",
+        class: _(["absolute bg-vxvue", e.vertical ? "w-full rounded-t-full rounded-b-full" : "h-full rounded-r-full rounded-l-full"]),
         style: Ve(b.value)
-      }, null, 4),
-      e.modelValue.length ? (r(!0), c(A, { key: 1 }, B(e.modelValue, (x, V) => (r(), c("button", O({
-        id: V ? null : F(a).id,
-        style: { left: u.value[V] + "%" },
-        "aria-valuenow": e.modelValue[V],
-        onFocus: (R) => v.value = V,
+      }, null, 6),
+      e.modelValue.length ? (r(!0), d(A, { key: 1 }, L(e.modelValue, (y, M) => (r(), d("button", O({
+        id: M ? null : F(a).id,
+        style: e.vertical ? { bottom: u.value[M] + "%" } : { left: u.value[M] + "%" },
+        "aria-valuenow": e.modelValue[M],
+        onFocus: (R) => v.value = M,
         onKeydown: H,
-        onMousedown: M((R) => {
-          v.value = V, I(R);
+        onMousedown: V((R) => {
+          v.value = M, I(R);
         }, ["prevent"]),
-        onTouchstart: M((R) => {
-          v.value = V, I(R);
+        onTouchstart: V((R) => {
+          v.value = M, I(R);
         }, ["prevent"]),
-        onTouchmove: L,
+        onTouchmove: B,
         onTouchend: T
-      }, f.value), null, 16, tl))), 256)) : (r(), c("button", O({
+      }, f.value), null, 16, tl))), 256)) : (r(), d("button", O({
         key: 0,
         id: F(a).id,
-        style: { left: u.value + "%" },
+        style: e.vertical ? { bottom: u.value + "%" } : { left: u.value + "%" },
         "aria-valuenow": e.modelValue,
-        onFocus: p[0] || (p[0] = (x) => v.value = 0),
+        onFocus: p[0] || (p[0] = (y) => v.value = 0),
         onKeydown: H,
-        onMousedown: p[1] || (p[1] = M((x) => {
-          v.value = 0, I(x);
+        onMousedown: p[1] || (p[1] = V((y) => {
+          v.value = 0, I(y);
         }, ["prevent"])),
-        onTouchstart: p[2] || (p[2] = M((x) => {
-          v.value = 0, I(x);
+        onTouchstart: p[2] || (p[2] = V((y) => {
+          v.value = 0, I(y);
         }, ["prevent"])),
-        onTouchmove: L,
+        onTouchmove: B,
         onTouchend: T
       }, f.value), null, 16, el))
-    ], 512));
+    ], 2));
   }
 });
 const ll = { class: "w-full divide-y divide-y-slate-900" }, al = { class: "text-white bg-slate-700" }, sl = ["onClick"], nl = { class: "flex items-center" }, ol = {
@@ -1188,17 +1197,17 @@ const ll = { class: "w-full divide-y divide-y-slate-900" }, al = { class: "text-
   },
   emits: ["before-sort", "after-sort"],
   setup(e, { emit: m }) {
-    const t = e, s = m, a = y(t.sortProp), l = y(t.sortDirection), d = S(() => {
+    const t = e, s = m, a = x(t.sortProp), l = x(t.sortDirection), c = S(() => {
       let o = t.rows.slice();
       const v = t.columns.find(({ prop: u }) => u === a.value);
       return v && (l.value === "asc" && v.sortAscFunction ? o.sort(v.sortAscFunction) : l.value === "desc" && v.sortDescFunction ? o.sort(v.sortDescFunction) : o.sort((u, b) => u[a.value] < b[a.value] ? l.value === "asc" ? -1 : 1 : u[a.value] > b[a.value] ? l.value === "asc" ? 1 : -1 : 0)), o.slice(t.offset || 0, (t.offset || 0) + (t.count || o.length));
     }), n = (o) => {
       s("before-sort", { prop: a.value, dir: l.value }), a.value === o ? l.value = l.value === "asc" ? "desc" : "asc" : (a.value = o, l.value = l.value || "asc"), le(() => s("after-sort", { prop: a.value, dir: l.value }));
     };
-    return (o, v) => (r(), c("table", ll, [
+    return (o, v) => (r(), d("table", ll, [
       i("thead", al, [
         i("tr", null, [
-          (r(!0), c(A, null, B(e.columns, (u) => (r(), c("th", {
+          (r(!0), d(A, null, L(e.columns, (u) => (r(), d("th", {
             scope: "col",
             class: _(["py-3 px-6 text-left", [
               { "cursor-pointer": u.sortable, active: a.value === u.prop },
@@ -1213,14 +1222,14 @@ const ll = { class: "w-full divide-y divide-y-slate-900" }, al = { class: "text-
             }, () => [
               i("div", nl, [
                 i("span", null, C(u.label), 1),
-                u.sortable ? (r(), c("svg", ol, [
-                  a.value === u.prop ? (r(), c("path", {
+                u.sortable ? (r(), d("svg", ol, [
+                  a.value === u.prop ? (r(), d("path", {
                     key: 0,
                     "stroke-linecap": "round",
                     "stroke-linejoin": "round",
                     "stroke-width": "2",
                     d: l.value === "asc" ? "M19 9l-7 7-7-7" : "M5 15l7-7 7 7"
-                  }, null, 8, rl)) : (r(), c("path", ul))
+                  }, null, 8, rl)) : (r(), d("path", ul))
                 ])) : D("", !0)
               ])
             ], !0)
@@ -1228,11 +1237,11 @@ const ll = { class: "w-full divide-y divide-y-slate-900" }, al = { class: "text-
         ])
       ]),
       i("tbody", null, [
-        (r(!0), c(A, null, B(d.value, (u) => (r(), c("tr", {
+        (r(!0), d(A, null, L(c.value, (u) => (r(), d("tr", {
           key: u[e.keyProperty],
           class: _(u.cssClass)
         }, [
-          (r(!0), c(A, null, B(e.columns, (b) => (r(), c("td", {
+          (r(!0), d(A, null, L(e.columns, (b) => (r(), d("td", {
             class: _(["py-3 px-6 whitespace-nowrap", { active: a.value === b.prop }])
           }, [
             P(o.$slots, b.prop, { row: u }, () => [
@@ -1254,7 +1263,7 @@ const ll = { class: "w-full divide-y divide-y-slate-900" }, al = { class: "text-
   },
   emits: ["update:active-index"],
   setup(e, { emit: m }) {
-    const t = e, s = m, a = y(t.items[t.activeIndex] || {}), l = S(() => {
+    const t = e, s = m, a = x(t.items[t.activeIndex] || {}), l = S(() => {
       let n = [];
       return t.items.forEach((o, v) => {
         o.disabled || n.push({ label: o.name, key: v });
@@ -1263,10 +1272,10 @@ const ll = { class: "w-full divide-y divide-y-slate-900" }, al = { class: "text-
     Y(() => t.activeIndex, (n) => {
       a.value = t.items[n] || {};
     });
-    const d = (n) => {
+    const c = (n) => {
       n.disabled || (a.value = n, s("update:active-index", t.items.indexOf(n)));
     };
-    return (n, o) => (r(), c(A, null, [
+    return (n, o) => (r(), d(A, null, [
       i("div", cl, [
         z(wt, {
           options: l.value,
@@ -1278,10 +1287,10 @@ const ll = { class: "w-full divide-y divide-y-slate-900" }, al = { class: "text-
       i("div", dl, [
         i("div", vl, [
           i("nav", ml, [
-            (r(!0), c(A, null, B(e.items, (v) => (r(), c("a", {
+            (r(!0), d(A, null, L(e.items, (v) => (r(), d("a", {
               key: v.name,
               href: "#",
-              onClick: M((u) => d(v), ["prevent"]),
+              onClick: V((u) => c(v), ["prevent"]),
               class: _([
                 a.value === v ? "border-vxvue-500 text-vxvue-600" : "border-transparent text-gray-900 hover:text-gray-700 hover:border-gray-300",
                 v.disabled ? "cursor-not-allowed text-gray-400 hover:border-transparent" : "",
@@ -1295,7 +1304,7 @@ const ll = { class: "w-full divide-y divide-y-slate-900" }, al = { class: "text-
                   E(C(v.name), 1)
                 ])
               ]),
-              v.badge ? (r(), c("span", {
+              v.badge ? (r(), d("span", {
                 key: 0,
                 class: _([
                   a.value === v ? "bg-vxvue-50 text-vxvue-700" : "bg-gray-200 text-gray-900",
@@ -1315,9 +1324,9 @@ export {
   gl as Confirm,
   ot as DateInput,
   bl as Datepicker,
-  xl as FormFileButton,
+  yl as FormFileButton,
   wt as FormSelect,
-  yl as FormSwitch,
+  xl as FormSwitch,
   wl as MessageToast,
   kl as Modal,
   $l as Pagination,