adverich-kun-ui 0.1.213 → 0.1.215

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

@@ -1,5 +1,5 @@
-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";
-const R = {
+import { mergeModels as g, ref as b, useModel as D, provide as w, computed as B, createElementBlock as M, openBlock as S, mergeProps as I, withModifiers as E, renderSlot as L } from "vue";
+const K = ["selectable"], C = {
   __name: "KunList",
   props: /* @__PURE__ */ g({
     nav: Boolean,
@@ -9,7 +9,7 @@ const R = {
     selectionMode: {
       type: String,
       default: "single",
-      validator: (o) => ["single", "multiple"].includes(o)
+      validator: (l) => ["single", "multiple"].includes(l)
     },
     bgList: {
       type: String,
@@ -27,9 +27,9 @@ 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");
-    p("registerListItemRef", (e) => {
+  setup(l, { expose: y, emit: p }) {
+    const u = l, a = p, f = b(null), c = b([]), s = D(l, "selected");
+    w("registerListItemRef", (e) => {
       e && !c.value.includes(e) && c.value.push(e);
     });
     const m = B(() => u.selectable && u.selectionMode === "multiple");
@@ -45,7 +45,7 @@ const R = {
       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;
     }
-    p("kunListContext", {
+    w("kunListContext", {
       toggleItem: v,
       isSelected: k
     });
@@ -55,15 +55,15 @@ const R = {
       const t = e.key, n = c.value.filter(Boolean);
       if (!(!n.length || !["ArrowUp", "ArrowDown", "Enter"].includes(t))) {
         if (t === "Enter") {
-          const l = document.activeElement;
-          (l == null ? void 0 : l.getAttribute("role")) === "menuitem" && l.click();
+          const o = document.activeElement;
+          (o == null ? void 0 : o.getAttribute("role")) === "menuitem" && o.click();
           return;
         }
         if (t === "ArrowUp" || t === "ArrowDown") {
           e.preventDefault();
-          const l = n.findIndex((x) => x === document.activeElement);
+          const o = 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);
+          o === -1 ? d = t === "ArrowDown" ? 0 : n.length - 1 : t === "ArrowDown" ? d = (o + 1) % n.length : t === "ArrowUp" && (d = (o - 1 + n.length) % n.length);
           const i = n[d];
           (r = i == null ? void 0 : i.focus) == null || r.call(i);
           return;
@@ -71,13 +71,13 @@ const R = {
       }
     }
     function h(e = "ArrowDown") {
-      var l;
+      var o;
       const t = c.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);
+      (o = r == null ? void 0 : r.focus) == null || o.call(r);
     }
-    return b({ focusWithKey: h, focus: () => {
+    return y({ focusWithKey: h, 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({
@@ -85,23 +85,24 @@ const R = {
       ref: f,
       role: "list",
       class: ["w-full kun-list", [
-        o.bgList,
-        o.borderColor,
+        l.bgList,
+        l.borderColor,
         {
-          "space-y-1": !o.dense,
-          "space-y-0.5": o.dense,
-          "pl-4 border-l-2": o.sub,
-          "p-2 rounded-md": o.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
         }
       ]],
       tabindex: "-1",
       onKeydown: E(A, ["prevent"]),
-      onSelect: t[0] || (t[0] = (n) => a("click:select", n.detail))
+      onSelect: t[0] || (t[0] = (n) => a("click:select", n.detail)),
+      selectable: l.selectable
     }, e.$attrs), [
       L(e.$slots, "default")
-    ], 16));
+    ], 16, K));
   }
 };
 export {
-  R as default
+  C as default
 };

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

@@ -1,16 +1,13 @@
-import { ref as V, inject as E, onMounted as z, onBeforeUnmount as F, computed as i, createBlock as c, openBlock as n, unref as U, withCtx as C, resolveDynamicComponent as f, mergeProps as j, withKeys as K, withModifiers as R, createElementVNode as b, createElementBlock as l, createCommentVNode as s, renderSlot as d, normalizeClass as h, toDisplayString as k } from "vue";
+import { ref as V, inject as $, onMounted as z, onBeforeUnmount as F, computed as i, createBlock as c, openBlock as n, unref as U, withCtx as C, resolveDynamicComponent as f, mergeProps as E, withKeys as j, withModifiers as K, createElementVNode as m, renderSlot as d, createElementBlock as l, createCommentVNode as s, normalizeClass as h, toDisplayString as k } from "vue";
 import { RouterLink as q } from "vue-router";
-const H = { class: "flex w-full items-center" }, J = {
-  key: 0,
-  class: "shrink-0 flex items-center gap-2 me-3"
-}, Q = ["src"], T = { class: "flex flex-col min-w-0 flex-1" }, W = {
+const H = { class: "flex w-full items-center" }, J = { class: "shrink-0 flex items-center gap-2 me-3" }, Q = ["src"], T = { class: "flex flex-col min-w-0 flex-1" }, W = {
   key: 0,
   class: "font-medium truncate"
 }, X = {
   key: 0,
   class: "text-sm text-gray-500 dark:text-gray-400 truncate"
 }, Y = {
-  key: 1,
+  key: 0,
   class: "shrink-0 flex items-center gap-2 ms-3"
 }, Z = ["src"], _ = { class: "flex w-full items-center" }, ee = {
   key: 0,
@@ -39,6 +36,7 @@ const H = { class: "flex w-full items-center" }, J = {
       type: String,
       default: "bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-300"
     },
+    selectable: { type: Boolean, default: !1 },
     variant: { type: String, default: "text" },
     density: { type: String, default: "default" },
     rounded: { type: [Boolean, String], default: !0 },
@@ -51,30 +49,32 @@ const H = { class: "flex w-full items-center" }, J = {
     itemPosition: { type: String, default: "items-start" },
     itemClass: String,
     prependIcon: [String, Object, Function],
-    appendIcon: [String, Object, Function],
     prependAvatar: String,
+    prependClass: String,
+    appendIcon: [String, Object, Function],
     appendAvatar: String,
+    appendClass: String,
     title: [String, Number, Boolean],
     subtitle: [String, Number, Boolean]
   },
   emits: ["click"],
-  setup(e, { emit: L }) {
-    const t = e, N = L, u = V(null), m = E("registerListItemRef", null), o = E("kunListContext", null);
+  setup(e, { emit: R }) {
+    const t = e, L = R, u = V(null), g = $("registerListItemRef", null), o = $("kunListContext", null);
     z(() => {
-      m && u.value && m(u.value);
+      g && u.value && g(u.value);
     }), F(() => {
-      m && m(null);
+      g && g(null);
     });
-    const g = (a) => typeof a == "object" || typeof a == "function", B = i(() => !!(t.prependIcon || t.prependAvatar)), A = i(() => !!(t.appendIcon || t.appendAvatar)), w = i(() => {
+    const p = (a) => typeof a == "object" || typeof a == "function", N = i(() => !!(t.prependIcon || t.prependAvatar)), B = i(() => !!(t.appendIcon || t.appendAvatar)), w = i(() => {
       var a;
       return ((a = o == null ? void 0 : o.isSelected) == null ? void 0 : a.call(o, t.value)) ?? !1;
     }), I = i(() => t.active), O = i(() => !!t.to);
     function y(a, x = null) {
-      var v, p;
+      var v, b;
       if (t.disabled) return;
-      N("click", a);
+      L("click", a);
       const r = ((v = u.value) == null ? void 0 : v.$el) ?? u.value;
-      r != null && r.dispatchEvent && r.dispatchEvent(new CustomEvent("select", { detail: t.value, bubbles: !0 })), o && t.value !== null && ((p = o.toggleItem) == null || p.call(o, t.value), r != null && r.dispatchEvent && r.dispatchEvent(new CustomEvent("selected", { detail: t.value, bubbles: !0 }))), x && x(a);
+      r != null && r.dispatchEvent && r.dispatchEvent(new CustomEvent("select", { detail: t.value, bubbles: !0 })), o && t.selectable && t.value !== null && ((b = o.toggleItem) == null || b.call(o, t.value), r != null && r.dispatchEvent && r.dispatchEvent(new CustomEvent("selected", { detail: t.value, bubbles: !0 }))), x && x(a);
     }
     const P = i(() => {
       switch (t.variant) {
@@ -100,7 +100,7 @@ const H = { class: "flex w-full items-center" }, J = {
         default:
           return "py-3";
       }
-    }), G = i(() => t.tile ? "rounded-none" : t.rounded === !0 ? "rounded-md" : t.rounded === !1 ? "" : `rounded-${t.rounded}`), M = i(() => t.ripple ? "relative overflow-hidden" : ""), $ = i(() => [
+    }), G = i(() => t.tile ? "rounded-none" : t.rounded === !0 ? "rounded-md" : t.rounded === !1 ? "" : `rounded-${t.rounded}`), M = i(() => t.ripple ? "relative overflow-hidden" : ""), A = i(() => [
       ie,
       P.value,
       D.value,
@@ -111,7 +111,7 @@ const H = { class: "flex w-full items-center" }, J = {
       t.itemPosition,
       {
         "cursor-not-allowed opacity-50": t.disabled,
-        [`cursor-pointer ${t.hoverBg}`]: !t.disabled,
+        [`cursor-pointer ${t.hoverBg}`]: t.selectable && !t.disabled,
         [t.activeClass]: w.value || I.value,
         "px-4": !t.noGutters
       },
@@ -123,38 +123,38 @@ const H = { class: "flex w-full items-center" }, J = {
       replace: e.replace,
       custom: !0
     }, {
-      default: C(({ href: r, navigate: v, isActive: p }) => [
-        (n(), c(f(e.tag), j({
+      default: C(({ href: r, navigate: v, isActive: b }) => [
+        (n(), c(f(e.tag), E({
           ref_key: "liRef",
           ref: u,
           href: r,
           role: "option",
-          "aria-selected": w.value || I.value || p,
+          "aria-selected": w.value || I.value || b,
           "aria-disabled": e.disabled,
           tabindex: "-1",
-          class: $.value,
+          class: A.value,
           onClick: (S) => y(S, v),
-          onKeydown: K(R((S) => y(S, v), ["prevent"]), ["enter"])
+          onKeydown: j(K((S) => y(S, v), ["prevent"]), ["enter"])
         }, a.$attrs), {
           default: C(() => [
-            b("div", H, [
-              B.value ? (n(), l("div", J, [
-                d(a.$slots, "prepend", {}, () => [
+            m("div", H, [
+              d(a.$slots, "prepend", {}, () => [
+                m("div", J, [
                   e.prependAvatar ? (n(), l("img", {
                     key: 0,
                     src: e.prependAvatar,
                     class: "w-8 h-8 rounded-full"
                   }, null, 8, Q)) : s("", !0),
-                  g(e.prependIcon) ? (n(), c(f(e.prependIcon), {
+                  p(e.prependIcon) ? (n(), c(f(e.prependIcon), {
                     key: 1,
                     class: "w-5 h-5"
                   })) : e.prependIcon ? (n(), l("i", {
                     key: 2,
-                    class: h([e.prependIcon, "text-xl leading-none"])
+                    class: h([e.prependClass, "text-xl leading-none"])
                   }, null, 2)) : s("", !0)
                 ])
-              ])) : s("", !0),
-              b("div", T, [
+              ]),
+              m("div", T, [
                 d(a.$slots, "default", {}, () => [
                   d(a.$slots, "title", {}, () => [
                     e.title ? (n(), l("div", W, k(e.title), 1)) : s("", !0)
@@ -164,19 +164,19 @@ const H = { class: "flex w-full items-center" }, J = {
                   ])
                 ])
               ]),
-              A.value ? (n(), l("div", Y, [
+              B.value ? (n(), l("div", Y, [
                 d(a.$slots, "append", {}, () => [
                   e.appendAvatar ? (n(), l("img", {
                     key: 0,
                     src: e.appendAvatar,
                     class: "w-8 h-8 rounded-full"
                   }, null, 8, Z)) : s("", !0),
-                  g(e.appendIcon) ? (n(), c(f(e.appendIcon), {
+                  p(e.appendIcon) ? (n(), c(f(e.appendIcon), {
                     key: 1,
                     class: "w-5 h-5"
                   })) : e.appendIcon ? (n(), l("i", {
                     key: 2,
-                    class: h([e.appendIcon, "text-xl leading-none"])
+                    class: h([e.appendClass, "text-xl leading-none"])
                   }, null, 2)) : s("", !0)
                 ])
               ])) : s("", !0)
@@ -186,7 +186,7 @@ const H = { class: "flex w-full items-center" }, J = {
         }, 1040, ["href", "aria-selected", "aria-disabled", "class", "onClick", "onKeydown"]))
       ]),
       _: 3
-    }, 8, ["to", "replace"])) : (n(), c(f(e.tag), j({
+    }, 8, ["to", "replace"])) : (n(), c(f(e.tag), E({
       key: 1,
       ref_key: "liRef",
       ref: u,
@@ -194,20 +194,20 @@ const H = { class: "flex w-full items-center" }, J = {
       "aria-selected": w.value || I.value,
       "aria-disabled": e.disabled,
       tabindex: "-1",
-      class: $.value,
+      class: A.value,
       onClick: y,
-      onKeydown: K(R(y, ["prevent"]), ["enter"])
+      onKeydown: j(K(y, ["prevent"]), ["enter"])
     }, a.$attrs), {
       default: C(() => [
-        b("div", _, [
-          B.value ? (n(), l("div", ee, [
+        m("div", _, [
+          N.value ? (n(), l("div", ee, [
             d(a.$slots, "prepend", {}, () => [
               e.prependAvatar ? (n(), l("img", {
                 key: 0,
                 src: e.prependAvatar,
                 class: "w-8 h-8 rounded-full"
               }, null, 8, te)) : s("", !0),
-              g(e.prependIcon) ? (n(), c(f(e.prependIcon), {
+              p(e.prependIcon) ? (n(), c(f(e.prependIcon), {
                 key: 1,
                 class: "w-5 h-5"
               })) : e.prependIcon ? (n(), l("i", {
@@ -216,7 +216,7 @@ const H = { class: "flex w-full items-center" }, J = {
               }, null, 2)) : s("", !0)
             ])
           ])) : s("", !0),
-          b("div", ne, [
+          m("div", ne, [
             d(a.$slots, "default", {}, () => [
               d(a.$slots, "title", {}, () => [
                 e.title ? (n(), l("div", ae, k(e.title), 1)) : s("", !0)
@@ -226,14 +226,14 @@ const H = { class: "flex w-full items-center" }, J = {
               ])
             ])
           ]),
-          A.value ? (n(), l("div", se, [
+          B.value ? (n(), l("div", se, [
             d(a.$slots, "append", {}, () => [
               e.appendAvatar ? (n(), l("img", {
                 key: 0,
                 src: e.appendAvatar,
                 class: "w-8 h-8 rounded-full"
               }, null, 8, re)) : s("", !0),
-              g(e.appendIcon) ? (n(), c(f(e.appendIcon), {
+              p(e.appendIcon) ? (n(), c(f(e.appendIcon), {
                 key: 1,
                 class: "w-5 h-5"
               })) : e.appendIcon ? (n(), l("i", {

package/package.json

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