@defaultusr/dai-ui 1.1.9 → 1.1.11

package/dist/main.js

@@ -1,26 +1,26 @@
 import { Combobox as te, ComboboxInput as oe, injectCombobox as ae, ComboboxOptions as le, ComboboxOption as ie, useFormControl as A, PopoverDialog as ne, MenuItems as se, MenuItem as re, Tab as de, TabList as ue } from "vue-composable-ui";
-import { Menu as St, Popover as Ut, TabContainer as Nt, TabPanel as Xt } from "vue-composable-ui";
-import { reactive as ce, watch as T, onUnmounted as R, defineComponent as v, createElementBlock as u, openBlock as l, renderSlot as p, createTextVNode as E, toDisplayString as k, normalizeClass as w, createBlock as f, createCommentVNode as h, createElementVNode as d, computed as $, createVNode as V, normalizeProps as me, guardReactiveProps as fe, withCtx as c, Transition as P, mergeModels as M, useModel as x, useId as L, mergeProps as _, unref as r, inject as ve, Fragment as I, useTemplateRef as q, ref as N, onMounted as j, withDirectives as F, renderList as X, vModelSelect as pe, vModelText as he, vModelCheckbox as be, vModelRadio as ye, resolveDynamicComponent as ge, nextTick as we, normalizeStyle as U, Teleport as Z, TransitionGroup as ke, withModifiers as $e } from "vue";
+import { Menu as St, Popover as Ut, TabContainer as Dt, TabPanel as Nt } from "vue-composable-ui";
+import { reactive as ce, watch as T, onUnmounted as Y, defineComponent as v, createElementBlock as u, openBlock as l, renderSlot as p, createTextVNode as E, toDisplayString as k, normalizeClass as w, createBlock as m, createCommentVNode as h, createElementVNode as d, computed as _, createVNode as V, normalizeProps as fe, guardReactiveProps as me, withCtx as c, Transition as P, mergeModels as M, useModel as $, useId as L, mergeProps as x, unref as r, inject as ve, Fragment as I, useTemplateRef as q, ref as D, onMounted as j, withDirectives as O, renderList as N, vModelSelect as pe, vModelText as he, vModelCheckbox as be, vModelRadio as ye, resolveDynamicComponent as ge, nextTick as we, normalizeStyle as U, Teleport as R, TransitionGroup as ke, withModifiers as $e } from "vue";
 import './assets/main.css';function xe(e, ...t) {
   let o = [];
-  const a = ce(t);
-  function i() {
-    a.length && (e.classList.add(...a), o = [...a]);
+  const i = ce(t);
+  function a() {
+    i.length && (e.classList.add(...i), o = [...i]);
   }
   function s() {
     e.classList.remove(...o);
   }
   return T(
-    a,
+    i,
     () => {
-      s(), i();
+      s(), a();
     },
     { immediate: !0 }
-  ), R(s), {
-    classList: a
+  ), Y(s), {
+    classList: i
   };
 }
-const _e = { class: "dai-label" }, O = /* @__PURE__ */ v({
+const _e = { class: "dai-label" }, F = /* @__PURE__ */ v({
   __name: "label",
   props: {
     text: {}
@@ -32,7 +32,7 @@ const _e = { class: "dai-label" }, O = /* @__PURE__ */ v({
       ])
     ]));
   }
-}), Be = { class: "dai-hint" }, D = /* @__PURE__ */ v({
+}), Be = { class: "dai-hint" }, X = /* @__PURE__ */ v({
   __name: "hint",
   props: {
     text: {}
@@ -69,7 +69,7 @@ const _e = { class: "dai-label" }, O = /* @__PURE__ */ v({
         "dai-form-control__input-group--invalid": e.invalid
       }])
     }, [
-      e.label ? (l(), f(O, {
+      e.label ? (l(), m(F, {
         key: 0,
         text: e.label,
         for: e.labelFor,
@@ -104,32 +104,32 @@ const _e = { class: "dai-label" }, O = /* @__PURE__ */ v({
     invalid: { type: Boolean }
   },
   setup(e) {
-    const t = e, o = $(() => t.variant ? t.variant : t.muted ? "muted" : t.outlined ? "outlined" : "flat"), a = $(() => t.size ? t.size : t.sm ? "small" : t.lg ? "large" : "medium");
-    return (i, s) => (l(), u("div", {
+    const t = e, o = _(() => t.variant ? t.variant : t.muted ? "muted" : t.outlined ? "outlined" : "flat"), i = _(() => t.size ? t.size : t.sm ? "small" : t.lg ? "large" : "medium");
+    return (a, s) => (l(), u("div", {
       class: w(["dai-form-control", {
         "dai-form-control--label-inline": e.labelPosition === "inline",
         "dai-form-control--invalid": e.invalid,
-        "dai-form-control--lg": a.value === "large"
+        "dai-form-control--lg": i.value === "large"
       }])
     }, [
-      e.label && e.labelPosition !== "inside" ? (l(), f(O, {
+      e.label && e.labelPosition !== "inside" ? (l(), m(F, {
         key: 0,
         for: e.labelFor,
         text: e.label
       }, null, 8, ["for", "text"])) : h("", !0),
       d("div", Ce, [
-        V(Me, me(fe({
+        V(Me, fe(me({
           ...t,
           label: e.labelPosition === "inside" ? e.label : void 0,
           variant: o.value,
-          size: a.value
+          size: i.value
         })), {
           default: c(() => [
-            p(i.$slots, "default")
+            p(a.$slots, "default")
           ]),
           _: 3
         }, 16),
-        e.hint ? (l(), f(D, {
+        e.hint ? (l(), m(X, {
           key: 0,
           text: e.hint,
           class: "dai-form-control__hint"
@@ -180,19 +180,19 @@ const _e = { class: "dai-label" }, O = /* @__PURE__ */ v({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, o = x(e, "modelValue"), a = t.id || L();
-    return (i, s) => (l(), f(S, _(t, {
-      labelFor: r(a),
-      class: i.$attrs.class
+    const t = e, o = $(e, "modelValue"), i = t.id || L();
+    return (a, s) => (l(), m(S, x(t, {
+      labelFor: r(i),
+      class: a.$attrs.class
     }), {
       default: c(() => [
-        V(r(te), _({ ...i.$attrs, class: void 0 }, {
-          id: r(a),
+        V(r(te), x({ ...a.$attrs, class: void 0 }, {
+          id: r(i),
           modelValue: o.value,
           "onUpdate:modelValue": s[0] || (s[0] = (n) => o.value = n)
         }), {
           default: c(() => [
-            p(i.$slots, "default")
+            p(a.$slots, "default")
           ]),
           _: 3
         }, 16, ["id", "modelValue"])
@@ -203,7 +203,7 @@ const _e = { class: "dai-label" }, O = /* @__PURE__ */ v({
 }), wt = /* @__PURE__ */ v({
   __name: "comboboxInput",
   setup(e) {
-    return (t, o) => (l(), f(r(oe), { class: "dai-form-control__input-group__control" }, {
+    return (t, o) => (l(), m(r(oe), { class: "dai-form-control__input-group__control" }, {
       default: c(() => [
         p(t.$slots, "default")
       ]),
@@ -222,25 +222,21 @@ const _e = { class: "dai-label" }, O = /* @__PURE__ */ v({
     const t = ve(ae);
     if (!t)
       throw new Error("Combobox injectable context is not provided");
-    const o = $(() => ({
-      ...t.activatorAttrs.value,
-      onclick: () => t.isOpen.value ? t.close({ focus: !0 }) : t.open({ focus: !1 })
-    }));
-    return T(
-      o,
-      (a) => {
-        console.log("btnAttrs changed:", a);
-      },
-      { immediate: !0 }
-    ), (a, i) => (l(), u("button", _(o.value, {
+    function o() {
+      t.isOpen.value ? t.close({ focus: !0 }) : t.open({ focus: !1 });
+    }
+    return (i, a) => (l(), u("button", x(r(t).activatorAttrs.value, {
+      onKeydown: a[0] || (a[0] = //@ts-ignore
+      (...s) => r(t).activatorOnKeyDown && r(t).activatorOnKeyDown(...s)),
+      onClick: o,
       type: "button",
       class: "dai-form-control__input-group__control dai-combobox-btn"
     }), [
-      p(a.$slots, "default", {}, () => [
+      p(i.$slots, "default", {}, () => [
         r(t).displayValue.value ? (l(), u(I, { key: 1 }, [
           E(k(r(t).displayValue), 1)
         ], 64)) : (l(), u("span", Le, k(e.placeholder || "Select..."), 1)),
-        i[0] || (i[0] = d("svg", {
+        a[1] || (a[1] = d("svg", {
           class: "dai-combobox-btn__chevron",
           role: "presentation",
           xmlns: "http://www.w3.org/2000/svg",
@@ -259,7 +255,7 @@ const _e = { class: "dai-label" }, O = /* @__PURE__ */ v({
 }), Te = /* @__PURE__ */ v({
   __name: "comboboxOptions",
   setup(e) {
-    return (t, o) => (l(), f(P, {
+    return (t, o) => (l(), m(P, {
       "enter-from-class": "dai-combobox-options--anim",
       "leave-to-class": "dai-combobox-options--anim"
     }, {
@@ -285,16 +281,16 @@ const _e = { class: "dai-label" }, O = /* @__PURE__ */ v({
     value: {}
   },
   setup(e) {
-    return (t, o) => (l(), f(r(ie), {
+    return (t, o) => (l(), m(r(ie), {
       value: e.value,
       class: "dai-combobox-option"
     }, {
-      default: c(({ isActive: a, isSelected: i }) => [
+      default: c(({ isActive: i, isSelected: a }) => [
         p(t.$slots, "default", {
-          isActive: a,
-          isSelected: i
+          isActive: i,
+          isSelected: a
         }),
-        i ? (l(), u("svg", Pe, [...o[0] || (o[0] = [
+        a ? (l(), u("svg", Pe, [...o[0] || (o[0] = [
           d("path", {
             fill: "currentColor",
             "fill-rule": "evenodd",
@@ -308,27 +304,27 @@ const _e = { class: "dai-label" }, O = /* @__PURE__ */ v({
   }
 }), Ie = (e, t) => {
   const o = e.__vccOpts || e;
-  for (const [a, i] of t)
-    o[a] = i;
+  for (const [i, a] of t)
+    o[i] = a;
   return o;
-}, je = {}, Fe = {
+}, je = {}, Oe = {
   type: "button",
   class: "dai-form-control__input-group__addon dai-form-control__input-group__addon--btn",
   tabindex: "-1",
   "aria-hidden": "true"
 };
-function Oe(e, t) {
-  return l(), u("button", Fe, [
+function Fe(e, t) {
+  return l(), u("button", Oe, [
     p(e.$slots, "default")
   ]);
 }
-const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern", "title", "autocomplete", "value"], Ue = {
+const K = /* @__PURE__ */ Ie(je, [["render", Fe]]), Se = ["id", "type", "pattern", "title", "autocomplete", "value"], Ue = {
   key: 0,
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
   viewBox: "0 0 24 24",
   stroke: "currentColor"
-}, Ne = {
+}, De = {
   key: 1,
   xmlns: "http://www.w3.org/2000/svg",
   fill: "none",
@@ -369,7 +365,7 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
   }),
   emits: ["update:modelValue", "update:files"],
   setup(e) {
-    const t = e, o = t.id || L(), a = $(() => typeof t.autocomplete == "string" ? t.autocomplete : t.autocomplete ? "on" : "off"), i = x(e, "modelValue"), s = x(e, "files", {
+    const t = e, o = t.id || L(), i = _(() => typeof t.autocomplete == "string" ? t.autocomplete : t.autocomplete ? "on" : "off"), a = $(e, "modelValue"), s = $(e, "files", {
       set(B) {
         return n.value && (n.value.files = B), B;
       }
@@ -377,25 +373,25 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
       n,
       t.validators,
       t.showValidationError
-    ), m = N(!1);
-    T(i, () => {
+    ), f = D(!1);
+    T(a, () => {
       s.value = n.value?.files || null;
     });
     let C;
-    const G = $(() => t.type === "password" ? m.value ? "text" : "password" : t.type), H = $(() => t.mask ? t.mask : t.type === "tel" ? {
+    const Z = _(() => t.type === "password" ? f.value ? "text" : "password" : t.type), H = _(() => t.mask ? t.mask : t.type === "tel" ? {
       mask: "{+7} (000) 000-00-00"
-    } : t.mask), K = $(() => t.pattern ? t.pattern : t.type === "tel" ? "^\\+7 \\(9\\d{2}\\) \\d{3}-\\d{2}-\\d{2}" : t.pattern), Q = $(() => t.title ? t.title : t.type === "tel" ? "+7 (999) 888-77-66" : t.title);
+    } : t.mask), G = _(() => t.pattern ? t.pattern : t.type === "tel" ? "^\\+7 \\(9\\d{2}\\) \\d{3}-\\d{2}-\\d{2}" : t.pattern), Q = _(() => t.title ? t.title : t.type === "tel" ? "+7 (999) 888-77-66" : t.title);
     function W() {
-      m.value = !m.value;
+      f.value = !f.value;
     }
     function J() {
-      i.value = "";
+      a.value = "";
     }
     function ee(B) {
       if (C)
         return;
       const { value: z } = B.target;
-      i.value = z;
+      a.value = z;
     }
     return j(() => {
       H.value && import("imask").then((B) => {
@@ -403,10 +399,10 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
           n.value,
           H.value
         ), C.on("accept", () => {
-          i.value = C.value;
+          a.value = C.value;
         });
       });
-    }), (B, z) => (l(), f(S, _(t, {
+    }), (B, z) => (l(), m(S, x(t, {
       "label-for": r(o),
       "validation-message": e.showValidationError ? "" : r(b),
       invalid: t.invalid || !r(g),
@@ -414,27 +410,27 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
     }), {
       default: c(() => [
         p(B.$slots, "prepend"),
-        d("input", _({
+        d("input", x({
           ref_key: "formElement",
           ref: n
         }, { ...B.$attrs, class: void 0 }, {
           id: r(o),
-          type: G.value,
-          pattern: K.value,
+          type: Z.value,
+          pattern: G.value,
           title: Q.value,
-          autocomplete: a.value,
-          value: i.value,
+          autocomplete: i.value,
+          value: a.value,
           onInputPassive: ee,
           onKeyupPassive: z[0] || (z[0] = (bt) => !r(g) && r(y)()),
           class: "dai-form-control__input-group__control dai-form-control__input"
         }), null, 16, Se),
         p(B.$slots, "append"),
-        t.type === "password" && i.value ? (l(), f(Y, {
+        t.type === "password" && a.value ? (l(), m(K, {
           key: 0,
           onClick: W
         }, {
           default: c(() => [
-            m.value ? (l(), u("svg", Ne, [...z[2] || (z[2] = [
+            f.value ? (l(), u("svg", De, [...z[2] || (z[2] = [
               d("path", {
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
@@ -458,7 +454,7 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
           ]),
           _: 1
         })) : h("", !0),
-        e.clearable && i.value && !t.disabled ? (l(), f(Y, {
+        e.clearable && a.value && !t.disabled ? (l(), m(K, {
           key: 1,
           onClick: J
         }, {
@@ -483,7 +479,7 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
       _: 3
     }, 16, ["label-for", "validation-message", "invalid", "class"]));
   }
-}), Xe = ["id"], De = ["value"], $t = /* @__PURE__ */ v({
+}), Ne = ["id"], Xe = ["value"], $t = /* @__PURE__ */ v({
   inheritAttrs: !1,
   __name: "select",
   props: /* @__PURE__ */ M({
@@ -513,34 +509,34 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, o = t.id || L(), a = x(e, "modelValue"), i = q("formElement"), { isValid: s, validationMessage: n, validate: g } = A(
-      i,
+    const t = e, o = t.id || L(), i = $(e, "modelValue"), a = q("formElement"), { isValid: s, validationMessage: n, validate: g } = A(
+      a,
       t.validators,
       t.showValidationError
     );
-    return (b, y) => (l(), f(S, _(t, {
+    return (b, y) => (l(), m(S, x(t, {
       "label-for": r(o),
       "validation-message": e.showValidationError ? "" : r(n),
       invalid: t.invalid || !r(s),
       class: b.$attrs.class
     }), {
       default: c(() => [
-        F(d("select", _({
+        O(d("select", x({
           ref_key: "formElement",
-          ref: i
+          ref: a
         }, { ...b.$attrs, class: void 0 }, {
           id: r(o),
-          "onUpdate:modelValue": y[0] || (y[0] = (m) => a.value = m),
+          "onUpdate:modelValue": y[0] || (y[0] = (f) => i.value = f),
           class: "dai-form-control__input-group__control dai-select"
         }), [
           p(b.$slots, "default", {}, () => [
-            (l(!0), u(I, null, X(e.options, (m) => (l(), u("option", {
-              value: m[e.optionValue],
-              key: m[e.optionValue]
-            }, k(m[e.optionText]), 9, De))), 128))
+            (l(!0), u(I, null, N(e.options, (f) => (l(), u("option", {
+              value: f[e.optionValue],
+              key: f[e.optionValue]
+            }, k(f[e.optionText]), 9, Xe))), 128))
           ])
-        ], 16, Xe), [
-          [pe, a.value]
+        ], 16, Ne), [
+          [pe, i.value]
         ]),
         y[1] || (y[1] = d("svg", {
           class: "dai-select__chevron",
@@ -586,17 +582,17 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, o = x(e, "modelValue");
-    return (a, i) => (l(), f(r(Ee), _(t, {
+    const t = e, o = $(e, "modelValue");
+    return (i, a) => (l(), m(r(Ee), x(t, {
       displayValue: (s) => e.options.find((n) => n[e.optionValue] === s)?.[e.optionText] || "",
       modelValue: o.value,
-      "onUpdate:modelValue": i[0] || (i[0] = (s) => o.value = s)
+      "onUpdate:modelValue": a[0] || (a[0] = (s) => o.value = s)
     }), {
       default: c(() => [
         V(r(qe), { placeholder: e.placeholder }, null, 8, ["placeholder"]),
         V(r(Te), null, {
           default: c(() => [
-            (l(!0), u(I, null, X(e.options, (s) => (l(), f(r(Ae), {
+            (l(!0), u(I, null, N(e.options, (s) => (l(), m(r(Ae), {
               key: s[e.optionValue],
               value: s[e.optionValue]
             }, {
@@ -626,42 +622,42 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, o = t.id || L(), a = x(e, "modelValue"), i = q("formElement"), { isValid: s, validationMessage: n, validate: g } = A(
-      i,
+    const t = e, o = t.id || L(), i = $(e, "modelValue"), a = q("formElement"), { isValid: s, validationMessage: n, validate: g } = A(
+      a,
       t.validators,
       t.showValidationError
     );
     function b() {
       if (!t.autosize) return;
-      const y = i.value, m = y.offsetHeight - y.clientHeight;
-      y.style.height = "auto", y.style.height = `${y.scrollHeight + m}px`;
+      const y = a.value, f = y.offsetHeight - y.clientHeight;
+      y.style.height = "auto", y.style.height = `${y.scrollHeight + f}px`;
     }
-    return j(b), (y, m) => (l(), f(S, _(t, {
+    return j(b), (y, f) => (l(), m(S, x(t, {
       "label-for": r(o),
       "validation-message": e.showValidationError ? "" : r(n),
       invalid: !r(s),
       class: y.$attrs.class
     }), {
       default: c(() => [
-        F(d("textarea", _({
+        O(d("textarea", x({
           ref_key: "formElement",
-          ref: i
+          ref: a
         }, { ...y.$attrs, class: void 0 }, {
           id: r(o),
-          "onUpdate:modelValue": m[0] || (m[0] = (C) => a.value = C),
-          onKeyupPassive: m[1] || (m[1] = (C) => !r(s) && r(g)()),
+          "onUpdate:modelValue": f[0] || (f[0] = (C) => i.value = C),
+          onKeyupPassive: f[1] || (f[1] = (C) => !r(s) && r(g)()),
           onInputPassive: b,
           class: ["form-control__textarea", {
             "form-control__textarea--autosize": e.autosize
           }]
         }), null, 16, He), [
-          [he, a.value]
+          [he, i.value]
         ])
       ]),
       _: 1
     }, 16, ["label-for", "validation-message", "invalid", "class"]));
   }
-}), Ye = ["id"], Bt = /* @__PURE__ */ v({
+}), Ke = ["id"], Bt = /* @__PURE__ */ v({
   inheritAttrs: !1,
   __name: "checkbox",
   props: /* @__PURE__ */ M({
@@ -676,31 +672,31 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, o = x(e, "modelValue"), a = L(), i = q("formElement"), { isValid: s } = A(
-      i,
+    const t = e, o = $(e, "modelValue"), i = L(), a = q("formElement"), { isValid: s } = A(
+      a,
       t.validators,
       t.showValidationError
     );
     return (n, g) => (l(), u("div", {
       class: w(["dai-checkbox-control", n.$attrs.class])
     }, [
-      F(d("input", _({
+      O(d("input", x({
         ref_key: "formElement",
-        ref: i,
+        ref: a,
         "onUpdate:modelValue": g[0] || (g[0] = (b) => o.value = b)
       }, { ...n.$attrs, class: "" }, {
-        id: r(a),
+        id: r(i),
         type: "checkbox",
         class: ["dai-checkbox", {
           [`dai-checkbox--${e.color}`]: e.color,
           "dai-checkbox--invalid": !r(s)
         }]
-      }), null, 16, Ye), [
+      }), null, 16, Ke), [
         [be, o.value]
       ]),
-      e.label || n.$slots.default ? (l(), f(O, {
+      e.label || n.$slots.default ? (l(), m(F, {
         key: 0,
-        for: r(a)
+        for: r(i)
       }, {
         default: c(() => [
           p(n.$slots, "default", {}, () => [
@@ -709,7 +705,7 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
         ]),
         _: 3
       }, 8, ["for"])) : h("", !0),
-      e.hint || n.$slots.hint ? (l(), f(D, {
+      e.hint || n.$slots.hint ? (l(), m(X, {
         key: 1,
         class: "dai-checkbox-control__hint"
       }, {
@@ -722,10 +718,10 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
       })) : h("", !0)
     ], 2));
   }
-}), Re = { class: "flex items-center h-5" }, Ze = ["value", "id"], Ge = {
+}), Ye = { class: "flex items-center h-5" }, Re = ["value", "id"], Ze = {
   key: 0,
   class: "text-sm"
-}, Ke = ["for"], Qe = {
+}, Ge = ["for"], Qe = {
   key: 0,
   class: "text-secondary-500 dark:text-secondary-400"
 }, Vt = /* @__PURE__ */ v({
@@ -744,36 +740,36 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, o = x(e, "modelValue"), a = L(), i = q("formElement"), { isValid: s } = A(
-      i,
+    const t = e, o = $(e, "modelValue"), i = L(), a = q("formElement"), { isValid: s } = A(
+      a,
       t.validators,
       t.showValidationError
     );
     return (n, g) => (l(), u("div", {
       class: w(["flex items-start gap-3", n.$attrs.class])
     }, [
-      d("div", Re, [
-        F(d("input", _({
+      d("div", Ye, [
+        O(d("input", x({
           type: "radio",
           ref_key: "formElement",
-          ref: i,
+          ref: a,
           "onUpdate:modelValue": g[0] || (g[0] = (b) => o.value = b)
         }, { ...n.$attrs, class: "" }, {
           value: e.value,
-          id: r(a),
+          id: r(i),
           class: ["radio", {
             [`radio--${e.color}`]: e.color,
             "radio--invalid": !r(s)
           }]
-        }), null, 16, Ze), [
+        }), null, 16, Re), [
           [ye, o.value]
         ])
       ]),
-      e.label ? (l(), u("div", Ge, [
+      e.label ? (l(), u("div", Ze, [
         d("label", {
-          for: r(a),
+          for: r(i),
           class: "font-medium select-none cursor-pointer"
-        }, k(e.label), 9, Ke),
+        }, k(e.label), 9, Ge),
         e.hint ? (l(), u("p", Qe, k(e.hint), 1)) : h("", !0)
       ])) : h("", !0)
     ], 2));
@@ -789,39 +785,39 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = x(e, "modelValue"), o = L();
-    return (a, i) => (l(), u("div", We, [
+    const t = $(e, "modelValue"), o = L();
+    return (i, a) => (l(), u("div", We, [
       d("button", {
-        onClick: i[0] || (i[0] = (s) => t.value = !t.value),
+        onClick: a[0] || (a[0] = (s) => t.value = !t.value),
         id: r(o),
         "aria-checked": t.value,
         role: "switch",
         type: "button",
         tabindex: "0",
         class: w(["dai-switch", [t.value ? "dai-switch--on" : "dai-switch--off"]])
-      }, [...i[1] || (i[1] = [
+      }, [...a[1] || (a[1] = [
         d("div", {
           "aria-hidden": "true",
           class: "dai-switch__thumb"
         }, null, -1)
       ])], 10, Je),
-      e.label || a.$slots.default ? (l(), f(O, {
+      e.label || i.$slots.default ? (l(), m(F, {
         key: 0,
         for: r(o)
       }, {
         default: c(() => [
-          p(a.$slots, "default", {}, () => [
+          p(i.$slots, "default", {}, () => [
             E(k(e.label), 1)
           ])
         ]),
         _: 3
       }, 8, ["for"])) : h("", !0),
-      e.hint || a.$slots.hint ? (l(), f(D, {
+      e.hint || i.$slots.hint ? (l(), m(X, {
         key: 1,
         class: "dai-switch-control__hint"
       }, {
         default: c(() => [
-          p(a.$slots, "hint", {}, () => [
+          p(i.$slots, "hint", {}, () => [
             E(k(e.hint), 1)
           ])
         ]),
@@ -854,19 +850,19 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
     condensed: { type: Boolean }
   },
   setup(e) {
-    const t = e, o = $(() => t.submit ? "submit" : t.reset ? "reset" : "button"), a = $(() => t.variant ? t.variant : t.plain ? "plain" : t.muted ? "muted" : t.outlined ? "outlined" : "flat"), i = $(() => t.size ? t.size : t.sm ? "small" : t.lg ? "large" : "medium");
-    return (s, n) => (l(), f(ge(e.href ? "a" : "button"), {
+    const t = e, o = _(() => t.submit ? "submit" : t.reset ? "reset" : "button"), i = _(() => t.variant ? t.variant : t.plain ? "plain" : t.muted ? "muted" : t.outlined ? "outlined" : "flat"), a = _(() => t.size ? t.size : t.sm ? "small" : t.lg ? "large" : "medium");
+    return (s, n) => (l(), m(ge(e.href ? "a" : "button"), {
       type: e.href ? void 0 : o.value,
       form: typeof e.submit == "string" ? e.submit : void 0,
       href: e.href,
       class: w(["dai-btn", {
         [`dai-btn--${e.color}`]: e.color,
-        "dai-btn--flat": a.value === "flat",
-        "dai-btn--plain": a.value === "plain",
-        "dai-btn--muted": a.value === "muted",
-        "dai-btn--outlined": a.value === "outlined",
-        "dai-btn--sm": i.value === "small",
-        "dai-btn--lg": i.value === "large",
+        "dai-btn--flat": i.value === "flat",
+        "dai-btn--plain": i.value === "plain",
+        "dai-btn--muted": i.value === "muted",
+        "dai-btn--outlined": i.value === "outlined",
+        "dai-btn--sm": a.value === "small",
+        "dai-btn--lg": a.value === "large",
         "dai-btn--loading": e.loading,
         "dai-btn--block": e.block,
         "dai-btn--rounded": e.rounded,
@@ -913,7 +909,7 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
 }), zt = /* @__PURE__ */ v({
   __name: "popoverDialog",
   setup(e) {
-    return (t, o) => (l(), f(P, {
+    return (t, o) => (l(), m(P, {
       "enter-from-class": "dai-popover-dialog--anim",
       "leave-to-class": "dai-popover-dialog--anim"
     }, {
@@ -931,7 +927,7 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
 }), Et = /* @__PURE__ */ v({
   __name: "menuItems",
   setup(e) {
-    return (t, o) => (l(), f(P, {
+    return (t, o) => (l(), m(P, {
       "enter-from-class": "dai-menu-items--anim",
       "leave-to-class": "dai-menu-items--anim"
     }, {
@@ -955,16 +951,16 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
     icon: {}
   },
   setup(e) {
-    return (t, o) => (l(), f(r(re), { class: "dai-menu-item" }, {
-      default: c(({ isActive: a, isSelected: i }) => [
+    return (t, o) => (l(), m(r(re), { class: "dai-menu-item" }, {
+      default: c(({ isActive: i, isSelected: a }) => [
         e.icon ? (l(), u("div", ot, [
           d("div", {
             class: w(["h-5 w-5", e.icon])
           }, null, 2)
         ])) : h("", !0),
         p(t.$slots, "default", {
-          isActive: a,
-          isSelected: i
+          isActive: i,
+          isSelected: a
         })
       ]),
       _: 3
@@ -978,7 +974,7 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
     value: {}
   },
   setup(e) {
-    return (t, o) => (l(), f(r(de), {
+    return (t, o) => (l(), m(r(de), {
       id: e.id,
       "aria-controls": e.ariaControls,
       value: e.value,
@@ -993,22 +989,22 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
 }), Tt = /* @__PURE__ */ v({
   __name: "tabList",
   setup(e) {
-    const t = q("tablist"), o = q("slider"), a = N({});
-    function i() {
+    const t = q("tablist"), o = q("slider"), i = D({});
+    function a() {
       if (!o.value) return;
       const s = t.value?.$el;
       if (!s) return;
       const n = s.querySelector("[aria-selected=true]");
-      n && (a.value = {
+      n && (i.value = {
         left: `${n.offsetLeft}px`,
         right: `${s.offsetWidth - n.offsetLeft - n.offsetWidth}px`,
         transition: o.value.offsetLeft > n.offsetLeft ? "left .2s, right .5s" : "left .5s, right .2s"
       });
     }
-    return j(() => we(i)), (s, n) => (l(), f(r(ue), {
+    return j(() => we(a)), (s, n) => (l(), m(r(ue), {
       ref_key: "tablist",
       ref: t,
-      onClickPassive: i,
+      onClickPassive: a,
       class: "dai-tab-list"
     }, {
       default: c(() => [
@@ -1016,7 +1012,7 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
           ref_key: "slider",
           ref: o,
           class: "dai-tab-list__slider",
-          style: U(a.value)
+          style: U(i.value)
         }, null, 4),
         p(s.$slots, "default")
       ]),
@@ -1039,21 +1035,21 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, o = x(e, "modelValue"), a = t.id ?? L(), { classList: i } = xe(document.body, "nui-body-push");
+    const t = e, o = $(e, "modelValue"), i = t.id ?? L(), { classList: a } = xe(document.body, "nui-body-push");
     T(o, () => {
-      if (!t.push || (i.splice(1), !o.value))
+      if (!t.push || (a.splice(1), !o.value))
         return;
       let n = "nui-body-push--" + t.position;
-      t.lg && (n += "--lg"), t.xl && (n += "--xl"), i.push(n);
+      t.lg && (n += "--lg"), t.xl && (n += "--xl"), a.push(n);
     });
     function s(n) {
-      n.target.closest(`#${a}`) || t.closeOnOutsideClick && (o.value = !1);
+      n.target.closest(`#${i}`) || t.closeOnOutsideClick && (o.value = !1);
     }
     return j(() => {
       window.addEventListener("click", s, { passive: !0 });
-    }), R(() => {
+    }), Y(() => {
       window.removeEventListener("click", s);
-    }), (n, g) => (l(), f(Z, { to: "body" }, [
+    }), (n, g) => (l(), m(R, { to: "body" }, [
       V(P, {
         appear: "",
         "enter-from-class": "nui-offcanvas--animate-hidden",
@@ -1064,9 +1060,9 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
         "leave-active-class": "ease-in-out"
       }, {
         default: c(() => [
-          o.value ? (l(), u("div", _({
+          o.value ? (l(), u("div", x({
             key: 0,
-            id: r(a)
+            id: r(i)
           }, n.$attrs, {
             class: ["nui-offcanvas", {
               [`nui-offcanvas--${e.position}`]: !0,
@@ -1117,7 +1113,7 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
 }, ut = { class: "dai-notification__content" }, ct = {
   key: 0,
   class: "dai-notification__content__detail"
-}, mt = /* @__PURE__ */ v({
+}, ft = /* @__PURE__ */ v({
   __name: "notification",
   props: /* @__PURE__ */ M({
     color: {},
@@ -1132,12 +1128,12 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, o = x(e, "modelValue");
-    let a;
-    function i() {
-      clearTimeout(a), o.value && t.timeout && (a = setTimeout(() => o.value = !1, t.timeout));
+    const t = e, o = $(e, "modelValue");
+    let i;
+    function a() {
+      clearTimeout(i), o.value && t.timeout && (i = setTimeout(() => o.value = !1, t.timeout));
     }
-    return T(o, i, { immediate: !0 }), (s, n) => o.value ? (l(), u("div", lt, [
+    return T(o, a, { immediate: !0 }), (s, n) => o.value ? (l(), u("div", lt, [
       d("div", {
         class: w(["dai-notification", [`dai-notification--${e.color || "secondary"}`]])
       }, [
@@ -1193,20 +1189,20 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
   }),
   emits: ["update:queue"],
   setup(e) {
-    const t = e, o = x(e, "queue"), a = N([]);
-    let i = 0;
+    const t = e, o = $(e, "queue"), i = D([]);
+    let a = 0;
     function s() {
-      o.value.length === 0 || a.value.length >= t.length || (a.value.push({ ...o.value[0], id: i++, show: !0 }), o.value.shift());
+      o.value.length === 0 || i.value.length >= t.length || (i.value.push({ ...o.value[0], id: a++, show: !0 }), o.value.shift());
     }
     function n(b) {
       setTimeout(() => {
-        a.value = a.value.filter(
+        i.value = i.value.filter(
           (y) => y.id !== b
         ), s();
       }, 200);
     }
     T(o, s, { immediate: !0, deep: !0 });
-    const g = $(() => {
+    const g = _(() => {
       const b = ["dai-notification-queue__item--anim"];
       return t.positionX === "right" ? b.push("dai-notification-queue__item--anim-x-right") : t.positionX === "left" ? b.push("dai-notification-queue__item--anim-x-left") : t.positionX === "center" && t.positionY === "top" ? b.push("dai-notification-queue__item--anim-y-top") : t.positionX === "center" && t.positionY === "bottom" && b.push("dai-notification-queue__item--anim-y-bottom"), b.join(" ");
     });
@@ -1229,15 +1225,15 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
         "leave-active-class": "dai-notification-queue__item--anim-out"
       }, {
         default: c(() => [
-          (l(!0), u(I, null, X(a.value, (m) => (l(), f(mt, {
-            key: m.id,
-            color: m.color,
-            icon: m.type,
-            message: m.message,
-            detail: m.detail,
-            timeout: m.timeout ?? e.timeout,
-            modelValue: m.show,
-            "onUpdate:modelValue": [(C) => m.show = C, (C) => n(m.id)],
+          (l(!0), u(I, null, N(i.value, (f) => (l(), m(ft, {
+            key: f.id,
+            color: f.color,
+            icon: f.type,
+            message: f.message,
+            detail: f.detail,
+            timeout: f.timeout ?? e.timeout,
+            modelValue: f.show,
+            "onUpdate:modelValue": [(C) => f.show = C, (C) => n(f.id)],
             class: "dai-notification-queue__item"
           }, null, 8, ["color", "icon", "message", "detail", "timeout", "modelValue", "onUpdate:modelValue"]))), 128))
         ]),
@@ -1245,7 +1241,7 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
       }, 8, ["enter-from-class", "leave-to-class"])
     ], 2));
   }
-}), ft = ["aria-valuenow"], It = /* @__PURE__ */ v({
+}), mt = ["aria-valuenow"], It = /* @__PURE__ */ v({
   __name: "progressbar",
   props: {
     value: {},
@@ -1254,8 +1250,8 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
     rounded: { type: Boolean, default: !0 }
   },
   setup(e) {
-    const t = e, o = $(() => t.value === void 0);
-    return (a, i) => (l(), u("div", {
+    const t = e, o = _(() => t.value === void 0);
+    return (i, a) => (l(), u("div", {
       class: w(["overflow-hidden text-xs w-full flex-1", {
         rounded: e.rounded,
         "bg-primary-200": e.color == "primary",
@@ -1281,7 +1277,7 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
           "progress-infinite": o.value
         }, "h-full shadow-none relative text-center whitespace-nowrap text-white justify-center"])
       }, null, 6)
-    ], 14, ft));
+    ], 14, mt));
   }
 }), vt = {
   key: 0,
@@ -1295,13 +1291,13 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
   },
   emits: ["update:modelValue"],
   setup(e) {
-    const t = x(e, "modelValue");
+    const t = $(e, "modelValue");
     function o() {
       t.value = !1;
     }
-    return T(t, (a) => {
-      a ? document.body.classList.add("overflow-hidden") : document.body.classList.remove("overflow-hidden");
-    }), (a, i) => (l(), f(Z, { to: "body" }, [
+    return T(t, (i) => {
+      i ? document.body.classList.add("overflow-hidden") : document.body.classList.remove("overflow-hidden");
+    }), (i, a) => (l(), m(R, { to: "body" }, [
       V(P, {
         appear: "",
         name: "modal",
@@ -1309,7 +1305,7 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
       }, {
         default: c(() => [
           t.value ? (l(), u("div", vt, [
-            i[0] || (i[0] = d("div", {
+            a[0] || (a[0] = d("div", {
               class: "modal__backdrop fixed inset-0 bg-primary-50/60 backdrop-blur-sm",
               "aria-hidden": "true"
             }, null, -1)),
@@ -1319,7 +1315,7 @@ const Y = /* @__PURE__ */ Ie(je, [["render", Oe]]), Se = ["id", "type", "pattern
                 class: "min-h-full flex items-center justify-center p-4 sm:p-6"
               }, [
                 d("div", ht, [
-                  p(a.$slots, "default", { close: o })
+                  p(i.$slots, "default", { close: o })
                 ])
               ])
             ])
@@ -1343,7 +1339,7 @@ export {
   Lt as MenuItem,
   Et as MenuItems,
   jt as Modal,
-  mt as Notification,
+  ft as Notification,
   At as NotificationQueue,
   Pt as Offcanvas,
   Ut as Popover,
@@ -1354,9 +1350,9 @@ export {
   xt as Selectbox,
   Mt as Switch,
   qt as Tab,
-  Nt as TabContainer,
+  Dt as TabContainer,
   Tt as TabList,
-  Xt as TabPanel,
+  Nt as TabPanel,
   _t as Textarea,
   xe as useClassList
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@defaultusr/dai-ui",
-  "version": "1.1.9",
+  "version": "1.1.11",
   "type": "module",
   "files": [
     "dist"