@gsc-basic/components 1.0.1 → 1.0.3

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

@@ -0,0 +1,556 @@
+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 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 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"
+}, Ye = ["onMousedown"], Ze = ["checked", "onChange"], et = ["onDblclick"], tt = {
+  key: 1,
+  class: "flex items-start gap-2"
+}, nt = { class: "min-w-0 flex-1" }, ot = {
+  key: 1,
+  class: "break-words"
+}, lt = { key: 0 }, it = ["colspan"], st = {
+  key: 1,
+  class: "w-full"
+}, 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"
+}, vt = ["onMousedown"], yt = { class: "gsc-table" }, ht = ["checked", "onChange"], xt = ["onDblclick"], bt = {
+  key: 1,
+  class: "break-words"
+}, 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, String], default: 400 },
+    rowHeight: { type: Number, default: 40 },
+    enableRowSelection: { type: Boolean, default: !1 }
+  },
+  emits: [
+    "selection-change",
+    "cell-change",
+    "server-filter-change"
+  ],
+  setup(f, { emit: Re }) {
+    const d = f, I = Re, { t: v } = Be(), g = m(() => d.table), L = m(() => {
+      try {
+        return g.value.getHeaderGroups?.() || [];
+      } catch {
+        return [];
+      }
+    }), z = m(() => {
+      try {
+        return g.value.getRowModel?.().rows || [];
+      } catch {
+        return [];
+      }
+    }), U = m(() => (g.value.getVisibleLeafColumns?.() || []).length + (d.enableRowSelection ? 1 : 0));
+    function G(t) {
+      const n = t.getIsSorted?.();
+      return n === "asc" ? "↑" : n === "desc" ? "↓" : "";
+    }
+    function N(t, n) {
+      const o = n.column;
+      if (!o.getCanSort?.())
+        return;
+      const e = !!t?.shiftKey;
+      o.toggleSorting?.(void 0, e);
+    }
+    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 {
+      }
+    }
+    function $(t) {
+      const n = t?.getIsPinned?.();
+      return n === "left" ? "left" : n === "right" ? "right" : "center";
+    }
+    function E(t, n, o) {
+      const e = t.indexOf(n), l = t.indexOf(o);
+      if (e === -1 || l === -1 || e === l)
+        return t;
+      const D = t.slice();
+      return D.splice(e, 1), D.splice(l, 0, n), D;
+    }
+    function K(t, n) {
+      const o = n?.id;
+      let e = C.value;
+      try {
+        const r = t.dataTransfer.getData("text/plain");
+        r && (e = r);
+      } catch {
+      }
+      if (!e || !o || e === o) {
+        C.value = null;
+        return;
+      }
+      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 P = $(D), Fe = $(ve);
+      if (P !== Fe) {
+        C.value = null;
+        return;
+      }
+      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 j(t) {
+      const n = t.getIsPinned?.();
+      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 q = m(() => d.enableRowSelection ? {
+      width: `${R}px`,
+      minWidth: `${R}px`,
+      position: "sticky",
+      left: "0px",
+      zIndex: 4
+    } : {}), J = m(() => d.enableRowSelection ? {
+      width: `${R}px`,
+      minWidth: `${R}px`,
+      position: "sticky",
+      left: "0px",
+      zIndex: 3
+    } : {}), 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",
+        ...j(n)
+      };
+    }
+    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,
+        ...j(n)
+      };
+    }
+    const y = A(null), S = Se({});
+    function Y(t) {
+      const n = t?.columnDef?.meta?.col;
+      return !!(n?.filterable || n?.filterType || n?.filterOptions);
+    }
+    function Z(t) {
+      return t?.columnDef?.meta?.col?.filterType || "text";
+    }
+    function ee(t) {
+      return t?.columnDef?.meta?.col?.filterOptions || [];
+    }
+    function te(t) {
+      y.value = y.value === t ? null : t;
+    }
+    function ne(t, n) {
+      S[t] = n;
+    }
+    function oe(t) {
+      if (d.mode === "server") {
+        I("server-filter-change", { key: t, value: S[t] }), y.value = null;
+        return;
+      }
+      g.value.getColumn?.(t)?.setFilterValue?.(S[t]), y.value = null;
+    }
+    function le(t) {
+      if (S[t] = "", d.mode === "server") {
+        I("server-filter-change", { key: t, value: "" }), y.value = null;
+        return;
+      }
+      g.value.getColumn?.(t)?.setFilterValue?.(""), y.value = null;
+    }
+    function ie() {
+      y.value = null;
+    }
+    Te(() => {
+      document.addEventListener("click", ie);
+    }), Oe(() => {
+      document.removeEventListener("click", ie);
+    }), Pe(
+      () => g.value.getState?.().rowSelection,
+      () => {
+        if (d.enableRowSelection)
+          try {
+            const t = g.value.getSelectedRowModel?.().rows || [];
+            I("selection-change", t.map((n) => n.original));
+          } catch {
+          }
+      },
+      { deep: !0 }
+    );
+    const _ = Se({});
+    function w(t, n) {
+      return `${t.id}::${n.id}`;
+    }
+    function se(t) {
+      return !!t?.columnDef?.meta?.col?.editor;
+    }
+    function ce(t) {
+      const n = t?.columnDef?.meta?.col;
+      return !n?.editor || n.editor === "input" ? "text" : n.editor;
+    }
+    function re(t) {
+      return t?.columnDef?.meta?.col?.options || [];
+    }
+    function F(t, n) {
+      if (!se(n))
+        return;
+      const o = w(t, n);
+      _[o] = t.original?.[n.id];
+    }
+    function T(t, n) {
+      const o = w(t, n);
+      return Object.prototype.hasOwnProperty.call(_, o);
+    }
+    function ue(t, n) {
+      const o = w(t, n);
+      return _[o];
+    }
+    function ae(t, n, o) {
+      const e = w(t, n);
+      _[e] = o;
+    }
+    function de(t, n) {
+      const o = w(t, n);
+      delete _[o];
+    }
+    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 me = A(0);
+    function ze(t) {
+      me.value = t.target.scrollTop || 0;
+    }
+    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 ? (i(), s("th", {
+                key: 0,
+                class: "gsc-th text-center",
+                style: p(q.value)
+              }, [
+                c("input", {
+                  type: "checkbox",
+                  class: "gsc-checkbox",
+                  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),
+              (i(!0), s(x, null, b(o.headers, (e) => (i(), s("th", {
+                key: e.id,
+                class: "gsc-th",
+                style: p(Q(e)),
+                onDragover: n[3] || (n[3] = k(() => {
+                }, ["prevent"])),
+                onDrop: (l) => K(l, e.column)
+              }, [
+                c("div", dt, [
+                  c("div", {
+                    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: a(v)("gsc.grid.table.dragReorder"),
+                      draggable: "true",
+                      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?.() ? (i(), s("span", ft, M(G(e.column)), 1)) : u("", !0)
+                  ], 10, gt),
+                  Y(e.column) ? (i(), h(a(B), {
+                    key: 0,
+                    type: "button",
+                    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 ? (i(), h(De, {
+                  key: 0,
+                  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?.() ? (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, at))), 128))
+            ]))), 128))
+          ])
+        ]),
+        c("div", {
+          class: "overflow-auto",
+          style: p({ height: `${f.height}px` }),
+          onScroll: ze
+        }, [
+          c("div", {
+            style: p({ height: `${Ve.value}px` })
+          }, null, 4),
+          c("table", yt, [
+            c("tbody", null, [
+              (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 ? (i(), s("td", {
+                  key: 0,
+                  class: "gsc-td text-center",
+                  style: p(J.value)
+                }, [
+                  c("input", {
+                    type: "checkbox",
+                    class: "gsc-checkbox",
+                    checked: o.getIsSelected?.(),
+                    onChange: (e) => o.toggleSelected?.(!!e.target.checked)
+                  }, null, 40, ht)
+                ], 4)) : u("", !0),
+                (i(!0), s(x, null, b(o.getVisibleCells(), (e) => (i(), s("td", {
+                  key: e.id,
+                  class: "gsc-td align-top",
+                  style: p(X(e)),
+                  onDblclick: (l) => F(o, e.column)
+                }, [
+                  T(o, e.column) ? (i(), h($e, {
+                    key: 0,
+                    "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, xt))), 128))
+              ], 4))), 128)),
+              fe.value.length === 0 ? (i(), s("tr", kt, [
+                c("td", {
+                  colspan: U.value,
+                  class: "px-3 py-10 text-center text-sm text-[rgba(0,0,0,0.45)]"
+                }, M(f.loading ? a(v)("gsc.grid.table.loading") : a(v)("gsc.grid.table.empty")), 9, Ct)
+              ])) : u("", !0)
+            ])
+          ]),
+          c("div", {
+            style: p({ height: `${Ee.value}px` })
+          }, null, 4)
+        ], 36)
+      ])) : (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 ? (i(), s("th", {
+                key: 0,
+                class: "gsc-th text-center",
+                style: p(q.value)
+              }, [
+                c("input", {
+                  type: "checkbox",
+                  class: "gsc-checkbox",
+                  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),
+              (i(!0), s(x, null, b(o.headers, (e) => (i(), s("th", {
+                key: e.id,
+                class: "gsc-th",
+                style: p(Q(e)),
+                onDragover: n[1] || (n[1] = k(() => {
+                }, ["prevent"])),
+                onDrop: (l) => K(l, e.column)
+              }, [
+                c("div", je, [
+                  c("div", {
+                    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: a(v)("gsc.grid.table.dragReorder"),
+                      draggable: "true",
+                      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?.() ? (i(), s("span", Xe, M(G(e.column)), 1)) : u("", !0)
+                  ], 10, qe),
+                  Y(e.column) ? (i(), h(a(B), {
+                    key: 0,
+                    type: "button",
+                    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 ? (i(), h(De, {
+                  key: 0,
+                  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?.() ? (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, Ye)) : u("", !0)
+              ], 44, Ke))), 128))
+            ]))), 128))
+          ]),
+          c("tbody", null, [
+            (i(!0), s(x, null, b(z.value, (o) => (i(), s("tr", {
+              key: o.id,
+              class: "gsc-tr"
+            }, [
+              f.enableRowSelection ? (i(), s("td", {
+                key: 0,
+                class: "gsc-td text-center",
+                style: p(J.value)
+              }, [
+                c("input", {
+                  type: "checkbox",
+                  class: "gsc-checkbox",
+                  checked: o.getIsSelected?.(),
+                  onChange: (e) => o.toggleSelected?.(!!e.target.checked)
+                }, null, 40, Ze)
+              ], 4)) : u("", !0),
+              (i(!0), s(x, null, b(o.getVisibleCells(), (e) => (i(), s("td", {
+                key: e.id,
+                class: "gsc-td align-top",
+                style: p(X(e)),
+                onDblclick: (l) => F(o, e.column)
+              }, [
+                t.$slots[`cell-${e.column.id}`] ? Ae(t.$slots, `cell-${e.column.id}`, {
+                  key: 0,
+                  value: e.getValue(),
+                  row: o.original
+                }, void 0, !0) : (i(), s("div", tt, [
+                  c("div", nt, [
+                    T(o, e.column) ? (i(), h($e, {
+                      key: 0,
+                      "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"])
+                    ]))
+                  ]),
+                  se(e.column) && !T(o, e.column) ? (i(), h(a(B), {
+                    key: 0,
+                    variant: "default",
+                    class: "shrink-0 mt-0.5 px-2 h-6 text-xs",
+                    onClick: k((l) => F(o, e.column), ["stop"])
+                  }, {
+                    default: H(() => [...n[5] || (n[5] = [
+                      He(" ✎ ", -1)
+                    ])]),
+                    _: 1
+                  }, 8, ["onClick"])) : u("", !0)
+                ]))
+              ], 44, et))), 128))
+            ]))), 128)),
+            z.value.length === 0 ? (i(), s("tr", lt, [
+              c("td", {
+                colspan: U.value,
+                class: "px-3 py-10 text-center text-sm text-[rgba(0,0,0,0.45)]"
+              }, M(f.loading ? a(v)("gsc.grid.table.loading") : a(v)("gsc.grid.table.empty")), 9, it)
+            ])) : u("", !0)
+          ])
+        ])
+      ], 4))
+    ]));
+  }
+}, Et = /* @__PURE__ */ Le(_t, [["__scopeId", "data-v-506c5c98"]]);
+export {
+  Et as default
+};

package/dist/es/src/Grid/src/components/Pager.css

@@ -0,0 +1 @@
+[data-v-729972d8],[data-v-729972d8]:before,[data-v-729972d8]:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }[data-v-729972d8]::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.text-sm[data-v-729972d8]{font-size:.875rem;line-height:1.25rem}

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

@@ -0,0 +1,64 @@
+import { computed as v, openBlock as n, createElementBlock as l, createElementVNode as o, toDisplayString as r, unref as i, Fragment as f, renderList as z, createVNode as p, withCtx as c } from "vue";
+import { useLocale as b } from "../../../hooks/useLocale.js";
+import { GscButton as m } from "../../../Button/index.js";
+import './Pager.css';/* empty css           */
+import y from "../../../../_virtual/_plugin-vue_export-helper.js";
+const S = { class: "gsc-pager" }, N = { class: "text-sm gsc-text-secondary" }, $ = ["value"], k = ["value"], x = { class: "gsc-pager-jumper text-sm" }, C = ["value"], h = { class: "gsc-text-secondary" }, B = {
+  __name: "Pager",
+  props: {
+    page: { type: Number, default: 1 },
+    pageSize: { type: Number, default: 10 },
+    total: { type: Number, default: 0 },
+    pageSizeOptions: { type: Array, default: () => [10, 20, 50, 100] }
+  },
+  emits: ["update:page", "update:pageSize"],
+  setup(t) {
+    const d = t, { t: u } = b(), g = v(() => Math.max(1, Math.ceil((d.total || 0) / (d.pageSize || 1))));
+    return (s, e) => (n(), l("div", S, [
+      o("div", N, r(i(u)("gsc.grid.pager.total", { total: t.total })), 1),
+      o("select", {
+        class: "gsc-control gsc-control-auto",
+        value: t.pageSize,
+        onChange: e[0] || (e[0] = (a) => s.$emit("update:pageSize", Number(a.target.value)))
+      }, [
+        (n(!0), l(f, null, z(t.pageSizeOptions, (a) => (n(), l("option", {
+          key: a,
+          value: a
+        }, r(i(u)("gsc.grid.pager.pageSize", { size: a })), 9, k))), 128))
+      ], 40, $),
+      p(i(m), {
+        variant: "default",
+        size: "icon",
+        disabled: t.page <= 1,
+        onClick: e[1] || (e[1] = (a) => s.$emit("update:page", t.page - 1))
+      }, {
+        default: c(() => [...e[4] || (e[4] = [
+          o("span", { "aria-hidden": "true" }, "‹", -1)
+        ])]),
+        _: 1
+      }, 8, ["disabled"]),
+      o("div", x, [
+        o("input", {
+          class: "gsc-control gsc-control-page gsc-control-center",
+          value: t.page,
+          onChange: e[2] || (e[2] = (a) => s.$emit("update:page", Number(a.target.value || 1)))
+        }, null, 40, C),
+        o("span", h, "/ " + r(g.value), 1)
+      ]),
+      p(i(m), {
+        variant: "default",
+        size: "icon",
+        disabled: t.page >= g.value,
+        onClick: e[3] || (e[3] = (a) => s.$emit("update:page", t.page + 1))
+      }, {
+        default: c(() => [...e[5] || (e[5] = [
+          o("span", { "aria-hidden": "true" }, "›", -1)
+        ])]),
+        _: 1
+      }, 8, ["disabled"])
+    ]));
+  }
+}, V = /* @__PURE__ */ y(B, [["__scopeId", "data-v-729972d8"]]);
+export {
+  V as default
+};

package/dist/es/src/Grid/src/components/QueryBar.css

@@ -0,0 +1 @@
+[data-v-366b3fad],[data-v-366b3fad]:before,[data-v-366b3fad]:after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }[data-v-366b3fad]::backdrop{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-pan-x: ;--un-pan-y: ;--un-pinch-zoom: ;--un-scroll-snap-strictness:proximity;--un-ordinal: ;--un-slashed-zero: ;--un-numeric-figure: ;--un-numeric-spacing: ;--un-numeric-fraction: ;--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 rgb(0 0 0 / 0);--un-ring-shadow:0 0 rgb(0 0 0 / 0);--un-shadow-inset: ;--un-shadow:0 0 rgb(0 0 0 / 0);--un-ring-inset: ;--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgb(147 197 253 / .5);--un-blur: ;--un-brightness: ;--un-contrast: ;--un-drop-shadow: ;--un-grayscale: ;--un-hue-rotate: ;--un-invert: ;--un-saturate: ;--un-sepia: ;--un-backdrop-blur: ;--un-backdrop-brightness: ;--un-backdrop-contrast: ;--un-backdrop-grayscale: ;--un-backdrop-hue-rotate: ;--un-backdrop-invert: ;--un-backdrop-opacity: ;--un-backdrop-saturate: ;--un-backdrop-sepia: }.container[data-v-366b3fad]{width:100%}@media(min-width:576px){.container[data-v-366b3fad]{max-width:576px}}@media(min-width:768px){.container[data-v-366b3fad]{max-width:768px}}@media(min-width:992px){.container[data-v-366b3fad]{max-width:992px}}@media(min-width:1200px){.container[data-v-366b3fad]{max-width:1200px}}@media(min-width:1600px){.container[data-v-366b3fad]{max-width:1600px}}@media(min-width:2000px){.container[data-v-366b3fad]{max-width:2000px}}.flex[data-v-366b3fad]{display:flex}.resize[data-v-366b3fad]{resize:both}.items-center[data-v-366b3fad]{align-items:center}.gap-2[data-v-366b3fad]{gap:.5rem}