adverich-kun-ui 0.1.79 → 0.1.81

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

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

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

@@ -1,31 +1,83 @@
-import { createElementBlock as s, openBlock as a, normalizeClass as l, renderSlot as n, createTextVNode as o, toDisplayString as u } from "vue";
-const i = {
+import { ref as c, computed as y, watch as V, nextTick as w, onMounted as $, onBeforeUnmount as x, createElementBlock as k, openBlock as S, mergeProps as z, createElementVNode as i, withDirectives as R, withKeys as f, normalizeClass as m, withModifiers as B, renderSlot as v, createVNode as I, toDisplayString as H, vShow as K } from "vue";
+import M from "../../../KunIcon/src/components/KunIcon.vue.js";
+const O = ["aria-expanded", "aria-controls", "aria-disabled"], C = { class: "flex items-center gap-2" }, D = ["id"], j = {
   __name: "KunListGroup",
   props: {
-    text: {
-      type: [String, Number],
-      default: null
-    },
-    class: {
-      type: [String, Object, Array],
-      default: null
-    }
+    modelValue: { type: Boolean, default: !1 },
+    title: { type: String, default: "" },
+    expandIcon: { type: String, default: "$mdi-chevron-up" },
+    collapseIcon: { type: String, default: "$mdi-chevron-down" },
+    disabled: { type: Boolean, default: !1 }
   },
-  setup(e) {
-    const t = e;
-    return (r, c) => (a(), s("span", {
-      class: l([
-        "kun-list-item-subtitle",
-        "text-xs text-gray-500 dark:text-gray-400 truncate",
-        t.class
-      ])
-    }, [
-      n(r.$slots, "default", {}, () => [
-        o(u(t.text), 1)
+  emits: ["update:modelValue"],
+  setup(t, { emit: g }) {
+    const a = t, h = g, o = c(null);
+    c(0);
+    const d = y(() => `kun-list-group-content-${Math.random().toString(36).slice(2)}`), s = () => {
+      h("update:modelValue", !a.modelValue);
+    }, r = () => {
+      if (!o.value) return;
+      const e = o.value;
+      e.style.height = "auto";
+      const n = `${e.scrollHeight}px`;
+      e.style.height = "0px", e.offsetHeight, e.style.height = n;
+    };
+    V(() => a.modelValue, async (e) => {
+      await w(), e ? r() : o.value && (o.value.style.height = "0px");
+    });
+    let l = null;
+    function p(e, n) {
+      !e || typeof ResizeObserver > "u" || (l = new ResizeObserver(() => {
+        n();
+      }), l.observe(e));
+    }
+    function b() {
+      l && (l.disconnect(), l = null);
+    }
+    return $(() => {
+      o.value && p(o.value, () => {
+        a.modelValue && r();
+      });
+    }), x(() => {
+      b();
+    }), (e, n) => (S(), k("div", z({ class: "kun-list-group" }, e.$attrs), [
+      i("div", {
+        class: m(["kun-list-group__activator flex items-center justify-between cursor-pointer select-none", { "opacity-50 pointer-events-none": t.disabled }]),
+        onClick: n[0] || (n[0] = (u) => !t.disabled && s()),
+        role: "button",
+        "aria-expanded": t.modelValue,
+        "aria-controls": d.value,
+        "aria-disabled": t.disabled,
+        tabindex: "0",
+        onKeydown: [
+          n[1] || (n[1] = f((u) => !t.disabled && s(), ["enter"])),
+          n[2] || (n[2] = f(B((u) => !t.disabled && s(), ["prevent"]), ["space"]))
+        ]
+      }, [
+        v(e.$slots, "activator", {}, () => [
+          i("div", C, [
+            i("span", null, H(t.title), 1)
+          ])
+        ]),
+        I(M, {
+          icon: t.modelValue ? t.expandIcon : t.collapseIcon,
+          class: m(["transition-transform duration-300", { "rotate-180": t.modelValue }])
+        }, null, 8, ["icon", "class"])
+      ], 42, O),
+      R(i("div", {
+        ref_key: "contentRef",
+        ref: o,
+        class: "kun-list-group__content pl-4 overflow-hidden transition-[height] duration-300 ease-in-out",
+        id: d.value,
+        role: "region"
+      }, [
+        v(e.$slots, "default")
+      ], 8, D), [
+        [K, t.modelValue]
       ])
-    ], 2));
+    ], 16));
   }
 };
 export {
-  i as default
+  j as default
 };

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

@@ -1,5 +1,5 @@
-import { createElementBlock as r, openBlock as l, normalizeClass as s, createElementVNode as a } from "vue";
-const c = ["src", "alt"], i = {
+import { createElementBlock as l, openBlock as o, mergeProps as s, createElementVNode as a } from "vue";
+const c = ["src", "alt"], d = {
   __name: "KunListImg",
   props: {
     src: {
@@ -10,28 +10,28 @@ const c = ["src", "alt"], i = {
       type: String,
       default: ""
     },
-    class: {
-      type: [String, Object, Array],
-      default: null
+    bgColor: {
+      type: String,
+      default: "bg-gray-200 dark:bg-gray-700"
     }
   },
-  setup(t) {
-    const e = t;
-    return (n, o) => (l(), r("div", {
-      class: s([
+  setup(e) {
+    const t = e;
+    return (r, n) => (o(), l("div", s({
+      class: [
         "kun-list-img",
-        "overflow-hidden rounded-md bg-gray-200 dark:bg-gray-700",
-        e.class
-      ])
-    }, [
+        "overflow-hidden rounded-md",
+        e.bgColor
+      ]
+    }, r.$attrs), [
       a("img", {
-        src: e.src,
-        alt: e.alt,
+        src: t.src,
+        alt: t.alt,
         class: "w-full h-full object-cover"
       }, null, 8, c)
-    ], 2));
+    ], 16));
   }
 };
 export {
-  i as default
+  d as default
 };

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

@@ -1,5 +1,5 @@
-import { ref as i, inject as o, onMounted as f, onBeforeUnmount as d, watch as g, computed as v, createElementBlock as b, openBlock as m, normalizeClass as k, renderSlot as y } from "vue";
-const S = {
+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 = {
   __name: "KunListItem",
   props: {
     value: {
@@ -8,7 +8,6 @@ const S = {
     },
     disabled: Boolean,
     active: Boolean,
-    // usado si se controla desde afuera
     activeClass: {
       type: String,
       default: "bg-blue-100 text-blue-600 dark:bg-blue-900 dark:text-blue-300"
@@ -17,6 +16,10 @@ const S = {
       type: String,
       default: "bg-transparent"
     },
+    textColor: {
+      type: String,
+      default: "text-black dark:text-white"
+    },
     hoverBg: {
       type: String,
       default: "hover:bg-gray-100 dark:hover:bg-gray-600"
@@ -24,47 +27,52 @@ const S = {
     noGutters: {
       type: Boolean,
       default: !1
+    },
+    itemPosition: {
+      type: String,
+      default: "items-start"
     }
   },
   setup(e) {
-    const l = e, r = i(null), n = o("registerListItemRef", null), t = o("kun-list", null);
+    const a = e, i = c(null), r = o("registerListItemRef", null), t = o("kun-list", null);
     f(() => {
-      n && r.value && n(r.value);
-    }), d(() => {
-      n && n(null);
-    });
-    const u = i(l.active);
-    g(() => l.active, (a) => {
-      u.value = a;
-    });
-    const s = v(() => {
-      var a;
-      return ((a = t == null ? void 0 : t.isSelected) == null ? void 0 : a.call(t, l.value)) ?? !1;
+      r && i.value && r(i.value);
+    }), b(() => {
+      r && r(null);
     });
-    function c() {
-      l.disabled || t && l.value !== null && t.toggleItem(l.value);
+    const n = s(() => {
+      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));
     }
-    return (a, B) => (m(), b("li", {
+    return (l, B) => (m(), g("li", v({
       ref_key: "liRef",
-      ref: r,
-      role: "listitem",
+      ref: i,
+      role: "option",
+      "aria-selected": n.value || u.value,
+      "aria-disabled": e.disabled,
       tabindex: "-1",
-      class: k(["w-full flex flex-col items-start", [
+      class: ["w-full flex flex-col", [
         "kun-list-item",
         e.bgItems,
+        e.itemPosition,
+        e.textColor,
         {
-          "cursor-not-allowed": e.disabled,
+          "cursor-not-allowed opacity-50": e.disabled,
           [`cursor-pointer ${e.hoverBg}`]: !e.disabled,
-          [e.activeClass]: s.value || u.value,
+          [e.activeClass]: n.value || u.value,
           "px-4 py-2": !e.noGutters
         }
-      ]]),
-      onClick: c
-    }, [
-      y(a.$slots, "default")
-    ], 2));
+      ]],
+      onClick: d
+    }, l.$attrs), [
+      y(l.$slots, "default")
+    ], 16, k));
   }
 };
 export {
-  S as default
+  h as default
 };

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

@@ -1,31 +1,38 @@
-import { createElementBlock as a, openBlock as s, normalizeClass as n, renderSlot as l, createTextVNode as o, toDisplayString as c } from "vue";
-const m = {
+import { createElementBlock as n, openBlock as r, mergeProps as o, renderSlot as a, createTextVNode as l, toDisplayString as i } from "vue";
+const s = {
   __name: "KunListItemAction",
   props: {
     text: {
       type: [String, Number],
       default: null
     },
-    class: {
-      type: [String, Object, Array],
-      default: null
+    textColor: {
+      type: String,
+      default: "text-black dark:text-white"
+    },
+    fontSize: {
+      type: String,
+      default: "text-sm"
+    },
+    fontWeight: {
+      type: String,
+      default: "font-medium"
     }
   },
-  setup(e) {
-    const t = e;
-    return (r, u) => (s(), a("span", {
-      class: n([
-        "kun-list-item-text",
-        "text-sm font-medium text-gray-900 dark:text-gray-100 truncate",
-        t.class
-      ])
-    }, [
-      l(r.$slots, "default", {}, () => [
-        o(c(t.text), 1)
+  setup(t) {
+    return (e, f) => (r(), n("span", o({
+      class: [
+        t.textColor,
+        t.fontSize,
+        t.fontWeight
+      ]
+    }, e.$attrs), [
+      a(e.$slots, "default", {}, () => [
+        l(i(t.text), 1)
       ])
-    ], 2));
+    ], 16));
   }
 };
 export {
-  m as default
+  s as default
 };

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

@@ -1,31 +1,53 @@
-import { createElementBlock as a, openBlock as s, normalizeClass as l, renderSlot as n, createTextVNode as o, toDisplayString as c } from "vue";
-const p = {
+import { createElementBlock as r, openBlock as a, mergeProps as n, unref as s, renderSlot as l, createCommentVNode as d, toDisplayString as i } from "vue";
+/* empty css                       */
+import u from "../../../../_virtual/_plugin-vue_export-helper.js";
+const m = {
+  key: 0,
+  class: "truncate"
+}, f = {
   __name: "KunListItemAvatar",
   props: {
     text: {
       type: [String, Number],
       default: null
     },
-    class: {
-      type: [String, Object, Array],
-      default: null
+    size: {
+      type: String,
+      default: "md"
+      // sm, md, lg
+    },
+    rounded: {
+      type: String,
+      default: "rounded-full"
+    },
+    bgColor: {
+      type: String,
+      default: "bg-gray-300 dark:bg-gray-700"
+    },
+    textColor: {
+      type: String,
+      default: "text-white"
+    },
+    fontWeight: {
+      type: String,
+      default: "font-medium"
     }
   },
-  setup(e) {
-    const t = e;
-    return (r, u) => (s(), a("span", {
-      class: l([
-        "kun-list-item-text",
-        "text-sm font-medium text-gray-900 dark:text-gray-100 truncate",
-        t.class
-      ])
-    }, [
-      n(r.$slots, "default", {}, () => [
-        o(c(t.text), 1)
-      ])
-    ], 2));
+  setup(t) {
+    const o = {
+      sm: "w-6 h-6 text-xs",
+      md: "w-8 h-8 text-sm",
+      lg: "w-10 h-10 text-base"
+    }[t.size] || "w-8 h-8 text-sm";
+    return (e, g) => (a(), r("div", n({
+      class: ["kun-list-item-avatar", [s(o), t.rounded, t.bgColor, t.textColor, t.fontWeight]]
+    }, e.$attrs), [
+      l(e.$slots, "default", {}, () => [
+        t.text ? (a(), r("span", m, i(t.text), 1)) : d("", !0)
+      ], !0)
+    ], 16));
   }
-};
+}, h = /* @__PURE__ */ u(f, [["__scopeId", "data-v-fd4532c9"]]);
 export {
-  p as default
+  h as default
 };

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

@@ -1,31 +1,40 @@
-import { createElementBlock as s, openBlock as a, normalizeClass as l, renderSlot as n, createTextVNode as o, toDisplayString as u } from "vue";
-const p = {
+import { createElementBlock as r, openBlock as n, mergeProps as a, renderSlot as l, createTextVNode as o, toDisplayString as i } from "vue";
+const f = {
   __name: "KunListItemSubtitle",
   props: {
     text: {
       type: [String, Number],
       default: null
     },
-    class: {
-      type: [String, Object, Array],
-      default: null
+    textColor: {
+      type: String,
+      default: "text-gray-500 dark:text-gray-400"
+    },
+    fontSize: {
+      type: String,
+      default: "text-xs"
+    },
+    fontWeight: {
+      type: String,
+      default: "font-medium"
     }
   },
-  setup(e) {
-    const t = e;
-    return (r, c) => (a(), s("span", {
-      class: l([
+  setup(t) {
+    return (e, u) => (n(), r("span", a({
+      class: [
         "kun-list-item-subtitle",
-        "text-xs text-gray-500 dark:text-gray-400 truncate",
-        t.class
-      ])
-    }, [
-      n(r.$slots, "default", {}, () => [
-        o(u(t.text), 1)
+        "truncate",
+        t.textColor,
+        t.fontSize,
+        t.fontWeight
+      ]
+    }, e.$attrs), [
+      l(e.$slots, "default", {}, () => [
+        o(i(t.text), 1)
       ])
-    ], 2));
+    ], 16));
   }
 };
 export {
-  p as default
+  f as default
 };

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

@@ -1,5 +1,5 @@
-import { createElementBlock as r, openBlock as a, normalizeClass as l, renderSlot as s, createTextVNode as o, toDisplayString as i } from "vue";
-const p = {
+import { createElementBlock as r, openBlock as n, mergeProps as a, renderSlot as o, createTextVNode as l, toDisplayString as i } from "vue";
+const s = {
   __name: "KunListItemText",
   props: {
     text: {
@@ -10,31 +10,30 @@ const p = {
       type: String,
       default: "text-sm"
     },
+    textColor: {
+      type: String,
+      default: "text-gray-500 dark:text-gray-400"
+    },
     fontWeight: {
       type: String,
       default: "font-medium"
-    },
-    class: {
-      type: [String, Object, Array],
-      default: null
     }
   },
-  setup(e) {
-    const t = e;
-    return (n, u) => (a(), r("span", {
-      class: l([
+  setup(t) {
+    return (e, u) => (n(), r("span", a({
+      class: [
+        "truncate",
         t.fontSize,
-        t.fontWeight,
-        t.class,
-        "truncate"
-      ])
-    }, [
-      s(n.$slots, "default", {}, () => [
-        o(i(t.text), 1)
+        t.textColor,
+        t.fontWeight
+      ]
+    }, e.$attrs), [
+      o(e.$slots, "default", {}, () => [
+        l(i(t.text), 1)
       ])
-    ], 2));
+    ], 16));
   }
 };
 export {
-  p as default
+  s as default
 };