vlite3 1.1.4 → 1.1.5

package/components/DataTable/DataTable.vue.js

@@ -1,34 +1,26 @@
-import { defineComponent as ye, inject as we, computed as i, ref as y, watch as g, openBlock as r, createElementBlock as u, createBlock as U, normalizeClass as w, createSlots as j, withCtx as x, renderSlot as $, createVNode as B, createCommentVNode as W, createElementVNode as m, Fragment as A, renderList as E, normalizeStyle as L, isMemoSame as Y, mergeProps as X, unref as q } from "vue";
-import Pe from "../CheckBox.vue.js";
-import Ce from "../Button.vue.js";
-import Se from "../ConfirmationModal.vue.js";
-import ke from "../Pagination/Pagination.vue.js";
-import Ie from "../Empty/Empty.vue.js";
-import Te from "./DataTableHeader.vue.js";
-import De from "./DataTableRow.vue.js";
-import xe from "./DataTableToolbar.vue.js";
-import { $t as P } from "../../utils/i18n.js";
-import { SCREEN_CONTEXT_KEY as $e } from "./types.js";
-const Be = { class: "space-y-6.5" }, Ee = { class: "overflow-x-auto w-full" }, Re = { class: "hover:bg-transparent" }, ze = {
+import { defineComponent as he, inject as pe, computed as i, ref as k, watch as S, openBlock as d, createElementBlock as u, createElementVNode as m, normalizeClass as x, createVNode as D, createCommentVNode as V, Fragment as B, renderList as I, createBlock as M, normalizeStyle as j, isMemoSame as F, createSlots as K, withCtx as U, renderSlot as W, mergeProps as O, unref as L } from "vue";
+import be from "../CheckBox.vue.js";
+import we from "../ConfirmationModal.vue.js";
+import ye from "../Pagination/Pagination.vue.js";
+import Pe from "../Empty/Empty.vue.js";
+import Ce from "./DataTableHeader.vue.js";
+import ke from "./DataTableRow.vue.js";
+import { $t as p } from "../../utils/i18n.js";
+import { SCREEN_CONTEXT_KEY as Se } from "./types.js";
+const xe = { class: "space-y-6.5" }, Ie = { class: "overflow-x-auto w-full" }, Te = { class: "hover:bg-transparent" }, De = {
   key: 0,
   scope: "col",
   class: "w-[40px] px-0 text-center font-medium text-muted-foreground",
   style: { width: "40px" }
-}, We = { class: "flex items-center justify-center" }, Ae = { class: "[&_tr:last-child]:border-0" }, Ne = {
+}, Be = { class: "flex items-center justify-center" }, Ee = { class: "[&_tr:last-child]:border-0" }, ze = {
   key: 0,
   class: "w-[48px] px-0 py-4 align-middle text-center",
   style: { width: "48px" }
-}, Ve = { key: 2 }, Me = ["colspan"], Ue = { key: 1 }, Qe = /* @__PURE__ */ ye({
+}, Re = { key: 2 }, $e = ["colspan"], Ve = { key: 0 }, Le = /* @__PURE__ */ he({
   __name: "DataTable",
   props: {
     rows: { default: () => [] },
     selectedRows: { default: () => [] },
-    search: { default: "" },
-    showSearch: { type: Boolean, default: !1 },
-    searchPlaceholder: {},
-    searchPlaceholderI18n: {},
-    toolbarClass: {},
-    toolbarSearchClass: {},
     headers: { default: () => [] },
     keyField: { default: "auto" },
     loading: { type: Boolean, default: !1 },
@@ -54,325 +46,282 @@ const Be = { class: "space-y-6.5" }, Ee = { class: "overflow-x-auto w-full" }, R
     tableClass: {},
     class: {},
     sortable: { type: Boolean, default: !1 },
-    variant: { default: "default" }
+    variant: { default: "default" },
+    headerVariant: { default: "default" },
+    size: { default: "md" }
   },
   emits: ["change", "select", "rowClick", "update:itemsPerPage", "update:selectedRows", "delete"],
-  setup(o, { emit: G }) {
-    const H = (e, t) => {
+  setup(n, { emit: Y }) {
+    const X = (e, t) => {
       if (!(!e || !t))
-        return t.includes(".") ? t.split(".").reduce((l, n) => l?.[n], e) : e[t];
-    }, d = (e, t) => H(e, t), J = (e, t) => {
+        return t.includes(".") ? t.split(".").reduce((l, o) => l?.[o], e) : e[t];
+    }, c = (e, t) => X(e, t), q = (e, t) => {
       const l = ["id", "_id"];
       if (t && t !== "auto") return t;
       if (e && e.length > 0) {
-        for (const n of l)
-          if (n in e[0]) return n;
+        for (const o of l)
+          if (o in e[0]) return o;
       }
       return "_id";
-    }, Q = (e) => e.sortKey || e.field, a = o, b = G, R = we($e, null), F = i(() => R?.disableSearch ? !1 : a.showSearch), C = i(() => a.hideSelectable ? !1 : R ? R.forceSelectable : !0), c = i(() => J(a.rows, a.keyField)), v = y({ field: "", order: "" }), S = y(
+    }, G = (e) => e.sortKey || e.field, a = n, g = Y, E = pe(Se, null), b = i(() => a.hideSelectable ? !1 : E ? E.forceSelectable : !0), r = i(() => q(a.rows, a.keyField)), v = k({ field: "", order: "" }), w = k(
       a.pageInfo?.itemsPerPage || a.paginationProps?.itemsPerPage || 10
-    ), h = y(a.pageInfo?.currentPage || 1), p = y(a.search || ""), k = y(!1), Z = i(() => a.loading);
-    g(
-      () => a.search,
-      (e) => {
-        e !== void 0 && e !== p.value && (p.value = e);
-      }
-    );
-    let N = null;
-    g(p, () => {
-      N && clearTimeout(N), N = setTimeout(() => {
-        h.value = 1, z();
-      }, 300);
-    }), g(
+    ), h = k(a.pageInfo?.currentPage || 1), T = k(!1), H = i(() => a.loading);
+    S(
       () => a.pageInfo?.itemsPerPage,
       (e) => {
-        e !== void 0 && (S.value = e);
+        e !== void 0 && (w.value = e);
       }
-    ), g(
+    ), S(
       () => a.paginationProps?.itemsPerPage,
       (e) => {
-        e !== void 0 && (S.value = e);
+        e !== void 0 && (w.value = e);
       }
-    ), g(
+    ), S(
       () => a.pageInfo?.currentPage,
       (e) => {
         e && (h.value = e);
       }
     );
-    const s = y(/* @__PURE__ */ new Set());
-    g(
+    const s = k(/* @__PURE__ */ new Set());
+    S(
       () => a.selectedRows,
       (e) => {
-        const t = new Set((e || []).map((l) => d(l, c.value)));
+        const t = new Set((e || []).map((l) => c(l, r.value)));
         (t.size !== s.value.size || [...t].some((l) => !s.value.has(l))) && (s.value = t);
       },
       { immediate: !0, deep: !0 }
     );
-    const V = i(
-      () => a.rows.length > 0 && a.rows.every((e) => s.value.has(d(e, c.value)))
-    ), K = i(() => s.value.size > 0 && !V.value), _ = i(() => {
+    const z = i(
+      () => a.rows.length > 0 && a.rows.every((e) => s.value.has(c(e, r.value)))
+    ), A = i(() => s.value.size > 0 && !z.value), J = i(() => {
       const e = [...a.selectedRows || [], ...a.rows], t = /* @__PURE__ */ new Map();
-      return e.forEach((l) => t.set(d(l, c.value), l)), Array.from(s.value).map((l) => t.get(l)).filter(Boolean);
-    }), ee = (e) => {
+      return e.forEach((l) => t.set(c(l, r.value), l)), Array.from(s.value).map((l) => t.get(l)).filter(Boolean);
+    }), Q = (e) => {
       const t = new Set(s.value);
-      e ? a.rows.forEach((l) => t.add(d(l, c.value))) : a.rows.forEach((l) => t.delete(d(l, c.value))), s.value = t, O();
-    }, te = (e) => {
+      e ? a.rows.forEach((l) => t.add(c(l, r.value))) : a.rows.forEach((l) => t.delete(c(l, r.value))), s.value = t, N();
+    }, Z = (e) => {
       const t = new Set(s.value);
-      t.has(e) ? t.delete(e) : t.add(e), s.value = t, O();
-    }, O = () => {
+      t.has(e) ? t.delete(e) : t.add(e), s.value = t, N();
+    }, N = () => {
       const e = /* @__PURE__ */ new Set(), t = [];
       a.rows.forEach((l) => {
-        const n = d(l, c.value);
-        s.value.has(n) && (t.push(l), e.add(n));
+        const o = c(l, r.value);
+        s.value.has(o) && (t.push(l), e.add(o));
       }), (a.selectedRows || []).forEach((l) => {
-        const n = d(l, c.value);
-        !e.has(n) && s.value.has(n) && (t.push(l), e.add(n));
-      }), b("select", {
+        const o = c(l, r.value);
+        !e.has(o) && s.value.has(o) && (t.push(l), e.add(o));
+      }), g("select", {
         selected: t,
-        all: V.value,
-        indeterminate: K.value
-      }), b("update:selectedRows", t);
-    }, le = (e) => {
-      const t = a.headers.find((n) => n.field === e), l = t ? Q(t) : e;
-      v.value.field === l ? v.value.order = v.value.order === "asc" ? "desc" : "asc" : (v.value.field = l, v.value.order = "asc"), h.value = 1, z();
-    }, ae = (e) => {
-      h.value = e, z();
-    }, oe = (e) => {
-      S.value = e, h.value = 1, b("update:itemsPerPage", e), z();
-    }, se = (e) => b("rowClick", e), ne = () => {
-      b("delete", _.value), k.value = !1;
+        all: z.value,
+        indeterminate: A.value
+      }), g("update:selectedRows", t);
+    }, _ = (e) => {
+      const t = a.headers.find((o) => o.field === e), l = t ? G(t) : e;
+      v.value.field === l ? v.value.order = v.value.order === "asc" ? "desc" : "asc" : (v.value.field = l, v.value.order = "asc"), h.value = 1, $();
+    }, ee = (e) => {
+      h.value = e, $();
+    }, te = (e) => {
+      w.value = e, h.value = 1, g("update:itemsPerPage", e), $();
+    }, le = (e) => g("rowClick", e), ae = () => {
+      g("delete", J.value), T.value = !1;
     };
-    let M = null;
-    const z = () => {
-      M && clearTimeout(M), M = setTimeout(() => {
+    let R = null;
+    const $ = () => {
+      R && clearTimeout(R), R = setTimeout(() => {
         const e = {
-          pagination: { page: h.value, limit: S.value },
+          pagination: { page: h.value, limit: w.value },
           sort: { ...v.value },
-          search: p.value,
           filter: {}
         };
-        b("change", e), R?.onTableChange?.(e);
+        g("change", e), E?.onTableChange?.(e);
       }, 10);
     };
-    g(
+    S(
       () => a.rows,
       () => {
-        const e = new Set(a.rows.map((t) => d(t, c.value)));
+        const e = new Set(a.rows.map((t) => c(t, r.value)));
         s.value = new Set([...s.value].filter((t) => e.has(t)));
       }
     );
-    const ie = i(() => [
+    const ne = i(() => [
       "w-full flex flex-col",
       a.variant === "raised" ? "bg-background shadow-sm p-2 rounded-lg" : "bg-background rounded",
       "overflow-hidden",
       a.bordered ? "border border-border" : "",
       a.class
-    ].join(" ")), re = i(() => ["w-full caption-bottom -text-fs-1", a.tableClass].join(" ")), ce = (e) => {
+    ].join(" ")), se = i(() => ["w-full caption-bottom -text-fs-1", a.tableClass].join(" ")), oe = (e) => {
       const t = {};
       return e.width && !/(?:^|\s|:)w-/.test(e.width) && (t.width = e.width), e.minWidth && !/(?:^|\s|:)min-w-/.test(e.minWidth) && (t.minWidth = e.minWidth), t;
-    }, de = (e) => {
+    }, ie = (e) => {
       const t = [];
       return e.width && /(?:^|\s|:)w-/.test(e.width) && t.push(e.width), e.minWidth && /(?:^|\s|:)min-w-/.test(e.minWidth) && t.push(e.minWidth), t.join(" ");
-    }, ue = i(
-      () => a.emptyTitleI18n ? P(a.emptyTitleI18n) : a.emptyTitle
-    ), me = i(
-      () => a.emptyDescriptionI18n ? P(a.emptyDescriptionI18n) : a.emptyDescription
-    ), fe = i(() => {
-      const e = P("vlite.dataTable.confirmDeleteTitle");
+    }, re = i(
+      () => a.emptyTitleI18n ? p(a.emptyTitleI18n) : a.emptyTitle
+    ), de = i(
+      () => a.emptyDescriptionI18n ? p(a.emptyDescriptionI18n) : a.emptyDescription
+    ), ce = i(() => {
+      const e = p("vlite.dataTable.confirmDeleteTitle");
       return e !== "vlite.dataTable.confirmDeleteTitle" ? e : "Confirm Deletion";
-    }), ve = i(() => {
-      const e = P("vlite.dataTable.confirmDeleteDesc");
+    }), ue = i(() => {
+      const e = p("vlite.dataTable.confirmDeleteDesc");
       return e !== "vlite.dataTable.confirmDeleteDesc" ? e : "Are you sure you want to delete the selected items?";
-    }), he = i(() => {
-      const e = P("vlite.dataTable.deleteBtn");
+    }), me = i(() => {
+      const e = p("vlite.dataTable.deleteBtn");
       return e !== "vlite.dataTable.deleteBtn" ? e : "Delete";
-    }), ge = i(() => {
-      const e = P("vlite.dataTable.cancelBtn");
+    }), fe = i(() => {
+      const e = p("vlite.dataTable.cancelBtn");
       return e !== "vlite.dataTable.cancelBtn" ? e : "Cancel";
     });
-    return (e, t) => (r(), u("div", Be, [
-      F.value || e.$slots?.["toolbar-left"] || e.$slots?.["toolbar-right"] ? (r(), U(xe, {
-        key: 0,
-        modelValue: p.value,
-        "onUpdate:modelValue": t[1] || (t[1] = (l) => p.value = l),
-        "show-search": F.value,
-        placeholder: o.searchPlaceholder,
-        placeholderI18n: o.searchPlaceholderI18n,
-        class: w(o.toolbarClass),
-        "search-class": o.toolbarSearchClass
-      }, j({ _: 2 }, [
-        e.$slots?.["toolbar-left"] ? {
-          name: "left",
-          fn: x(() => [
-            $(e.$slots, "toolbar-left")
-          ]),
-          key: "0"
-        } : void 0,
-        s.value.size > 0 ? {
-          name: "delete",
-          fn: x(() => [
-            B(Ce, {
-              rounded: "full",
-              variant: "outline",
-              size: "lg",
-              icon: "lucide:trash-2",
-              onClick: t[0] || (t[0] = (l) => k.value = !0)
-            })
-          ]),
-          key: "1"
-        } : void 0,
-        e.$slots?.["toolbar-right"] ? {
-          name: "right",
-          fn: x(() => [
-            $(e.$slots, "toolbar-right")
-          ]),
-          key: "2"
-        } : void 0
-      ]), 1032, ["modelValue", "show-search", "placeholder", "placeholderI18n", "class", "search-class"])) : W("", !0),
+    return (e, t) => (d(), u("div", xe, [
       m("div", {
-        class: w(ie.value)
+        class: x(ne.value)
       }, [
-        m("div", Ee, [
+        m("div", Ie, [
           m("table", {
-            class: w([re.value, "data-table"])
+            class: x([se.value, "data-table"])
           }, [
             m("thead", {
-              class: w([
-                "[&_tr]:border-b [&_tr]:border-border bg-muted",
-                o.variant === "raised" ? "[&_th:first-child]:rounded-tl-lg [&_th:last-child]:rounded-tr-lg" : ""
+              class: x([
+                "[&_tr]:border-b [&_tr]:border-border",
+                n.headerVariant === "minimal" ? "bg-transparent" : "bg-muted",
+                n.variant === "raised" ? "[&_th:first-child]:rounded-tl-lg [&_th:last-child]:rounded-tr-lg" : ""
               ])
             }, [
-              m("tr", Re, [
-                C.value ? (r(), u("th", ze, [
-                  m("div", We, [
-                    B(Pe, {
-                      "model-value": V.value,
-                      indeterminate: K.value,
+              m("tr", Te, [
+                b.value ? (d(), u("th", De, [
+                  m("div", Be, [
+                    D(be, {
+                      "model-value": z.value,
+                      indeterminate: A.value,
                       size: "xs",
-                      "onUpdate:modelValue": ee
+                      "onUpdate:modelValue": Q
                     }, null, 8, ["model-value", "indeterminate"])
                   ])
-                ])) : W("", !0),
-                (r(!0), u(A, null, E(o.headers, (l) => (r(), U(Te, {
+                ])) : V("", !0),
+                (d(!0), u(B, null, I(n.headers, (l) => (d(), M(Ce, {
                   key: l.field,
                   header: l,
                   "sort-config": v.value,
-                  compact: o.compact,
-                  "table-sortable": o.sortable,
-                  onSort: le,
-                  class: w(["last:pr-5!", de(l)]),
-                  style: L(ce(l))
-                }, null, 8, ["header", "sort-config", "compact", "table-sortable", "class", "style"]))), 128))
+                  compact: n.compact,
+                  size: n.size,
+                  "table-sortable": n.sortable,
+                  onSort: _,
+                  class: x(["last:pr-5!", ie(l)]),
+                  style: j(oe(l))
+                }, null, 8, ["header", "sort-config", "compact", "size", "table-sortable", "class", "style"]))), 128))
               ])
             ], 2),
-            m("tbody", Ae, [
-              Z.value ? (r(!0), u(A, { key: 0 }, E(Math.min(S.value, 15), (l, n, be, f) => {
-                const I = [];
-                if (f && f.key === "skeleton-" + l && Y(f, I)) return f;
-                const T = (r(), u("tr", {
+            m("tbody", Ee, [
+              H.value ? (d(!0), u(B, { key: 0 }, I(Math.min(w.value, 15), (l, o, ve, f) => {
+                const y = [];
+                if (f && f.key === "skeleton-" + l && F(f, y)) return f;
+                const P = (d(), u("tr", {
                   key: "skeleton-" + l,
                   class: "border-b border-border/70 bg-background transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"
                 }, [
-                  C.value ? (r(), u("td", Ne, [...t[8] || (t[8] = [
+                  b.value ? (d(), u("td", ze, [...t[6] || (t[6] = [
                     m("div", { class: "flex items-center justify-center" }, [
                       m("div", { class: "h-4 w-4 rounded-[4px] bg-muted/50 animate-pulse" })
                     ], -1)
-                  ])])) : W("", !0),
-                  (r(!0), u(A, null, E(o.headers, (D) => (r(), u("td", {
-                    key: D.field,
-                    class: w(["p-5! align-middle last:pr-6!", [D.hideOnMobile ? "hidden md:table-cell" : ""]])
+                  ])])) : V("", !0),
+                  (d(!0), u(B, null, I(n.headers, (C) => (d(), u("td", {
+                    key: C.field,
+                    class: x(["p-5! align-middle last:pr-6!", [C.hideOnMobile ? "hidden md:table-cell" : ""]])
                   }, [
                     m("div", {
                       class: "rounded-md bg-muted/50 animate-pulse h-4",
-                      style: L({ width: `${50 + Math.random() * 40}%` })
+                      style: j({ width: `${50 + Math.random() * 40}%` })
                     }, null, 4)
                   ], 2))), 128))
                 ]));
-                return T.memo = I, T;
-              }, t, 2), 128)) : o.rows.length > 0 ? (r(!0), u(A, { key: 1 }, E(o.rows, (l, n, be, f) => {
-                const I = [
+                return P.memo = y, P;
+              }, t, 0), 128)) : n.rows.length > 0 ? (d(!0), u(B, { key: 1 }, I(n.rows, (l, o, ve, f) => {
+                const y = [
                   l,
-                  s.value.has(d(l, c.value)),
-                  C.value,
-                  o.compact,
-                  o.striped,
-                  o.hoverable
+                  s.value.has(c(l, r.value)),
+                  b.value,
+                  n.compact,
+                  n.size,
+                  n.striped,
+                  n.hoverable
                 ];
-                if (f && f.key === d(l, c.value) && Y(f, I)) return f;
-                const T = (r(), U(De, {
-                  key: d(l, c.value),
+                if (f && f.key === c(l, r.value) && F(f, y)) return f;
+                const P = (d(), M(ke, {
+                  key: c(l, r.value),
                   row: l,
-                  headers: o.headers,
-                  index: n,
-                  "key-field": c.value,
-                  selectable: C.value,
-                  "is-selected": s.value.has(d(l, c.value)),
-                  hoverable: o.hoverable,
-                  striped: o.striped,
-                  compact: o.compact,
-                  onSelect: te,
-                  onRowClick: se,
+                  headers: n.headers,
+                  index: o,
+                  "key-field": r.value,
+                  selectable: b.value,
+                  "is-selected": s.value.has(c(l, r.value)),
+                  hoverable: n.hoverable,
+                  striped: n.striped,
+                  compact: n.compact,
+                  size: n.size,
+                  onSelect: Z,
+                  onRowClick: le,
                   class: "[&_td:last-child]:pr-3.5!"
-                }, j({ _: 2 }, [
-                  E(o.headers, (D) => ({
-                    name: D.field,
-                    fn: x((pe) => [
-                      $(e.$slots, D.field, X({ ref_for: !0 }, pe))
+                }, K({ _: 2 }, [
+                  I(n.headers, (C) => ({
+                    name: C.field,
+                    fn: U((ge) => [
+                      W(e.$slots, C.field, O({ ref_for: !0 }, ge))
                     ])
                   }))
-                ]), 1032, ["row", "headers", "index", "key-field", "selectable", "is-selected", "hoverable", "striped", "compact"]));
-                return T.memo = I, T;
-              }, t, 4), 128)) : (r(), u("tr", Ve, [
+                ]), 1032, ["row", "headers", "index", "key-field", "selectable", "is-selected", "hoverable", "striped", "compact", "size"]));
+                return P.memo = y, P;
+              }, t, 2), 128)) : (d(), u("tr", Re, [
                 m("td", {
-                  colspan: C.value ? o.headers.length + 1 : o.headers.length,
+                  colspan: b.value ? n.headers.length + 1 : n.headers.length,
                   class: "align-middle hover:bg-transparent"
                 }, [
-                  $(e.$slots, "empty", {}, () => [
-                    B(q(Ie), {
-                      title: ue.value,
-                      description: me.value,
-                      icon: o.emptyIcon,
-                      class: "border-none! bg-transparent! py-16!"
-                    }, j({ _: 2 }, [
+                  W(e.$slots, "empty", {}, () => [
+                    D(L(Pe), {
+                      title: re.value,
+                      description: de.value,
+                      icon: n.emptyIcon,
+                      variant: "variant12",
+                      class: "bg-transparent! py-8!"
+                    }, K({ _: 2 }, [
                       e.$slots["empty-action"] ? {
                         name: "action",
-                        fn: x(() => [
-                          $(e.$slots, "empty-action")
+                        fn: U(() => [
+                          W(e.$slots, "empty-action")
                         ]),
                         key: "0"
                       } : void 0
                     ]), 1032, ["title", "description", "icon"])
                   ])
-                ], 8, Me)
+                ], 8, $e)
               ]))
             ])
           ], 2)
         ])
       ], 2),
-      o.showPagination && o.pageInfo && o.pageInfo.totalPages > 1 ? (r(), u("div", Ue, [
-        B(q(ke), X({
+      n.showPagination && n.pageInfo && n.pageInfo.totalPages > 1 ? (d(), u("div", Ve, [
+        D(L(ye), O({
           "current-page": h.value,
-          "total-pages": o.pageInfo.totalPages,
-          "total-items": o.pageInfo.totalItems
-        }, o.paginationProps, {
-          onChange: ae,
-          "onUpdate:itemsPerPage": oe
+          "total-pages": n.pageInfo.totalPages,
+          "total-items": n.pageInfo.totalItems
+        }, n.paginationProps, {
+          onChange: ee,
+          "onUpdate:itemsPerPage": te
         }), null, 16, ["current-page", "total-pages", "total-items"])
-      ])) : W("", !0),
-      B(Se, {
-        show: k.value,
-        "onUpdate:show": t[6] || (t[6] = (l) => k.value = l),
-        title: fe.value,
-        description: ve.value,
-        "confirm-text": he.value,
-        "cancel-text": ge.value,
+      ])) : V("", !0),
+      D(we, {
+        show: T.value,
+        "onUpdate:show": t[4] || (t[4] = (l) => T.value = l),
+        title: ce.value,
+        description: ue.value,
+        "confirm-text": me.value,
+        "cancel-text": fe.value,
         variant: "danger",
-        onConfirm: ne,
-        onCancel: t[7] || (t[7] = (l) => k.value = !1)
+        onConfirm: ae,
+        onCancel: t[5] || (t[5] = (l) => T.value = !1)
       }, null, 8, ["show", "title", "description", "confirm-text", "cancel-text"])
     ]));
   }
 });
 export {
-  Qe as default
+  Le as default
 };

package/components/DataTable/DataTableHeader.vue.d.ts

@@ -3,6 +3,7 @@ interface Props {
     header: TableHeader;
     sortConfig?: SortConfig;
     compact?: boolean;
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     tableSortable?: boolean;
 }
 declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
@@ -10,6 +11,7 @@ declare const _default: import('vue').DefineComponent<Props, {}, {}, {}, {}, imp
 }, string, import('vue').PublicProps, Readonly<Props> & Readonly<{
     onSort?: (field: string) => any;
 }>, {
+    size: "xs" | "sm" | "md" | "lg";
     compact: boolean;
     tableSortable: boolean;
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLTableCellElement>;

package/components/DataTable/DataTableHeader.vue.js

@@ -1,51 +1,52 @@
-import { defineComponent as g, computed as o, openBlock as n, createElementBlock as l, normalizeClass as r, createElementVNode as s, toDisplayString as x, createVNode as b, createCommentVNode as y } from "vue";
-import v from "../Icon.vue.js";
-import { $t as C } from "../../utils/i18n.js";
-const w = { class: "text-xs font-bold! uppercase tracking-wider text-gray-900 truncate" }, S = {
+import { defineComponent as x, computed as r, openBlock as n, createElementBlock as l, normalizeClass as o, createElementVNode as s, toDisplayString as y, createVNode as b, createCommentVNode as v } from "vue";
+import C from "../Icon.vue.js";
+import { $t as w } from "../../utils/i18n.js";
+const S = { class: "text-xs font-bold! uppercase tracking-wider text-gray-900 truncate" }, k = {
   key: 0,
   class: "w-4 h-4 shrink-0"
-}, M = /* @__PURE__ */ g({
+}, M = /* @__PURE__ */ x({
   __name: "DataTableHeader",
   props: {
     header: {},
     sortConfig: {},
     compact: { type: Boolean, default: !1 },
+    size: { default: "md" },
     tableSortable: { type: Boolean, default: !0 }
   },
   emits: ["sort"],
   setup(t, { emit: i }) {
-    const e = t, c = i, a = o(() => e.header.sortKey || e.header.field), d = o(
+    const e = t, c = i, a = r(() => e.header.sortKey || e.header.field), d = r(
       () => e.sortConfig?.field === a.value && e.sortConfig?.order
-    ), f = o(() => !e.sortConfig || e.sortConfig.field !== a.value ? "lucide:chevrons-up-down" : e.sortConfig.order === "asc" ? "lucide:arrow-up" : e.sortConfig.order === "desc" ? "lucide:arrow-down" : "lucide:chevrons-up-down"), u = () => {
+    ), u = r(() => !e.sortConfig || e.sortConfig.field !== a.value ? "lucide:chevrons-up-down" : e.sortConfig.order === "asc" ? "lucide:arrow-up" : e.sortConfig.order === "desc" ? "lucide:arrow-down" : "lucide:chevrons-up-down"), f = () => {
       e.tableSortable && e.header.sortable !== !1 && c("sort", e.header.field);
-    }, h = o(() => ({
+    }, h = r(() => ({
       left: "justify-start text-left",
       center: "justify-center text-center",
       right: "justify-end text-right"
-    })[e.header.align || "left"]), m = o(
-      () => e.header.titleI18n ? C(e.header.titleI18n) : e.header.title
-    );
-    return (p, k) => (n(), l("th", {
+    })[e.header.align || "left"]), m = r(
+      () => e.header.titleI18n ? w(e.header.titleI18n) : e.header.title
+    ), p = r(() => e.size === "xs" || e.compact ? "py-1.5!" : e.size === "sm" ? "py-2!" : e.size === "lg" ? "py-4!" : "py-3!");
+    return (g, z) => (n(), l("th", {
       scope: "col",
-      class: r(["px-3 text-left align-middle font-medium text-muted-foreground transition-colors [&:has([role=checkbox])]:pr-0 overflow-hidden max-w-[400px]", [
-        t.compact ? "py-2.5!" : "py-3!",
+      class: o(["group/th px-3 text-left align-middle font-medium text-muted-foreground transition-colors [&:has([role=checkbox])]:pr-0 overflow-hidden max-w-[400px]", [
+        p.value,
         t.header.sortable !== !1 && t.tableSortable ? "cursor-pointer hover:bg-muted/50" : "",
         t.header.hideOnMobile ? "hidden md:table-cell" : ""
       ]]),
-      onClick: u
+      onClick: f
     }, [
       s("div", {
-        class: r(["flex items-center gap-2 space-x-2", h.value])
+        class: o(["flex items-center gap-2 space-x-2", h.value])
       }, [
-        s("span", w, x(m.value), 1),
-        t.tableSortable && t.header.sortable !== !1 ? (n(), l("span", S, [
-          b(v, {
-            icon: f.value,
-            class: r(["w-3.5 h-3.5 transition-all text-muted-foreground mt-0.5", [
-              d.value ? "opacity-100 text-foreground" : "opacity-0 group-hover:opacity-100"
+        s("span", S, y(m.value), 1),
+        t.tableSortable && t.header.sortable !== !1 ? (n(), l("span", k, [
+          b(C, {
+            icon: u.value,
+            class: o(["w-3.5 h-3.5 transition-all text-muted-foreground mt-0.5", [
+              d.value ? "opacity-100 text-foreground" : "opacity-0 group-hover/th:opacity-100"
             ]])
           }, null, 8, ["icon", "class"])
-        ])) : y("", !0)
+        ])) : v("", !0)
       ], 2)
     ], 2));
   }