@gsc-basic/components 1.0.2 → 1.0.3

package/dist/es/src/Grid/src/components/DataTable.vue.js

@@ -1,39 +1,37 @@
-import { computed as m, ref as A, reactive as xe, onMounted as Ve, onBeforeUnmount as Ee, watch as Fe, createElementBlock as i, openBlock as s, createElementVNode as c, Fragment as h, renderList as b, createCommentVNode as u, normalizeStyle as p, withModifiers as k, createBlock as w, normalizeClass as Ce, unref as d, toDisplayString as M, renderSlot as Oe, createVNode as _e } from "vue";
+import { computed as m, ref as A, reactive as Se, onMounted as Te, onBeforeUnmount as Oe, watch as Pe, openBlock as i, createElementBlock as s, normalizeStyle as p, createElementVNode as c, Fragment as x, renderList as b, createCommentVNode as u, withModifiers as k, normalizeClass as _e, unref as a, createBlock as h, toDisplayString as M, withCtx as H, renderSlot as Ae, createVNode as we, createTextVNode as He } from "vue";
 import { FlexRender as V } from "../../../../node_modules/@tanstack/vue-table/build/lib/index.js";
-import Se from "./ColumnFilter.vue.js";
-import De from "./CellEditor.vue.js";
-import { useLocale as Pe } from "../../../hooks/useLocale.js";
+import De from "./ColumnFilter.vue.js";
+import $e from "./CellEditor.vue.js";
+import { useLocale as Be } from "../../../hooks/useLocale.js";
+import { GscButton as B } from "../../../Button/index.js";
 import './DataTable.css';/* empty css               */
-import Te from "../../../../_virtual/_plugin-vue_export-helper.js";
-const Ae = { class: "w-full" }, He = {
-  key: 0,
-  class: "overflow-auto"
-}, Be = { class: "gsc-table" }, Le = { class: "gsc-thead sticky top-0 z-10" }, Ue = ["checked", ".indeterminate"], Ge = ["onDrop"], Ne = { class: "flex items-center gap-2 min-w-0" }, We = ["onClick"], Ke = ["title", "onDragstart"], je = { class: "truncate" }, qe = {
+import Le from "../../../../_virtual/_plugin-vue_export-helper.js";
+const Ue = { class: "w-full" }, Ge = { class: "gsc-table" }, Ne = { class: "gsc-thead sticky top-0 z-10" }, We = ["checked", ".indeterminate"], Ke = ["onDrop"], je = { class: "flex items-center gap-2 min-w-0" }, qe = ["onClick"], Je = ["title", "onDragstart"], Qe = { class: "truncate" }, Xe = {
   key: 0,
   class: "text-[rgba(0,0,0,0.45)] text-xs"
-}, Je = ["title", "aria-label", "onClick"], Qe = ["onMousedown"], Xe = ["checked", "onChange"], Ye = ["onDblclick"], Ze = {
+}, Ye = ["onMousedown"], Ze = ["checked", "onChange"], et = ["onDblclick"], tt = {
   key: 1,
   class: "flex items-start gap-2"
-}, et = { class: "min-w-0 flex-1" }, tt = {
+}, nt = { class: "min-w-0 flex-1" }, ot = {
   key: 1,
   class: "break-words"
-}, nt = ["onClick"], ot = { key: 0 }, lt = ["colspan"], st = {
+}, lt = { key: 0 }, it = ["colspan"], st = {
   key: 1,
   class: "w-full"
-}, it = { class: "gsc-table" }, ct = { class: "gsc-thead sticky top-0 z-10" }, rt = ["checked", ".indeterminate"], ut = ["onDrop"], at = { class: "flex items-center gap-2 min-w-0" }, dt = ["onClick"], gt = ["title", "onDragstart"], mt = { class: "truncate" }, pt = {
+}, ct = { class: "gsc-table" }, rt = { class: "gsc-thead sticky top-0 z-10" }, ut = ["checked", ".indeterminate"], at = ["onDrop"], dt = { class: "flex items-center gap-2 min-w-0" }, gt = ["onClick"], mt = ["title", "onDragstart"], pt = { class: "truncate" }, ft = {
   key: 0,
   class: "text-[rgba(0,0,0,0.45)] text-xs"
-}, ft = ["title", "aria-label", "onClick"], vt = ["onMousedown"], yt = { class: "gsc-table" }, ht = ["checked", "onChange"], bt = ["onDblclick"], kt = {
+}, vt = ["onMousedown"], yt = { class: "gsc-table" }, ht = ["checked", "onChange"], xt = ["onDblclick"], bt = {
   key: 1,
   class: "break-words"
-}, xt = { key: 0 }, Ct = ["colspan"], R = 44, _t = 6, St = {
+}, kt = { key: 0 }, Ct = ["colspan"], R = 44, St = 6, _t = {
   __name: "DataTable",
   props: {
     table: { type: Object, required: !0 },
     mode: { type: String, default: "server" },
     loading: { type: Boolean, default: !1 },
     virtual: { type: Boolean, default: !1 },
-    height: { type: Number, default: 400 },
+    height: { type: [Number, String], default: 400 },
     rowHeight: { type: Number, default: 40 },
     enableRowSelection: { type: Boolean, default: !1 }
   },
@@ -42,34 +40,34 @@ const Ae = { class: "w-full" }, He = {
     "cell-change",
     "server-filter-change"
   ],
-  setup(f, { emit: we }) {
-    const g = f, I = we, { t: v } = Pe(), a = m(() => g.table), H = m(() => {
+  setup(f, { emit: Re }) {
+    const d = f, I = Re, { t: v } = Be(), g = m(() => d.table), L = m(() => {
       try {
-        return a.value.getHeaderGroups?.() || [];
+        return g.value.getHeaderGroups?.() || [];
       } catch {
         return [];
       }
     }), z = m(() => {
       try {
-        return a.value.getRowModel?.().rows || [];
+        return g.value.getRowModel?.().rows || [];
       } catch {
         return [];
       }
-    }), B = m(() => (a.value.getVisibleLeafColumns?.() || []).length + (g.enableRowSelection ? 1 : 0));
-    function L(t) {
+    }), U = m(() => (g.value.getVisibleLeafColumns?.() || []).length + (d.enableRowSelection ? 1 : 0));
+    function G(t) {
       const n = t.getIsSorted?.();
       return n === "asc" ? "↑" : n === "desc" ? "↓" : "";
     }
-    function U(t, n) {
+    function N(t, n) {
       const o = n.column;
       if (!o.getCanSort?.())
         return;
       const e = !!t?.shiftKey;
       o.toggleSorting?.(void 0, e);
     }
-    const x = A(null);
-    function G(t, n) {
-      x.value = n?.id ?? null;
+    const C = A(null);
+    function W(t, n) {
+      C.value = n?.id ?? null;
       try {
         t.dataTransfer.effectAllowed = "move", t.dataTransfer.setData("text/plain", String(n?.id ?? ""));
       } catch {
@@ -86,264 +84,274 @@ const Ae = { class: "w-full" }, He = {
       const D = t.slice();
       return D.splice(e, 1), D.splice(l, 0, n), D;
     }
-    function N(t, n) {
+    function K(t, n) {
       const o = n?.id;
-      let e = x.value;
+      let e = C.value;
       try {
         const r = t.dataTransfer.getData("text/plain");
         r && (e = r);
       } catch {
       }
       if (!e || !o || e === o) {
-        x.value = null;
+        C.value = null;
         return;
       }
-      const l = (a.value.getAllLeafColumns?.() || []).filter(Boolean), D = l.find((r) => r.id === e), pe = l.find((r) => r.id === o);
-      if (!D || !pe) {
-        x.value = null;
+      const l = (g.value.getAllLeafColumns?.() || []).filter(Boolean), D = l.find((r) => r.id === e), ve = l.find((r) => r.id === o);
+      if (!D || !ve) {
+        C.value = null;
         return;
       }
-      const T = $(D), Me = $(pe);
-      if (T !== Me) {
-        x.value = null;
+      const P = $(D), Fe = $(ve);
+      if (P !== Fe) {
+        C.value = null;
         return;
       }
-      const fe = l.filter((r) => $(r) === "left").map((r) => r.id), ve = l.filter((r) => $(r) === "center").map((r) => r.id), ye = l.filter((r) => $(r) === "right").map((r) => r.id);
-      let he = fe, be = ve, ke = ye;
-      T === "left" ? he = E(fe, e, o) : T === "right" ? ke = E(ye, e, o) : be = E(ve, e, o), a.value.setColumnOrder?.([...he, ...be, ...ke]), x.value = null;
+      const ye = l.filter((r) => $(r) === "left").map((r) => r.id), he = l.filter((r) => $(r) === "center").map((r) => r.id), xe = l.filter((r) => $(r) === "right").map((r) => r.id);
+      let be = ye, ke = he, Ce = xe;
+      P === "left" ? be = E(ye, e, o) : P === "right" ? Ce = E(xe, e, o) : ke = E(he, e, o), g.value.setColumnOrder?.([...be, ...ke, ...Ce]), C.value = null;
     }
-    function W(t) {
+    function j(t) {
       const n = t.getIsPinned?.();
-      return n === "left" ? { position: "sticky", left: `${(t.getStart?.("left") ?? 0) + (g.enableRowSelection ? R : 0)}px`, zIndex: 2 } : n === "right" ? { position: "sticky", right: `${t.getAfter?.("right") ?? 0}px`, zIndex: 2 } : {};
+      return n === "left" ? { position: "sticky", left: `${(t.getStart?.("left") ?? 0) + (d.enableRowSelection ? R : 0)}px`, zIndex: 2 } : n === "right" ? { position: "sticky", right: `${t.getAfter?.("right") ?? 0}px`, zIndex: 2 } : {};
     }
-    const K = m(() => g.enableRowSelection ? {
+    const q = m(() => d.enableRowSelection ? {
       width: `${R}px`,
       minWidth: `${R}px`,
       position: "sticky",
       left: "0px",
       zIndex: 4
-    } : {}), j = m(() => g.enableRowSelection ? {
+    } : {}), J = m(() => d.enableRowSelection ? {
       width: `${R}px`,
       minWidth: `${R}px`,
       position: "sticky",
       left: "0px",
       zIndex: 3
-    } : {});
-    function q(t) {
+    } : {}), Ie = m(() => {
+      if (d.virtual)
+        return {};
+      const t = d.height;
+      return t == null || t === "" ? {} : typeof t == "number" ? { height: `${t}px`, overflow: "auto" } : t === "auto" || t === "100%" ? { height: "100%", overflow: "auto" } : { height: String(t), overflow: "auto" };
+    });
+    function Q(t) {
       const n = t.column, o = t.getSize?.();
       return {
         width: o ? `${o}px` : void 0,
         minWidth: n.columnDef?.minSize ? `${n.columnDef.minSize}px` : void 0,
         position: "relative",
-        ...W(n)
+        ...j(n)
       };
     }
-    function J(t) {
+    function X(t) {
       const n = t.column, o = n.getSize?.();
       return {
         width: o ? `${o}px` : void 0,
         minWidth: n.columnDef?.minSize ? `${n.columnDef.minSize}px` : void 0,
-        ...W(n)
+        ...j(n)
       };
     }
-    const y = A(null), C = xe({});
-    function Q(t) {
+    const y = A(null), S = Se({});
+    function Y(t) {
       const n = t?.columnDef?.meta?.col;
       return !!(n?.filterable || n?.filterType || n?.filterOptions);
     }
-    function X(t) {
+    function Z(t) {
       return t?.columnDef?.meta?.col?.filterType || "text";
     }
-    function Y(t) {
+    function ee(t) {
       return t?.columnDef?.meta?.col?.filterOptions || [];
     }
-    function Z(t) {
+    function te(t) {
       y.value = y.value === t ? null : t;
     }
-    function ee(t, n) {
-      C[t] = n;
+    function ne(t, n) {
+      S[t] = n;
     }
-    function te(t) {
-      if (g.mode === "server") {
-        I("server-filter-change", { key: t, value: C[t] }), y.value = null;
+    function oe(t) {
+      if (d.mode === "server") {
+        I("server-filter-change", { key: t, value: S[t] }), y.value = null;
         return;
       }
-      a.value.getColumn?.(t)?.setFilterValue?.(C[t]), y.value = null;
+      g.value.getColumn?.(t)?.setFilterValue?.(S[t]), y.value = null;
     }
-    function ne(t) {
-      if (C[t] = "", g.mode === "server") {
+    function le(t) {
+      if (S[t] = "", d.mode === "server") {
         I("server-filter-change", { key: t, value: "" }), y.value = null;
         return;
       }
-      a.value.getColumn?.(t)?.setFilterValue?.(""), y.value = null;
+      g.value.getColumn?.(t)?.setFilterValue?.(""), y.value = null;
     }
-    function oe() {
+    function ie() {
       y.value = null;
     }
-    Ve(() => {
-      document.addEventListener("click", oe);
-    }), Ee(() => {
-      document.removeEventListener("click", oe);
-    }), Fe(
-      () => a.value.getState?.().rowSelection,
+    Te(() => {
+      document.addEventListener("click", ie);
+    }), Oe(() => {
+      document.removeEventListener("click", ie);
+    }), Pe(
+      () => g.value.getState?.().rowSelection,
       () => {
-        if (g.enableRowSelection)
+        if (d.enableRowSelection)
           try {
-            const t = a.value.getSelectedRowModel?.().rows || [];
+            const t = g.value.getSelectedRowModel?.().rows || [];
             I("selection-change", t.map((n) => n.original));
           } catch {
           }
       },
       { deep: !0 }
     );
-    const _ = xe({});
-    function S(t, n) {
+    const _ = Se({});
+    function w(t, n) {
       return `${t.id}::${n.id}`;
     }
-    function le(t) {
+    function se(t) {
       return !!t?.columnDef?.meta?.col?.editor;
     }
-    function se(t) {
+    function ce(t) {
       const n = t?.columnDef?.meta?.col;
       return !n?.editor || n.editor === "input" ? "text" : n.editor;
     }
-    function ie(t) {
+    function re(t) {
       return t?.columnDef?.meta?.col?.options || [];
     }
     function F(t, n) {
-      if (!le(n))
+      if (!se(n))
         return;
-      const o = S(t, n);
+      const o = w(t, n);
       _[o] = t.original?.[n.id];
     }
-    function O(t, n) {
-      const o = S(t, n);
+    function T(t, n) {
+      const o = w(t, n);
       return Object.prototype.hasOwnProperty.call(_, o);
     }
-    function ce(t, n) {
-      const o = S(t, n);
+    function ue(t, n) {
+      const o = w(t, n);
       return _[o];
     }
-    function re(t, n, o) {
-      const e = S(t, n);
+    function ae(t, n, o) {
+      const e = w(t, n);
       _[e] = o;
     }
-    function ue(t, n) {
-      const o = S(t, n);
+    function de(t, n) {
+      const o = w(t, n);
       delete _[o];
     }
-    function ae(t, n, o) {
-      const e = S(t, n);
+    function ge(t, n, o) {
+      const e = w(t, n);
       try {
         t.original[n.id] = o;
       } catch {
       }
       I("cell-change", { row: t.original, rowId: t.id, column: n.id, value: o }), delete _[e];
     }
-    const de = A(0);
-    function $e(t) {
-      de.value = t.target.scrollTop || 0;
+    const me = A(0);
+    function ze(t) {
+      me.value = t.target.scrollTop || 0;
     }
-    const Re = m(() => Math.ceil(g.height / g.rowHeight) + _t), P = m(() => Math.max(0, Math.floor((de.value || 0) / g.rowHeight))), ge = m(() => P.value + Re.value), me = m(() => z.value.slice(P.value, ge.value)), Ie = m(() => P.value * g.rowHeight), ze = m(() => Math.max(0, (z.value.length - ge.value) * g.rowHeight));
-    return (t, n) => (s(), i("div", Ae, [
-      f.virtual ? (s(), i("div", st, [
-        c("table", it, [
-          c("thead", ct, [
-            (s(!0), i(h, null, b(H.value, (o) => (s(), i("tr", {
+    const Me = m(() => Math.ceil(d.height / d.rowHeight) + St), O = m(() => Math.max(0, Math.floor((me.value || 0) / d.rowHeight))), pe = m(() => O.value + Me.value), fe = m(() => z.value.slice(O.value, pe.value)), Ve = m(() => O.value * d.rowHeight), Ee = m(() => Math.max(0, (z.value.length - pe.value) * d.rowHeight));
+    return (t, n) => (i(), s("div", Ue, [
+      f.virtual ? (i(), s("div", st, [
+        c("table", ct, [
+          c("thead", rt, [
+            (i(!0), s(x, null, b(L.value, (o) => (i(), s("tr", {
               key: o.id
             }, [
-              f.enableRowSelection ? (s(), i("th", {
+              f.enableRowSelection ? (i(), s("th", {
                 key: 0,
                 class: "gsc-th text-center",
-                style: p(K.value)
+                style: p(q.value)
               }, [
                 c("input", {
                   type: "checkbox",
                   class: "gsc-checkbox",
-                  checked: a.value.getIsAllPageRowsSelected?.(),
-                  ".indeterminate": a.value.getIsSomePageRowsSelected?.(),
-                  onChange: n[2] || (n[2] = (e) => a.value.toggleAllPageRowsSelected?.(!!e.target.checked))
-                }, null, 40, rt)
+                  checked: g.value.getIsAllPageRowsSelected?.(),
+                  ".indeterminate": g.value.getIsSomePageRowsSelected?.(),
+                  onChange: n[2] || (n[2] = (e) => g.value.toggleAllPageRowsSelected?.(!!e.target.checked))
+                }, null, 40, ut)
               ], 4)) : u("", !0),
-              (s(!0), i(h, null, b(o.headers, (e) => (s(), i("th", {
+              (i(!0), s(x, null, b(o.headers, (e) => (i(), s("th", {
                 key: e.id,
                 class: "gsc-th",
-                style: p(q(e)),
+                style: p(Q(e)),
                 onDragover: n[3] || (n[3] = k(() => {
                 }, ["prevent"])),
-                onDrop: (l) => N(l, e.column)
+                onDrop: (l) => K(l, e.column)
               }, [
-                c("div", at, [
+                c("div", dt, [
                   c("div", {
-                    class: Ce(["flex items-center gap-1 min-w-0", e.column.getCanSort?.() ? "cursor-pointer" : ""]),
-                    onClick: (l) => U(l, e)
+                    class: _e(["flex items-center gap-1 min-w-0", e.column.getCanSort?.() ? "cursor-pointer" : ""]),
+                    onClick: (l) => N(l, e)
                   }, [
                     c("span", {
                       class: "text-[rgba(0,0,0,0.25)] hover:text-[rgba(0,0,0,0.45)] cursor-grab select-none",
-                      title: d(v)("gsc.grid.table.dragReorder"),
+                      title: a(v)("gsc.grid.table.dragReorder"),
                       draggable: "true",
-                      onDragstart: (l) => G(l, e.column)
-                    }, " ⋮⋮ ", 40, gt),
-                    c("span", mt, [
-                      e.isPlaceholder ? u("", !0) : (s(), w(d(V), {
+                      onDragstart: (l) => W(l, e.column)
+                    }, " ⋮⋮ ", 40, mt),
+                    c("span", pt, [
+                      e.isPlaceholder ? u("", !0) : (i(), h(a(V), {
                         key: 0,
                         render: e.column.columnDef.header,
                         props: e.getContext()
                       }, null, 8, ["render", "props"]))
                     ]),
-                    e.column.getCanSort?.() ? (s(), i("span", pt, M(L(e.column)), 1)) : u("", !0)
-                  ], 10, dt),
-                  Q(e.column) ? (s(), i("button", {
+                    e.column.getCanSort?.() ? (i(), s("span", ft, M(G(e.column)), 1)) : u("", !0)
+                  ], 10, gt),
+                  Y(e.column) ? (i(), h(a(B), {
                     key: 0,
                     type: "button",
-                    class: "ml-auto gsc-btn gsc-btn-text gsc-btn-icon-sm",
-                    title: d(v)("gsc.grid.table.filter"),
-                    "aria-label": d(v)("gsc.grid.table.filter"),
-                    onClick: k((l) => Z(e.column.id), ["stop"])
-                  }, [...n[5] || (n[5] = [
-                    c("i", {
-                      class: "i-material-symbols:filter-alt-outline",
-                      "aria-hidden": "true"
-                    }, null, -1)
-                  ])], 8, ft)) : u("", !0)
+                    variant: "text",
+                    size: "icon",
+                    class: "ml-auto gsc-btn-icon-sm",
+                    title: a(v)("gsc.grid.table.filter"),
+                    "aria-label": a(v)("gsc.grid.table.filter"),
+                    onClick: k((l) => te(e.column.id), ["stop"])
+                  }, {
+                    default: H(() => [...n[6] || (n[6] = [
+                      c("i", {
+                        class: "i-material-symbols:filter-alt-outline",
+                        "aria-hidden": "true"
+                      }, null, -1)
+                    ])]),
+                    _: 1
+                  }, 8, ["title", "aria-label", "onClick"])) : u("", !0)
                 ]),
-                y.value === e.column.id ? (s(), w(Se, {
+                y.value === e.column.id ? (i(), h(De, {
                   key: 0,
-                  value: C[e.column.id],
-                  type: X(e.column),
-                  options: Y(e.column),
-                  "onUpdate:value": (l) => ee(e.column.id, l),
-                  onApply: (l) => te(e.column.id),
-                  onClear: (l) => ne(e.column.id)
+                  value: S[e.column.id],
+                  type: Z(e.column),
+                  options: ee(e.column),
+                  "onUpdate:value": (l) => ne(e.column.id, l),
+                  onApply: (l) => oe(e.column.id),
+                  onClear: (l) => le(e.column.id)
                 }, null, 8, ["value", "type", "options", "onUpdate:value", "onApply", "onClear"])) : u("", !0),
-                e.column.getCanResize?.() ? (s(), i("div", {
+                e.column.getCanResize?.() ? (i(), s("div", {
                   key: 1,
                   class: "absolute right-0 top-0 h-full w-2 cursor-col-resize",
                   onMousedown: k((l) => e.getResizeHandler?.()(l), ["prevent"])
                 }, null, 40, vt)) : u("", !0)
-              ], 44, ut))), 128))
+              ], 44, at))), 128))
             ]))), 128))
           ])
         ]),
         c("div", {
           class: "overflow-auto",
           style: p({ height: `${f.height}px` }),
-          onScroll: $e
+          onScroll: ze
         }, [
           c("div", {
-            style: p({ height: `${Ie.value}px` })
+            style: p({ height: `${Ve.value}px` })
           }, null, 4),
           c("table", yt, [
             c("tbody", null, [
-              (s(!0), i(h, null, b(me.value, (o) => (s(), i("tr", {
+              (i(!0), s(x, null, b(fe.value, (o) => (i(), s("tr", {
                 key: o.id,
                 class: "gsc-tr",
                 style: p({ height: `${f.rowHeight}px` })
               }, [
-                f.enableRowSelection ? (s(), i("td", {
+                f.enableRowSelection ? (i(), s("td", {
                   key: 0,
                   class: "gsc-td text-center",
-                  style: p(j.value)
+                  style: p(J.value)
                 }, [
                   c("input", {
                     type: "checkbox",
@@ -352,182 +360,197 @@ const Ae = { class: "w-full" }, He = {
                     onChange: (e) => o.toggleSelected?.(!!e.target.checked)
                   }, null, 40, ht)
                 ], 4)) : u("", !0),
-                (s(!0), i(h, null, b(o.getVisibleCells(), (e) => (s(), i("td", {
+                (i(!0), s(x, null, b(o.getVisibleCells(), (e) => (i(), s("td", {
                   key: e.id,
                   class: "gsc-td align-top",
-                  style: p(J(e)),
+                  style: p(X(e)),
                   onDblclick: (l) => F(o, e.column)
                 }, [
-                  O(o, e.column) ? (s(), w(De, {
+                  T(o, e.column) ? (i(), h($e, {
                     key: 0,
-                    "model-value": ce(o, e.column),
-                    type: se(e.column),
-                    options: ie(e.column),
-                    onUpdateModelValue: (l) => re(o, e.column, l),
-                    onCommit: (l) => ae(o, e.column, l),
-                    onCancel: (l) => ue(o, e.column)
-                  }, null, 8, ["model-value", "type", "options", "onUpdateModelValue", "onCommit", "onCancel"])) : (s(), i("span", kt, [
-                    _e(d(V), {
+                    "model-value": ue(o, e.column),
+                    type: ce(e.column),
+                    options: re(e.column),
+                    onUpdateModelValue: (l) => ae(o, e.column, l),
+                    onCommit: (l) => ge(o, e.column, l),
+                    onCancel: (l) => de(o, e.column)
+                  }, null, 8, ["model-value", "type", "options", "onUpdateModelValue", "onCommit", "onCancel"])) : (i(), s("span", bt, [
+                    we(a(V), {
                       render: e.column.columnDef.cell,
                       props: e.getContext()
                     }, null, 8, ["render", "props"])
                   ]))
-                ], 44, bt))), 128))
+                ], 44, xt))), 128))
               ], 4))), 128)),
-              me.value.length === 0 ? (s(), i("tr", xt, [
+              fe.value.length === 0 ? (i(), s("tr", kt, [
                 c("td", {
-                  colspan: B.value,
+                  colspan: U.value,
                   class: "px-3 py-10 text-center text-sm text-[rgba(0,0,0,0.45)]"
-                }, M(f.loading ? d(v)("gsc.grid.table.loading") : d(v)("gsc.grid.table.empty")), 9, Ct)
+                }, M(f.loading ? a(v)("gsc.grid.table.loading") : a(v)("gsc.grid.table.empty")), 9, Ct)
               ])) : u("", !0)
             ])
           ]),
           c("div", {
-            style: p({ height: `${ze.value}px` })
+            style: p({ height: `${Ee.value}px` })
           }, null, 4)
         ], 36)
-      ])) : (s(), i("div", He, [
-        c("table", Be, [
-          c("thead", Le, [
-            (s(!0), i(h, null, b(H.value, (o) => (s(), i("tr", {
+      ])) : (i(), s("div", {
+        key: 0,
+        class: "overflow-auto",
+        style: p(Ie.value)
+      }, [
+        c("table", Ge, [
+          c("thead", Ne, [
+            (i(!0), s(x, null, b(L.value, (o) => (i(), s("tr", {
               key: o.id
             }, [
-              f.enableRowSelection ? (s(), i("th", {
+              f.enableRowSelection ? (i(), s("th", {
                 key: 0,
                 class: "gsc-th text-center",
-                style: p(K.value)
+                style: p(q.value)
               }, [
                 c("input", {
                   type: "checkbox",
                   class: "gsc-checkbox",
-                  checked: a.value.getIsAllPageRowsSelected?.(),
-                  ".indeterminate": a.value.getIsSomePageRowsSelected?.(),
-                  onChange: n[0] || (n[0] = (e) => a.value.toggleAllPageRowsSelected?.(!!e.target.checked))
-                }, null, 40, Ue)
+                  checked: g.value.getIsAllPageRowsSelected?.(),
+                  ".indeterminate": g.value.getIsSomePageRowsSelected?.(),
+                  onChange: n[0] || (n[0] = (e) => g.value.toggleAllPageRowsSelected?.(!!e.target.checked))
+                }, null, 40, We)
               ], 4)) : u("", !0),
-              (s(!0), i(h, null, b(o.headers, (e) => (s(), i("th", {
+              (i(!0), s(x, null, b(o.headers, (e) => (i(), s("th", {
                 key: e.id,
                 class: "gsc-th",
-                style: p(q(e)),
+                style: p(Q(e)),
                 onDragover: n[1] || (n[1] = k(() => {
                 }, ["prevent"])),
-                onDrop: (l) => N(l, e.column)
+                onDrop: (l) => K(l, e.column)
               }, [
-                c("div", Ne, [
+                c("div", je, [
                   c("div", {
-                    class: Ce(["flex items-center gap-1 min-w-0", e.column.getCanSort?.() ? "cursor-pointer" : ""]),
-                    onClick: (l) => U(l, e)
+                    class: _e(["flex items-center gap-1 min-w-0", e.column.getCanSort?.() ? "cursor-pointer" : ""]),
+                    onClick: (l) => N(l, e)
                   }, [
                     c("span", {
                       class: "text-[rgba(0,0,0,0.25)] hover:text-[rgba(0,0,0,0.45)] cursor-grab select-none",
-                      title: d(v)("gsc.grid.table.dragReorder"),
+                      title: a(v)("gsc.grid.table.dragReorder"),
                       draggable: "true",
-                      onDragstart: (l) => G(l, e.column)
-                    }, " ⋮⋮ ", 40, Ke),
-                    c("span", je, [
-                      e.isPlaceholder ? u("", !0) : (s(), w(d(V), {
+                      onDragstart: (l) => W(l, e.column)
+                    }, " ⋮⋮ ", 40, Je),
+                    c("span", Qe, [
+                      e.isPlaceholder ? u("", !0) : (i(), h(a(V), {
                         key: 0,
                         render: e.column.columnDef.header,
                         props: e.getContext()
                       }, null, 8, ["render", "props"]))
                     ]),
-                    e.column.getCanSort?.() ? (s(), i("span", qe, M(L(e.column)), 1)) : u("", !0)
-                  ], 10, We),
-                  Q(e.column) ? (s(), i("button", {
+                    e.column.getCanSort?.() ? (i(), s("span", Xe, M(G(e.column)), 1)) : u("", !0)
+                  ], 10, qe),
+                  Y(e.column) ? (i(), h(a(B), {
                     key: 0,
                     type: "button",
-                    class: "ml-auto gsc-btn gsc-btn-text gsc-btn-icon-sm",
-                    title: d(v)("gsc.grid.table.filter"),
-                    "aria-label": d(v)("gsc.grid.table.filter"),
-                    onClick: k((l) => Z(e.column.id), ["stop"])
-                  }, [...n[4] || (n[4] = [
-                    c("i", {
-                      class: "i-material-symbols:filter-alt-outline",
-                      "aria-hidden": "true"
-                    }, null, -1)
-                  ])], 8, Je)) : u("", !0)
+                    variant: "text",
+                    size: "icon",
+                    class: "ml-auto gsc-btn-icon-sm",
+                    title: a(v)("gsc.grid.table.filter"),
+                    "aria-label": a(v)("gsc.grid.table.filter"),
+                    onClick: k((l) => te(e.column.id), ["stop"])
+                  }, {
+                    default: H(() => [...n[4] || (n[4] = [
+                      c("i", {
+                        class: "i-material-symbols:filter-alt-outline",
+                        "aria-hidden": "true"
+                      }, null, -1)
+                    ])]),
+                    _: 1
+                  }, 8, ["title", "aria-label", "onClick"])) : u("", !0)
                 ]),
-                y.value === e.column.id ? (s(), w(Se, {
+                y.value === e.column.id ? (i(), h(De, {
                   key: 0,
-                  value: C[e.column.id],
-                  type: X(e.column),
-                  options: Y(e.column),
-                  "onUpdate:value": (l) => ee(e.column.id, l),
-                  onApply: (l) => te(e.column.id),
-                  onClear: (l) => ne(e.column.id)
+                  value: S[e.column.id],
+                  type: Z(e.column),
+                  options: ee(e.column),
+                  "onUpdate:value": (l) => ne(e.column.id, l),
+                  onApply: (l) => oe(e.column.id),
+                  onClear: (l) => le(e.column.id)
                 }, null, 8, ["value", "type", "options", "onUpdate:value", "onApply", "onClear"])) : u("", !0),
-                e.column.getCanResize?.() ? (s(), i("div", {
+                e.column.getCanResize?.() ? (i(), s("div", {
                   key: 1,
                   class: "absolute right-0 top-0 h-full w-2 cursor-col-resize",
                   onMousedown: k((l) => e.getResizeHandler?.()(l), ["prevent"])
-                }, null, 40, Qe)) : u("", !0)
-              ], 44, Ge))), 128))
+                }, null, 40, Ye)) : u("", !0)
+              ], 44, Ke))), 128))
             ]))), 128))
           ]),
           c("tbody", null, [
-            (s(!0), i(h, null, b(z.value, (o) => (s(), i("tr", {
+            (i(!0), s(x, null, b(z.value, (o) => (i(), s("tr", {
               key: o.id,
               class: "gsc-tr"
             }, [
-              f.enableRowSelection ? (s(), i("td", {
+              f.enableRowSelection ? (i(), s("td", {
                 key: 0,
                 class: "gsc-td text-center",
-                style: p(j.value)
+                style: p(J.value)
               }, [
                 c("input", {
                   type: "checkbox",
                   class: "gsc-checkbox",
                   checked: o.getIsSelected?.(),
                   onChange: (e) => o.toggleSelected?.(!!e.target.checked)
-                }, null, 40, Xe)
+                }, null, 40, Ze)
               ], 4)) : u("", !0),
-              (s(!0), i(h, null, b(o.getVisibleCells(), (e) => (s(), i("td", {
+              (i(!0), s(x, null, b(o.getVisibleCells(), (e) => (i(), s("td", {
                 key: e.id,
                 class: "gsc-td align-top",
-                style: p(J(e)),
+                style: p(X(e)),
                 onDblclick: (l) => F(o, e.column)
               }, [
-                t.$slots[`cell-${e.column.id}`] ? Oe(t.$slots, `cell-${e.column.id}`, {
+                t.$slots[`cell-${e.column.id}`] ? Ae(t.$slots, `cell-${e.column.id}`, {
                   key: 0,
                   value: e.getValue(),
                   row: o.original
-                }, void 0, !0) : (s(), i("div", Ze, [
-                  c("div", et, [
-                    O(o, e.column) ? (s(), w(De, {
+                }, void 0, !0) : (i(), s("div", tt, [
+                  c("div", nt, [
+                    T(o, e.column) ? (i(), h($e, {
                       key: 0,
-                      "model-value": ce(o, e.column),
-                      type: se(e.column),
-                      options: ie(e.column),
-                      onUpdateModelValue: (l) => re(o, e.column, l),
-                      onCommit: (l) => ae(o, e.column, l),
-                      onCancel: (l) => ue(o, e.column)
-                    }, null, 8, ["model-value", "type", "options", "onUpdateModelValue", "onCommit", "onCancel"])) : (s(), i("span", tt, [
-                      _e(d(V), {
+                      "model-value": ue(o, e.column),
+                      type: ce(e.column),
+                      options: re(e.column),
+                      onUpdateModelValue: (l) => ae(o, e.column, l),
+                      onCommit: (l) => ge(o, e.column, l),
+                      onCancel: (l) => de(o, e.column)
+                    }, null, 8, ["model-value", "type", "options", "onUpdateModelValue", "onCommit", "onCancel"])) : (i(), s("span", ot, [
+                      we(a(V), {
                         render: e.column.columnDef.cell,
                         props: e.getContext()
                       }, null, 8, ["render", "props"])
                     ]))
                   ]),
-                  le(e.column) && !O(o, e.column) ? (s(), i("button", {
+                  se(e.column) && !T(o, e.column) ? (i(), h(a(B), {
                     key: 0,
-                    class: "shrink-0 mt-0.5 gsc-btn gsc-btn-default px-2 h-6 text-xs",
+                    variant: "default",
+                    class: "shrink-0 mt-0.5 px-2 h-6 text-xs",
                     onClick: k((l) => F(o, e.column), ["stop"])
-                  }, " ✎ ", 8, nt)) : u("", !0)
+                  }, {
+                    default: H(() => [...n[5] || (n[5] = [
+                      He(" ✎ ", -1)
+                    ])]),
+                    _: 1
+                  }, 8, ["onClick"])) : u("", !0)
                 ]))
-              ], 44, Ye))), 128))
+              ], 44, et))), 128))
             ]))), 128)),
-            z.value.length === 0 ? (s(), i("tr", ot, [
+            z.value.length === 0 ? (i(), s("tr", lt, [
               c("td", {
-                colspan: B.value,
+                colspan: U.value,
                 class: "px-3 py-10 text-center text-sm text-[rgba(0,0,0,0.45)]"
-              }, M(f.loading ? d(v)("gsc.grid.table.loading") : d(v)("gsc.grid.table.empty")), 9, lt)
+              }, M(f.loading ? a(v)("gsc.grid.table.loading") : a(v)("gsc.grid.table.empty")), 9, it)
             ])) : u("", !0)
           ])
         ])
-      ]))
+      ], 4))
     ]));
   }
-}, Vt = /* @__PURE__ */ Te(St, [["__scopeId", "data-v-94c3d799"]]);
+}, Et = /* @__PURE__ */ Le(_t, [["__scopeId", "data-v-506c5c98"]]);
 export {
-  Vt as default
+  Et as default
 };