@squirkle-ui/datagrid 0.0.0-stage → 0.1.0

package/dist/vue2/index.mjs

@@ -0,0 +1,1842 @@
+import { defineComponent, ref, computed, watch, toRaw, onMounted, onBeforeUnmount, nextTick } from "vue";
+import { getByPath, compareValues, toDate, clamp, toUnit, formatDate, downloadText } from "@squirkle-ui/core";
+import { SqVirtualScroll, SqTextField, SqSelect, SqCheckbox, SqBtn, config, SqProgressCircular, SqPagination, SqMenu, SqListItem, SqIcon, SqEmptyState, SqDivider, SqChip, SqShape, useProxiedModel } from "@squirkle-ui/ui/vue2";
+const TEXT_OPS = [
+  { title: "Contains", value: "contains" },
+  { title: "Does not contain", value: "notContains" },
+  { title: "Equals", value: "equals" },
+  { title: "Not equal", value: "notEqual" },
+  { title: "Starts with", value: "startsWith" },
+  { title: "Ends with", value: "endsWith" },
+  { title: "Blank", value: "blank" },
+  { title: "Not blank", value: "notBlank" }
+];
+const NUM_OPS = [
+  { title: "Equals", value: "equals" },
+  { title: "Not equal", value: "notEqual" },
+  { title: "Greater than", value: "gt" },
+  { title: "≥", value: "gte" },
+  { title: "Less than", value: "lt" },
+  { title: "≤", value: "lte" },
+  { title: "Between", value: "between" },
+  { title: "Blank", value: "blank" },
+  { title: "Not blank", value: "notBlank" }
+];
+const _sfc_main$1 = defineComponent({
+  name: "SqGridFilter",
+  components: { SqBtn, SqCheckbox, SqSelect, SqTextField, SqVirtualScroll },
+  props: {
+    kind: { type: String, required: true },
+    modelValue: { type: Object, default: void 0 },
+    /** Distinct values for the set filter. */
+    values: { type: Array, default: () => [] },
+    formatter: { type: Function, default: void 0 }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const search = ref("");
+    const ops = computed(() => props.kind === "text" ? TEXT_OPS : NUM_OPS);
+    const draft = computed(() => {
+      var _a;
+      return (_a = props.modelValue) != null ? _a : { kind: props.kind, op: props.kind === "text" ? "contains" : "equals" };
+    });
+    const draftValue = computed(() => draft.value.value);
+    const draftValueTo = computed(() => draft.value.valueTo);
+    const needsValue = computed(() => draft.value.op !== "blank" && draft.value.op !== "notBlank");
+    const set = (key, v) => emit("update:modelValue", { ...draft.value, kind: props.kind, [key]: v });
+    const label = (v) => v == null || v === "" ? "(Blanks)" : props.formatter ? props.formatter(v) : String(v);
+    const shownValues = computed(() => {
+      const q = search.value.trim().toLowerCase();
+      return q ? props.values.filter((v) => label(v).toLowerCase().includes(q)) : props.values;
+    });
+    const checkedSet = computed(() => {
+      var _a, _b;
+      return new Set(((_b = (_a = props.modelValue) == null ? void 0 : _a.values) != null ? _b : props.values).map(String));
+    });
+    const isChecked = (v) => checkedSet.value.has(String(v));
+    const allChecked = computed(() => {
+      var _a;
+      return !((_a = props.modelValue) == null ? void 0 : _a.values) || props.modelValue.values.length === props.values.length;
+    });
+    const someChecked = computed(() => {
+      var _a;
+      return !!((_a = props.modelValue) == null ? void 0 : _a.values) && props.modelValue.values.length > 0 && !allChecked.value;
+    });
+    const toggleValue = (v) => {
+      var _a, _b;
+      const cur = (_b = (_a = props.modelValue) == null ? void 0 : _a.values) != null ? _b : props.values;
+      const next = isChecked(v) ? cur.filter((x) => String(x) !== String(v)) : [...cur, v];
+      emit("update:modelValue", next.length === props.values.length ? void 0 : { kind: "set", values: next });
+    };
+    const toggleAll = () => emit("update:modelValue", allChecked.value ? { kind: "set", values: [] } : void 0);
+    return { search, ops, draft, draftValue, draftValueTo, needsValue, set, label, shownValues, isChecked, allChecked, someChecked, toggleValue, toggleAll, messages: computed(() => config.locale.messages) };
+  }
+});
+function normalizeComponent(scriptExports, render3, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render3) {
+    options.render = render3;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+var _sfc_render$1 = function render() {
+  var _vm = this, _c = _vm._self._c;
+  _vm._self._setupProxy;
+  return _c("div", { staticClass: "sq-grid-filter", on: { "click": function($event) {
+    $event.stopPropagation();
+  } } }, [_vm.kind === "set" ? [_c("SqTextField", { attrs: { "placeholder": _vm.messages.search, "density": "compact", "prepend-inner-icon": "search", "hide-details": "", "clearable": "" }, model: { value: _vm.search, callback: function($$v) {
+    _vm.search = $$v;
+  }, expression: "search" } }), _c("label", { staticClass: "sq-grid-filter__all" }, [_c("SqCheckbox", { attrs: { "model-value": _vm.allChecked, "indeterminate": _vm.someChecked, "label": _vm.messages.selectAll }, on: { "update:modelValue": _vm.toggleAll } })], 1), _c("SqVirtualScroll", { attrs: { "items": _vm.shownValues, "item-height": 32, "height": Math.min(_vm.shownValues.length * 32, 224) || 32 }, scopedSlots: _vm._u([{ key: "default", fn: function({ item }) {
+    return [_c("SqCheckbox", { attrs: { "model-value": _vm.isChecked(item), "label": _vm.label(item) }, on: { "update:modelValue": function($event) {
+      return _vm.toggleValue(item);
+    } } })];
+  } }], null, false, 1269732013) })] : [_c("SqSelect", { attrs: { "model-value": _vm.draft.op, "items": _vm.ops, "density": "compact", "hide-details": "" }, on: { "update:modelValue": function($event) {
+    return _vm.set("op", $event);
+  } } }), _vm.needsValue ? _c("SqTextField", { attrs: { "model-value": _vm.draftValue, "type": _vm.kind === "number" ? "number" : _vm.kind === "date" ? "date" : "text", "placeholder": _vm.kind === "text" ? _vm.messages.search : "Value", "density": "compact", "hide-details": "", "clearable": "" }, on: { "update:modelValue": function($event) {
+    return _vm.set("value", $event);
+  } } }) : _vm._e(), _vm.draft.op === "between" ? _c("SqTextField", { attrs: { "model-value": _vm.draftValueTo, "type": _vm.kind === "number" ? "number" : "date", "placeholder": "To", "density": "compact", "hide-details": "" }, on: { "update:modelValue": function($event) {
+    return _vm.set("valueTo", $event);
+  } } }) : _vm._e()], _c("div", { staticClass: "sq-grid-filter__actions" }, [_c("SqBtn", { attrs: { "size": "small", "variant": "text", "color": "surface" }, on: { "click": function($event) {
+    return _vm.$emit("update:modelValue", void 0);
+  } } }, [_vm._v(_vm._s(_vm.messages.clear))])], 1)], 2);
+};
+var _sfc_staticRenderFns$1 = [];
+var __component__$1 = /* @__PURE__ */ normalizeComponent(
+  _sfc_main$1,
+  _sfc_render$1,
+  _sfc_staticRenderFns$1
+);
+const SqGridFilter = __component__$1.exports;
+const colIdOf = (c) => {
+  var _a, _b, _c;
+  return (_c = (_b = (_a = c.colId) != null ? _a : c.field) != null ? _b : c.headerName) != null ? _c : "";
+};
+function makeGetter(col) {
+  if (col.valueGetter) return col.valueGetter;
+  const f = col.field;
+  if (!f) return () => void 0;
+  if (!f.includes(".")) return (row) => row[f];
+  return (row) => getByPath(row, f);
+}
+function filterKindOf(col) {
+  if (typeof col.filter === "string") return col.filter;
+  return col.type === "number" ? "number" : col.type === "date" ? "date" : col.type === "boolean" ? "set" : "text";
+}
+const isBlank = (v) => v == null || v === "";
+function matchCondition(value, c) {
+  var _a;
+  if (c.kind === "set") {
+    if (!c.values) return true;
+    return c.values.some((x) => x === value || isBlank(x) && isBlank(value) || String(x) === String(value));
+  }
+  const op = (_a = c.op) != null ? _a : c.kind === "text" ? "contains" : "equals";
+  if (op === "blank") return isBlank(value);
+  if (op === "notBlank") return !isBlank(value);
+  if (c.value == null || c.value === "") return true;
+  if (c.kind === "text") {
+    const v2 = String(value != null ? value : "").toLowerCase();
+    const q = String(c.value).toLowerCase();
+    switch (op) {
+      case "contains":
+        return v2.includes(q);
+      case "notContains":
+        return !v2.includes(q);
+      case "equals":
+        return v2 === q;
+      case "notEqual":
+        return v2 !== q;
+      case "startsWith":
+        return v2.startsWith(q);
+      case "endsWith":
+        return v2.endsWith(q);
+      default:
+        return true;
+    }
+  }
+  const toNum = (x) => {
+    var _a2, _b;
+    return c.kind === "date" ? (_b = (_a2 = toDate(x)) == null ? void 0 : _a2.getTime()) != null ? _b : NaN : Number(x);
+  };
+  const v = toNum(value);
+  const a = toNum(c.value);
+  if (isNaN(v)) return false;
+  switch (op) {
+    case "equals":
+      return c.kind === "date" ? Math.floor(v / 864e5) === Math.floor(a / 864e5) : v === a;
+    case "notEqual":
+      return v !== a;
+    case "gt":
+      return v > a;
+    case "gte":
+      return v >= a;
+    case "lt":
+      return v < a;
+    case "lte":
+      return v <= a;
+    case "between":
+      return v >= a && v <= toNum(c.valueTo);
+    default:
+      return true;
+  }
+}
+function filterRows(rows, columns, model, quick) {
+  const active = Object.entries(model).filter(([, c]) => c && (c.kind === "set" ? !!c.values : c.op === "blank" || c.op === "notBlank" || c.value != null && c.value !== ""));
+  const byId = new Map(columns.map((c) => [colIdOf(c), c]));
+  const checks = active.map(([id, cond]) => {
+    var _a;
+    return { get: makeGetter((_a = byId.get(id)) != null ? _a : { field: id }), cond };
+  });
+  const q = quick.trim().toLowerCase();
+  const quickGetters = q ? columns.filter((c) => !c.hide).map((c) => makeGetter(c)) : [];
+  const out = [];
+  for (let i = 0; i < rows.length; i++) {
+    const row = rows[i];
+    let ok = true;
+    for (const { get, cond } of checks) {
+      if (!matchCondition(get(row), cond)) {
+        ok = false;
+        break;
+      }
+    }
+    if (ok && q) {
+      ok = false;
+      for (const get of quickGetters) {
+        const v = get(row);
+        if (v == null || typeof v === "object") continue;
+        if (String(v).toLowerCase().includes(q)) {
+          ok = true;
+          break;
+        }
+      }
+    }
+    if (ok) out.push(i);
+  }
+  return out;
+}
+function sortIndices(rows, indices, columns, sort) {
+  var _a, _b;
+  if (!sort.length) return indices;
+  const byId = new Map(columns.map((c) => [colIdOf(c), c]));
+  const specs = sort.map((s) => {
+    var _a2;
+    const col = (_a2 = byId.get(s.colId)) != null ? _a2 : { field: s.colId };
+    const get = makeGetter(col);
+    const keys = new Array(rows.length);
+    for (const i of indices) keys[i] = get(rows[i]);
+    return { keys, dir: s.sort === "desc" ? -1 : 1, cmp: col.comparator, date: col.type === "date" };
+  });
+  for (const s of specs) if (s.date) for (const i of indices) s.keys[i] = (_b = (_a = toDate(s.keys[i])) == null ? void 0 : _a.getTime()) != null ? _b : null;
+  return indices.slice().sort((a, b) => {
+    for (const s of specs) {
+      const ka = s.keys[a];
+      const kb = s.keys[b];
+      const blankA = ka == null || ka === "";
+      const blankB = kb == null || kb === "";
+      if (blankA !== blankB) return blankA ? 1 : -1;
+      const r = s.cmp ? s.cmp(ka, kb, rows[a], rows[b]) : compareValues(ka, kb);
+      if (r) return r * s.dir;
+    }
+    return a - b;
+  });
+}
+function aggregate(values, fn) {
+  if (typeof fn === "function") return fn(values);
+  const nums = values.filter((v) => v != null && v !== "").map(Number).filter((n) => !isNaN(n));
+  switch (fn) {
+    case "sum":
+      return nums.reduce((a, b) => a + b, 0);
+    case "avg":
+      return nums.length ? nums.reduce((a, b) => a + b, 0) / nums.length : null;
+    case "min":
+      return nums.length ? Math.min(...nums) : null;
+    case "max":
+      return nums.length ? Math.max(...nums) : null;
+    case "count":
+      return values.length;
+    case "first":
+      return values[0];
+    case "last":
+      return values[values.length - 1];
+  }
+}
+function computeAgg(rows, leaves, aggCols) {
+  const agg = {};
+  for (const a of aggCols) agg[a.id] = aggregate(leaves.map((i) => a.get(rows[i])), a.fn);
+  return agg;
+}
+function groupRows(rows, indices, columns, groupBy) {
+  const byId = new Map(columns.map((c) => [colIdOf(c), c]));
+  const aggCols = columns.filter((c) => c.aggFunc).map((c) => ({ id: colIdOf(c), get: makeGetter(c), fn: c.aggFunc }));
+  const build = (idx, level, parentId) => {
+    var _a;
+    const colId = groupBy[level];
+    const get = makeGetter((_a = byId.get(colId)) != null ? _a : { field: colId });
+    const buckets = /* @__PURE__ */ new Map();
+    for (const i of idx) {
+      const key = get(rows[i]);
+      const k = String(key != null ? key : "");
+      let b = buckets.get(k);
+      if (!b) buckets.set(k, b = { key, leaves: [] });
+      b.leaves.push(i);
+    }
+    return Array.from(buckets.values()).map((b) => {
+      var _a2;
+      const id = `${parentId}/${colId}:${String((_a2 = b.key) != null ? _a2 : "")}`;
+      return {
+        key: b.key,
+        colId,
+        id,
+        level,
+        leaves: b.leaves,
+        children: level + 1 < groupBy.length ? build(b.leaves, level + 1, id) : [],
+        agg: computeAgg(rows, b.leaves, aggCols)
+      };
+    });
+  };
+  return groupBy.length ? build(indices, 0, "g") : [];
+}
+function treeRows(rows, indices, columns, getDataPath) {
+  const aggCols = columns.filter((c) => c.aggFunc).map((c) => ({ id: colIdOf(c), get: makeGetter(c), fn: c.aggFunc }));
+  const root = { children: [] };
+  const nodes = /* @__PURE__ */ new Map();
+  for (const i of indices) {
+    const path = getDataPath(rows[i]);
+    let parent = root;
+    let id = "t";
+    path.forEach((part, depth) => {
+      id += `/${part}`;
+      let node = nodes.get(id);
+      if (!node) {
+        node = { key: part, colId: "__tree", id, level: depth, children: [], leaves: [], agg: {} };
+        nodes.set(id, node);
+        parent.children.push(node);
+      }
+      if (depth === path.length - 1) node.self = i;
+      node.leaves.push(i);
+      parent = node;
+    });
+  }
+  for (const n of nodes.values()) if (n.children.length) n.agg = computeAgg(rows, n.leaves, aggCols);
+  return root.children;
+}
+function flatten(rows, indices, groups, opts) {
+  const out = [];
+  const pushData = (i, level) => {
+    var _a;
+    const id = opts.rowId(rows[i], i);
+    out.push({ kind: "data", id, data: rows[i], level, sourceIndex: i });
+    if ((_a = opts.detailOpen) == null ? void 0 : _a.has(id)) out.push({ kind: "detail", id: `${id}__detail`, data: rows[i], level, sourceIndex: i });
+  };
+  if (!groups) {
+    for (const i of indices) pushData(i, 0);
+    return out;
+  }
+  const isOpen = (id) => {
+    var _a;
+    return opts.expandAll ? !((_a = opts.collapsed) == null ? void 0 : _a.has(id)) : opts.expanded.has(id);
+  };
+  const walk = (nodes) => {
+    for (const g of nodes) {
+      const self = g.self;
+      if (opts.tree && !g.children.length && self != null) {
+        pushData(self, g.level);
+        continue;
+      }
+      const expanded = isOpen(g.id);
+      const leafIds = g.leaves.map((i) => opts.rowId(rows[i], i));
+      out.push({
+        kind: "group",
+        id: g.id,
+        data: opts.tree && self != null ? rows[self] : null,
+        level: g.level,
+        sourceIndex: self,
+        group: { key: g.key, colId: g.colId, count: opts.tree ? g.leaves.length - (self != null ? 1 : 0) : g.leaves.length, expanded, agg: g.agg, leafIds }
+      });
+      if (!expanded) continue;
+      if (g.children.length) walk(g.children);
+      else for (const i of g.leaves) pushData(i, g.level + 1);
+    }
+  };
+  walk(groups);
+  return out;
+}
+function allGroupIds(groups) {
+  const ids = [];
+  const walk = (n) => n.forEach((g) => {
+    if (g.children.length || g.colId !== "__tree") ids.push(g.id);
+    walk(g.children);
+  });
+  walk(groups);
+  return ids;
+}
+function rowLayout(rows, rowHeight, detailHeight) {
+  const offsets = new Float64Array(rows.length + 1);
+  for (let i = 0; i < rows.length; i++) offsets[i + 1] = offsets[i] + (rows[i].kind === "detail" ? detailHeight : rowHeight);
+  const indexAt = (y) => {
+    let lo = 0;
+    let hi = rows.length - 1;
+    while (lo < hi) {
+      const mid = lo + hi + 1 >> 1;
+      if (offsets[mid] <= y) lo = mid;
+      else hi = mid - 1;
+    }
+    return Math.max(0, lo);
+  };
+  return { offsets, total: offsets[rows.length], indexAt };
+}
+function pivotRows(rows, indices, columns, groupBy, pivotCol) {
+  var _a, _b, _c;
+  const byId = new Map(columns.map((c) => [colIdOf(c), c]));
+  const valueCols = columns.filter((c) => c.aggFunc);
+  const pGet = makeGetter((_a = byId.get(pivotCol)) != null ? _a : { field: pivotCol });
+  const gGets = groupBy.map((id) => {
+    var _a2;
+    return makeGetter((_a2 = byId.get(id)) != null ? _a2 : { field: id });
+  });
+  const pivotKeys = [];
+  const seen = /* @__PURE__ */ new Set();
+  const buckets = /* @__PURE__ */ new Map();
+  for (const i of indices) {
+    const pk = String((_b = pGet(rows[i])) != null ? _b : "");
+    if (!seen.has(pk)) {
+      seen.add(pk);
+      pivotKeys.push(pk);
+    }
+    const keys = gGets.map((g) => g(rows[i]));
+    const k = keys.map(String).join("
");
+    let b = buckets.get(k);
+    if (!b) buckets.set(k, b = { keys, cells: /* @__PURE__ */ new Map() });
+    let cell = b.cells.get(pk);
+    if (!cell) b.cells.set(pk, cell = []);
+    cell.push(i);
+  }
+  pivotKeys.sort((a, b) => compareValues(a, b));
+  const outRows = [];
+  for (const b of buckets.values()) {
+    const r = {};
+    groupBy.forEach((id, k) => r[id] = b.keys[k]);
+    for (const pk of pivotKeys)
+      for (const vc of valueCols) {
+        const leaves = (_c = b.cells.get(pk)) != null ? _c : [];
+        const get = makeGetter(vc);
+        r[`${pk}__${colIdOf(vc)}`] = leaves.length ? aggregate(leaves.map((i) => get(rows[i])), vc.aggFunc) : null;
+      }
+    outRows.push(r);
+  }
+  const outCols = [
+    ...groupBy.map((id) => ({ ...byId.get(id), colId: id, field: id, pinned: "left", rowGroup: false, valueGetter: void 0 })),
+    ...pivotKeys.flatMap(
+      (pk) => valueCols.map((vc) => {
+        var _a2;
+        return {
+          colId: `${pk}__${colIdOf(vc)}`,
+          field: `${pk}__${colIdOf(vc)}`,
+          headerName: valueCols.length > 1 ? `${(_a2 = vc.headerName) != null ? _a2 : colIdOf(vc)}` : pk,
+          group: valueCols.length > 1 ? pk : void 0,
+          type: "number",
+          align: "right",
+          aggFunc: vc.aggFunc,
+          valueFormatter: vc.valueFormatter,
+          width: 120
+        };
+      })
+    )
+  ];
+  return { rows: outRows, columns: outCols };
+}
+function toCsv(header, body, sep = ",") {
+  const esc = (s) => /[",\n\r]/.test(s) || s.includes(sep) ? `"${s.replace(/"/g, '""')}"` : s;
+  return [header, ...body].map((r) => r.map(esc).join(sep)).join("\r\n");
+}
+const parseTsv = (text) => text.replace(/\r?\n$/, "").split(/\r?\n/).map((l) => l.split("	"));
+const SELECT_COL = { colId: "__select", headerName: "", width: 48, resizable: false, sortable: false, filter: false, suppressMenu: true, lockPosition: true };
+function setByPath(obj, path, value) {
+  var _a, _b;
+  const keys = path.split(".");
+  let cur = obj;
+  for (let i = 0; i < keys.length - 1; i++) cur = (_b = cur[_a = keys[i]]) != null ? _b : cur[_a] = {};
+  cur[keys[keys.length - 1]] = value;
+}
+const _sfc_main = defineComponent({
+  name: "SqDataGrid",
+  components: { SqShape, SqBtn, SqCheckbox, SqChip, SqDivider, SqEmptyState, SqIcon, SqListItem, SqMenu, SqPagination, SqProgressCircular, SqTextField, SqGridFilter },
+  props: {
+    rows: { type: Array, default: () => [] },
+    columns: { type: Array, default: () => [] },
+    defaultColDef: { type: Object, default: () => ({}) },
+    /** Field name or function producing a stable row id. */
+    rowId: { type: [String, Function], default: "id" },
+    height: { type: [Number, String], default: 520 },
+    rowHeight: { type: Number, default: 40 },
+    headerHeight: { type: Number, default: 42 },
+    detailHeight: { type: Number, default: 220 },
+    rowSelection: { type: String, default: null },
+    /** Auto checkbox column when rowSelection = multiple. */
+    selectionColumn: { type: Boolean, default: true },
+    selected: { type: Array, default: void 0 },
+    sortModel: { type: Array, default: void 0 },
+    filterModel: { type: Object, default: void 0 },
+    quickFilter: { type: String, default: void 0 },
+    groupBy: { type: Array, default: void 0 },
+    /** Levels expanded by default; -1 = all. */
+    groupDefaultExpanded: { type: Number, default: 0 },
+    groupColumn: { type: Object, default: () => ({}) },
+    treeData: Boolean,
+    getDataPath: { type: Function, default: void 0 },
+    pivotMode: Boolean,
+    pivotColumn: { type: String, default: void 0 },
+    masterDetail: Boolean,
+    pinnedTopRows: { type: Array, default: () => [] },
+    pinnedBottomRows: { type: Array, default: () => [] },
+    /** Bottom row with column aggFunc totals over the filtered rows. */
+    totalsRow: Boolean,
+    pagination: Boolean,
+    pageSize: { type: Number, default: 50 },
+    pageSizes: { type: Array, default: () => [25, 50, 100, 500] },
+    /** Infinite / server-side row model. Sorting & filtering are delegated to getRows. */
+    datasource: { type: Object, default: void 0 },
+    blockSize: { type: Number, default: 100 },
+    loading: Boolean,
+    toolbar: Boolean,
+    groupPanel: Boolean,
+    floatingFilters: Boolean,
+    statusBar: { type: Boolean, default: true },
+    striped: Boolean,
+    columnLines: Boolean,
+    rowClassName: { type: Function, default: void 0 },
+    locale: { type: String, default: void 0 }
+  },
+  emits: ["update:selected", "update:sortModel", "update:filterModel", "update:quickFilter", "update:groupBy", "row-click", "row-dblclick", "cell-click", "cell-value-changed", "column-state-change", "selection-change"],
+  setup(props, { emit, slots }) {
+    var _a;
+    const viewport = ref(null);
+    const ctxAnchor = ref(null);
+    const scrollTop = ref(0);
+    const scrollLeft = ref(0);
+    const vpWidth = ref(800);
+    const vpHeight = ref(400);
+    const dataVersion = ref(0);
+    const loc = computed(() => {
+      var _a2;
+      return (_a2 = props.locale) != null ? _a2 : config.locale.code;
+    });
+    const isServer = computed(() => !!props.datasource);
+    const sortModelRef = useProxiedModel(props, emit, "sortModel", () => []);
+    const filterModelRef = useProxiedModel(props, emit, "filterModel", () => ({}));
+    const quick = useProxiedModel(props, emit, "quickFilter", () => "");
+    const groupByRef = useProxiedModel(props, emit, "groupBy", () => props.columns.filter((c) => c.rowGroup).map(colIdOf));
+    const selectedRef = useProxiedModel(props, emit, "selected", () => []);
+    const sortModelList = computed(() => {
+      var _a2;
+      return (_a2 = sortModelRef.value) != null ? _a2 : [];
+    });
+    const filterModelObj = computed(() => {
+      var _a2;
+      return (_a2 = filterModelRef.value) != null ? _a2 : {};
+    });
+    const groupBy = computed(() => {
+      var _a2;
+      return (_a2 = groupByRef.value) != null ? _a2 : [];
+    });
+    const selectedIds = computed(() => {
+      var _a2;
+      return (_a2 = selectedRef.value) != null ? _a2 : [];
+    });
+    const selectedSet = computed(() => new Set(selectedIds.value));
+    const colOrder = ref([]);
+    const colWidth = ref({});
+    const colHidden = ref({});
+    const colPinned = ref({});
+    const baseCols = computed(() => props.columns.map((c) => ({ ...props.defaultColDef, ...c })));
+    watch(baseCols, (cols) => {
+      const ids = cols.map(colIdOf);
+      colOrder.value = [...colOrder.value.filter((id) => ids.includes(id)), ...ids.filter((id) => !colOrder.value.includes(id))];
+    }, { immediate: true });
+    const rowIdOf = (row, i) => {
+      var _a2;
+      return String(typeof props.rowId === "function" ? props.rowId(row, i) : (_a2 = row == null ? void 0 : row[props.rowId]) != null ? _a2 : i);
+    };
+    const raw = computed(() => {
+      void dataVersion.value;
+      return toRaw(props.rows);
+    });
+    const quickApplied = ref((_a = quick.value) != null ? _a : "");
+    let quickApplyTimer;
+    watch(quick, (q) => {
+      clearTimeout(quickApplyTimer);
+      quickApplyTimer = setTimeout(() => quickApplied.value = q != null ? q : "", raw.value.length > 2e4 ? 160 : 0);
+    });
+    const filteredIdx = computed(() => isServer.value ? [] : filterRows(raw.value, baseCols.value, filterModelObj.value, quickApplied.value));
+    const sortedIdx = computed(() => sortIndices(raw.value, filteredIdx.value, baseCols.value, sortModelList.value));
+    const pivot = computed(() => props.pivotMode && props.pivotColumn && !isServer.value ? pivotRows(raw.value, sortedIdx.value, baseCols.value, groupBy.value, props.pivotColumn) : null);
+    const viewRows = computed(() => pivot.value ? pivot.value.rows : raw.value);
+    const viewIdx = computed(() => pivot.value ? pivot.value.rows.map((_, i) => i) : sortedIdx.value);
+    const viewCols = computed(() => pivot.value ? pivot.value.columns.map((c) => ({ ...props.defaultColDef, ...c })) : baseCols.value);
+    const groups = computed(() => {
+      if (isServer.value || pivot.value) return null;
+      if (props.treeData && props.getDataPath) return treeRows(viewRows.value, viewIdx.value, viewCols.value, props.getDataPath);
+      return groupBy.value.length ? groupRows(viewRows.value, viewIdx.value, viewCols.value, groupBy.value) : null;
+    });
+    const hasGroups = computed(() => !!groups.value);
+    const expanded = ref(/* @__PURE__ */ new Set());
+    const collapsed = ref(/* @__PURE__ */ new Set());
+    const expandAllFlag = ref(props.groupDefaultExpanded === -1);
+    const detailOpen = ref(/* @__PURE__ */ new Set());
+    watch(groups, (g) => {
+      if (!g || props.groupDefaultExpanded <= 0) return;
+      const ids = new Set(expanded.value);
+      const walk = (nodes, lvl) => nodes.forEach((n) => {
+        if (lvl < props.groupDefaultExpanded) {
+          ids.add(n.id);
+          walk(n.children, lvl + 1);
+        }
+      });
+      walk(g, 0);
+      expanded.value = ids;
+    }, { immediate: true });
+    const display = computed(
+      () => flatten(viewRows.value, viewIdx.value, groups.value, {
+        expanded: expanded.value,
+        expandAll: expandAllFlag.value,
+        collapsed: collapsed.value,
+        rowId: rowIdOf,
+        detailOpen: props.masterDetail ? detailOpen.value : void 0,
+        tree: props.treeData
+      })
+    );
+    const page = ref(1);
+    const pageSizeState = ref(props.pageSize);
+    const pageCount = computed(() => Math.max(1, Math.ceil(display.value.length / pageSizeState.value)));
+    watch([pageCount, filteredIdx], () => page.value = Math.min(page.value, pageCount.value));
+    const paged = computed(() => props.pagination ? display.value.slice((page.value - 1) * pageSizeState.value, page.value * pageSizeState.value) : display.value);
+    const onPageSize = (e) => {
+      pageSizeState.value = Number(e.target.value);
+      page.value = 1;
+    };
+    const pageRangeText = computed(() => {
+      const n = display.value.length;
+      const a = n ? (page.value - 1) * pageSizeState.value + 1 : 0;
+      return config.locale.messages.pageRange.replace("{0}", String(a)).replace("{1}", String(Math.min(n, page.value * pageSizeState.value))).replace("{2}", String(n));
+    });
+    const blocks = /* @__PURE__ */ new Map();
+    const blockVersion = ref(0);
+    const serverCount = ref(0);
+    const serverLoading = ref(false);
+    let epoch = 0;
+    const loadBlock = async (b) => {
+      var _a2;
+      if (!props.datasource || blocks.has(b)) return;
+      blocks.set(b, "loading");
+      const my = epoch;
+      serverLoading.value = true;
+      try {
+        const res = await props.datasource.getRows({ startRow: b * props.blockSize, endRow: (b + 1) * props.blockSize, sortModel: sortModelList.value, filterModel: filterModelObj.value, quickFilter: (_a2 = quick.value) != null ? _a2 : "" });
+        if (my !== epoch) return;
+        blocks.set(b, res.rows);
+        if (res.lastRow != null) serverCount.value = res.lastRow;
+        else if (res.rows.length < props.blockSize) serverCount.value = b * props.blockSize + res.rows.length;
+        else serverCount.value = Math.max(serverCount.value, (b + 2) * props.blockSize);
+      } catch {
+        if (my === epoch) blocks.delete(b);
+      } finally {
+        if (my === epoch) {
+          serverLoading.value = [...blocks.values()].some((v) => v === "loading");
+          blockVersion.value++;
+        }
+      }
+    };
+    const purge = () => {
+      epoch++;
+      blocks.clear();
+      serverCount.value = 0;
+      blockVersion.value++;
+      if (viewport.value) viewport.value.scrollTop = 0;
+      loadBlock(0);
+    };
+    let quickTimer;
+    watch([sortModelList, filterModelObj], () => isServer.value && purge(), { deep: true });
+    watch(quick, () => {
+      if (!isServer.value) return;
+      clearTimeout(quickTimer);
+      quickTimer = setTimeout(purge, 250);
+    });
+    watch(() => props.datasource, (ds) => ds && purge());
+    onMounted(() => props.datasource && purge());
+    const rowCount = computed(() => isServer.value ? serverCount.value : paged.value.length);
+    const rowAt = (i) => {
+      if (!isServer.value) return paged.value[i];
+      void blockVersion.value;
+      const b = Math.floor(i / props.blockSize);
+      const data = blocks.get(b);
+      if (Array.isArray(data)) {
+        const row = data[i - b * props.blockSize];
+        if (row) return { kind: "data", id: rowIdOf(row, i), data: row, level: 0, sourceIndex: i };
+      }
+      return { kind: "loading", id: `__loading_${i}`, data: null, level: 0 };
+    };
+    const titleOf = (id) => {
+      var _a2, _b;
+      const c = (_a2 = viewCols.value.find((x) => colIdOf(x) === id)) != null ? _a2 : baseCols.value.find((x) => colIdOf(x) === id);
+      return (_b = c == null ? void 0 : c.headerName) != null ? _b : (c == null ? void 0 : c.field) ? c.field.replace(/([a-z])([A-Z])/g, "$1 $2").replace(/^./, (s) => s.toUpperCase()) : id;
+    };
+    const groupColDef = computed(() => ({ colId: "__group", headerName: props.treeData ? "Name" : "Group", width: 240, sortable: false, filter: false, suppressMenu: true, lockPosition: true, ...props.groupColumn }));
+    const orderedCols = computed(() => {
+      const cols = viewCols.value;
+      const byId = new Map(cols.map((c) => [colIdOf(c), c]));
+      const ordered = pivot.value ? cols : [...colOrder.value.map((id) => byId.get(id)).filter(Boolean), ...cols.filter((c) => !colOrder.value.includes(colIdOf(c)))];
+      const auto = [];
+      if (props.rowSelection === "multiple" && props.selectionColumn) auto.push(SELECT_COL);
+      if (groups.value || props.masterDetail && !props.treeData) auto.push(groupColDef.value);
+      return { auto, ordered };
+    });
+    const visibleCols = computed(() => {
+      var _a2, _b, _c;
+      const { auto, ordered } = orderedCols.value;
+      const list = [
+        ...auto.map((c) => ({ id: colIdOf(c), col: c, auto: true })),
+        ...ordered.filter((c) => {
+          var _a3;
+          return !((_a3 = colHidden.value[colIdOf(c)]) != null ? _a3 : c.hide);
+        }).map((c) => ({ id: colIdOf(c), col: c, auto: false }))
+      ];
+      const resolved = list.map((x) => {
+        var _a3, _b2, _c2;
+        return {
+          ...x,
+          pinned: x.auto ? "left" : colPinned.value[x.id] !== void 0 ? colPinned.value[x.id] : (_a3 = x.col.pinned) != null ? _a3 : null,
+          width: (_c2 = (_b2 = colWidth.value[x.id]) != null ? _b2 : x.col.width) != null ? _c2 : x.col.flex ? 0 : 150,
+          title: x.id === "__group" ? x.col.headerName : titleOf(x.id)
+        };
+      });
+      const anyLeft = resolved.some((r) => !r.auto && r.pinned === "left");
+      if (!anyLeft) resolved.forEach((r) => {
+        if (r.auto) r.pinned = null;
+      });
+      const fixed = resolved.reduce((s, r) => s + (r.col.flex && colWidth.value[r.id] == null ? 0 : r.width), 0);
+      const flexCols = resolved.filter((r) => r.col.flex && colWidth.value[r.id] == null);
+      const totalFlex = flexCols.reduce((s, r) => {
+        var _a3;
+        return s + ((_a3 = r.col.flex) != null ? _a3 : 0);
+      }, 0);
+      const avail = Math.max(0, vpWidth.value - fixed - 2);
+      for (const r of flexCols) r.width = clamp(Math.floor(avail * ((_a2 = r.col.flex) != null ? _a2 : 1) / totalFlex), (_b = r.col.minWidth) != null ? _b : 80, (_c = r.col.maxWidth) != null ? _c : 4e3);
+      const left = resolved.filter((r) => r.pinned === "left");
+      const right = resolved.filter((r) => r.pinned === "right");
+      const center = resolved.filter((r) => !r.pinned);
+      return { left, center, right };
+    });
+    const flatCols = computed(() => [...visibleCols.value.left, ...visibleCols.value.center, ...visibleCols.value.right]);
+    const flatIndex = computed(() => new Map(flatCols.value.map((c, i) => [c.id, i])));
+    const leftWidth = computed(() => visibleCols.value.left.reduce((s, c) => s + c.width, 0));
+    const rightWidth = computed(() => visibleCols.value.right.reduce((s, c) => s + c.width, 0));
+    const centerOffsets = computed(() => {
+      const o = [0];
+      for (const c of visibleCols.value.center) o.push(o[o.length - 1] + c.width);
+      return o;
+    });
+    const totalWidth = computed(() => leftWidth.value + rightWidth.value + centerOffsets.value[centerOffsets.value.length - 1]);
+    const renderCols = computed(() => {
+      const { left, center, right } = visibleCols.value;
+      const out = [];
+      let acc = 0;
+      left.forEach((c, i) => {
+        out.push({ key: c.id, id: c.id, col: c.col, title: c.title, width: c.width, pinned: "left", auto: c.auto, flatIndex: flatIndex.value.get(c.id), edgeLeft: i === left.length - 1, style: { width: `${c.width}px`, left: `${acc}px` } });
+        acc += c.width;
+      });
+      const offs = centerOffsets.value;
+      const viewW = Math.max(0, vpWidth.value - leftWidth.value - rightWidth.value);
+      let start = 0;
+      while (start < center.length && offs[start + 1] < scrollLeft.value) start++;
+      let end = start;
+      while (end < center.length && offs[end] < scrollLeft.value + viewW) end++;
+      start = Math.max(0, start - 2);
+      end = Math.min(center.length, end + 2);
+      if (offs[start] > 0) out.push({ key: "__padL", id: "__padL", col: null, title: "", width: offs[start], pinned: null, flatIndex: -1, style: { width: `${offs[start]}px` } });
+      for (let i = start; i < end; i++) {
+        const c = center[i];
+        out.push({ key: c.id, id: c.id, col: c.col, title: c.title, width: c.width, pinned: null, auto: c.auto, flatIndex: flatIndex.value.get(c.id), style: { width: `${c.width}px` } });
+      }
+      const padR = offs[center.length] - offs[end];
+      if (padR > 0) out.push({ key: "__padR", id: "__padR", col: null, title: "", width: padR, pinned: null, flatIndex: -1, style: { width: `${padR}px` } });
+      let racc = 0;
+      for (let i = right.length - 1; i >= 0; i--) {
+        const c = right[i];
+        out.push({ key: c.id, id: c.id, col: c.col, title: c.title, width: c.width, pinned: "right", auto: c.auto, flatIndex: flatIndex.value.get(c.id), edgeRight: i === 0, style: { width: `${c.width}px`, right: `${racc}px` } });
+        racc += c.width;
+      }
+      const rightPart = out.splice(out.length - right.length, right.length).reverse();
+      return [...out, ...rightPart];
+    });
+    const hasHeaderGroups = computed(() => flatCols.value.some((c) => c.col.group));
+    const headerGroups = computed(() => {
+      var _a2, _b;
+      const out = [];
+      for (const rc of renderCols.value) {
+        const label = (_b = (_a2 = rc.col) == null ? void 0 : _a2.group) != null ? _b : "";
+        const last = out[out.length - 1];
+        if (last && label && rc.col && last.label === label && last.pin === rc.pinned) {
+          last.width += rc.width;
+          last.style.width = `${last.width}px`;
+          continue;
+        }
+        const style = { width: `${rc.width}px` };
+        if (rc.pinned === "left") style.left = rc.style.left;
+        if (rc.pinned === "right") style.right = rc.style.right;
+        out.push({
+          key: `${rc.key}-g`,
+          label: rc.col ? label : "",
+          pin: rc.pinned,
+          width: rc.width,
+          style,
+          cls: { "sq-datagrid__hcell--pinned-left": rc.pinned === "left", "sq-datagrid__hcell--pinned-right": rc.pinned === "right", "sq-datagrid__header-group--empty": !label }
+        });
+      }
+      return out;
+    });
+    const filterRowHeight = 38;
+    const headBlock = computed(() => props.headerHeight * (hasHeaderGroups.value ? 2 : 1) + (props.floatingFilters ? filterRowHeight : 0) + props.pinnedTopRows.length * props.rowHeight);
+    const layout = computed(() => {
+      if (isServer.value) {
+        const n = serverCount.value;
+        return { offsets: null, total: n * props.rowHeight, indexAt: (y) => Math.floor(y / props.rowHeight) };
+      }
+      return rowLayout(paged.value, props.rowHeight, props.detailHeight);
+    });
+    const range = computed(() => {
+      const n = rowCount.value;
+      if (!n) return { start: 0, end: -1 };
+      const top = Math.max(0, scrollTop.value);
+      const start = Math.max(0, layout.value.indexAt(top) - 6);
+      const end = Math.min(n - 1, layout.value.indexAt(top + vpHeight.value) + 6);
+      return { start, end };
+    });
+    const visibleRows = computed(() => {
+      const out = [];
+      const { start, end } = range.value;
+      const offs = layout.value.offsets;
+      for (let i = start; i <= end; i++) {
+        const row = rowAt(i);
+        if (!row) continue;
+        const top = offs ? offs[i] : i * props.rowHeight;
+        const height = offs ? offs[i + 1] - offs[i] : props.rowHeight;
+        out.push({ index: i, top, height, row });
+      }
+      return out;
+    });
+    watch(range, (r) => {
+      if (!isServer.value || r.end < 0) return;
+      for (let b = Math.floor(r.start / props.blockSize); b <= Math.floor(r.end / props.blockSize); b++) loadBlock(b);
+    });
+    const onScroll = () => {
+      const el = viewport.value;
+      if (!el) return;
+      scrollTop.value = el.scrollTop;
+      scrollLeft.value = el.scrollLeft;
+    };
+    let ro;
+    onMounted(() => {
+      const el = viewport.value;
+      const measure = () => {
+        vpWidth.value = el.clientWidth;
+        vpHeight.value = el.clientHeight;
+      };
+      measure();
+      if (typeof ResizeObserver !== "undefined") {
+        ro = new ResizeObserver(measure);
+        ro.observe(el);
+      }
+    });
+    onBeforeUnmount(() => {
+      ro == null ? void 0 : ro.disconnect();
+      clearTimeout(quickTimer);
+      clearTimeout(quickApplyTimer);
+      window.removeEventListener("pointermove", onResizeMove);
+      window.removeEventListener("pointerup", onResizeEnd);
+      window.removeEventListener("mouseup", endSelect);
+    });
+    const getters = /* @__PURE__ */ new WeakMap();
+    const cellValue = (rc, row) => {
+      if (!rc.col || !row) return void 0;
+      let g = getters.get(rc.col);
+      if (!g) getters.set(rc.col, g = makeGetter(rc.col));
+      return g(row);
+    };
+    let numFmt = null;
+    let numFmtLocale = "";
+    const fmtNum = (v) => {
+      if (numFmtLocale !== loc.value) {
+        numFmt = new Intl.NumberFormat(loc.value, { maximumFractionDigits: 2 });
+        numFmtLocale = loc.value;
+      }
+      return numFmt.format(v);
+    };
+    const formatValue = (col, v, row) => {
+      if (col.valueFormatter) return col.valueFormatter(v, row);
+      if (v == null || v === "") return "";
+      if (col.type === "number" && typeof v === "number") return fmtNum(v);
+      if (col.type === "date") return formatDate(v, loc.value);
+      return String(v);
+    };
+    const formatCell = (rc, row) => rc.col ? formatValue(rc.col, cellValue(rc, row), row) : "";
+    const cellParams = (row, rc, rowIndex) => ({ value: cellValue(rc, row), formatted: formatCell(rc, row), row, column: rc.col, rowIndex });
+    const groupLabel = (row) => {
+      var _a2, _b;
+      if (row.kind === "group") {
+        const g = row.group;
+        if (g.colId === "__tree") return String((_a2 = g.key) != null ? _a2 : "");
+        const col = viewCols.value.find((c) => colIdOf(c) === g.colId);
+        return col ? formatValue(col, g.key, null) || "(Blank)" : String((_b = g.key) != null ? _b : "");
+      }
+      if (props.treeData && props.getDataPath && row.data) {
+        const p = props.getDataPath(row.data);
+        return p[p.length - 1];
+      }
+      return "";
+    };
+    const groupAggText = (row, rc) => {
+      var _a2;
+      if (!rc.col) return "";
+      const v = (_a2 = row.group) == null ? void 0 : _a2.agg[rc.id];
+      if (v === void 0) return row.data && props.treeData ? formatCell(rc, row.data) : "";
+      return formatValue(rc.col, v, null);
+    };
+    const filterKind = (col) => filterKindOf(col);
+    const distinctValues = (id) => {
+      const col = baseCols.value.find((c) => colIdOf(c) === id);
+      if (!col) return [];
+      const get = makeGetter(col);
+      const set = /* @__PURE__ */ new Set();
+      for (const r of raw.value) {
+        set.add(get(r));
+        if (set.size > 5e3) break;
+      }
+      return Array.from(set).sort((a, b) => String(a != null ? a : "").localeCompare(String(b != null ? b : ""), void 0, { numeric: true }));
+    };
+    const sortIndex = (id) => sortModelList.value.findIndex((s) => s.colId === id);
+    const sortDir = (id) => {
+      var _a2;
+      return (_a2 = sortModelList.value.find((s) => s.colId === id)) == null ? void 0 : _a2.sort;
+    };
+    const ariaSort = (id) => sortDir(id) === "asc" ? "ascending" : sortDir(id) === "desc" ? "descending" : "none";
+    const setSort = (id, dir, multi = false) => {
+      const rest = multi ? sortModelList.value.filter((s) => s.colId !== id) : [];
+      sortModelRef.value = dir ? [...rest, { colId: id, sort: dir }] : rest;
+    };
+    let resized = false;
+    const onHeaderClick = (e, rc) => {
+      if (resized) return void (resized = false);
+      if (!rc.col || rc.auto || rc.col.sortable === false) return;
+      const cur = sortDir(rc.id);
+      const next = cur === "asc" ? "desc" : cur === "desc" ? null : "asc";
+      if (e.shiftKey) {
+        const list = sortModelList.value.slice();
+        const i = list.findIndex((s) => s.colId === rc.id);
+        if (next && i >= 0) list[i] = { colId: rc.id, sort: next };
+        else if (next) list.push({ colId: rc.id, sort: next });
+        else list.splice(i, 1);
+        sortModelRef.value = list;
+      } else setSort(rc.id, next);
+    };
+    const setFilter = (id, cond) => {
+      const next = { ...filterModelObj.value };
+      if (cond) next[id] = cond;
+      else delete next[id];
+      filterModelRef.value = next;
+    };
+    const floatingValue = (id) => {
+      var _a2;
+      const f = filterModelObj.value[id];
+      return f && f.kind !== "set" ? (_a2 = f.value) != null ? _a2 : "" : "";
+    };
+    let floatTimer;
+    const onFloatingInput = (e, rc) => {
+      const value = e.target.value;
+      const kind = filterKind(rc.col);
+      clearTimeout(floatTimer);
+      floatTimer = setTimeout(() => setFilter(rc.id, value === "" ? void 0 : { kind, op: kind === "text" ? "contains" : "equals", value: kind === "number" ? Number(value) : value }), 180);
+    };
+    const toggleGroupBy = (id) => groupByRef.value = groupBy.value.includes(id) ? groupBy.value.filter((x) => x !== id) : [...groupBy.value, id];
+    const removeGroup = (id) => groupByRef.value = groupBy.value.filter((x) => x !== id);
+    const toggleGroup = (row) => {
+      if (expandAllFlag.value) {
+        const s = new Set(collapsed.value);
+        s.has(row.id) ? s.delete(row.id) : s.add(row.id);
+        collapsed.value = s;
+      } else {
+        const s = new Set(expanded.value);
+        s.has(row.id) ? s.delete(row.id) : s.add(row.id);
+        expanded.value = s;
+      }
+    };
+    const expandAll = () => {
+      expandAllFlag.value = true;
+      collapsed.value = /* @__PURE__ */ new Set();
+    };
+    const collapseAll = () => {
+      expandAllFlag.value = false;
+      expanded.value = /* @__PURE__ */ new Set();
+    };
+    const toggleDetail = (id) => {
+      const s = new Set(detailOpen.value);
+      s.has(id) ? s.delete(id) : s.add(id);
+      detailOpen.value = s;
+    };
+    const emitColumnState = () => emit("column-state-change", flatCols.value.filter((c) => !c.auto).map((c) => ({ colId: c.id, width: c.width, hide: false, pinned: c.pinned })));
+    const setHidden = (id, hide) => {
+      colHidden.value = { ...colHidden.value, [id]: hide };
+      emitColumnState();
+    };
+    const setPinned = (id, pin) => {
+      colPinned.value = { ...colPinned.value, [id]: pin };
+      emitColumnState();
+    };
+    const chooserCols = computed(() => orderedCols.value.ordered.map((c) => {
+      var _a2;
+      return { id: colIdOf(c), title: titleOf(colIdOf(c)), hidden: (_a2 = colHidden.value[colIdOf(c)]) != null ? _a2 : !!c.hide };
+    }));
+    let resizeState = null;
+    const onResizeMove = (e) => {
+      if (!resizeState) return;
+      const w = clamp(resizeState.startW + e.clientX - resizeState.startX, resizeState.min, resizeState.max);
+      colWidth.value = { ...colWidth.value, [resizeState.id]: Math.round(w) };
+    };
+    const onResizeEnd = () => {
+      if (resizeState) {
+        resized = true;
+        setTimeout(() => resized = false, 0);
+        emitColumnState();
+      }
+      resizeState = null;
+      window.removeEventListener("pointermove", onResizeMove);
+      window.removeEventListener("pointerup", onResizeEnd);
+    };
+    const startResize = (e, rc) => {
+      var _a2, _b, _c, _d;
+      resizeState = { id: rc.id, startX: e.clientX, startW: rc.width, min: (_b = (_a2 = rc.col) == null ? void 0 : _a2.minWidth) != null ? _b : 48, max: (_d = (_c = rc.col) == null ? void 0 : _c.maxWidth) != null ? _d : 2e3 };
+      window.addEventListener("pointermove", onResizeMove);
+      window.addEventListener("pointerup", onResizeEnd);
+    };
+    let canvas = null;
+    const autoSize = (ids) => {
+      var _a2, _b;
+      canvas != null ? canvas : canvas = document.createElement("canvas");
+      const ctx = canvas.getContext("2d");
+      if (!ctx || !viewport.value) return;
+      const cs = getComputedStyle(viewport.value);
+      ctx.font = `${cs.fontWeight} ${cs.fontSize} ${cs.fontFamily}`;
+      const sample = isServer.value ? [] : paged.value.filter((r) => r.kind === "data").slice(0, 300);
+      const next = { ...colWidth.value };
+      for (const c of flatCols.value) {
+        if (c.auto || ids && !ids.includes(c.id)) continue;
+        let w = ctx.measureText(c.title).width + 64;
+        for (const r of sample) w = Math.max(w, ctx.measureText(formatValue(c.col, cellValue(c, r.data), r.data)).width + 32);
+        next[c.id] = Math.ceil(clamp(w, (_a2 = c.col.minWidth) != null ? _a2 : 48, (_b = c.col.maxWidth) != null ? _b : 600));
+      }
+      colWidth.value = next;
+      emitColumnState();
+    };
+    const dragColId = ref(null);
+    const dropTarget = ref(null);
+    const onDragStart = (e, rc) => {
+      var _a2;
+      if (!rc.col || rc.auto || rc.col.lockPosition) return e.preventDefault();
+      dragColId.value = rc.id;
+      (_a2 = e.dataTransfer) == null ? void 0 : _a2.setData("text/plain", rc.id);
+      if (e.dataTransfer) e.dataTransfer.effectAllowed = "move";
+    };
+    const onDragOver = (e, rc) => {
+      if (!dragColId.value || !rc.col || rc.auto) return;
+      dropTarget.value = { id: rc.id, before: e.offsetX < rc.width / 2 };
+    };
+    const onDrop = (rc) => {
+      const from = dragColId.value;
+      const target = dropTarget.value;
+      dragColId.value = null;
+      dropTarget.value = null;
+      if (!from || !target || from === target.id || !rc.col || rc.auto) return;
+      const order = colOrder.value.filter((id) => id !== from);
+      const i = order.indexOf(target.id);
+      order.splice(target.before ? i : i + 1, 0, from);
+      colOrder.value = order;
+      const pin = visibleCols.value.left.some((c) => c.id === target.id) ? "left" : visibleCols.value.right.some((c) => c.id === target.id) ? "right" : null;
+      colPinned.value = { ...colPinned.value, [from]: pin };
+      emitColumnState();
+    };
+    const onGroupDrop = () => {
+      const id = dragColId.value;
+      dragColId.value = null;
+      if (id && !groupBy.value.includes(id)) groupByRef.value = [...groupBy.value, id];
+    };
+    const dataIdsInView = () => isServer.value ? [] : viewIdx.value.map((i) => rowIdOf(viewRows.value[i], i));
+    const setSelected = (ids) => {
+      selectedRef.value = ids;
+      emit("selection-change", ids);
+    };
+    const allSelected = computed(() => {
+      const ids = filteredIdx.value;
+      return ids.length > 0 && selectedIds.value.length >= ids.length && ids.every((i) => selectedSet.value.has(rowIdOf(raw.value[i], i)));
+    });
+    const someSelected = computed(() => !allSelected.value && selectedIds.value.length > 0);
+    const toggleAll = () => setSelected(allSelected.value ? [] : dataIdsInView());
+    const isRowChecked = (row) => row.kind === "group" ? row.group.leafIds.every((id) => selectedSet.value.has(id)) : selectedSet.value.has(row.id);
+    const isRowPartial = (row) => row.kind === "group" && !isRowChecked(row) && row.group.leafIds.some((id) => selectedSet.value.has(id));
+    const toggleRowCheck = (row) => {
+      const ids = row.kind === "group" ? row.group.leafIds : [row.id];
+      const on = isRowChecked(row);
+      const s = new Set(selectedIds.value);
+      ids.forEach((id) => on ? s.delete(id) : s.add(id));
+      setSelected(Array.from(s));
+    };
+    let lastClicked = -1;
+    const onRowClick = (e, vr) => {
+      if (vr.row.kind !== "data") return;
+      emit("row-click", { row: vr.row.data, event: e });
+      if (!props.rowSelection) return;
+      if (props.rowSelection === "single") setSelected(selectedSet.value.has(vr.row.id) && (e.ctrlKey || e.metaKey) ? [] : [vr.row.id]);
+      else if (e.shiftKey && lastClicked >= 0) {
+        const [a, b] = [Math.min(lastClicked, vr.index), Math.max(lastClicked, vr.index)];
+        const ids = new Set(selectedIds.value);
+        for (let i = a; i <= b; i++) {
+          const r = rowAt(i);
+          if ((r == null ? void 0 : r.kind) === "data") ids.add(r.id);
+        }
+        setSelected(Array.from(ids));
+      } else if (e.ctrlKey || e.metaKey) toggleRowCheck(vr.row);
+      else if (!props.selectionColumn) setSelected([vr.row.id]);
+      lastClicked = vr.index;
+    };
+    const focus = ref(null);
+    const cellRange = ref(null);
+    let anchor = null;
+    let selecting = false;
+    const endSelect = () => {
+      selecting = false;
+      window.removeEventListener("mouseup", endSelect);
+    };
+    const setRange = (a, b) => cellRange.value = { startRow: Math.min(a.row, b.row), endRow: Math.max(a.row, b.row), startCol: Math.min(a.col, b.col), endCol: Math.max(a.col, b.col) };
+    const inRange = (row, col) => {
+      const r = cellRange.value;
+      return !!r && (r.startRow !== r.endRow || r.startCol !== r.endCol) && row >= r.startRow && row <= r.endRow && col >= r.startCol && col <= r.endCol;
+    };
+    const onCellMousedown = (e, vr, rc) => {
+      if (!rc.col || e.button !== 0) return;
+      const pos = { row: vr.index, col: rc.flatIndex };
+      if (editing.value && !isEditing(vr, rc)) commitEdit();
+      if (e.shiftKey && focus.value) setRange(focus.value, pos);
+      else {
+        focus.value = pos;
+        anchor = pos;
+        setRange(pos, pos);
+      }
+      selecting = true;
+      window.addEventListener("mouseup", endSelect);
+      emit("cell-click", { row: vr.row.data, colId: rc.id, value: cellValue(rc, vr.row.data), event: e });
+    };
+    const onCellEnter = (vr, rc) => {
+      if (selecting && anchor && rc.col) setRange(anchor, { row: vr.index, col: rc.flatIndex });
+    };
+    const editing = ref(null);
+    const isEditable = (col, row) => !!row && (typeof col.editable === "function" ? col.editable(row) : !!col.editable);
+    const isEditing = (vr, rc) => !!editing.value && editing.value.row === vr.index && editing.value.colId === rc.id;
+    const editorKind = (rc) => {
+      var _a2, _b, _c, _d;
+      return (_d = (_a2 = rc.col) == null ? void 0 : _a2.cellEditor) != null ? _d : ((_b = rc.col) == null ? void 0 : _b.type) === "number" ? "number" : ((_c = rc.col) == null ? void 0 : _c.type) === "date" ? "date" : "text";
+    };
+    const undoStack = [];
+    const redoStack = [];
+    const canUndo = ref(false);
+    const applyChanges = (changes, dir) => {
+      for (const c of changes) {
+        const v = dir === "new" ? c.newValue : c.oldValue;
+        if (c.col.valueSetter) c.col.valueSetter(c.row, v);
+        else if (c.col.field) setByPath(c.row, c.col.field, v);
+        emit("cell-value-changed", { row: c.row, colId: colIdOf(c.col), oldValue: dir === "new" ? c.oldValue : c.newValue, newValue: v });
+      }
+      dataVersion.value++;
+    };
+    const record = (changes) => {
+      if (!changes.length) return;
+      applyChanges(changes, "new");
+      undoStack.push(changes);
+      if (undoStack.length > 100) undoStack.shift();
+      redoStack.length = 0;
+      canUndo.value = true;
+    };
+    const undo = () => {
+      const c = undoStack.pop();
+      if (c) {
+        applyChanges(c, "old");
+        redoStack.push(c);
+      }
+      canUndo.value = undoStack.length > 0;
+    };
+    const redo = () => {
+      const c = redoStack.pop();
+      if (c) {
+        applyChanges(c, "new");
+        undoStack.push(c);
+      }
+      canUndo.value = undoStack.length > 0;
+    };
+    const parseFor = (col, text, row) => {
+      if (col.valueParser) return col.valueParser(text, row);
+      if (col.type === "number") return text === "" ? null : Number(text.replace(/[^\d.-]/g, ""));
+      if (col.type === "boolean") return /^(true|1|yes|✓)$/i.test(text);
+      return text;
+    };
+    const startEdit = (rowIndex, flatCol, initial) => {
+      const c = flatCols.value[flatCol];
+      const r = rowAt(rowIndex);
+      if (!c || !r || r.kind !== "data" || !isEditable(c.col, r.data)) return;
+      if (c.col.type === "boolean") return record([{ row: r.data, col: c.col, oldValue: cellValue(c, r.data), newValue: !cellValue(c, r.data) }]);
+      editing.value = { row: rowIndex, colId: c.id, value: initial != null ? initial : cellValue(c, r.data) };
+      nextTick(() => {
+        var _a2, _b;
+        const el = (_a2 = viewport.value) == null ? void 0 : _a2.querySelector(".sq-datagrid__editor");
+        el == null ? void 0 : el.focus();
+        if (initial === void 0) (_b = el == null ? void 0 : el.select) == null ? void 0 : _b.call(el);
+      });
+    };
+    const onEditorInput = (e) => editing.value && (editing.value = { ...editing.value, value: e.target.value });
+    const commitEdit = () => {
+      var _a2;
+      const ed = editing.value;
+      if (!ed) return;
+      editing.value = null;
+      const r = rowAt(ed.row);
+      const c = flatCols.value.find((x) => x.id === ed.colId);
+      if (!(r == null ? void 0 : r.data) || !c) return;
+      const newValue = parseFor(c.col, String((_a2 = ed.value) != null ? _a2 : ""), r.data);
+      const oldValue = cellValue(c, r.data);
+      if (newValue !== oldValue) record([{ row: r.data, col: c.col, oldValue, newValue }]);
+    };
+    const cancelEdit = () => {
+      var _a2;
+      editing.value = null;
+      (_a2 = rootEl()) == null ? void 0 : _a2.focus();
+    };
+    const onEditorKey = (e) => {
+      var _a2;
+      if (e.key === "Enter" || e.key === "Tab") {
+        e.preventDefault();
+        commitEdit();
+        (_a2 = rootEl()) == null ? void 0 : _a2.focus();
+        moveFocus(e.key === "Enter" ? e.shiftKey ? -1 : 1 : 0, e.key === "Tab" ? e.shiftKey ? -1 : 1 : 0, false);
+      } else if (e.key === "Escape") cancelEdit();
+    };
+    const onCellDblclick = (vr, rc) => rc.col && startEdit(vr.index, rc.flatIndex);
+    const rootEl = () => {
+      var _a2;
+      return (_a2 = viewport.value) == null ? void 0 : _a2.parentElement;
+    };
+    const ensureVisible = (row, col) => {
+      const el = viewport.value;
+      if (!el) return;
+      const offs = layout.value.offsets;
+      const top = offs ? offs[row] : row * props.rowHeight;
+      const h = offs ? offs[row + 1] - offs[row] : props.rowHeight;
+      const bodyTop = el.scrollTop;
+      const visibleH = el.clientHeight - headBlock.value;
+      if (top < bodyTop) el.scrollTop = top;
+      else if (top + h > bodyTop + visibleH) el.scrollTop = top + h - visibleH;
+      const c = flatCols.value[col];
+      if (c && !c.pinned) {
+        const ci = visibleCols.value.center.indexOf(c);
+        const x = centerOffsets.value[ci];
+        const viewW = el.clientWidth - leftWidth.value - rightWidth.value;
+        if (x < el.scrollLeft) el.scrollLeft = x;
+        else if (x + c.width > el.scrollLeft + viewW) el.scrollLeft = x + c.width - viewW;
+      }
+    };
+    const moveFocus = (dr, dc, extend) => {
+      var _a2;
+      const f = (_a2 = focus.value) != null ? _a2 : { row: 0, col: 0 };
+      const next = { row: clamp(f.row + dr, 0, Math.max(0, rowCount.value - 1)), col: clamp(f.col + dc, 0, Math.max(0, flatCols.value.length - 1)) };
+      focus.value = next;
+      if (extend && anchor) setRange(anchor, next);
+      else {
+        anchor = next;
+        setRange(next, next);
+      }
+      ensureVisible(next.row, next.col);
+    };
+    const rangeCells = () => {
+      var _a2;
+      const r = (_a2 = cellRange.value) != null ? _a2 : focus.value ? { startRow: focus.value.row, endRow: focus.value.row, startCol: focus.value.col, endCol: focus.value.col } : null;
+      return r;
+    };
+    const copy = async (withHeaders = false) => {
+      const r = rangeCells();
+      let lines = [];
+      let header = [];
+      if (props.rowSelection && selectedIds.value.length && (!r || r.startRow === r.endRow && r.startCol === r.endCol)) {
+        const cols = flatCols.value.filter((c) => !c.auto);
+        header = cols.map((c) => c.title);
+        const sel = selectedSet.value;
+        lines = viewIdx.value.filter((i) => sel.has(rowIdOf(viewRows.value[i], i))).map((i) => cols.map((c) => {
+          var _a2;
+          return String((_a2 = cellValue(c, viewRows.value[i])) != null ? _a2 : "");
+        }));
+      } else if (r) {
+        const cols = flatCols.value.slice(r.startCol, r.endCol + 1).filter((c) => !c.auto);
+        header = cols.map((c) => c.title);
+        for (let i = r.startRow; i <= r.endRow; i++) {
+          const row = rowAt(i);
+          if ((row == null ? void 0 : row.kind) === "data") lines.push(cols.map((c) => {
+            var _a2;
+            return String((_a2 = cellValue(c, row.data)) != null ? _a2 : "");
+          }));
+        }
+      }
+      const text = [...withHeaders ? [header] : [], ...lines].map((l) => l.join("	")).join("\n");
+      try {
+        await navigator.clipboard.writeText(text);
+      } catch {
+      }
+      return text;
+    };
+    const onPaste = (e) => {
+      var _a2;
+      if (editing.value || !focus.value) return;
+      const text = (_a2 = e.clipboardData) == null ? void 0 : _a2.getData("text/plain");
+      if (!text) return;
+      e.preventDefault();
+      const grid = parseTsv(text);
+      const changes = [];
+      grid.forEach((line, dr) => line.forEach((cellText, dc) => {
+        const row = rowAt(focus.value.row + dr);
+        const c = flatCols.value[focus.value.col + dc];
+        if ((row == null ? void 0 : row.kind) === "data" && c && !c.auto && isEditable(c.col, row.data)) changes.push({ row: row.data, col: c.col, oldValue: cellValue(c, row.data), newValue: parseFor(c.col, cellText, row.data) });
+      }));
+      record(changes);
+    };
+    const clearRange = () => {
+      const r = rangeCells();
+      if (!r) return;
+      const changes = [];
+      for (let i = r.startRow; i <= r.endRow; i++)
+        for (let j = r.startCol; j <= r.endCol; j++) {
+          const row = rowAt(i);
+          const c = flatCols.value[j];
+          if ((row == null ? void 0 : row.kind) === "data" && c && !c.auto && isEditable(c.col, row.data)) changes.push({ row: row.data, col: c.col, oldValue: cellValue(c, row.data), newValue: c.col.type === "number" ? null : "" });
+        }
+      record(changes);
+    };
+    const onKeydown = (e) => {
+      if (editing.value || e.target.closest("input, select, textarea, .sq-datagrid__toolbar")) return;
+      const mod = e.ctrlKey || e.metaKey;
+      const page2 = Math.max(1, Math.floor((vpHeight.value - headBlock.value) / props.rowHeight) - 1);
+      const map = { ArrowUp: [-1, 0], ArrowDown: [1, 0], ArrowLeft: [0, -1], ArrowRight: [0, 1], PageUp: [-page2, 0], PageDown: [page2, 0] };
+      if (map[e.key]) {
+        e.preventDefault();
+        moveFocus(map[e.key][0], map[e.key][1], e.shiftKey);
+      } else if (e.key === "Home") {
+        e.preventDefault();
+        moveFocus(mod ? -rowCount.value : 0, -flatCols.value.length, e.shiftKey);
+      } else if (e.key === "End") {
+        e.preventDefault();
+        moveFocus(mod ? rowCount.value : 0, flatCols.value.length, e.shiftKey);
+      } else if (e.key === "Tab" && focus.value) {
+        e.preventDefault();
+        moveFocus(0, e.shiftKey ? -1 : 1, false);
+      } else if ((e.key === "Enter" || e.key === "F2") && focus.value) {
+        e.preventDefault();
+        const r = rowAt(focus.value.row);
+        (r == null ? void 0 : r.kind) === "group" ? toggleGroup(r) : startEdit(focus.value.row, focus.value.col);
+      } else if (e.key === " " && focus.value && props.rowSelection) {
+        e.preventDefault();
+        const r = rowAt(focus.value.row);
+        if (r && r.kind !== "loading" && r.kind !== "detail") toggleRowCheck(r);
+      } else if (mod && e.key.toLowerCase() === "c") {
+        e.preventDefault();
+        copy(e.shiftKey);
+      } else if (mod && e.key.toLowerCase() === "a") {
+        e.preventDefault();
+        if (props.rowSelection === "multiple") setSelected(dataIdsInView());
+        else cellRange.value = { startRow: 0, endRow: rowCount.value - 1, startCol: 0, endCol: flatCols.value.length - 1 };
+      } else if (mod && e.key.toLowerCase() === "z") {
+        e.preventDefault();
+        e.shiftKey ? redo() : undo();
+      } else if (mod && e.key.toLowerCase() === "y") {
+        e.preventDefault();
+        redo();
+      } else if (e.key === "Delete" || e.key === "Backspace") {
+        e.preventDefault();
+        clearRange();
+      } else if (e.key.length === 1 && !mod && focus.value) startEdit(focus.value.row, focus.value.col, e.key);
+    };
+    const menuOpen = ref(false);
+    const menuAnchor = ref(null);
+    const menuColId = ref(null);
+    const menuMode = ref("column");
+    const ctxPos = ref({ x: 0, y: 0 });
+    const menuCol = computed(() => {
+      var _a2;
+      return menuColId.value ? (_a2 = flatCols.value.find((c) => c.id === menuColId.value)) != null ? _a2 : null : null;
+    });
+    const menuFormatter = (v) => menuCol.value ? formatValue(menuCol.value.col, v, null) : String(v != null ? v : "");
+    const openMenu = (e, id) => {
+      menuMode.value = "column";
+      menuColId.value = id;
+      menuAnchor.value = e.currentTarget;
+      menuOpen.value = true;
+    };
+    const openContext = (e, vr, rc) => {
+      if (!rc.col) return;
+      if (!inRange(vr.index, rc.flatIndex)) {
+        const p = { row: vr.index, col: rc.flatIndex };
+        focus.value = p;
+        anchor = p;
+        setRange(p, p);
+      }
+      const rect = rootEl().getBoundingClientRect();
+      ctxPos.value = { x: e.clientX - rect.left, y: e.clientY - rect.top };
+      menuMode.value = "context";
+      menuColId.value = rc.id;
+      menuAnchor.value = ctxAnchor.value;
+      menuOpen.value = true;
+    };
+    const exportCsv = (opts = {}) => {
+      var _a2;
+      const cols = flatCols.value.filter((c) => !c.auto);
+      const sel = selectedSet.value;
+      const idx = isServer.value ? [] : viewIdx.value.filter((i) => !opts.onlySelected || sel.has(rowIdOf(viewRows.value[i], i)));
+      const body = idx.map((i) => cols.map((c) => formatValue(c.col, cellValue(c, viewRows.value[i]), viewRows.value[i])));
+      const csv = toCsv(cols.map((c) => c.title), body, opts.separator);
+      downloadText((_a2 = opts.fileName) != null ? _a2 : "export.csv", "\uFEFF" + csv, "text/csv;charset=utf-8");
+      return csv;
+    };
+    const bottomRows = computed(() => {
+      const extra = [];
+      if (props.totalsRow && !isServer.value) {
+        const r = {};
+        for (const c of viewCols.value) if (c.aggFunc) {
+          const get = makeGetter(c);
+          const v = aggregate(viewIdx.value.map((i) => get(viewRows.value[i])), c.aggFunc);
+          if (c.field) setByPath(r, c.field, v);
+          else r[colIdOf(c)] = v;
+        }
+        extra.push(r);
+      }
+      return [...props.pinnedBottomRows, ...extra];
+    });
+    const statusText = computed(() => {
+      if (isServer.value) return `${serverCount.value.toLocaleString(loc.value)} rows`;
+      const total = raw.value.length;
+      const shown = filteredIdx.value.length;
+      return shown === total ? `${total.toLocaleString(loc.value)} rows` : `${shown.toLocaleString(loc.value)} of ${total.toLocaleString(loc.value)} rows`;
+    });
+    const rangeStats = computed(() => {
+      const r = cellRange.value;
+      if (!r || r.startRow === r.endRow && r.startCol === r.endCol) return null;
+      const nums = [];
+      let count = 0;
+      const maxCells = 2e5;
+      for (let i = r.startRow; i <= r.endRow && count < maxCells; i++) {
+        const row = rowAt(i);
+        if ((row == null ? void 0 : row.kind) !== "data") continue;
+        for (let j = r.startCol; j <= r.endCol; j++) {
+          const c = flatCols.value[j];
+          if (!c || c.auto) continue;
+          const v = cellValue(c, row.data);
+          if (v != null && v !== "") count++;
+          if (typeof v === "number") nums.push(v);
+        }
+      }
+      if (!nums.length) return { count, sum: 0, avg: 0, min: 0, max: 0 };
+      const sum = nums.reduce((a, b) => a + b, 0);
+      return { count, sum, avg: sum / nums.length, min: Math.min(...nums), max: Math.max(...nums) };
+    });
+    const headerCellClass = (rc) => {
+      var _a2, _b, _c, _d, _e, _f, _g, _h;
+      return {
+        "sq-datagrid__hcell--pinned-left": rc.pinned === "left",
+        "sq-datagrid__hcell--pinned-right": rc.pinned === "right",
+        "sq-datagrid__hcell--edge-left": rc.edgeLeft,
+        "sq-datagrid__hcell--edge-right": rc.edgeRight,
+        "sq-datagrid__hcell--sortable": !!rc.col && !rc.auto && rc.col.sortable !== false,
+        "sq-datagrid__hcell--spacer": !rc.col,
+        "sq-datagrid__hcell--drop-before": ((_a2 = dropTarget.value) == null ? void 0 : _a2.id) === rc.id && dropTarget.value.before,
+        "sq-datagrid__hcell--drop-after": ((_b = dropTarget.value) == null ? void 0 : _b.id) === rc.id && !dropTarget.value.before,
+        [`sq-datagrid__align-${(_e = (_c = rc.col) == null ? void 0 : _c.align) != null ? _e : ((_d = rc.col) == null ? void 0 : _d.type) === "number" ? "right" : "left"}`]: true,
+        [(_g = (_f = rc.col) == null ? void 0 : _f.headerClass) != null ? _g : ""]: !!((_h = rc.col) == null ? void 0 : _h.headerClass)
+      };
+    };
+    const cellAlignClass = (rc) => {
+      var _a2, _b, _c, _d;
+      return {
+        "sq-datagrid__cell--pinned-left": rc.pinned === "left",
+        "sq-datagrid__cell--pinned-right": rc.pinned === "right",
+        "sq-datagrid__cell--edge-left": !!rc.edgeLeft,
+        "sq-datagrid__cell--edge-right": !!rc.edgeRight,
+        [`sq-datagrid__align-${(_d = (_a2 = rc.col) == null ? void 0 : _a2.align) != null ? _d : ((_b = rc.col) == null ? void 0 : _b.type) === "number" ? "right" : ((_c = rc.col) == null ? void 0 : _c.type) === "boolean" ? "center" : "left"}`]: !!rc.col
+      };
+    };
+    const cellClass = (vr, rc) => {
+      const base = cellAlignClass(rc);
+      if (!rc.col) return base;
+      base["sq-datagrid__cell--focused"] = !!focus.value && focus.value.row === vr.index && focus.value.col === rc.flatIndex;
+      base["sq-datagrid__cell--range"] = inRange(vr.index, rc.flatIndex);
+      base["sq-datagrid__cell--editable"] = vr.row.kind === "data" && isEditable(rc.col, vr.row.data);
+      if (rc.col.cellClass && vr.row.kind === "data") {
+        const extra = typeof rc.col.cellClass === "function" ? rc.col.cellClass({ value: cellValue(rc, vr.row.data), row: vr.row.data, column: rc.col, rowIndex: vr.index }) : rc.col.cellClass;
+        if (extra) base[extra] = true;
+      }
+      return base;
+    };
+    const cellStyle = (vr, rc) => {
+      var _a2;
+      if (!((_a2 = rc.col) == null ? void 0 : _a2.cellStyle) || vr.row.kind !== "data") return rc.style;
+      const extra = typeof rc.col.cellStyle === "function" ? rc.col.cellStyle({ value: cellValue(rc, vr.row.data), row: vr.row.data, column: rc.col, rowIndex: vr.index }) : rc.col.cellStyle;
+      return extra ? { ...rc.style, ...extra } : rc.style;
+    };
+    const rowClass = (vr) => {
+      const c = {
+        "sq-datagrid__row--group": vr.row.kind === "group",
+        "sq-datagrid__row--detail": vr.row.kind === "detail",
+        "sq-datagrid__row--selected": vr.row.kind === "data" && selectedSet.value.has(vr.row.id),
+        "sq-datagrid__row--odd": vr.index % 2 === 1
+      };
+      if (props.rowClassName && vr.row.data && vr.row.kind === "data") {
+        const x = props.rowClassName(vr.row.data);
+        if (x) c[x] = true;
+      }
+      return c;
+    };
+    const showLoading = computed(() => props.loading || isServer.value && serverLoading.value && serverCount.value === 0);
+    const rootStyle = { "--sq-r": "var(--sq-radius-xl)", "--sq-bg": "var(--sq-surface)", "--sq-bd": "var(--sq-border)", "--sq-bw": "1px", "--sq-grid-row-h": `${props.rowHeight}px` };
+    const api = {
+      getSelectedRows: () => isServer.value ? [] : viewIdx.value.map((i) => viewRows.value[i]).filter((r, k) => selectedSet.value.has(rowIdOf(r, viewIdx.value[k]))),
+      getDisplayedRows: () => display.value,
+      selectAll: () => setSelected(dataIdsInView()),
+      deselectAll: () => setSelected([]),
+      exportCsv,
+      copy,
+      undo,
+      redo,
+      expandAll,
+      collapseAll,
+      autoSize,
+      refresh: () => isServer.value ? purge() : dataVersion.value++,
+      ensureIndexVisible: (i) => {
+        var _a2, _b;
+        return ensureVisible(i, (_b = (_a2 = focus.value) == null ? void 0 : _a2.col) != null ? _b : 0);
+      },
+      getColumnState: () => flatCols.value.filter((c) => !c.auto).map((c) => ({ colId: c.id, width: c.width, hide: false, pinned: c.pinned })),
+      setColumnState: (state) => {
+        colOrder.value = [...state.map((s) => s.colId), ...colOrder.value.filter((id) => !state.some((s) => s.colId === id))];
+        colWidth.value = { ...colWidth.value, ...Object.fromEntries(state.filter((s) => s.width).map((s) => [s.colId, s.width])) };
+        colHidden.value = { ...colHidden.value, ...Object.fromEntries(state.filter((s) => s.hide !== void 0).map((s) => [s.colId, s.hide])) };
+        colPinned.value = { ...colPinned.value, ...Object.fromEntries(state.filter((s) => s.pinned !== void 0).map((s) => [s.colId, s.pinned])) };
+      }
+    };
+    return {
+      ...api,
+      api,
+      viewport,
+      ctxAnchor,
+      scrollLeft,
+      vpWidth,
+      isServer,
+      quick,
+      groupBy,
+      selectedIds,
+      selectedSet,
+      sortModelList,
+      filterModelObj,
+      renderCols,
+      flatCols,
+      totalWidth,
+      hasHeaderGroups,
+      headerGroups,
+      layout,
+      visibleRows,
+      rowCount,
+      filterRowHeight,
+      page,
+      pageSizeState,
+      pageCount,
+      onPageSize,
+      pageRangeText,
+      hasGroups,
+      detailOpen,
+      onScroll,
+      cellValue,
+      formatValue,
+      formatCell,
+      cellParams,
+      groupLabel,
+      groupAggText,
+      filterKind,
+      distinctValues,
+      sortIndex,
+      sortDir,
+      ariaSort,
+      setSort,
+      onHeaderClick,
+      setFilter,
+      floatingValue,
+      onFloatingInput,
+      toggleGroupBy,
+      removeGroup,
+      toggleGroup,
+      toggleDetail,
+      setHidden,
+      setPinned,
+      chooserCols,
+      startResize,
+      dragColId,
+      onDragStart,
+      onDragOver,
+      onDrop,
+      onGroupDrop,
+      allSelected,
+      someSelected,
+      toggleAll,
+      isRowChecked,
+      isRowPartial,
+      toggleRowCheck,
+      onRowClick,
+      onCellMousedown,
+      onCellEnter,
+      editing,
+      isEditing,
+      editorKind,
+      onEditorInput,
+      commitEdit,
+      onEditorKey,
+      onCellDblclick,
+      canUndo,
+      onKeydown,
+      onPaste,
+      menuOpen,
+      menuAnchor,
+      menuMode,
+      menuCol,
+      menuFormatter,
+      openMenu,
+      openContext,
+      ctxPos,
+      bottomRows,
+      statusText,
+      rangeStats,
+      fmtNum,
+      headerCellClass,
+      cellAlignClass,
+      cellClass,
+      cellStyle,
+      rowClass,
+      showLoading,
+      rootStyle,
+      titleOf,
+      toUnit,
+      getByPath,
+      has: (n) => !!slots[n],
+      messages: computed(() => config.locale.messages)
+    };
+  }
+});
+var _sfc_render = function render2() {
+  var _vm = this, _c = _vm._self._c;
+  _vm._self._setupProxy;
+  return _c("div", { staticClass: "sq-datagrid sq-surface", class: { "sq-datagrid--striped": _vm.striped, "sq-datagrid--column-lines": _vm.columnLines, "sq-datagrid--scrolled-x": _vm.scrollLeft > 0 }, style: _vm.rootStyle, attrs: { "tabindex": "0", "role": "grid", "aria-rowcount": _vm.rowCount, "aria-colcount": _vm.flatCols.length }, on: { "keydown": _vm.onKeydown, "paste": _vm.onPaste } }, [_c("SqShape", { attrs: { "clip": "" } }), _vm.toolbar || _vm.has("toolbar") ? _c("div", { staticClass: "sq-datagrid__toolbar" }, [_vm._t("toolbar", null, { "api": _vm.api }), _vm.toolbar ? _c("SqTextField", { staticClass: "sq-datagrid__quick", attrs: { "model-value": _vm.quick, "placeholder": _vm.messages.search, "prepend-inner-icon": "search", "density": "compact", "hide-details": "", "clearable": "" }, on: { "update:modelValue": function($event) {
+    _vm.quick = $event || "";
+  } } }) : _vm._e(), _c("span", { staticClass: "sq-spacer" }), _vm.toolbar ? _c("SqMenu", { attrs: { "close-on-content-click": false, "location": "bottom end" }, scopedSlots: _vm._u([{ key: "activator", fn: function() {
+    return [_c("SqBtn", { attrs: { "prepend-icon": "columns", "variant": "text", "color": "surface", "size": "small" } }, [_vm._v("Columns")])];
+  }, proxy: true }], null, false, 1865136461) }, [_c("div", { staticClass: "sq-datagrid__chooser" }, _vm._l(_vm.chooserCols, function(c) {
+    return _c("SqCheckbox", { key: c.id, attrs: { "model-value": !c.hidden, "label": c.title }, on: { "update:modelValue": function($event) {
+      return _vm.setHidden(c.id, !$event);
+    } } });
+  }), 1)]) : _vm._e(), _vm.toolbar ? _c("SqBtn", { attrs: { "prepend-icon": "download", "variant": "text", "color": "surface", "size": "small" }, on: { "click": function($event) {
+    return _vm.exportCsv();
+  } } }, [_vm._v("CSV")]) : _vm._e()], 2) : _vm._e(), _vm.groupPanel && !_vm.treeData && !_vm.isServer ? _c("div", { staticClass: "sq-datagrid__group-panel", on: { "dragover": function($event) {
+    $event.preventDefault();
+  }, "drop": _vm.onGroupDrop } }, [_c("SqIcon", { attrs: { "icon": "menu", "size": "16px" } }), !_vm.groupBy.length ? _c("span", { staticClass: "sq-datagrid__group-hint" }, [_vm._v("Drag a column header here to group rows")]) : _vm._e(), _vm._l(_vm.groupBy, function(id) {
+    return _c("SqChip", { key: id, attrs: { "size": "small", "variant": "tonal", "color": "primary", "closable": "" }, on: { "click:close": function($event) {
+      return _vm.removeGroup(id);
+    } } }, [_vm._v(_vm._s(_vm.titleOf(id)))]);
+  })], 2) : _vm._e(), _c("div", { ref: "viewport", staticClass: "sq-datagrid__viewport", style: { height: _vm.toUnit(_vm.height) }, on: { "&scroll": function($event) {
+    return _vm.onScroll.apply(null, arguments);
+  } } }, [_c("div", { staticClass: "sq-datagrid__canvas", style: { width: _vm.totalWidth + "px" } }, [_c("div", { staticClass: "sq-datagrid__head", attrs: { "role": "rowgroup" } }, [_vm.hasHeaderGroups ? _c("div", { staticClass: "sq-datagrid__header-row sq-datagrid__header-row--groups", style: { height: _vm.headerHeight + "px" } }, _vm._l(_vm.headerGroups, function(g) {
+    return _c("div", { key: g.key, staticClass: "sq-datagrid__header-group", class: g.cls, style: g.style }, [_vm._v(_vm._s(g.label))]);
+  }), 0) : _vm._e(), _c("div", { staticClass: "sq-datagrid__header-row", style: { height: _vm.headerHeight + "px" }, attrs: { "role": "row" } }, _vm._l(_vm.renderCols, function(rc) {
+    return _c("div", { key: rc.key, staticClass: "sq-datagrid__hcell", class: _vm.headerCellClass(rc), style: rc.style, attrs: { "role": "columnheader", "aria-sort": rc.col ? _vm.ariaSort(rc.id) : void 0, "draggable": !!rc.col && !rc.auto && !rc.col.lockPosition }, on: { "click": function($event) {
+      rc.col && _vm.onHeaderClick($event, rc);
+    }, "dragstart": function($event) {
+      return _vm.onDragStart($event, rc);
+    }, "dragover": function($event) {
+      $event.preventDefault();
+      return _vm.onDragOver($event, rc);
+    }, "drop": function($event) {
+      $event.preventDefault();
+      return _vm.onDrop(rc);
+    }, "dragend": function($event) {
+      _vm.dragColId = null;
+    } } }, [rc.col ? [rc.id === "__select" ? _c("span", { staticClass: "sq-datagrid__check", on: { "click": function($event) {
+      $event.stopPropagation();
+    } } }, [_c("SqCheckbox", { attrs: { "model-value": _vm.allSelected, "indeterminate": _vm.someSelected, "aria-label": "Select all rows" }, on: { "update:modelValue": _vm.toggleAll } })], 1) : [_c("span", { staticClass: "sq-datagrid__htitle" }, [_vm._t(`header-${rc.id}`, function() {
+      return [_vm._v(_vm._s(rc.title))];
+    }, { "column": rc.col })], 2), _vm.sortIndex(rc.id) >= 0 ? _c("span", { staticClass: "sq-datagrid__sort" }, [_c("SqIcon", { attrs: { "icon": _vm.sortDir(rc.id) === "asc" ? "arrowUp" : "arrowDown", "size": "14px" } }), _vm.sortModelList.length > 1 ? _c("sup", [_vm._v(_vm._s(_vm.sortIndex(rc.id) + 1))]) : _vm._e()], 1) : _vm._e(), _vm.filterModelObj[rc.id] ? _c("SqIcon", { staticClass: "sq-datagrid__filtered", attrs: { "icon": "filter", "size": "14px" } }) : _vm._e(), !rc.col.suppressMenu && !rc.auto ? _c("button", { staticClass: "sq-datagrid__menu-btn", attrs: { "type": "button", "tabindex": "-1", "aria-label": "Column menu" }, on: { "click": function($event) {
+      $event.stopPropagation();
+      return _vm.openMenu($event, rc.id);
+    } } }, [_c("SqIcon", { attrs: { "icon": "more", "size": "16px" } })], 1) : _vm._e()], rc.col.resizable !== false ? _c("span", { staticClass: "sq-datagrid__resizer", on: { "pointerdown": function($event) {
+      $event.stopPropagation();
+      $event.preventDefault();
+      return _vm.startResize($event, rc);
+    }, "dblclick": function($event) {
+      $event.stopPropagation();
+      return _vm.autoSize([rc.id]);
+    }, "click": function($event) {
+      $event.stopPropagation();
+    } } }) : _vm._e()] : _vm._e()], 2);
+  }), 0), _vm.floatingFilters ? _c("div", { staticClass: "sq-datagrid__header-row sq-datagrid__header-row--filters", style: { height: _vm.filterRowHeight + "px" } }, _vm._l(_vm.renderCols, function(rc) {
+    return _c("div", { key: rc.key, staticClass: "sq-datagrid__hcell sq-datagrid__fcell", class: _vm.headerCellClass(rc), style: rc.style }, [rc.col && !rc.auto && rc.col.filter !== false && _vm.filterKind(rc.col) !== "set" ? _c("input", { staticClass: "sq-datagrid__ffilter sq-squircle", attrs: { "type": _vm.filterKind(rc.col) === "number" ? "number" : _vm.filterKind(rc.col) === "date" ? "date" : "text", "placeholder": _vm.filterKind(rc.col) === "text" ? "…" : "=", "aria-label": `Filter ${rc.title}` }, domProps: { "value": _vm.floatingValue(rc.id) }, on: { "input": function($event) {
+      return _vm.onFloatingInput($event, rc);
+    } } }) : _vm._e()]);
+  }), 0) : _vm._e(), _vm._l(_vm.pinnedTopRows, function(pr, pi) {
+    return _c("div", { key: "pt" + pi, staticClass: "sq-datagrid__row sq-datagrid__row--pinned", style: { height: _vm.rowHeight + "px" } }, _vm._l(_vm.renderCols, function(rc) {
+      return _c("div", { key: rc.key, staticClass: "sq-datagrid__cell", class: _vm.cellAlignClass(rc), style: rc.style }, [rc.col && !rc.auto ? [_vm._t(`cell-${rc.id}`, function() {
+        return [_vm._v(_vm._s(_vm.formatCell(rc, pr)))];
+      }, null, _vm.cellParams(pr, rc, -1))] : _vm._e()], 2);
+    }), 0);
+  })], 2), _c("div", { staticClass: "sq-datagrid__body", style: { height: _vm.layout.total + "px" }, attrs: { "role": "rowgroup" } }, _vm._l(_vm.visibleRows, function(vr) {
+    return _c("div", { key: vr.row.id, staticClass: "sq-datagrid__row", class: _vm.rowClass(vr), style: { transform: `translateY(${vr.top}px)`, height: vr.height + "px" }, attrs: { "role": "row", "aria-rowindex": vr.index + 1, "aria-selected": vr.row.kind === "data" && _vm.rowSelection ? _vm.selectedSet.has(vr.row.id) ? "true" : "false" : void 0 }, on: { "click": function($event) {
+      return _vm.onRowClick($event, vr);
+    }, "dblclick": function($event) {
+      return _vm.$emit("row-dblclick", { row: vr.row.data, event: $event });
+    } } }, [vr.row.kind === "detail" ? _c("div", { staticClass: "sq-datagrid__detail", style: { width: _vm.vpWidth + "px" } }, [_vm._t("detail", null, { "row": vr.row.data })], 2) : _vm._l(_vm.renderCols, function(rc) {
+      var _a, _b, _c2, _d, _e, _f, _g, _h, _i;
+      return _c("div", { key: rc.key, staticClass: "sq-datagrid__cell", class: _vm.cellClass(vr, rc), style: _vm.cellStyle(vr, rc), attrs: { "role": "gridcell" }, on: { "mousedown": function($event) {
+        return _vm.onCellMousedown($event, vr, rc);
+      }, "mouseenter": function($event) {
+        return _vm.onCellEnter(vr, rc);
+      }, "dblclick": function($event) {
+        $event.stopPropagation();
+        return _vm.onCellDblclick(vr, rc);
+      }, "contextmenu": function($event) {
+        $event.preventDefault();
+        return _vm.openContext($event, vr, rc);
+      } } }, [!rc.col ? void 0 : vr.row.kind === "loading" ? _c("span", { staticClass: "sq-datagrid__skeleton sq-skeleton-shimmer" }) : rc.id === "__select" ? _c("span", { staticClass: "sq-datagrid__check", on: { "click": function($event) {
+        $event.stopPropagation();
+      }, "mousedown": function($event) {
+        $event.stopPropagation();
+      } } }, [_c("SqCheckbox", { attrs: { "model-value": _vm.isRowChecked(vr.row), "indeterminate": _vm.isRowPartial(vr.row), "aria-label": "Select row" }, on: { "update:modelValue": function($event) {
+        return _vm.toggleRowCheck(vr.row);
+      } } })], 1) : rc.id === "__group" ? _c("span", { staticClass: "sq-datagrid__group-cell", style: { paddingInlineStart: vr.row.level * 18 + "px" } }, [vr.row.kind === "group" ? _c("button", { staticClass: "sq-datagrid__expander", class: { "sq-datagrid__expander--open": (_a = vr.row.group) == null ? void 0 : _a.expanded }, attrs: { "type": "button", "tabindex": "-1" }, on: { "click": function($event) {
+        $event.stopPropagation();
+        return _vm.toggleGroup(vr.row);
+      } } }, [_c("SqIcon", { attrs: { "icon": "chevronRight", "size": "18px" } })], 1) : _vm.masterDetail && !_vm.treeData ? _c("button", { staticClass: "sq-datagrid__expander", class: { "sq-datagrid__expander--open": _vm.detailOpen.has(vr.row.id) }, attrs: { "type": "button", "tabindex": "-1" }, on: { "click": function($event) {
+        $event.stopPropagation();
+        return _vm.toggleDetail(vr.row.id);
+      } } }, [_c("SqIcon", { attrs: { "icon": "chevronRight", "size": "18px" } })], 1) : _c("span", { staticClass: "sq-datagrid__expander-spacer" }), _c("span", { staticClass: "sq-datagrid__group-key" }, [_vm._t("group", function() {
+        return [_vm._v(_vm._s(_vm.groupLabel(vr.row)))];
+      }, { "row": vr.row })], 2), vr.row.kind === "group" && ((_b = vr.row.group) == null ? void 0 : _b.count) ? _c("span", { staticClass: "sq-datagrid__group-count" }, [_vm._v(_vm._s((_c2 = vr.row.group) == null ? void 0 : _c2.count))]) : _vm._e()]) : vr.row.kind === "group" ? _c("span", { staticClass: "sq-datagrid__agg" }, [_vm._v(_vm._s(_vm.groupAggText(vr.row, rc)))]) : _vm.isEditing(vr, rc) ? _c("span", { staticClass: "sq-datagrid__editor-wrap", on: { "mousedown": function($event) {
+        $event.stopPropagation();
+      } } }, [_vm.editorKind(rc) === "select" ? _c("select", { staticClass: "sq-datagrid__editor", domProps: { "value": String((_e = (_d = _vm.editing) == null ? void 0 : _d.value) != null ? _e : "") }, on: { "change": _vm.onEditorInput, "keydown": function($event) {
+        $event.stopPropagation();
+        return _vm.onEditorKey.apply(null, arguments);
+      }, "blur": _vm.commitEdit } }, _vm._l((_g = (_f = rc.col.cellEditorParams) == null ? void 0 : _f.values) != null ? _g : [], function(opt) {
+        return _c("option", { key: String(opt), domProps: { "value": String(opt) } }, [_vm._v(_vm._s(opt))]);
+      }), 0) : _c("input", { staticClass: "sq-datagrid__editor", attrs: { "type": _vm.editorKind(rc) }, domProps: { "value": (_i = (_h = _vm.editing) == null ? void 0 : _h.value) != null ? _i : "" }, on: { "input": _vm.onEditorInput, "keydown": function($event) {
+        $event.stopPropagation();
+        return _vm.onEditorKey.apply(null, arguments);
+      }, "blur": _vm.commitEdit } })]) : [_vm._t(`cell-${rc.id}`, function() {
+        return [_vm._t("cell", function() {
+          return [rc.col.type === "boolean" ? _c("span", { staticClass: "sq-datagrid__bool", class: { "sq-datagrid__bool--on": !!_vm.cellValue(rc, vr.row.data) } }, [_c("SqIcon", { attrs: { "icon": _vm.cellValue(rc, vr.row.data) ? "check" : "minus", "size": "16px" } })], 1) : _c("span", { staticClass: "sq-datagrid__text" }, [_vm._v(_vm._s(_vm.formatCell(rc, vr.row.data)))])];
+        }, null, _vm.cellParams(vr.row.data, rc, vr.index))];
+      }, null, _vm.cellParams(vr.row.data, rc, vr.index))]], 2);
+    })], 2);
+  }), 0), _vm.bottomRows.length ? _c("div", { staticClass: "sq-datagrid__foot" }, _vm._l(_vm.bottomRows, function(pr, pi) {
+    return _c("div", { key: "pb" + pi, staticClass: "sq-datagrid__row sq-datagrid__row--pinned", style: { height: _vm.rowHeight + "px" } }, _vm._l(_vm.renderCols, function(rc) {
+      return _c("div", { key: rc.key, staticClass: "sq-datagrid__cell", class: _vm.cellAlignClass(rc), style: rc.style }, [rc.id === "__group" ? [_c("strong", [_vm._v("Total")])] : rc.col && !rc.auto ? [_vm._t(`cell-${rc.id}`, function() {
+        return [_vm._v(_vm._s(_vm.formatCell(rc, pr)))];
+      }, null, _vm.cellParams(pr, rc, -1))] : _vm._e()], 2);
+    }), 0);
+  }), 0) : _vm._e()]), _vm.showLoading ? _c("div", { staticClass: "sq-datagrid__overlay" }, [_vm._t("loading", function() {
+    return [_c("SqProgressCircular", { attrs: { "indeterminate": "", "size": 28, "width": 3 } })];
+  })], 2) : !_vm.rowCount ? _c("div", { staticClass: "sq-datagrid__overlay sq-datagrid__overlay--empty" }, [_vm._t("no-rows", function() {
+    return [_c("SqEmptyState", { attrs: { "title": _vm.messages.noData, "icon": "search" } })];
+  })], 2) : _vm._e()]), _vm.statusBar || _vm.pagination ? _c("div", { staticClass: "sq-datagrid__footer" }, [_vm.statusBar ? _c("div", { staticClass: "sq-datagrid__status" }, [_c("span", [_vm._v(_vm._s(_vm.statusText))]), _vm.selectedIds.length ? _c("span", [_vm._v("· " + _vm._s(_vm.selectedIds.length) + " selected")]) : _vm._e(), _vm.rangeStats ? _c("span", { staticClass: "sq-datagrid__range-stats" }, [_vm._v("Count " + _vm._s(_vm.rangeStats.count) + " · Sum " + _vm._s(_vm.fmtNum(_vm.rangeStats.sum)) + " · Avg " + _vm._s(_vm.fmtNum(_vm.rangeStats.avg)) + " · Min " + _vm._s(_vm.fmtNum(_vm.rangeStats.min)) + " · Max " + _vm._s(_vm.fmtNum(_vm.rangeStats.max)))]) : _vm._e()]) : _vm._e(), _c("span", { staticClass: "sq-spacer" }), _vm.pagination && !_vm.isServer ? [_c("span", { staticClass: "sq-datagrid__page-size" }, [_vm._v(_vm._s(_vm.messages.rowsPerPage) + " "), _c("select", { staticClass: "sq-datagrid__page-select sq-squircle", domProps: { "value": _vm.pageSizeState }, on: { "change": _vm.onPageSize } }, _vm._l(_vm.pageSizes, function(s) {
+    return _c("option", { key: s, domProps: { "value": s } }, [_vm._v(_vm._s(s))]);
+  }), 0)]), _c("span", { staticClass: "sq-datagrid__page-range" }, [_vm._v(_vm._s(_vm.pageRangeText))]), _c("SqPagination", { attrs: { "length": _vm.pageCount, "total-visible": 5, "size": "x-small" }, model: { value: _vm.page, callback: function($$v) {
+    _vm.page = $$v;
+  }, expression: "page" } })] : _vm._e()], 2) : _vm._e(), _c("SqMenu", { attrs: { "activator": _vm.menuAnchor || void 0, "close-on-content-click": false, "location": "bottom end", "max-height": 480 }, model: { value: _vm.menuOpen, callback: function($$v) {
+    _vm.menuOpen = $$v;
+  }, expression: "menuOpen" } }, [_vm.menuCol ? _c("div", { staticClass: "sq-datagrid__menu" }, [_vm.menuMode === "column" ? [_vm.menuCol.col.sortable !== false ? _c("SqListItem", { attrs: { "title": "Sort ascending", "prepend-icon": "arrowUp", "link": "" }, on: { "click": function($event) {
+    return _vm.setSort(_vm.menuCol.id, "asc");
+  } } }) : _vm._e(), _vm.menuCol.col.sortable !== false ? _c("SqListItem", { attrs: { "title": "Sort descending", "prepend-icon": "arrowDown", "link": "" }, on: { "click": function($event) {
+    return _vm.setSort(_vm.menuCol.id, "desc");
+  } } }) : _vm._e(), _vm.sortIndex(_vm.menuCol.id) >= 0 ? _c("SqListItem", { attrs: { "title": "Clear sort", "prepend-icon": "sort", "link": "" }, on: { "click": function($event) {
+    return _vm.setSort(_vm.menuCol.id, null);
+  } } }) : _vm._e(), _c("SqDivider"), _c("SqListItem", { attrs: { "title": _vm.menuCol.pinned === "left" ? "Unpin" : "Pin left", "prepend-icon": "pin", "link": "" }, on: { "click": function($event) {
+    return _vm.setPinned(_vm.menuCol.id, _vm.menuCol.pinned === "left" ? null : "left");
+  } } }), _vm.menuCol.pinned !== "right" ? _c("SqListItem", { attrs: { "title": "Pin right", "prepend-icon": "pin", "link": "" }, on: { "click": function($event) {
+    return _vm.setPinned(_vm.menuCol.id, "right");
+  } } }) : _vm._e(), _c("SqListItem", { attrs: { "title": "Autosize column", "prepend-icon": "columns", "link": "" }, on: { "click": function($event) {
+    return _vm.autoSize([_vm.menuCol.id]);
+  } } }), _c("SqListItem", { attrs: { "title": "Autosize all columns", "prepend-icon": "columns", "link": "" }, on: { "click": function($event) {
+    return _vm.autoSize();
+  } } }), !_vm.treeData && !_vm.isServer ? _c("SqListItem", { attrs: { "title": _vm.groupBy.includes(_vm.menuCol.id) ? `Ungroup by ${_vm.menuCol.title}` : `Group by ${_vm.menuCol.title}`, "prepend-icon": "menu", "link": "" }, on: { "click": function($event) {
+    return _vm.toggleGroupBy(_vm.menuCol.id);
+  } } }) : _vm._e(), _c("SqListItem", { attrs: { "title": "Hide column", "prepend-icon": "eyeOff", "link": "" }, on: { "click": function($event) {
+    _vm.setHidden(_vm.menuCol.id, true);
+    _vm.menuOpen = false;
+  } } }), _vm.menuCol.col.filter !== false ? [_c("SqDivider", [_vm._v("Filter")]), _c("SqGridFilter", { attrs: { "kind": _vm.filterKind(_vm.menuCol.col), "model-value": _vm.filterModelObj[_vm.menuCol.id], "values": _vm.distinctValues(_vm.menuCol.id), "formatter": _vm.menuFormatter }, on: { "update:modelValue": function($event) {
+    return _vm.setFilter(_vm.menuCol.id, $event);
+  } } })] : _vm._e()] : [_c("SqListItem", { attrs: { "title": "Copy", "prepend-icon": "copy", "link": "" }, on: { "click": function($event) {
+    _vm.copy(false);
+    _vm.menuOpen = false;
+  } } }), _c("SqListItem", { attrs: { "title": "Copy with headers", "prepend-icon": "copy", "link": "" }, on: { "click": function($event) {
+    _vm.copy(true);
+    _vm.menuOpen = false;
+  } } }), _vm.canUndo ? _c("SqListItem", { attrs: { "title": "Undo", "prepend-icon": "refresh", "link": "" }, on: { "click": function($event) {
+    _vm.undo();
+    _vm.menuOpen = false;
+  } } }) : _vm._e(), _c("SqDivider"), _c("SqListItem", { attrs: { "title": "Export CSV", "prepend-icon": "download", "link": "" }, on: { "click": function($event) {
+    _vm.exportCsv();
+    _vm.menuOpen = false;
+  } } }), _vm.selectedIds.length ? _c("SqListItem", { attrs: { "title": "Export selected rows", "prepend-icon": "download", "link": "" }, on: { "click": function($event) {
+    _vm.exportCsv({ onlySelected: true });
+    _vm.menuOpen = false;
+  } } }) : _vm._e(), _vm.hasGroups ? [_c("SqDivider"), _c("SqListItem", { attrs: { "title": "Expand all", "prepend-icon": "plus", "link": "" }, on: { "click": function($event) {
+    _vm.expandAll();
+    _vm.menuOpen = false;
+  } } }), _c("SqListItem", { attrs: { "title": "Collapse all", "prepend-icon": "minus", "link": "" }, on: { "click": function($event) {
+    _vm.collapseAll();
+    _vm.menuOpen = false;
+  } } })] : _vm._e()]], 2) : _vm._e()]), _c("div", { ref: "ctxAnchor", staticClass: "sq-datagrid__ctx-anchor", style: { left: _vm.ctxPos.x + "px", top: _vm.ctxPos.y + "px" } })], 1);
+};
+var _sfc_staticRenderFns = [];
+var __component__ = /* @__PURE__ */ normalizeComponent(
+  _sfc_main,
+  _sfc_render,
+  _sfc_staticRenderFns
+);
+const SqDataGrid = __component__.exports;
+const componentNames = ["SqDataGrid"];
+export {
+  SqDataGrid,
+  aggregate,
+  allGroupIds,
+  colIdOf,
+  componentNames,
+  SqDataGrid as default,
+  filterKindOf,
+  filterRows,
+  flatten,
+  groupRows,
+  makeGetter,
+  matchCondition,
+  parseTsv,
+  pivotRows,
+  rowLayout,
+  sortIndices,
+  toCsv,
+  treeRows
+};
+//# sourceMappingURL=index.mjs.map