treqit-ui-library 1.4.20 → 1.4.27

package/dist/treqit-ui-library.js

@@ -1,13 +1,13 @@
-import { computed as i, createElementBlock as r, openBlock as n, normalizeStyle as x, normalizeClass as y, renderSlot as b, createCommentVNode as u, toDisplayString as v, createElementVNode as c, resolveComponent as q, withModifiers as M, createVNode as _, defineComponent as T, createTextVNode as H, createBlock as V, watch as D, onUnmounted as A, Teleport as P, Transition as C, withCtx as B, ref as z, withDirectives as W, vShow as L, Fragment as F, renderList as O, inject as U, getCurrentInstance as X, onMounted as J } from "vue";
-const p = (e, t) => {
+import { computed as u, createElementBlock as r, openBlock as n, normalizeStyle as w, normalizeClass as p, renderSlot as b, createCommentVNode as c, toDisplayString as g, createElementVNode as i, resolveComponent as D, withModifiers as M, createVNode as $, defineComponent as q, createTextVNode as U, createBlock as C, watch as T, onUnmounted as A, Teleport as X, Transition as B, withCtx as z, ref as k, withDirectives as P, vShow as O, onMounted as E, Fragment as F, renderList as R, inject as J, getCurrentInstance as K } from "vue";
+const v = (e, t) => {
   const a = e.__vccOpts || e;
   for (const [l, o] of t)
     a[l] = o;
   return a;
-}, K = {
+}, Q = {
   key: 0,
   class: "avatar-initials"
-}, Q = {
+}, Y = {
   __name: "Avatar",
   props: {
     size: {
@@ -30,13 +30,13 @@ const p = (e, t) => {
     }
   },
   setup(e) {
-    const t = e, a = i(() => [
+    const t = e, a = u(() => [
       "avatar",
       {
         "avatar--rounded-sm": t.rounded === "sm",
         "avatar--rounded-lg": t.rounded === "lg"
       }
-    ]), l = i(() => {
+    ]), l = u(() => {
       const o = {
         width: `${t.size}px`,
         height: `${t.size}px`,
@@ -46,18 +46,18 @@ const p = (e, t) => {
       return t.rounded === !0 || t.rounded === "" ? o.borderRadius = "50%" : t.rounded === !1 || t.rounded === 0 || t.rounded === "0" ? o.borderRadius = "0px" : typeof t.rounded == "number" && (o.borderRadius = `${t.rounded}px`), o;
     });
     return (o, s) => (n(), r("div", {
-      class: y(a.value),
-      style: x(l.value)
+      class: p(a.value),
+      style: w(l.value)
     }, [
       b(o.$slots, "default", {}, () => [
-        e.initials ? (n(), r("span", K, v(e.initials), 1)) : u("", !0)
+        e.initials ? (n(), r("span", Q, g(e.initials), 1)) : c("", !0)
       ], !0)
     ], 6));
   }
-}, Y = /* @__PURE__ */ p(Q, [["__scopeId", "data-v-b02c0c4e"]]), Z = ["type", "disabled"], ee = {
+}, Z = /* @__PURE__ */ v(Y, [["__scopeId", "data-v-b02c0c4e"]]), ee = ["type", "disabled"], te = {
   key: 0,
   class: "btn-loader"
-}, te = {
+}, ae = {
   __name: "Button",
   props: {
     variant: {
@@ -91,7 +91,7 @@ const p = (e, t) => {
   },
   emits: ["click"],
   setup(e) {
-    const t = e, a = i(() => [
+    const t = e, a = u(() => [
       "btn",
       `btn--${t.variant}`,
       `btn--${t.size === "sm" ? "small" : t.size}`,
@@ -102,35 +102,34 @@ const p = (e, t) => {
     ]);
     return (l, o) => (n(), r("button", {
       type: e.type,
-      class: y(a.value),
+      class: p(a.value),
       disabled: e.disabled || e.loading,
       onClick: o[0] || (o[0] = (s) => l.$emit("click"))
     }, [
-      e.loading ? (n(), r("div", ee, [...o[1] || (o[1] = [
-        c("div", { class: "simple-spinner" }, null, -1)
-      ])])) : u("", !0),
-      c("span", {
-        class: y(["btn-content", { "content-hidden": e.loading }])
+      e.loading ? (n(), r("div", te, [...o[1] || (o[1] = [
+        i("div", { class: "simple-spinner" }, null, -1)
+      ])])) : c("", !0),
+      i("span", {
+        class: p(["btn-content", { "content-hidden": e.loading }])
       }, [
         b(l.$slots, "default", {}, void 0, !0)
       ], 2)
-    ], 10, Z));
+    ], 10, ee));
   }
-}, ae = /* @__PURE__ */ p(te, [["__scopeId", "data-v-7e659005"]]), le = { class: "card" }, ne = {
+}, le = /* @__PURE__ */ v(ae, [["__scopeId", "data-v-067910e7"]]), ne = { class: "card" }, oe = {
   __name: "Card",
   setup(e) {
-    return (t, a) => (n(), r("div", le, [
+    return (t, a) => (n(), r("div", ne, [
       b(t.$slots, "default", {}, void 0, !0)
     ]));
   }
-}, oe = /* @__PURE__ */ p(ne, [["__scopeId", "data-v-82f14ba1"]]), se = {
+}, re = /* @__PURE__ */ v(oe, [["__scopeId", "data-v-82f14ba1"]]), G = ["primary", "secondary", "success", "warning", "danger", "elevated"], se = G.map((e) => `outlined-${e}`), ie = [...G, ...se], de = {
   __name: "Chip",
   props: {
     variant: {
       type: String,
       default: "secondary",
-      // 'primary', 'secondary', 'success', 'warning', 'danger'
-      validator: (e) => ["primary", "secondary", "success", "warning", "danger"].includes(e)
+      validator: (e) => ie.includes(e)
     },
     removable: {
       type: Boolean,
@@ -139,14 +138,14 @@ const p = (e, t) => {
   },
   emits: ["remove"],
   setup(e) {
-    const t = e, a = i(() => [
+    const t = e, a = u(() => [
       "chip",
       `chip--${t.variant}`
     ]);
     return (l, o) => {
-      const s = q("Icon");
+      const s = D("Icon");
       return n(), r("div", {
-        class: y(a.value)
+        class: p(a.value)
       }, [
         b(l.$slots, "default", {}, void 0, !0),
         e.removable ? (n(), r("button", {
@@ -155,16 +154,16 @@ const p = (e, t) => {
           onClick: o[0] || (o[0] = M((d) => l.$emit("remove"), ["stop"])),
           "aria-label": "Remove"
         }, [
-          _(s, {
+          $(s, {
             name: "close",
             size: "14",
             "stroke-width": "2.5"
           })
-        ])) : u("", !0)
+        ])) : c("", !0)
       ], 2);
     };
   }
-}, re = /* @__PURE__ */ p(se, [["__scopeId", "data-v-9815960f"]]), ie = /* @__PURE__ */ T({
+}, ue = /* @__PURE__ */ v(de, [["__scopeId", "data-v-27452944"]]), ce = /* @__PURE__ */ q({
   __name: "Column",
   props: {
     cols: { type: [String, Number], default: null },
@@ -175,7 +174,7 @@ const p = (e, t) => {
     xl: { type: [String, Number], default: null }
   },
   setup(e) {
-    const t = e, a = i(() => {
+    const t = e, a = u(() => {
       const l = ["col"], o = {
         cols: "col-",
         xs: "col-xs-",
@@ -189,12 +188,12 @@ const p = (e, t) => {
       return l;
     });
     return (l, o) => (n(), r("div", {
-      class: y(a.value)
+      class: p(a.value)
     }, [
       b(l.$slots, "default", {}, void 0, !0)
     ], 2));
   }
-}), de = /* @__PURE__ */ p(ie, [["__scopeId", "data-v-a5db8165"]]), ue = {
+}), fe = /* @__PURE__ */ v(ce, [["__scopeId", "data-v-a5db8165"]]), me = {
   __name: "Icon",
   props: {
     icon: {
@@ -217,7 +216,7 @@ const p = (e, t) => {
       medium: 24,
       large: 32,
       "x-large": 40
-    }, l = i(() => t.icon ? ["icon", "mdi", t.icon] : ["icon"]), o = i(() => {
+    }, l = u(() => t.icon ? ["icon", "mdi", t.icon] : ["icon"]), o = u(() => {
       let s = t.size;
       typeof t.size == "string" && a[t.size] && (s = a[t.size]);
       const d = {
@@ -226,21 +225,21 @@ const p = (e, t) => {
       return t.color && (d.color = t.color), d;
     });
     return (s, d) => (n(), r("i", {
-      class: y(l.value),
-      style: x(o.value),
+      class: p(l.value),
+      style: w(o.value),
       "aria-hidden": "true"
     }, null, 6));
   }
-}, E = /* @__PURE__ */ p(ue, [["__scopeId", "data-v-7cd4d2d4"]]), ce = ["for"], me = {
+}, j = /* @__PURE__ */ v(me, [["__scopeId", "data-v-7cd4d2d4"]]), ve = ["for"], pe = {
   key: 0,
   class: "date-picker__required"
-}, fe = { class: "date-picker__input-wrapper" }, pe = ["id", "value", "disabled", "readonly", "min", "max", "required"], ye = {
+}, ye = { class: "date-picker__input-wrapper" }, he = ["id", "value", "disabled", "readonly", "min", "max", "required"], ge = {
   key: 1,
   class: "date-picker__error"
-}, ve = {
+}, be = {
   key: 2,
   class: "date-picker__help"
-}, ge = /* @__PURE__ */ T({
+}, xe = /* @__PURE__ */ q({
   __name: "DatePicker",
   props: {
     modelValue: { default: "" },
@@ -259,7 +258,7 @@ const p = (e, t) => {
   },
   emits: ["update:modelValue", "change", "blur", "focus"],
   setup(e, { emit: t }) {
-    const a = e, l = t, o = i(() => `date-picker-${Math.random().toString(36).substr(2, 9)}`), s = i(() => [
+    const a = e, l = t, o = u(() => `date-picker-${Math.random().toString(36).substr(2, 9)}`), s = u(() => [
       "date-picker",
       `date-picker--${a.size}`,
       `date-picker--${a.variant}`,
@@ -269,35 +268,35 @@ const p = (e, t) => {
         "date-picker--error": a.errorMessage,
         "date-picker--required": a.required
       }
-    ]), d = i(() => [
+    ]), d = u(() => [
       "date-picker__input",
       {
         "date-picker__input--with-icon": a.showIcon
       }
     ]), f = (h) => {
-      const w = h.target;
-      l("update:modelValue", w.value);
+      const S = h.target;
+      l("update:modelValue", S.value);
     }, m = (h) => {
-      const w = h.target;
-      l("change", w.value);
-    }, g = (h) => {
+      const S = h.target;
+      l("change", S.value);
+    }, y = (h) => {
       l("blur", h);
-    }, S = (h) => {
+    }, x = (h) => {
       l("focus", h);
     };
-    return (h, w) => (n(), r("div", {
-      class: y(["date-picker", s.value])
+    return (h, S) => (n(), r("div", {
+      class: p(["date-picker", s.value])
     }, [
       e.label ? (n(), r("label", {
         key: 0,
         for: o.value,
         class: "date-picker__label"
       }, [
-        H(v(e.label) + " ", 1),
-        e.required ? (n(), r("span", me, "*")) : u("", !0)
-      ], 8, ce)) : u("", !0),
-      c("div", fe, [
-        c("input", {
+        U(g(e.label) + " ", 1),
+        e.required ? (n(), r("span", pe, "*")) : c("", !0)
+      ], 8, ve)) : c("", !0),
+      i("div", ye, [
+        i("input", {
           id: o.value,
           type: "date",
           value: e.modelValue,
@@ -306,29 +305,29 @@ const p = (e, t) => {
           min: e.min,
           max: e.max,
           required: e.required,
-          class: y(d.value),
+          class: p(d.value),
           onInput: f,
           onChange: m,
-          onBlur: g,
-          onFocus: S
-        }, null, 42, pe),
-        e.showIcon ? (n(), V(E, {
+          onBlur: y,
+          onFocus: x
+        }, null, 42, he),
+        e.showIcon ? (n(), C(j, {
           key: 0,
           icon: "mdi-calendar",
           class: "date-picker__icon"
-        })) : u("", !0)
+        })) : c("", !0)
       ]),
-      e.errorMessage ? (n(), r("div", ye, v(e.errorMessage), 1)) : u("", !0),
-      e.helpText && !e.errorMessage ? (n(), r("div", ve, v(e.helpText), 1)) : u("", !0)
+      e.errorMessage ? (n(), r("div", ge, g(e.errorMessage), 1)) : c("", !0),
+      e.helpText && !e.errorMessage ? (n(), r("div", be, g(e.helpText), 1)) : c("", !0)
     ], 2));
   }
-}), he = /* @__PURE__ */ p(ge, [["__scopeId", "data-v-44192e9d"]]), be = ["aria-labelledby"], xe = {
+}), we = /* @__PURE__ */ v(xe, [["__scopeId", "data-v-44192e9d"]]), _e = ["aria-labelledby"], $e = {
   key: 0,
   class: "dialog-header"
-}, $e = {
+}, ke = {
   id: "dialog-title",
   class: "dialog-title"
-}, _e = {
+}, Se = {
   __name: "Dialog",
   props: {
     modelValue: {
@@ -371,61 +370,61 @@ const p = (e, t) => {
       l("update:modelValue", !1);
     }, s = () => {
       a.persistent || o();
-    }, d = i(() => a.fullscreen || a.width ? "" : `dialog-content--${a.size}`), f = i(() => {
+    }, d = u(() => a.fullscreen || a.width ? "" : `dialog-content--${a.size}`), f = u(() => {
       if (a.fullscreen) return {};
       const m = {};
       return a.width && (m.maxWidth = typeof a.width == "number" || !isNaN(Number(a.width)) ? `${a.width}px` : a.width, m.width = m.maxWidth), m;
     });
-    return D(() => a.modelValue, (m) => {
+    return T(() => a.modelValue, (m) => {
       typeof document < "u" && (document.body.style.overflow = m ? "hidden" : "");
     }), A(() => {
       typeof document < "u" && (document.body.style.overflow = "");
-    }), (m, g) => {
-      const S = q("Icon");
-      return n(), V(P, { to: "body" }, [
-        _(C, { name: "dialog-fade" }, {
-          default: B(() => [
+    }), (m, y) => {
+      const x = D("Icon");
+      return n(), C(X, { to: "body" }, [
+        $(B, { name: "dialog-fade" }, {
+          default: z(() => [
             e.modelValue ? (n(), r("div", {
               key: 0,
               class: "dialog-overlay",
               onClick: s
             }, [
-              c("div", {
-                class: y(["dialog-content", [d.value, { "dialog-content--fullscreen": e.fullscreen }]]),
-                style: x(f.value),
+              i("div", {
+                class: p(["dialog-content", [d.value, { "dialog-content--fullscreen": e.fullscreen }]]),
+                style: w(f.value),
                 role: "dialog",
                 "aria-modal": "true",
                 "aria-labelledby": e.title ? "dialog-title" : void 0,
-                onClick: g[0] || (g[0] = M(() => {
+                onClick: y[0] || (y[0] = M(() => {
                 }, ["stop"]))
               }, [
-                e.title ? (n(), r("header", xe, [
-                  c("h2", $e, v(e.title), 1),
-                  c("button", {
+                e.title ? (n(), r("header", $e, [
+                  i("h2", ke, g(e.title), 1),
+                  i("button", {
                     onClick: o,
                     class: "dialog-close-btn",
                     "aria-label": "Close dialog"
                   }, [
-                    _(S, {
+                    $(x, {
                       icon: "mdi-close",
                       size: "24"
                     })
                   ])
-                ])) : u("", !0),
-                c("main", {
-                  class: y(["dialog-body", { scrollable: e.scrollable }])
+                ])) : c("", !0),
+                i("main", {
+                  class: p(["dialog-body", { scrollable: e.scrollable }])
                 }, [
                   b(m.$slots, "default", {}, void 0, !0)
                 ], 2)
-              ], 14, be)
-            ])) : u("", !0)
+              ], 14, _e)
+            ])) : c("", !0)
           ]),
           _: 3
         })
       ]);
     };
   }
-}, Se = /* @__PURE__ */ p(_e, [["__scopeId", "data-v-fcf7a3f1"]]), we = {
+}, Ie = /* @__PURE__ */ v(Se, [["__scopeId", "data-v-fcf7a3f1"]]), Ve = {
   __name: "Divider",
   props: {
     vertical: {
@@ -438,26 +437,26 @@ const p = (e, t) => {
     }
   },
   setup(e) {
-    const t = e, a = i(() => [
+    const t = e, a = u(() => [
       "divider",
       t.vertical ? "divider--vertical" : "divider--horizontal"
-    ]), l = i(() => t.vertical ? {} : { height: `${t.height}px` });
+    ]), l = u(() => t.vertical ? {} : { height: `${t.height}px` });
     return (o, s) => (n(), r("hr", {
-      class: y(a.value),
-      style: x(l.value)
+      class: p(a.value),
+      style: w(l.value)
     }, null, 6));
   }
-}, ke = /* @__PURE__ */ p(we, [["__scopeId", "data-v-97348551"]]), Ve = { class: "spinner-container" }, Ie = {
+}, Ce = /* @__PURE__ */ v(Ve, [["__scopeId", "data-v-97348551"]]), Be = { class: "spinner-container" }, ze = {
   __name: "ProgressSpinner",
   setup(e) {
-    return (t, a) => (n(), r("div", Ve, [...a[0] || (a[0] = [
-      c("div", { class: "spinner" }, null, -1)
+    return (t, a) => (n(), r("div", Be, [...a[0] || (a[0] = [
+      i("div", { class: "spinner" }, null, -1)
     ])]));
   }
-}, R = /* @__PURE__ */ p(Ie, [["__scopeId", "data-v-28112817"]]), Ce = {
+}, H = /* @__PURE__ */ v(ze, [["__scopeId", "data-v-28112817"]]), Ne = {
   key: 0,
   class: "placeholder"
-}, Be = ["src", "alt"], ze = {
+}, De = ["src", "alt"], Me = {
   __name: "Image",
   props: {
     src: {
@@ -487,15 +486,15 @@ const p = (e, t) => {
     }
   },
   setup(e) {
-    const t = e, a = z(!0), l = z(!1), o = () => {
+    const t = e, a = k(!0), l = k(!1), o = () => {
       a.value = !1, l.value = !1;
     }, s = () => {
       a.value = !1, l.value = !0;
     };
-    D(() => t.src, () => {
+    T(() => t.src, () => {
       a.value = !0, l.value = !1;
     }, { immediate: !0 });
-    const d = i(() => ({
+    const d = u(() => ({
       width: t.width,
       height: t.height,
       minWidth: t.width,
@@ -503,33 +502,33 @@ const p = (e, t) => {
       maxHeight: t.maxHeight
     }));
     return (f, m) => {
-      const g = q("Icon");
+      const y = D("Icon");
       return n(), r("div", {
         class: "image-container",
-        style: x(d.value)
+        style: w(d.value)
       }, [
-        a.value || l.value ? (n(), r("div", Ce, [
-          a.value ? (n(), V(R, { key: 0 })) : u("", !0),
-          l.value ? (n(), V(g, {
+        a.value || l.value ? (n(), r("div", Ne, [
+          a.value ? (n(), C(H, { key: 0 })) : c("", !0),
+          l.value ? (n(), C(y, {
             key: 1,
             name: "image-off",
             size: 48
-          })) : u("", !0)
-        ])) : u("", !0),
-        W(c("img", {
+          })) : c("", !0)
+        ])) : c("", !0),
+        P(i("img", {
           src: e.src,
           alt: e.alt,
           class: "image",
-          style: x({ objectFit: e.fit, maxHeight: e.maxHeight }),
+          style: w({ objectFit: e.fit, maxHeight: e.maxHeight }),
           onLoad: o,
           onError: s
-        }, null, 44, Be), [
-          [L, !a.value && !l.value]
+        }, null, 44, De), [
+          [O, !a.value && !l.value]
         ])
       ], 4);
     };
   }
-}, Ne = /* @__PURE__ */ p(ze, [["__scopeId", "data-v-a3997b8b"]]), qe = ["for"], De = { class: "input-container" }, Me = ["id", "type", "value", "placeholder", "disabled"], Te = {
+}, qe = /* @__PURE__ */ v(Me, [["__scopeId", "data-v-a3997b8b"]]), Te = ["for"], Ae = { class: "input-container" }, Pe = ["id", "type", "value", "placeholder", "disabled"], Oe = {
   __name: "Input",
   props: {
     modelValue: {
@@ -567,15 +566,15 @@ const p = (e, t) => {
       l("update:modelValue", s.target.value);
     };
     return (s, d) => (n(), r("div", {
-      class: y(["input-wrapper", a.class])
+      class: p(["input-wrapper", a.class])
     }, [
       e.label ? (n(), r("label", {
         key: 0,
         for: e.id,
         class: "input-label"
-      }, v(e.label), 9, qe)) : u("", !0),
-      c("div", De, [
-        c("input", {
+      }, g(e.label), 9, Te)) : c("", !0),
+      i("div", Ae, [
+        i("input", {
           id: e.id,
           type: e.type,
           value: e.modelValue,
@@ -583,74 +582,157 @@ const p = (e, t) => {
           placeholder: e.placeholder,
           disabled: e.disabled,
           class: "input-field"
-        }, null, 40, Me)
+        }, null, 40, Pe)
       ])
     ], 2));
   }
-}, Ae = /* @__PURE__ */ p(Te, [["__scopeId", "data-v-218a8bde"]]), Pe = {
+}, Ee = /* @__PURE__ */ v(Oe, [["__scopeId", "data-v-11c0c78b"]]), Fe = {
+  width: "28",
+  height: "28",
+  viewBox: "0 0 24 24",
+  fill: "none"
+}, Re = ["fill"], Ge = ["fill"], je = ["fill"], He = ["aria-modal"], Le = {
   __name: "NavigationDrawer",
   props: {
-    modelValue: {
-      type: Boolean,
-      required: !0
-    },
-    location: {
-      type: String,
-      default: "left",
-      // 'left' or 'right'
-      validator: (e) => ["left", "right"].includes(e)
-    },
     width: {
       type: [String, Number],
       default: 300
+    },
+    dark: {
+      type: Boolean,
+      default: !1
+    },
+    light: {
+      type: Boolean,
+      default: !1
     }
   },
-  emits: ["update:modelValue"],
-  setup(e, { emit: t }) {
-    const a = e, l = t, o = () => {
-      l("update:modelValue", !1);
-    }, s = i(() => [
-      "navigation-drawer",
-      `navigation-drawer--${a.location}`
-    ]), d = i(() => ({
-      width: `${a.width}px`
-    })), f = i(() => `slide-from-${a.location}`);
-    return D(() => a.modelValue, (m) => {
-      typeof document < "u" && (m ? document.body.style.overflow = "hidden" : document.body.style.overflow = "");
+  setup(e) {
+    const t = e, a = k(!1), l = k(!1), o = () => {
+      l.value = window.innerWidth <= 768, l.value || (a.value = !1);
+    };
+    E(() => {
+      o(), window.addEventListener("resize", o);
     }), A(() => {
-      typeof document < "u" && (document.body.style.overflow = "");
-    }), (m, g) => (n(), V(P, { to: "body" }, [
-      _(C, { name: "fade" }, {
-        default: B(() => [
-          e.modelValue ? (n(), r("div", {
+      window.removeEventListener("resize", o), document.body.style.overflow = "";
+    });
+    const s = () => {
+      a.value = !0, l.value && (document.body.style.overflow = "hidden");
+    }, d = () => {
+      a.value = !1, l.value && (document.body.style.overflow = "");
+    }, f = u(() => [
+      "navigation-drawer",
+      t.dark ? "navigation-drawer--dark" : "",
+      t.light ? "navigation-drawer--light" : "",
+      l.value ? "navigation-drawer--mobile" : "navigation-drawer--desktop"
+    ]), m = u(() => ({
+      width: typeof t.width == "number" ? `${t.width}px` : t.width
+    })), y = u(
+      () => t.dark ? "var(--surface-color, #fff)" : "var(--text-color, #222)"
+    );
+    return (x, h) => (n(), r("div", null, [
+      l.value ? (n(), r("button", {
+        key: 0,
+        class: "navigation-drawer__toggle-btn",
+        onClick: s,
+        "aria-label": "Open navigation drawer"
+      }, [
+        b(x.$slots, "toggle", {}, () => [
+          (n(), r("svg", Fe, [
+            i("rect", {
+              y: "5",
+              width: "24",
+              height: "2",
+              rx: "1",
+              fill: y.value
+            }, null, 8, Re),
+            i("rect", {
+              y: "11",
+              width: "24",
+              height: "2",
+              rx: "1",
+              fill: y.value
+            }, null, 8, Ge),
+            i("rect", {
+              y: "17",
+              width: "24",
+              height: "2",
+              rx: "1",
+              fill: y.value
+            }, null, 8, je)
+          ]))
+        ], !0)
+      ])) : c("", !0),
+      $(B, { name: "fade" }, {
+        default: z(() => [
+          l.value && a.value ? (n(), r("div", {
             key: 0,
-            class: "overlay",
-            onClick: o,
+            class: "navigation-drawer__overlay",
+            onClick: d,
             "aria-hidden": "true"
-          })) : u("", !0)
+          })) : c("", !0)
         ]),
         _: 1
       }),
-      _(C, { name: f.value }, {
-        default: B(() => [
-          e.modelValue ? (n(), r("aside", {
-            key: 0,
-            class: y(s.value),
-            style: x(d.value),
-            role: "dialog",
-            "aria-modal": "true"
+      $(B, {
+        name: l.value ? "slide-from-left" : null
+      }, {
+        default: z(() => [
+          P(i("aside", {
+            class: p([
+              ...f.value,
+              l.value && a.value ? "navigation-drawer--open" : ""
+            ]),
+            style: w(m.value),
+            role: "navigation",
+            "aria-modal": l.value ? "true" : void 0,
+            tabindex: "-1"
           }, [
-            b(m.$slots, "default", {}, void 0, !0)
-          ], 6)) : u("", !0)
+            l.value ? (n(), r("button", {
+              key: 0,
+              class: "navigation-drawer__close-btn",
+              onClick: d,
+              "aria-label": "Close navigation drawer"
+            }, [...h[0] || (h[0] = [
+              i("svg", {
+                width: "24",
+                height: "24",
+                viewBox: "0 0 24 24",
+                fill: "none"
+              }, [
+                i("line", {
+                  x1: "6",
+                  y1: "6",
+                  x2: "18",
+                  y2: "18",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  "stroke-linecap": "round"
+                }),
+                i("line", {
+                  x1: "18",
+                  y1: "6",
+                  x2: "6",
+                  y2: "18",
+                  stroke: "currentColor",
+                  "stroke-width": "2",
+                  "stroke-linecap": "round"
+                })
+              ], -1)
+            ])])) : c("", !0),
+            b(x.$slots, "default", {}, void 0, !0)
+          ], 14, He), [
+            [O, !l.value || a.value]
+          ])
         ]),
         _: 3
       }, 8, ["name"])
     ]));
   }
-}, Fe = /* @__PURE__ */ p(Pe, [["__scopeId", "data-v-a9459219"]]), Oe = ["aria-valuenow"], Ee = ["width", "height", "viewBox"], Re = ["cx", "cy", "r", "stroke-width"], Ge = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], je = {
+}, We = /* @__PURE__ */ v(Le, [["__scopeId", "data-v-bd9dc140"]]), Ue = ["aria-valuenow"], Xe = ["width", "height", "viewBox"], Je = ["cx", "cy", "r", "stroke-width"], Ke = ["cx", "cy", "r", "stroke-width", "stroke-dasharray", "stroke-dashoffset"], Qe = {
   key: 0,
   class: "progress-circular__content"
-}, $ = 44, He = {
+}, _ = 44, Ye = {
   __name: "Progress",
   props: {
     modelValue: {
@@ -676,14 +758,14 @@ const p = (e, t) => {
     }
   },
   setup(e) {
-    const t = e, a = i(() => ($ - t.width) / 2), l = i(() => 2 * Math.PI * a.value), o = i(() => ({
+    const t = e, a = u(() => (_ - t.width) / 2), l = u(() => 2 * Math.PI * a.value), o = u(() => ({
       width: `${t.size}px`,
       height: `${t.size}px`,
       color: t.color === "primary" ? "var(--primary-color)" : t.color
-    })), s = i(() => t.width / t.size * $), d = i(() => t.indeterminate ? null : l.value * (1 - t.modelValue / 100));
+    })), s = u(() => t.width / t.size * _), d = u(() => t.indeterminate ? null : l.value * (1 - t.modelValue / 100));
     return (f, m) => (n(), r("div", {
       class: "progress-circular",
-      style: x(o.value),
+      style: w(o.value),
       role: "progressbar",
       "aria-valuemin": "0",
       "aria-valuemax": "100",
@@ -693,33 +775,33 @@ const p = (e, t) => {
         xmlns: "http://www.w3.org/2000/svg",
         width: e.size,
         height: e.size,
-        viewBox: `0 0 ${$} ${$}`
+        viewBox: `0 0 ${_} ${_}`
       }, [
-        c("circle", {
+        i("circle", {
           class: "progress-circular__underlay",
           fill: "transparent",
-          cx: $ / 2,
-          cy: $ / 2,
+          cx: _ / 2,
+          cy: _ / 2,
           r: a.value,
           "stroke-width": s.value
-        }, null, 8, Re),
-        c("circle", {
+        }, null, 8, Je),
+        i("circle", {
           class: "progress-circular__overlay",
           fill: "transparent",
-          cx: $ / 2,
-          cy: $ / 2,
+          cx: _ / 2,
+          cy: _ / 2,
           r: a.value,
           "stroke-width": s.value,
           "stroke-dasharray": l.value,
           "stroke-dashoffset": d.value
-        }, null, 8, Ge)
-      ], 8, Ee)),
-      f.$slots.default ? (n(), r("div", je, [
+        }, null, 8, Ke)
+      ], 8, Xe)),
+      f.$slots.default ? (n(), r("div", Qe, [
         b(f.$slots, "default", {}, void 0, !0)
-      ])) : u("", !0)
-    ], 12, Oe));
+      ])) : c("", !0)
+    ], 12, Ue));
   }
-}, We = /* @__PURE__ */ p(He, [["__scopeId", "data-v-2e383161"]]), Le = {
+}, Ze = /* @__PURE__ */ v(Ye, [["__scopeId", "data-v-2e383161"]]), et = {
   __name: "Row",
   props: {
     justify: {
@@ -743,7 +825,7 @@ const p = (e, t) => {
     }
   },
   setup(e) {
-    const t = e, a = i(() => ({
+    const t = e, a = u(() => ({
       justifyContent: t.justify,
       alignItems: t.align,
       gap: t.gap,
@@ -751,16 +833,16 @@ const p = (e, t) => {
     }));
     return (l, o) => (n(), r("div", {
       class: "flex-row",
-      style: x(a.value)
+      style: w(a.value)
     }, [
       b(l.$slots, "default", {}, void 0, !0)
     ], 4));
   }
-}, Ue = /* @__PURE__ */ p(Le, [["__scopeId", "data-v-fc69ad3e"]]), Xe = ["for"], Je = { class: "select-container" }, Ke = ["id", "value", "disabled", "multiple"], Qe = ["selected"], Ye = ["value"], Ze = {
+}, tt = /* @__PURE__ */ v(et, [["__scopeId", "data-v-fc69ad3e"]]), at = ["for"], lt = { class: "select-container" }, nt = ["id", "value", "disabled", "multiple"], ot = ["selected"], rt = ["value"], st = {
   key: 0,
   class: "select-icon",
   "aria-hidden": "true"
-}, et = {
+}, it = {
   __name: "Select",
   props: {
     modelValue: {
@@ -803,7 +885,7 @@ const p = (e, t) => {
   emits: ["update:modelValue"],
   setup(e, { emit: t }) {
     const a = e, l = t;
-    i(() => !a.options || a.options.length === 0 ? [] : typeof a.options[0] == "string" ? a.options.map((s) => ({ text: s, value: s })) : a.options);
+    u(() => !a.options || a.options.length === 0 ? [] : typeof a.options[0] == "string" ? a.options.map((s) => ({ text: s, value: s })) : a.options);
     const o = (s) => {
       if (a.multiple) {
         const d = Array.from(s.target.selectedOptions).map((f) => f.value);
@@ -812,37 +894,37 @@ const p = (e, t) => {
         l("update:modelValue", s.target.value);
     };
     return (s, d) => {
-      const f = q("Icon");
+      const f = D("Icon");
       return n(), r("div", {
-        class: y(["select-wrapper", a.class])
+        class: p(["select-wrapper", a.class])
       }, [
         e.label ? (n(), r("label", {
           key: 0,
           for: e.id,
           class: "select-label"
-        }, v(e.label), 9, Xe)) : u("", !0),
-        c("div", Je, [
-          c("select", {
+        }, g(e.label), 9, at)) : c("", !0),
+        i("div", lt, [
+          i("select", {
             id: e.id,
             value: e.modelValue,
             onChange: o,
             disabled: e.disabled,
             multiple: e.multiple,
-            class: y([{ "no-arrow": e.hideArrow }, "select-input"])
+            class: p([{ "no-arrow": e.hideArrow }, "select-input"])
           }, [
             e.placeholder ? (n(), r("option", {
               key: 0,
               value: "",
               disabled: "",
               selected: !e.modelValue
-            }, v(e.placeholder), 9, Qe)) : u("", !0),
-            (n(!0), r(F, null, O(e.options, (m) => (n(), r("option", {
+            }, g(e.placeholder), 9, ot)) : c("", !0),
+            (n(!0), r(F, null, R(e.options, (m) => (n(), r("option", {
               key: m.value,
               value: m.value
-            }, v(m.text), 9, Ye))), 128))
-          ], 42, Ke),
-          e.hideArrow ? u("", !0) : (n(), r("div", Ze, [
-            _(f, {
+            }, g(m.text), 9, rt))), 128))
+          ], 42, nt),
+          e.hideArrow ? c("", !0) : (n(), r("div", st, [
+            $(f, {
               icon: "mdi-chevron-down",
               size: "20"
             })
@@ -851,15 +933,15 @@ const p = (e, t) => {
       ], 2);
     };
   }
-}, tt = /* @__PURE__ */ p(et, [["__scopeId", "data-v-a36629f1"]]), at = { class: "spacer" }, lt = {
+}, dt = /* @__PURE__ */ v(it, [["__scopeId", "data-v-0e059790"]]), ut = { class: "spacer" }, ct = {
   __name: "Spacer",
   setup(e) {
-    return (t, a) => (n(), r("div", at));
+    return (t, a) => (n(), r("div", ut));
   }
-}, nt = /* @__PURE__ */ p(lt, [["__scopeId", "data-v-370a82d1"]]), ot = { class: "textarea-wrapper" }, st = ["for"], rt = ["id", "value", "placeholder", "rows", "maxlength"], it = {
+}, ft = /* @__PURE__ */ v(ct, [["__scopeId", "data-v-370a82d1"]]), mt = { class: "textarea-wrapper" }, vt = ["for"], pt = ["id", "value", "placeholder", "rows", "maxlength"], yt = {
   key: 1,
   class: "error-message"
-}, dt = {
+}, ht = {
   __name: "TextArea",
   props: {
     id: {
@@ -893,26 +975,26 @@ const p = (e, t) => {
   },
   emits: ["update:modelValue"],
   setup(e) {
-    return (t, a) => (n(), r("div", ot, [
+    return (t, a) => (n(), r("div", mt, [
       e.label ? (n(), r("label", {
         key: 0,
         for: e.id,
         class: "textarea-label"
-      }, v(e.label), 9, st)) : u("", !0),
-      c("textarea", {
+      }, g(e.label), 9, vt)) : c("", !0),
+      i("textarea", {
         id: e.id,
         value: e.modelValue,
         placeholder: e.placeholder,
         rows: e.rows,
         maxlength: e.maxlength,
         onInput: a[0] || (a[0] = (l) => t.$emit("update:modelValue", l.target.value)),
-        class: y(["textarea-input", { "has-error": e.error }])
-      }, null, 42, rt),
-      e.error ? (n(), r("p", it, v(e.error), 1)) : u("", !0)
+        class: p(["textarea-input", { "has-error": e.error }])
+      }, null, 42, pt),
+      e.error ? (n(), r("p", yt, g(e.error), 1)) : c("", !0)
     ]));
   }
-}, ut = /* @__PURE__ */ p(dt, [["__scopeId", "data-v-99d40ec4"]]);
-class ct {
+}, gt = /* @__PURE__ */ v(ht, [["__scopeId", "data-v-003408a6"]]);
+class bt {
   static newGuid() {
     return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(t) {
       const a = Math.random() * 16 | 0;
@@ -932,12 +1014,12 @@ class ct {
     return "00000000-0000-0000-0000-000000000000";
   }
 }
-const mt = { class: "input-container" }, ft = ["id", "type", "value", "autocomplete", "maxlength"], pt = ["for"], yt = { class: "error-container" }, vt = /* @__PURE__ */ T({
+const xt = { class: "input-container" }, wt = ["id", "type", "value", "autocomplete", "maxlength"], _t = ["for"], $t = { class: "error-container" }, kt = /* @__PURE__ */ q({
   __name: "TextField",
   props: {
     id: {
       type: String,
-      default: () => `textfield-${ct.newGuid()}`
+      default: () => `textfield-${bt.newGuid()}`
     },
     label: {
       type: String,
@@ -974,75 +1056,75 @@ const mt = { class: "input-container" }, ft = ["id", "type", "value", "autocompl
   },
   emits: ["update:modelValue"],
   setup(e, { expose: t, emit: a }) {
-    const l = e, o = a, s = z([]), d = z(!0), f = U("form", null), m = X(), g = async () => {
+    const l = e, o = a, s = k([]), d = k(!0), f = J("form", null), m = K(), y = async () => {
       s.value = [];
-      let I = !0;
-      for (const k of l.rules) {
-        const N = k(l.modelValue);
-        N !== !0 && (I = !1, s.value.push(N));
+      let V = !0;
+      for (const I of l.rules) {
+        const N = I(l.modelValue);
+        N !== !0 && (V = !1, s.value.push(N));
       }
-      return { valid: I, errors: s.value };
-    }, S = () => {
+      return { valid: V, errors: s.value };
+    }, x = () => {
       o("update:modelValue", ""), h();
     }, h = () => {
       s.value = [], d.value = !0;
-    }, w = (I) => {
-      const k = I.target;
-      o("update:modelValue", k.value), d.value || g();
-    }, G = () => {
-      d.value = !1, l.trim && typeof l.modelValue == "string" && o("update:modelValue", l.modelValue.trim()), g();
+    }, S = (V) => {
+      const I = V.target;
+      o("update:modelValue", I.value), d.value || y();
+    }, L = () => {
+      d.value = !1, l.trim && typeof l.modelValue == "string" && o("update:modelValue", l.modelValue.trim()), y();
     };
-    return J(() => {
+    return E(() => {
       f && m && f.register({
         id: l.id,
-        validate: g,
-        reset: S,
+        validate: y,
+        reset: x,
         resetValidation: h
       });
     }), A(() => {
       f && m && f.unregister({ id: l.id });
     }), t({
-      validate: g,
-      reset: S,
+      validate: y,
+      reset: x,
       resetValidation: h,
       id: l.id,
       errors: s
-    }), (I, k) => (n(), r("div", {
-      class: y(["text-field-wrapper", { "has-value": e.modelValue }])
+    }), (V, I) => (n(), r("div", {
+      class: p(["text-field-wrapper", { "has-value": e.modelValue }])
     }, [
-      c("div", mt, [
-        c("input", {
+      i("div", xt, [
+        i("input", {
           id: e.id,
           type: e.type,
           value: e.modelValue,
           placeholder: " ",
-          onInput: w,
-          onBlur: G,
+          onInput: S,
+          onBlur: L,
           class: "text-field-input",
           autocomplete: e.autocomplete,
           maxlength: e.maxlength
-        }, null, 40, ft),
+        }, null, 40, wt),
         e.label ? (n(), r("label", {
           key: 0,
           for: e.id,
           class: "text-field-label"
-        }, v(e.placeholder ? e.placeholder : e.label), 9, pt)) : u("", !0),
-        c("fieldset", {
+        }, g(e.placeholder ? e.placeholder : e.label), 9, _t)) : c("", !0),
+        i("fieldset", {
           "aria-hidden": "true",
-          class: y(["text-field-fieldset", { "has-error": s.value.length > 0 }])
-        }, [...k[0] || (k[0] = [
-          c("legend", { class: "text-field-legend" }, null, -1)
+          class: p(["text-field-fieldset", { "has-error": s.value.length > 0 }])
+        }, [...I[0] || (I[0] = [
+          i("legend", { class: "text-field-legend" }, null, -1)
         ])], 2)
       ]),
-      c("div", yt, [
-        (n(!0), r(F, null, O(s.value, (N, j) => (n(), r("p", {
-          key: j,
+      i("div", $t, [
+        (n(!0), r(F, null, R(s.value, (N, W) => (n(), r("p", {
+          key: W,
           class: "error-message"
-        }, v(N), 1))), 128))
+        }, g(N), 1))), 128))
       ])
     ], 2));
   }
-}), gt = /* @__PURE__ */ p(vt, [["__scopeId", "data-v-f4c602d7"]]), ht = ["aria-label"], bt = { class: "tooltip-content" }, xt = {
+}), St = /* @__PURE__ */ v(kt, [["__scopeId", "data-v-babd6e9f"]]), It = ["aria-label"], Vt = { class: "tooltip-content" }, Ct = {
   __name: "Tooltip",
   props: {
     text: {
@@ -1061,11 +1143,11 @@ const mt = { class: "input-container" }, ft = ["id", "type", "value", "autocompl
     }
   },
   setup(e) {
-    const t = e, a = z(!1), l = () => {
+    const t = e, a = k(!1), l = () => {
       t.disabled || (a.value = !0);
     }, o = () => {
       a.value = !1;
-    }, s = i(() => [
+    }, s = u(() => [
       "tooltip",
       `tooltip--${t.location}`
     ]);
@@ -1079,21 +1161,21 @@ const mt = { class: "input-container" }, ft = ["id", "type", "value", "autocompl
       "aria-label": e.text
     }, [
       b(d.$slots, "default", {}, void 0, !0),
-      _(C, { name: "tooltip-fade" }, {
-        default: B(() => [
+      $(B, { name: "tooltip-fade" }, {
+        default: z(() => [
           a.value ? (n(), r("div", {
             key: 0,
-            class: y(s.value)
+            class: p(s.value)
           }, [
-            c("div", bt, v(e.text), 1),
-            f[0] || (f[0] = c("div", { class: "tooltip-arrow" }, null, -1))
-          ], 2)) : u("", !0)
+            i("div", Vt, g(e.text), 1),
+            f[0] || (f[0] = i("div", { class: "tooltip-arrow" }, null, -1))
+          ], 2)) : c("", !0)
         ]),
         _: 1
       })
-    ], 40, ht));
+    ], 40, It));
   }
-}, $t = /* @__PURE__ */ p(xt, [["__scopeId", "data-v-66afe288"]]), _t = {
+}, Bt = /* @__PURE__ */ v(Ct, [["__scopeId", "data-v-66afe288"]]), zt = {
   __name: "Overlay",
   props: {
     modelValue: {
@@ -1111,46 +1193,46 @@ const mt = { class: "input-container" }, ft = ["id", "type", "value", "autocompl
     function o() {
       l("update:modelValue", !1);
     }
-    return D(() => a.modelValue, (s) => {
+    return T(() => a.modelValue, (s) => {
       !a.contained && typeof document < "u" && (document.body.style.overflow = s ? "hidden" : "");
-    }), (s, d) => (n(), V(C, { name: "overlay-fade" }, {
-      default: B(() => [
+    }), (s, d) => (n(), C(B, { name: "overlay-fade" }, {
+      default: z(() => [
         e.modelValue ? (n(), r("div", {
           key: 0,
-          class: y(["overlay", { "overlay--contained": e.contained }]),
+          class: p(["overlay", { "overlay--contained": e.contained }]),
           onClick: M(o, ["self"])
         }, [
           b(s.$slots, "default", {}, void 0, !0)
-        ], 2)) : u("", !0)
+        ], 2)) : c("", !0)
       ]),
       _: 3
     }));
   }
-}, St = /* @__PURE__ */ p(_t, [["__scopeId", "data-v-45f15f75"]]), wt = (e) => {
-  e.component("Avatar", Y), e.component("Button", ae), e.component("Card", oe), e.component("Chip", re), e.component("Column", de), e.component("DatePicker", he), e.component("Dialog", Se), e.component("Divider", ke), e.component("Icon", E), e.component("Overlay", St), e.component("Image", Ne), e.component("Input", Ae), e.component("NavigationDrawer", Fe), e.component("Progress", We), e.component("ProgressSpinner", R), e.component("Row", Ue), e.component("Select", tt), e.component("Spacer", nt), e.component("TextArea", ut), e.component("TextField", gt), e.component("Tooltip", $t);
-}, Vt = { install: wt };
+}, Nt = /* @__PURE__ */ v(zt, [["__scopeId", "data-v-45f15f75"]]), Dt = (e) => {
+  e.component("Avatar", Z), e.component("Button", le), e.component("Card", re), e.component("Chip", ue), e.component("Column", fe), e.component("DatePicker", we), e.component("Dialog", Ie), e.component("Divider", Ce), e.component("Icon", j), e.component("Overlay", Nt), e.component("Image", qe), e.component("Input", Ee), e.component("NavigationDrawer", We), e.component("Progress", Ze), e.component("ProgressSpinner", H), e.component("Row", tt), e.component("Select", dt), e.component("Spacer", ft), e.component("TextArea", gt), e.component("TextField", St), e.component("Tooltip", Bt);
+}, qt = { install: Dt };
 export {
-  Y as Avatar,
-  ae as Button,
-  oe as Card,
-  re as Chip,
-  de as Column,
-  he as DatePicker,
-  Se as Dialog,
-  ke as Divider,
-  E as Icon,
-  Ne as Image,
-  Ae as Input,
-  Fe as NavigationDrawer,
-  St as Overlay,
-  We as Progress,
-  R as ProgressSpinner,
-  Ue as Row,
-  tt as Select,
-  nt as Spacer,
-  ut as TextArea,
-  gt as TextField,
-  $t as Tooltip,
-  Vt as default,
-  wt as install
+  Z as Avatar,
+  le as Button,
+  re as Card,
+  ue as Chip,
+  fe as Column,
+  we as DatePicker,
+  Ie as Dialog,
+  Ce as Divider,
+  j as Icon,
+  qe as Image,
+  Ee as Input,
+  We as NavigationDrawer,
+  Nt as Overlay,
+  Ze as Progress,
+  H as ProgressSpinner,
+  tt as Row,
+  dt as Select,
+  ft as Spacer,
+  gt as TextArea,
+  St as TextField,
+  Bt as Tooltip,
+  qt as default,
+  Dt as install
 };