@oneb/ui-vue 0.3.13 → 0.3.15

package/dist/dataTable/index.js

@@ -1,11 +1,848 @@
-import { _ as p, O as n, a as O } from "../index-98daa7ed.js";
-import "vue";
-import "../useI18n-2103b39e.js";
-import "../ChevronRightIcon-8df1af46.js";
-import "../SpinnerIcon-516264ba.js";
-import "../_plugin-vue_export-helper-dad06003.js";
+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 "../SpinnerIcon.vue_vue_type_style_index_0_lang-4ed993c7.js";
+function He(d, a) {
+  return l(), i("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.8",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    c("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M15.75 19.5L8.25 12l7.5-7.5"
+    })
+  ]);
+}
+function be(d, a) {
+  return l(), i("svg", {
+    xmlns: "http://www.w3.org/2000/svg",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    "stroke-width": "1.8",
+    stroke: "currentColor",
+    "aria-hidden": "true"
+  }, [
+    c("path", {
+      "stroke-linecap": "round",
+      "stroke-linejoin": "round",
+      d: "M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"
+    })
+  ]);
+}
+const Ge = {
+  field: {
+    type: String,
+    required: !1
+  },
+  header: {
+    type: String,
+    required: !1
+  },
+  sortable: {
+    type: Boolean,
+    default: !1
+  },
+  sortField: {
+    type: String,
+    required: !1
+  },
+  filterable: {
+    type: Boolean,
+    default: !1
+  },
+  filterField: {
+    type: String,
+    required: !1
+  },
+  expander: {
+    type: Boolean,
+    default: !1
+  },
+  width: {
+    type: String,
+    required: !1
+  },
+  headerClass: {
+    type: String,
+    required: !1
+  },
+  bodyClass: {
+    type: String,
+    required: !1
+  },
+  headerStyle: {
+    type: [String, Object],
+    required: !1
+  },
+  bodyStyle: {
+    type: [String, Object],
+    required: !1
+  }
+}, Je = {
+  value: {
+    type: Array,
+    default: () => []
+  },
+  dataKey: {
+    type: String,
+    required: !1
+  },
+  lazy: {
+    type: Boolean,
+    default: !1
+  },
+  paginator: {
+    type: Boolean,
+    default: !1
+  },
+  rows: {
+    type: Number,
+    default: 10
+  },
+  first: {
+    type: Number,
+    default: 0
+  },
+  totalRecords: {
+    type: Number,
+    required: !1
+  },
+  rowsPerPageOptions: {
+    type: Array,
+    default: () => [10, 25, 50, 100]
+  },
+  sortField: {
+    type: String,
+    required: !1
+  },
+  sortOrder: {
+    type: Number,
+    default: null
+  },
+  selectionMode: {
+    type: String,
+    required: !1
+  },
+  selection: {
+    type: [Object, Array],
+    required: !1
+  },
+  expandedRows: {
+    type: [Array, Object],
+    default: () => []
+  },
+  filters: {
+    type: Object,
+    required: !1
+  },
+  filterDisplay: {
+    type: String,
+    default: null
+  },
+  globalFilterFields: {
+    type: Array,
+    required: !1
+  },
+  loading: {
+    type: Boolean,
+    default: !1
+  },
+  striped: {
+    type: Boolean,
+    default: !1
+  },
+  hoverable: {
+    type: Boolean,
+    default: !0
+  },
+  bordered: {
+    type: Boolean,
+    default: !1
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  tableClass: {
+    type: String,
+    required: !1
+  },
+  hasNextPage: {
+    type: Boolean,
+    default: !1
+  },
+  loadingNext: {
+    type: Boolean,
+    default: !1
+  },
+  loadMoreLabel: {
+    type: String,
+    default: ""
+  },
+  colWidths: {
+    type: [Array, Function],
+    required: !1
+  },
+  verticalBorders: {
+    type: String,
+    default: "none"
+  },
+  headerVariant: {
+    type: String,
+    default: "default"
+  },
+  headerBgClass: {
+    type: String,
+    required: !1
+  },
+  bodyBgClass: {
+    type: String,
+    required: !1
+  },
+  wrapperClass: {
+    type: String,
+    required: !1
+  },
+  wrapperBordered: {
+    type: Boolean,
+    default: !0
+  }
+}, 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) => {
+  const f = [];
+  return o === "minimal" ? f.push(
+    g || "bg-gray-50",
+    "text-gray-700",
+    "font-medium",
+    "text-sm",
+    "normal-case",
+    "border-b",
+    "border-gray-200"
+  ) : f.push(
+    g || "bg-gray-100",
+    "text-gray-600",
+    "font-semibold",
+    "text-xs",
+    "uppercase",
+    "tracking-wide",
+    "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) => {
+  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 = () => [
+  "flex",
+  "items-center",
+  "justify-between",
+  "px-2",
+  "py-2",
+  "border-t",
+  "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({
+  __name: "OneDataTablePaginator",
+  props: {
+    first: {
+      type: Number,
+      required: !0
+    },
+    rows: {
+      type: Number,
+      required: !0
+    },
+    totalRecords: {
+      type: Number,
+      required: !0
+    },
+    rowsPerPageOptions: {
+      type: Array,
+      default: () => [10, 25, 50, 100]
+    }
+  },
+  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,
+        rows: t.rows,
+        page: Math.floor(m / 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", {
+        first: 0,
+        rows: w,
+        page: 0,
+        pageCount: Math.ceil(t.totalRecords / w)
+      });
+    };
+    return (m, w) => (l(), i("div", {
+      class: b(T.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", {
+          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
+        }, [
+          (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)
+      ]),
+      c("div", rt, [
+        c("button", {
+          disabled: B.value,
+          class: "p-1.5 rounded hover:bg-gray-100 disabled:opacity-30 disabled:cursor-default transition-colors",
+          onClick: A
+        }, [
+          (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),
+        c("button", {
+          disabled: z.value,
+          class: "p-1.5 rounded hover:bg-gray-100 disabled:opacity-30 disabled:cursor-default transition-colors",
+          onClick: K
+        }, [
+          (l(), C(k(p(ke)), { class: "w-4 h-4 text-gray-600" }))
+        ], 8, at)
+      ])
+    ], 2));
+  }
+}), it = {
+  key: 0,
+  class: "mb-3"
+}, dt = { key: 0 }, ut = {
+  key: 0,
+  class: "w-5 h-5 rounded bg-primary-base flex items-center justify-center text-white"
+}, pt = {
+  key: 1,
+  class: "w-5 h-5 rounded border border-gray-300 bg-white"
+}, ct = ["onClick"], ft = {
+  key: 1,
+  class: "inline-flex items-center gap-1"
+}, yt = { key: 0 }, gt = ["value", "placeholder", "onInput"], ht = { key: 1 }, bt = ["onClick"], vt = ["onClick"], mt = {
+  key: 0,
+  class: "w-5 h-5 rounded bg-primary-base flex items-center justify-center text-white"
+}, wt = {
+  key: 1,
+  class: "w-5 h-5 rounded border border-gray-300 bg-white"
+}, Ct = ["onClick"], kt = {
+  key: 0,
+  class: "w-5 h-5 rounded-full bg-primary-base flex items-center justify-center"
+}, St = {
+  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 = {
+  key: 2,
+  class: "mt-3"
+}, Tt = /* @__PURE__ */ ee({
+  __name: "OneDataTable",
+  props: Je,
+  emits: [
+    "update:selection",
+    "update:expandedRows",
+    "update:first",
+    "update:rows",
+    "update:sortField",
+    "update:sortOrder",
+    "update:filters",
+    "sort",
+    "page",
+    "filter",
+    "row-click",
+    "row-select",
+    "row-unselect",
+    "row-expand",
+    "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);
+    }, unregisterColumn: (e) => {
+      const r = R.value.indexOf(e);
+      r > -1 && R.value.splice(r, 1);
+    } });
+    const B = N(t.first), z = N(t.rows), T = N(t.sortField), O = N(t.sortOrder);
+    W(
+      () => t.first,
+      (e) => {
+        B.value = e;
+      }
+    ), W(
+      () => t.rows,
+      (e) => {
+        z.value = e;
+      }
+    ), W(
+      () => t.sortField,
+      (e) => {
+        T.value = e;
+      }
+    ), W(
+      () => t.sortOrder,
+      (e) => {
+        O.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(() => {
+      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;
+        e = e.filter(
+          (v) => t.globalFilterFields.some(
+            (G) => ve.contains(w(v, G), n)
+          )
+        );
+      }
+      for (const [n, v] of Object.entries(r)) {
+        if (n === "global" || !v.value)
+          continue;
+        const G = v.matchMode || "contains", ce = ve[G];
+        ce && (e = e.filter((Te) => ce(w(Te, n), v.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)
+          return 0;
+        if (u == null)
+          return 1;
+        if (n == 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;
+      });
+    }), oe = y(() => t.totalRecords ?? le.value.length), L = y(() => {
+      const e = Re.value;
+      if (t.paginator && !t.lazy) {
+        const r = A.value, s = r + K.value;
+        return e.slice(r, s);
+      }
+      return e;
+    }), _e = (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 });
+      }
+    }, Fe = (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);
+      }
+    }, ie = 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) => {
+      e.stopPropagation();
+      const r = t.selection || [];
+      if (ie.value) {
+        const s = r.filter(
+          (u) => !L.value.some((n) => x(u, n))
+        );
+        o("update:selection", s);
+      } else {
+        const s = [...r];
+        L.value.forEach((u) => {
+          s.some((n) => x(n, u)) || s.push(u);
+        }), o("update:selection", s);
+      }
+    }, H = (e) => {
+      if (!t.expandedRows)
+        return !1;
+      if (Array.isArray(t.expandedRows))
+        return t.expandedRows.some((r) => x(r, e));
+      if (t.dataKey) {
+        const r = String(q(e));
+        return !!t.expandedRows[r];
+      }
+      return !1;
+    }, Pe = (e, r) => {
+      e.stopPropagation();
+      const s = H(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);
+      } 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);
+      }
+    }, Oe = (e, r, s) => {
+      var n;
+      if (!t.filters)
+        return;
+      const u = {
+        ...t.filters,
+        [e]: { value: r, matchMode: s || ((n = t.filters[e]) == null ? void 0 : n.matchMode) || "contains" }
+      };
+      o("update:filters", u), t.lazy && o("filter", { filters: u }), t.paginator && (B.value = 0, o("update:first", 0));
+    }, de = (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(() => {
+      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];
+        }
+        return t.colWidths;
+      }
+      return $.value && e.push(""), M.value && e.push(""), j.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);
+      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)
+      ], 512), [
+        [Ae, !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" : ""])
+      }, [
+        c("table", {
+          class: b([
+            ...ze.value,
+            e.verticalBorders !== "none" ? "border-separate border-spacing-0" : "border-collapse",
+            e.verticalBorders === "hover" ? "vb-hover" : "",
+            pe.value ? "table-fixed" : ""
+          ])
+        }, [
+          pe.value ? (l(), i("colgroup", dt, [
+            (l(!0), i(_, null, E(ue.value, (s, u) => (l(), i("col", {
+              key: `col-${u}`,
+              style: J(s ? { width: s } : {})
+            }, null, 4))), 128))
+          ])) : h("", !0),
+          c("thead", null, [
+            c("tr", null, [
+              $.value ? (l(), i("th", {
+                key: 0,
+                class: b([
+                  ...p(X)(e.size, !1, e.verticalBorders, e.headerVariant, e.headerBgClass),
+                  ...p(D)(e.size)
+                ])
+              }, [
+                re.value ? (l(), i("div", {
+                  key: 0,
+                  class: "flex items-center justify-center cursor-pointer",
+                  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", {
+                key: 1,
+                class: b([
+                  ...p(X)(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", {
+                key: u,
+                class: b([
+                  ...p(X)(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
+              }, [
+                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)), {
+                      key: 1,
+                      class: b(p(U)(!0))
+                    }, null, 8, ["class"])) : m.value === -1 ? (l(), C(k(p(ge)), {
+                      key: 2,
+                      class: b(p(U)(!0))
+                    }, null, 8, ["class"])) : (l(), C(k(p(be)), {
+                      key: 3,
+                      class: b(p(U)(!1))
+                    }, null, 8, ["class"])) : (l(), C(k(p(be)), {
+                      key: 0,
+                      class: b(p(U)(!1))
+                    }, null, 8, ["class"]))
+                  ], 64)) : h("", !0)
+                ]))
+              ], 14, ct))), 128))
+            ]),
+            e.filterDisplay === "row" ? (l(), i("tr", yt, [
+              $.value ? (l(), i("th", {
+                key: 0,
+                class: b(p(Z)(e.size))
+              }, null, 2)) : h("", !0),
+              M.value ? (l(), i("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", {
+                key: `filter-${u}`,
+                class: b(p(Z)(e.size))
+              }, [
+                s.props.filterable && s.slots.filter ? (l(), C(k(s.slots.filter), {
+                  key: 0,
+                  filterModel: de(
+                    s.props.filterField || s.props.field
+                  ),
+                  filterCallback: qe(
+                    s.props.filterField || s.props.field
+                  )
+                }, null, 8, ["filterModel", "filterCallback"])) : s.props.filterable && s.props.field ? (l(), i("input", {
+                  key: 1,
+                  type: "text",
+                  value: de(
+                    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(
+                    s.props.filterField || s.props.field,
+                    n.target.value
+                  )
+                }, null, 40, gt)) : h("", !0)
+              ], 2))), 128))
+            ])) : h("", !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)
+            }, [
+              c("tr", {
+                class: b([
+                  ...p(Ye)(
+                    e.striped,
+                    e.hoverable,
+                    u % 2 === 1,
+                    I(s),
+                    !1
+                  ),
+                  e.selectionMode ? "cursor-pointer" : ""
+                ]),
+                onClick: (n) => ne(n, s, u)
+              }, [
+                $.value ? (l(), i("td", {
+                  key: 0,
+                  class: b([
+                    ...p(Y)(e.size, e.bordered, e.verticalBorders, e.bodyBgClass),
+                    ...p(D)(e.size)
+                  ])
+                }, [
+                  re.value ? (l(), i("div", {
+                    key: 0,
+                    class: "flex items-center justify-center cursor-pointer",
+                    onClick: fe((n) => Fe(n, 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", {
+                    key: 1,
+                    class: "flex items-center justify-center cursor-pointer",
+                    onClick: fe((n) => ne(n, s, u), ["stop"])
+                  }, [
+                    I(s) ? (l(), i("div", kt, [...r[3] || (r[3] = [
+                      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", {
+                  key: 1,
+                  class: b([
+                    ...p(Y)(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)
+                  }, [
+                    (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,
+                  class: b([
+                    ...p(Y)(e.size, e.bordered, e.verticalBorders, e.bodyBgClass),
+                    n.props.bodyClass
+                  ]),
+                  style: J(n.props.bodyStyle)
+                }, [
+                  n.slots.body ? (l(), C(k(n.slots.body), {
+                    key: 0,
+                    data: s,
+                    field: n.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)
+                ], 6))), 128))
+              ], 10, bt),
+              M.value && H(s) ? (l(), i("tr", Rt, [
+                c("td", {
+                  colspan: V.value,
+                  class: "p-0"
+                }, [
+                  P(e.$slots, "expansion", {
+                    data: s,
+                    index: u
+                  }, void 0, !0)
+                ], 8, _t)
+              ])) : h("", !0)
+            ], 64))), 128))
+          ])) : e.loading ? (l(), i("tbody", Bt, [
+            c("tr", null, [
+              c("td", {
+                colspan: V.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)
+                  ])
+                ], !0)
+              ], 8, Ft)
+            ])
+          ])) : (l(), i("tbody", Pt, [
+            c("tr", null, [
+              c("td", {
+                colspan: V.value,
+                class: "text-center py-12"
+              }, [
+                P(e.$slots, "empty", {}, () => [
+                  c("span", qt, S(p(f)("ui.dataTable.noRecords")), 1)
+                ], !0)
+              ], 8, Ot)
+            ])
+          ])),
+          e.hasNextPage && !e.loading ? (l(), i("tfoot", $t, [
+            c("tr", null, [
+              c("td", {
+                colspan: V.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"))
+                }, [
+                  e.loadingNext ? (l(), C(ye, {
+                    key: 0,
+                    class: "w-4 h-4"
+                  })) : h("", !0),
+                  Q(" " + S(e.loadMoreLabel || p(f)("ui.dataTable.showMore")), 1)
+                ], 8, Et)
+              ], 8, Lt)
+            ])
+          ])) : h("", !0)
+        ], 2)
+      ], 2),
+      e.paginator && oe.value > 0 ? (l(), C(nt, {
+        key: 1,
+        first: A.value,
+        rows: K.value,
+        "total-records": oe.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)
+    ]));
+  }
+});
+const Ht = /* @__PURE__ */ Ie(Tt, [["__scopeId", "data-v-abd207a8"]]), Gt = /* @__PURE__ */ ee({
+  __name: "OneColumn",
+  props: Ge,
+  setup(d) {
+    const a = d, t = we(), o = Ve(Se), g = {
+      props: a,
+      slots: t
+    };
+    return o && o.registerColumn(g), We(() => {
+      o && o.unregisterColumn(g);
+    }), (f, R) => P(f.$slots, "default");
+  }
+});
 export {
-  p as OneColumn,
-  n as OneDataTable,
-  O as OneDataTablePaginator
+  Gt as OneColumn,
+  Ht as OneDataTable,
+  nt as OneDataTablePaginator
 };