adverich-kun-ui 0.1.147 → 0.1.149

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

@@ -1,5 +1,5 @@
-import { ref as b, inject as c, onMounted as v, onBeforeUnmount as g, computed as f, createElementBlock as m, openBlock as y, mergeProps as h, withKeys as k, withModifiers as w, renderSlot as B } from "vue";
-const S = ["aria-selected", "aria-disabled", "onKeydown"], x = {
+import { ref as w, inject as g, onMounted as p, onBeforeUnmount as B, computed as y, createElementBlock as c, openBlock as i, mergeProps as I, withKeys as x, withModifiers as A, createElementVNode as s, renderSlot as r, createBlock as h, createCommentVNode as d, resolveDynamicComponent as k, toDisplayString as S } from "vue";
+const $ = ["aria-selected", "aria-disabled", "onKeydown"], C = { class: "shrink-0 flex items-center" }, E = ["src"], N = { class: "flex flex-col min-w-0 flex-1" }, j = { class: "font-medium truncate" }, K = { class: "text-sm text-gray-500 dark:text-gray-400 truncate" }, R = { class: "shrink-0 flex items-center ml-auto" }, L = ["src"], P = {
   __name: "KunListItem",
   props: {
     value: {
@@ -31,59 +31,100 @@ const S = ["aria-selected", "aria-disabled", "onKeydown"], x = {
     itemPosition: {
       type: String,
       default: "items-start"
-    }
+    },
+    prependIcon: [String, Object, Function],
+    appendIcon: [String, Object, Function],
+    prependAvatar: String,
+    appendAvatar: String,
+    title: [String, Number, Boolean],
+    subtitle: [String, Number, Boolean],
+    slim: Boolean
   },
   setup(e) {
-    const a = e, n = b(null), i = c("registerListItemRef", null), t = c("kunListContext", null);
-    v(() => {
-      i && n.value && i(n.value);
-    }), g(() => {
-      i && i(null);
+    const n = e, a = w(null), o = g("registerListItemRef", null), l = g("kunListContext", null);
+    p(() => {
+      o && a.value && o(a.value);
+    }), B(() => {
+      o && o(null);
     });
-    const u = f(() => {
-      var l;
-      return ((l = t == null ? void 0 : t.isSelected) == null ? void 0 : l.call(t, a.value)) ?? !1;
-    }), o = f(() => a.active);
-    function s() {
-      var l, r, d;
-      a.disabled || ((l = n.value) == null || l.dispatchEvent(
+    const v = y(() => {
+      var t;
+      return ((t = l == null ? void 0 : l.isSelected) == null ? void 0 : t.call(l, n.value)) ?? !1;
+    }), m = y(() => n.active);
+    function f() {
+      var t, u, b;
+      n.disabled || ((t = a.value) == null || t.dispatchEvent(
         new CustomEvent("select", {
-          detail: a.value,
+          detail: n.value,
           bubbles: !0
         })
-      ), t && a.value !== null && ((r = t.toggleItem) == null || r.call(t, a.value), (d = n.value) == null || d.dispatchEvent(
+      ), l && n.value !== null && ((u = l.toggleItem) == null || u.call(l, n.value), (b = a.value) == null || b.dispatchEvent(
         new CustomEvent("selected", {
-          detail: a.value,
+          detail: n.value,
           bubbles: !0
         })
       )));
     }
-    return (l, r) => (y(), m("li", h({
+    return (t, u) => (i(), c("li", I({
       ref_key: "liRef",
-      ref: n,
+      ref: a,
       role: "option",
-      "aria-selected": u.value || o.value,
+      "aria-selected": v.value || m.value,
       "aria-disabled": e.disabled,
       tabindex: "-1",
-      class: ["w-full flex flex-col", [
+      class: ["w-full flex", [
         "kun-list-item",
         e.bgItems,
-        e.itemPosition,
         e.textColor,
+        e.itemPosition,
         {
           "cursor-not-allowed opacity-50": e.disabled,
           [`cursor-pointer ${e.hoverBg}`]: !e.disabled,
-          [e.activeClass]: u.value || o.value,
-          "px-4 py-2": !e.noGutters
+          [e.activeClass]: v.value || m.value,
+          "px-4 py-2": !e.noGutters,
+          "gap-2": !e.slim
         }
       ]],
-      onKeydown: k(w(s, ["prevent"]), ["enter"]),
-      onClick: s
-    }, l.$attrs), [
-      B(l.$slots, "default")
-    ], 16, S));
+      onKeydown: x(A(f, ["prevent"]), ["enter"]),
+      onClick: f
+    }, t.$attrs), [
+      s("div", C, [
+        r(t.$slots, "prepend", {}, () => [
+          e.prependAvatar ? (i(), c("img", {
+            key: 0,
+            src: e.prependAvatar,
+            class: "w-8 h-8 rounded-full"
+          }, null, 8, E)) : e.prependIcon ? (i(), h(k(e.prependIcon), {
+            key: 1,
+            class: "w-5 h-5"
+          })) : d("", !0)
+        ])
+      ]),
+      s("div", N, [
+        r(t.$slots, "default", {}, () => [
+          e.title ? r(t.$slots, "title", { key: 0 }, () => [
+            s("div", j, S(e.title), 1)
+          ]) : d("", !0),
+          e.subtitle ? r(t.$slots, "subtitle", { key: 1 }, () => [
+            s("div", K, S(e.subtitle), 1)
+          ]) : d("", !0)
+        ])
+      ]),
+      s("div", R, [
+        r(t.$slots, "append", {}, () => [
+          e.appendAvatar ? (i(), c("img", {
+            key: 0,
+            src: e.appendAvatar,
+            class: "w-8 h-8 rounded-full"
+          }, null, 8, L)) : e.appendIcon ? (i(), h(k(e.appendIcon), {
+            key: 1,
+            class: "w-5 h-5"
+          })) : d("", !0)
+        ])
+      ])
+    ], 16, $));
   }
 };
 export {
-  x as default
+  P as default
 };

package/package.json

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