adverich-kun-ui 0.1.358 → 0.1.359

package/dist/components/KunAutocomplete/src/components/KunAutocomplete.vue.js

@@ -1,43 +1,39 @@
-import { mergeModels as A, useModel as R, onMounted as ie, ref as $, watch as re, createElementBlock as k, openBlock as r, createVNode as i, unref as t, isRef as B, createSlots as ae, withCtx as n, createCommentVNode as v, Fragment as se, renderList as ue, createBlock as c, createElementVNode as de, createTextVNode as y, toDisplayString as V, normalizeClass as ce, withModifiers as me } from "vue";
+import { mergeModels as _, useModel as x, onMounted as ne, ref as A, watch as ie, createElementBlock as C, openBlock as s, createVNode as i, unref as t, isRef as z, createSlots as ae, withCtx as n, createCommentVNode as w, Fragment as re, renderList as se, createBlock as c, createElementVNode as ue, createTextVNode as V, toDisplayString as $, withModifiers as de } from "vue";
 import { icons as m } from "../../../../icons/index.js";
-import { isNotEmpty as fe, isArray as F } from "../../../../utils/utils.js";
-import pe from "../../../KunInfiniteScroll/src/components/KunInfiniteScroll.vue.js";
-import he from "../../../KunList/src/components/KunList.vue.js";
-import T from "../../../KunListItem/src/components/KunListItem.vue.js";
-import x from "../../../KunListItemTitle/src/components/KunListItemTitle.vue.js";
-import ke from "../../../KunListItemSubtitle/src/components/KunListItemSubtitle.vue.js";
-import ve from "../../../KunMenu/src/components/KunMenu.vue.js";
-import { useAutocomplete as ye } from "../composables/useAutocomplete.js";
-import { KunAutocompleteProps as be } from "../composables/KunAutocompleteProps.js";
-import ge from "../../../KunTextField/src/components/KunTextField.vue.js";
-import Ce from "../../../KunBtn/src/components/KunBtn.vue.js";
-import we from "../../../KunChip/src/components/KunChip.vue.js";
-import b from "../../../KunIcon/src/components/KunIcon.vue.js";
-const Ve = {
+import { isNotEmpty as ce, isArray as F } from "../../../../utils/utils.js";
+import me from "../../../KunInfiniteScroll/src/components/KunInfiniteScroll.vue.js";
+import fe from "../../../KunList/src/components/KunList.vue.js";
+import B from "../../../KunListItem/src/components/KunListItem.vue.js";
+import E from "../../../KunListItemTitle/src/components/KunListItemTitle.vue.js";
+import pe from "../../../KunListItemSubtitle/src/components/KunListItemSubtitle.vue.js";
+import he from "../../../KunMenu/src/components/KunMenu.vue.js";
+import { useAutocomplete as ve } from "../composables/useAutocomplete.js";
+import { KunAutocompleteProps as ye } from "../composables/KunAutocompleteProps.js";
+import ke from "../../../KunTextField/src/components/KunTextField.vue.js";
+import ge from "../../../KunChip/src/components/KunChip.vue.js";
+import v from "../../../KunIcon/src/components/KunIcon.vue.js";
+const be = {
   key: 0,
   class: "flex justify-center align-center"
-}, Ie = { class: "flex justify-center align-center" }, Se = {
-  key: 0,
-  class: "sticky top-0 z-10 p-2 border-b"
-}, Ue = {
+}, Ce = { class: "flex justify-center align-center" }, Be = {
   __name: "KunAutocomplete",
-  props: /* @__PURE__ */ A(be, {
+  props: /* @__PURE__ */ _(ye, {
     modelValue: { default: null },
     modelModifiers: {},
     items: { default: [], type: Array, required: !0 },
     itemsModifiers: {}
   }),
-  emits: /* @__PURE__ */ A(["update:modelValue", "selectedItem", "createItem", "validation", "search"], ["update:modelValue", "update:items"]),
-  setup(g, { emit: E }) {
-    const a = R(g, "modelValue"), I = R(g, "items"), u = g, f = E, {
-      textFieldRef: C,
-      listRef: S,
-      menuModel: s,
+  emits: /* @__PURE__ */ _(["update:modelValue", "selectedItem", "createItem", "validation", "search"], ["update:modelValue", "update:items"]),
+  setup(y, { emit: N }) {
+    const a = x(y, "modelValue"), I = x(y, "items"), u = y, f = N, {
+      textFieldRef: k,
+      listRef: g,
+      menuModel: r,
       search: d,
-      removeItem: N,
+      removeItem: T,
       clearSelection: L,
       lightReset: U,
-      openMenu: w,
+      openMenu: b,
       closeMenu: H,
       toggleMenu: O,
       onMenuKeydown: j,
@@ -45,15 +41,14 @@ const Ve = {
       textArr: P,
       getItemText: W,
       isAlphanumeric: G,
-      createItem: J,
-      checkDisabled: Q,
-      itemToString: D,
-      placeholder: X
-    } = ye(u, f, a, I);
-    ie(() => {
-      u.focusOnRender && C.value.focus();
+      checkDisabled: J,
+      itemToString: S,
+      placeholder: Q
+    } = ve(u, f, a, I);
+    ne(() => {
+      u.focusOnRender && k.value.focus();
     });
-    const K = $(null), p = $(""), M = (e) => {
+    const D = A(null), p = A(""), K = (e) => {
       for (const o of u.rules) {
         const l = o(e);
         if (l !== !0)
@@ -61,162 +56,150 @@ const Ve = {
       }
       return p.value = "", f("validation", !0), !0;
     };
-    re(() => a.value, (e, o) => {
-      fe(u.rules) && M(e);
+    ie(() => a.value, (e, o) => {
+      ce(u.rules) && K(e);
     });
-    function Y() {
+    function X() {
       var e;
-      s.value = !1, (e = C.value.inputField) == null || e.focus();
+      r.value = !1, (e = k.value.inputField) == null || e.focus();
     }
-    function Z(e) {
+    function Y(e) {
       var l, h;
       const o = e.key;
       if (o === "Tab" || o === "Shift") {
         H();
         return;
       }
-      (G(o) || o === "Backspace") && w(), ["ArrowUp", "ArrowDown"].includes(o) && (e.preventDefault(), s.value || w(), (h = (l = S.value) == null ? void 0 : l.focusWithKey) == null || h.call(l, o));
+      (G(o) || o === "Backspace") && b(), ["ArrowUp", "ArrowDown"].includes(o) && (e.preventDefault(), r.value || b(), console.log("listRef.value", g.value), (h = (l = g.value) == null ? void 0 : l.focusWithKey) == null || h.call(l, o));
     }
-    function ee(e) {
+    function Z(e) {
       f("search", d);
     }
-    function le() {
-      M(a);
+    function ee() {
+      K(a);
     }
-    function te(e) {
+    function le(e) {
       j(e);
     }
-    function oe() {
+    function te() {
     }
-    return (e, o) => (r(), k("div", {
+    return (e, o) => (s(), C("div", {
       class: "w-full h-fit",
       ref_key: "parentRef",
-      ref: K
+      ref: D
     }, [
-      i(ge, {
+      i(ke, {
         modelValue: t(d),
         "onUpdate:modelValue": [
-          o[1] || (o[1] = (l) => B(d) ? d.value = l : null),
-          ee
+          o[1] || (o[1] = (l) => z(d) ? d.value = l : null),
+          Z
         ],
         label: e.label,
         dirty: "",
         "hide-details": e.hideDetails,
         density: e.density,
         ref_key: "textFieldRef",
-        ref: C,
+        ref: k,
         autocomplete: "off",
-        onFocusInput: le,
+        onFocusInput: ee,
         onHandleClick: t(O),
-        rounded: t(s) ? "rounded-t" : "rounded",
-        onBlur: oe,
-        onKeyDown: Z,
-        placeholder: u.multiple && t(F)(a.value) && a.value.length ? "" : t(X),
+        rounded: t(r) ? "rounded-t" : "rounded",
+        onBlur: te,
+        onKeyDown: Y,
+        placeholder: u.multiple && t(F)(a.value) && a.value.length ? "" : t(Q),
         error: !!p.value,
         "error-messages": p.value
       }, ae({
         default: n(() => [
-          t(F)(a.value) ? (r(), k("div", Ve, [
-            (r(!0), k(se, null, ue(a.value, (l) => (r(), c(we, {
+          t(F)(a.value) ? (s(), C("div", be, [
+            (s(!0), C(re, null, se(a.value, (l) => (s(), c(ge, {
               key: l.id ?? l.name,
               size: "small",
               class: "ml-1"
             }, {
               default: n(() => [
-                de("div", Ie, [
-                  y(V(t(W)(l, e.itemTitle)) + " ", 1),
-                  i(b, {
+                ue("div", Ce, [
+                  V($(t(W)(l, e.itemTitle)) + " ", 1),
+                  i(v, {
                     color: "error",
                     icon: t(m).close,
                     size: "small",
                     class: "ml-1",
-                    onClick: (h) => t(N)(l)
+                    onClick: (h) => t(T)(l)
                   }, null, 8, ["icon", "onClick"])
                 ])
               ]),
               _: 2
             }, 1024))), 128))
-          ])) : v("", !0),
-          i(ve, {
+          ])) : w("", !0),
+          i(he, {
             transition: "fade",
             "onClick:outside": t(U),
-            modelValue: t(s),
-            "onUpdate:modelValue": o[0] || (o[0] = (l) => B(s) ? s.value = l : null),
+            modelValue: t(r),
+            "onUpdate:modelValue": o[0] || (o[0] = (l) => z(r) ? r.value = l : null),
             activator: "parent",
             "z-index": e.zIndex,
-            "parent-ref": K.value,
+            "parent-ref": D.value,
             location: "bottom",
             origin: "bottom left",
-            onHandleEscape: Y,
+            onHandleEscape: X,
             "close-on-content-click": e.closeOnSelect,
             width: "w-full",
             "max-height": e.maxHeight,
             "hide-details": e.hideDetails
           }, {
             default: n(() => [
-              e.hasCreateItem ? (r(), k("div", Se, [
-                i(Ce, {
-                  onClick: t(J),
-                  bgColor: e.btnCreateBg,
-                  class: ce(e.btnCreateClass)
-                }, {
-                  default: n(() => [
-                    y(V(e.btnCreateText), 1)
-                  ]),
-                  _: 1
-                }, 8, ["onClick", "bgColor", "class"])
-              ])) : v("", !0),
-              i(he, {
+              i(fe, {
                 "onClick:select": t(q),
                 ref_key: "listRef",
-                ref: S,
-                onKeyDown: te,
+                ref: g,
+                onKeyDown: le,
                 selectable: !0
               }, {
                 default: n(() => [
-                  i(pe, {
+                  i(me, {
                     items: I.value,
                     search: t(d),
                     "searchable-keys": u.searchableKeys,
                     virtual: !1,
                     "items-per-intersection": 10,
-                    enabled: t(s),
+                    enabled: t(r),
                     "item-height": 48
                   }, {
-                    default: n(({ item: l, index: h, empty: ne }) => {
-                      var _, z;
+                    default: n(({ item: l, index: h, empty: oe }) => {
+                      var M, R;
                       return [
-                        !ne && l ? (r(), c(T, {
+                        !oe && l ? (s(), c(B, {
                           value: l,
-                          key: ((_ = l.id) == null ? void 0 : _.toString()) ?? l.name,
-                          disabled: t(Q)(l),
+                          key: ((M = l.id) == null ? void 0 : M.toString()) ?? l.name,
+                          disabled: t(J)(l),
                           "bg-items": e.bgItemListColor,
                           "hover-bg": e.hoverItemListColor,
                           activeClass: e.selectedItemListColor,
                           density: e.density,
-                          id: ((z = l.id) == null ? void 0 : z.toString()) ?? l.name,
+                          id: ((R = l.id) == null ? void 0 : R.toString()) ?? l.name,
                           selectable: !0
                         }, {
                           default: n(() => [
-                            i(x, { class: "text-wrap" }, {
+                            i(E, { class: "text-wrap" }, {
                               default: n(() => [
-                                y(V(t(D)(l, e.itemTitle ?? t(P), "hasDefault")), 1)
+                                V($(t(S)(l, e.itemTitle ?? t(P), "hasDefault")), 1)
                               ]),
                               _: 2
                             }, 1024),
-                            i(ke, {
-                              text: e.itemSubtitle ? t(D)(l, e.itemSubtitle) : ""
+                            i(pe, {
+                              text: e.itemSubtitle ? t(S)(l, e.itemSubtitle) : ""
                             }, null, 8, ["text"])
                           ]),
                           _: 2
-                        }, 1032, ["value", "disabled", "bg-items", "hover-bg", "activeClass", "density", "id"])) : (r(), c(T, {
+                        }, 1032, ["value", "disabled", "bg-items", "hover-bg", "activeClass", "density", "id"])) : (s(), c(B, {
                           key: 1,
                           disabled: ""
                         }, {
                           default: n(() => [
-                            i(x, { class: "text-center w-full text-gray-500" }, {
+                            i(E, { class: "text-center w-full text-gray-500" }, {
                               default: n(() => o[2] || (o[2] = [
-                                y(" No hay elementos disponibles ")
+                                V(" No hay elementos disponibles ")
                               ])),
                               _: 1,
                               __: [2]
@@ -240,28 +223,28 @@ const Ve = {
         e.hasIcons ? {
           name: "append-inner",
           fn: n(() => [
-            e.clearable && a.value ? (r(), c(b, {
+            e.clearable && a.value ? (s(), c(v, {
               key: 0,
               onClick: t(L),
               size: "small",
               color: "error",
               icon: t(m).close,
               class: "mr-1 mt-1"
-            }, null, 8, ["onClick", "icon"])) : v("", !0),
-            i(b, {
+            }, null, 8, ["onClick", "icon"])) : w("", !0),
+            i(v, {
               color: "teal-darken-1",
               size: "large",
               class: "cursor-pointer",
-              icon: t(s) ? t(m).menuUpOutline : t(m).menuDownOutline,
-              onClick: me(t(w), ["stop"])
+              icon: t(r) ? t(m).menuUpOutline : t(m).menuDownOutline,
+              onClick: de(t(b), ["stop"])
             }, null, 8, ["icon", "onClick"]),
-            e.required ? (r(), c(b, {
+            e.required ? (s(), c(v, {
               key: 1,
               color: "teal-darken-1",
               size: "x-small",
               class: "mb-4",
               icon: t(m).asterisk
-            }, null, 8, ["icon"])) : v("", !0)
+            }, null, 8, ["icon"])) : w("", !0)
           ]),
           key: "0"
         } : void 0
@@ -270,5 +253,5 @@ const Ve = {
   }
 };
 export {
-  Ue as default
+  Be as default
 };

package/dist/components/KunList/src/components/KunList.vue.js

@@ -1,7 +1,7 @@
-import { mergeModels as g, ref as w, useModel as D, provide as p, computed as B, createElementBlock as M, openBlock as S, mergeProps as I, withModifiers as E, renderSlot as L } from "vue";
+import { mergeModels as m, ref as v, useModel as D, provide as p, computed as B, onUpdated as C, createElementBlock as I, openBlock as M, mergeProps as S, withModifiers as E, renderSlot as L } from "vue";
 const R = {
   __name: "KunList",
-  props: /* @__PURE__ */ g({
+  props: /* @__PURE__ */ m({
     nav: Boolean,
     sub: Boolean,
     dense: Boolean,
@@ -20,33 +20,39 @@ const R = {
     },
     selectedModifiers: {}
   }),
-  emits: /* @__PURE__ */ g(["keyDown", "click:select", "update:selected"], ["update:selected"]),
-  setup(o, { expose: b, emit: y }) {
-    const u = o, a = y, f = w(null), c = w([]), s = D(o, "selected");
+  emits: /* @__PURE__ */ m(["keyDown", "click:select", "update:selected"], ["update:selected"]),
+  setup(o, { expose: w, emit: b }) {
+    const d = o, a = b, f = v(null), r = v([]), i = D(o, "selected");
     p("registerListItemRef", (e) => {
-      e && !c.value.includes(e) && c.value.push(e);
+      e ? (console.log(e), e.isConnected && !r.value.includes(e) && (r.value.push(e), r.value.sort((t, n) => {
+        const s = t.id ?? "", l = n.id ?? "";
+        return s.localeCompare(l, void 0, { numeric: !0, sensitivity: "base" });
+      }))) : r.value = r.value.filter((t) => t && t.isConnected);
     });
-    const m = B(() => u.selectable && u.selectionMode === "multiple");
-    function v(e) {
-      if (!(!u.selectable || e == null))
-        if (m.value) {
-          const t = s.value.includes(e);
-          s.value = t ? s.value.filter((n) => n !== e) : [...s.value, e];
+    const g = B(() => d.selectable && d.selectionMode === "multiple");
+    function y(e) {
+      if (!(!d.selectable || e == null))
+        if (g.value) {
+          const t = i.value.includes(e);
+          i.value = t ? i.value.filter((n) => n !== e) : [...i.value, e];
         } else
-          s.value = e;
+          i.value = e;
     }
+    C(() => {
+      r.value = r.value.filter((e) => e && e.isConnected);
+    });
     function k(e) {
       var t, n;
-      return !u.selectable || e == null ? !1 : m.value ? (n = (t = s.value) == null ? void 0 : t.includes) == null ? void 0 : n.call(t, e) : s.value === e;
+      return !d.selectable || e == null ? !1 : g.value ? (n = (t = i.value) == null ? void 0 : t.includes) == null ? void 0 : n.call(t, e) : i.value === e;
     }
     p("kunListContext", {
-      toggleItem: v,
+      toggleItem: y,
       isSelected: k
     });
     function A(e) {
-      var r;
+      var s;
       a("keyDown", e);
-      const t = e.key, n = c.value.filter(Boolean);
+      const t = e.key, n = r.value.filter((l) => l && l.isConnected);
       if (!(!n.length || !["ArrowUp", "ArrowDown", "Enter"].includes(t))) {
         if (t === "Enter") {
           const l = document.activeElement;
@@ -55,26 +61,26 @@ const R = {
         }
         if (t === "ArrowUp" || t === "ArrowDown") {
           e.preventDefault();
-          const l = n.findIndex((x) => x === document.activeElement);
-          let d = -1;
-          l === -1 ? d = t === "ArrowDown" ? 0 : n.length - 1 : t === "ArrowDown" ? d = (l + 1) % n.length : t === "ArrowUp" && (d = (l - 1 + n.length) % n.length);
-          const i = n[d];
-          (r = i == null ? void 0 : i.focus) == null || r.call(i);
+          const l = n.findIndex((h) => h === document.activeElement);
+          let u = -1;
+          l === -1 ? (console.log(1), u = t === "ArrowDown" ? 0 : n.length - 1) : t === "ArrowDown" ? (console.log(2), u = (l + 1) % n.length) : t === "ArrowUp" && (console.log(3), u = (l - 1 + n.length) % n.length), console.log(`currentIndex: ${u}`);
+          const c = n[u];
+          (s = c == null ? void 0 : c.focus) == null || s.call(c);
           return;
         }
       }
     }
-    function h(e = "ArrowDown") {
+    function x(e = "ArrowDown") {
       var l;
-      const t = c.value.filter(Boolean);
+      const t = r.value.filter(Boolean);
       if (!t.length) return;
-      const n = e === "ArrowDown" ? 0 : t.length - 1, r = t[n];
-      (l = r == null ? void 0 : r.focus) == null || l.call(r);
+      const n = e === "ArrowDown" ? 0 : t.length - 1, s = t[n];
+      (l = s == null ? void 0 : s.focus) == null || l.call(s);
     }
-    return b({ focusWithKey: h, focus: () => {
+    return w({ focusWithKey: x, focus: () => {
       var e, t;
       return (t = (e = f.value) == null ? void 0 : e.focus) == null ? void 0 : t.call(e);
-    } }), (e, t) => (S(), M("ul", I({
+    } }), (e, t) => (M(), I("ul", S({
       ref_key: "ulRef",
       ref: f,
       role: "list",

package/dist/components/KunListItem/src/components/KunListItem.vue.js

@@ -1,19 +1,19 @@
-import { useAttrs as q, computed as r, ref as H, inject as R, onMounted as J, onBeforeUnmount as Q, createBlock as u, openBlock as a, unref as T, withCtx as B, resolveDynamicComponent as v, mergeProps as h, withKeys as L, withModifiers as N, createElementVNode as C, createElementBlock as n, createCommentVNode as s, renderSlot as c, normalizeClass as i, toDisplayString as I } from "vue";
-import P from "../../../KunIcon/src/components/KunIcon.vue.js";
-import { RouterLink as W } from "vue-router";
-const X = { class: "flex w-full items-center" }, Y = {
+import { useAttrs as H, computed as r, ref as J, inject as R, getCurrentInstance as Q, onMounted as T, onBeforeUnmount as W, createBlock as o, openBlock as l, unref as X, withCtx as $, resolveDynamicComponent as v, mergeProps as h, withKeys as L, withModifiers as P, createElementVNode as C, createElementBlock as a, createCommentVNode as s, renderSlot as c, normalizeClass as i, toDisplayString as I } from "vue";
+import M from "../../../KunIcon/src/components/KunIcon.vue.js";
+import { RouterLink as Y } from "vue-router";
+const Z = { class: "flex w-full items-center" }, _ = {
   key: 0,
   class: "shrink-0 flex items-center gap-2 me-2"
-}, Z = ["src"], _ = {
+}, ee = ["src"], te = {
   key: 1,
   class: "shrink-0 flex items-center gap-2 ms-3"
-}, ee = ["src"], te = { class: "flex w-full items-center" }, le = {
+}, ne = ["src"], le = { class: "flex w-full items-center" }, ae = {
   key: 0,
   class: "shrink-0 flex items-center gap-2 me-2"
-}, ae = ["src"], ne = {
+}, se = ["src"], re = {
   key: 1,
   class: "shrink-0 flex items-center gap-2 ms-3"
-}, se = ["src"], re = "w-full flex transition duration-150 ease-in-out", oe = {
+}, ie = ["src"], de = "w-full flex transition duration-150 ease-in-out", fe = {
   __name: "KunListItem",
   props: {
     value: [String, Number, Boolean, Object, Array, null],
@@ -46,31 +46,35 @@ const X = { class: "flex w-full items-center" }, Y = {
     titleClass: { type: String, default: "font-medium" },
     subtitle: [String, Number, Boolean],
     subtitleClass: { type: String, default: "text-sm text-slate-800 dark:text-slate-200" },
-    containerClass: { type: [String, Array, Object], default: "" }
+    containerClass: { type: [String, Array, Object], default: "" },
+    id: [String, Number]
   },
   emits: ["click"],
   setup(e, { emit: D }) {
-    const $ = q(), x = r(() => $.class), j = r(() => {
-      const { class: l, ...m } = $;
+    const B = H(), x = r(() => B.class), j = r(() => {
+      const { class: n, ...m } = B;
       return m;
-    }), t = e, G = D, f = H(null), y = R("registerListItemRef", null), o = R("kunListContext", null);
-    J(() => {
-      y && f.value && y(f.value);
-    }), Q(() => {
-      y && y(null);
+    }), t = e, G = D, f = J(null), g = R("registerListItemRef", null), u = R("kunListContext", null), E = r(() => {
+      var n;
+      return t.id ? t.id : `kun-list-item-${((n = Q()) == null ? void 0 : n.uid) ?? Math.random().toString(36).slice(2, 7)}`;
     });
-    const g = (l) => typeof l == "object" || typeof l == "function", E = r(() => !!(t.prependIcon || t.prependAvatar)), K = r(() => !!(t.appendIcon || t.appendAvatar)), S = r(() => {
-      var l;
-      return ((l = o == null ? void 0 : o.isSelected) == null ? void 0 : l.call(o, t.value)) ?? !1;
-    }), w = r(() => t.active), M = r(() => !!t.to);
-    function b(l, m = null) {
+    T(() => {
+      g && f.value && g(f.value);
+    }), W(() => {
+      g && g(null);
+    });
+    const y = (n) => typeof n == "object" || typeof n == "function", K = r(() => !!(t.prependIcon || t.prependAvatar)), N = r(() => !!(t.appendIcon || t.appendAvatar)), S = r(() => {
+      var n;
+      return ((n = u == null ? void 0 : u.isSelected) == null ? void 0 : n.call(u, t.value)) ?? !1;
+    }), w = r(() => t.active), V = r(() => !!t.to);
+    function b(n, m = null) {
       var p, k;
       if (t.disabled) return;
-      G("click", l);
+      G("click", n);
       const d = ((p = f.value) == null ? void 0 : p.$el) ?? f.value;
-      d != null && d.dispatchEvent && d.dispatchEvent(new CustomEvent("select", { detail: t.value, bubbles: !0 })), o && t.selectable && t.value !== null && ((k = o.toggleItem) == null || k.call(o, t.value), d != null && d.dispatchEvent && d.dispatchEvent(new CustomEvent("selected", { detail: t.value, bubbles: !0 }))), m && m(l);
+      d != null && d.dispatchEvent && d.dispatchEvent(new CustomEvent("select", { detail: t.value, bubbles: !0 })), u && t.selectable && t.value !== null && ((k = u.toggleItem) == null || k.call(u, t.value), d != null && d.dispatchEvent && d.dispatchEvent(new CustomEvent("selected", { detail: t.value, bubbles: !0 }))), m && m(n);
     }
-    const V = r(() => {
+    const z = r(() => {
       switch (t.variant) {
         case "outlined":
           return "border border-gray-300 dark:border-gray-700";
@@ -85,7 +89,7 @@ const X = { class: "flex w-full items-center" }, Y = {
         default:
           return "";
       }
-    }), z = r(() => {
+    }), F = r(() => {
       switch (t.density) {
         case "comfortable":
           return "py-2";
@@ -94,12 +98,12 @@ const X = { class: "flex w-full items-center" }, Y = {
         default:
           return "py-3";
       }
-    }), F = r(() => t.tile ? "rounded-none" : t.rounded === !0 ? "rounded-md" : t.rounded === !1 ? "" : `rounded-${t.rounded}`), U = r(() => t.ripple ? "relative overflow-hidden" : ""), O = r(() => [
-      re,
-      V.value,
+    }), U = r(() => t.tile ? "rounded-none" : t.rounded === !0 ? "rounded-md" : t.rounded === !1 ? "" : `rounded-${t.rounded}`), q = r(() => t.ripple ? "relative overflow-hidden" : ""), O = r(() => [
+      de,
       z.value,
       F.value,
       U.value,
+      q.value,
       t.textColor,
       t.itemPosition,
       t.bgItems,
@@ -111,14 +115,15 @@ const X = { class: "flex w-full items-center" }, Y = {
       },
       t.containerClass
     ]);
-    return (l, m) => M.value ? (a(), u(T(W), {
+    return (n, m) => V.value ? (l(), o(X(Y), {
       key: 0,
       to: e.to,
       replace: e.replace,
       custom: !0
     }, {
-      default: B(({ href: d, navigate: p, isActive: k }) => [
-        (a(), u(v(e.tag), h({
+      default: $(({ href: d, navigate: p, isActive: k }) => [
+        (l(), o(v(e.tag), h({
+          id: E.value,
           ref_key: "liRef",
           ref: f,
           href: d,
@@ -128,20 +133,20 @@ const X = { class: "flex w-full items-center" }, Y = {
           tabindex: "-1",
           class: O.value,
           onClick: (A) => b(A, p),
-          onKeydown: L(N((A) => b(A, p), ["prevent"]), ["enter"])
-        }, l.$attrs), {
-          default: B(() => [
-            C("div", X, [
-              E.value || l.$slots.prepend ? (a(), n("div", Y, [
-                c(l.$slots, "prepend", {}, () => [
-                  e.prependAvatar ? (a(), n("img", {
+          onKeydown: L(P((A) => b(A, p), ["prevent"]), ["enter"])
+        }, n.$attrs), {
+          default: $(() => [
+            C("div", Z, [
+              K.value || n.$slots.prepend ? (l(), a("div", _, [
+                c(n.$slots, "prepend", {}, () => [
+                  e.prependAvatar ? (l(), a("img", {
                     key: 0,
                     src: e.prependAvatar,
                     class: i(["rounded-full", e.prependClass])
-                  }, null, 10, Z)) : g(e.prependIcon) ? (a(), u(v(e.prependIcon), {
+                  }, null, 10, ee)) : y(e.prependIcon) ? (l(), o(v(e.prependIcon), {
                     key: 1,
                     class: i(e.prependClass)
-                  }, null, 8, ["class"])) : typeof e.prependIcon == "string" ? (a(), u(P, {
+                  }, null, 8, ["class"])) : typeof e.prependIcon == "string" ? (l(), o(M, {
                     key: 2,
                     icon: e.prependIcon,
                     class: i(e.prependClass)
@@ -151,32 +156,32 @@ const X = { class: "flex w-full items-center" }, Y = {
               C("div", h({
                 class: ["flex flex-col min-w-0 flex-1", x.value]
               }, j.value), [
-                c(l.$slots, "default", {}, () => [
-                  c(l.$slots, "title", {}, () => [
-                    e.title ? (a(), n("div", {
+                c(n.$slots, "default", {}, () => [
+                  c(n.$slots, "title", {}, () => [
+                    e.title ? (l(), a("div", {
                       key: 0,
                       class: i(["truncate", e.titleClass])
                     }, I(e.title), 3)) : s("", !0)
                   ]),
-                  c(l.$slots, "subtitle", {}, () => [
-                    e.subtitle ? (a(), n("div", {
+                  c(n.$slots, "subtitle", {}, () => [
+                    e.subtitle ? (l(), a("div", {
                       key: 0,
                       class: i(["truncate", e.subtitleClass])
                     }, I(e.subtitle), 3)) : s("", !0)
                   ])
                 ])
               ], 16),
-              K.value ? (a(), n("div", _, [
-                c(l.$slots, "append", {}, () => [
-                  e.appendAvatar ? (a(), n("img", {
+              N.value ? (l(), a("div", te, [
+                c(n.$slots, "append", {}, () => [
+                  e.appendAvatar ? (l(), a("img", {
                     key: 0,
                     src: e.appendAvatar,
                     class: "w-8 h-8 rounded-full"
-                  }, null, 8, ee)) : s("", !0),
-                  g(e.appendIcon) ? (a(), u(v(e.appendIcon), {
+                  }, null, 8, ne)) : s("", !0),
+                  y(e.appendIcon) ? (l(), o(v(e.appendIcon), {
                     key: 1,
                     class: "w-5 h-5"
-                  })) : e.appendIcon ? (a(), n("i", {
+                  })) : e.appendIcon ? (l(), a("i", {
                     key: 2,
                     class: i([e.appendClass, "text-xl leading-none"])
                   }, null, 2)) : s("", !0)
@@ -185,11 +190,12 @@ const X = { class: "flex w-full items-center" }, Y = {
             ])
           ]),
           _: 2
-        }, 1040, ["href", "aria-selected", "aria-disabled", "class", "onClick", "onKeydown"]))
+        }, 1040, ["id", "href", "aria-selected", "aria-disabled", "class", "onClick", "onKeydown"]))
       ]),
       _: 3
-    }, 8, ["to", "replace"])) : (a(), u(v(e.tag), h({
+    }, 8, ["to", "replace"])) : (l(), o(v(e.tag), h({
       key: 1,
+      id: E.value,
       ref_key: "liRef",
       ref: f,
       role: "option",
@@ -198,20 +204,20 @@ const X = { class: "flex w-full items-center" }, Y = {
       tabindex: "-1",
       class: [O.value],
       onClick: b,
-      onKeydown: L(N(b, ["prevent"]), ["enter"])
-    }, l.$attrs), {
-      default: B(() => [
-        C("div", te, [
-          E.value || l.$slots.prepend ? (a(), n("div", le, [
-            c(l.$slots, "prepend", {}, () => [
-              e.prependAvatar ? (a(), n("img", {
+      onKeydown: L(P(b, ["prevent"]), ["enter"])
+    }, n.$attrs), {
+      default: $(() => [
+        C("div", le, [
+          K.value || n.$slots.prepend ? (l(), a("div", ae, [
+            c(n.$slots, "prepend", {}, () => [
+              e.prependAvatar ? (l(), a("img", {
                 key: 0,
                 src: e.prependAvatar,
                 class: i(["rounded-full", e.prependClass])
-              }, null, 10, ae)) : g(e.prependIcon) ? (a(), u(v(e.prependIcon), {
+              }, null, 10, se)) : y(e.prependIcon) ? (l(), o(v(e.prependIcon), {
                 key: 1,
                 class: i(e.prependClass)
-              }, null, 8, ["class"])) : typeof e.prependIcon == "string" ? (a(), u(P, {
+              }, null, 8, ["class"])) : typeof e.prependIcon == "string" ? (l(), o(M, {
                 key: 2,
                 icon: e.prependIcon,
                 class: i(e.prependClass)
@@ -221,32 +227,32 @@ const X = { class: "flex w-full items-center" }, Y = {
           C("div", h({
             class: ["flex flex-col min-w-0 flex-1", x.value]
           }, j.value), [
-            c(l.$slots, "default", {}, () => [
-              c(l.$slots, "title", {}, () => [
-                e.title ? (a(), n("div", {
+            c(n.$slots, "default", {}, () => [
+              c(n.$slots, "title", {}, () => [
+                e.title ? (l(), a("div", {
                   key: 0,
                   class: i(["truncate", e.titleClass])
                 }, I(e.title), 3)) : s("", !0)
               ]),
-              c(l.$slots, "subtitle", {}, () => [
-                e.subtitle ? (a(), n("div", {
+              c(n.$slots, "subtitle", {}, () => [
+                e.subtitle ? (l(), a("div", {
                   key: 0,
                   class: i(["truncate", e.subtitleClass])
                 }, I(e.subtitle), 3)) : s("", !0)
               ])
             ])
           ], 16),
-          K.value ? (a(), n("div", ne, [
-            c(l.$slots, "append", {}, () => [
-              e.appendAvatar ? (a(), n("img", {
+          N.value ? (l(), a("div", re, [
+            c(n.$slots, "append", {}, () => [
+              e.appendAvatar ? (l(), a("img", {
                 key: 0,
                 src: e.appendAvatar,
                 class: "w-8 h-8 rounded-full"
-              }, null, 8, se)) : s("", !0),
-              g(e.appendIcon) ? (a(), u(v(e.appendIcon), {
+              }, null, 8, ie)) : s("", !0),
+              y(e.appendIcon) ? (l(), o(v(e.appendIcon), {
                 key: 1,
                 class: "w-5 h-5"
-              })) : e.appendIcon ? (a(), n("i", {
+              })) : e.appendIcon ? (l(), a("i", {
                 key: 2,
                 class: i([e.appendIcon, "text-xl leading-none"])
               }, null, 2)) : s("", !0)
@@ -255,9 +261,9 @@ const X = { class: "flex w-full items-center" }, Y = {
         ])
       ]),
       _: 3
-    }, 16, ["aria-selected", "aria-disabled", "class", "onKeydown"]));
+    }, 16, ["id", "aria-selected", "aria-disabled", "class", "onKeydown"]));
   }
 };
 export {
-  oe as default
+  fe as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adverich-kun-ui",
-  "version": "0.1.358",
+  "version": "0.1.359",
   "type": "module",
   "description": "Una librería de componentes Vue.js con Tailwind CSS",
   "main": "dist/index.js",