adverich-kun-ui 0.1.197 → 0.1.199

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

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

package/package.json

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

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

@@ -1,26 +0,0 @@
-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
-};