@oneb/ui-vue 0.3.15 → 0.3.16

package/dist/dataTable/index.js

@@ -1,13 +1,13 @@
-import { openBlock as l, createElementBlock as i, createElementVNode as c, defineComponent as ee, computed as y, normalizeClass as b, toDisplayString as S, Fragment as _, renderList as E, unref as p, createCommentVNode as h, createBlock as C, resolveDynamicComponent as k, useSlots as we, ref as N, provide as je, watch as W, withDirectives as Ne, renderSlot as P, vShow as Ae, normalizeStyle as J, createTextVNode as Q, withModifiers as fe, createVNode as Ke, inject as Ve, onBeforeUnmount as We } from "vue";
-import { useOnebI18n as Ce } from "../i18n/index.js";
-import { a as ke, r as Ue } from "../ChevronRightIcon-4549a26b.js";
-import { S as ye } from "../SpinnerIcon-74648c98.js";
-import { r as ge } from "../ChevronDownIcon-6805ce6c.js";
-import { r as he } from "../CheckIcon-f1c94824.js";
-import { _ as Ie } from "../_plugin-vue_export-helper-dad06003.js";
+import { openBlock as l, createElementBlock as o, createElementVNode as c, ref as E, onMounted as Xe, toValue as _e, watch as Q, onBeforeUnmount as Fe, defineComponent as fe, computed as y, normalizeClass as b, toDisplayString as k, Fragment as _, renderList as L, unref as p, createCommentVNode as g, createBlock as v, resolveDynamicComponent as w, useSlots as $e, provide as Ye, withDirectives as Ze, renderSlot as B, vShow as Ie, normalizeStyle as ae, createTextVNode as W, withModifiers as U, createVNode as Se, inject as De } from "vue";
+import { useOnebI18n as Pe } from "../i18n/index.js";
+import { a as pe, r as et } from "../ChevronRightIcon-4549a26b.js";
+import { S as I } from "../SpinnerIcon-74648c98.js";
+import { r as ne } from "../ChevronDownIcon-6805ce6c.js";
+import { r as D } from "../CheckIcon-f1c94824.js";
+import { _ as tt } from "../_plugin-vue_export-helper-dad06003.js";
 import "../SpinnerIcon.vue_vue_type_style_index_0_lang-4ed993c7.js";
-function He(d, a) {
-  return l(), i("svg", {
+function st(d, n) {
+  return l(), o("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -22,8 +22,8 @@ function He(d, a) {
     })
   ]);
 }
-function be(d, a) {
-  return l(), i("svg", {
+function Re(d, n) {
+  return l(), o("svg", {
     xmlns: "http://www.w3.org/2000/svg",
     fill: "none",
     viewBox: "0 0 24 24",
@@ -38,7 +38,7 @@ function be(d, a) {
     })
   ]);
 }
-const Ge = {
+const rt = {
   field: {
     type: String,
     required: !1
@@ -86,8 +86,12 @@ const Ge = {
   bodyStyle: {
     type: [String, Object],
     required: !1
+  },
+  visibleFrom: {
+    type: String,
+    required: !1
   }
-}, Je = {
+}, lt = {
   value: {
     type: Array,
     default: () => []
@@ -215,23 +219,58 @@ const Ge = {
   wrapperBordered: {
     type: Boolean,
     default: !0
+  },
+  cardBreakpoint: {
+    type: String,
+    required: !1
   }
-}, Se = Symbol("OneDataTable"), ve = {
-  contains: (d, a) => String(d ?? "").toLowerCase().includes(String(a).toLowerCase()),
-  startsWith: (d, a) => String(d ?? "").toLowerCase().startsWith(String(a).toLowerCase()),
-  endsWith: (d, a) => String(d ?? "").toLowerCase().endsWith(String(a).toLowerCase()),
-  equals: (d, a) => String(d ?? "").toLowerCase() === String(a).toLowerCase(),
-  notEquals: (d, a) => String(d ?? "").toLowerCase() !== String(a).toLowerCase()
-}, Qe = (d = !0) => {
-  const a = ["overflow-x-auto", "w-full"];
-  return d && a.push("border", "border-gray-100", "rounded"), a;
-}, Xe = (d) => {
-  const a = ["min-w-full", "text-left", "relative"];
-  return d === "sm" ? a.push("text-xs") : d === "lg" ? a.push("text-base") : a.push("text-sm"), a;
-}, X = (d, a, t = "none", o = "default", g) => {
+}, Le = Symbol("OneDataTable"), Be = {
+  contains: (d, n) => String(d ?? "").toLowerCase().includes(String(n).toLowerCase()),
+  startsWith: (d, n) => String(d ?? "").toLowerCase().startsWith(String(n).toLowerCase()),
+  endsWith: (d, n) => String(d ?? "").toLowerCase().endsWith(String(n).toLowerCase()),
+  equals: (d, n) => String(d ?? "").toLowerCase() === String(n).toLowerCase(),
+  notEquals: (d, n) => String(d ?? "").toLowerCase() !== String(n).toLowerCase()
+}, ot = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280,
+  "2xl": 1536
+};
+function at(d) {
+  const n = E(!1);
+  let t = null, i = null;
+  const h = () => {
+    t && i && t.removeEventListener("change", i), t = null, i = null;
+  }, f = (S) => {
+    h(), !(typeof window > "u") && (t = window.matchMedia(S), n.value = t.matches, i = (H) => {
+      n.value = H.matches;
+    }, t.addEventListener("change", i));
+  };
+  return Xe(() => {
+    f(_e(d)), Q(
+      () => _e(d),
+      (S) => {
+        f(S);
+      }
+    );
+  }), Fe(() => {
+    h();
+  }), n;
+}
+function z(d) {
+  return at(`(min-width: ${ot[d]}px)`);
+}
+const nt = (d = !0) => {
+  const n = ["overflow-x-auto", "w-full"];
+  return d && n.push("border", "border-gray-100", "rounded"), n;
+}, it = (d) => {
+  const n = ["min-w-full", "text-left", "relative"];
+  return d === "sm" ? n.push("text-xs") : d === "lg" ? n.push("text-base") : n.push("text-sm"), n;
+}, ie = (d, n, t = "none", i = "default", h) => {
   const f = [];
-  return o === "minimal" ? f.push(
-    g || "bg-gray-50",
+  return i === "minimal" ? f.push(
+    h || "bg-gray-50",
     "text-gray-700",
     "font-medium",
     "text-sm",
@@ -239,7 +278,7 @@ const Ge = {
     "border-b",
     "border-gray-200"
   ) : f.push(
-    g || "bg-gray-100",
+    h || "bg-gray-100",
     "text-gray-600",
     "font-semibold",
     "text-xs",
@@ -248,20 +287,20 @@ const Ge = {
     "border-b",
     "border-gray-200",
     "whitespace-nowrap"
-  ), a && f.push("cursor-pointer", "select-none", "hover:text-primary-base", "transition-colors"), t === "always" ? f.push("border-r", "border-r-gray-200", "last:border-r-0") : (t === "hover" || t === "hover-table") && f.push("border-r", "border-r-transparent", "last:border-r-0"), d === "sm" ? f.push("px-1.5", "py-1") : d === "lg" ? f.push("px-4", "py-3") : f.push("p-2"), f;
-}, Y = (d, a, t = "none", o) => {
-  const g = ["border-b", "border-gray-100", "text-gray-900"];
-  return o && g.push(o), a && g.push("border-r"), t === "always" ? g.push("border-r", "border-r-gray-200", "last:border-r-0") : (t === "hover" || t === "hover-table") && g.push("border-r", "border-r-transparent", "last:border-r-0"), d === "sm" ? g.push("px-1.5", "py-1") : d === "lg" ? g.push("px-4", "py-3") : g.push("px-2", "py-1.5"), g;
-}, Ye = (d, a, t, o, g = !1) => {
+  ), n && f.push("cursor-pointer", "select-none", "hover:text-primary-base", "transition-colors"), t === "always" ? f.push("border-r", "border-r-gray-200", "last:border-r-0") : (t === "hover" || t === "hover-table") && f.push("border-r", "border-r-transparent", "last:border-r-0"), d === "sm" ? f.push("px-1.5", "py-1") : d === "lg" ? f.push("px-4", "py-3") : f.push("p-2"), f;
+}, de = (d, n, t = "none", i) => {
+  const h = ["border-b", "border-gray-100", "text-gray-900"];
+  return i && h.push(i), n && h.push("border-r"), t === "always" ? h.push("border-r", "border-r-gray-200", "last:border-r-0") : (t === "hover" || t === "hover-table") && h.push("border-r", "border-r-transparent", "last:border-r-0"), d === "sm" ? h.push("px-1.5", "py-1") : d === "lg" ? h.push("px-4", "py-3") : h.push("px-2", "py-1.5"), h;
+}, dt = (d, n, t, i, h = !1) => {
   const f = [];
-  return g && f.push("group"), o ? f.push("bg-primary-25") : d && t && f.push("bg-gray-50"), a && (o ? f.push("hover:bg-primary-25-hover", "transition-colors") : f.push("hover:bg-gray-50", "transition-colors")), f;
-}, U = (d) => {
-  const a = ["w-3.5", "h-3.5", "inline-block", "ml-1"];
-  return d ? a.push("text-primary-base") : a.push("text-gray-400"), a.push("transition-transform", "duration-200"), a;
-}, D = (d) => {
-  const a = ["text-center"];
-  return d === "sm" ? a.push("w-8") : d === "lg" ? a.push("w-14") : a.push("w-12"), a;
-}, me = (d) => D(d), Ze = () => [
+  return h && f.push("group"), i ? f.push("bg-primary-25") : d && t && f.push("bg-gray-50"), n && (i ? f.push("hover:bg-primary-25-hover", "transition-colors") : f.push("hover:bg-gray-50", "transition-colors")), f;
+}, ee = (d) => {
+  const n = ["w-3.5", "h-3.5", "inline-block", "ml-1"];
+  return d ? n.push("text-primary-base") : n.push("text-gray-400"), n.push("transition-transform", "duration-200"), n;
+}, ce = (d) => {
+  const n = ["text-center"];
+  return d === "sm" ? n.push("w-8") : d === "lg" ? n.push("w-14") : n.push("w-12"), n;
+}, Me = (d) => ce(d), ut = () => [
   "flex",
   "items-center",
   "justify-between",
@@ -271,10 +310,16 @@ const Ge = {
   "border-gray-100",
   "bg-white",
   "text-sm"
-], Z = (d) => {
-  const a = ["bg-gray-100", "border-b", "border-gray-200"];
-  return d === "sm" ? a.push("px-1.5", "py-1") : d === "lg" ? a.push("px-4", "py-2") : a.push("px-2", "py-1.5"), a;
-}, De = { class: "flex items-center gap-4" }, et = { class: "text-gray-600" }, tt = ["value"], st = ["value"], rt = { class: "flex items-center gap-1" }, lt = ["disabled"], ot = { class: "px-2 text-gray-600" }, at = ["disabled"], nt = /* @__PURE__ */ ee({
+], pt = (d, n) => {
+  const t = ["rounded", "border", "p-3"];
+  return n ? t.push("bg-primary-25", "border-primary-base/20") : t.push("bg-white", "border-gray-100"), d && (n ? t.push("hover:bg-primary-25-hover", "transition-colors") : t.push("hover:bg-gray-50", "transition-colors")), t;
+}, ct = (d) => {
+  const n = ["flex", "items-start", "justify-between", "gap-2"];
+  return d === "sm" ? n.push("py-0.5") : d === "lg" ? n.push("py-2") : n.push("py-1"), n;
+}, ue = (d) => {
+  const n = ["bg-gray-100", "border-b", "border-gray-200"];
+  return d === "sm" ? n.push("px-1.5", "py-1") : d === "lg" ? n.push("px-4", "py-2") : n.push("px-2", "py-1.5"), n;
+}, ft = { class: "flex items-center gap-4" }, yt = { class: "text-gray-600" }, gt = ["value"], ht = ["value"], bt = { class: "flex items-center gap-1" }, vt = ["disabled"], mt = { class: "px-2 text-gray-600" }, kt = ["disabled"], wt = /* @__PURE__ */ fe({
   __name: "OneDataTablePaginator",
   props: {
     first: {
@@ -295,93 +340,129 @@ const Ge = {
     }
   },
   emits: ["update:first", "update:rows", "page"],
-  setup(d, { emit: a }) {
-    const t = d, o = a, g = Ce(), f = y(() => Math.ceil(t.totalRecords / t.rows)), R = y(() => Math.floor(t.first / t.rows) + 1), te = y(() => t.totalRecords === 0 ? 0 : t.first + 1), se = y(() => Math.min(t.first + t.rows, t.totalRecords)), B = y(() => t.first === 0), z = y(() => t.first + t.rows >= t.totalRecords), T = y(() => Ze()), O = (m) => {
-      m < 0 || m >= t.totalRecords || (o("update:first", m), o("page", {
-        first: m,
+  setup(d, { emit: n }) {
+    const t = d, i = n, h = Pe(), f = y(() => Math.ceil(t.totalRecords / t.rows)), S = y(() => Math.floor(t.first / t.rows) + 1), H = y(() => t.totalRecords === 0 ? 0 : t.first + 1), ye = y(() => Math.min(t.first + t.rows, t.totalRecords)), F = y(() => t.first === 0), V = y(() => t.first + t.rows >= t.totalRecords), A = y(() => ut()), j = (C) => {
+      C < 0 || C >= t.totalRecords || (i("update:first", C), i("page", {
+        first: C,
         rows: t.rows,
-        page: Math.floor(m / t.rows),
+        page: Math.floor(C / t.rows),
         pageCount: f.value
       }));
-    }, A = () => {
-      O(Math.max(0, t.first - t.rows));
-    }, K = () => {
-      O(t.first + t.rows);
-    }, F = (m) => {
-      const w = parseInt(m.target.value);
-      o("update:rows", w), o("update:first", 0), o("page", {
+    }, G = () => {
+      j(Math.max(0, t.first - t.rows));
+    }, J = () => {
+      j(t.first + t.rows);
+    }, O = (C) => {
+      const x = parseInt(C.target.value);
+      i("update:rows", x), i("update:first", 0), i("page", {
         first: 0,
-        rows: w,
+        rows: x,
         page: 0,
-        pageCount: Math.ceil(t.totalRecords / w)
+        pageCount: Math.ceil(t.totalRecords / x)
       });
     };
-    return (m, w) => (l(), i("div", {
-      class: b(T.value)
+    return (C, x) => (l(), o("div", {
+      class: b(A.value)
     }, [
-      c("div", De, [
-        c("span", et, S(te.value) + "–" + S(se.value) + " of " + S(d.totalRecords), 1),
-        d.rowsPerPageOptions.length > 1 ? (l(), i("select", {
+      c("div", ft, [
+        c("span", yt, k(H.value) + "–" + k(ye.value) + " of " + k(d.totalRecords), 1),
+        d.rowsPerPageOptions.length > 1 ? (l(), o("select", {
           key: 0,
           value: d.rows,
           class: "border border-gray-300 rounded px-2 py-1 text-sm bg-white focus:outline-none focus:ring-1 focus:ring-primary-glow",
-          onChange: F
+          onChange: O
         }, [
-          (l(!0), i(_, null, E(d.rowsPerPageOptions, (q) => (l(), i("option", {
-            key: q,
-            value: q
-          }, S(p(g)("ui.dataTable.perPage", { count: q })), 9, st))), 128))
-        ], 40, tt)) : h("", !0)
+          (l(!0), o(_, null, L(d.rowsPerPageOptions, (T) => (l(), o("option", {
+            key: T,
+            value: T
+          }, k(p(h)("ui.dataTable.perPage", { count: T })), 9, ht))), 128))
+        ], 40, gt)) : g("", !0)
       ]),
-      c("div", rt, [
+      c("div", bt, [
         c("button", {
-          disabled: B.value,
+          disabled: F.value,
           class: "p-1.5 rounded hover:bg-gray-100 disabled:opacity-30 disabled:cursor-default transition-colors",
-          onClick: A
+          onClick: G
         }, [
-          (l(), C(k(p(He)), { class: "w-4 h-4 text-gray-600" }))
-        ], 8, lt),
-        c("span", ot, S(R.value) + " / " + S(f.value), 1),
+          (l(), v(w(p(st)), { class: "w-4 h-4 text-gray-600" }))
+        ], 8, vt),
+        c("span", mt, k(S.value) + " / " + k(f.value), 1),
         c("button", {
-          disabled: z.value,
+          disabled: V.value,
           class: "p-1.5 rounded hover:bg-gray-100 disabled:opacity-30 disabled:cursor-default transition-colors",
-          onClick: K
+          onClick: J
         }, [
-          (l(), C(k(p(ke)), { class: "w-4 h-4 text-gray-600" }))
-        ], 8, at)
+          (l(), v(w(p(pe)), { class: "w-4 h-4 text-gray-600" }))
+        ], 8, kt)
       ])
     ], 2));
   }
-}), it = {
+}), Ct = {
   key: 0,
   class: "mb-3"
-}, dt = { key: 0 }, ut = {
+}, xt = { key: 0 }, _t = {
   key: 0,
   class: "w-5 h-5 rounded bg-primary-base flex items-center justify-center text-white"
-}, pt = {
+}, St = {
   key: 1,
   class: "w-5 h-5 rounded border border-gray-300 bg-white"
-}, ct = ["onClick"], ft = {
+}, Rt = ["onClick"], Bt = {
   key: 1,
   class: "inline-flex items-center gap-1"
-}, yt = { key: 0 }, gt = ["value", "placeholder", "onInput"], ht = { key: 1 }, bt = ["onClick"], vt = ["onClick"], mt = {
+}, Mt = { key: 0 }, Ft = ["value", "placeholder", "onInput"], $t = { key: 1 }, Pt = ["onClick"], Lt = ["onClick"], Ot = {
   key: 0,
   class: "w-5 h-5 rounded bg-primary-base flex items-center justify-center text-white"
-}, wt = {
+}, qt = {
   key: 1,
   class: "w-5 h-5 rounded border border-gray-300 bg-white"
-}, Ct = ["onClick"], kt = {
+}, Et = ["onClick"], jt = {
   key: 0,
   class: "w-5 h-5 rounded-full bg-primary-base flex items-center justify-center"
-}, St = {
+}, Tt = {
   key: 1,
   class: "w-5 h-5 rounded-full border border-gray-300 bg-white"
-}, xt = ["onClick"], Rt = { key: 0 }, _t = ["colspan"], Bt = { key: 2 }, Ft = ["colspan"], Mt = { class: "flex items-center justify-center gap-2 text-gray-500" }, Pt = { key: 3 }, Ot = ["colspan"], qt = { class: "text-gray-400" }, $t = { key: 4 }, Lt = ["colspan"], Et = ["disabled"], zt = {
+}, Nt = ["onClick"], zt = { key: 0 }, Vt = ["colspan"], At = { key: 2 }, Kt = ["colspan"], Wt = { class: "flex items-center justify-center gap-2 text-gray-500" }, Ut = { key: 3 }, Qt = ["colspan"], Ht = { class: "text-gray-400" }, Gt = { key: 4 }, Jt = ["colspan"], Xt = ["disabled"], Yt = { key: 2 }, Zt = {
+  key: 0,
+  class: "text-center py-12"
+}, It = { class: "flex items-center justify-center gap-2 text-gray-500" }, Dt = {
+  key: 1,
+  class: "text-center py-12"
+}, es = { class: "text-gray-400" }, ts = {
   key: 2,
+  class: "space-y-2"
+}, ss = {
+  key: 0,
+  class: "flex items-center gap-2 px-3 py-2"
+}, rs = {
+  key: 0,
+  class: "w-5 h-5 rounded bg-primary-base flex items-center justify-center text-white"
+}, ls = {
+  key: 1,
+  class: "w-5 h-5 rounded border border-gray-300 bg-white"
+}, os = { class: "text-sm text-gray-500" }, as = ["onClick"], ns = {
+  key: 0,
+  class: "flex items-center justify-between mb-2"
+}, is = { key: 0 }, ds = ["onClick"], us = {
+  key: 0,
+  class: "w-5 h-5 rounded bg-primary-base flex items-center justify-center text-white"
+}, ps = {
+  key: 1,
+  class: "w-5 h-5 rounded border border-gray-300 bg-white"
+}, cs = ["onClick"], fs = {
+  key: 0,
+  class: "w-5 h-5 rounded-full bg-primary-base flex items-center justify-center"
+}, ys = {
+  key: 1,
+  class: "w-5 h-5 rounded-full border border-gray-300 bg-white"
+}, gs = { key: 1 }, hs = ["onClick"], bs = { class: "text-gray-500 text-xs font-medium shrink-0" }, vs = { class: "text-right" }, ms = {
+  key: 1,
+  class: "mt-2 pt-2 border-t border-gray-100"
+}, ks = ["disabled"], ws = {
+  key: 4,
   class: "mt-3"
-}, Tt = /* @__PURE__ */ ee({
+}, Cs = /* @__PURE__ */ fe({
   __name: "OneDataTable",
-  props: Je,
+  props: lt,
   emits: [
     "update:selection",
     "update:expandedRows",
@@ -400,449 +481,568 @@ const Ge = {
     "row-collapse",
     "load:next"
   ],
-  setup(d, { emit: a }) {
-    const t = d, o = a, g = we(), f = Ce(), R = N([]);
-    je(Se, { registerColumn: (e) => {
-      R.value.push(e);
+  setup(d, { emit: n }) {
+    const t = d, i = n, h = $e(), f = Pe(), S = E([]);
+    Ye(Le, { registerColumn: (e) => {
+      S.value.push(e);
     }, unregisterColumn: (e) => {
-      const r = R.value.indexOf(e);
-      r > -1 && R.value.splice(r, 1);
+      const r = S.value.indexOf(e);
+      r > -1 && S.value.splice(r, 1);
     } });
-    const B = N(t.first), z = N(t.rows), T = N(t.sortField), O = N(t.sortOrder);
-    W(
+    const F = E(t.first), V = E(t.rows), A = E(t.sortField), j = E(t.sortOrder);
+    Q(
       () => t.first,
       (e) => {
-        B.value = e;
+        F.value = e;
       }
-    ), W(
+    ), Q(
       () => t.rows,
       (e) => {
-        z.value = e;
+        V.value = e;
       }
-    ), W(
+    ), Q(
       () => t.sortField,
       (e) => {
-        T.value = e;
+        A.value = e;
       }
-    ), W(
+    ), Q(
       () => t.sortOrder,
       (e) => {
-        O.value = e;
+        j.value = e;
       }
     );
-    const A = y(() => B.value), K = y(() => z.value), F = y(() => T.value), m = y(() => O.value), w = (e, r) => r ? r.split(".").reduce((s, u) => s == null ? void 0 : s[u], e) : e, q = (e) => t.dataKey ? w(e, t.dataKey) : e, x = (e, r) => e == null || r == null ? e === r : t.dataKey ? w(e, t.dataKey) === w(r, t.dataKey) : e === r, xe = (e, r) => t.dataKey ? w(e, t.dataKey) : r, M = y(() => R.value.some((e) => e.props.expander)), $ = y(() => !!t.selectionMode), re = y(() => t.selectionMode === "multiple"), j = y(() => R.value.filter((e) => !e.props.expander)), V = y(
-      () => R.value.length + ($.value ? 1 : 0) + (M.value ? 1 : 0)
-    ), le = y(() => {
+    const G = y(() => F.value), J = y(() => V.value), O = y(() => A.value), C = y(() => j.value), x = (e, r) => r ? r.split(".").reduce((s, u) => s == null ? void 0 : s[u], e) : e, T = (e) => t.dataKey ? x(e, t.dataKey) : e, M = (e, r) => e == null || r == null ? e === r : t.dataKey ? x(e, t.dataKey) === x(r, t.dataKey) : e === r, ge = (e, r) => t.dataKey ? x(e, t.dataKey) : r, R = y(() => S.value.some((e) => e.props.expander)), $ = y(() => !!t.selectionMode), X = y(() => t.selectionMode === "multiple"), te = y(() => S.value.filter((e) => !e.props.expander)), Y = y(
+      () => K.value.length + ($.value ? 1 : 0) + (R.value ? 1 : 0)
+    ), he = y(() => {
       var s, u;
       if (t.lazy || !t.filters)
         return t.value;
       let e = [...t.value];
       const r = t.filters;
       if ((s = r.global) != null && s.value && ((u = t.globalFilterFields) != null && u.length)) {
-        const n = r.global.value;
+        const a = r.global.value;
         e = e.filter(
-          (v) => t.globalFilterFields.some(
-            (G) => ve.contains(w(v, G), n)
+          (m) => t.globalFilterFields.some(
+            (oe) => Be.contains(x(m, oe), a)
           )
         );
       }
-      for (const [n, v] of Object.entries(r)) {
-        if (n === "global" || !v.value)
+      for (const [a, m] of Object.entries(r)) {
+        if (a === "global" || !m.value)
           continue;
-        const G = v.matchMode || "contains", ce = ve[G];
-        ce && (e = e.filter((Te) => ce(w(Te, n), v.value)));
+        const oe = m.matchMode || "contains", xe = Be[oe];
+        xe && (e = e.filter((Je) => xe(x(Je, a), m.value)));
       }
       return e;
-    }), Re = y(() => {
-      const e = le.value;
-      return t.lazy || !F.value || !m.value ? e : [...e].sort((r, s) => {
-        const u = w(r, F.value), n = w(s, F.value);
-        if (u == null && n == null)
+    }), Oe = y(() => {
+      const e = he.value;
+      return t.lazy || !O.value || !C.value ? e : [...e].sort((r, s) => {
+        const u = x(r, O.value), a = x(s, O.value);
+        if (u == null && a == null)
           return 0;
         if (u == null)
           return 1;
-        if (n == null)
+        if (a == null)
           return -1;
-        let v;
-        return typeof u == "number" && typeof n == "number" ? v = u - n : v = String(u).localeCompare(String(n)), m.value === 1 ? v : -v;
+        let m;
+        return typeof u == "number" && typeof a == "number" ? m = u - a : m = String(u).localeCompare(String(a)), C.value === 1 ? m : -m;
       });
-    }), oe = y(() => t.totalRecords ?? le.value.length), L = y(() => {
-      const e = Re.value;
+    }), be = y(() => t.totalRecords ?? he.value.length), P = y(() => {
+      const e = Oe.value;
       if (t.paginator && !t.lazy) {
-        const r = A.value, s = r + K.value;
+        const r = G.value, s = r + J.value;
         return e.slice(r, s);
       }
       return e;
-    }), _e = (e) => {
+    }), qe = (e) => {
       let r;
-      F.value === e ? m.value === 1 ? r = -1 : m.value === -1 ? r = null : r = 1 : r = 1, T.value = e, O.value = r, o("update:sortField", e), o("update:sortOrder", r), o("sort", { field: e, order: r }), !t.lazy && t.paginator && (B.value = 0, o("update:first", 0));
-    }, ae = (e) => e.props.sortField || e.props.field, Be = (e) => F.value === ae(e), I = (e) => t.selection ? t.selectionMode === "single" ? x(t.selection, e) : t.selectionMode === "multiple" ? t.selection.some((r) => x(r, e)) : !1 : !1, ne = (e, r, s) => {
-      if (o("row-click", { originalEvent: e, data: r, index: s }), t.selectionMode === "single") {
-        const u = x(t.selection, r) ? null : r;
-        o("update:selection", u), u ? o("row-select", { originalEvent: e, data: r }) : o("row-unselect", { originalEvent: e, data: r });
+      O.value === e ? C.value === 1 ? r = -1 : C.value === -1 ? r = null : r = 1 : r = 1, A.value = e, j.value = r, i("update:sortField", e), i("update:sortOrder", r), i("sort", { field: e, order: r }), !t.lazy && t.paginator && (F.value = 0, i("update:first", 0));
+    }, ve = (e) => e.props.sortField || e.props.field, Ee = (e) => O.value === ve(e), q = (e) => t.selection ? t.selectionMode === "single" ? M(t.selection, e) : t.selectionMode === "multiple" ? t.selection.some((r) => M(r, e)) : !1 : !1, Z = (e, r, s) => {
+      if (i("row-click", { originalEvent: e, data: r, index: s }), t.selectionMode === "single") {
+        const u = M(t.selection, r) ? null : r;
+        i("update:selection", u), u ? i("row-select", { originalEvent: e, data: r }) : i("row-unselect", { originalEvent: e, data: r });
       }
-    }, Fe = (e, r) => {
+    }, se = (e, r) => {
       if (e.stopPropagation(), t.selectionMode === "multiple") {
-        const s = t.selection || [], u = s.some((v) => x(v, r));
-        let n;
-        u ? (n = s.filter((v) => !x(v, r)), o("row-unselect", { originalEvent: e, data: r })) : (n = [...s, r], o("row-select", { originalEvent: e, data: r })), o("update:selection", n);
+        const s = t.selection || [], u = s.some((m) => M(m, r));
+        let a;
+        u ? (a = s.filter((m) => !M(m, r)), i("row-unselect", { originalEvent: e, data: r })) : (a = [...s, r], i("row-select", { originalEvent: e, data: r })), i("update:selection", a);
       }
-    }, ie = y(() => {
+    }, re = y(() => {
       if (t.selectionMode !== "multiple" || !t.selection)
         return !1;
       const e = t.selection;
-      return L.value.length > 0 && L.value.every((r) => e.some((s) => x(s, r)));
-    }), Me = (e) => {
+      return P.value.length > 0 && P.value.every((r) => e.some((s) => M(s, r)));
+    }), me = (e) => {
       e.stopPropagation();
       const r = t.selection || [];
-      if (ie.value) {
+      if (re.value) {
         const s = r.filter(
-          (u) => !L.value.some((n) => x(u, n))
+          (u) => !P.value.some((a) => M(u, a))
         );
-        o("update:selection", s);
+        i("update:selection", s);
       } else {
         const s = [...r];
-        L.value.forEach((u) => {
-          s.some((n) => x(n, u)) || s.push(u);
-        }), o("update:selection", s);
+        P.value.forEach((u) => {
+          s.some((a) => M(a, u)) || s.push(u);
+        }), i("update:selection", s);
       }
-    }, H = (e) => {
+    }, N = (e) => {
       if (!t.expandedRows)
         return !1;
       if (Array.isArray(t.expandedRows))
-        return t.expandedRows.some((r) => x(r, e));
+        return t.expandedRows.some((r) => M(r, e));
       if (t.dataKey) {
-        const r = String(q(e));
+        const r = String(T(e));
         return !!t.expandedRows[r];
       }
       return !1;
-    }, Pe = (e, r) => {
+    }, le = (e, r) => {
       e.stopPropagation();
-      const s = H(r);
+      const s = N(r);
       if (Array.isArray(t.expandedRows)) {
         let u;
-        s ? (u = t.expandedRows.filter((n) => !x(n, r)), o("row-collapse", { originalEvent: e, data: r })) : (u = [...t.expandedRows, r], o("row-expand", { originalEvent: e, data: r })), o("update:expandedRows", u);
+        s ? (u = t.expandedRows.filter((a) => !M(a, r)), i("row-collapse", { originalEvent: e, data: r })) : (u = [...t.expandedRows, r], i("row-expand", { originalEvent: e, data: r })), i("update:expandedRows", u);
       } else if (t.dataKey) {
-        const u = String(q(r)), n = { ...t.expandedRows };
-        s ? (delete n[u], o("row-collapse", { originalEvent: e, data: r })) : (n[u] = !0, o("row-expand", { originalEvent: e, data: r })), o("update:expandedRows", n);
+        const u = String(T(r)), a = { ...t.expandedRows };
+        s ? (delete a[u], i("row-collapse", { originalEvent: e, data: r })) : (a[u] = !0, i("row-expand", { originalEvent: e, data: r })), i("update:expandedRows", a);
       }
-    }, Oe = (e, r, s) => {
-      var n;
+    }, je = (e, r, s) => {
+      var a;
       if (!t.filters)
         return;
       const u = {
         ...t.filters,
-        [e]: { value: r, matchMode: s || ((n = t.filters[e]) == null ? void 0 : n.matchMode) || "contains" }
+        [e]: { value: r, matchMode: s || ((a = t.filters[e]) == null ? void 0 : a.matchMode) || "contains" }
       };
-      o("update:filters", u), t.lazy && o("filter", { filters: u }), t.paginator && (B.value = 0, o("update:first", 0));
-    }, de = (e) => {
+      i("update:filters", u), t.lazy && i("filter", { filters: u }), t.paginator && (F.value = 0, i("update:first", 0));
+    }, ke = (e) => {
       var r;
       return ((r = t.filters) == null ? void 0 : r[e]) || { value: null };
-    }, qe = (e) => () => {
-      t.filters && (o("update:filters", { ...t.filters }), t.lazy && o("filter", { filters: t.filters }), t.paginator && (B.value = 0, o("update:first", 0)));
-    }, $e = (e) => {
-      B.value = e, o("update:first", e);
-    }, Le = (e) => {
-      z.value = e, o("update:rows", e);
-    }, ue = y(() => {
+    }, Te = (e) => () => {
+      t.filters && (i("update:filters", { ...t.filters }), t.lazy && i("filter", { filters: t.filters }), t.paginator && (F.value = 0, i("update:first", 0)));
+    }, Ne = (e) => {
+      F.value = e, i("update:first", e);
+    }, ze = (e) => {
+      V.value = e, i("update:rows", e);
+    }, we = y(() => {
       const e = [];
       if (t.colWidths) {
         if (typeof t.colWidths == "function") {
-          const r = t.colWidths(j.value), s = [];
-          return $.value && s.push(""), M.value && s.push(""), [...s, ...r];
+          const r = t.colWidths(te.value), s = [];
+          return $.value && s.push(""), R.value && s.push(""), [...s, ...r];
         }
         return t.colWidths;
       }
-      return $.value && e.push(""), M.value && e.push(""), j.value.forEach((r) => {
+      return $.value && e.push(""), R.value && e.push(""), te.value.forEach((r) => {
         e.push(r.props.width || "");
       }), e;
-    }), pe = y(() => ue.value.some((e) => e !== "" && e != null)), Ee = y(() => t.wrapperClass ? ["overflow-x-auto", "w-full", t.wrapperClass] : t.verticalBorders === "hover-table" ? ["overflow-x-auto", "w-full", "border", "border-transparent", "rounded"] : Qe(t.wrapperBordered)), ze = y(() => {
-      const e = Xe(t.size);
+    }), Ce = y(() => we.value.some((e) => e !== "" && e != null)), Ve = y(() => t.wrapperClass ? ["overflow-x-auto", "w-full", t.wrapperClass] : t.verticalBorders === "hover-table" ? ["overflow-x-auto", "w-full", "border", "border-transparent", "rounded"] : nt(t.wrapperBordered)), Ae = y(() => {
+      const e = it(t.size);
       return t.tableClass && e.push(t.tableClass), t.bordered && e.push("border", "border-gray-100"), e;
-    });
-    return (e, r) => (l(), i("div", null, [
-      Ne(c("div", null, [
-        P(e.$slots, "default", {}, void 0, !0)
+    }), Ke = t.cardBreakpoint ? z(t.cardBreakpoint) : E(!0), We = y(() => !!t.cardBreakpoint && !Ke.value), Ue = {
+      sm: z("sm"),
+      md: z("md"),
+      lg: z("lg"),
+      xl: z("xl"),
+      "2xl": z("2xl")
+    }, Qe = (e) => {
+      var s;
+      if (!e.props.visibleFrom)
+        return !0;
+      const r = e.props.visibleFrom;
+      return ((s = Ue[r]) == null ? void 0 : s.value) ?? !0;
+    }, K = y(() => te.value.filter(Qe)), He = (e) => (r) => le(r, e), Ge = (e) => (r) => se(r, e);
+    return (e, r) => (l(), o("div", null, [
+      Ze(c("div", null, [
+        B(e.$slots, "default", {}, void 0, !0)
       ], 512), [
-        [Ae, !1]
+        [Ie, !1]
       ]),
-      p(g).header ? (l(), i("div", it, [
-        P(e.$slots, "header", {}, void 0, !0)
-      ])) : h("", !0),
-      c("div", {
-        class: b([...Ee.value, e.verticalBorders === "hover-table" ? "vb-hover" : ""])
+      p(h).header ? (l(), o("div", Ct, [
+        B(e.$slots, "header", {}, void 0, !0)
+      ])) : g("", !0),
+      We.value ? (l(), o("div", Yt, [
+        e.loading ? (l(), o("div", Zt, [
+          B(e.$slots, "loading", {}, () => [
+            c("div", It, [
+              Se(I, { class: "w-5 h-5" }),
+              c("span", null, k(p(f)("ui.dataTable.loading")), 1)
+            ])
+          ], !0)
+        ])) : P.value.length === 0 ? (l(), o("div", Dt, [
+          B(e.$slots, "empty", {}, () => [
+            c("span", es, k(p(f)("ui.dataTable.noRecords")), 1)
+          ], !0)
+        ])) : (l(), o("div", ts, [
+          X.value ? (l(), o("div", ss, [
+            c("div", {
+              class: "cursor-pointer",
+              onClick: r[2] || (r[2] = (s) => me(s))
+            }, [
+              re.value ? (l(), o("div", rs, [
+                (l(), v(w(p(D)), { class: "w-3.5 h-3.5" }))
+              ])) : (l(), o("div", ls))
+            ]),
+            c("span", os, k(p(f)("ui.dataTable.selectAll")), 1)
+          ])) : g("", !0),
+          (l(!0), o(_, null, L(P.value, (s, u) => (l(), o("div", {
+            key: ge(s, u),
+            class: b([
+              ...p(pt)(e.hoverable, q(s)),
+              e.selectionMode ? "cursor-pointer" : ""
+            ]),
+            onClick: (a) => Z(a, s, u)
+          }, [
+            p(h).card ? B(e.$slots, "card", {
+              key: 0,
+              data: s,
+              index: u,
+              selected: q(s),
+              expanded: R.value && N(s),
+              toggleExpansion: He(s),
+              toggleSelection: Ge(s)
+            }, void 0, !0) : (l(), o(_, { key: 1 }, [
+              $.value || R.value ? (l(), o("div", ns, [
+                $.value ? (l(), o("div", is, [
+                  X.value ? (l(), o("div", {
+                    key: 0,
+                    class: "cursor-pointer",
+                    onClick: U((a) => se(a, s), ["stop"])
+                  }, [
+                    q(s) ? (l(), o("div", us, [
+                      (l(), v(w(p(D)), { class: "w-3.5 h-3.5" }))
+                    ])) : (l(), o("div", ps))
+                  ], 8, ds)) : (l(), o("div", {
+                    key: 1,
+                    class: "cursor-pointer",
+                    onClick: U((a) => Z(a, s, u), ["stop"])
+                  }, [
+                    q(s) ? (l(), o("div", fs, [...r[6] || (r[6] = [
+                      c("div", { class: "w-2 h-2 rounded-full bg-white" }, null, -1)
+                    ])])) : (l(), o("div", ys))
+                  ], 8, cs))
+                ])) : (l(), o("div", gs)),
+                R.value ? (l(), o("button", {
+                  key: 2,
+                  class: "p-1 rounded hover:bg-gray-100 transition-colors",
+                  onClick: U((a) => le(a, s), ["stop"])
+                }, [
+                  (l(), v(w(N(s) ? p(ne) : p(pe)), { class: "w-4 h-4 text-gray-500" }))
+                ], 8, hs)) : g("", !0)
+              ])) : g("", !0),
+              (l(!0), o(_, null, L(K.value, (a, m) => (l(), o("div", {
+                key: m,
+                class: b(p(ct)(e.size))
+              }, [
+                c("span", bs, k(a.props.header), 1),
+                c("div", vs, [
+                  a.slots.body ? (l(), v(w(a.slots.body), {
+                    key: 0,
+                    data: s,
+                    field: a.props.field,
+                    index: u
+                  }, null, 8, ["data", "field", "index"])) : a.props.field ? (l(), o(_, { key: 1 }, [
+                    W(k(x(s, a.props.field)), 1)
+                  ], 64)) : g("", !0)
+                ])
+              ], 2))), 128)),
+              R.value && N(s) ? (l(), o("div", ms, [
+                B(e.$slots, "expansion", {
+                  data: s,
+                  index: u
+                }, void 0, !0)
+              ])) : g("", !0)
+            ], 64))
+          ], 10, as))), 128)),
+          e.hasNextPage && !e.loading ? (l(), o("button", {
+            key: 1,
+            class: "w-full p-2 rounded bg-primary-base bg-opacity-10 text-primary-base text-sm font-medium hover:bg-opacity-20 transition-colors disabled:opacity-50 disabled:cursor-default flex items-center justify-center gap-2",
+            disabled: e.loadingNext,
+            onClick: r[3] || (r[3] = (s) => i("load:next"))
+          }, [
+            e.loadingNext ? (l(), v(I, {
+              key: 0,
+              class: "w-4 h-4"
+            })) : g("", !0),
+            W(" " + k(e.loadMoreLabel || p(f)("ui.dataTable.showMore")), 1)
+          ], 8, ks)) : g("", !0)
+        ]))
+      ])) : (l(), o("div", {
+        key: 1,
+        class: b([...Ve.value, e.verticalBorders === "hover-table" ? "vb-hover" : ""])
       }, [
         c("table", {
           class: b([
-            ...ze.value,
+            ...Ae.value,
             e.verticalBorders !== "none" ? "border-separate border-spacing-0" : "border-collapse",
             e.verticalBorders === "hover" ? "vb-hover" : "",
-            pe.value ? "table-fixed" : ""
+            Ce.value ? "table-fixed" : ""
           ])
         }, [
-          pe.value ? (l(), i("colgroup", dt, [
-            (l(!0), i(_, null, E(ue.value, (s, u) => (l(), i("col", {
+          Ce.value ? (l(), o("colgroup", xt, [
+            (l(!0), o(_, null, L(we.value, (s, u) => (l(), o("col", {
               key: `col-${u}`,
-              style: J(s ? { width: s } : {})
+              style: ae(s ? { width: s } : {})
             }, null, 4))), 128))
-          ])) : h("", !0),
+          ])) : g("", !0),
           c("thead", null, [
             c("tr", null, [
-              $.value ? (l(), i("th", {
+              $.value ? (l(), o("th", {
                 key: 0,
                 class: b([
-                  ...p(X)(e.size, !1, e.verticalBorders, e.headerVariant, e.headerBgClass),
-                  ...p(D)(e.size)
+                  ...p(ie)(e.size, !1, e.verticalBorders, e.headerVariant, e.headerBgClass),
+                  ...p(ce)(e.size)
                 ])
               }, [
-                re.value ? (l(), i("div", {
+                X.value ? (l(), o("div", {
                   key: 0,
                   class: "flex items-center justify-center cursor-pointer",
-                  onClick: r[0] || (r[0] = (s) => Me(s))
+                  onClick: r[0] || (r[0] = (s) => me(s))
                 }, [
-                  ie.value ? (l(), i("div", ut, [
-                    (l(), C(k(p(he)), { class: "w-3.5 h-3.5" }))
-                  ])) : (l(), i("div", pt))
-                ])) : h("", !0)
-              ], 2)) : h("", !0),
-              M.value ? (l(), i("th", {
+                  re.value ? (l(), o("div", _t, [
+                    (l(), v(w(p(D)), { class: "w-3.5 h-3.5" }))
+                  ])) : (l(), o("div", St))
+                ])) : g("", !0)
+              ], 2)) : g("", !0),
+              R.value ? (l(), o("th", {
                 key: 1,
                 class: b([
-                  ...p(X)(e.size, !1, e.verticalBorders, e.headerVariant, e.headerBgClass),
-                  ...p(me)(e.size)
+                  ...p(ie)(e.size, !1, e.verticalBorders, e.headerVariant, e.headerBgClass),
+                  ...p(Me)(e.size)
                 ])
-              }, null, 2)) : h("", !0),
-              (l(!0), i(_, null, E(j.value, (s, u) => (l(), i("th", {
+              }, null, 2)) : g("", !0),
+              (l(!0), o(_, null, L(K.value, (s, u) => (l(), o("th", {
                 key: u,
                 class: b([
-                  ...p(X)(e.size, s.props.sortable, e.verticalBorders, e.headerVariant, e.headerBgClass),
+                  ...p(ie)(e.size, s.props.sortable, e.verticalBorders, e.headerVariant, e.headerBgClass),
                   s.props.headerClass
                 ]),
-                style: J([s.props.headerStyle, s.props.width ? { width: s.props.width } : {}]),
-                onClick: (n) => s.props.sortable ? _e(ae(s)) : void 0
+                style: ae([s.props.headerStyle, s.props.width ? { width: s.props.width } : {}]),
+                onClick: (a) => s.props.sortable ? qe(ve(s)) : void 0
               }, [
-                s.slots.header ? (l(), C(k(s.slots.header), { key: 0 })) : (l(), i("span", ft, [
-                  Q(S(s.props.header) + " ", 1),
-                  s.props.sortable ? (l(), i(_, { key: 0 }, [
-                    Be(s) ? m.value === 1 ? (l(), C(k(p(Ue)), {
+                s.slots.header ? (l(), v(w(s.slots.header), { key: 0 })) : (l(), o("span", Bt, [
+                  W(k(s.props.header) + " ", 1),
+                  s.props.sortable ? (l(), o(_, { key: 0 }, [
+                    Ee(s) ? C.value === 1 ? (l(), v(w(p(et)), {
                       key: 1,
-                      class: b(p(U)(!0))
-                    }, null, 8, ["class"])) : m.value === -1 ? (l(), C(k(p(ge)), {
+                      class: b(p(ee)(!0))
+                    }, null, 8, ["class"])) : C.value === -1 ? (l(), v(w(p(ne)), {
                       key: 2,
-                      class: b(p(U)(!0))
-                    }, null, 8, ["class"])) : (l(), C(k(p(be)), {
+                      class: b(p(ee)(!0))
+                    }, null, 8, ["class"])) : (l(), v(w(p(Re)), {
                       key: 3,
-                      class: b(p(U)(!1))
-                    }, null, 8, ["class"])) : (l(), C(k(p(be)), {
+                      class: b(p(ee)(!1))
+                    }, null, 8, ["class"])) : (l(), v(w(p(Re)), {
                       key: 0,
-                      class: b(p(U)(!1))
+                      class: b(p(ee)(!1))
                     }, null, 8, ["class"]))
-                  ], 64)) : h("", !0)
+                  ], 64)) : g("", !0)
                 ]))
-              ], 14, ct))), 128))
+              ], 14, Rt))), 128))
             ]),
-            e.filterDisplay === "row" ? (l(), i("tr", yt, [
-              $.value ? (l(), i("th", {
+            e.filterDisplay === "row" ? (l(), o("tr", Mt, [
+              $.value ? (l(), o("th", {
                 key: 0,
-                class: b(p(Z)(e.size))
-              }, null, 2)) : h("", !0),
-              M.value ? (l(), i("th", {
+                class: b(p(ue)(e.size))
+              }, null, 2)) : g("", !0),
+              R.value ? (l(), o("th", {
                 key: 1,
-                class: b(p(Z)(e.size))
-              }, null, 2)) : h("", !0),
-              (l(!0), i(_, null, E(j.value, (s, u) => (l(), i("th", {
+                class: b(p(ue)(e.size))
+              }, null, 2)) : g("", !0),
+              (l(!0), o(_, null, L(K.value, (s, u) => (l(), o("th", {
                 key: `filter-${u}`,
-                class: b(p(Z)(e.size))
+                class: b(p(ue)(e.size))
               }, [
-                s.props.filterable && s.slots.filter ? (l(), C(k(s.slots.filter), {
+                s.props.filterable && s.slots.filter ? (l(), v(w(s.slots.filter), {
                   key: 0,
-                  filterModel: de(
+                  filterModel: ke(
                     s.props.filterField || s.props.field
                   ),
-                  filterCallback: qe(
+                  filterCallback: Te(
                     s.props.filterField || s.props.field
                   )
-                }, null, 8, ["filterModel", "filterCallback"])) : s.props.filterable && s.props.field ? (l(), i("input", {
+                }, null, 8, ["filterModel", "filterCallback"])) : s.props.filterable && s.props.field ? (l(), o("input", {
                   key: 1,
                   type: "text",
-                  value: de(
+                  value: ke(
                     s.props.filterField || s.props.field
                   ).value || "",
                   class: "w-full border border-gray-300 rounded px-2 py-1 text-sm focus:outline-none focus:ring-1 focus:ring-primary-glow",
                   placeholder: `Filter ${s.props.header || s.props.field}`,
-                  onInput: (n) => Oe(
+                  onInput: (a) => je(
                     s.props.filterField || s.props.field,
-                    n.target.value
+                    a.target.value
                   )
-                }, null, 40, gt)) : h("", !0)
+                }, null, 40, Ft)) : g("", !0)
               ], 2))), 128))
-            ])) : h("", !0)
+            ])) : g("", !0)
           ]),
-          !e.loading && L.value.length > 0 ? (l(), i("tbody", ht, [
-            (l(!0), i(_, null, E(L.value, (s, u) => (l(), i(_, {
-              key: xe(s, u)
+          !e.loading && P.value.length > 0 ? (l(), o("tbody", $t, [
+            (l(!0), o(_, null, L(P.value, (s, u) => (l(), o(_, {
+              key: ge(s, u)
             }, [
               c("tr", {
                 class: b([
-                  ...p(Ye)(
+                  ...p(dt)(
                     e.striped,
                     e.hoverable,
                     u % 2 === 1,
-                    I(s),
+                    q(s),
                     !1
                   ),
                   e.selectionMode ? "cursor-pointer" : ""
                 ]),
-                onClick: (n) => ne(n, s, u)
+                onClick: (a) => Z(a, s, u)
               }, [
-                $.value ? (l(), i("td", {
+                $.value ? (l(), o("td", {
                   key: 0,
                   class: b([
-                    ...p(Y)(e.size, e.bordered, e.verticalBorders, e.bodyBgClass),
-                    ...p(D)(e.size)
+                    ...p(de)(e.size, e.bordered, e.verticalBorders, e.bodyBgClass),
+                    ...p(ce)(e.size)
                   ])
                 }, [
-                  re.value ? (l(), i("div", {
+                  X.value ? (l(), o("div", {
                     key: 0,
                     class: "flex items-center justify-center cursor-pointer",
-                    onClick: fe((n) => Fe(n, s), ["stop"])
+                    onClick: U((a) => se(a, s), ["stop"])
                   }, [
-                    I(s) ? (l(), i("div", mt, [
-                      (l(), C(k(p(he)), { class: "w-3.5 h-3.5" }))
-                    ])) : (l(), i("div", wt))
-                  ], 8, vt)) : (l(), i("div", {
+                    q(s) ? (l(), o("div", Ot, [
+                      (l(), v(w(p(D)), { class: "w-3.5 h-3.5" }))
+                    ])) : (l(), o("div", qt))
+                  ], 8, Lt)) : (l(), o("div", {
                     key: 1,
                     class: "flex items-center justify-center cursor-pointer",
-                    onClick: fe((n) => ne(n, s, u), ["stop"])
+                    onClick: U((a) => Z(a, s, u), ["stop"])
                   }, [
-                    I(s) ? (l(), i("div", kt, [...r[3] || (r[3] = [
+                    q(s) ? (l(), o("div", jt, [...r[5] || (r[5] = [
                       c("div", { class: "w-2 h-2 rounded-full bg-white" }, null, -1)
-                    ])])) : (l(), i("div", St))
-                  ], 8, Ct))
-                ], 2)) : h("", !0),
-                M.value ? (l(), i("td", {
+                    ])])) : (l(), o("div", Tt))
+                  ], 8, Et))
+                ], 2)) : g("", !0),
+                R.value ? (l(), o("td", {
                   key: 1,
                   class: b([
-                    ...p(Y)(e.size, e.bordered, e.verticalBorders, e.bodyBgClass),
-                    ...p(me)(e.size)
+                    ...p(de)(e.size, e.bordered, e.verticalBorders, e.bodyBgClass),
+                    ...p(Me)(e.size)
                   ])
                 }, [
                   c("button", {
                     class: "p-1 rounded hover:bg-gray-100 transition-colors",
-                    onClick: (n) => Pe(n, s)
+                    onClick: (a) => le(a, s)
                   }, [
-                    (l(), C(k(H(s) ? p(ge) : p(ke)), { class: "w-4 h-4 text-gray-500" }))
-                  ], 8, xt)
-                ], 2)) : h("", !0),
-                (l(!0), i(_, null, E(j.value, (n, v) => (l(), i("td", {
-                  key: v,
+                    (l(), v(w(N(s) ? p(ne) : p(pe)), { class: "w-4 h-4 text-gray-500" }))
+                  ], 8, Nt)
+                ], 2)) : g("", !0),
+                (l(!0), o(_, null, L(K.value, (a, m) => (l(), o("td", {
+                  key: m,
                   class: b([
-                    ...p(Y)(e.size, e.bordered, e.verticalBorders, e.bodyBgClass),
-                    n.props.bodyClass
+                    ...p(de)(e.size, e.bordered, e.verticalBorders, e.bodyBgClass),
+                    a.props.bodyClass
                   ]),
-                  style: J(n.props.bodyStyle)
+                  style: ae(a.props.bodyStyle)
                 }, [
-                  n.slots.body ? (l(), C(k(n.slots.body), {
+                  a.slots.body ? (l(), v(w(a.slots.body), {
                     key: 0,
                     data: s,
-                    field: n.props.field,
+                    field: a.props.field,
                     index: u
-                  }, null, 8, ["data", "field", "index"])) : n.props.field ? (l(), i(_, { key: 1 }, [
-                    Q(S(w(s, n.props.field)), 1)
-                  ], 64)) : h("", !0)
+                  }, null, 8, ["data", "field", "index"])) : a.props.field ? (l(), o(_, { key: 1 }, [
+                    W(k(x(s, a.props.field)), 1)
+                  ], 64)) : g("", !0)
                 ], 6))), 128))
-              ], 10, bt),
-              M.value && H(s) ? (l(), i("tr", Rt, [
+              ], 10, Pt),
+              R.value && N(s) ? (l(), o("tr", zt, [
                 c("td", {
-                  colspan: V.value,
+                  colspan: Y.value,
                   class: "p-0"
                 }, [
-                  P(e.$slots, "expansion", {
+                  B(e.$slots, "expansion", {
                     data: s,
                     index: u
                   }, void 0, !0)
-                ], 8, _t)
-              ])) : h("", !0)
+                ], 8, Vt)
+              ])) : g("", !0)
             ], 64))), 128))
-          ])) : e.loading ? (l(), i("tbody", Bt, [
+          ])) : e.loading ? (l(), o("tbody", At, [
             c("tr", null, [
               c("td", {
-                colspan: V.value,
+                colspan: Y.value,
                 class: "text-center py-12"
               }, [
-                P(e.$slots, "loading", {}, () => [
-                  c("div", Mt, [
-                    Ke(ye, { class: "w-5 h-5" }),
-                    c("span", null, S(p(f)("ui.dataTable.loading")), 1)
+                B(e.$slots, "loading", {}, () => [
+                  c("div", Wt, [
+                    Se(I, { class: "w-5 h-5" }),
+                    c("span", null, k(p(f)("ui.dataTable.loading")), 1)
                   ])
                 ], !0)
-              ], 8, Ft)
+              ], 8, Kt)
             ])
-          ])) : (l(), i("tbody", Pt, [
+          ])) : (l(), o("tbody", Ut, [
             c("tr", null, [
               c("td", {
-                colspan: V.value,
+                colspan: Y.value,
                 class: "text-center py-12"
               }, [
-                P(e.$slots, "empty", {}, () => [
-                  c("span", qt, S(p(f)("ui.dataTable.noRecords")), 1)
+                B(e.$slots, "empty", {}, () => [
+                  c("span", Ht, k(p(f)("ui.dataTable.noRecords")), 1)
                 ], !0)
-              ], 8, Ot)
+              ], 8, Qt)
             ])
           ])),
-          e.hasNextPage && !e.loading ? (l(), i("tfoot", $t, [
+          e.hasNextPage && !e.loading ? (l(), o("tfoot", Gt, [
             c("tr", null, [
               c("td", {
-                colspan: V.value,
+                colspan: Y.value,
                 class: "px-3 pb-3 pt-2"
               }, [
                 c("button", {
                   class: "w-full p-2 rounded bg-primary-base bg-opacity-10 text-primary-base text-sm font-medium hover:bg-opacity-20 transition-colors disabled:opacity-50 disabled:cursor-default flex items-center justify-center gap-2",
                   disabled: e.loadingNext,
-                  onClick: r[1] || (r[1] = (s) => o("load:next"))
+                  onClick: r[1] || (r[1] = (s) => i("load:next"))
                 }, [
-                  e.loadingNext ? (l(), C(ye, {
+                  e.loadingNext ? (l(), v(I, {
                     key: 0,
                     class: "w-4 h-4"
-                  })) : h("", !0),
-                  Q(" " + S(e.loadMoreLabel || p(f)("ui.dataTable.showMore")), 1)
-                ], 8, Et)
-              ], 8, Lt)
+                  })) : g("", !0),
+                  W(" " + k(e.loadMoreLabel || p(f)("ui.dataTable.showMore")), 1)
+                ], 8, Xt)
+              ], 8, Jt)
             ])
-          ])) : h("", !0)
+          ])) : g("", !0)
         ], 2)
-      ], 2),
-      e.paginator && oe.value > 0 ? (l(), C(nt, {
-        key: 1,
-        first: A.value,
-        rows: K.value,
-        "total-records": oe.value,
+      ], 2)),
+      e.paginator && be.value > 0 ? (l(), v(wt, {
+        key: 3,
+        first: G.value,
+        rows: J.value,
+        "total-records": be.value,
         "rows-per-page-options": e.rowsPerPageOptions,
-        "onUpdate:first": $e,
-        "onUpdate:rows": Le,
-        onPage: r[2] || (r[2] = (s) => o("page", s))
-      }, null, 8, ["first", "rows", "total-records", "rows-per-page-options"])) : h("", !0),
-      p(g).footer ? (l(), i("div", zt, [
-        P(e.$slots, "footer", {}, void 0, !0)
-      ])) : h("", !0)
+        "onUpdate:first": Ne,
+        "onUpdate:rows": ze,
+        onPage: r[4] || (r[4] = (s) => i("page", s))
+      }, null, 8, ["first", "rows", "total-records", "rows-per-page-options"])) : g("", !0),
+      p(h).footer ? (l(), o("div", ws, [
+        B(e.$slots, "footer", {}, void 0, !0)
+      ])) : g("", !0)
     ]));
   }
 });
-const Ht = /* @__PURE__ */ Ie(Tt, [["__scopeId", "data-v-abd207a8"]]), Gt = /* @__PURE__ */ ee({
+const Ps = /* @__PURE__ */ tt(Cs, [["__scopeId", "data-v-f7613b9d"]]), Ls = /* @__PURE__ */ fe({
   __name: "OneColumn",
-  props: Ge,
+  props: rt,
   setup(d) {
-    const a = d, t = we(), o = Ve(Se), g = {
-      props: a,
+    const n = d, t = $e(), i = De(Le), h = {
+      props: n,
       slots: t
     };
-    return o && o.registerColumn(g), We(() => {
-      o && o.unregisterColumn(g);
-    }), (f, R) => P(f.$slots, "default");
+    return i && i.registerColumn(h), Fe(() => {
+      i && i.unregisterColumn(h);
+    }), (f, S) => B(f.$slots, "default");
   }
 });
 export {
-  Gt as OneColumn,
-  Ht as OneDataTable,
-  nt as OneDataTablePaginator
+  Ls as OneColumn,
+  Ps as OneDataTable,
+  wt as OneDataTablePaginator
 };