vlite3 1.4.39 → 1.4.41

package/components/DataTable/DataTable.vue.js

@@ -1,26 +1,37 @@
-import { defineComponent as $e, inject as We, computed as r, toRef as _, ref as W, watch as D, shallowRef as Le, onUnmounted as Ve, openBlock as i, createElementBlock as c, createElementVNode as v, normalizeClass as x, unref as u, createCommentVNode as E, Fragment as R, renderList as P, normalizeStyle as j, createVNode as L, createBlock as ee, isMemoSame as te, createSlots as le, withCtx as ne, renderSlot as K, mergeProps as ae } from "vue";
-import Fe from "../CheckBox.vue.js";
-import Ae from "../ConfirmationModal.vue.js";
-import Me from "../Pagination/Pagination.vue.js";
-import Ne from "../Empty/Empty.vue.js";
-import Ue from "./DataTableHeader.vue.js";
-import je from "./DataTableRow.vue.js";
-import { useDataTableTree as Ke } from "./useDataTableTree.js";
-import { $t as I } from "../../utils/i18n.js";
-import { SCREEN_CONTEXT_KEY as Oe } from "./types.js";
-const Ye = { class: "space-y-6.5" }, Xe = { class: "w-full overflow-x-auto overflow-y-hidden" }, qe = { key: 0 }, Ge = {
+import { defineComponent as Me, computed as u, inject as Ae, toRef as me, ref as j, watch as z, shallowRef as Ne, onUnmounted as je, openBlock as i, createElementBlock as d, createElementVNode as m, normalizeClass as x, Fragment as S, renderList as w, createCommentVNode as D, unref as o, isMemoSame as Q, createBlock as Z, createSlots as U, withCtx as K, renderSlot as E, mergeProps as _, createVNode as L, normalizeStyle as ee } from "vue";
+import { useBreakpoints as Ue, breakpointsTailwind as Ke } from "@vueuse/core";
+import Oe from "../CheckBox.vue.js";
+import He from "../ConfirmationModal.vue.js";
+import Ye from "../Pagination/Pagination.vue.js";
+import ve from "../Empty/Empty.vue.js";
+import Xe from "./DataTableHeader.vue.js";
+import fe from "./DataTableRow.vue.js";
+import { useDataTableTree as qe } from "./useDataTableTree.js";
+import { getStackedVisibleHeaders as Ge } from "./dataTableHeaders.js";
+import { $t as R } from "../../utils/i18n.js";
+import { SCREEN_CONTEXT_KEY as Je } from "./types.js";
+const Qe = { class: "space-y-6.5" }, Ze = {
+  key: 0,
+  class: "w-full min-w-0 space-y-3"
+}, _e = { class: "flex items-center gap-2 px-3 py-3 border-b" }, et = {
+  key: 0,
+  class: "h-4 w-4 rounded-[4px] bg-muted animate-pulse"
+}, tt = { class: "flex flex-col gap-2.5 px-3 py-3" }, lt = {
+  key: 2,
+  class: "border rounded-lg bg-background"
+}, nt = { key: 0 }, at = {
   key: 0,
   style: { width: "40px" }
-}, He = { class: "hover:bg-transparent" }, Je = {
+}, st = { class: "hover:bg-transparent" }, ot = {
   key: 0,
   scope: "col",
   class: "w-[40px] px-0 text-center font-medium text-muted-foreground",
   style: { width: "40px" }
-}, Qe = { class: "flex items-center justify-center" }, Ze = { class: "[&_tr:last-child]:border-0" }, _e = {
+}, it = { class: "flex items-center justify-center" }, dt = { class: "[&_tr:last-child]:border-0" }, rt = {
   key: 0,
   class: "w-[48px] px-0 py-4 align-middle text-center",
   style: { width: "48px" }
-}, et = { key: 2 }, tt = ["colspan"], lt = { key: 0 }, ft = /* @__PURE__ */ $e({
+}, ct = { key: 2 }, ut = ["colspan"], mt = { key: 0 }, Pt = /* @__PURE__ */ Me({
   __name: "DataTable",
   props: {
     rows: { default: () => [] },
@@ -48,6 +59,7 @@ const Ye = { class: "space-y-6.5" }, Xe = { class: "w-full overflow-x-auto overf
     bordered: { type: Boolean, default: !0 },
     cellBordered: { type: Boolean, default: !1 },
     compact: { type: Boolean, default: !1 },
+    rounded: { type: Boolean, default: !0 },
     tableClass: {},
     class: {},
     sortable: { type: Boolean, default: !1 },
@@ -55,174 +67,179 @@ const Ye = { class: "space-y-6.5" }, Xe = { class: "w-full overflow-x-auto overf
     headerVariant: { default: "default" },
     size: { default: "md" },
     loadChildren: {},
-    treeIndent: { default: 20 }
+    treeIndent: { default: 20 },
+    responsive: { type: Boolean, default: !0 }
   },
   emits: ["change", "select", "rowClick", "update:itemsPerPage", "update:selectedRows", "delete", "expand"],
-  setup(n, { emit: oe }) {
-    const se = (e, t) => {
-      if (!(!e || !t))
-        return t.includes(".") ? t.split(".").reduce((l, o) => l?.[o], e) : e[t];
-    }, w = (e, t) => se(e, t), ie = (e, t) => {
-      const l = ["id", "_id"];
-      if (t && t !== "auto") return t;
+  setup(n, { emit: ge }) {
+    const he = (e, l) => {
+      if (!(!e || !l))
+        return l.includes(".") ? l.split(".").reduce((t, s) => t?.[s], e) : e[l];
+    }, y = (e, l) => he(e, l), be = (e, l) => {
+      const t = ["id", "_id"];
+      if (l && l !== "auto") return l;
       if (e && e.length > 0) {
-        for (const o of l)
-          if (o in e[0]) return o;
+        for (const s of t)
+          if (s in e[0]) return s;
       }
       return "_id";
-    }, re = (e) => e.sortKey || e.field, a = n, b = oe, V = We(Oe, null), S = r(() => a.hideSelectable ? !1 : V ? V.forceSelectable : !0), h = r(() => ie(a.rows, a.keyField)), {
+    }, we = (e) => e.sortKey || e.field, a = n, ye = Ue(Ke).smaller("md"), O = u(() => a.responsive && ye.value), pe = u(() => Ge(a.headers)), C = ge, H = Ae(Je, null), p = u(() => a.hideSelectable ? !1 : H ? H.forceSelectable : !0), h = u(() => be(a.rows, a.keyField)), {
       isTreeMode: g,
-      flattenVisibleRows: F,
-      allLoadedRows: z,
-      findParentId: O,
-      isExpandable: Y,
-      isExpanded: X,
-      isLoading: q,
-      collectDescendantIds: G,
-      toggleExpand: de,
-      pruneStaleTreeState: ce,
-      getChildren: H
-    } = Ke({
-      rows: _(a, "rows"),
+      flattenVisibleRows: $,
+      allLoadedRows: W,
+      findParentId: te,
+      isExpandable: V,
+      isExpanded: F,
+      isLoading: M,
+      collectDescendantIds: le,
+      toggleExpand: ne,
+      pruneStaleTreeState: ke,
+      getChildren: ae
+    } = qe({
+      rows: me(a, "rows"),
       keyField: h,
-      loadChildren: _(a, "loadChildren"),
-      getRowId: w,
-      onExpand: (e) => b("expand", e)
-    }), p = W({ field: "", order: "" }), T = W(
+      loadChildren: me(a, "loadChildren"),
+      getRowId: y,
+      onExpand: (e) => C("expand", e)
+    }), I = j({ field: "", order: "" }), T = j(
       a.pageInfo?.itemsPerPage || a.paginationProps?.itemsPerPage || 10
-    ), C = W(a.pageInfo?.currentPage || 1), $ = W(!1), ue = r(() => a.loading);
-    D(
+    ), B = j(a.pageInfo?.currentPage || 1), A = j(!1), se = u(() => a.loading);
+    z(
       () => a.pageInfo?.itemsPerPage,
       (e) => {
         e !== void 0 && (T.value = e);
       }
-    ), D(
+    ), z(
       () => a.paginationProps?.itemsPerPage,
       (e) => {
         e !== void 0 && (T.value = e);
       }
-    ), D(
+    ), z(
       () => a.pageInfo?.currentPage,
       (e) => {
-        e && (C.value = e);
+        e && (B.value = e);
       }
     );
-    const s = Le(/* @__PURE__ */ new Set());
-    D(
+    const c = Ne(/* @__PURE__ */ new Set());
+    z(
       () => a.selectedRows,
       (e) => {
-        const t = new Set((e || []).map((l) => w(l, h.value)));
-        (t.size !== s.value.size || [...t].some((l) => !s.value.has(l))) && (s.value = t);
+        const l = new Set((e || []).map((t) => y(t, h.value)));
+        (l.size !== c.value.size || [...l].some((t) => !c.value.has(t))) && (c.value = l);
       },
       { immediate: !0 }
     );
-    const A = r(() => {
+    const Y = u(() => {
       if (!g.value) return a.rows;
-      const e = [], t = (l) => {
-        for (const o of l) {
-          e.push(o);
-          for (const m of H(o)) t([m]);
+      const e = [], l = (t) => {
+        for (const s of t) {
+          e.push(s);
+          for (const v of ae(s)) l([v]);
         }
       };
-      return t(a.rows), e;
-    }), M = r(() => {
-      const e = A.value;
-      return e.length > 0 && e.every((t) => s.value.has(w(t, h.value)));
-    }), J = r(() => s.value.size > 0 && !M.value), me = r(() => {
-      const e = new Map(z.value);
-      return (a.selectedRows || []).forEach((t) => e.set(w(t, h.value), t)), a.rows.forEach((t) => e.set(w(t, h.value), t)), Array.from(s.value).map((t) => e.get(t)).filter(Boolean);
-    }), fe = (e) => {
+      return l(a.rows), e;
+    }), X = u(() => {
+      const e = Y.value;
+      return e.length > 0 && e.every((l) => c.value.has(y(l, h.value)));
+    }), oe = u(() => c.value.size > 0 && !X.value), xe = u(() => {
+      const e = new Map(W.value);
+      return (a.selectedRows || []).forEach((l) => e.set(y(l, h.value), l)), a.rows.forEach((l) => e.set(y(l, h.value), l)), Array.from(c.value).map((l) => e.get(l)).filter(Boolean);
+    }), Se = (e) => {
       if (!g.value) return !1;
-      const t = G(e);
-      if (!t.length) return !1;
-      let l = 0;
-      for (const o of t)
-        s.value.has(o) && l++;
-      return l > 0 && l < t.length;
-    }, Q = r(() => {
+      const l = le(e);
+      if (!l.length) return !1;
+      let t = 0;
+      for (const s of l)
+        c.value.has(s) && t++;
+      return t > 0 && t < l.length;
+    }, N = u(() => {
       const e = /* @__PURE__ */ new Set();
       if (!g.value) return e;
-      for (const t of F.value)
-        fe(t.row) && e.add(t.id);
+      for (const l of $.value)
+        Se(l.row) && e.add(l.id);
       return e;
-    }), ve = (e, t) => {
-      let l = O(e);
-      for (; l != null; ) {
-        const o = z.value.get(l);
-        if (!o) break;
-        const m = H(o).map((f) => w(f, h.value));
-        m.length > 0 && m.every((f) => t.has(f)) ? t.add(l) : t.delete(l), l = O(l);
+    }), Ce = (e, l) => {
+      let t = te(e);
+      for (; t != null; ) {
+        const s = W.value.get(t);
+        if (!s) break;
+        const v = ae(s).map((f) => y(f, h.value));
+        v.length > 0 && v.every((f) => l.has(f)) ? l.add(t) : l.delete(t), t = te(t);
       }
-    }, he = (e) => {
-      const t = new Set(s.value);
-      A.value.forEach((l) => {
-        const o = w(l, h.value);
-        e ? t.add(o) : t.delete(o);
-      }), s.value = t, N();
-    }, ge = (e) => {
-      const t = new Set(s.value), l = !t.has(e);
+    }, Ie = (e) => {
+      const l = new Set(c.value);
+      Y.value.forEach((t) => {
+        const s = y(t, h.value);
+        e ? l.add(s) : l.delete(s);
+      }), c.value = l, q();
+    }, ie = (e) => {
+      const l = new Set(c.value), t = !l.has(e);
       if (g.value) {
-        const o = z.value.get(e);
-        if (o) {
-          const m = (d, f) => {
-            f ? t.add(d) : t.delete(d);
+        const s = W.value.get(e);
+        if (s) {
+          const v = (r, f) => {
+            f ? l.add(r) : l.delete(r);
           };
-          m(e, l), G(o).forEach((d) => m(d, l)), ve(e, t), s.value = t, N();
+          v(e, t), le(s).forEach((r) => v(r, t)), Ce(e, l), c.value = l, q();
           return;
         }
       }
-      t.has(e) ? t.delete(e) : t.add(e), s.value = t, N();
-    }, N = () => {
-      const e = /* @__PURE__ */ new Set(), t = [], l = (o) => {
-        const m = w(o, h.value);
-        s.value.has(m) && !e.has(m) && (t.push(o), e.add(m));
+      l.has(e) ? l.delete(e) : l.add(e), c.value = l, q();
+    }, q = () => {
+      const e = /* @__PURE__ */ new Set(), l = [], t = (s) => {
+        const v = y(s, h.value);
+        c.value.has(v) && !e.has(v) && (l.push(s), e.add(v));
       };
-      A.value.forEach(l), (a.selectedRows || []).forEach(l), b("select", {
-        selected: t,
-        all: M.value,
-        indeterminate: J.value
-      }), b("update:selectedRows", t);
-    }, we = (e) => {
-      const t = a.headers.find((o) => o.field === e), l = t ? re(t) : e;
-      p.value.field === l ? p.value.order = p.value.order === "asc" ? "desc" : "asc" : (p.value.field = l, p.value.order = "asc"), C.value = 1, U();
-    }, be = (e) => {
-      C.value = e, U();
-    }, pe = (e) => {
-      T.value = e, C.value = 1, b("update:itemsPerPage", e), U();
-    }, ye = (e) => b("rowClick", e), xe = () => {
-      b("delete", me.value), $.value = !1;
+      Y.value.forEach(t), (a.selectedRows || []).forEach(t), C("select", {
+        selected: l,
+        all: X.value,
+        indeterminate: oe.value
+      }), C("update:selectedRows", l);
+    }, Pe = (e) => {
+      const l = a.headers.find((s) => s.field === e), t = l ? we(l) : e;
+      I.value.field === t ? I.value.order = I.value.order === "asc" ? "desc" : "asc" : (I.value.field = t, I.value.order = "asc"), B.value = 1, G();
+    }, Te = (e) => {
+      B.value = e, G();
+    }, Be = (e) => {
+      T.value = e, B.value = 1, C("update:itemsPerPage", e), G();
+    }, de = (e) => C("rowClick", e), De = () => {
+      C("delete", xe.value), A.value = !1;
     };
-    let y = null;
-    const U = () => {
-      y && clearTimeout(y), y = setTimeout(() => {
-        y = null;
+    let P = null;
+    const G = () => {
+      P && clearTimeout(P), P = setTimeout(() => {
+        P = null;
         const e = {
-          pagination: { page: C.value, limit: T.value },
-          sort: { ...p.value },
+          pagination: { page: B.value, limit: T.value },
+          sort: { ...I.value },
           filter: {}
         };
-        b("change", e), V?.onTableChange?.(e);
+        C("change", e), H?.onTableChange?.(e);
       }, 10);
     };
-    Ve(() => {
-      y && (clearTimeout(y), y = null);
-    }), D(
+    je(() => {
+      P && (clearTimeout(P), P = null);
+    }), z(
       () => a.rows,
       () => {
-        ce();
-        const e = new Set(z.value.keys());
-        (a.selectedRows || []).forEach((t) => {
-          e.add(w(t, h.value));
-        }), s.value = new Set([...s.value].filter((t) => e.has(t)));
+        ke();
+        const e = new Set(W.value.keys());
+        (a.selectedRows || []).forEach((l) => {
+          e.add(y(l, h.value));
+        }), c.value = new Set([...c.value].filter((l) => e.has(l)));
       }
     );
-    const Se = r(() => [
-      "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(" ")), Ce = r(() => {
+    const Ee = u(() => {
+      const e = a.variant === "raised", l = a.rounded ? e ? "rounded-lg" : "rounded" : "rounded-none";
+      return [
+        "w-full flex flex-col",
+        e ? `bg-background shadow-sm p-2 ${l}` : `bg-background ${l}`,
+        O.value ? "overflow-visible" : "overflow-hidden",
+        // Outer border stays on desktop table; stacked cards carry their own borders.
+        a.bordered && !O.value ? "border border-border" : "",
+        a.class
+      ].join(" ");
+    }), Re = u(() => {
       const e = a.cellBordered ? "[&>thead>tr>th:not(:last-child)]:border-r [&>thead>tr>th]:border-border [&>tbody>tr>td:not(:last-child)]:border-r [&>tbody>tr>td]:border-border [&>tbody>tr>th:not(:last-child)]:border-r [&>tbody>tr>th]:border-border" : "";
       return [
         "w-full caption-bottom -text-fs-1",
@@ -230,219 +247,317 @@ const Ye = { class: "space-y-6.5" }, Xe = { class: "w-full overflow-x-auto overf
         e,
         a.tableClass
       ].join(" ");
-    }), ke = (e) => {
-      const t = {};
-      return e.width && !/(?:^|\s|:)w-/.test(e.width) && (t.width = e.width), e.minWidth && !/(?:^|\s|:)min-w-/.test(e.minWidth) && (g.value && !t.width ? t.width = e.minWidth : t.minWidth = e.minWidth), t;
-    }, Pe = (e) => {
-      const t = {};
-      return e.width && !/(?:^|\s|:)w-/.test(e.width) ? t.width = e.width : e.minWidth && !/(?:^|\s|:)min-w-/.test(e.minWidth) && (t.width = e.minWidth), t;
-    }, Z = (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(" ");
-    }, Ie = r(
-      () => a.emptyTitleI18n ? I(a.emptyTitleI18n) : a.emptyTitle
-    ), Te = r(
-      () => a.emptyDescriptionI18n ? I(a.emptyDescriptionI18n) : a.emptyDescription
-    ), Be = r(() => {
-      const e = I("vlite.dataTable.confirmDeleteTitle");
+    }), $e = (e) => {
+      const l = {};
+      return e.width && !/(?:^|\s|:)w-/.test(e.width) && (l.width = e.width), e.minWidth && !/(?:^|\s|:)min-w-/.test(e.minWidth) && (g.value && !l.width ? l.width = e.minWidth : l.minWidth = e.minWidth), l;
+    }, ze = (e) => {
+      const l = {};
+      return e.width && !/(?:^|\s|:)w-/.test(e.width) ? l.width = e.width : e.minWidth && !/(?:^|\s|:)min-w-/.test(e.minWidth) && (l.width = e.minWidth), l;
+    }, re = (e) => {
+      const l = [];
+      return e.width && /(?:^|\s|:)w-/.test(e.width) && l.push(e.width), e.minWidth && /(?:^|\s|:)min-w-/.test(e.minWidth) && l.push(e.minWidth), l.join(" ");
+    }, ce = u(
+      () => a.emptyTitleI18n ? R(a.emptyTitleI18n) : a.emptyTitle
+    ), ue = u(
+      () => a.emptyDescriptionI18n ? R(a.emptyDescriptionI18n) : a.emptyDescription
+    ), Le = u(() => {
+      const e = R("vlite.dataTable.confirmDeleteTitle");
       return e !== "vlite.dataTable.confirmDeleteTitle" ? e : "Confirm Deletion";
-    }), De = r(() => {
-      const e = I("vlite.dataTable.confirmDeleteDesc");
+    }), We = u(() => {
+      const e = R("vlite.dataTable.confirmDeleteDesc");
       return e !== "vlite.dataTable.confirmDeleteDesc" ? e : "Are you sure you want to delete the selected items?";
-    }), Ee = r(() => {
-      const e = I("vlite.dataTable.deleteBtn");
+    }), Ve = u(() => {
+      const e = R("vlite.dataTable.deleteBtn");
       return e !== "vlite.dataTable.deleteBtn" ? e : "Delete";
-    }), Re = r(() => {
-      const e = I("vlite.dataTable.cancelBtn");
+    }), Fe = u(() => {
+      const e = R("vlite.dataTable.cancelBtn");
       return e !== "vlite.dataTable.cancelBtn" ? e : "Cancel";
     });
-    return (e, t) => (i(), c("div", Ye, [
-      v("div", {
-        class: x(Se.value)
+    return (e, l) => (i(), d("div", Qe, [
+      m("div", {
+        class: x(Ee.value)
       }, [
-        v("div", Xe, [
-          v("table", {
-            class: x([Ce.value, "data-table"])
+        O.value ? (i(), d("div", Ze, [
+          se.value ? (i(!0), d(S, { key: 0 }, w(Math.min(T.value, 15), (t) => (i(), d("div", {
+            key: "skeleton-card-" + t,
+            class: "border rounded-lg overflow-hidden bg-background"
+          }, [
+            m("div", _e, [
+              p.value ? (i(), d("div", et)) : D("", !0),
+              l[8] || (l[8] = m("div", { class: "h-4 flex-1 rounded-md bg-muted animate-pulse" }, null, -1))
+            ]),
+            m("div", tt, [
+              (i(!0), d(S, null, w(pe.value.slice(1, 4), (s) => (i(), d("div", {
+                key: s.field,
+                class: "flex items-center justify-between gap-3"
+              }, [...l[9] || (l[9] = [
+                m("div", { class: "h-2.5 w-14 rounded bg-muted animate-pulse" }, null, -1),
+                m("div", { class: "h-4 w-20 rounded-md bg-muted animate-pulse" }, null, -1)
+              ])]))), 128))
+            ])
+          ]))), 128)) : o($).length > 0 ? (i(!0), d(S, { key: 1 }, w(o($), (t, s, v, r) => {
+            const f = [
+              t.row,
+              c.value.has(t.id),
+              N.value.has(t.id),
+              p.value,
+              n.compact,
+              n.size,
+              n.striped,
+              n.hoverable,
+              n.cellBordered,
+              o(g),
+              t.depth,
+              t.isLastSibling,
+              t.ancestorLastFlags,
+              o(F)(t.id),
+              o(M)(t.id),
+              o(V)(t.row),
+              n.treeIndent,
+              !0
+            ];
+            if (r && r.key === t.id && Q(r, f)) return r;
+            const k = (i(), Z(fe, {
+              key: t.id,
+              stacked: "",
+              row: t.row,
+              headers: n.headers,
+              index: t.index,
+              "key-field": h.value,
+              selectable: p.value,
+              "is-selected": c.value.has(t.id),
+              "is-indeterminate": N.value.has(t.id),
+              hoverable: n.hoverable,
+              striped: n.striped,
+              compact: n.compact,
+              size: n.size,
+              "cell-bordered": n.cellBordered,
+              "tree-mode": o(g),
+              depth: t.depth,
+              "tree-indent": n.treeIndent,
+              expandable: o(V)(t.row),
+              expanded: o(F)(t.id),
+              "tree-loading": o(M)(t.id),
+              "is-last-sibling": t.isLastSibling,
+              "ancestor-last-flags": t.ancestorLastFlags,
+              onSelect: ie,
+              onRowClick: de,
+              onToggleExpand: (b) => o(ne)(t.row, t.depth)
+            }, U({ _: 2 }, [
+              w(n.headers, (b) => ({
+                name: b.field,
+                fn: K((J) => [
+                  E(e.$slots, b.field, _({ ref_for: !0 }, J))
+                ])
+              }))
+            ]), 1032, ["row", "headers", "index", "key-field", "selectable", "is-selected", "is-indeterminate", "hoverable", "striped", "compact", "size", "cell-bordered", "tree-mode", "depth", "tree-indent", "expandable", "expanded", "tree-loading", "is-last-sibling", "ancestor-last-flags", "onToggleExpand"]));
+            return k.memo = f, k;
+          }, l, 0), 128)) : (i(), d("div", lt, [
+            E(e.$slots, "empty", {}, () => [
+              L(o(ve), {
+                title: ce.value,
+                description: ue.value,
+                icon: n.emptyIcon,
+                variant: "variant12",
+                class: "bg-transparent! py-8!"
+              }, U({ _: 2 }, [
+                e.$slots["empty-action"] ? {
+                  name: "action",
+                  fn: K(() => [
+                    E(e.$slots, "empty-action")
+                  ]),
+                  key: "0"
+                } : void 0
+              ]), 1032, ["title", "description", "icon"])
+            ])
+          ]))
+        ])) : (i(), d("div", {
+          key: 1,
+          class: x(["w-full overflow-x-auto", o(g) ? "overflow-y-visible" : "overflow-y-hidden"])
+        }, [
+          m("table", {
+            class: x([Re.value, "data-table"])
           }, [
-            u(g) ? (i(), c("colgroup", qe, [
-              S.value ? (i(), c("col", Ge)) : E("", !0),
-              (i(!0), c(R, null, P(n.headers, (l) => (i(), c("col", {
-                key: "col-" + l.field,
-                class: x(Z(l)),
-                style: j(Pe(l))
+            o(g) ? (i(), d("colgroup", nt, [
+              p.value ? (i(), d("col", at)) : D("", !0),
+              (i(!0), d(S, null, w(n.headers, (t) => (i(), d("col", {
+                key: "col-" + t.field,
+                class: x(re(t)),
+                style: ee(ze(t))
               }, null, 6))), 128))
-            ])) : E("", !0),
-            v("thead", {
+            ])) : D("", !0),
+            m("thead", {
               class: x([
                 "[&_tr]:border-b [&_tr]:border-border",
                 n.headerVariant === "minimal" ? "bg-transparent" : "bg-accent",
-                n.variant === "raised" ? "[&_th:first-child]:rounded-tl-lg [&_th:last-child]:rounded-tr-lg" : ""
+                n.variant === "raised" && n.rounded ? "[&_th:first-child]:rounded-tl-lg [&_th:last-child]:rounded-tr-lg" : ""
               ])
             }, [
-              v("tr", He, [
-                S.value ? (i(), c("th", Je, [
-                  v("div", Qe, [
-                    L(Fe, {
-                      "model-value": M.value,
-                      indeterminate: J.value,
+              m("tr", st, [
+                p.value ? (i(), d("th", ot, [
+                  m("div", it, [
+                    L(Oe, {
+                      "model-value": X.value,
+                      indeterminate: oe.value,
                       size: "xs",
-                      "onUpdate:modelValue": he
+                      "onUpdate:modelValue": Ie
                     }, null, 8, ["model-value", "indeterminate"])
                   ])
-                ])) : E("", !0),
-                (i(!0), c(R, null, P(n.headers, (l) => (i(), ee(Ue, {
-                  key: l.field,
-                  header: l,
-                  "sort-config": p.value,
+                ])) : D("", !0),
+                (i(!0), d(S, null, w(n.headers, (t) => (i(), Z(Xe, {
+                  key: t.field,
+                  header: t,
+                  "sort-config": I.value,
                   compact: n.compact,
                   size: n.size,
                   "table-sortable": n.sortable,
                   "cell-bordered": n.cellBordered,
-                  onSort: we,
+                  onSort: Pe,
                   class: x([
                     n.cellBordered ? "" : "last:pr-5!",
-                    Z(l),
-                    u(g) ? "min-w-0! max-w-none!" : ""
+                    re(t),
+                    o(g) ? "min-w-0! max-w-none!" : ""
                   ]),
-                  style: j(ke(l))
+                  style: ee($e(t))
                 }, null, 8, ["header", "sort-config", "compact", "size", "table-sortable", "cell-bordered", "class", "style"]))), 128))
               ])
             ], 2),
-            v("tbody", Ze, [
-              ue.value ? (i(!0), c(R, { key: 0 }, P(Math.min(T.value, 15), (l, o, m, d) => {
+            m("tbody", dt, [
+              se.value ? (i(!0), d(S, { key: 0 }, w(Math.min(T.value, 15), (t, s, v, r) => {
                 const f = [];
-                if (d && d.key === "skeleton-" + l && te(d, f)) return d;
-                const B = (i(), c("tr", {
-                  key: "skeleton-" + l,
+                if (r && r.key === "skeleton-" + t && Q(r, f)) return r;
+                const k = (i(), d("tr", {
+                  key: "skeleton-" + t,
                   class: "border-b border-border/70 bg-background transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted"
                 }, [
-                  S.value ? (i(), c("td", _e, [...t[6] || (t[6] = [
-                    v("div", { class: "flex items-center justify-center" }, [
-                      v("div", { class: "h-4 w-4 rounded-[4px] bg-muted/50 animate-pulse" })
+                  p.value ? (i(), d("td", rt, [...l[10] || (l[10] = [
+                    m("div", { class: "flex items-center justify-center" }, [
+                      m("div", { class: "h-4 w-4 rounded-[4px] bg-muted/50 animate-pulse" })
                     ], -1)
-                  ])])) : E("", !0),
-                  (i(!0), c(R, null, P(n.headers, (k) => (i(), c("td", {
-                    key: k.field,
+                  ])])) : D("", !0),
+                  (i(!0), d(S, null, w(n.headers, (b) => (i(), d("td", {
+                    key: b.field,
                     class: x(["align-middle", [
-                      k.hideOnMobile ? "hidden md:table-cell" : "",
+                      b.hideOnMobile ? "hidden md:table-cell" : "",
                       n.cellBordered ? "px-5! py-3!" : "p-5! last:pr-6!"
                     ]])
                   }, [
-                    v("div", {
+                    m("div", {
                       class: "rounded-md bg-muted/50 animate-pulse h-4",
-                      style: j({ width: `${50 + Math.random() * 40}%` })
+                      style: ee({ width: `${50 + Math.random() * 40}%` })
                     }, null, 4)
                   ], 2))), 128))
                 ]));
-                return B.memo = f, B;
-              }, t, 0), 128)) : u(F).length > 0 ? (i(!0), c(R, { key: 1 }, P(u(F), (l, o, m, d) => {
+                return k.memo = f, k;
+              }, l, 2), 128)) : o($).length > 0 ? (i(!0), d(S, { key: 1 }, w(o($), (t, s, v, r) => {
                 const f = [
-                  l.row,
-                  s.value.has(l.id),
-                  Q.value.has(l.id),
-                  S.value,
+                  t.row,
+                  c.value.has(t.id),
+                  N.value.has(t.id),
+                  p.value,
                   n.compact,
                   n.size,
                   n.striped,
                   n.hoverable,
                   n.cellBordered,
-                  u(g),
-                  l.depth,
-                  l.isLastSibling,
-                  l.ancestorLastFlags,
-                  u(X)(l.id),
-                  u(q)(l.id),
-                  u(Y)(l.row),
-                  n.treeIndent
+                  o(g),
+                  t.depth,
+                  t.isLastSibling,
+                  t.ancestorLastFlags,
+                  o(F)(t.id),
+                  o(M)(t.id),
+                  o(V)(t.row),
+                  n.treeIndent,
+                  !1
                 ];
-                if (d && d.key === l.id && te(d, f)) return d;
-                const B = (i(), ee(je, {
-                  key: l.id,
-                  row: l.row,
+                if (r && r.key === t.id && Q(r, f)) return r;
+                const k = (i(), Z(fe, {
+                  key: t.id,
+                  row: t.row,
                   headers: n.headers,
-                  index: l.index,
+                  index: t.index,
                   "key-field": h.value,
-                  selectable: S.value,
-                  "is-selected": s.value.has(l.id),
-                  "is-indeterminate": Q.value.has(l.id),
+                  selectable: p.value,
+                  "is-selected": c.value.has(t.id),
+                  "is-indeterminate": N.value.has(t.id),
                   hoverable: n.hoverable,
                   striped: n.striped,
                   compact: n.compact,
                   size: n.size,
                   "cell-bordered": n.cellBordered,
-                  "tree-mode": u(g),
-                  depth: l.depth,
+                  "tree-mode": o(g),
+                  depth: t.depth,
                   "tree-indent": n.treeIndent,
-                  expandable: u(Y)(l.row),
-                  expanded: u(X)(l.id),
-                  "tree-loading": u(q)(l.id),
-                  "is-last-sibling": l.isLastSibling,
-                  "ancestor-last-flags": l.ancestorLastFlags,
-                  onSelect: ge,
-                  onRowClick: ye,
-                  onToggleExpand: (k) => u(de)(l.row, l.depth),
+                  expandable: o(V)(t.row),
+                  expanded: o(F)(t.id),
+                  "tree-loading": o(M)(t.id),
+                  "is-last-sibling": t.isLastSibling,
+                  "ancestor-last-flags": t.ancestorLastFlags,
+                  onSelect: ie,
+                  onRowClick: de,
+                  onToggleExpand: (b) => o(ne)(t.row, t.depth),
                   class: x(n.cellBordered ? "" : "[&_td:last-child]:pr-5!")
-                }, le({ _: 2 }, [
-                  P(n.headers, (k) => ({
-                    name: k.field,
-                    fn: ne((ze) => [
-                      K(e.$slots, k.field, ae({ ref_for: !0 }, ze))
+                }, U({ _: 2 }, [
+                  w(n.headers, (b) => ({
+                    name: b.field,
+                    fn: K((J) => [
+                      E(e.$slots, b.field, _({ ref_for: !0 }, J))
                     ])
                   }))
                 ]), 1032, ["row", "headers", "index", "key-field", "selectable", "is-selected", "is-indeterminate", "hoverable", "striped", "compact", "size", "cell-bordered", "tree-mode", "depth", "tree-indent", "expandable", "expanded", "tree-loading", "is-last-sibling", "ancestor-last-flags", "onToggleExpand", "class"]));
-                return B.memo = f, B;
-              }, t, 2), 128)) : (i(), c("tr", et, [
-                v("td", {
-                  colspan: S.value ? n.headers.length + 1 : n.headers.length,
+                return k.memo = f, k;
+              }, l, 4), 128)) : (i(), d("tr", ct, [
+                m("td", {
+                  colspan: p.value ? n.headers.length + 1 : n.headers.length,
                   class: "align-middle hover:bg-transparent"
                 }, [
-                  K(e.$slots, "empty", {}, () => [
-                    L(u(Ne), {
-                      title: Ie.value,
-                      description: Te.value,
+                  E(e.$slots, "empty", {}, () => [
+                    L(o(ve), {
+                      title: ce.value,
+                      description: ue.value,
                       icon: n.emptyIcon,
                       variant: "variant12",
                       class: "bg-transparent! py-8!"
-                    }, le({ _: 2 }, [
+                    }, U({ _: 2 }, [
                       e.$slots["empty-action"] ? {
                         name: "action",
-                        fn: ne(() => [
-                          K(e.$slots, "empty-action")
+                        fn: K(() => [
+                          E(e.$slots, "empty-action")
                         ]),
                         key: "0"
                       } : void 0
                     ]), 1032, ["title", "description", "icon"])
                   ])
-                ], 8, tt)
+                ], 8, ut)
               ]))
             ])
           ], 2)
-        ])
+        ], 2))
       ], 2),
-      n.showPagination && n.pageInfo && n.pageInfo.totalPages > 1 ? (i(), c("div", lt, [
-        L(u(Me), ae({
-          "current-page": C.value,
+      n.showPagination && n.pageInfo && n.pageInfo.totalPages > 1 ? (i(), d("div", mt, [
+        L(o(Ye), _({
+          "current-page": B.value,
           "total-pages": n.pageInfo.totalPages,
           "total-items": n.pageInfo.totalItems
         }, n.paginationProps, {
-          onChange: be,
-          "onUpdate:itemsPerPage": pe
+          onChange: Te,
+          "onUpdate:itemsPerPage": Be
         }), null, 16, ["current-page", "total-pages", "total-items"])
-      ])) : E("", !0),
-      L(Ae, {
-        show: $.value,
-        "onUpdate:show": t[4] || (t[4] = (l) => $.value = l),
-        title: Be.value,
-        description: De.value,
-        "confirm-text": Ee.value,
-        "cancel-text": Re.value,
+      ])) : D("", !0),
+      L(He, {
+        show: A.value,
+        "onUpdate:show": l[6] || (l[6] = (t) => A.value = t),
+        title: Le.value,
+        description: We.value,
+        "confirm-text": Ve.value,
+        "cancel-text": Fe.value,
         variant: "danger",
-        onConfirm: xe,
-        onCancel: t[5] || (t[5] = (l) => $.value = !1)
+        onConfirm: De,
+        onCancel: l[7] || (l[7] = (t) => A.value = !1)
       }, null, 8, ["show", "title", "description", "confirm-text", "cancel-text"])
     ]));
   }
 });
 export {
-  ft as default
+  Pt as default
 };