adverich-kun-ui 0.1.312 → 0.1.314

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

@@ -1,217 +1,258 @@
-import { mergeModels as j, toRefs as ce, useModel as de, ref as pe, watch as N, computed as z, createElementBlock as c, openBlock as l, mergeProps as P, createCommentVNode as d, createElementVNode as D, renderSlot as a, createBlock as w, unref as s, normalizeClass as K, withDirectives as ue, vModelText as me, normalizeProps as p, guardReactiveProps as g, Fragment as fe, createVNode as A, createSlots as L, renderList as U, withCtx as x, isRef as ge } from "vue";
-import { isMobile as b } from "../../../../utils/_platform.js";
-import he from "./KunTableHeaders.vue.js";
-import ye from "./KunTableFooter.vue.js";
-import we from "./KunTableRows.vue.js";
-import be from "./KunTableIterators.vue.js";
-import ve from "../../../KunBtn/src/components/KunBtn.vue.js";
-import Se from "./KunTableFilter.vue.js";
-import Ce from "../../../KunCard/src/components/KunCard.vue.js";
-import Te from "../composables/useExpand.js";
-import $e from "../composables/useOptions.js";
-import Fe from "../composables/useSelect.js";
-import ke from "../composables/useFilter.js";
-import Pe from "../composables/KunTableProps.js";
-const Ae = ["placeholder"], Me = { class: "flex-1 overflow-auto" }, Ee = { key: 0 }, Re = { key: 5 }, Be = {
+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 { isMobile as p } from "../../../../utils/_platform.js";
+import Z from "../../../KunIcon/src/components/KunIcon.vue.js";
+import Pe from "../../../../icons/IconFilter.vue.js";
+import Me from "../../../../icons/IconSearch.vue.js";
+import Ae from "./KunTableHeaders.vue.js";
+import Ie from "./KunTableFooter.vue.js";
+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 = {
   key: 0,
   class: "h-full"
-}, Ie = {
+}, Qe = {
   key: 1,
   class: "sticky bottom-0 z-10 print:hidden"
-}, Ve = "overflow-hidden h-full w-full flex flex-col border border-slate-200 dark:border-slate-800 rounded", je = "table-auto w-full h-fit text-sm text-left", Xe = {
+}, 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__ */ j(Pe(), {
+  props: /* @__PURE__ */ W(Ke(), {
     selectedItems: { type: Array, default: () => [] },
     selectedItemsModifiers: {}
   }),
-  emits: /* @__PURE__ */ j(["update:page", "update:itemsPerPage", "update:sortBy", "update:search"], ["update:selectedItems"]),
-  setup(M, { emit: H }) {
-    const E = H, u = M, v = ce(u), O = de(M, "selectedItems"), {
-      headers: R,
-      showExpand: S,
-      showSelect: C,
-      rowClass: B,
-      hideDefaultFooter: W,
-      hideDefaultHeader: Q,
-      tableClass: q,
-      wrapperClass: G,
-      pageOptions: J,
-      items: X,
-      searchable: I,
-      debounceTime: Y
-    } = v, h = pe(u.search);
-    N(() => u.search, (e) => {
-      e !== h.value && (h.value = e);
+  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,
+      showExpand: $,
+      showSelect: F,
+      rowClass: D,
+      hideDefaultFooter: se,
+      hideDefaultHeader: oe,
+      tableClass: te,
+      wrapperClass: le,
+      pageOptions: ae,
+      items: ne,
+      searchable: K,
+      debounceTime: re
+    } = T, w = y(m.search);
+    Q(() => m.search, (e) => {
+      e !== w.value && (w.value = e);
     });
-    const { filteredItems: Z, setSearch: _, modalFilter: y, applyColumnFilters: ee, clearFilters: se, appliedFilters: te } = ke(v, Y);
-    N(h, (e) => {
-      E("update:search", e), _(e);
+    const { filteredItems: ie, setSearch: ce, modalFilter: v, applyColumnFilters: ue, clearFilters: de, appliedFilters: pe } = De(T, re);
+    Q(w, (e) => {
+      j("update:search", e), ce(e);
     });
-    const { options: r, paginatedItems: m, updateSort: oe } = $e(v, E, Z), { isSelected: T, toggleSelect: $, toggleSelectAll: le, allSelected: ae, someSelected: ne } = Fe(m, O), { isExpanded: F, toggleExpand: k } = Te(), f = z(() => ({
-      items: m.value,
-      headers: R.value,
+    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(() => ({
+      items: f.value,
+      headers: N.value,
       page: r.page,
       itemsPerPage: r.itemsPerPage,
-      toggleSelect: $,
-      isSelected: T,
-      toggleExpand: k,
-      isExpanded: F,
+      toggleSelect: P,
+      isSelected: k,
+      toggleExpand: A,
+      isExpanded: M,
       sortBy: r.sortBy,
-      hasActions: u.hasActions
-    })), re = [Ve, G.value], ie = [je, q.value], V = z(() => u.headers.map((e) => {
-      var o, i;
-      const t = { ...e };
+      hasActions: m.hasActions
+    })), we = [qe, le.value], ve = [Ge, te.value], L = 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") {
-        const n = (o = u.functionMap) == null ? void 0 : o[e.columnFunction];
-        typeof n == "function" ? t.columnFunction = n : (console.warn(
+        const n = (t = m.functionMap) == null ? void 0 : t[e.columnFunction];
+        typeof n == "function" ? o.columnFunction = n : (console.warn(
           `[KunTable] No se encontró la función "${e.columnFunction}" en functionMap`
-        ), t.columnFunction = () => "");
+        ), o.columnFunction = () => "");
       }
       if (e.columnFormat === "function" && typeof e.columnRowText == "string") {
-        const n = (i = u.functionMap) == null ? void 0 : i[e.columnRowText];
-        typeof n == "function" ? t.columnRowText = n : (console.warn(
+        const n = (i = m.functionMap) == null ? void 0 : i[e.columnRowText];
+        typeof n == "function" ? o.columnRowText = n : (console.warn(
           `[KunTable] No se encontró la función "${e.columnRowText}" en functionMap`
-        ), t.columnRowText = () => "");
+        ), o.columnRowText = () => "");
       }
-      return t;
+      return o;
     }));
-    return (e, t) => (l(), c("div", P({ class: re }, e.$attrs, { style: { "user-select": "text" } }), [
-      s(I) || e.filterable || e.$slots.prependSearch || e.$slots.appendSearch ? (l(), c("div", {
+    Ce(() => H());
+    const U = y(null), I = y(!0), R = y(!1);
+    function ye() {
+      p.value && (O(), ke(() => {
+        U.value.focus();
+      }));
+    }
+    function H() {
+      p.value && (E.value = "w-fit", I.value = !1, R.value = !0);
+    }
+    function O() {
+      p.value && (E.value = "w-full border", R.value = !1, I.value = !0);
+    }
+    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", {
         key: 0,
-        class: K(["p-2 bg-slate-200 dark:bg-slate-800 print:hidden", {
+        class: C(["p-2 bg-slate-200 dark:bg-slate-800 print:hidden", {
           "justify-start flex": e.searchPosition === "start",
           "justify-center flex": e.searchPosition === "center",
           "justify-end flex": e.searchPosition === "end"
         }])
       }, [
         a(e.$slots, "prependSearch"),
-        e.filterable && e.filters.length ? (l(), w(ve, {
+        e.filterable && e.filters.length ? (l(), S(Be, {
           key: 0,
-          onClick: t[0] || (t[0] = (o) => y.value = !0),
-          text: "Filtros",
-          bgColor: "bg-green-200 dark:bg-green-800 px-2"
-        })) : d("", !0),
-        s(I) ? ue((l(), c("input", {
+          onClick: o[0] || (o[0] = (t) => v.value = !0),
+          rounded: "rounded-full",
+          size: "xs",
+          bgColor: "bg-green-200 dark:bg-green-800"
+        }, {
+          default: x(() => [
+            b(Z, {
+              icon: Pe,
+              size: "text-lg"
+            })
+          ]),
+          _: 1
+        })) : u("", !0),
+        s(K) ? (l(), c("div", {
           key: 1,
-          "onUpdate:modelValue": t[1] || (t[1] = (o) => h.value = o),
-          type: "text",
-          placeholder: e.searchPlaceholder,
-          class: "border mx-2 px-3 py-1 rounded w-full max-w-sm text-sm"
-        }, null, 8, Ae)), [
-          [me, h.value]
-        ]) : d("", !0),
+          class: C(["rounded flex mx-2", [E.value]])
+        }, [
+          G(V("input", {
+            "onUpdate:modelValue": o[1] || (o[1] = (t) => w.value = t),
+            type: "text",
+            placeholder: e.searchPlaceholder,
+            class: C(["w-full text-sm", s(p) ? "px-1" : "px-2 py-1"]),
+            ref_key: "searchRef",
+            ref: U,
+            onFocus: O,
+            onBlur: H
+          }, null, 42, Le), [
+            [Te, w.value],
+            [J, I.value]
+          ]),
+          G(b(Z, {
+            icon: Me,
+            onClick: ye
+          }, null, 512), [
+            [J, R.value]
+          ])
+        ], 2)) : u("", !0),
         a(e.$slots, "appendSearch")
-      ], 2)) : d("", !0),
-      D("div", Me, [
-        D("table", {
-          class: K(ie)
+      ], 2)) : u("", !0),
+      V("div", Ue, [
+        V("table", {
+          class: C(ve)
         }, [
-          e.$slots.colgroup && !s(b) ? (l(), c("colgroup", Ee, [
-            a(e.$slots, "colgroup", p(g(f.value)))
-          ])) : d("", !0),
-          !s(Q) && !s(b) ? (l(), w(he, {
+          e.$slots.colgroup && !s(p) ? (l(), c("colgroup", He, [
+            a(e.$slots, "colgroup", d(g(h.value)))
+          ])) : u("", !0),
+          !s(oe) && !s(p) ? (l(), S(Ae, {
             key: 1,
-            headers: s(R),
+            headers: s(N),
             "sort-by": s(r).sortBy,
-            "show-select": s(C),
-            "show-expand": s(S),
-            "all-selected": s(ae),
-            "some-selected": s(ne),
+            "show-select": s(F),
+            "show-expand": s($),
+            "all-selected": s(he),
+            "some-selected": s(ge),
             "thead-class": e.theadClass,
             "tr-class": e.trClass,
             "th-class": e.thClass,
             "has-actions": e.hasActions,
             "action-label": e.actionLabel,
-            onSort: s(oe),
-            onToggleSelectAll: s(le)
-          }, 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", p(P({ key: 2 }, f.value))),
-          s(m).length && !s(b) ? (l(), c(fe, { key: 3 }, [
-            a(e.$slots, "body.prepend", p(g(f.value))),
-            A(we, {
-              items: s(m),
-              headers: V.value,
+            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))),
+          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,
               "tbody-class": e.tbodyClass,
-              "row-class": s(B),
+              "row-class": s(D),
               "row-class-condition": e.rowClassCondition,
               "tr-class": e.trClass,
               "td-class": e.tdClass,
               "selected-class": e.selectedClass,
               "striped-class": e.stripedClass,
-              "is-selected": s(T),
-              "is-expanded": s(F),
-              "show-select": s(C),
-              "show-expand": s(S),
+              "is-selected": s(k),
+              "is-expanded": s(M),
+              "show-select": s(F),
+              "show-expand": s($),
               "has-actions": e.hasActions,
               "action-loading-map": e.actionLoadingMap,
-              onToggleExpand: s(k),
-              onToggleSelect: s($),
+              onToggleExpand: s(A),
+              onToggleSelect: s(P),
               customSlots: e.customSlots
-            }, L({ _: 2 }, [
-              U(e.$slots, (o, i) => ({
+            }, X({ _: 2 }, [
+              Y(e.$slots, (t, i) => ({
                 name: i,
                 fn: x((n) => [
-                  a(e.$slots, i, p(g(n)))
+                  a(e.$slots, i, d(g(n)))
                 ])
               }))
             ]), 1032, ["items", "headers", "tbody-class", "row-class", "row-class-condition", "tr-class", "td-class", "selected-class", "striped-class", "is-selected", "is-expanded", "show-select", "show-expand", "has-actions", "action-loading-map", "onToggleExpand", "onToggleSelect", "customSlots"]),
-            a(e.$slots, "body.append", p(g(f.value)))
-          ], 64)) : s(m).length && s(b) ? (l(), w(be, {
+            a(e.$slots, "body.append", d(g(h.value)))
+          ], 64)) : s(f).length && s(p) ? (l(), S(Ee, {
             key: 4,
-            items: s(m),
-            headers: V.value,
-            "row-class": s(B),
+            items: s(f),
+            headers: L.value,
+            "row-class": s(D),
             "row-class-condition": e.rowClassCondition,
-            "is-selected": s(T),
-            "is-expanded": s(F),
-            "show-select": s(C),
-            "show-expand": s(S),
+            "is-selected": s(k),
+            "is-expanded": s(M),
+            "show-select": s(F),
+            "show-expand": s($),
             "has-actions": e.hasActions,
             "action-loading-map": e.actionLoadingMap,
-            onToggleExpand: s(k),
-            onToggleSelect: s($),
+            onToggleExpand: s(A),
+            onToggleSelect: s(P),
             customSlots: e.customSlots
-          }, L({ _: 2 }, [
-            U(e.$slots, (o, i) => ({
+          }, X({ _: 2 }, [
+            Y(e.$slots, (t, i) => ({
               name: i,
               fn: x((n) => [
-                a(e.$slots, i, p(g(n)))
+                a(e.$slots, i, d(g(n)))
               ])
             }))
-          ]), 1032, ["items", "headers", "row-class", "row-class-condition", "is-selected", "is-expanded", "show-select", "show-expand", "has-actions", "action-loading-map", "onToggleExpand", "onToggleSelect", "customSlots"])) : d("", !0),
-          e.$slots.tfoot ? (l(), c("tfoot", Re, [
-            a(e.$slots, "tfoot", p(g(f.value)))
-          ])) : d("", !0)
+          ]), 1032, ["items", "headers", "row-class", "row-class-condition", "is-selected", "is-expanded", "show-select", "show-expand", "has-actions", "action-loading-map", "onToggleExpand", "onToggleSelect", "customSlots"])) : u("", !0),
+          e.$slots.tfoot ? (l(), c("tfoot", Oe, [
+            a(e.$slots, "tfoot", d(g(h.value)))
+          ])) : u("", !0)
         ]),
-        s(m).length ? d("", !0) : (l(), c("div", Be, [
-          A(Ce, {
+        s(f).length ? u("", !0) : (l(), c("div", We, [
+          b(xe, {
             class: "h-full flex justify-center items-center text-center",
             title: e.noDataText,
             titleSize: "text-4xl"
           }, null, 8, ["title"])
         ]))
       ]),
-      s(W) ? a(e.$slots, "footer", p(P({ key: 2 }, f.value))) : (l(), c("div", Ie, [
-        A(ye, {
-          "items-length": s(X).length,
+      s(se) ? a(e.$slots, "footer", d(B({ key: 2 }, h.value))) : (l(), c("div", Qe, [
+        b(Ie, {
+          "items-length": s(ne).length,
           "items-per-page": s(r).itemsPerPage,
           "current-page": s(r).page,
-          "page-options": s(J),
-          "onUpdate:itemsPerPage": t[2] || (t[2] = (o) => s(r).itemsPerPage = o),
-          "onUpdate:page": t[3] || (t[3] = (o) => s(r).page = o)
+          "page-options": s(ae),
+          "onUpdate:itemsPerPage": o[2] || (o[2] = (t) => s(r).itemsPerPage = t),
+          "onUpdate:page": o[3] || (o[3] = (t) => s(r).page = t)
         }, null, 8, ["items-length", "items-per-page", "current-page", "page-options"])
       ])),
-      e.filterable && s(y) ? (l(), w(Se, {
+      e.filterable && s(v) ? (l(), S(Ve, {
         key: 3,
         filters: e.filters,
-        modelValue: s(y),
-        "onUpdate:modelValue": t[4] || (t[4] = (o) => ge(y) ? y.value = o : null),
-        onApplyFilters: s(ee),
-        onClearFilters: s(se),
-        activeFilters: s(te).byColumn
-      }, null, 8, ["filters", "modelValue", "onApplyFilters", "onClearFilters", "activeFilters"])) : d("", !0)
+        modelValue: s(v),
+        "onUpdate:modelValue": o[4] || (o[4] = (t) => Fe(v) ? v.value = t : null),
+        onApplyFilters: s(ue),
+        onClearFilters: s(de),
+        activeFilters: s(pe).byColumn
+      }, null, 8, ["filters", "modelValue", "onApplyFilters", "onClearFilters", "activeFilters"])) : u("", !0)
     ], 16));
   }
 };
 export {
-  Xe as default
+  ps as default
 };

package/dist/icons/IconFilter.vue.js

@@ -0,0 +1,20 @@
+import { createElementBlock as t, openBlock as o, createElementVNode as r } from "vue";
+import n from "../_virtual/_plugin-vue_export-helper.js";
+const c = {}, l = {
+  xmlns: "http://www.w3.org/2000/svg",
+  width: "1em",
+  height: "1em",
+  viewBox: "0 0 24 24"
+};
+function s(i, e) {
+  return o(), t("svg", l, e[0] || (e[0] = [
+    r("path", {
+      fill: "currentColor",
+      d: "M15 19.88c.04.3-.06.62-.29.83a.996.996 0 0 1-1.41 0L9.29 16.7a.99.99 0 0 1-.29-.83v-5.12L4.21 4.62a1 1 0 0 1 .17-1.4c.19-.14.4-.22.62-.22h14c.22 0 .43.08.62.22a1 1 0 0 1 .17 1.4L15 10.75zM7.04 5L11 10.06v5.52l2 2v-7.53L16.96 5z"
+    }, null, -1)
+  ]));
+}
+const f = /* @__PURE__ */ n(c, [["render", s]]);
+export {
+  f as default
+};

package/dist/icons/IconSearch.vue.js

@@ -1,16 +1,20 @@
-import { createElementBlock as o, openBlock as t, createElementVNode as r } from "vue";
+import { createElementBlock as e, openBlock as o, createElementVNode as r } from "vue";
 import n from "../_virtual/_plugin-vue_export-helper.js";
 const c = {}, l = {
   xmlns: "http://www.w3.org/2000/svg",
-  viewBox: "0 0 24 24",
-  fill: "currentColor"
+  width: "24",
+  height: "24",
+  viewBox: "0 0 24 24"
 };
-function s(f, e) {
-  return t(), o("svg", l, e[0] || (e[0] = [
-    r("path", { d: "M6 18L18 6M6 6l12 12" }, null, -1)
+function s(T, t) {
+  return o(), e("svg", l, t[0] || (t[0] = [
+    r("path", {
+      fill: "currentColor",
+      d: "M9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.6 5.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-5.6-5.6q-.75.6-1.725.95T9.5 16m0-2q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
+    }, null, -1)
   ]));
 }
-const i = /* @__PURE__ */ n(c, [["render", s]]);
+const f = /* @__PURE__ */ n(c, [["render", s]]);
 export {
-  i as default
+  f as default
 };

package/package.json

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