adverich-kun-ui 0.1.167 → 0.1.168

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

@@ -1,11 +1,11 @@
-import { createElementBlock as o, openBlock as l, normalizeClass as a, createElementVNode as u, createCommentVNode as m, renderSlot as g, Fragment as w, renderList as B, normalizeStyle as A, toDisplayString as k, createBlock as E, resolveDynamicComponent as T } from "vue";
-import v from "../../../../icons/IconArrowUp.vue.js";
-import $ from "../../../../icons/IconArrowDown.vue.js";
-import D from "../../../../icons/IconArrowDownUp.vue.js";
-const z = { key: 0 }, L = { key: 1 }, O = ["checked"], I = ["onClick"], N = {
+import { createElementBlock as n, openBlock as o, normalizeClass as a, createElementVNode as y, createCommentVNode as d, renderSlot as g, Fragment as b, renderList as S, normalizeStyle as A, toDisplayString as m, createBlock as w, resolveDynamicComponent as v } from "vue";
+import E from "../../../../icons/IconArrowUp.vue.js";
+import T from "../../../../icons/IconArrowDown.vue.js";
+import $ from "../../../../icons/IconArrowDownUp.vue.js";
+const D = { key: 0 }, z = { key: 1 }, L = ["checked"], O = ["onClick"], I = {
   key: 0,
   class: "inline-flex items-center gap-1 ml-1"
-}, U = "bg-slate-200 dark:bg-slate-800 sticky top-0 z-5", V = "", j = "px-3 py-2 text-xs font-medium text-slate-700 dark:text-slate-300 uppercase tracking-wider", G = {
+}, N = "bg-slate-200 dark:bg-slate-800 sticky top-0 z-5", U = "", V = "px-3 py-2 text-xs font-medium text-slate-700 dark:text-slate-300 uppercase tracking-wider", q = {
   __name: "KunTableHeaders",
   props: {
     headers: Array,
@@ -22,74 +22,78 @@ const z = { key: 0 }, L = { key: 1 }, O = ["checked"], I = ["onClick"], N = {
     actionLabel: String
   },
   emits: ["toggle-select-all", "sort", "expandAll", "collapseAll"],
-  setup(n, { emit: y }) {
-    const r = n, i = y;
-    function h() {
-      i("toggle-select-all");
+  setup(r, { emit: k }) {
+    const l = r, c = k;
+    function f() {
+      c("toggle-select-all");
     }
-    function p(s) {
-      var c;
-      if (!s.sortable) return;
-      const t = (c = r.sortBy) == null ? void 0 : c.find((S) => S.key === s.value), e = (t == null ? void 0 : t.order) === "asc" ? "desc" : "asc";
-      i("sort", { key: s.value, order: e });
+    function p(t) {
+      if (!t.sortable) return;
+      let s = null;
+      Array.isArray(l.sortBy) ? s = l.sortBy.find((u) => u.key === t.value) : typeof l.sortBy == "string" && (s = l.sortBy === t.value ? { key: t.value, order: "asc" } : null);
+      const e = (s == null ? void 0 : s.order) === "asc" ? "desc" : "asc";
+      c("sort", { key: t.value, order: e });
     }
-    function x(s) {
-      var t, e;
-      return (e = (t = r.sortBy) == null ? void 0 : t.find((c) => c.key === s.value)) == null ? void 0 : e.order;
+    function h(t) {
+      var s;
+      if (Array.isArray(l.sortBy))
+        return (s = l.sortBy.find((e) => e.key === t.value)) == null ? void 0 : s.order;
+      if (typeof l.sortBy == "string" && l.sortBy === t.value)
+        return "asc";
     }
-    const C = (s) => {
-      const t = x(s);
-      return t ? t === "asc" ? v : $ : D;
-    }, f = [U, r.theadClass], b = [V, r.trClass], d = [j, r.thClass];
-    return (s, t) => (l(), o("thead", {
-      class: a(f)
+    const x = (t) => {
+      const s = h(t);
+      return s ? s === "asc" ? E : T : $;
+    }, C = [N, l.theadClass], B = [U, l.trClass], i = [V, l.thClass];
+    return (t, s) => (o(), n("thead", {
+      class: a(C)
     }, [
-      u("tr", {
-        class: a(b)
+      y("tr", {
+        class: a(B)
       }, [
-        n.showExpand ? (l(), o("th", {
+        r.showExpand ? (o(), n("th", {
           key: 0,
-          class: a([d])
+          class: a([i])
         }, [
-          s.$slots.expandIcon ? g(s.$slots, "expand-icon", { key: 0 }) : (l(), o("button", {
+          t.$slots.expandIcon ? g(t.$slots, "expand-icon", { key: 0 }) : (o(), n("button", {
             key: 1,
-            onClick: t[0] || (t[0] = (e) => n.isExpanded ? i("expandAll") : i("collapseAll"))
+            onClick: s[0] || (s[0] = (e) => r.isExpanded ? c("expandAll") : c("collapseAll"))
           }, [
-            n.isExpanded ? (l(), o("span", z, "−")) : (l(), o("span", L, "+"))
+            r.isExpanded ? (o(), n("span", D, "−")) : (o(), n("span", z, "+"))
           ]))
-        ], 2)) : m("", !0),
-        n.showSelect ? (l(), o("th", {
+        ], 2)) : d("", !0),
+        r.showSelect ? (o(), n("th", {
           key: 1,
-          class: a(d)
+          class: a(i)
         }, [
-          u("input", {
+          y("input", {
             type: "checkbox",
-            checked: n.allSelected,
-            onChange: h,
+            checked: r.allSelected,
+            onChange: f,
             class: "form-checkbox"
-          }, null, 40, O)
-        ])) : m("", !0),
-        (l(!0), o(w, null, B(n.headers, (e) => (l(), o("th", {
+          }, null, 40, L)
+        ])) : d("", !0),
+        (o(!0), n(b, null, S(r.headers, (e) => (o(), n("th", {
           key: e.key,
-          class: a([d, e.headerAlign === "right" ? "text-right" : e.headerAlign === "center" ? "text-center" : "text-left"]),
-          onClick: (c) => p(e),
+          class: a([i, e.headerAlign === "right" ? "text-right" : e.headerAlign === "center" ? "text-center" : "text-left"]),
+          onClick: (u) => p(e),
           style: A({ cursor: e.sortable ? "pointer" : "default" })
         }, [
-          g(s.$slots, `header.${e.key}`, { header: e }, () => [
-            u("span", null, k(e.label ?? e.text), 1),
-            e.sortable ? (l(), o("span", N, [
-              (l(), E(T(C(e)), { class: "w-4 h-4 text-gray-500" }))
-            ])) : m("", !0)
+          g(t.$slots, `header.${e.key}`, { header: e }, () => [
+            y("span", null, m(e.label ?? e.text), 1),
+            e.sortable ? (o(), n("span", I, [
+              (o(), w(v(x(e)), { class: "w-4 h-4 text-gray-500" }))
+            ])) : d("", !0)
           ])
-        ], 14, I))), 128)),
-        n.hasActions ? (l(), o("th", {
+        ], 14, O))), 128)),
+        r.hasActions ? (o(), n("th", {
           key: 2,
-          class: a([[d], "text-center"])
-        }, k(n.actionLabel), 3)) : m("", !0)
+          class: a([[i], "text-center"])
+        }, m(r.actionLabel), 3)) : d("", !0)
       ])
     ]));
   }
 };
 export {
-  G as default
+  q as default
 };

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

@@ -11,7 +11,10 @@ const t = () => ({
   // Features
   itemsPerPage: { type: Number, default: 10 },
   page: { type: Number, default: 1 },
-  sortBy: { type: Array, default: () => [] },
+  sortBy: {
+    type: [Array, String],
+    default: () => []
+  },
   mutliSort: Boolean,
   pageOptions: { type: Array, default: () => [5, 10, 25, 50, 100] },
   searchable: { type: Boolean, default: !1 },

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

@@ -1,47 +1,47 @@
-import { reactive as x, watch as c, computed as f } from "vue";
-function A(y, u, l) {
-  const { page: p, itemsPerPage: g, sortBy: P, mutliSort: m } = y, e = x({
+import { reactive as A, watch as c, computed as f } from "vue";
+function D(v, o, l) {
+  const { page: p, itemsPerPage: g, sortBy: P, mutliSort: B } = v, b = (e) => typeof e == "string" ? [{ key: e, order: "asc" }] : Array.isArray(e) ? e.map((u) => typeof u == "string" ? { key: u, order: "asc" } : u) : [], t = A({
     page: p.value,
     itemsPerPage: g.value,
-    sortBy: [...P.value || []]
+    sortBy: b(P.value)
   });
-  c(() => p.value, (t) => e.page = t), c(() => g.value, (t) => e.itemsPerPage = t), c(() => e.page, (t) => u == null ? void 0 : u("update:page", t)), c(() => e.itemsPerPage, (t) => u == null ? void 0 : u("update:itemsPerPage", t));
-  const d = f(() => (e.page - 1) * e.itemsPerPage), B = f(() => d.value + e.itemsPerPage), v = f(() => Array.isArray(l.value) ? e.sortBy.length ? [...l.value].sort((t, s) => {
-    for (const { key: i, order: o } of e.sortBy) {
-      const n = t[i], r = s[i];
-      if (!(n == null && r == null)) {
-        if (n == null) return o === "asc" ? -1 : 1;
-        if (r == null) return o === "asc" ? 1 : -1;
-        if (n instanceof Date && r instanceof Date) {
-          const a = n.getTime() - r.getTime();
-          if (a !== 0) return o === "asc" ? a : -a;
+  c(() => p.value, (e) => t.page = e), c(() => g.value, (e) => t.itemsPerPage = e), c(() => t.sortBy, (e) => o == null ? void 0 : o("update:sortBy", e)), c(() => t.page, (e) => o == null ? void 0 : o("update:page", e)), c(() => t.itemsPerPage, (e) => o == null ? void 0 : o("update:itemsPerPage", e));
+  const y = f(() => (t.page - 1) * t.itemsPerPage), m = f(() => y.value + t.itemsPerPage), d = f(() => Array.isArray(l.value) ? t.sortBy.length ? [...l.value].sort((e, u) => {
+    for (const { key: i, order: s } of t.sortBy) {
+      const r = e[i], n = u[i];
+      if (!(r == null && n == null)) {
+        if (r == null) return s === "asc" ? -1 : 1;
+        if (n == null) return s === "asc" ? 1 : -1;
+        if (r instanceof Date && n instanceof Date) {
+          const a = r.getTime() - n.getTime();
+          if (a !== 0) return s === "asc" ? a : -a;
           continue;
         }
-        if (typeof n == "number" && typeof r == "number") {
-          const a = n - r;
-          if (a !== 0) return o === "asc" ? a : -a;
+        if (typeof r == "number" && typeof n == "number") {
+          const a = r - n;
+          if (a !== 0) return s === "asc" ? a : -a;
           continue;
         }
-        if (typeof n == "string" && typeof r == "string") {
-          const a = n.localeCompare(r, void 0, { sensitivity: "base" });
-          if (a !== 0) return o === "asc" ? a : -a;
+        if (typeof r == "string" && typeof n == "string") {
+          const a = r.localeCompare(n, void 0, { sensitivity: "base" });
+          if (a !== 0) return s === "asc" ? a : -a;
           continue;
         }
-        if (n !== r) return o === "asc" ? n > r ? 1 : -1 : n < r ? 1 : -1;
+        if (r !== n) return s === "asc" ? r > n ? 1 : -1 : r < n ? 1 : -1;
       }
     }
     return 0;
-  }) : l.value : []), b = f(() => v.value.slice(d.value, B.value));
+  }) : l.value : []), x = f(() => d.value.slice(y.value, m.value));
   return {
-    options: e,
-    paginatedItems: b,
-    updateSort: ({ key: t, order: s }) => {
-      const i = e.sortBy.find((o) => o.key === t);
-      i ? i.order = s : m.value ? e.sortBy.push({ key: t, order: s }) : e.sortBy = [{ key: t, order: s }];
+    options: t,
+    paginatedItems: x,
+    updateSort: ({ key: e, order: u }) => {
+      const i = t.sortBy.find((s) => s.key === e);
+      i ? i.order = u : B.value ? t.sortBy.push({ key: e, order: u }) : t.sortBy = [{ key: e, order: u }];
     },
-    sortedItems: v
+    sortedItems: d
   };
 }
 export {
-  A as default
+  D as default
 };

package/package.json

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