adverich-kun-ui 0.1.464 → 0.1.466

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

@@ -1,4 +1,4 @@
-import { mergeModels as W, toRefs as be, useModel as Ce, ref as v, watch as Q, computed as q, onMounted as Te, createElementBlock as r, openBlock as l, mergeProps as V, createCommentVNode as u, createElementVNode as O, renderSlot as a, createBlock as b, unref as s, normalizeClass as C, withCtx as j, createVNode as T, withDirectives as G, vModelText as Fe, vShow as J, normalizeProps as d, guardReactiveProps as g, Fragment as $e, createSlots as X, renderList as Y, toDisplayString as ke, isRef as Pe, nextTick as Me } from "vue";
+import { mergeModels as W, toRefs as be, useModel as Ce, ref as v, watch as Q, computed as q, onMounted as Te, createElementBlock as r, openBlock as l, mergeProps as O, createCommentVNode as u, createElementVNode as j, renderSlot as a, createBlock as b, unref as s, normalizeClass as C, withCtx as x, createVNode as T, withDirectives as G, vModelText as Fe, vShow as J, normalizeProps as d, guardReactiveProps as g, Fragment as $e, createSlots as X, renderList as Y, toDisplayString as ke, isRef as Pe, nextTick as Me } from "vue";
 import { isMobile as m } from "../../../../utils/_platform.js";
 import Z from "../../../KunIcon/src/components/KunIcon.vue.js";
 import Ae from "../../../../icons/IconFilter.vue.js";
@@ -27,40 +27,25 @@ const Ke = ["placeholder"], Le = { class: "flex-1 overflow-auto bg-surface" }, U
     selectedItemsModifiers: {}
   }),
   emits: /* @__PURE__ */ W(["update:page", "update:itemsPerPage", "update:sortBy", "update:search", "focusOnSearch"], ["update:selectedItems"]),
-  setup(x, { emit: _ }) {
-    const S = _, p = x, F = be(p), ee = Ce(x, "selectedItems"), {
-      headers: z,
+  setup(z, { emit: _ }) {
+    const S = _, p = z, F = be(p), ee = Ce(z, "selectedItems"), {
+      headers: D,
       showExpand: $,
       showSelect: k,
-      rowClass: D,
+      rowClass: H,
       hideDefaultFooter: se,
       hideDefaultHeader: oe,
       tableClass: te,
       wrapperClass: le,
       pageOptions: ae,
       items: ne,
-      searchable: H,
+      searchable: N,
       debounceTime: re
     } = F, w = v(p.search);
     Q(() => p.search, (e) => {
       e !== w.value && (w.value = e);
     });
-    const { filteredItems: ie, setSearch: ce, modalFilter: y, applyColumnFilters: ue, clearFilters: de, appliedFilters: pe } = He(F, re);
-    Q(w, (e) => {
-      S("update:search", e), ce(e);
-    });
-    const { options: i, paginatedItems: f, updateSort: me } = ze(F, S, ie), { isSelected: P, toggleSelect: M, toggleSelectAll: fe, allSelected: he, someSelected: ge } = De(f, ee), { isExpanded: A, toggleExpand: I } = xe(), h = q(() => ({
-      items: f.value,
-      headers: z.value,
-      page: i.page,
-      itemsPerPage: i.itemsPerPage,
-      toggleSelect: M,
-      isSelected: P,
-      toggleExpand: I,
-      isExpanded: A,
-      sortBy: i.sortBy,
-      hasActions: p.hasActions
-    })), we = [Je, le.value], ye = [Xe, te.value], N = q(() => p.headers.map((e) => {
+    const P = q(() => p.headers.map((e) => {
       var t, c;
       const o = { ...e };
       if ((e.columnType === "function" || e.columnType == "objectFunction" || e.columnType == "simpleFunction") && typeof e.columnFunction == "string") {
@@ -76,9 +61,24 @@ const Ke = ["placeholder"], Le = { class: "flex-1 overflow-auto bg-surface" }, U
         ), o.columnRowText = () => "");
       }
       return o;
-    }));
+    })), { filteredItems: ie, setSearch: ce, modalFilter: y, applyColumnFilters: ue, clearFilters: de, appliedFilters: pe } = He(F, re, P);
+    Q(w, (e) => {
+      S("update:search", e), ce(e);
+    });
+    const { options: i, paginatedItems: f, updateSort: me } = ze(F, S, ie), { isSelected: M, toggleSelect: A, toggleSelectAll: fe, allSelected: he, someSelected: ge } = De(f, ee), { isExpanded: I, toggleExpand: R } = xe(), h = q(() => ({
+      items: f.value,
+      headers: D.value,
+      page: i.page,
+      itemsPerPage: i.itemsPerPage,
+      toggleSelect: A,
+      isSelected: M,
+      toggleExpand: R,
+      isExpanded: I,
+      sortBy: i.sortBy,
+      hasActions: p.hasActions
+    })), we = [Je, le.value], ye = [Xe, te.value];
     Te(() => L());
-    const K = v(null), R = v(!0), E = v(!1);
+    const K = v(null), E = v(!0), B = v(!1);
     function ve() {
       Se();
     }
@@ -88,14 +88,14 @@ const Ke = ["placeholder"], Le = { class: "flex-1 overflow-auto bg-surface" }, U
       }));
     }
     function L() {
-      m.value && (B.value = "w-fit", R.value = !1, E.value = !0, S("focusOnSearch", !1));
+      m.value && (V.value = "w-fit", E.value = !1, B.value = !0, S("focusOnSearch", !1));
     }
     function U() {
-      m.value && (B.value = "w-full border", E.value = !1, R.value = !0, S("focusOnSearch", !0));
+      m.value && (V.value = "w-full border", B.value = !1, E.value = !0, S("focusOnSearch", !0));
     }
-    const B = v("w-full border max-w-sm");
-    return (e, o) => (l(), r("div", V({ class: we }, e.$attrs, { style: { "user-select": "text" } }), [
-      s(H) || e.filterable || e.$slots.prependSearch || e.$slots.appendSearch ? (l(), r("div", {
+    const V = v("w-full border max-w-sm");
+    return (e, o) => (l(), r("div", O({ class: we }, e.$attrs, { style: { "user-select": "text" } }), [
+      s(N) || e.filterable || e.$slots.prependSearch || e.$slots.appendSearch ? (l(), r("div", {
         key: 0,
         class: C(["p-2 bg-surface print:hidden", {
           "justify-start flex": e.searchPosition === "start",
@@ -112,7 +112,7 @@ const Ke = ["placeholder"], Le = { class: "flex-1 overflow-auto bg-surface" }, U
           size: "xs",
           bgColor: "bg-green-200 dark:bg-green-800"
         }, {
-          default: j(() => [
+          default: x(() => [
             T(Z, {
               class: "h-fit",
               icon: Ae,
@@ -121,11 +121,11 @@ const Ke = ["placeholder"], Le = { class: "flex-1 overflow-auto bg-surface" }, U
           ]),
           _: 1
         })) : u("", !0),
-        s(H) ? (l(), r("div", {
+        s(N) ? (l(), r("div", {
           key: 1,
-          class: C(["rounded flex mx-2", [B.value]])
+          class: C(["rounded flex mx-2", [V.value]])
         }, [
-          G(O("input", {
+          G(j("input", {
             "onUpdate:modelValue": o[1] || (o[1] = (t) => w.value = t),
             type: "text",
             placeholder: e.searchPlaceholder,
@@ -136,18 +136,18 @@ const Ke = ["placeholder"], Le = { class: "flex-1 overflow-auto bg-surface" }, U
             onBlur: L
           }, null, 42, Ke), [
             [Fe, w.value],
-            [J, R.value]
+            [J, E.value]
           ]),
           G(T(Z, {
             icon: Ie,
             onClick: ve
           }, null, 512), [
-            [J, E.value]
+            [J, B.value]
           ])
         ], 2)) : u("", !0),
         a(e.$slots, "appendSearch")
       ], 2)) : u("", !0),
-      O("div", Le, [
+      j("div", Le, [
         s(f).length ? (l(), r("table", {
           key: 0,
           class: C(ye)
@@ -157,7 +157,7 @@ const Ke = ["placeholder"], Le = { class: "flex-1 overflow-auto bg-surface" }, U
           ])) : u("", !0),
           !s(oe) && !s(m) ? (l(), b(Re, {
             key: 1,
-            headers: s(z),
+            headers: s(D),
             "sort-by": s(i).sortBy,
             "show-select": s(k),
             "show-expand": s($),
@@ -171,26 +171,26 @@ const Ke = ["placeholder"], Le = { class: "flex-1 overflow-auto bg-surface" }, U
             onSort: s(me),
             onToggleSelectAll: s(fe),
             customHeaders: e.customSlots
-          }, null, 8, ["headers", "sort-by", "show-select", "show-expand", "all-selected", "some-selected", "thead-class", "tr-class", "th-class", "has-actions", "action-label", "onSort", "onToggleSelectAll", "customHeaders"])) : a(e.$slots, "thead", d(V({ key: 2 }, h.value))),
+          }, null, 8, ["headers", "sort-by", "show-select", "show-expand", "all-selected", "some-selected", "thead-class", "tr-class", "th-class", "has-actions", "action-label", "onSort", "onToggleSelectAll", "customHeaders"])) : a(e.$slots, "thead", d(O({ key: 2 }, h.value))),
           s(m) ? (l(), b(Ve, {
             key: 4,
             items: s(f),
-            headers: N.value,
-            "row-class": s(D),
+            headers: P.value,
+            "row-class": s(H),
             "row-class-condition": e.rowClassCondition,
-            "is-selected": s(P),
-            "is-expanded": s(A),
+            "is-selected": s(M),
+            "is-expanded": s(I),
             "show-select": s(k),
             "show-expand": s($),
             "has-actions": e.hasActions,
             "action-loading-map": e.actionLoadingMap,
-            onToggleExpand: s(I),
-            onToggleSelect: s(M),
+            onToggleExpand: s(R),
+            onToggleSelect: s(A),
             customSlots: e.customSlots
           }, X({ _: 2 }, [
             Y(e.$slots, (t, c) => ({
               name: c,
-              fn: j((n) => [
+              fn: x((n) => [
                 a(e.$slots, c, d(g(n)))
               ])
             }))
@@ -198,27 +198,27 @@ const Ke = ["placeholder"], Le = { class: "flex-1 overflow-auto bg-surface" }, U
             a(e.$slots, "body.prepend", d(g(h.value))),
             T(Be, {
               items: s(f),
-              headers: N.value,
+              headers: P.value,
               "tbody-class": e.tbodyClass,
-              "row-class": s(D),
+              "row-class": s(H),
               "row-class-condition": e.rowClassCondition,
               "tr-class": e.trClass,
               "td-class": e.tdClass,
               "selected-class": e.selectedClass,
               "striped-class": e.stripedClass,
-              "is-selected": s(P),
-              "is-expanded": s(A),
+              "is-selected": s(M),
+              "is-expanded": s(I),
               "show-select": s(k),
               "show-expand": s($),
               "has-actions": e.hasActions,
               "action-loading-map": e.actionLoadingMap,
-              onToggleExpand: s(I),
-              onToggleSelect: s(M),
+              onToggleExpand: s(R),
+              onToggleSelect: s(A),
               customSlots: e.customSlots
             }, X({ _: 2 }, [
               Y(e.$slots, (t, c) => ({
                 name: c,
-                fn: j((n) => [
+                fn: x((n) => [
                   a(e.$slots, c, d(g(n)))
                 ])
               }))
@@ -230,10 +230,10 @@ const Ke = ["placeholder"], Le = { class: "flex-1 overflow-auto bg-surface" }, U
           ])) : u("", !0)
         ])) : u("", !0),
         s(f).length ? u("", !0) : (l(), r("div", Qe, [
-          O("div", qe, ke(e.noDataText), 1)
+          j("div", qe, ke(e.noDataText), 1)
         ]))
       ]),
-      s(se) ? a(e.$slots, "footer", d(V({ key: 2 }, h.value))) : (l(), r("div", Ge, [
+      s(se) ? a(e.$slots, "footer", d(O({ key: 2 }, h.value))) : (l(), r("div", Ge, [
         T(Ee, {
           "items-length": s(ne).length,
           "items-per-page": s(i).itemsPerPage,

package/dist/components/KunTable/src/composables/useFilter.js

@@ -1,11 +1,11 @@
-import { reactive as I, ref as K, computed as f, unref as u, watch as R } from "vue";
-import { debounce as j } from "../../../../utils/utils.js";
-import { getValue as q, formatValue as x } from "../../../../utils/tableFormatters.js";
-function E(b, d) {
-  const a = I({
+import { reactive as O, ref as E, computed as g, unref as i, watch as N } from "vue";
+import { debounce as v } from "../../../../utils/utils.js";
+import { getValue as K, formatValue as T } from "../../../../utils/tableFormatters.js";
+function B(p, h, F) {
+  const c = O({
     search: "",
     byColumn: {}
-  }), { items: y, customFilter: g, searchableKeys: C, headers: S } = b, F = K(!1), c = (e) => {
+  }), { items: m, customFilter: b, searchableKeys: V, headers: k } = p, R = E(!1), u = (e) => {
     if (e == null) return "";
     if (typeof e == "string") return e;
     if (typeof e == "number" || typeof e == "boolean") return String(e);
@@ -24,59 +24,100 @@ function E(b, d) {
     } catch {
       return "";
     }
-  }, m = (e, r) => {
-    const t = c(e).toLowerCase(), n = c(r).toLowerCase();
-    return n ? t ? t.includes(n) : !1 : !0;
-  }, i = f(() => u(S) ?? []), h = f(() => {
-    const e = u(C);
-    return Array.isArray(e) && e.length ? e : i.value.map((r) => r == null ? void 0 : r.value).filter(Boolean);
-  }), w = (e, r) => {
-    const t = i.value.find((s) => (s == null ? void 0 : s.value) === r);
-    if (!t) return e == null ? void 0 : e[r];
-    const n = q(t, e), o = x(t, n);
-    return c(o);
-  }, p = (e, r, t) => {
-    const n = w(e, r), o = u(g);
-    if (typeof o == "function") {
-      const s = i.value.find((l) => (l == null ? void 0 : l.value) === r);
-      return o(e, r, t, s);
+  }, d = (e, t) => {
+    const r = u(e).toLowerCase(), l = u(t).toLowerCase();
+    return l ? r ? r.includes(l) : !1 : !0;
+  }, f = g(() => F.value ?? []), I = g(() => {
+    const e = i(V);
+    return Array.isArray(e) && e.length ? e : f.value.map((t) => t == null ? void 0 : t.value).filter(Boolean);
+  }), S = (e, t) => {
+    console.log("[getDisplayValue] START → key:", t, "item:", e);
+    const r = f.value.find((o) => (o == null ? void 0 : o.value) === t);
+    if (console.log("[getDisplayValue] header encontrado:", r), !r) {
+      const o = e == null ? void 0 : e[t];
+      return console.log("[getDisplayValue] SIN header, devuelvo item[key]:", o), o;
     }
-    return Array.isArray(t) ? t.some((s) => m(n, s)) : m(n, t);
-  }, A = f(() => {
-    const e = u(y);
-    return Array.isArray(e) ? e.filter((r) => {
-      const t = a.search;
-      if (t && !h.value.some((s) => p(r, s, t)))
-        return !1;
-      for (const n in a.byColumn) {
-        const o = a.byColumn[n];
-        if (o != null && o !== "" && !p(r, n, o))
-          return !1;
+    let l, a;
+    try {
+      l = K(r, e), console.log("[getDisplayValue] raw value de getValue:", l);
+    } catch (o) {
+      console.error("[getDisplayValue] ERROR en getValue", { header: r, item: e, err: o });
+    }
+    try {
+      a = T(r, l), console.log("[getDisplayValue] shown value de formatValue:", a);
+    } catch (o) {
+      console.error("[getDisplayValue] ERROR en formatValue", { header: r, raw: l, err: o });
+    }
+    const s = u(a);
+    return console.log("[getDisplayValue] FINAL stringified:", s), s;
+  }, y = (e, t, r) => {
+    console.log("[matchesFilter] item:", e, "key:", t, "filter value:", r);
+    const l = S(e, t);
+    console.log("[matchesFilter] itemValue obtenido:", l);
+    const a = i(b);
+    if (typeof a == "function") {
+      console.log("[matchesFilter] customFilter detectado, llamando...");
+      const o = f.value.find((n) => (n == null ? void 0 : n.value) === t);
+      try {
+        const n = a(e, t, r, o);
+        return console.log("[matchesFilter] customFilter result:", n), n;
+      } catch (n) {
+        return console.error("[matchesFilter] ERROR en customFilter", { item: e, key: t, value: r, header: o, err: n }), !1;
+      }
+    }
+    if (Array.isArray(r)) {
+      console.log("[matchesFilter] value es array, evaluando...");
+      const o = r.some((n) => d(l, n));
+      return console.log("[matchesFilter] array filter result:", o), o;
+    }
+    const s = d(l, r);
+    return console.log("[matchesFilter] default filter result:", s), s;
+  }, A = g(() => {
+    const e = i(m);
+    if (console.log("[filteredItems] recompute → items length:", Array.isArray(e) ? e.length : "NO ARRAY"), !Array.isArray(e)) return [];
+    const t = e.filter((r, l) => {
+      console.log(`
+[filteredItems] --- Evaluando item idx:`, l, r);
+      const a = c.search;
+      if (a) {
+        console.log("[filteredItems] search activo:", a);
+        const s = I.value;
+        console.log("[filteredItems] searchableKeys:", s);
+        const o = s.some((n) => y(r, n, a));
+        if (console.log("[filteredItems] resultado filtro global:", o), !o) return !1;
+      }
+      for (const s in c.byColumn) {
+        const o = c.byColumn[s];
+        if (o != null && o !== "" && (console.log("[filteredItems] columna con filtro:", s, "value:", o), !y(r, s, o)))
+          return console.log("[filteredItems] filtro por columna NO pasó"), !1;
       }
-      return !0;
-    }) : [];
-  }), k = j((e) => {
-    a.search = c(e).toLowerCase();
-  }, u(d) ?? 150), V = (e, r) => {
-    a.byColumn[e] = r;
+      return console.log("[filteredItems] item pasó todos los filtros ✅"), !0;
+    });
+    return console.log("[filteredItems] RESULT FINAL →", t), t;
+  }), C = v((e) => {
+    console.log("[setSearch] nuevo valor:", e), c.search = u(e).toLowerCase();
+  }, i(h) ?? 150), w = (e, t) => {
+    console.log("[setColumnFilter] key:", e, "value:", t), c.byColumn[e] = t;
   };
-  function L(e) {
-    for (const r in e)
-      V(r, e[r]);
+  function D(e) {
+    console.log("[applyColumnFilters] aplicando:", e);
+    for (const t in e)
+      w(t, e[t]);
   }
-  const D = () => {
-    a.search = "", a.byColumn = {};
+  const L = () => {
+    console.log("[clearFilters] reseteando filtros"), c.search = "", c.byColumn = {};
   };
-  return R(() => u(y), () => {
+  return N(() => i(m), (e, t) => {
+    console.log("[watch items] old:", t, "new:", e);
   }, { deep: !0 }), {
-    modalFilter: F,
-    appliedFilters: a,
+    modalFilter: R,
+    appliedFilters: c,
     filteredItems: A,
-    setSearch: k,
-    applyColumnFilters: L,
-    clearFilters: D
+    setSearch: C,
+    applyColumnFilters: D,
+    clearFilters: L
   };
 }
 export {
-  E as default
+  B as default
 };

package/package.json

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