adverich-kun-ui 0.1.316 → 0.1.318

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

@@ -1,4 +1,4 @@
-import { mergeModels as W, toRefs as be, useModel as Se, ref as y, watch as Q, computed as q, onMounted as Ce, createElementBlock as c, openBlock as l, mergeProps as B, createCommentVNode as u, createElementVNode as V, renderSlot as a, createBlock as S, unref as s, normalizeClass as C, withCtx as x, createVNode as b, withDirectives as G, vModelText as Te, vShow as J, normalizeProps as d, guardReactiveProps as g, Fragment as $e, createSlots as X, renderList as Y, isRef as Fe, nextTick as ke } from "vue";
+import { mergeModels as W, toRefs as be, useModel as Se, ref as y, watch as Q, computed as q, onMounted as Ce, createElementBlock as c, openBlock as l, mergeProps as B, createCommentVNode as u, createElementVNode as V, renderSlot as a, createBlock as S, unref as s, normalizeClass as C, withCtx as z, createVNode as b, withDirectives as G, vModelText as Te, vShow as J, normalizeProps as d, guardReactiveProps as g, Fragment as $e, createSlots as X, renderList as Y, isRef as Fe, nextTick as ke } from "vue";
 import { isMobile as p } from "../../../../utils/_platform.js";
 import Z from "../../../KunIcon/src/components/KunIcon.vue.js";
 import Pe from "../../../../icons/IconFilter.vue.js";
@@ -9,13 +9,13 @@ import Re from "./KunTableRows.vue.js";
 import Ee from "./KunTableIterators.vue.js";
 import Be from "../../../KunBtn/src/components/KunBtn.vue.js";
 import Ve from "./KunTableFilter.vue.js";
-import xe from "../../../KunCard/src/components/KunCard.vue.js";
-import ze from "../composables/useExpand.js";
-import je from "../composables/useOptions.js";
-import Ne from "../composables/useSelect.js";
-import De from "../composables/useFilter.js";
-import Ke from "../composables/KunTableProps.js";
-const Le = ["placeholder"], Ue = { class: "flex-1 overflow-auto" }, He = { key: 0 }, Oe = { key: 5 }, We = {
+import ze from "../../../KunCard/src/components/KunCard.vue.js";
+import je from "../composables/useExpand.js";
+import xe from "../composables/useOptions.js";
+import He from "../composables/useSelect.js";
+import Ne from "../composables/useFilter.js";
+import De from "../composables/KunTableProps.js";
+const Ke = ["placeholder"], Le = { class: "flex-1 overflow-auto" }, Ue = { key: 0 }, Oe = { key: 5 }, We = {
   key: 0,
   class: "h-full"
 }, Qe = {
@@ -23,36 +23,36 @@ const Le = ["placeholder"], Ue = { class: "flex-1 overflow-auto" }, He = { key:
   class: "sticky bottom-0 z-10 print:hidden"
 }, qe = "overflow-hidden h-full w-full flex flex-col border border-slate-200 dark:border-slate-800 rounded", Ge = "table-auto w-full h-fit text-sm text-left", ps = {
   __name: "KunTable",
-  props: /* @__PURE__ */ W(Ke(), {
+  props: /* @__PURE__ */ W(De(), {
     selectedItems: { type: Array, default: () => [] },
     selectedItemsModifiers: {}
   }),
   emits: /* @__PURE__ */ W(["update:page", "update:itemsPerPage", "update:sortBy", "update:search"], ["update:selectedItems"]),
-  setup(z, { emit: _ }) {
-    const j = _, m = z, T = be(m), ee = Se(z, "selectedItems"), {
-      headers: N,
+  setup(j, { emit: _ }) {
+    const x = _, m = j, T = be(m), ee = Se(j, "selectedItems"), {
+      headers: H,
       showExpand: $,
       showSelect: F,
-      rowClass: D,
+      rowClass: N,
       hideDefaultFooter: se,
       hideDefaultHeader: oe,
       tableClass: te,
       wrapperClass: le,
       pageOptions: ae,
       items: ne,
-      searchable: K,
+      searchable: D,
       debounceTime: re
     } = T, w = y(m.search);
     Q(() => m.search, (e) => {
       e !== w.value && (w.value = e);
     });
-    const { filteredItems: ie, setSearch: ce, modalFilter: v, applyColumnFilters: ue, clearFilters: de, appliedFilters: pe } = De(T, re);
+    const { filteredItems: ie, setSearch: ce, modalFilter: v, applyColumnFilters: ue, clearFilters: de, appliedFilters: pe } = Ne(T, re);
     Q(w, (e) => {
-      j("update:search", e), ce(e);
+      x("update:search", e), ce(e);
     });
-    const { options: r, paginatedItems: f, updateSort: me } = je(T, j, ie), { isSelected: k, toggleSelect: P, toggleSelectAll: fe, allSelected: he, someSelected: ge } = Ne(f, ee), { isExpanded: M, toggleExpand: A } = ze(), h = q(() => ({
+    const { options: r, paginatedItems: f, updateSort: me } = xe(T, x, ie), { isSelected: k, toggleSelect: P, toggleSelectAll: fe, allSelected: he, someSelected: ge } = He(f, ee), { isExpanded: M, toggleExpand: A } = je(), h = q(() => ({
       items: f.value,
-      headers: N.value,
+      headers: H.value,
       page: r.page,
       itemsPerPage: r.itemsPerPage,
       toggleSelect: P,
@@ -61,7 +61,7 @@ const Le = ["placeholder"], Ue = { class: "flex-1 overflow-auto" }, He = { key:
       isExpanded: M,
       sortBy: r.sortBy,
       hasActions: m.hasActions
-    })), we = [qe, le.value], ve = [Ge, te.value], L = q(() => m.headers.map((e) => {
+    })), we = [qe, le.value], ve = [Ge, te.value], K = q(() => m.headers.map((e) => {
       var t, i;
       const o = { ...e };
       if ((e.columnType === "function" || e.columnType == "objectFunction" || e.columnType == "simpleFunction") && typeof e.columnFunction == "string") {
@@ -78,14 +78,14 @@ const Le = ["placeholder"], Ue = { class: "flex-1 overflow-auto" }, He = { key:
       }
       return o;
     }));
-    Ce(() => H());
-    const U = y(null), I = y(!0), R = y(!1);
+    Ce(() => U());
+    const L = y(null), I = y(!0), R = y(!1);
     function ye() {
       p.value && (O(), ke(() => {
-        U.value.focus();
+        L.value.focus();
       }));
     }
-    function H() {
+    function U() {
       p.value && (E.value = "w-fit", I.value = !1, R.value = !0);
     }
     function O() {
@@ -93,7 +93,7 @@ const Le = ["placeholder"], Ue = { class: "flex-1 overflow-auto" }, He = { key:
     }
     const E = y("w-full border max-w-sm");
     return (e, o) => (l(), c("div", B({ class: we }, e.$attrs, { style: { "user-select": "text" } }), [
-      s(K) || e.filterable || e.$slots.prependSearch || e.$slots.appendSearch ? (l(), c("div", {
+      s(D) || e.filterable || e.$slots.prependSearch || e.$slots.appendSearch ? (l(), c("div", {
         key: 0,
         class: C(["p-2 bg-slate-200 dark:bg-slate-800 print:hidden", {
           "justify-start flex": e.searchPosition === "start",
@@ -110,7 +110,7 @@ const Le = ["placeholder"], Ue = { class: "flex-1 overflow-auto" }, He = { key:
           size: "xs",
           bgColor: "bg-green-200 dark:bg-green-800"
         }, {
-          default: x(() => [
+          default: z(() => [
             b(Z, {
               class: "h-fit",
               icon: Pe,
@@ -119,7 +119,7 @@ const Le = ["placeholder"], Ue = { class: "flex-1 overflow-auto" }, He = { key:
           ]),
           _: 1
         })) : u("", !0),
-        s(K) ? (l(), c("div", {
+        s(D) ? (l(), c("div", {
           key: 1,
           class: C(["rounded flex mx-2", [E.value]])
         }, [
@@ -129,10 +129,10 @@ const Le = ["placeholder"], Ue = { class: "flex-1 overflow-auto" }, He = { key:
             placeholder: e.searchPlaceholder,
             class: C(["w-full text-sm", s(p) ? "px-1" : "px-2 py-1"]),
             ref_key: "searchRef",
-            ref: U,
+            ref: L,
             onFocus: O,
-            onBlur: H
-          }, null, 42, Le), [
+            onBlur: U
+          }, null, 42, Ke), [
             [Te, w.value],
             [J, I.value]
           ]),
@@ -145,16 +145,16 @@ const Le = ["placeholder"], Ue = { class: "flex-1 overflow-auto" }, He = { key:
         ], 2)) : u("", !0),
         a(e.$slots, "appendSearch")
       ], 2)) : u("", !0),
-      V("div", Ue, [
+      V("div", Le, [
         V("table", {
           class: C(ve)
         }, [
-          e.$slots.colgroup && !s(p) ? (l(), c("colgroup", He, [
+          e.$slots.colgroup && !s(p) ? (l(), c("colgroup", Ue, [
             a(e.$slots, "colgroup", d(g(h.value)))
           ])) : u("", !0),
           !s(oe) && !s(p) ? (l(), S(Ae, {
             key: 1,
-            headers: s(N),
+            headers: s(H),
             "sort-by": s(r).sortBy,
             "show-select": s(F),
             "show-expand": s($),
@@ -166,15 +166,16 @@ const Le = ["placeholder"], Ue = { class: "flex-1 overflow-auto" }, He = { key:
             "has-actions": e.hasActions,
             "action-label": e.actionLabel,
             onSort: s(me),
-            onToggleSelectAll: s(fe)
-          }, 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"])) : a(e.$slots, "thead", d(B({ key: 2 }, h.value))),
+            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(B({ key: 2 }, h.value))),
           s(f).length && !s(p) ? (l(), c($e, { key: 3 }, [
             a(e.$slots, "body.prepend", d(g(h.value))),
             b(Re, {
               items: s(f),
-              headers: L.value,
+              headers: K.value,
               "tbody-class": e.tbodyClass,
-              "row-class": s(D),
+              "row-class": s(N),
               "row-class-condition": e.rowClassCondition,
               "tr-class": e.trClass,
               "td-class": e.tdClass,
@@ -192,7 +193,7 @@ const Le = ["placeholder"], Ue = { class: "flex-1 overflow-auto" }, He = { key:
             }, X({ _: 2 }, [
               Y(e.$slots, (t, i) => ({
                 name: i,
-                fn: x((n) => [
+                fn: z((n) => [
                   a(e.$slots, i, d(g(n)))
                 ])
               }))
@@ -201,8 +202,8 @@ const Le = ["placeholder"], Ue = { class: "flex-1 overflow-auto" }, He = { key:
           ], 64)) : s(f).length && s(p) ? (l(), S(Ee, {
             key: 4,
             items: s(f),
-            headers: L.value,
-            "row-class": s(D),
+            headers: K.value,
+            "row-class": s(N),
             "row-class-condition": e.rowClassCondition,
             "is-selected": s(k),
             "is-expanded": s(M),
@@ -216,7 +217,7 @@ const Le = ["placeholder"], Ue = { class: "flex-1 overflow-auto" }, He = { key:
           }, X({ _: 2 }, [
             Y(e.$slots, (t, i) => ({
               name: i,
-              fn: x((n) => [
+              fn: z((n) => [
                 a(e.$slots, i, d(g(n)))
               ])
             }))
@@ -226,7 +227,7 @@ const Le = ["placeholder"], Ue = { class: "flex-1 overflow-auto" }, He = { key:
           ])) : u("", !0)
         ]),
         s(f).length ? u("", !0) : (l(), c("div", We, [
-          b(xe, {
+          b(ze, {
             class: "h-full flex justify-center items-center text-center",
             title: e.noDataText,
             titleSize: "text-4xl"

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

@@ -1,11 +1,11 @@
-import { ref as A, onMounted as v, watch as k, createElementBlock as r, openBlock as o, normalizeClass as a, createElementVNode as m, createCommentVNode as d, renderSlot as g, Fragment as E, renderList as T, normalizeStyle as $, toDisplayString as h, createBlock as D, resolveDynamicComponent as z } from "vue";
-import I from "../../../../icons/IconArrowUp.vue.js";
-import L from "../../../../icons/IconArrowDown.vue.js";
-import O from "../../../../icons/IconArrowDownUp.vue.js";
-const j = { key: 0 }, N = { key: 1 }, R = ["checked", "aria-checked"], U = ["onClick"], V = {
+import { ref as $, onMounted as E, watch as f, createElementBlock as r, openBlock as a, normalizeClass as o, createElementVNode as k, createCommentVNode as u, renderSlot as g, Fragment as T, renderList as D, normalizeStyle as H, createBlock as h, resolveDynamicComponent as b, toDisplayString as x } from "vue";
+import O from "../../../../icons/IconArrowUp.vue.js";
+import j from "../../../../icons/IconArrowDown.vue.js";
+import z from "../../../../icons/IconArrowDownUp.vue.js";
+const I = { key: 0 }, L = { key: 1 }, N = ["checked", "aria-checked"], R = ["onClick"], U = {
   key: 0,
   class: "inline-flex items-center gap-1 ml-1 print:hidden"
-}, F = "bg-slate-200 dark:bg-slate-800 sticky top-0 z-5", H = "", K = "px-3 py-2 text-xs font-medium text-slate-700 dark:text-slate-300 uppercase tracking-wider", P = {
+}, V = "bg-slate-200 dark:bg-slate-800 sticky top-0 z-5", F = "", K = "px-3 py-2 text-xs font-medium text-slate-700 dark:text-slate-300 uppercase tracking-wider", Q = {
   __name: "KunTableHeaders",
   props: {
     headers: Array,
@@ -19,86 +19,96 @@ const j = { key: 0 }, N = { key: 1 }, R = ["checked", "aria-checked"], U = ["onC
     trClass: String,
     thClass: String,
     hasActions: Boolean,
-    actionLabel: String
+    actionLabel: String,
+    customHeaders: Object
   },
   emits: ["toggle-select-all", "sort", "expandAll", "collapseAll"],
-  setup(n, { emit: b }) {
-    const t = n, c = b;
-    function x() {
+  setup(l, { emit: S }) {
+    const t = l, c = S;
+    function p() {
       c("toggle-select-all");
     }
-    function p(l) {
-      if (!l.sortable) return;
-      let s = null;
-      Array.isArray(t.sortBy) ? s = t.sortBy.find((f) => f.key === l.value) : typeof t.sortBy == "string" && (s = t.sortBy === l.value ? { key: l.value, order: "asc" } : null);
-      const e = (s == null ? void 0 : s.order) === "asc" ? "desc" : "asc";
-      c("sort", { key: l.value, order: e });
+    function C(s) {
+      if (!s.sortable) return;
+      let n = null;
+      Array.isArray(t.sortBy) ? n = t.sortBy.find((d) => d.key === s.value) : typeof t.sortBy == "string" && (n = t.sortBy === s.value ? { key: s.value, order: "asc" } : null);
+      const e = (n == null ? void 0 : n.order) === "asc" ? "desc" : "asc";
+      c("sort", { key: s.value, order: e });
     }
-    function S(l) {
-      var s;
+    function B(s) {
+      var n;
       if (Array.isArray(t.sortBy))
-        return (s = t.sortBy.find((e) => e.key === l.value)) == null ? void 0 : s.order;
-      if (typeof t.sortBy == "string" && t.sortBy === l.value)
+        return (n = t.sortBy.find((e) => e.key === s.value)) == null ? void 0 : n.order;
+      if (typeof t.sortBy == "string" && t.sortBy === s.value)
         return "asc";
     }
-    const C = (l) => {
-      const s = S(l);
-      return s ? s === "asc" ? I : L : O;
-    }, B = [F, t.theadClass], w = [H, t.trClass], i = [K, t.thClass], u = A(null), y = () => {
-      u.value && (u.value.indeterminate = t.someSelected && !t.allSelected);
+    const w = (s) => {
+      const n = B(s);
+      return n ? n === "asc" ? O : j : z;
+    }, A = [V, t.theadClass], v = [F, t.trClass], i = [K, t.thClass], y = $(null), m = () => {
+      y.value && (y.value.indeterminate = t.someSelected && !t.allSelected);
     };
-    return v(y), k(() => t.someSelected, y), k(() => t.allSelected, y), (l, s) => (o(), r("thead", {
-      class: a(B)
+    return E(m), f(() => t.someSelected, m), f(() => t.allSelected, m), (s, n) => (a(), r("thead", {
+      class: o(A)
     }, [
-      m("tr", {
-        class: a(w)
+      k("tr", {
+        class: o(v)
       }, [
-        n.showExpand ? (o(), r("th", {
+        l.showExpand ? (a(), r("th", {
           key: 0,
-          class: a([i])
+          class: o([i])
         }, [
-          l.$slots.expandIcon ? g(l.$slots, "expand-icon", { key: 0 }) : (o(), r("button", {
+          s.$slots.expandIcon ? g(s.$slots, "expand-icon", { key: 0 }) : (a(), r("button", {
             key: 1,
-            onClick: s[0] || (s[0] = (e) => n.isExpanded ? c("expandAll") : c("collapseAll"))
+            onClick: n[0] || (n[0] = (e) => l.isExpanded ? c("expandAll") : c("collapseAll"))
           }, [
-            n.isExpanded ? (o(), r("span", j, "−")) : (o(), r("span", N, "+"))
+            l.isExpanded ? (a(), r("span", I, "−")) : (a(), r("span", L, "+"))
           ]))
-        ], 2)) : d("", !0),
-        n.showSelect ? (o(), r("th", {
+        ], 2)) : u("", !0),
+        l.showSelect ? (a(), r("th", {
           key: 1,
-          class: a([i, "h-full w-10 flex flex-col items-center justify-center"])
+          class: o([i, "h-full w-10 flex flex-col items-center justify-center"])
         }, [
-          m("input", {
+          k("input", {
             ref_key: "checkboxRef",
-            ref: u,
+            ref: y,
             type: "checkbox",
-            checked: n.allSelected,
-            "aria-checked": n.someSelected && !n.allSelected ? "mixed" : n.allSelected ? "true" : "false",
-            onChange: x,
+            checked: l.allSelected,
+            "aria-checked": l.someSelected && !l.allSelected ? "mixed" : l.allSelected ? "true" : "false",
+            onChange: p,
             class: "h-6 w-6 text-blue-600 transition-all duration-200 ease-in-out rounded print:hidden border-gray-300 dark:border-slate-600 checked:bg-blue-600 checked:border-blue-600 indeterminate:bg-blue-400 indeterminate:border-blue-400"
-          }, null, 40, R)
-        ])) : d("", !0),
-        (o(!0), r(E, null, T(n.headers, (e) => (o(), r("th", {
-          key: e.key,
-          class: a([i, e.headerAlign === "right" ? "text-right" : e.headerAlign === "left" ? "text-left" : "text-center"]),
-          onClick: (f) => p(e),
-          style: $({ cursor: e.sortable ? "pointer" : "default" })
-        }, [
-          g(l.$slots, `header.${e.key}`, { header: e }, () => [
-            m("span", null, h(e.label ?? e.text), 1),
-            e.sortable ? (o(), r("span", V, [
-              (o(), D(z(C(e)), { class: "w-4 h-4 text-gray-500" }))
-            ])) : d("", !0)
-          ])
-        ], 14, U))), 128)),
-        n.hasActions ? (o(), r("th", {
+          }, null, 40, N)
+        ])) : u("", !0),
+        (a(!0), r(T, null, D(l.headers, (e) => {
+          var d;
+          return a(), r("th", {
+            key: e.key,
+            class: o([i, e.headerAlign === "right" ? "text-right" : e.headerAlign === "left" ? "text-left" : "text-center"]),
+            onClick: (M) => C(e),
+            style: H({ cursor: e.sortable ? "pointer" : "default" })
+          }, [
+            (d = l.customHeaders) != null && d[`header.${e.value}`] ? (a(), h(b(l.customHeaders[`header.${e.value}`]), {
+              key: 0,
+              header: e
+            }, null, 8, ["header"])) : g(s.$slots, `header.${e.key}`, {
+              key: 1,
+              header: e
+            }, () => [
+              k("span", null, x(e.label ?? e.text), 1),
+              e.sortable ? (a(), r("span", U, [
+                (a(), h(b(w(e)), { class: "w-4 h-4 text-gray-500" }))
+              ])) : u("", !0)
+            ])
+          ], 14, R);
+        }), 128)),
+        l.hasActions ? (a(), r("th", {
           key: 2,
-          class: a([[i], "text-center print:hidden"])
-        }, h(n.actionLabel), 3)) : d("", !0)
+          class: o([[i], "text-center print:hidden"])
+        }, x(l.actionLabel), 3)) : u("", !0)
       ])
     ]));
   }
 };
 export {
-  P as default
+  Q as default
 };

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

@@ -56,6 +56,7 @@ const t = () => ({
   loadingText: { type: String, default: "Cargando..." },
   // Slots control
   customSlots: { type: Object, default: () => ({}) },
+  customHeaders: { type: Object, default: () => ({}) },
   showTopSlot: { type: Boolean, default: !1 },
   showBottomSlot: { type: Boolean, default: !1 },
   functionMap: { type: Object, default: () => ({}) }

package/package.json

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