adverich-kun-ui 0.1.312 → 0.1.313

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

@@ -1,217 +1,248 @@
-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 O, toRefs as ye, useModel as be, ref as y, watch as W, computed as Q, onMounted as Se, createElementBlock as c, openBlock as l, mergeProps as B, createCommentVNode as u, createElementVNode as V, renderSlot as a, createBlock as b, unref as s, normalizeClass as S, withDirectives as q, vModelText as Ce, vShow as G, createVNode as C, normalizeProps as d, guardReactiveProps as g, Fragment as Te, createSlots as J, renderList as X, withCtx as Y, isRef as $e, nextTick as Fe } from "vue";
+import { isMobile as p } from "../../../../utils/_platform.js";
+import ke from "../../../KunIcon/src/components/KunIcon.vue.js";
+import Pe from "../../../../icons/IconSearch.vue.js";
+import Me from "./KunTableHeaders.vue.js";
+import Ae from "./KunTableFooter.vue.js";
+import Re from "./KunTableRows.vue.js";
+import Ee from "./KunTableIterators.vue.js";
+import Ie from "../../../KunBtn/src/components/KunBtn.vue.js";
+import Be from "./KunTableFilter.vue.js";
+import Ve from "../../../KunCard/src/components/KunCard.vue.js";
+import xe from "../composables/useExpand.js";
+import je from "../composables/useOptions.js";
+import Ne from "../composables/useSelect.js";
+import ze from "../composables/useFilter.js";
+import De from "../composables/KunTableProps.js";
+const Ke = ["placeholder"], Le = { class: "flex-1 overflow-auto" }, Ue = { key: 0 }, He = { key: 5 }, Oe = {
   key: 0,
   class: "h-full"
-}, Ie = {
+}, We = {
   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", qe = "table-auto w-full h-fit text-sm text-left", us = {
   __name: "KunTable",
-  props: /* @__PURE__ */ j(Pe(), {
+  props: /* @__PURE__ */ O(De(), {
     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__ */ O(["update:page", "update:itemsPerPage", "update:sortBy", "update:search"], ["update:selectedItems"]),
+  setup(x, { emit: Z }) {
+    const j = Z, m = x, T = ye(m), _ = be(x, "selectedItems"), {
+      headers: N,
+      showExpand: $,
+      showSelect: F,
+      rowClass: z,
+      hideDefaultFooter: ee,
+      hideDefaultHeader: se,
+      tableClass: oe,
+      wrapperClass: te,
+      pageOptions: le,
+      items: ae,
+      searchable: D,
+      debounceTime: ne
+    } = T, w = y(m.search);
+    W(() => 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: re, setSearch: ie, modalFilter: v, applyColumnFilters: ce, clearFilters: ue, appliedFilters: de } = ze(T, ne);
+    W(w, (e) => {
+      j("update:search", e), ie(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: pe } = je(T, j, re), { isSelected: k, toggleSelect: P, toggleSelectAll: me, allSelected: fe, someSelected: he } = Ne(f, _), { isExpanded: M, toggleExpand: A } = xe(), 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
+    })), ge = [Qe, te.value], we = [qe, oe.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") {
-        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", {
+    Se(() => U());
+    const L = y(null), R = y(!0), E = y(!1);
+    function ve() {
+      p.value && (H(), Fe(() => {
+        L.value.focus();
+      }));
+    }
+    function U() {
+      p.value && (I.value = "w-fit", R.value = !1, E.value = !0);
+    }
+    function H() {
+      p.value && (I.value = "w-full border", E.value = !1, R.value = !0);
+    }
+    const I = y("w-full border max-w-sm");
+    return (e, o) => (l(), c("div", B({ class: ge }, e.$attrs, { style: { "user-select": "text" } }), [
+      s(D) || 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: S(["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(), b(Ie, {
           key: 0,
-          onClick: t[0] || (t[0] = (o) => y.value = !0),
+          onClick: o[0] || (o[0] = (t) => v.value = !0),
           text: "Filtros",
           bgColor: "bg-green-200 dark:bg-green-800 px-2"
-        })) : d("", !0),
-        s(I) ? ue((l(), c("input", {
+        })) : u("", !0),
+        s(D) ? (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: S(["rounded flex mx-2", [I.value]])
+        }, [
+          q(V("input", {
+            "onUpdate:modelValue": o[1] || (o[1] = (t) => w.value = t),
+            type: "text",
+            placeholder: e.searchPlaceholder,
+            class: S(["w-full text-sm", s(p) ? "px-1" : "px-2 py-1"]),
+            ref_key: "searchRef",
+            ref: L,
+            onFocus: H,
+            onBlur: U
+          }, null, 42, Ke), [
+            [Ce, w.value],
+            [G, R.value]
+          ]),
+          q(C(ke, {
+            icon: Pe,
+            onClick: ve
+          }, null, 512), [
+            [G, E.value]
+          ])
+        ], 2)) : u("", !0),
         a(e.$slots, "appendSearch")
-      ], 2)) : d("", !0),
-      D("div", Me, [
-        D("table", {
-          class: K(ie)
+      ], 2)) : u("", !0),
+      V("div", Le, [
+        V("table", {
+          class: S(we)
         }, [
-          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", Ue, [
+            a(e.$slots, "colgroup", d(g(h.value)))
+          ])) : u("", !0),
+          !s(se) && !s(p) ? (l(), b(Me, {
             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(fe),
+            "some-selected": s(he),
             "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(pe),
+            onToggleSelectAll: s(me)
+          }, 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(Te, { key: 3 }, [
+            a(e.$slots, "body.prepend", d(g(h.value))),
+            C(Re, {
+              items: s(f),
+              headers: K.value,
               "tbody-class": e.tbodyClass,
-              "row-class": s(B),
+              "row-class": s(z),
               "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) => ({
+            }, J({ _: 2 }, [
+              X(e.$slots, (t, i) => ({
                 name: i,
-                fn: x((n) => [
-                  a(e.$slots, i, p(g(n)))
+                fn: Y((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(), b(Ee, {
             key: 4,
-            items: s(m),
-            headers: V.value,
-            "row-class": s(B),
+            items: s(f),
+            headers: K.value,
+            "row-class": s(z),
             "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) => ({
+          }, J({ _: 2 }, [
+            X(e.$slots, (t, i) => ({
               name: i,
-              fn: x((n) => [
-                a(e.$slots, i, p(g(n)))
+              fn: Y((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", He, [
+            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", Oe, [
+          C(Ve, {
             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(ee) ? a(e.$slots, "footer", d(B({ key: 2 }, h.value))) : (l(), c("div", We, [
+        C(Ae, {
+          "items-length": s(ae).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(le),
+          "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(), b(Be, {
         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) => $e(v) ? v.value = t : null),
+        onApplyFilters: s(ce),
+        onClearFilters: s(ue),
+        activeFilters: s(de).byColumn
+      }, null, 8, ["filters", "modelValue", "onApplyFilters", "onClearFilters", "activeFilters"])) : u("", !0)
     ], 16));
   }
 };
 export {
-  Xe as default
+  us 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.313",
   "type": "module",
   "description": "Una librería de componentes Vue.js con Tailwind CSS",
   "main": "dist/index.js",