@oneb/ui-vue 0.2.14 → 0.2.16

package/dist/index-b101fe42.js

@@ -0,0 +1,796 @@
+import { openBlock as l, createElementBlock as n, createElementVNode as c, defineComponent as D, computed as f, normalizeClass as g, toDisplayString as S, Fragment as R, renderList as B, createCommentVNode as y, createBlock as m, resolveDynamicComponent as k, unref as p, useSlots as be, ref as z, provide as Ee, watch as T, withDirectives as ze, renderSlot as F, vShow as Be, normalizeStyle as de, createTextVNode as J, withModifiers as ue, createVNode as je, inject as Ne, onBeforeUnmount as Ke } from "vue";
+import { b as ve, r as Ae, a as pe } from "./ChevronRightIcon-8df1af46.js";
+import { S as ce } from "./SpinnerIcon-24e552a8.js";
+function fe(a, d) {
+  return l(), n("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: "M4.5 12.75l6 6 9-13.5"
+    })
+  ]);
+}
+function Te(a, d) {
+  return l(), n("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 ye(a, d) {
+  return l(), n("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 Ve = {
+  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
+  }
+}, Ue = {
+  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
+  },
+  emptyMessage: {
+    type: String,
+    default: "No records found"
+  },
+  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: "Show more"
+  }
+}, me = Symbol("OneDataTable"), ge = {
+  contains: (a, d) => String(a ?? "").toLowerCase().includes(String(d).toLowerCase()),
+  startsWith: (a, d) => String(a ?? "").toLowerCase().startsWith(String(d).toLowerCase()),
+  endsWith: (a, d) => String(a ?? "").toLowerCase().endsWith(String(d).toLowerCase()),
+  equals: (a, d) => String(a ?? "").toLowerCase() === String(d).toLowerCase(),
+  notEquals: (a, d) => String(a ?? "").toLowerCase() !== String(d).toLowerCase()
+}, We = () => ["overflow-x-auto", "w-full", "border", "border-gray-100", "rounded"], He = (a) => {
+  const d = ["min-w-full", "border-collapse", "text-left", "relative"];
+  return a === "sm" ? d.push("text-xs") : a === "lg" ? d.push("text-base") : d.push("text-sm"), d;
+}, Q = (a, d) => {
+  const t = [
+    "bg-gray-100",
+    "text-gray-600",
+    "font-semibold",
+    "text-xs",
+    "uppercase",
+    "tracking-wide",
+    "border-b",
+    "border-gray-200",
+    "whitespace-nowrap"
+  ];
+  return d && t.push("cursor-pointer", "select-none", "hover:text-primary-base", "transition-colors"), a === "sm" ? t.push("px-1.5", "py-1") : a === "lg" ? t.push("px-4", "py-3") : t.push("p-2"), t;
+}, X = (a, d) => {
+  const t = ["border-b", "border-gray-100", "text-gray-900"];
+  return d && t.push("border-r"), a === "sm" ? t.push("px-1.5", "py-1") : a === "lg" ? t.push("px-4", "py-3") : t.push("px-2", "py-1.5"), t;
+}, Ge = (a, d, t, i) => {
+  const w = [];
+  return i ? w.push("bg-primary-25") : a && t && w.push("bg-gray-50"), d && w.push("hover:bg-gray-50", "transition-colors"), w;
+}, V = (a, d) => {
+  const t = ["w-3.5", "h-3.5", "inline-block", "ml-1"];
+  return a ? (t.push("text-primary-base"), d === -1 && t.push("rotate-180")) : t.push("text-gray-400"), t.push("transition-transform", "duration-200"), t;
+}, Z = (a) => {
+  const d = ["text-center"];
+  return a === "sm" ? d.push("w-8") : a === "lg" ? d.push("w-14") : d.push("w-12"), d;
+}, he = (a) => Z(a), Ie = () => [
+  "flex",
+  "items-center",
+  "justify-between",
+  "px-2",
+  "py-2",
+  "border-t",
+  "border-gray-100",
+  "bg-white",
+  "text-sm"
+], Y = (a) => {
+  const d = ["bg-gray-100", "border-b", "border-gray-200"];
+  return a === "sm" ? d.push("px-1.5", "py-1") : a === "lg" ? d.push("px-4", "py-2") : d.push("px-2", "py-1.5"), d;
+}, Je = { class: "flex items-center gap-4" }, Qe = { class: "text-gray-600" }, Xe = ["value"], Ye = ["value"], Ze = { class: "flex items-center gap-1" }, De = ["disabled"], et = { class: "px-2 text-gray-600" }, tt = ["disabled"], st = /* @__PURE__ */ D({
+  __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(a, { emit: d }) {
+    const t = a, i = d, w = f(() => Math.ceil(t.totalRecords / t.rows)), C = f(() => Math.floor(t.first / t.rows) + 1), U = f(() => t.totalRecords === 0 ? 0 : t.first + 1), ee = f(() => Math.min(t.first + t.rows, t.totalRecords)), _ = f(() => t.first === 0), O = f(() => t.first + t.rows >= t.totalRecords), q = f(() => Ie()), P = (b) => {
+      b < 0 || b >= t.totalRecords || (i("update:first", b), i("page", {
+        first: b,
+        rows: t.rows,
+        page: Math.floor(b / t.rows),
+        pageCount: w.value
+      }));
+    }, j = () => {
+      P(Math.max(0, t.first - t.rows));
+    }, N = () => {
+      P(t.first + t.rows);
+    }, M = (b) => {
+      const v = parseInt(b.target.value);
+      i("update:rows", v), i("update:first", 0), i("page", {
+        first: 0,
+        rows: v,
+        page: 0,
+        pageCount: Math.ceil(t.totalRecords / v)
+      });
+    };
+    return (b, v) => (l(), n("div", {
+      class: g(q.value)
+    }, [
+      c("div", Je, [
+        c("span", Qe, S(U.value) + "–" + S(ee.value) + " of " + S(a.totalRecords), 1),
+        a.rowsPerPageOptions.length > 1 ? (l(), n("select", {
+          key: 0,
+          value: a.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: M
+        }, [
+          (l(!0), n(R, null, B(a.rowsPerPageOptions, (L) => (l(), n("option", {
+            key: L,
+            value: L
+          }, S(L) + " / page ", 9, Ye))), 128))
+        ], 40, Xe)) : y("", !0)
+      ]),
+      c("div", Ze, [
+        c("button", {
+          disabled: _.value,
+          class: "p-1.5 rounded hover:bg-gray-100 disabled:opacity-30 disabled:cursor-default transition-colors",
+          onClick: j
+        }, [
+          (l(), m(k(p(Te)), { class: "w-4 h-4 text-gray-600" }))
+        ], 8, De),
+        c("span", et, S(C.value) + " / " + S(w.value), 1),
+        c("button", {
+          disabled: O.value,
+          class: "p-1.5 rounded hover:bg-gray-100 disabled:opacity-30 disabled:cursor-default transition-colors",
+          onClick: N
+        }, [
+          (l(), m(k(p(ve)), { class: "w-4 h-4 text-gray-600" }))
+        ], 8, tt)
+      ])
+    ], 2));
+  }
+}), rt = {
+  key: 0,
+  class: "mb-3"
+}, lt = {
+  key: 0,
+  class: "w-5 h-5 rounded bg-primary-base flex items-center justify-center text-white"
+}, ot = {
+  key: 1,
+  class: "w-5 h-5 rounded border border-gray-300 bg-white"
+}, at = ["onClick"], nt = {
+  key: 1,
+  class: "inline-flex items-center gap-1"
+}, it = { key: 0 }, dt = ["value", "placeholder", "onInput"], ut = { key: 0 }, pt = ["onClick"], ct = ["onClick"], ft = {
+  key: 0,
+  class: "w-5 h-5 rounded bg-primary-base flex items-center justify-center text-white"
+}, yt = {
+  key: 1,
+  class: "w-5 h-5 rounded border border-gray-300 bg-white"
+}, gt = ["onClick"], ht = {
+  key: 0,
+  class: "w-5 h-5 rounded-full bg-primary-base flex items-center justify-center"
+}, bt = {
+  key: 1,
+  class: "w-5 h-5 rounded-full border border-gray-300 bg-white"
+}, vt = ["onClick"], mt = { key: 0 }, wt = ["colspan"], kt = { key: 1 }, Ct = ["colspan"], xt = { class: "flex items-center justify-center gap-2 text-gray-500" }, St = { key: 2 }, _t = ["colspan"], Rt = { class: "text-gray-400" }, Mt = { key: 3 }, Ft = ["colspan"], Pt = ["disabled"], Lt = {
+  key: 2,
+  class: "mt-3"
+}, Et = /* @__PURE__ */ D({
+  __name: "OneDataTable",
+  props: Ue,
+  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(a, { emit: d }) {
+    const t = a, i = d, w = be(), C = z([]);
+    Ee(me, { registerColumn: (e) => {
+      C.value.push(e);
+    }, unregisterColumn: (e) => {
+      const s = C.value.indexOf(e);
+      s > -1 && C.value.splice(s, 1);
+    } });
+    const _ = z(t.first), O = z(t.rows), q = z(t.sortField), P = z(t.sortOrder);
+    T(() => t.first, (e) => {
+      _.value = e;
+    }), T(() => t.rows, (e) => {
+      O.value = e;
+    }), T(() => t.sortField, (e) => {
+      q.value = e;
+    }), T(() => t.sortOrder, (e) => {
+      P.value = e;
+    });
+    const j = f(() => _.value), N = f(() => O.value), M = f(() => q.value), b = f(() => P.value), v = (e, s) => s ? s.split(".").reduce((r, u) => r == null ? void 0 : r[u], e) : e, L = (e) => t.dataKey ? v(e, t.dataKey) : e, x = (e, s) => e == null || s == null ? e === s : t.dataKey ? v(e, t.dataKey) === v(s, t.dataKey) : e === s, we = (e, s) => t.dataKey ? v(e, t.dataKey) : s, E = f(
+      () => C.value.some((e) => e.props.expander)
+    ), K = f(
+      () => !!t.selectionMode
+    ), te = f(
+      () => t.selectionMode === "multiple"
+    ), W = f(
+      () => C.value.filter((e) => !e.props.expander)
+    ), A = f(
+      () => C.value.length + (K.value ? 1 : 0) + (E.value ? 1 : 0)
+    ), se = f(() => {
+      var r, u;
+      if (t.lazy || !t.filters)
+        return t.value;
+      let e = [...t.value];
+      const s = t.filters;
+      if ((r = s.global) != null && r.value && ((u = t.globalFilterFields) != null && u.length)) {
+        const o = s.global.value;
+        e = e.filter(
+          (h) => t.globalFilterFields.some(
+            (I) => ge.contains(v(h, I), o)
+          )
+        );
+      }
+      for (const [o, h] of Object.entries(s)) {
+        if (o === "global" || !h.value)
+          continue;
+        const I = h.matchMode || "contains", ie = ge[I];
+        ie && (e = e.filter((qe) => ie(v(qe, o), h.value)));
+      }
+      return e;
+    }), ke = f(() => {
+      const e = se.value;
+      return t.lazy || !M.value || !b.value ? e : [...e].sort((s, r) => {
+        const u = v(s, M.value), o = v(r, M.value);
+        if (u == null && o == null)
+          return 0;
+        if (u == null)
+          return 1;
+        if (o == null)
+          return -1;
+        let h;
+        return typeof u == "number" && typeof o == "number" ? h = u - o : h = String(u).localeCompare(String(o)), b.value === 1 ? h : -h;
+      });
+    }), re = f(
+      () => t.totalRecords ?? se.value.length
+    ), $ = f(() => {
+      const e = ke.value;
+      if (t.paginator && !t.lazy) {
+        const s = j.value, r = s + N.value;
+        return e.slice(s, r);
+      }
+      return e;
+    }), Ce = (e) => {
+      let s;
+      M.value === e ? b.value === 1 ? s = -1 : b.value === -1 ? s = null : s = 1 : s = 1, q.value = e, P.value = s, i("update:sortField", e), i("update:sortOrder", s), i("sort", { field: e, order: s }), !t.lazy && t.paginator && (_.value = 0, i("update:first", 0));
+    }, le = (e) => e.props.sortField || e.props.field, xe = (e) => M.value === le(e), H = (e) => t.selection ? t.selectionMode === "single" ? x(t.selection, e) : t.selectionMode === "multiple" ? t.selection.some((s) => x(s, e)) : !1 : !1, oe = (e, s, r) => {
+      if (i("row-click", { originalEvent: e, data: s, index: r }), t.selectionMode === "single") {
+        const u = x(t.selection, s) ? null : s;
+        i("update:selection", u), u ? i("row-select", { originalEvent: e, data: s }) : i("row-unselect", { originalEvent: e, data: s });
+      }
+    }, Se = (e, s) => {
+      if (e.stopPropagation(), t.selectionMode === "multiple") {
+        const r = t.selection || [], u = r.some((h) => x(h, s));
+        let o;
+        u ? (o = r.filter((h) => !x(h, s)), i("row-unselect", { originalEvent: e, data: s })) : (o = [...r, s], i("row-select", { originalEvent: e, data: s })), i("update:selection", o);
+      }
+    }, ae = f(() => {
+      if (t.selectionMode !== "multiple" || !t.selection)
+        return !1;
+      const e = t.selection;
+      return $.value.length > 0 && $.value.every((s) => e.some((r) => x(r, s)));
+    }), _e = (e) => {
+      e.stopPropagation();
+      const s = t.selection || [];
+      if (ae.value) {
+        const r = s.filter(
+          (u) => !$.value.some((o) => x(u, o))
+        );
+        i("update:selection", r);
+      } else {
+        const r = [...s];
+        $.value.forEach((u) => {
+          r.some((o) => x(o, u)) || r.push(u);
+        }), i("update:selection", r);
+      }
+    }, G = (e) => {
+      if (!t.expandedRows)
+        return !1;
+      if (Array.isArray(t.expandedRows))
+        return t.expandedRows.some((s) => x(s, e));
+      if (t.dataKey) {
+        const s = String(L(e));
+        return !!t.expandedRows[s];
+      }
+      return !1;
+    }, Re = (e, s) => {
+      e.stopPropagation();
+      const r = G(s);
+      if (Array.isArray(t.expandedRows)) {
+        let u;
+        r ? (u = t.expandedRows.filter((o) => !x(o, s)), i("row-collapse", { originalEvent: e, data: s })) : (u = [...t.expandedRows, s], i("row-expand", { originalEvent: e, data: s })), i("update:expandedRows", u);
+      } else if (t.dataKey) {
+        const u = String(L(s)), o = { ...t.expandedRows };
+        r ? (delete o[u], i("row-collapse", { originalEvent: e, data: s })) : (o[u] = !0, i("row-expand", { originalEvent: e, data: s })), i("update:expandedRows", o);
+      }
+    }, Me = (e, s, r) => {
+      var o;
+      if (!t.filters)
+        return;
+      const u = {
+        ...t.filters,
+        [e]: { value: s, matchMode: r || ((o = t.filters[e]) == null ? void 0 : o.matchMode) || "contains" }
+      };
+      i("update:filters", u), t.lazy && i("filter", { filters: u }), t.paginator && (_.value = 0, i("update:first", 0));
+    }, ne = (e) => {
+      var s;
+      return ((s = t.filters) == null ? void 0 : s[e]) || { value: null };
+    }, Fe = (e) => () => {
+      t.filters && (i("update:filters", { ...t.filters }), t.lazy && i("filter", { filters: t.filters }), t.paginator && (_.value = 0, i("update:first", 0)));
+    }, Pe = (e) => {
+      _.value = e, i("update:first", e);
+    }, Le = (e) => {
+      O.value = e, i("update:rows", e);
+    }, $e = f(() => We()), Oe = f(() => {
+      const e = He(t.size);
+      return t.tableClass && e.push(t.tableClass), t.bordered && e.push("border", "border-gray-100"), e;
+    });
+    return (e, s) => (l(), n("div", null, [
+      ze(c("div", null, [
+        F(e.$slots, "default")
+      ], 512), [
+        [Be, !1]
+      ]),
+      p(w).header ? (l(), n("div", rt, [
+        F(e.$slots, "header")
+      ])) : y("", !0),
+      c("div", {
+        class: g($e.value)
+      }, [
+        c("table", {
+          class: g(Oe.value)
+        }, [
+          c("thead", null, [
+            c("tr", null, [
+              K.value ? (l(), n("th", {
+                key: 0,
+                class: g([
+                  ...p(Q)(e.size, !1),
+                  ...p(Z)(e.size)
+                ])
+              }, [
+                te.value ? (l(), n("div", {
+                  key: 0,
+                  class: "flex items-center justify-center cursor-pointer",
+                  onClick: s[0] || (s[0] = (r) => _e(r))
+                }, [
+                  ae.value ? (l(), n("div", lt, [
+                    (l(), m(k(p(fe)), { class: "w-3.5 h-3.5" }))
+                  ])) : (l(), n("div", ot))
+                ])) : y("", !0)
+              ], 2)) : y("", !0),
+              E.value ? (l(), n("th", {
+                key: 1,
+                class: g([
+                  ...p(Q)(e.size, !1),
+                  ...p(he)(e.size)
+                ])
+              }, null, 2)) : y("", !0),
+              (l(!0), n(R, null, B(W.value, (r, u) => (l(), n("th", {
+                key: u,
+                class: g([
+                  ...p(Q)(e.size, r.props.sortable),
+                  r.props.headerClass
+                ]),
+                style: de([
+                  r.props.headerStyle,
+                  r.props.width ? { width: r.props.width } : {}
+                ]),
+                onClick: (o) => r.props.sortable ? Ce(le(r)) : void 0
+              }, [
+                r.slots.header ? (l(), m(k(r.slots.header), { key: 0 })) : (l(), n("span", nt, [
+                  J(S(r.props.header) + " ", 1),
+                  r.props.sortable ? (l(), n(R, { key: 0 }, [
+                    xe(r) ? b.value === 1 ? (l(), m(k(p(Ae)), {
+                      key: 1,
+                      class: g(p(V)(!0, 1))
+                    }, null, 8, ["class"])) : b.value === -1 ? (l(), m(k(p(pe)), {
+                      key: 2,
+                      class: g(p(V)(!0, -1))
+                    }, null, 8, ["class"])) : (l(), m(k(p(ye)), {
+                      key: 3,
+                      class: g(p(V)(!1, null))
+                    }, null, 8, ["class"])) : (l(), m(k(p(ye)), {
+                      key: 0,
+                      class: g(p(V)(!1, null))
+                    }, null, 8, ["class"]))
+                  ], 64)) : y("", !0)
+                ]))
+              ], 14, at))), 128))
+            ]),
+            e.filterDisplay === "row" ? (l(), n("tr", it, [
+              K.value ? (l(), n("th", {
+                key: 0,
+                class: g(p(Y)(e.size))
+              }, null, 2)) : y("", !0),
+              E.value ? (l(), n("th", {
+                key: 1,
+                class: g(p(Y)(e.size))
+              }, null, 2)) : y("", !0),
+              (l(!0), n(R, null, B(W.value, (r, u) => (l(), n("th", {
+                key: `filter-${u}`,
+                class: g(p(Y)(e.size))
+              }, [
+                r.props.filterable && r.slots.filter ? (l(), m(k(r.slots.filter), {
+                  key: 0,
+                  filterModel: ne(
+                    r.props.filterField || r.props.field
+                  ),
+                  filterCallback: Fe(
+                    r.props.filterField || r.props.field
+                  )
+                }, null, 8, ["filterModel", "filterCallback"])) : r.props.filterable && r.props.field ? (l(), n("input", {
+                  key: 1,
+                  type: "text",
+                  value: ne(
+                    r.props.filterField || r.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 ${r.props.header || r.props.field}`,
+                  onInput: (o) => Me(
+                    r.props.filterField || r.props.field,
+                    o.target.value
+                  )
+                }, null, 40, dt)) : y("", !0)
+              ], 2))), 128))
+            ])) : y("", !0)
+          ]),
+          !e.loading && $.value.length > 0 ? (l(), n("tbody", ut, [
+            (l(!0), n(R, null, B($.value, (r, u) => (l(), n(R, {
+              key: we(r, u)
+            }, [
+              c("tr", {
+                class: g([
+                  ...p(Ge)(e.striped, e.hoverable, u % 2 === 1, H(r)),
+                  e.selectionMode ? "cursor-pointer" : ""
+                ]),
+                onClick: (o) => oe(o, r, u)
+              }, [
+                K.value ? (l(), n("td", {
+                  key: 0,
+                  class: g([
+                    ...p(X)(e.size, e.bordered),
+                    ...p(Z)(e.size)
+                  ])
+                }, [
+                  te.value ? (l(), n("div", {
+                    key: 0,
+                    class: "flex items-center justify-center cursor-pointer",
+                    onClick: ue((o) => Se(o, r), ["stop"])
+                  }, [
+                    H(r) ? (l(), n("div", ft, [
+                      (l(), m(k(p(fe)), { class: "w-3.5 h-3.5" }))
+                    ])) : (l(), n("div", yt))
+                  ], 8, ct)) : (l(), n("div", {
+                    key: 1,
+                    class: "flex items-center justify-center cursor-pointer",
+                    onClick: ue((o) => oe(o, r, u), ["stop"])
+                  }, [
+                    H(r) ? (l(), n("div", ht, s[3] || (s[3] = [
+                      c("div", { class: "w-2 h-2 rounded-full bg-white" }, null, -1)
+                    ]))) : (l(), n("div", bt))
+                  ], 8, gt))
+                ], 2)) : y("", !0),
+                E.value ? (l(), n("td", {
+                  key: 1,
+                  class: g([
+                    ...p(X)(e.size, e.bordered),
+                    ...p(he)(e.size)
+                  ])
+                }, [
+                  c("button", {
+                    class: "p-1 rounded hover:bg-gray-100 transition-colors",
+                    onClick: (o) => Re(o, r)
+                  }, [
+                    (l(), m(k(G(r) ? p(pe) : p(ve)), { class: "w-4 h-4 text-gray-500" }))
+                  ], 8, vt)
+                ], 2)) : y("", !0),
+                (l(!0), n(R, null, B(W.value, (o, h) => (l(), n("td", {
+                  key: h,
+                  class: g([
+                    ...p(X)(e.size, e.bordered),
+                    o.props.bodyClass
+                  ]),
+                  style: de(o.props.bodyStyle)
+                }, [
+                  o.slots.body ? (l(), m(k(o.slots.body), {
+                    key: 0,
+                    data: r,
+                    field: o.props.field,
+                    index: u
+                  }, null, 8, ["data", "field", "index"])) : o.props.field ? (l(), n(R, { key: 1 }, [
+                    J(S(v(r, o.props.field)), 1)
+                  ], 64)) : y("", !0)
+                ], 6))), 128))
+              ], 10, pt),
+              E.value && G(r) ? (l(), n("tr", mt, [
+                c("td", {
+                  colspan: A.value,
+                  class: "p-0"
+                }, [
+                  F(e.$slots, "expansion", {
+                    data: r,
+                    index: u
+                  })
+                ], 8, wt)
+              ])) : y("", !0)
+            ], 64))), 128))
+          ])) : e.loading ? (l(), n("tbody", kt, [
+            c("tr", null, [
+              c("td", {
+                colspan: A.value,
+                class: "text-center py-12"
+              }, [
+                F(e.$slots, "loading", {}, () => [
+                  c("div", xt, [
+                    je(ce, { class: "w-5 h-5" }),
+                    s[4] || (s[4] = c("span", null, "Loading...", -1))
+                  ])
+                ])
+              ], 8, Ct)
+            ])
+          ])) : (l(), n("tbody", St, [
+            c("tr", null, [
+              c("td", {
+                colspan: A.value,
+                class: "text-center py-12"
+              }, [
+                F(e.$slots, "empty", {}, () => [
+                  c("span", Rt, S(e.emptyMessage), 1)
+                ])
+              ], 8, _t)
+            ])
+          ])),
+          e.hasNextPage && !e.loading ? (l(), n("tfoot", Mt, [
+            c("tr", null, [
+              c("td", {
+                colspan: A.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: s[1] || (s[1] = (r) => i("load:next"))
+                }, [
+                  e.loadingNext ? (l(), m(ce, {
+                    key: 0,
+                    class: "w-4 h-4"
+                  })) : y("", !0),
+                  J(" " + S(e.loadMoreLabel), 1)
+                ], 8, Pt)
+              ], 8, Ft)
+            ])
+          ])) : y("", !0)
+        ], 2)
+      ], 2),
+      e.paginator && re.value > 0 ? (l(), m(st, {
+        key: 1,
+        first: j.value,
+        rows: N.value,
+        "total-records": re.value,
+        "rows-per-page-options": e.rowsPerPageOptions,
+        "onUpdate:first": Pe,
+        "onUpdate:rows": Le,
+        onPage: s[2] || (s[2] = (r) => i("page", r))
+      }, null, 8, ["first", "rows", "total-records", "rows-per-page-options"])) : y("", !0),
+      p(w).footer ? (l(), n("div", Lt, [
+        F(e.$slots, "footer")
+      ])) : y("", !0)
+    ]));
+  }
+}), zt = /* @__PURE__ */ D({
+  __name: "OneColumn",
+  props: Ve,
+  setup(a) {
+    const d = a, t = be(), i = Ne(me), w = {
+      props: d,
+      slots: t
+    };
+    return i && i.registerColumn(w), Ke(() => {
+      i && i.unregisterColumn(w);
+    }), (C, U) => F(C.$slots, "default");
+  }
+});
+export {
+  Et as _,
+  zt as a,
+  st as b,
+  fe as r
+};