@gsc-basic/components 1.0.1 → 1.0.2

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

@@ -0,0 +1,184 @@
+import { ref as z, computed as m, watch as D, createElementBlock as i, openBlock as o, createElementVNode as l, renderSlot as O, normalizeClass as k, Fragment as x, renderList as S, toDisplayString as g, createBlock as h, resolveDynamicComponent as _, unref as s, withCtx as b, createCommentVNode as w } from "vue";
+import { useForm as Q } from "../../../../node_modules/@tanstack/vue-form/dist/esm/useForm.js";
+import { useLocale as A } from "../../../hooks/useLocale.js";
+import './QueryBar.css';/* empty css              */
+import G from "../../../../_virtual/_plugin-vue_export-helper.js";
+const H = { class: "gsc-card gsc-card-pad" }, J = ["title"], M = { class: "gsc-form-control" }, P = ["value", "onChange"], T = { value: "" }, U = ["value"], W = {
+  key: 1,
+  class: "gsc-range"
+}, X = ["value", "onInput"], Y = ["value", "onInput"], Z = ["placeholder", "value", "onInput"], ee = ["disabled"], te = ["disabled"], ae = {
+  __name: "QueryBar",
+  props: {
+    schema: { type: Array, default: () => [] },
+    modelValue: { type: Object, default: () => ({}) },
+    loading: { type: Boolean, default: !1 },
+    collapsedCount: { type: Number, default: 4 }
+  },
+  emits: ["update:modelValue", "search", "reset"],
+  setup(V, { emit: F }) {
+    const u = V, p = F, { t: y } = A(), f = z(!0);
+    function q(t = []) {
+      return (t || []).filter(Boolean).map((e) => ({
+        key: e.key,
+        label: e.label ?? e.title ?? e.key,
+        type: e.type ?? "text",
+        placeholder: e.placeholder,
+        options: e.options,
+        span: e.span,
+        startKey: e.startKey,
+        endKey: e.endKey,
+        defaultValue: e.defaultValue
+      })).filter((e) => e.type === "dateRange" ? !!(e.startKey && e.endKey) : !!e.key);
+    }
+    const v = m(() => q(u.schema));
+    function C() {
+      const t = {};
+      return v.value.forEach((e) => {
+        e.type === "dateRange" ? (t[e.startKey] = u.modelValue?.[e.startKey] ?? "", t[e.endKey] = u.modelValue?.[e.endKey] ?? "") : t[e.key] = u.modelValue?.[e.key] ?? e.defaultValue ?? "";
+      }), t;
+    }
+    const r = Q({
+      defaultValues: C(),
+      onSubmit: ({ value: t }) => {
+        p("update:modelValue", t || {}), p("search", t || {});
+      }
+    }), K = r.useStore((t) => t.values);
+    D(
+      () => u.modelValue,
+      (t) => {
+        const e = t || {};
+        Object.keys(e).forEach((a) => {
+          try {
+            r.setFieldValue(a, e[a], { dontValidate: !0, dontRunListeners: !0 });
+          } catch {
+          }
+        });
+      },
+      { deep: !0 }
+    );
+    const B = m(() => v.value.length > u.collapsedCount), I = m(() => B.value && f.value ? v.value.slice(0, u.collapsedCount) : v.value), R = m(() => "grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4"), E = m(() => "lg:col-span-3 xl:col-span-4");
+    function j(t) {
+      const e = Number(t?.span || 0);
+      return e === 2 ? "lg:col-span-2" : e === 3 ? "lg:col-span-3" : e === 4 ? "lg:col-span-4" : "";
+    }
+    function L(t) {
+      return t.type === "dateRange" ? `${t.startKey}__${t.endKey}` : t.key;
+    }
+    function N() {
+      try {
+        r.handleSubmit();
+      } catch {
+        p("update:modelValue", K.value || {}), p("search", K.value || {});
+      }
+    }
+    function $() {
+      const t = C();
+      Object.keys(t).forEach((e) => {
+        try {
+          r.setFieldValue(e, t[e], { dontValidate: !0, dontRunListeners: !0 });
+        } catch {
+        }
+      }), p("update:modelValue", t), p("reset", t);
+    }
+    return (t, e) => (o(), i("div", H, [
+      l("div", {
+        class: k(["gsc-querybar", R.value])
+      }, [
+        (o(!0), i(x, null, S(I.value, (a) => (o(), i("div", {
+          key: L(a),
+          class: k(["gsc-form-item", j(a)])
+        }, [
+          l("div", {
+            class: "gsc-form-label",
+            title: a.label
+          }, g(a.label), 9, J),
+          l("div", M, [
+            a.type === "select" ? (o(), h(_(s(r).Field), {
+              key: 0,
+              name: a.key
+            }, {
+              default: b(({ field: c, state: d }) => [
+                l("select", {
+                  class: "gsc-control",
+                  value: d.value ?? "",
+                  onChange: (n) => c.setValue(n.target.value)
+                }, [
+                  l("option", T, g(a.placeholder || s(y)("gsc.grid.queryBar.placeholder.select")), 1),
+                  (o(!0), i(x, null, S(a.options || [], (n) => (o(), i("option", {
+                    key: n.value,
+                    value: n.value
+                  }, g(n.label), 9, U))), 128))
+                ], 40, P)
+              ]),
+              _: 2
+            }, 1032, ["name"])) : a.type === "dateRange" ? (o(), i("div", W, [
+              (o(), h(_(s(r).Field), {
+                name: a.startKey
+              }, {
+                default: b(({ field: c, state: d }) => [
+                  l("input", {
+                    type: "date",
+                    class: "gsc-control",
+                    value: d.value ?? "",
+                    onInput: (n) => c.setValue(n.target.value)
+                  }, null, 40, X)
+                ]),
+                _: 1
+              }, 8, ["name"])),
+              e[1] || (e[1] = l("div", { class: "gsc-range-sep" }, " — ", -1)),
+              (o(), h(_(s(r).Field), {
+                name: a.endKey
+              }, {
+                default: b(({ field: c, state: d }) => [
+                  l("input", {
+                    type: "date",
+                    class: "gsc-control",
+                    value: d.value ?? "",
+                    onInput: (n) => c.setValue(n.target.value)
+                  }, null, 40, Y)
+                ]),
+                _: 1
+              }, 8, ["name"]))
+            ])) : (o(), h(_(s(r).Field), {
+              key: 2,
+              name: a.key
+            }, {
+              default: b(({ field: c, state: d }) => [
+                l("input", {
+                  class: "gsc-control",
+                  placeholder: a.placeholder || s(y)("gsc.grid.queryBar.placeholder.input"),
+                  value: d.value ?? "",
+                  onInput: (n) => c.setValue(n.target.value)
+                }, null, 40, Z)
+              ]),
+              _: 2
+            }, 1032, ["name"]))
+          ])
+        ], 2))), 128)),
+        l("div", {
+          class: k(["gsc-form-actions", E.value])
+        }, [
+          l("button", {
+            class: "gsc-btn gsc-btn-default",
+            disabled: V.loading,
+            onClick: $
+          }, g(s(y)("gsc.grid.queryBar.action.reset")), 9, ee),
+          l("button", {
+            class: "gsc-btn gsc-btn-primary",
+            disabled: V.loading,
+            onClick: N
+          }, g(s(y)("gsc.grid.queryBar.action.search")), 9, te),
+          B.value ? (o(), i("button", {
+            key: 0,
+            class: "gsc-btn gsc-btn-link",
+            onClick: e[0] || (e[0] = (a) => f.value = !f.value)
+          }, g(f.value ? s(y)("gsc.grid.queryBar.action.expand") : s(y)("gsc.grid.queryBar.action.collapse")), 1)) : w("", !0)
+        ], 2)
+      ], 2),
+      O(t.$slots, "extra", {}, void 0, !0)
+    ]));
+  }
+}, ue = /* @__PURE__ */ G(ae, [["__scopeId", "data-v-e3036b77"]]);
+export {
+  ue as default
+};

package/dist/es/src/Grid/src/composables/useCellEditor.js

@@ -0,0 +1,20 @@
+import { ref as t, watch as d } from "vue";
+function f(a, l) {
+  const e = t(a.modelValue ?? "");
+  d(() => a.modelValue, (u) => {
+    e.value = u ?? "";
+  });
+  function o(u) {
+    e.value = u, l("update:modelValue", u);
+  }
+  function c() {
+    l("commit", e.value), l("update:modelValue", e.value);
+  }
+  function n() {
+    l("cancel");
+  }
+  return { localValue: e, updateLocal: o, commit: c, cancel: n };
+}
+export {
+  f as useCellEditor
+};

package/dist/es/src/Grid/src/composables/useGridTable.js

@@ -0,0 +1,212 @@
+import { ref as r, computed as v, watch as M } from "vue";
+import { useVueTable as H } from "../../../../node_modules/@tanstack/vue-table/build/lib/index.js";
+import { getPaginationRowModel as U, getFilteredRowModel as j, getSortedRowModel as B, getCoreRowModel as E, functionalUpdate as S } from "../../../../node_modules/@tanstack/table-core/build/lib/index.js";
+function A(f = []) {
+  return (f || []).map((t) => ({
+    key: t.key,
+    title: t.title ?? t.label ?? t.key,
+    width: t.width,
+    minWidth: t.minWidth,
+    fixed: t.fixed,
+    sortable: !!t.sortable,
+    filterable: !!t.filterable,
+    filterType: t.filterType,
+    filterOptions: t.filterOptions,
+    formatter: t.formatter,
+    editor: t.editor,
+    options: t.options
+  }));
+}
+function J(f) {
+  return v(() => A(f.value).map((l) => ({
+    id: l.key,
+    accessorKey: l.key,
+    header: l.title,
+    size: l.width,
+    minSize: l.minWidth ?? 40,
+    enableSorting: l.sortable,
+    enableResizing: !0,
+    enableHiding: !0,
+    enablePinning: !0,
+    meta: { col: l },
+    cell: (u) => {
+      const d = u.getValue();
+      if (typeof l.formatter == "function")
+        try {
+          return l.formatter(d, { row: u.row.original, index: u.row.index });
+        } catch {
+          return String(d ?? "");
+        }
+      return String(d ?? "");
+    }
+  })));
+}
+function Z(f = {}) {
+  const {
+    data: t = [],
+    request: l,
+    mode: u = "server",
+    pageSize: d = 10,
+    initialQuery: T = {},
+    columns: q = [],
+    rowKey: D = "id",
+    enableRowSelection: F = !1
+  } = f, P = r(q || []), s = r(Array.isArray(t) ? (t || []).slice() : (t?.value || []).slice()), h = r({ ...T || {} }), c = r(0), z = r(!1), n = r({ pageIndex: 0, pageSize: d }), i = r([]), y = r({}), w = r({ left: [], right: [] }), b = r({}), N = J(P), o = v(() => u === "server" && typeof l == "function"), x = H({
+    get data() {
+      return s.value;
+    },
+    get columns() {
+      return N.value;
+    },
+    getRowId: (e, a) => {
+      const p = e && e[D];
+      return String(p === 0 || p ? p : a);
+    },
+    state: {
+      get sorting() {
+        return i.value;
+      },
+      get pagination() {
+        return n.value;
+      },
+      get columnVisibility() {
+        return y.value;
+      },
+      get columnPinning() {
+        return w.value;
+      },
+      get rowSelection() {
+        return b.value;
+      }
+    },
+    onSortingChange: (e) => {
+      i.value = S(e, i.value), o.value && (n.value = { ...n.value, pageIndex: 0 });
+    },
+    onPaginationChange: (e) => {
+      n.value = S(e, n.value);
+    },
+    onColumnVisibilityChange: (e) => {
+      y.value = S(e, y.value);
+    },
+    onColumnPinningChange: (e) => {
+      w.value = S(e, w.value);
+    },
+    enableRowSelection: !!F,
+    onRowSelectionChange: (e) => {
+      b.value = S(e, b.value);
+    },
+    manualPagination: o.value,
+    manualSorting: o.value,
+    manualFiltering: o.value,
+    pageCount: v(() => {
+      const e = n.value.pageSize || 1;
+      return Math.max(1, Math.ceil((c.value || 0) / e));
+    }),
+    enableColumnResizing: !0,
+    columnResizeMode: "onChange",
+    getCoreRowModel: E(),
+    getSortedRowModel: B(),
+    getFilteredRowModel: j(),
+    getPaginationRowModel: U()
+  }), k = v({
+    get: () => (n.value.pageIndex || 0) + 1,
+    set: (e) => {
+      const a = Math.max(1, Number(e || 1));
+      n.value = { ...n.value, pageIndex: a - 1 };
+    }
+  }), I = v({
+    get: () => n.value.pageSize,
+    set: (e) => {
+      const a = Math.max(1, Number(e || d));
+      n.value = { pageIndex: 0, pageSize: a };
+    }
+  }), R = v(() => {
+    const e = i.value && i.value[0];
+    return { id: e?.id ?? null, desc: !!e?.desc };
+  }), W = v(() => (x.getRowModel()?.rows || []).map((a) => a.original));
+  async function C() {
+    if (!o.value) {
+      c.value = s.value.length;
+      return;
+    }
+    z.value = !0;
+    try {
+      const e = await l({
+        page: k.value,
+        pageSize: I.value,
+        query: h.value,
+        // Back-compat: keep single sort (first) and also provide multi-sort array.
+        sort: R.value,
+        sorts: i.value
+      });
+      s.value = (e?.records || []).slice(), c.value = Number(e?.total ?? s.value.length);
+    } finally {
+      z.value = !1;
+    }
+  }
+  function O(e = {}) {
+    h.value = { ...e || {} }, o.value && (n.value = { ...n.value, pageIndex: 0 });
+  }
+  function V(e = []) {
+    s.value = (e || []).slice(), o.value || (c.value = s.value.length);
+  }
+  function Q(e = []) {
+    P.value = (e || []).slice();
+    try {
+      const a = A(e || []), m = a.filter((g) => g.fixed === "left").map((g) => g.key), p = a.filter((g) => g.fixed === "right").map((g) => g.key);
+      x.setColumnPinning?.({ left: m, right: p });
+    } catch {
+    }
+  }
+  function G(e) {
+    if (!e)
+      return;
+    const a = x.getColumn(e);
+    if (a && typeof a.toggleSorting == "function") {
+      a.toggleSorting(void 0, !1);
+      return;
+    }
+    const m = i.value?.[0];
+    m?.id === e ? i.value = [{ id: e, desc: !m.desc }] : i.value = [{ id: e, desc: !1 }];
+  }
+  return M(
+    () => [t, u],
+    () => {
+      Array.isArray(t) && V(t);
+    },
+    { deep: !0 }
+  ), M(
+    () => [n.value.pageIndex, n.value.pageSize, R.value.id, R.value.desc],
+    () => {
+      o.value && C();
+    }
+  ), M(
+    () => h.value,
+    () => {
+      o.value && C();
+    },
+    { deep: !0 }
+  ), o.value ? C() : c.value = s.value.length, {
+    table: x,
+    loading: z,
+    query: h,
+    page: k,
+    pageSize: I,
+    total: c,
+    rows: W,
+    sort: G,
+    sortState: R,
+    sorting: i,
+    columnVisibility: y,
+    columnPinning: w,
+    rowSelection: b,
+    load: C,
+    setQuery: O,
+    setData: V,
+    setColumns: Q,
+    mode: u
+  };
+}
+export {
+  Z as useGridTable
+};

package/dist/es/src/Grid/src/styles/antd.css

@@ -0,0 +1 @@
+.gsc-grid{color:var(--gsc-grid-text-primary);font-size:14px;line-height:1.5715}.gsc-grid .gsc-text-secondary{color:var(--gsc-grid-text-secondary)}.gsc-grid .gsc-card{border:1px solid var(--gsc-grid-divider);border-radius:8px;background:var(--gsc-grid-bg);box-shadow:var(--gsc-grid-shadow-light)}.gsc-grid .gsc-card-pad{padding:12px 16px}.gsc-grid .gsc-querybar{display:grid;grid-gap:12px 16px;gap:12px 16px}.gsc-grid .gsc-form-item{display:flex;align-items:center;gap:8px;min-width:0}.gsc-grid .gsc-form-label{width:96px;flex:0 0 auto;text-align:right;color:var(--gsc-grid-text-secondary);font-size:14px;line-height:32px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gsc-grid .gsc-form-label:after{content:":";margin-left:2px;color:var(--gsc-grid-text-muted)}.gsc-grid .gsc-form-control{flex:1 1 auto;min-width:0}.gsc-grid .gsc-form-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px}.gsc-grid .gsc-range{display:flex;align-items:center;gap:8px;min-width:0}.gsc-grid .gsc-range .gsc-control{width:auto;flex:1 1 0;min-width:0}.gsc-grid .gsc-range-sep{flex:0 0 auto;color:var(--gsc-grid-text-muted)}.gsc-grid .gsc-control{box-sizing:border-box;width:100%;height:32px;padding:4px 11px;border:1px solid var(--gsc-grid-border);border-radius:6px;background:var(--gsc-grid-bg);color:var(--gsc-grid-text-primary);font-size:14px;line-height:22px;transition:border-color .2s,box-shadow .2s;outline:none}.gsc-grid .gsc-control::-moz-placeholder{color:var(--gsc-grid-text-placeholder)}.gsc-grid .gsc-control::placeholder{color:var(--gsc-grid-text-placeholder)}.gsc-grid .gsc-control:hover{border-color:var(--gsc-grid-primary-hover)}.gsc-grid .gsc-control:focus{border-color:var(--gsc-grid-primary);box-shadow:var(--gsc-grid-focus-shadow)}.gsc-grid .gsc-control.gsc-control-auto{width:auto}.gsc-grid .gsc-control.gsc-control-sm{height:28px;padding:0 10px;font-size:14px}.gsc-grid .gsc-control.gsc-control-center{text-align:center}.gsc-grid .gsc-control.gsc-control-page{width:56px}.gsc-grid select.gsc-control{-moz-appearance:none;appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gsc-grid-text-placeholder) 50%),linear-gradient(135deg,var(--gsc-grid-text-placeholder) 50%,transparent 50%);background-position:calc(100% - 16px) 50%,calc(100% - 11px) 50%;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:28px}.gsc-grid .gsc-textarea{box-sizing:border-box;display:block;width:100%;min-height:80px;padding:8px 11px;border:1px solid var(--gsc-grid-border);border-radius:6px;background:var(--gsc-grid-bg);color:var(--gsc-grid-text-primary);font-size:14px;line-height:1.5715;transition:border-color .2s,box-shadow .2s;outline:none}.gsc-grid .gsc-textarea:hover{border-color:var(--gsc-grid-primary-hover)}.gsc-grid .gsc-textarea:focus{border-color:var(--gsc-grid-primary);box-shadow:var(--gsc-grid-focus-shadow)}.gsc-grid .gsc-btn{height:32px;padding:4px 15px;border-radius:6px;font-size:14px;line-height:22px;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;user-select:none;transition:border-color .2s,background-color .2s,color .2s,box-shadow .2s}.gsc-grid .gsc-btn:disabled{cursor:not-allowed;opacity:.5}.gsc-grid .gsc-btn:focus-visible{outline:none;box-shadow:var(--gsc-grid-focus-shadow)}.gsc-grid .gsc-btn.gsc-btn-sm{height:28px;padding:0 10px;font-size:14px;line-height:22px}.gsc-grid .gsc-btn.gsc-btn-icon{width:32px;padding:0;display:inline-flex;align-items:center;justify-content:center}.gsc-grid .gsc-btn-default{border:1px solid var(--gsc-grid-border);background:var(--gsc-grid-bg);color:var(--gsc-grid-text-primary)}.gsc-grid .gsc-btn-default:hover:not(:disabled){border-color:var(--gsc-grid-primary-hover);color:var(--gsc-grid-primary-hover)}.gsc-grid .gsc-btn-default.gsc-btn-icon:hover:not(:disabled){background:var(--gsc-grid-bg-hover-icon)}.gsc-grid .gsc-btn-default.gsc-btn-icon:active:not(:disabled){background:var(--gsc-grid-bg-active-icon)}.gsc-grid .gsc-btn-link{border:0;background:transparent;color:var(--gsc-grid-primary);padding:0 4px}.gsc-grid .gsc-btn-link:hover:not(:disabled){color:var(--gsc-grid-primary-hover);background:transparent}.gsc-grid .gsc-btn-link:active:not(:disabled){color:var(--gsc-grid-primary-active)}.gsc-grid .gsc-btn-primary{border:1px solid var(--gsc-grid-primary);background:var(--gsc-grid-primary);color:var(--gsc-grid-bg)}.gsc-grid .gsc-btn-primary:hover:not(:disabled){border-color:var(--gsc-grid-primary-hover);background:var(--gsc-grid-primary-hover)}.gsc-grid .gsc-btn-primary:active:not(:disabled){border-color:var(--gsc-grid-primary-active);background:var(--gsc-grid-primary-active)}.gsc-grid .gsc-btn-danger{border:1px solid var(--gsc-grid-danger);background:var(--gsc-grid-danger);color:var(--gsc-grid-bg)}.gsc-grid .gsc-btn-danger:hover:not(:disabled){border-color:var(--gsc-grid-danger-hover);background:var(--gsc-grid-danger-hover)}.gsc-grid .gsc-btn-danger:active:not(:disabled){border-color:var(--gsc-grid-danger-active);background:var(--gsc-grid-danger-active)}.gsc-grid .gsc-btn-text{border:1px solid transparent;background:transparent;color:var(--gsc-grid-text-secondary);padding:0 8px;height:24px;border-radius:6px;font-size:12px;line-height:22px}.gsc-grid .gsc-btn-text.gsc-btn-icon-sm{width:24px;padding:0;display:inline-flex;align-items:center;justify-content:center}.gsc-grid .gsc-btn-text.gsc-btn-icon-sm>i{font-size:14px}.gsc-grid .gsc-btn-text:hover:not(:disabled){background:var(--gsc-grid-bg-hover-text);color:var(--gsc-grid-text-primary)}.gsc-grid .gsc-btn-text:active:not(:disabled){background:var(--gsc-grid-bg-active-text);color:var(--gsc-grid-text-primary)}.gsc-grid .gsc-pager{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}.gsc-grid .gsc-pager .gsc-pager-jumper{display:inline-flex;align-items:center;gap:8px}.gsc-grid .gsc-table{width:100%;border-collapse:collapse;table-layout:fixed}.gsc-grid .gsc-thead{background:var(--gsc-grid-bg-hover)}.gsc-grid .gsc-th{border-bottom:1px solid var(--gsc-grid-divider);padding:10px 12px;text-align:left;font-weight:500;color:var(--gsc-grid-text-primary);-webkit-user-select:none;-moz-user-select:none;user-select:none}.gsc-grid .gsc-td{border-bottom:1px solid var(--gsc-grid-divider);padding:8px 12px;color:var(--gsc-grid-text-primary);background:var(--gsc-grid-bg)}.gsc-grid .gsc-tr{transition:background-color .2s}.gsc-grid .gsc-tr:hover,.gsc-grid .gsc-tr:hover .gsc-td{background:var(--gsc-grid-bg-hover)}.gsc-grid .gsc-divider-top{border-top:1px solid var(--gsc-grid-divider)}.gsc-grid .gsc-checkbox{-moz-appearance:none;appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1px solid var(--gsc-grid-border);border-radius:4px;background:var(--gsc-grid-bg);display:inline-grid;place-content:center;cursor:pointer;vertical-align:middle;transition:border-color .2s,background-color .2s,box-shadow .2s}.gsc-grid .gsc-checkbox:hover{border-color:var(--gsc-grid-primary-hover)}.gsc-grid .gsc-checkbox:focus-visible{outline:none;box-shadow:var(--gsc-grid-focus-shadow)}.gsc-grid .gsc-checkbox:checked{background:var(--gsc-grid-primary);border-color:var(--gsc-grid-primary)}.gsc-grid .gsc-checkbox:checked:after{content:"";width:4px;height:8px;border:2px solid var(--gsc-grid-bg);border-top:0;border-left:0;transform:rotate(45deg);margin-top:-1px}.gsc-grid .gsc-checkbox:indeterminate{background:var(--gsc-grid-primary);border-color:var(--gsc-grid-primary)}.gsc-grid .gsc-checkbox:indeterminate:after{content:"";width:8px;height:2px;background:var(--gsc-grid-bg);border-radius:1px}.gsc-grid .gsc-popover{border:1px solid var(--gsc-grid-divider);border-radius:10px;background:var(--gsc-grid-bg);box-shadow:var(--gsc-grid-shadow-popover)}

package/dist/es/src/Grid/src/utils/exportCsv.js

@@ -0,0 +1,15 @@
+function b(d = "export.csv", c = [], i = []) {
+  const l = c.map((n) => n.title || n.header || n.key).join(","), s = i.map((n) => c.map((p) => {
+    const o = n[p.key];
+    if (o == null)
+      return "";
+    const t = String(o).replace(/"/g, '""');
+    return t.includes(",") || t.includes(`
+`) ? `"${t}"` : t;
+  }).join(",")), a = [l, ...s].join(`
+`), u = new Blob([a], { type: "text/csv;charset=utf-8;" }), r = URL.createObjectURL(u), e = document.createElement("a");
+  e.href = r, e.download = d, document.body.appendChild(e), e.click(), document.body.removeChild(e), URL.revokeObjectURL(r);
+}
+export {
+  b as exportToCsv
+};

package/dist/es/src/index.js

@@ -1,28 +1,30 @@
 import './styles/tokens.css';/* empty css                  */
 import { GscConfigProvider as t } from "./ConfigProvider/index.js";
-import { GscCodeEditor as f } from "./CodeEditor/index.js";
+import { GscCodeEditor as a } from "./CodeEditor/index.js";
 import { GscScaleScreen as i } from "./ScaleScreen/index.js";
-import { GscVideoBackground as d } from "./VideoBackground/index.js";
-import { configProviderContextKey as p, defaultInitialZIndex as m, defaultNamespace as s, localeContextKey as c, sizeInjectionKey as C, zIndexContextKey as u } from "./ConfigProvider/src/constants.js";
-import { provideGlobalConfig as g, useGlobalComponentSettings as y, useGlobalConfig as I } from "./ConfigProvider/src/useGlobalConfig.js";
-import { default as S } from "./locale/lang/zh-CN.js";
-import { default as v } from "./locale/lang/en-US.js";
-import { default as P } from "./locale/lang/ja-JP.js";
+import { GscVideoBackground as l } from "./VideoBackground/index.js";
+import { GscGrid as p } from "./Grid/index.js";
+import { default as s } from "./locale/lang/zh-CN.js";
+import { default as C } from "./locale/lang/en-US.js";
+import { default as u } from "./locale/lang/ja-JP.js";
+import { configProviderContextKey as y, defaultInitialZIndex as I, defaultNamespace as K, localeContextKey as S, sizeInjectionKey as b, zIndexContextKey as v } from "./ConfigProvider/src/constants.js";
+import { provideGlobalConfig as P, useGlobalComponentSettings as j, useGlobalConfig as N } from "./ConfigProvider/src/useGlobalConfig.js";
 export {
-  f as GscCodeEditor,
+  a as GscCodeEditor,
   t as GscConfigProvider,
+  p as GscGrid,
   i as GscScaleScreen,
-  d as GscVideoBackground,
-  p as configProviderContextKey,
-  m as defaultInitialZIndex,
-  s as defaultNamespace,
-  v as enUS,
-  P as jaJP,
-  c as localeContextKey,
-  g as provideGlobalConfig,
-  C as sizeInjectionKey,
-  y as useGlobalComponentSettings,
-  I as useGlobalConfig,
-  u as zIndexContextKey,
-  S as zhCN
+  l as GscVideoBackground,
+  y as configProviderContextKey,
+  I as defaultInitialZIndex,
+  K as defaultNamespace,
+  C as enUS,
+  u as jaJP,
+  S as localeContextKey,
+  P as provideGlobalConfig,
+  b as sizeInjectionKey,
+  j as useGlobalComponentSettings,
+  N as useGlobalConfig,
+  v as zIndexContextKey,
+  s as zhCN
 };

package/dist/es/src/locale/lang/en-US.js

@@ -24,6 +24,46 @@ const e = {
         copy: "Copy",
         copied: "Copied"
       }
+    },
+    grid: {
+      queryBar: {
+        placeholder: {
+          select: "Please select",
+          input: "Please enter"
+        },
+        action: {
+          reset: "Reset",
+          search: "Search",
+          expand: "Expand",
+          collapse: "Collapse"
+        }
+      },
+      actionBar: {
+        export: "Export",
+        info: "Info"
+      },
+      columnSettings: {
+        trigger: "Columns",
+        title: "Visible columns",
+        close: "Close",
+        checkAll: "Select all",
+        uncheckAll: "Clear all"
+      },
+      columnFilter: {
+        all: "All",
+        clear: "Clear",
+        apply: "Apply"
+      },
+      pager: {
+        total: "Total {total}",
+        pageSize: "{size} / page"
+      },
+      table: {
+        dragReorder: "Drag to reorder columns",
+        filter: "Filter",
+        loading: "Loading...",
+        empty: "No data"
+      }
     }
   }
 };

package/dist/es/src/locale/lang/ja-JP.js

@@ -1,4 +1,4 @@
-const a = {
+const e = {
   gsc: {
     locale: "ja-JP",
     global: {
@@ -24,9 +24,49 @@ const a = {
         copy: "コピー",
         copied: "コピー済み"
       }
+    },
+    grid: {
+      queryBar: {
+        placeholder: {
+          select: "選択してください",
+          input: "入力してください"
+        },
+        action: {
+          reset: "リセット",
+          search: "検索",
+          expand: "展開",
+          collapse: "折りたたむ"
+        }
+      },
+      actionBar: {
+        export: "エクスポート",
+        info: "情報"
+      },
+      columnSettings: {
+        trigger: "列設定",
+        title: "表示列",
+        close: "閉じる",
+        checkAll: "全選択",
+        uncheckAll: "全解除"
+      },
+      columnFilter: {
+        all: "すべて",
+        clear: "クリア",
+        apply: "適用"
+      },
+      pager: {
+        total: "合計 {total}",
+        pageSize: "{size} / ページ"
+      },
+      table: {
+        dragReorder: "ドラッグして列順を変更",
+        filter: "絞",
+        loading: "読み込み中...",
+        empty: "データなし"
+      }
     }
   }
 };
 export {
-  a as default
+  e as default
 };

package/dist/es/src/locale/lang/zh-CN.js

@@ -1,4 +1,4 @@
-const a = {
+const e = {
   gsc: {
     locale: "zh-CN",
     global: {
@@ -24,9 +24,49 @@ const a = {
         copy: "复制",
         copied: "已复制"
       }
+    },
+    grid: {
+      queryBar: {
+        placeholder: {
+          select: "请选择",
+          input: "请输入"
+        },
+        action: {
+          reset: "重置",
+          search: "查询",
+          expand: "展开",
+          collapse: "收起"
+        }
+      },
+      actionBar: {
+        export: "导出",
+        info: "查看信息"
+      },
+      columnSettings: {
+        trigger: "列设置",
+        title: "显示列",
+        close: "关闭",
+        checkAll: "全选",
+        uncheckAll: "全不选"
+      },
+      columnFilter: {
+        all: "全部",
+        clear: "清除",
+        apply: "应用"
+      },
+      pager: {
+        total: "共 {total} 条",
+        pageSize: "{size} 条/页"
+      },
+      table: {
+        dragReorder: "拖拽调整列顺序",
+        filter: "筛",
+        loading: "加载中...",
+        empty: "暂无数据"
+      }
     }
   }
 };
 export {
-  a as default
+  e as default
 };

package/dist/es/src/styles/tokens.css

@@ -1 +1 @@
-:root{--gsc-basic-primary-color: #2c9cfa;--gsc-basic-border-color: #eee;--gsc-basic-border-radius-base: 4px}.dark{--gsc-basic-border-color: #303030}
+:root{--gsc-basic-primary-color: #2c9cfa;--gsc-basic-border-color: #eee;--gsc-basic-border-radius-base: 4px;--gsc-grid-primary: #1677ff;--gsc-grid-primary-hover: #4096ff;--gsc-grid-primary-active: #0958d9;--gsc-grid-border: #d9d9d9;--gsc-grid-divider: #f0f0f0;--gsc-grid-bg-hover: #fafafa;--gsc-grid-focus-shadow: 0 0 0 2px rgb(5 145 255 / .1);--gsc-grid-text-primary: rgb(0 0 0 / .88);--gsc-grid-text-secondary: rgb(0 0 0 / .65);--gsc-grid-text-placeholder: rgb(0 0 0 / .45);--gsc-grid-text-muted: rgb(0 0 0 / .25);--gsc-grid-bg: #fff;--gsc-grid-shadow-light: 0 1px 2px rgb(0 0 0 / .03);--gsc-grid-shadow-popover: 0 6px 16px rgb(0 0 0 / .08);--gsc-grid-danger: #ff4d4f;--gsc-grid-danger-hover: #ff7875;--gsc-grid-danger-active: #d9363e;--gsc-grid-bg-hover-text: rgb(0 0 0 / .04);--gsc-grid-bg-active-text: rgb(0 0 0 / .08);--gsc-grid-bg-hover-icon: rgb(0 0 0 / .02);--gsc-grid-bg-active-icon: rgb(0 0 0 / .05)}.dark{--gsc-basic-border-color: #303030}

package/dist/lib/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("./src/index.js"),e=require("./src/ConfigProvider/src/constants.js"),o=require("./src/ConfigProvider/src/useGlobalConfig.js"),r=require("./src/ConfigProvider/index.js"),s=require("./src/CodeEditor/index.js"),c=require("./src/ScaleScreen/index.js"),l=require("./src/VideoBackground/index.js"),d=require("./src/locale/lang/zh-CN.js"),a=require("./src/locale/lang/en-US.js"),u=require("./src/locale/lang/ja-JP.js"),f={install:t=>{for(const i in n)t.use(n[i])}};exports.configProviderContextKey=e.configProviderContextKey;exports.defaultInitialZIndex=e.defaultInitialZIndex;exports.defaultNamespace=e.defaultNamespace;exports.localeContextKey=e.localeContextKey;exports.sizeInjectionKey=e.sizeInjectionKey;exports.zIndexContextKey=e.zIndexContextKey;exports.provideGlobalConfig=o.provideGlobalConfig;exports.useGlobalComponentSettings=o.useGlobalComponentSettings;exports.useGlobalConfig=o.useGlobalConfig;exports.GscConfigProvider=r.GscConfigProvider;exports.GscCodeEditor=s.GscCodeEditor;exports.GscScaleScreen=c.GscScaleScreen;exports.GscVideoBackground=l.GscVideoBackground;exports.zhCN=d.default;exports.enUS=a.default;exports.jaJP=u.default;exports.default=f;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const t=require("./src/index.js"),c=require("./src/locale/lang/zh-CN.js"),s=require("./src/locale/lang/en-US.js"),l=require("./src/locale/lang/ja-JP.js"),e=require("./src/ConfigProvider/src/constants.js"),o=require("./src/ConfigProvider/src/useGlobalConfig.js"),d=require("./src/ConfigProvider/index.js"),a=require("./src/CodeEditor/index.js"),u=require("./src/ScaleScreen/index.js"),f=require("./src/VideoBackground/index.js"),C=require("./src/Grid/index.js"),G={install:i=>{for(const r in t){const n=t[r];n&&(typeof n=="function"||typeof n=="object")&&"install"in n&&i.use(n)}}};exports.zhCN=c.default;exports.enUS=s.default;exports.jaJP=l.default;exports.configProviderContextKey=e.configProviderContextKey;exports.defaultInitialZIndex=e.defaultInitialZIndex;exports.defaultNamespace=e.defaultNamespace;exports.localeContextKey=e.localeContextKey;exports.sizeInjectionKey=e.sizeInjectionKey;exports.zIndexContextKey=e.zIndexContextKey;exports.provideGlobalConfig=o.provideGlobalConfig;exports.useGlobalComponentSettings=o.useGlobalComponentSettings;exports.useGlobalConfig=o.useGlobalConfig;exports.GscConfigProvider=d.GscConfigProvider;exports.GscCodeEditor=a.GscCodeEditor;exports.GscScaleScreen=u.GscScaleScreen;exports.GscVideoBackground=f.GscVideoBackground;exports.GscGrid=C.GscGrid;exports.default=G;