adverich-kun-ui 0.1.196 → 0.1.198

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

@@ -1,4 +1,5 @@
-import { ref as f, provide as p, computed as A, createElementBlock as D, openBlock as h, mergeProps as B, withModifiers as I, renderSlot as S } from "vue";
+import { ref as m, watch as w, provide as k, createElementBlock as v, openBlock as B, mergeProps as D, withModifiers as h, renderSlot as x } from "vue";
+import { useKunList as S } from "../composables/useKunList.js";
 const L = {
   __name: "KunList",
   props: {
@@ -8,7 +9,11 @@ const L = {
     selectable: {
       type: [Boolean, String],
       default: !1,
-      validator: (o) => ["single", "multiple", !0, !1].includes(o)
+      validator: (l) => ["single", "multiple", !0, !1].includes(l)
+    },
+    selected: {
+      type: [Array, String, Number, Boolean, Object, null],
+      default: null
     },
     bgList: {
       type: String,
@@ -20,71 +25,76 @@ const L = {
     }
   },
   emits: ["keyDown", "click:select", "update:selected"],
-  setup(o, { expose: g, emit: w }) {
-    const d = o, i = w, m = f(null), c = f([]), s = f([]);
-    p("registerListItemRef", (e) => {
+  setup(l, { expose: p, emit: g }) {
+    const u = l, i = g, d = m(null), c = m([]), { selectedValues: f } = S(u);
+    w(
+      () => u.selected,
+      (e) => {
+        f.value = u.selectable === "multiple" ? Array.isArray(e) ? [...e] : [] : e != null ? [e] : [];
+      },
+      { immediate: !0 }
+    ), w(
+      f,
+      (e) => {
+        i(
+          "update:selected",
+          u.selectable === "multiple" ? [...e] : e[0] ?? null
+        );
+      }
+    ), k("registerListItemRef", (e) => {
       e && !c.value.includes(e) && c.value.push(e);
     });
-    const b = A(
-      () => d.selectable === "multiple" || d.selectable === !0
-    );
-    function v(e) {
-      !d.selectable || e == null || (b.value ? (s.value.includes(e) ? s.value = s.value.filter((n) => n !== e) : s.value.push(e), i("update:selected", [...s.value])) : (s.value = [e], i("update:selected", e)));
-    }
-    p("kunListContext", {
-      toggleItem: v
-    });
     function y(e) {
-      var r;
+      var o;
       i("keyDown", e);
       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 r = document.activeElement;
+          (r == null ? void 0 : r.getAttribute("role")) === "menuitem" && r.click();
           return;
         }
         if (t === "ArrowUp" || t === "ArrowDown") {
           e.preventDefault();
-          const l = n.findIndex((x) => x === document.activeElement);
+          const r = n.findIndex((A) => A === document.activeElement);
           let a = -1;
-          l === -1 ? a = t === "ArrowDown" ? 0 : n.length - 1 : t === "ArrowDown" ? a = (l + 1) % n.length : t === "ArrowUp" && (a = (l - 1 + n.length) % n.length);
-          const u = n[a];
-          (r = u == null ? void 0 : u.focus) == null || r.call(u);
+          r === -1 ? a = t === "ArrowDown" ? 0 : n.length - 1 : t === "ArrowDown" ? a = (r + 1) % n.length : t === "ArrowUp" && (a = (r - 1 + n.length) % n.length);
+          const s = n[a];
+          (o = s == null ? void 0 : s.focus) == null || o.call(s);
           return;
         }
       }
     }
-    function k(e = "ArrowDown") {
-      var l;
+    function b(e = "ArrowDown") {
+      var r;
       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);
+      const n = e === "ArrowDown" ? 0 : t.length - 1, o = t[n];
+      (r = o == null ? void 0 : o.focus) == null || r.call(o);
     }
-    return g({ focusWithKey: k, focus: () => {
+    return p({ focusWithKey: b, focus: () => {
       var e, t;
-      return (t = (e = m.value) == null ? void 0 : e.focus) == null ? void 0 : t.call(e);
-    } }), (e, t) => (h(), D("ul", B({
+      return (t = (e = d.value) == null ? void 0 : e.focus) == null ? void 0 : t.call(e);
+    } }), (e, t) => (B(), v("ul", D({
       ref_key: "ulRef",
-      ref: m,
+      ref: d,
       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: I(y, ["prevent"]),
+      onKeydown: h(y, ["prevent"]),
       onSelect: t[0] || (t[0] = (n) => i("click:select", n.detail)),
       onSelected: t[1] || (t[1] = (n) => i("update:selected", n.detail))
     }, e.$attrs), [
-      S(e.$slots, "default")
+      x(e.$slots, "default")
     ], 16));
   }
 };

package/dist/components/KunList/src/composables/useKunList.js

@@ -0,0 +1,26 @@
+import { ref as c, provide as f } from "vue";
+const a = Symbol("kun-list");
+function g(i) {
+  const e = c([]);
+  function t(l) {
+    if (!i.selectable || i.disabled || l == null) return;
+    const s = i.selectable === "multiple";
+    i.selectable === "single" ? e.value[0] !== l && (e.value = [l]) : s && (e.value.indexOf(l) === -1 ? e.value = [...e.value, l] : e.value = e.value.filter((u) => u !== l));
+  }
+  function n(l) {
+    return e.value.includes(l);
+  }
+  return f(a, {
+    toggleItem: t,
+    isSelected: n,
+    isMultiple: () => i.selectable === "multiple",
+    isSingle: () => i.selectable === "single"
+  }), {
+    selectedValues: e,
+    toggleItem: t,
+    isSelected: n
+  };
+}
+export {
+  g as useKunList
+};

package/package.json

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