adverich-kun-ui 0.1.91 → 0.1.92

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

@@ -1,58 +1,59 @@
-import { mergeModels as E, useModel as L, onMounted as te, ref as le, watch as oe, createBlock as d, openBlock as i, unref as e, isRef as R, createSlots as ne, withCtx as r, createElementBlock as U, createCommentVNode as h, createVNode as a, Fragment as re, renderList as ie, createElementVNode as ae, createTextVNode as b, toDisplayString as V, normalizeClass as se, withModifiers as ue } from "vue";
+import { mergeModels as A, useModel as E, onMounted as le, ref as oe, watch as ne, createBlock as d, openBlock as i, unref as e, isRef as L, createSlots as re, withCtx as r, createElementBlock as R, createCommentVNode as h, createVNode as a, Fragment as ie, renderList as ae, createElementVNode as se, createTextVNode as b, toDisplayString as V, normalizeClass as ue, withModifiers as de } from "vue";
 import { icons as f } from "../../../../icons/index.js";
-import { isNotEmpty as de, isArray as z } from "../../../../utils/utils.js";
-import ce from "../../../KunInfiniteScroll/src/components/KunInfiniteScroll.vue.js";
-import me from "../../../KunList/src/components/KunList.vue.js";
-import B from "../../../KunListItem/src/components/KunListItem.vue.js";
-import fe from "../../../KunListItemTitle/src/components/KunListItemTitle.vue.js";
-import pe from "../../../KunListItemSubtitle/src/components/KunListItemSubtitle.vue.js";
-import ke from "../../../kunMenu/src/components/kunMenu.vue.js";
-import { useAutocomplete as ye } from "../composables/useAutocomplete.js";
-import { KunAutocompleteProps as he } from "../composables/KunAutocompleteProps.js";
-import ve from "../../../KunTextField/src/components/KunTextField.vue.js";
+import { isNotEmpty as ce, isArray as U } from "../../../../utils/utils.js";
+import me from "../../../KunInfiniteScroll/src/components/KunInfiniteScroll.vue.js";
+import fe from "../../../KunList/src/components/KunList.vue.js";
+import z from "../../../KunListItem/src/components/KunListItem.vue.js";
+import pe from "../../../KunListItemTitle/src/components/KunListItemTitle.vue.js";
+import ke from "../../../KunListItemSubtitle/src/components/KunListItemSubtitle.vue.js";
+import ye from "../../../kunMenu/src/components/kunMenu.vue.js";
+import { useAutocomplete as he } from "../composables/useAutocomplete.js";
+import { KunAutocompleteProps as ve } from "../composables/KunAutocompleteProps.js";
+import ge from "../../../KunTextField/src/components/KunTextField.vue.js";
 import Ce from "../../../KunBtn/src/components/KunBtn.vue.js";
-import ge from "../../../KunChip/src/components/KunChip.vue.js";
+import be from "../../../KunChip/src/components/KunChip.vue.js";
 import v from "../../../KunIcon/src/components/KunIcon.vue.js";
-const be = {
+const Ve = {
   key: 0,
   class: "flex justify-center align-center"
-}, Ve = { class: "flex justify-center align-center" }, Be = {
+}, Ie = { class: "flex justify-center align-center" }, Fe = {
   __name: "KunAutocomplete",
-  props: /* @__PURE__ */ E(he, {
+  props: /* @__PURE__ */ A(ve, {
     modelValue: { default: null },
     modelModifiers: {},
     items: { default: [], type: Array, required: !0 },
     itemsModifiers: {}
   }),
-  emits: /* @__PURE__ */ E(["createItem", "validation", "search"], ["update:modelValue", "update:items"]),
-  setup(C, { emit: F }) {
-    const u = L(C, "modelValue"), I = L(C, "items"), n = C, p = F, {
+  emits: /* @__PURE__ */ A(["update:model-value", "createItem", "validation", "search"], ["update:modelValue", "update:items"]),
+  setup(g, { emit: B }) {
+    const u = E(g, "modelValue"), I = E(g, "items"), n = g, p = B, {
       selectedItem: c,
       textFieldRef: k,
-      listRef: g,
+      listRef: C,
       menuModel: s,
       search: m,
-      removeItem: N,
-      clearSelection: T,
+      removeItem: F,
+      clearSelection: N,
       lightReset: w,
-      openMenu: K,
-      onMenuKeydown: _,
-      getSelectedItem: H,
-      textArr: O,
-      getItemText: j,
-      createItem: q,
-      checkDisabled: P,
-      itemToString: S,
-      placeholder: D,
-      hasCreateItem: W
-    } = ye(n, p, u, I);
-    te(() => {
+      openMenu: T,
+      toggleMenu: H,
+      onMenuKeydown: K,
+      getSelectedItem: O,
+      textArr: j,
+      getItemText: q,
+      createItem: P,
+      checkDisabled: W,
+      itemToString: _,
+      placeholder: M,
+      hasCreateItem: G
+    } = he(n, p, u, I);
+    le(() => {
       n.focusOnRender && k.value.focus();
     });
-    function G(t) {
-      return u.value === null || u.value === void 0 ? n.bgItemListColor : n.multiple ? u.value.find((o) => o[n.itemValue] === t[n.itemValue]) ? n.selectedColor : n.bgItemListColor : D.value === t[n.itemTitle] ? n.selectedColor : n.bgItemListColor;
+    function J(t) {
+      return u.value === null || u.value === void 0 ? n.bgItemListColor : n.multiple ? u.value.find((o) => o[n.itemValue] === t[n.itemValue]) ? n.selectedColor : n.bgItemListColor : M.value === t[n.itemTitle] ? n.selectedColor : n.bgItemListColor;
     }
-    const y = le(""), M = (t) => {
+    const y = oe(""), S = (t) => {
       for (const o of n.rules) {
         const l = o(t);
         if (l !== !0)
@@ -60,43 +61,43 @@ const be = {
       }
       return y.value = "", p("validation", !0), !0;
     };
-    oe(() => u.value, (t, o) => {
-      de(n.rules) && M(t);
+    ne(() => u.value, (t, o) => {
+      ce(n.rules) && S(t);
     });
-    function $() {
+    function D() {
       var t;
       s.value = !1, (t = k.value.inputField) == null || t.focus();
     }
-    function J(t) {
+    function Q(t) {
       p("search", m);
     }
-    function Q() {
-      M(u);
+    function X() {
+      S(u);
     }
-    function X(t) {
+    function Y(t) {
       const o = t.key;
       if (o === "Escape") {
-        $();
+        D();
         return;
       }
       if (["ArrowDown", "ArrowUp"].includes(o)) {
-        if (!g.value) return;
-        g.value.focusWithKey(o);
+        if (!C.value) return;
+        C.value.focusWithKey(o);
         return;
       }
-      _(t);
+      K(t);
     }
-    function Y(t) {
-      _(t);
+    function Z(t) {
+      K(t);
     }
-    function Z() {
+    function ee() {
       s.value = !1;
     }
-    return (t, o) => (i(), d(ve, {
+    return (t, o) => (i(), d(ge, {
       modelValue: e(m),
       "onUpdate:modelValue": [
-        o[2] || (o[2] = (l) => R(m) ? m.value = l : null),
-        J
+        o[2] || (o[2] = (l) => L(m) ? m.value = l : null),
+        Q
       ],
       label: t.label,
       dirty: "",
@@ -105,61 +106,61 @@ const be = {
       ref_key: "textFieldRef",
       ref: k,
       autocomplete: "off",
-      onKeyDown: X,
-      onFocusInput: Q,
-      onHandleClick: e(K),
-      onBlurInput: Z,
-      placeholder: n.multiple && e(z)(e(c)) && e(c).length ? "" : e(D),
+      onKeyDown: Y,
+      onFocusInput: X,
+      onHandleClick: e(H),
+      onBlurInput: ee,
+      placeholder: n.multiple && e(U)(e(c)) && e(c).length ? "" : e(M),
       error: !!y.value,
       "error-messages": y.value
-    }, ne({
+    }, re({
       default: r(() => [
-        e(z)(e(c)) ? (i(), U("div", be, [
-          (i(!0), U(re, null, ie(e(c), (l) => (i(), d(ge, {
+        e(U)(e(c)) ? (i(), R("div", Ve, [
+          (i(!0), R(ie, null, ae(e(c), (l) => (i(), d(be, {
             key: l.id ?? l.name,
             size: "small",
             class: "ml-1"
           }, {
             default: r(() => [
-              ae("div", Ve, [
-                b(V(e(j)(l, t.itemTitle)) + " ", 1),
+              se("div", Ie, [
+                b(V(e(q)(l, t.itemTitle)) + " ", 1),
                 a(v, {
                   color: "error",
                   icon: e(f).close,
                   size: "small",
                   class: "ml-1",
-                  onClick: (ee) => e(N)(l)
+                  onClick: (te) => e(F)(l)
                 }, null, 8, ["icon", "onClick"])
               ])
             ]),
             _: 2
           }, 1024))), 128))
         ])) : h("", !0),
-        a(ke, {
+        a(ye, {
           transition: "fade",
           "onClick:outside": e(w),
           modelValue: e(s),
-          "onUpdate:modelValue": o[1] || (o[1] = (l) => R(s) ? s.value = l : null),
+          "onUpdate:modelValue": o[1] || (o[1] = (l) => L(s) ? s.value = l : null),
           activator: "parent",
           "parent-ref": e(k),
-          onHandleEscape: $,
+          onHandleEscape: D,
           "close-on-content-click": t.closeOnSelect,
           "max-height": t.maxHeight,
           "hide-details": t.hideDetails
         }, {
           default: r(() => [
-            a(me, {
-              "onUpdate:selected": e(H),
+            a(fe, {
+              "onUpdate:selected": e(O),
               "onClick:select": o[0] || (o[0] = (l) => e(w)()),
               ref_key: "listRef",
-              ref: g,
-              onKeyDown: Y
+              ref: C,
+              onKeyDown: Z
             }, {
               default: r(() => [
-                e(W) ? (i(), d(B, { key: 0 }, {
+                e(G) ? (i(), d(z, { key: 0 }, {
                   default: r(() => [
                     a(Ce, {
-                      onClick: e(q),
+                      onClick: e(P),
                       class: "w-full",
                       color: "bg-green-400"
                     }, {
@@ -172,7 +173,7 @@ const be = {
                   ]),
                   _: 1
                 })) : h("", !0),
-                a(ce, {
+                a(me, {
                   items: I.value,
                   search: e(m),
                   "searchable-keys": n.searchableKeys,
@@ -181,26 +182,26 @@ const be = {
                   virtual: !1,
                   "item-height": 48
                 }, {
-                  default: r(({ item: l, index: ee }) => {
-                    var x, A;
+                  default: r(({ item: l, index: te }) => {
+                    var $, x;
                     return [
-                      (i(), d(B, {
+                      (i(), d(z, {
                         value: l,
-                        key: ((x = l.id) == null ? void 0 : x.toString()) ?? l.name,
-                        disabled: e(P)(l),
-                        class: se(G(l)),
+                        key: (($ = l.id) == null ? void 0 : $.toString()) ?? l.name,
+                        disabled: e(W)(l),
+                        class: ue(J(l)),
                         density: t.density,
-                        id: ((A = l.id) == null ? void 0 : A.toString()) ?? l.name
+                        id: ((x = l.id) == null ? void 0 : x.toString()) ?? l.name
                       }, {
                         default: r(() => [
-                          a(fe, { class: "text-wrap" }, {
+                          a(pe, { class: "text-wrap" }, {
                             default: r(() => [
-                              b(V(e(S)(l, e(O), "hasDefault")), 1)
+                              b(V(e(_)(l, e(j), "hasDefault")), 1)
                             ]),
                             _: 2
                           }, 1024),
-                          a(pe, {
-                            textContent: V(t.itemSubtitle ? e(S)(l, t.itemSubtitle) : "")
+                          a(ke, {
+                            textContent: V(t.itemSubtitle ? e(_)(l, t.itemSubtitle) : "")
                           }, null, 8, ["textContent"])
                         ]),
                         _: 2
@@ -223,7 +224,7 @@ const be = {
         fn: r(() => [
           t.clearable && e(c) ? (i(), d(v, {
             key: 0,
-            onClick: e(T),
+            onClick: e(N),
             size: "small",
             color: "error",
             icon: e(f).close,
@@ -234,7 +235,7 @@ const be = {
             size: "large",
             class: "cursor-pointer",
             icon: e(s) ? e(f).menuUpOutline : e(f).menuDownOutline,
-            onClick: ue(e(K), ["stop"])
+            onClick: de(e(T), ["stop"])
           }, null, 8, ["icon", "onClick"]),
           t.required ? (i(), d(v, {
             key: 1,
@@ -250,5 +251,5 @@ const be = {
   }
 };
 export {
-  Be as default
+  Fe as default
 };

package/dist/components/KunAutocomplete/src/composables/useAutocomplete.js

@@ -1,143 +1,113 @@
-import { ref as b, computed as d } from "vue";
-import { isArray as o, isObject as a } from "../../../../utils/utils.js";
-function W(u, C, l, h, G) {
-  const n = b(null), O = b(null), T = b(null), v = b(!1), c = b(""), g = (e, t) => t.split(".").reduce((r, i) => r && r[i] !== void 0 ? r[i] : null, e);
-  function L() {
-    o(l.value) && (l.value.length ? n.value = h.value.filter((e) => {
-      let t = g(e, u.itemTitle);
-      return a(e) ? l.value.some(
-        (r) => g(r, u.itemTitle).includes(t)
-      ) : l.value.some((r) => r.includes(e));
-    }) : n.value = []), (a(l.value) && Object.keys(l.value).length || typeof l.value == "number" && l.value || typeof l.value == "string" && l.value || typeof l.value == "boolean") && (n.value = h.value.find(
-      (e) => a(e) ? u.returnObject ? u.itemValue ? e[u.itemValue] === l.value[u.itemValue] : e[u.itemTitle] === l.value[u.itemTitle] : e[u.itemValue] === l.value : e === l.value
-    ));
-  }
-  const M = d(() => n.value ? o(n.value) ? n.value.length ? x(n.value, u.itemTitle, "hasDefault") : u.placeholderText : a(n.value) ? x(n.value, u.itemTitle, "hasDefault") : n.value.toString() : h.value.length ? u.placeholderText : u.textNoItems), k = d(() => u.startEmtpy && c.value.length < 3 ? [] : h.value.filter((t) => {
-    if (a(t)) {
-      const r = Object.values(t).filter((f) => {
-        if (!a(f) && !o(f))
-          return f;
-      }), i = [t].reduce((f, F) => u.searchableKeys.map((y) => y.includes(".") ? y.split(".").reduce((K, z) => K && K[z], F) : F[y]), []), s = u.searchableKeys.length ? i : r;
-      return s ? s.some(
-        (f) => f ? f.toString().toLowerCase().includes(c.value.toLowerCase()) : ""
-      ) : c.value ? t == c.value : t;
-    }
-    return t.toString().toLowerCase().includes(c.value.toLowerCase());
-  })), R = d(() => u.itemText.includes(",") ? u.itemText.split(",") : u.itemText);
-  function x(e, t, r) {
-    if (a(e)) {
-      if (t) {
-        if (o(t))
-          return t.map((i) => e[i] ?? "No definido").join(" - ");
-        if (t.includes(","))
-          return t.split(",").map((i) => e[i]).join(" - ");
-        if (t.includes(".")) {
-          const i = t.split(".");
-          let s = e;
-          for (const f of i)
-            s = s[f];
-          return s;
+import { ref as a, computed as S } from "vue";
+import { isArray as o, isObject as c } from "../../../../utils/utils.js";
+function z(u, O, r, T, P) {
+  const t = a(null), v = a(null), b = a(null), i = a(!1), s = a(""), A = (e, n) => n.split(".").reduce((f, l) => f && f[l] !== void 0 ? f[l] : null, e), M = S(() => t.value ? o(t.value) ? t.value.length ? d(t.value, u.itemTitle, "hasDefault") : u.placeholderText : c(t.value) ? d(t.value, u.itemTitle, "hasDefault") : t.value.toString() : T.value.length ? u.placeholderText : u.textNoItems), V = S(() => u.itemText.includes(",") ? u.itemText.split(",") : u.itemText);
+  function d(e, n, f) {
+    if (c(e)) {
+      if (n) {
+        if (o(n))
+          return n.map((l) => e[l] ?? "No definido").join(" - ");
+        if (n.includes(","))
+          return n.split(",").map((l) => e[l]).join(" - ");
+        if (n.includes(".")) {
+          const l = n.split(".");
+          let x = e;
+          for (const K of l)
+            x = x[K];
+          return x;
         }
-        return !u.returnObject && typeof e[t] == "number" || e[t] ? e[t].toString() : "";
+        return !u.returnObject && typeof e[n] == "number" || e[n] ? e[n].toString() : "";
       }
-      if (r)
+      if (f)
         return Object.values(e)[0];
     }
-    return o(e) ? u.returnObject ? e.map((i) => i[t]).join(" - ") : e.map((i) => i).join(" - ") : r && typeof e != "number" && e.includes(",") ? e.split(",") : e;
+    return o(e) ? u.returnObject ? e.map((l) => l[n]).join(" - ") : e.map((l) => l).join(" - ") : f && typeof e != "number" && e.includes(",") ? e.split(",") : e;
   }
-  function D(e) {
-    let t = e[0];
-    if (!u.multiple)
-      n.value = e[0], u.returnObject && (l.value = t), !u.returnObject && a(t) && (u.itemValue ? l.value = t[u.itemValue] : l.value = Object.values(t)[0]), a(t) || (l.value = t), v.value = !1;
-    else if (n.value || (n.value = []), S(t))
-      t && I(t), l.value = n.value;
-    else {
-      if (u.returnObject && n.value.push(t), !u.returnObject && a(t))
-        if (u.itemValue)
-          n.value.push(t[u.itemValue]);
-        else {
-          l.value = n.value.push(Object.values(t)[0]);
-          return;
-        }
-      l.value = n.value;
+  function F(e) {
+    try {
+      u.multiple ? (t.value || (t.value = []), m(e) ? e && g(e) : u.returnObject ? t.value.push(e) : c(e) ? u.itemValue ? t.value.push(e[u.itemValue]) : t.value.push(Object.values(e)[0]) : t.value.push(e)) : (u.returnObject ? t.value = e : c(result) ? u.itemValue ? t.value = e[u.itemValue] : t.value = Object.values(result)[0] : t.value = result, i.value = !1), O("update:model-value", t.value), u.clearOnSelect && I();
+    } catch (n) {
+      console.log(n);
+    } finally {
+      h();
     }
-    u.clearOnSelect && w(), j();
   }
-  function S(e) {
-    return n.value === null ? !1 : e ? n.value.some(
-      (t) => u.returnObject ? t[u.itemValue] === e[u.itemValue] : t === e[u.itemValue]
+  function m(e) {
+    return t.value === null ? !1 : e ? t.value.some(
+      (n) => u.returnObject ? n[u.itemValue] === e[u.itemValue] : n === e[u.itemValue]
     ) : !0;
   }
-  function I(e) {
+  function g(e) {
     if (u.returnObject) {
-      let t = n.value.find(
-        (i) => i[u.itemValue] === e[u.itemValue]
-      ), r = n.value.indexOf(t);
-      n.value.splice(r, 1);
+      const n = t.value.find(
+        (l) => l[u.itemValue] === e[u.itemValue]
+      ), f = t.value.indexOf(n);
+      t.value.splice(f, 1);
     } else {
-      let t = n.value.indexOf(e[u.itemValue]);
-      n.value.splice(t, 1);
+      const n = t.value.indexOf(e[u.itemValue]);
+      t.value.splice(n, 1);
     }
   }
-  function E(e) {
-    u.clearSearchOnSelect && (c.value = ""), u.focusOnSelect && j();
+  function k(e) {
+    u.clearSearchOnSelect && (s.value = ""), u.focusOnSelect && h();
+  }
+  function j() {
+    i.value || (i.value = !0);
   }
-  function m() {
-    v.value = !v.value;
+  function R() {
+    i.value = !i.value;
   }
-  function A(e) {
+  function y(e) {
     return e.length === 1 && e.match(/\w/);
   }
-  function j() {
-    O.value.inputField.focus();
+  function h() {
+    v.value.inputField.focus();
   }
-  function N() {
-    v.value = !0, T.value && O.value.$el.focus();
+  function w() {
+    i.value = !0, b.value && v.value.$el.focus();
   }
-  function B(e) {
-    const t = e.key;
-    (A(t) || t === "Backspace") && (m(), j());
+  function D(e) {
+    const n = e.key;
+    (y(n) || n === "Backspace") && (j(), h());
   }
-  function P() {
-    v.value = !1, C("createItem");
+  function N() {
+    i.value = !1, O("createItem");
   }
-  function $(e) {
-    let t = n.value.indexOf(e);
-    n.value.splice(t, 1), l.value = n.value;
+  function B(e) {
+    let n = t.value.indexOf(e);
+    t.value.splice(n, 1);
   }
-  function w() {
-    c.value = "", o(l.value) && (n.value = []), a(l.value) && (n.value = {}), typeof l.value == "number" && l.value && (n.value = null), typeof l.value == "string" && l.value && (n.value = ""), typeof l.value == "boolean" && (n.value = !1), l.value = n.value;
+  function I() {
+    s.value = "", o(r.value) && (t.value = []), c(r.value) && (t.value = null), typeof r.value == "number" && r.value && (t.value = null), typeof r.value == "string" && r.value && (t.value = null), typeof r.value == "boolean" && (t.value = !1);
   }
-  function q(e) {
-    if (!e.disabledItem) return !1;
-    if (e.disabledItem) return !0;
+  function E(e) {
+    return !!e.disabledItem;
   }
   return {
-    selectedItem: n,
-    textFieldRef: O,
-    listRef: T,
-    menuModel: v,
-    search: c,
-    getItemText: g,
-    setSelectedItemValue: L,
+    selectedItem: t,
+    textFieldRef: v,
+    listRef: b,
+    menuModel: i,
+    search: s,
+    getItemText: A,
     placeholder: M,
-    filteredItems: k,
-    textArr: R,
-    itemToString: x,
-    getSelectedItem: D,
-    checkIfValueExist: S,
-    removeFromArray: I,
-    lightReset: E,
-    openMenu: m,
-    focusOnMenu: N,
-    onMenuKeydown: B,
-    createItem: P,
-    removeItem: $,
-    clearSelection: w,
-    checkDisabled: q,
-    isAlphanumeric: A
+    textArr: V,
+    itemToString: d,
+    getSelectedItem: F,
+    checkIfValueExist: m,
+    removeFromArray: g,
+    lightReset: k,
+    openMenu: j,
+    toggleMenu: R,
+    focusOnMenu: w,
+    onMenuKeydown: D,
+    createItem: N,
+    removeItem: B,
+    clearSelection: I,
+    checkDisabled: E,
+    isAlphanumeric: y
   };
 }
 export {
-  W as useAutocomplete
+  z as useAutocomplete
 };

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

@@ -1,6 +1,6 @@
-import { ref as c, provide as v, createElementBlock as b, openBlock as h, mergeProps as k, renderSlot as A } from "vue";
-import { useKunList as B } from "../composables/useKunList.js";
-const K = {
+import { ref as d, provide as h, createElementBlock as k, openBlock as A, mergeProps as B, renderSlot as S } from "vue";
+import { useKunList as D } from "../composables/useKunList.js";
+const L = {
   __name: "KunList",
   props: {
     nav: Boolean,
@@ -9,7 +9,7 @@ const K = {
     selectable: {
       type: [Boolean, String],
       default: !1,
-      validator: (r) => ["single", "multiple", !0, !1].includes(r)
+      validator: (l) => ["single", "multiple", !0, !1].includes(l)
     },
     bgList: {
       type: String,
@@ -20,61 +20,69 @@ const K = {
       default: "border-gray-300 dark:border-gray-700"
     }
   },
-  emits: ["keyDown"],
-  setup(r, { expose: d, emit: m }) {
-    const g = r, w = m;
-    B(g);
-    const u = c(null), l = c([]);
-    d({
+  emits: ["keyDown", "click:select", "update:selected"],
+  setup(l, { expose: m, emit: g }) {
+    const p = l, s = g;
+    D(p);
+    const u = d(null), r = d([]);
+    m({
       focusWithKey: (e) => {
         var n, o;
-        const t = l.value.filter(Boolean);
+        const t = r.value.filter(Boolean);
         t.length !== 0 && (e === "ArrowDown" ? (n = t[0]) == null || n.focus() : e === "ArrowUp" && ((o = t[t.length - 1]) == null || o.focus()));
       },
       focus: () => {
         var e, t;
         (t = (e = u.value) == null ? void 0 : e.focus) == null || t.call(e);
       }
-    }), v("registerListItemRef", (e) => {
-      e ? l.value.includes(e) || l.value.push(e) : l.value = l.value.filter((t) => t !== e);
+    }), h("registerListItemRef", (e) => {
+      e ? r.value.includes(e) || r.value.push(e) : r.value = r.value.filter((t) => t !== e);
     });
-    function p(e) {
-      var i, f, a;
+    function w(e) {
+      var a, c, f;
       const t = e.key;
-      if (w("keyDown", e), !["ArrowDown", "ArrowUp"].includes(t)) return;
+      if (s("keyDown", e), !["ArrowDown", "ArrowUp"].includes(t)) return;
       e.preventDefault();
-      const n = l.value.filter(Boolean);
+      const n = r.value.filter(Boolean);
       if (n.length === 0) return;
-      const o = n.findIndex((y) => y === document.activeElement);
+      const o = n.findIndex((b) => b === document.activeElement);
       if (o === -1) {
-        t === "ArrowDown" ? (i = n[0]) == null || i.focus() : t === "ArrowUp" && ((f = n[n.length - 1]) == null || f.focus());
+        t === "ArrowDown" ? (a = n[0]) == null || a.focus() : t === "ArrowUp" && ((c = n[n.length - 1]) == null || c.focus());
         return;
       }
-      let s = o;
-      t === "ArrowDown" ? s = (o + 1) % n.length : t === "ArrowUp" && (s = (o - 1 + n.length) % n.length), (a = n[s]) == null || a.focus();
+      let i = o;
+      t === "ArrowDown" ? i = (o + 1) % n.length : t === "ArrowUp" && (i = (o - 1 + n.length) % n.length), (f = n[i]) == null || f.focus();
     }
-    return (e, t) => (h(), b("ul", k({
+    function y(e) {
+      s("click:select", e.detail);
+    }
+    function v(e) {
+      s("update:selected", e.detail);
+    }
+    return (e, t) => (A(), k("ul", B({
       role: "list",
       class: ["w-full", [
         "kun-list",
-        r.bgList,
-        r.borderColor,
+        l.bgList,
+        l.borderColor,
         {
-          "space-y-1": !r.dense,
-          "space-y-0.5": r.dense,
-          "pl-4 border-l-2": r.sub,
-          "p-2 rounded-md": r.nav
+          "space-y-1": !l.dense,
+          "space-y-0.5": l.dense,
+          "pl-4 border-l-2": l.sub,
+          "p-2 rounded-md": l.nav
         }
       ]],
       ref_key: "ulRef",
       ref: u,
       tabindex: "-1",
-      onKeydown: p
+      onKeydown: w,
+      onSelect: y,
+      onSelected: v
     }, e.$attrs), [
-      A(e.$slots, "default")
+      S(e.$slots, "default")
     ], 16));
   }
 };
 export {
-  K as default
+  L as default
 };

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

@@ -1,5 +1,5 @@
-import { ref as c, inject as o, onMounted as f, onBeforeUnmount as b, computed as s, createElementBlock as g, openBlock as m, mergeProps as v, renderSlot as y } from "vue";
-const k = ["aria-selected", "aria-disabled"], h = {
+import { ref as b, inject as d, onMounted as v, onBeforeUnmount as g, computed as c, createElementBlock as m, openBlock as y, mergeProps as k, renderSlot as h } from "vue";
+const B = ["aria-selected", "aria-disabled"], p = {
   __name: "KunListItem",
   props: {
     value: {
@@ -34,25 +34,35 @@ const k = ["aria-selected", "aria-disabled"], h = {
     }
   },
   setup(e) {
-    const a = e, i = c(null), r = o("registerListItemRef", null), t = o("kun-list", null);
-    f(() => {
-      r && i.value && r(i.value);
-    }), b(() => {
-      r && r(null);
+    const a = e, n = b(null), u = d("registerListItemRef", null), t = d("kun-list", null);
+    v(() => {
+      u && n.value && u(n.value);
+    }), g(() => {
+      u && u(null);
     });
-    const n = s(() => {
+    const r = c(() => {
       var l;
       return ((l = t == null ? void 0 : t.isSelected) == null ? void 0 : l.call(t, a.value)) ?? !1;
-    }), u = s(() => a.active);
-    function d() {
-      var l;
-      a.disabled || t && a.value !== null && ((l = t.toggleItem) == null || l.call(t, a.value));
+    }), o = c(() => a.active);
+    function f() {
+      var l, i, s;
+      a.disabled || (t && a.value !== null && ((l = t.toggleItem) == null || l.call(t, a.value)), (i = n.value) == null || i.dispatchEvent(
+        new CustomEvent("select", {
+          detail: a.value,
+          bubbles: !0
+        })
+      ), (s = n.value) == null || s.dispatchEvent(
+        new CustomEvent("selected", {
+          detail: a.value,
+          bubbles: !0
+        })
+      ));
     }
-    return (l, B) => (m(), g("li", v({
+    return (l, i) => (y(), m("li", k({
       ref_key: "liRef",
-      ref: i,
+      ref: n,
       role: "option",
-      "aria-selected": n.value || u.value,
+      "aria-selected": r.value || o.value,
       "aria-disabled": e.disabled,
       tabindex: "-1",
       class: ["w-full flex flex-col", [
@@ -63,16 +73,16 @@ const k = ["aria-selected", "aria-disabled"], h = {
         {
           "cursor-not-allowed opacity-50": e.disabled,
           [`cursor-pointer ${e.hoverBg}`]: !e.disabled,
-          [e.activeClass]: n.value || u.value,
+          [e.activeClass]: r.value || o.value,
           "px-4 py-2": !e.noGutters
         }
       ]],
-      onClick: d
+      onClick: f
     }, l.$attrs), [
-      y(l.$slots, "default")
-    ], 16, k));
+      h(l.$slots, "default")
+    ], 16, B));
   }
 };
 export {
-  h as default
+  p as default
 };

package/package.json

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