@defaultusr/dai-ui 1.2.1 → 1.2.3

package/dist/main.js

@@ -1,6 +1,6 @@
-import { useFormControl as T, Combobox as te, ComboboxInput as oe, injectCombobox as ae, ComboboxOptions as le, ComboboxOption as ie, PopoverDialog as ne, MenuItems as se, MenuItem as re, Tab as de, TabList as ue } from "vue-composable-ui";
+import { useFormControl as P, Combobox as te, ComboboxInput as oe, injectCombobox as ae, ComboboxOptions as le, ComboboxOption as ie, PopoverDialog as ne, MenuItems as se, MenuItem as re, Tab as de, TabList as ue } from "vue-composable-ui";
 import { Menu as Nt, Popover as Ut, TabContainer as Xt, TabPanel as Dt } from "vue-composable-ui";
-import { reactive as ce, watch as A, onUnmounted as R, defineComponent as v, createElementBlock as u, openBlock as i, renderSlot as p, createTextVNode as z, toDisplayString as k, normalizeClass as w, createBlock as h, createCommentVNode as y, createElementVNode as d, computed as _, createVNode as V, normalizeProps as fe, guardReactiveProps as me, withCtx as c, Transition as P, mergeModels as C, useModel as B, useId as q, useTemplateRef as L, mergeProps as $, unref as n, inject as ve, Fragment as I, ref as U, onMounted as O, withDirectives as X, renderList as D, vModelSelect as he, vModelText as pe, vModelRadio as be, resolveDynamicComponent as ye, nextTick as ge, normalizeStyle as N, Teleport as Z, TransitionGroup as we, withModifiers as ke } from "vue";
+import { reactive as ce, watch as T, onUnmounted as R, defineComponent as v, createElementBlock as u, openBlock as i, renderSlot as b, createTextVNode as z, toDisplayString as k, normalizeClass as w, createBlock as p, createCommentVNode as y, createElementVNode as d, computed as _, createVNode as V, normalizeProps as fe, guardReactiveProps as me, withCtx as f, Transition as A, mergeModels as C, useModel as B, useId as q, useTemplateRef as L, mergeProps as $, unref as n, inject as ve, Fragment as I, ref as U, onMounted as O, withDirectives as X, renderList as D, vModelSelect as he, vModelText as pe, vModelRadio as be, resolveDynamicComponent as ye, nextTick as ge, normalizeStyle as N, Teleport as Z, TransitionGroup as we, withModifiers as ke } from "vue";
 import './assets/main.css';function $e(e, ...t) {
   let o = [];
   const l = ce(t);
@@ -10,7 +10,7 @@ import './assets/main.css';function $e(e, ...t) {
   function s() {
     e.classList.remove(...o);
   }
-  return A(
+  return T(
     l,
     () => {
       s(), a();
@@ -27,7 +27,7 @@ const xe = { class: "dai-label" }, F = /* @__PURE__ */ v({
   },
   setup(e) {
     return (t, o) => (i(), u("label", xe, [
-      p(t.$slots, "default", {}, () => [
+      b(t.$slots, "default", {}, () => [
         z(k(e.text), 1)
       ])
     ]));
@@ -39,7 +39,7 @@ const xe = { class: "dai-label" }, F = /* @__PURE__ */ v({
   },
   setup(e) {
     return (t, o) => (i(), u("div", _e, [
-      p(t.$slots, "default", {}, () => [
+      b(t.$slots, "default", {}, () => [
         z(k(e.text), 1)
       ])
     ]));
@@ -69,14 +69,14 @@ const xe = { class: "dai-label" }, F = /* @__PURE__ */ v({
         "dai-form-control__input-group--invalid": e.invalid
       }])
     }, [
-      e.label ? (i(), h(F, {
+      e.label ? (i(), p(F, {
         key: 0,
         text: e.label,
         for: e.labelFor,
         class: "dai-form-control__input-group__label"
       }, null, 8, ["text", "for"])) : y("", !0),
       d("div", Be, [
-        p(t.$slots, "default")
+        b(t.$slots, "default")
       ])
     ], 2));
   }
@@ -85,7 +85,6 @@ const xe = { class: "dai-label" }, F = /* @__PURE__ */ v({
   class: "dai-form-control__validation-message",
   role: "alert"
 }, S = /* @__PURE__ */ v({
-  inheritAttrs: !1,
   __name: "formControl",
   props: {
     labelPosition: { default: "above" },
@@ -112,7 +111,7 @@ const xe = { class: "dai-label" }, F = /* @__PURE__ */ v({
         "dai-form-control--lg": l.value === "large"
       }])
     }, [
-      e.label && e.labelPosition !== "inside" ? (i(), h(F, {
+      e.label && e.labelPosition !== "inside" ? (i(), p(F, {
         key: 0,
         for: e.labelFor,
         text: e.label
@@ -124,18 +123,18 @@ const xe = { class: "dai-label" }, F = /* @__PURE__ */ v({
           variant: o.value,
           size: l.value
         })), {
-          default: c(() => [
-            p(a.$slots, "default")
+          default: f(() => [
+            b(a.$slots, "default")
           ]),
           _: 3
         }, 16),
-        e.hint ? (i(), h(H, {
+        e.hint ? (i(), p(H, {
           key: 0,
           text: e.hint,
           class: "dai-form-control__hint"
         }, null, 8, ["text"])) : y("", !0),
-        V(P, { name: "dai-form-control__validation-message-transition" }, {
-          default: c(() => [
+        V(A, { name: "dai-form-control__validation-message-transition" }, {
+          default: f(() => [
             e.validationMessage ? (i(), u("div", Ce, [
               s[0] || (s[0] = d("svg", {
                 xmlns: "http://www.w3.org/2000/svg",
@@ -182,31 +181,31 @@ const xe = { class: "dai-label" }, F = /* @__PURE__ */ v({
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, o = B(e, "modelValue"), l = t.id || q(), a = L("formElement"), { isValid: s, validationMessage: r } = T(
+    const t = e, o = B(e, "modelValue"), l = t.id || q(), a = L("formElement"), { isValid: s, validationMessage: r, validate: g } = P(
       a,
       t.validators,
       t.showValidationError
     );
-    return (g, b) => (i(), h(S, $(t, {
+    return T(o, () => g(), { flush: "post" }), (h, m) => (i(), p(S, $(t, {
       labelFor: n(l),
       validationMessage: e.showValidationError ? "" : n(r),
       invalid: !n(s),
-      class: g.$attrs.class
+      class: h.$attrs.class
     }), {
-      default: c(() => [
-        V(n(te), $({ ...g.$attrs, class: void 0, required: void 0 }, {
+      default: f(() => [
+        V(n(te), $({ ...h.$attrs, class: void 0, required: void 0 }, {
           id: n(l),
           modelValue: o.value,
-          "onUpdate:modelValue": b[0] || (b[0] = (f) => o.value = f)
+          "onUpdate:modelValue": m[0] || (m[0] = (c) => o.value = c)
         }), {
-          default: c(() => [
+          default: f(() => [
             d("input", $({
               ref_key: "formElement",
               ref: a,
               type: "text",
               value: o.value
-            }, { required: g.$attrs.required }, { class: "dai-combobox__stab-input" }), null, 16, Ee),
-            p(g.$slots, "default")
+            }, { required: h.$attrs.required }, { class: "dai-combobox__stab-input" }), null, 16, Ee),
+            b(h.$slots, "default")
           ]),
           _: 3
         }, 16, ["id", "modelValue"])
@@ -217,9 +216,9 @@ const xe = { class: "dai-label" }, F = /* @__PURE__ */ v({
 }), kt = /* @__PURE__ */ v({
   __name: "comboboxInput",
   setup(e) {
-    return (t, o) => (i(), h(n(oe), { class: "dai-form-control__input-group__control" }, {
-      default: c(() => [
-        p(t.$slots, "default")
+    return (t, o) => (i(), p(n(oe), { class: "dai-form-control__input-group__control" }, {
+      default: f(() => [
+        b(t.$slots, "default")
       ]),
       _: 3
     }));
@@ -245,7 +244,7 @@ const xe = { class: "dai-label" }, F = /* @__PURE__ */ v({
       type: "button",
       class: "dai-form-control__input-group__control dai-combobox-btn"
     }), [
-      p(l.$slots, "default", {}, () => [
+      b(l.$slots, "default", {}, () => [
         n(t).displayValue.value ? (i(), u(I, { key: 1 }, [
           z(k(n(t).displayValue), 1)
         ], 64)) : (i(), u("span", Le, k(e.placeholder || "Select..."), 1)),
@@ -268,14 +267,14 @@ const xe = { class: "dai-label" }, F = /* @__PURE__ */ v({
 }), Te = /* @__PURE__ */ v({
   __name: "comboboxOptions",
   setup(e) {
-    return (t, o) => (i(), h(P, {
+    return (t, o) => (i(), p(A, {
       "enter-from-class": "dai-combobox-options--anim",
       "leave-to-class": "dai-combobox-options--anim"
     }, {
-      default: c(() => [
+      default: f(() => [
         V(n(le), { class: "dai-combobox-options" }, {
-          default: c(() => [
-            p(t.$slots, "default")
+          default: f(() => [
+            b(t.$slots, "default")
           ]),
           _: 3
         })
@@ -283,27 +282,27 @@ const xe = { class: "dai-label" }, F = /* @__PURE__ */ v({
       _: 3
     }));
   }
-}), Ae = {
+}), Pe = {
   key: 0,
   class: "dai-combobox-option__check",
   xmlns: "http://www.w3.org/2000/svg",
   viewBox: "0 0 16 16"
-}, Pe = /* @__PURE__ */ v({
+}, Ae = /* @__PURE__ */ v({
   __name: "comboboxOption",
   props: {
     value: {}
   },
   setup(e) {
-    return (t, o) => (i(), h(n(ie), {
+    return (t, o) => (i(), p(n(ie), {
       value: e.value,
       class: "dai-combobox-option"
     }, {
-      default: c(({ isActive: l, isSelected: a }) => [
-        p(t.$slots, "default", {
+      default: f(({ isActive: l, isSelected: a }) => [
+        b(t.$slots, "default", {
           isActive: l,
           isSelected: a
         }),
-        a ? (i(), u("svg", Ae, [...o[0] || (o[0] = [
+        a ? (i(), u("svg", Pe, [...o[0] || (o[0] = [
           d("path", {
             fill: "currentColor",
             "fill-rule": "evenodd",
@@ -328,7 +327,7 @@ const xe = { class: "dai-label" }, F = /* @__PURE__ */ v({
 };
 function Fe(e, t) {
   return i(), u("button", Oe, [
-    p(e.$slots, "default")
+    b(e.$slots, "default")
   ]);
 }
 const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern", "title", "autocomplete", "value"], Ne = {
@@ -382,20 +381,20 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
       set(M) {
         return r.value && (r.value.files = M), M;
       }
-    }), r = L("formElement"), { isValid: g, validationMessage: b, validate: f } = T(
+    }), r = L("formElement"), { isValid: g, validationMessage: h, validate: m } = P(
       r,
       t.validators,
       t.showValidationError
-    ), m = U(!1);
-    A(a, () => {
+    ), c = U(!1);
+    T(a, () => {
       s.value = r.value?.files || null;
     });
     let x;
-    const j = _(() => t.type === "password" ? m.value ? "text" : "password" : t.type), Y = _(() => t.mask ? t.mask : t.type === "tel" ? {
+    const j = _(() => t.type === "password" ? c.value ? "text" : "password" : t.type), Y = _(() => t.mask ? t.mask : t.type === "tel" ? {
       mask: "{+7} (000) 000-00-00"
     } : 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;
+      c.value = !c.value;
     }
     function J() {
       a.value = "";
@@ -415,14 +414,14 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
           a.value = x.value;
         });
       });
-    }), (M, E) => (i(), h(S, $(t, {
+    }), (M, E) => (i(), p(S, $(t, {
       "label-for": n(o),
-      "validation-message": e.showValidationError ? "" : n(b),
+      "validation-message": e.showValidationError ? "" : n(h),
       invalid: t.invalid || !n(g),
       class: M.$attrs.class
     }), {
-      default: c(() => [
-        p(M.$slots, "prepend"),
+      default: f(() => [
+        b(M.$slots, "prepend"),
         d("input", $({
           ref_key: "formElement",
           ref: r
@@ -434,16 +433,16 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
           autocomplete: l.value,
           value: a.value,
           onInputPassive: ee,
-          onKeyupPassive: E[0] || (E[0] = (yt) => !n(g) && n(f)()),
+          onKeyupPassive: E[0] || (E[0] = (yt) => !n(g) && n(m)()),
           class: "dai-form-control__input-group__control dai-form-control__input"
         }), null, 16, Se),
-        p(M.$slots, "append"),
-        t.type === "password" && a.value ? (i(), h(K, {
+        b(M.$slots, "append"),
+        t.type === "password" && a.value ? (i(), p(K, {
           key: 0,
           onClick: W
         }, {
-          default: c(() => [
-            m.value ? (i(), u("svg", Ue, [...E[2] || (E[2] = [
+          default: f(() => [
+            c.value ? (i(), u("svg", Ue, [...E[2] || (E[2] = [
               d("path", {
                 "stroke-linecap": "round",
                 "stroke-linejoin": "round",
@@ -467,11 +466,11 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
           ]),
           _: 1
         })) : y("", !0),
-        e.clearable && a.value && !t.disabled ? (i(), h(K, {
+        e.clearable && a.value && !t.disabled ? (i(), p(K, {
           key: 1,
           onClick: J
         }, {
-          default: c(() => [...E[3] || (E[3] = [
+          default: f(() => [...E[3] || (E[3] = [
             d("svg", {
               xmlns: "http://www.w3.org/2000/svg",
               fill: "none",
@@ -522,36 +521,36 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, o = t.id || q(), l = B(e, "modelValue"), a = L("formElement"), { isValid: s, validationMessage: r, validate: g } = T(
+    const t = e, o = t.id || q(), l = B(e, "modelValue"), a = L("formElement"), { isValid: s, validationMessage: r, validate: g } = P(
       a,
       t.validators,
       t.showValidationError
     );
-    return (b, f) => (i(), h(S, $(t, {
+    return (h, m) => (i(), p(S, $(t, {
       "label-for": n(o),
       "validation-message": e.showValidationError ? "" : n(r),
       invalid: t.invalid || !n(s),
-      class: b.$attrs.class
+      class: h.$attrs.class
     }), {
-      default: c(() => [
+      default: f(() => [
         X(d("select", $({
           ref_key: "formElement",
           ref: a
-        }, { ...b.$attrs, class: void 0 }, {
+        }, { ...h.$attrs, class: void 0 }, {
           id: n(o),
-          "onUpdate:modelValue": f[0] || (f[0] = (m) => l.value = m),
+          "onUpdate:modelValue": m[0] || (m[0] = (c) => l.value = c),
           class: "dai-form-control__input-group__control dai-select"
         }), [
-          p(b.$slots, "default", {}, () => [
-            (i(!0), u(I, null, D(e.options, (m) => (i(), u("option", {
-              value: m[e.optionValue],
-              key: m[e.optionValue]
-            }, k(m[e.optionText]), 9, De))), 128))
+          b(h.$slots, "default", {}, () => [
+            (i(!0), u(I, null, D(e.options, (c) => (i(), u("option", {
+              value: c[e.optionValue],
+              key: c[e.optionValue]
+            }, k(c[e.optionText]), 9, De))), 128))
           ])
         ], 16, Xe), [
           [he, l.value]
         ]),
-        f[1] || (f[1] = d("svg", {
+        m[1] || (m[1] = d("svg", {
           class: "dai-select__chevron",
           xmlns: "http://www.w3.org/2000/svg",
           viewBox: "0 0 16 16"
@@ -598,20 +597,20 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
   emits: ["update:modelValue"],
   setup(e) {
     const t = e, o = B(e, "modelValue");
-    return (l, a) => (i(), h(n(ze), $(t, {
+    return (l, a) => (i(), p(n(ze), $(t, {
       displayValue: (s) => e.options.find((r) => r[e.optionValue] === s)?.[e.optionText] || "",
       modelValue: o.value,
       "onUpdate:modelValue": a[0] || (a[0] = (s) => o.value = s)
     }), {
-      default: c(() => [
+      default: f(() => [
         V(n(qe), { placeholder: e.placeholder }, null, 8, ["placeholder"]),
         V(n(Te), null, {
-          default: c(() => [
-            (i(!0), u(I, null, D(e.options, (s) => (i(), h(n(Pe), {
+          default: f(() => [
+            (i(!0), u(I, null, D(e.options, (s) => (i(), p(n(Ae), {
               key: s[e.optionValue],
               value: s[e.optionValue]
             }, {
-              default: c(() => [
+              default: f(() => [
                 z(k(s[e.optionText]), 1)
               ]),
               _: 2
@@ -637,31 +636,31 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, o = t.id || q(), l = B(e, "modelValue"), a = L("formElement"), { isValid: s, validationMessage: r, validate: g } = T(
+    const t = e, o = t.id || q(), l = B(e, "modelValue"), a = L("formElement"), { isValid: s, validationMessage: r, validate: g } = P(
       a,
       t.validators,
       t.showValidationError
     );
-    function b() {
+    function h() {
       if (!t.autosize) return;
-      const f = a.value, m = f.offsetHeight - f.clientHeight;
-      f.style.height = "auto", f.style.height = `${f.scrollHeight + m}px`;
+      const m = a.value, c = m.offsetHeight - m.clientHeight;
+      m.style.height = "auto", m.style.height = `${m.scrollHeight + c}px`;
     }
-    return O(b), (f, m) => (i(), h(S, $(t, {
+    return O(h), (m, c) => (i(), p(S, $(t, {
       "label-for": n(o),
       "validation-message": e.showValidationError ? "" : n(r),
       invalid: !n(s),
-      class: f.$attrs.class
+      class: m.$attrs.class
     }), {
-      default: c(() => [
+      default: f(() => [
         X(d("textarea", $({
           ref_key: "formElement",
           ref: a
-        }, { ...f.$attrs, class: void 0 }, {
+        }, { ...m.$attrs, class: void 0 }, {
           id: n(o),
-          "onUpdate:modelValue": m[0] || (m[0] = (x) => l.value = x),
-          onKeyupPassive: m[1] || (m[1] = (x) => !n(s) && n(g)()),
-          onInputPassive: b,
+          "onUpdate:modelValue": c[0] || (c[0] = (x) => l.value = x),
+          onKeyupPassive: c[1] || (c[1] = (x) => !n(s) && n(g)()),
+          onInputPassive: h,
           class: ["form-control__textarea", {
             "form-control__textarea--autosize": e.autosize
           }]
@@ -693,13 +692,13 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, o = t.id || q(), l = t.value || o, a = B(e, "modelValue"), s = L("formElement"), { isValid: r } = T(
+    const t = e, o = t.id || q(), l = t.value || o, a = B(e, "modelValue"), s = L("formElement"), { isValid: r } = P(
       s,
       t.validators,
       t.showValidationError
     ), g = _(() => Array.isArray(a.value) ? a.value.includes(l) : a.value);
-    function b(f) {
-      const x = f.target.checked;
+    function h(m) {
+      const x = m.target.checked;
       if (Array.isArray(a.value))
         if (x)
           a.value.push(l);
@@ -710,15 +709,15 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
       else
         a.value = x;
     }
-    return (f, m) => (i(), u("div", {
-      class: w(["dai-checkbox-control", f.$attrs.class])
+    return (m, c) => (i(), u("div", {
+      class: w(["dai-checkbox-control", m.$attrs.class])
     }, [
       d("input", $({
         ref_key: "formElement",
         ref: s
-      }, { ...f.$attrs, class: "" }, {
+      }, { ...m.$attrs, class: "" }, {
         checked: g.value,
-        onChange: b,
+        onChange: h,
         id: n(o),
         type: "checkbox",
         class: ["dai-checkbox", {
@@ -728,25 +727,25 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
           "dai-checkbox--lg": e.size === "large"
         }]
       }), null, 16, Ye),
-      e.label || f.$slots.default ? (i(), u("div", Ke, [
+      e.label || m.$slots.default ? (i(), u("div", Ke, [
         V(F, {
           for: n(o),
           class: "dai-checkbox-control__label"
         }, {
-          default: c(() => [
-            p(f.$slots, "default", {}, () => [
+          default: f(() => [
+            b(m.$slots, "default", {}, () => [
               z(k(e.label), 1)
             ])
           ]),
           _: 3
         }, 8, ["for"])
       ])) : y("", !0),
-      e.hint || f.$slots.hint ? (i(), h(H, {
+      e.hint || m.$slots.hint ? (i(), p(H, {
         key: 1,
         class: "dai-checkbox-control__hint"
       }, {
-        default: c(() => [
-          p(f.$slots, "hint", {}, () => [
+        default: f(() => [
+          b(m.$slots, "hint", {}, () => [
             z(k(e.hint), 1)
           ])
         ]),
@@ -776,7 +775,7 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
   }),
   emits: ["update:modelValue"],
   setup(e) {
-    const t = e, o = B(e, "modelValue"), l = q(), a = L("formElement"), { isValid: s } = T(
+    const t = e, o = B(e, "modelValue"), l = q(), a = L("formElement"), { isValid: s } = P(
       a,
       t.validators,
       t.showValidationError
@@ -789,7 +788,7 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
           type: "radio",
           ref_key: "formElement",
           ref: a,
-          "onUpdate:modelValue": g[0] || (g[0] = (b) => o.value = b)
+          "onUpdate:modelValue": g[0] || (g[0] = (h) => o.value = h)
         }, { ...r.$attrs, class: "" }, {
           value: e.value,
           id: n(l),
@@ -837,23 +836,23 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
           class: "dai-switch__thumb"
         }, null, -1)
       ])], 10, et),
-      e.label || l.$slots.default ? (i(), h(F, {
+      e.label || l.$slots.default ? (i(), p(F, {
         key: 0,
         for: n(o)
       }, {
-        default: c(() => [
-          p(l.$slots, "default", {}, () => [
+        default: f(() => [
+          b(l.$slots, "default", {}, () => [
             z(k(e.label), 1)
           ])
         ]),
         _: 3
       }, 8, ["for"])) : y("", !0),
-      e.hint || l.$slots.hint ? (i(), h(H, {
+      e.hint || l.$slots.hint ? (i(), p(H, {
         key: 1,
         class: "dai-switch-control__hint"
       }, {
-        default: c(() => [
-          p(l.$slots, "hint", {}, () => [
+        default: f(() => [
+          b(l.$slots, "hint", {}, () => [
             z(k(e.hint), 1)
           ])
         ]),
@@ -887,7 +886,7 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
   },
   setup(e) {
     const t = e, o = _(() => t.submit ? "submit" : t.reset ? "reset" : "button"), l = _(() => 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, r) => (i(), h(ye(e.href ? "a" : "button"), {
+    return (s, r) => (i(), p(ye(e.href ? "a" : "button"), {
       type: e.href ? void 0 : o.value,
       form: typeof e.submit == "string" ? e.submit : void 0,
       href: e.href,
@@ -905,7 +904,7 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
         "dai-btn--condensed": e.condensed
       }])
     }, {
-      default: c(() => [
+      default: f(() => [
         e.loading ? (i(), u("span", tt, [...r[0] || (r[0] = [
           d("svg", {
             xmlns: "http://www.w3.org/2000/svg",
@@ -932,7 +931,7 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
             key: 0,
             class: w([e.icon, "dai-btn__icon"])
           }, null, 2)) : y("", !0),
-          p(s.$slots, "default"),
+          b(s.$slots, "default"),
           e.iconAfter ? (i(), u("div", {
             key: 1,
             class: w([e.iconAfter, "dai-btn__icon"])
@@ -945,14 +944,14 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
 }), zt = /* @__PURE__ */ v({
   __name: "popoverDialog",
   setup(e) {
-    return (t, o) => (i(), h(P, {
+    return (t, o) => (i(), p(A, {
       "enter-from-class": "dai-popover-dialog--anim",
       "leave-to-class": "dai-popover-dialog--anim"
     }, {
-      default: c(() => [
+      default: f(() => [
         V(n(ne), { class: "dai-popover-dialog" }, {
-          default: c(() => [
-            p(t.$slots, "default")
+          default: f(() => [
+            b(t.$slots, "default")
           ]),
           _: 3
         })
@@ -963,14 +962,14 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
 }), Lt = /* @__PURE__ */ v({
   __name: "menuItems",
   setup(e) {
-    return (t, o) => (i(), h(P, {
+    return (t, o) => (i(), p(A, {
       "enter-from-class": "dai-menu-items--anim",
       "leave-to-class": "dai-menu-items--anim"
     }, {
-      default: c(() => [
+      default: f(() => [
         V(n(se), { class: "dai-menu-items" }, {
-          default: c(() => [
-            p(t.$slots, "default")
+          default: f(() => [
+            b(t.$slots, "default")
           ]),
           _: 3
         })
@@ -987,14 +986,14 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
     icon: {}
   },
   setup(e) {
-    return (t, o) => (i(), h(n(re), { class: "dai-menu-item" }, {
-      default: c(({ isActive: l, isSelected: a }) => [
+    return (t, o) => (i(), p(n(re), { class: "dai-menu-item" }, {
+      default: f(({ isActive: l, isSelected: a }) => [
         e.icon ? (i(), u("div", at, [
           d("div", {
             class: w(["h-5 w-5", e.icon])
           }, null, 2)
         ])) : y("", !0),
-        p(t.$slots, "default", {
+        b(t.$slots, "default", {
           isActive: l,
           isSelected: a
         })
@@ -1010,19 +1009,19 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
     value: {}
   },
   setup(e) {
-    return (t, o) => (i(), h(n(de), {
+    return (t, o) => (i(), p(n(de), {
       id: e.id,
       "aria-controls": e.ariaControls,
       value: e.value,
       class: "dai-tab"
     }, {
-      default: c(() => [
-        p(t.$slots, "default")
+      default: f(() => [
+        b(t.$slots, "default")
       ]),
       _: 3
     }, 8, ["id", "aria-controls", "value"]));
   }
-}), At = /* @__PURE__ */ v({
+}), Pt = /* @__PURE__ */ v({
   __name: "tabList",
   setup(e) {
     const t = L("tablist"), o = L("slider"), l = U({});
@@ -1037,25 +1036,25 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
         transition: o.value.offsetLeft > r.offsetLeft ? "left .2s, right .5s" : "left .5s, right .2s"
       });
     }
-    return O(() => ge(a)), (s, r) => (i(), h(n(ue), {
+    return O(() => ge(a)), (s, r) => (i(), p(n(ue), {
       ref_key: "tablist",
       ref: t,
       onClickPassive: a,
       class: "dai-tab-list"
     }, {
-      default: c(() => [
+      default: f(() => [
         d("div", {
           ref_key: "slider",
           ref: o,
           class: "dai-tab-list__slider",
           style: N(l.value)
         }, null, 4),
-        p(s.$slots, "default")
+        b(s.$slots, "default")
       ]),
       _: 3
     }, 512));
   }
-}), lt = ["id"], Pt = /* @__PURE__ */ v({
+}), lt = ["id"], At = /* @__PURE__ */ v({
   inheritAttrs: !1,
   __name: "offcanvas",
   props: /* @__PURE__ */ C({
@@ -1072,7 +1071,7 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
   emits: ["update:modelValue"],
   setup(e) {
     const t = e, o = B(e, "modelValue"), l = t.id ?? q(), { classList: a } = $e(document.body, "nui-body-push");
-    A(o, () => {
+    T(o, () => {
       if (!t.push || (a.splice(1), !o.value))
         return;
       let r = "nui-body-push--" + t.position;
@@ -1085,8 +1084,8 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
       window.addEventListener("click", s, { passive: !0 });
     }), R(() => {
       window.removeEventListener("click", s);
-    }), (r, g) => (i(), h(Z, { to: "body" }, [
-      V(P, {
+    }), (r, g) => (i(), p(Z, { to: "body" }, [
+      V(A, {
         appear: "",
         "enter-from-class": "nui-offcanvas--animate-hidden",
         "enter-to-class": "nui-offcanvas--animate-shown",
@@ -1095,7 +1094,7 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
         "leave-to-class": "nui-offcanvas--animate-hidden",
         "leave-active-class": "ease-in-out"
       }, {
-        default: c(() => [
+        default: f(() => [
           o.value ? (i(), u("div", $({
             key: 0,
             id: n(l)
@@ -1107,7 +1106,7 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
               "nui-offcanvas--xl": e.xl
             }]
           }), [
-            p(r.$slots, "default")
+            b(r.$slots, "default")
           ], 16, lt)) : y("", !0)
         ]),
         _: 3
@@ -1169,7 +1168,7 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
     function a() {
       clearTimeout(l), o.value && t.timeout && (l = setTimeout(() => o.value = !1, t.timeout));
     }
-    return A(o, a, { immediate: !0 }), (s, r) => o.value ? (i(), u("div", it, [
+    return T(o, a, { immediate: !0 }), (s, r) => o.value ? (i(), u("div", it, [
       d("div", {
         class: w(["dai-notification", [`dai-notification--${e.color || "secondary"}`]])
       }, [
@@ -1230,19 +1229,19 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
     function s() {
       o.value.length === 0 || l.value.length >= t.length || (l.value.push({ ...o.value[0], id: a++, show: !0 }), o.value.shift());
     }
-    function r(b) {
+    function r(h) {
       setTimeout(() => {
         l.value = l.value.filter(
-          (f) => f.id !== b
+          (m) => m.id !== h
         ), s();
       }, 200);
     }
-    A(o, s, { immediate: !0, deep: !0 });
+    T(o, s, { immediate: !0, deep: !0 });
     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(" ");
+      const h = ["dai-notification-queue__item--anim"];
+      return t.positionX === "right" ? h.push("dai-notification-queue__item--anim-x-right") : t.positionX === "left" ? h.push("dai-notification-queue__item--anim-x-left") : t.positionX === "center" && t.positionY === "top" ? h.push("dai-notification-queue__item--anim-y-top") : t.positionX === "center" && t.positionY === "bottom" && h.push("dai-notification-queue__item--anim-y-bottom"), h.join(" ");
     });
-    return (b, f) => (i(), u("div", {
+    return (h, m) => (i(), u("div", {
       class: w(["dai-notification-queue", {
         "dai-notification-queue--fixed": e.position == "fixed",
         "dai-notification-queue--absolute": e.position == "absolute",
@@ -1260,16 +1259,16 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
         "leave-to-class": g.value,
         "leave-active-class": "dai-notification-queue__item--anim-out"
       }, {
-        default: c(() => [
-          (i(!0), u(I, null, D(l.value, (m) => (i(), h(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": [(x) => m.show = x, (x) => r(m.id)],
+        default: f(() => [
+          (i(!0), u(I, null, D(l.value, (c) => (i(), p(mt, {
+            key: c.id,
+            color: c.color,
+            icon: c.type,
+            message: c.message,
+            detail: c.detail,
+            timeout: c.timeout ?? e.timeout,
+            modelValue: c.show,
+            "onUpdate:modelValue": [(x) => c.show = x, (x) => r(c.id)],
             class: "dai-notification-queue__item"
           }, null, 8, ["color", "icon", "message", "detail", "timeout", "modelValue", "onUpdate:modelValue"]))), 128))
         ]),
@@ -1331,15 +1330,15 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
     function o() {
       t.value = !1;
     }
-    return A(t, (l) => {
+    return T(t, (l) => {
       l ? document.body.classList.add("overflow-hidden") : document.body.classList.remove("overflow-hidden");
-    }), (l, a) => (i(), h(Z, { to: "body" }, [
-      V(P, {
+    }), (l, a) => (i(), p(Z, { to: "body" }, [
+      V(A, {
         appear: "",
         name: "modal",
         duration: { enter: 300, leave: 200 }
       }, {
-        default: c(() => [
+        default: f(() => [
           t.value ? (i(), u("div", ht, [
             a[0] || (a[0] = d("div", {
               class: "modal__backdrop fixed inset-0 bg-primary-50/60 backdrop-blur-sm",
@@ -1351,7 +1350,7 @@ const K = /* @__PURE__ */ je(Ie, [["render", Fe]]), Se = ["id", "type", "pattern
                 class: "min-h-full flex items-center justify-center p-4 sm:p-6"
               }, [
                 d("div", bt, [
-                  p(l.$slots, "default", { close: o })
+                  b(l.$slots, "default", { close: o })
                 ])
               ])
             ])
@@ -1368,7 +1367,7 @@ export {
   ze as Combobox,
   qe as ComboboxButton,
   kt as ComboboxInput,
-  Pe as ComboboxOption,
+  Ae as ComboboxOption,
   Te as ComboboxOptions,
   H as Hint,
   $t as Input,
@@ -1379,7 +1378,7 @@ export {
   Ot as Modal,
   mt as Notification,
   jt as NotificationQueue,
-  Pt as Offcanvas,
+  At as Offcanvas,
   Ut as Popover,
   zt as PopoverDialog,
   It as Progressbar,
@@ -1389,7 +1388,7 @@ export {
   Ct as Switch,
   Tt as Tab,
   Xt as TabContainer,
-  At as TabList,
+  Pt as TabList,
   Dt as TabPanel,
   Bt as Textarea,
   $e as useClassList

package/dist/types/unocss.preset.d.ts

@@ -1,3 +1,7 @@
 import { PresetWind4Options } from "@unocss/preset-wind4";
-declare const _default: import("@unocss/core").PresetFactory<object, PresetWind4Options>;
+import { presetAttributify } from "@unocss/preset-attributify";
+type PresetDaiUiOptions = PresetWind4Options & {
+    attributify?: Parameters<typeof presetAttributify>[0];
+};
+declare const _default: import("@unocss/core").PresetFactory<object, PresetDaiUiOptions>;
 export default _default;

package/dist/unocss.preset.js

@@ -1,24 +1,25 @@
 import { definePreset as t } from "@unocss/core";
 import { theme as r, presetWind4 as s } from "@unocss/preset-wind4";
 import { presetAttributify as i } from "@unocss/preset-attributify";
-import { presetIcons as n } from "@unocss/preset-icons";
-import a from "@unocss/transformer-variant-group";
+import { presetIcons as a } from "@unocss/preset-icons";
+import n from "@unocss/transformer-variant-group";
 import c from "@unocss/transformer-directives";
-const y = t((o) => ({
+const y = t((e) => ({
   presets: [
     //presetWind(options),
-    s(o),
+    s(e),
     //presetForms(),
     i({
       prefix: "un-",
-      prefixedOnly: !0
+      prefixedOnly: !0,
+      ...e?.attributify
     }),
-    n({
+    a({
       scale: 1.2,
       warn: !0
     })
   ],
-  transformers: [a(), c()],
+  transformers: [n(), c()],
   theme: {
     colors: {
       primary: r.colors.indigo,
@@ -122,8 +123,8 @@ const y = t((o) => ({
       active: "active=true"
     }
   },
-  extendTheme: (e) => {
-    e.colors.dark = e.colors.slate;
+  extendTheme: (o) => {
+    o.colors.dark = o.colors.slate;
   },
   name: "dai-ui-preset"
   // it supports most of the configuration you could have in the root config

package/package.json

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