@xleddyl/443-components-vue 0.9.2 → 0.10.0

package/dist/grid/spreadsheet.mjs

@@ -0,0 +1,928 @@
+import { computed, ref, shallowRef } from "vue";
+import { isApplePlatform } from "../internal/core/env.mjs";
+import { formatTsv, parseTsv, stringifyCellValue } from "./tsv.mjs";
+const WRITE_SOURCE = "k-spreadsheet";
+const HISTORY_LIMIT = 100;
+const HANDLE_HIT = 10;
+const SELECT_EDITORS = /* @__PURE__ */ new Set(["agSelectCellEditor", "agRichSelectCellEditor"]);
+const ARROWS = {
+  ArrowUp: { row: -1, col: 0 },
+  ArrowDown: { row: 1, col: 0 },
+  ArrowLeft: { row: 0, col: -1 },
+  ArrowRight: { row: 0, col: 1 }
+};
+function sameValue(a, b) {
+  if (Object.is(a, b)) return true;
+  if ((a === null || a === void 0) && (b === null || b === void 0)) return true;
+  if (a instanceof Date && b instanceof Date) return a.getTime() === b.getTime();
+  return false;
+}
+function clampNumber(value, min, max) {
+  return Math.min(Math.max(value, min), max);
+}
+function sameCell(a, b) {
+  return a === b || !!a && !!b && a.row === b.row && a.col === b.col;
+}
+function rectOf(a, b) {
+  return {
+    top: Math.min(a.row, b.row),
+    bottom: Math.max(a.row, b.row),
+    left: Math.min(a.col, b.col),
+    right: Math.max(a.col, b.col)
+  };
+}
+function rectArea(rect) {
+  return rect ? (rect.bottom - rect.top + 1) * (rect.right - rect.left + 1) : 0;
+}
+function isTextInput(target) {
+  return target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement || target instanceof HTMLSelectElement || target instanceof HTMLElement && target.isContentEditable;
+}
+function shortcutLetter(event) {
+  if (/^[a-z]$/i.test(event.key)) return event.key.toLowerCase();
+  return event.code.startsWith("Key") ? event.code.slice(3).toLowerCase() : "";
+}
+function stopEvent(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+function allowedValues(colDef) {
+  if (typeof colDef.cellEditor !== "string" || !SELECT_EDITORS.has(colDef.cellEditor)) return null;
+  const params = colDef.cellEditorParams;
+  return params && typeof params === "object" && Array.isArray(params.values) ? params.values : null;
+}
+export function createGridSpreadsheet(options) {
+  let api = null;
+  let active = null;
+  let anchor = null;
+  let corner = null;
+  let rect = null;
+  let columns = [];
+  const columnIndex = /* @__PURE__ */ new Map();
+  let drag = null;
+  let consumedPointer = false;
+  let fillOrigin = null;
+  let fillCorners = null;
+  const dirty = /* @__PURE__ */ new Map();
+  const undoStack = [];
+  const redoStack = [];
+  const range = shallowRef(null);
+  const selectedCellCount = ref(0);
+  const dirtyCount = ref(0);
+  const canUndo = ref(false);
+  const canRedo = ref(false);
+  const filling = ref(false);
+  function rowCount() {
+    return api?.getDisplayedRowCount() ?? 0;
+  }
+  function nodeAt(row) {
+    return api?.getDisplayedRowAtIndex(row) ?? void 0;
+  }
+  function fieldOf(column) {
+    return column.getColDef().field ?? column.getColId();
+  }
+  function isEditable(node, column) {
+    return Boolean(node.data) && !node.group && !node.rowPinned && column.isCellEditable(node);
+  }
+  function readValue(node, column) {
+    return api?.getCellValue({ rowNode: node, colKey: column });
+  }
+  function isMulti() {
+    return rectArea(rect) > 1;
+  }
+  function cellOf(params) {
+    const row = params.node.rowIndex;
+    if (params.node.rowPinned || row === null || row === void 0) return null;
+    const col = columnIndex.get(params.column.getColId());
+    return col === void 0 ? null : { row, col };
+  }
+  function rangeCell(params) {
+    if (!rect || !isMulti()) return null;
+    const cell = cellOf(params);
+    if (!cell) return null;
+    const inside = cell.row >= rect.top && cell.row <= rect.bottom && cell.col >= rect.left && cell.col <= rect.right;
+    return inside ? cell : null;
+  }
+  const classRules = {
+    "is-range": (params) => {
+      const cell = rangeCell(params);
+      return !!cell && !sameCell(cell, active);
+    },
+    "is-range-top": (params) => rangeCell(params)?.row === rect?.top,
+    "is-range-bottom": (params) => rangeCell(params)?.row === rect?.bottom,
+    "is-range-left": (params) => rangeCell(params)?.col === rect?.left,
+    "is-range-right": (params) => rangeCell(params)?.col === rect?.right,
+    "is-active": (params) => !!active && sameCell(cellOf(params), active),
+    "is-fill-corner": (params) => {
+      if (!rect) return false;
+      const cell = cellOf(params);
+      return !!cell && cell.row === rect.bottom && cell.col === rect.right;
+    },
+    "is-dirty": (params) => {
+      const id = params.node.id;
+      return !!id && dirty.get(id)?.has(params.column.getColId()) === true;
+    }
+  };
+  function refreshArea(areas) {
+    if (!api) return;
+    const list = areas.filter((area) => area !== null);
+    if (!list.length) return;
+    const top = Math.min(...list.map((area) => area.top));
+    const bottom = Math.max(...list.map((area) => area.bottom));
+    const left = Math.min(...list.map((area) => area.left));
+    const right = Math.max(...list.map((area) => area.right));
+    const rowNodes = api.getRenderedNodes().filter(
+      (node) => !node.rowPinned && node.rowIndex !== null && node.rowIndex >= top && node.rowIndex <= bottom
+    );
+    if (!rowNodes.length) return;
+    api.refreshCells({ rowNodes, columns: columns.slice(left, right + 1) });
+  }
+  function refreshRendered() {
+    if (api && !api.isDestroyed()) api.refreshCells();
+  }
+  function toRange() {
+    if (!rect || !active) return null;
+    const activeColumn = columns[active.col];
+    if (!activeColumn) return null;
+    return {
+      startRowIndex: rect.top,
+      endRowIndex: rect.bottom,
+      columns: columns.slice(rect.left, rect.right + 1).map((column) => column.getColId()),
+      active: { rowIndex: active.row, colId: activeColumn.getColId() }
+    };
+  }
+  function publish() {
+    range.value = toRange();
+    selectedCellCount.value = rectArea(rect);
+    options.onRange(range.value);
+    if (isMulti()) options.onSelect(selectedCellCount.value);
+  }
+  function focusActive() {
+    const column = active ? columns[active.col] : void 0;
+    if (api && active && column) api.setFocusedCell(active.row, column);
+  }
+  function select(nextAnchor, nextCorner, nextActive, focus = false) {
+    if (sameCell(anchor, nextAnchor) && sameCell(corner, nextCorner) && sameCell(active, nextActive))
+      return;
+    const previousRect = rect;
+    const previousActive = active;
+    anchor = nextAnchor;
+    corner = nextCorner;
+    active = nextActive;
+    rect = rectOf(anchor, corner);
+    refreshArea([
+      previousRect,
+      rect,
+      previousActive && rectOf(previousActive, previousActive),
+      rectOf(active, active)
+    ]);
+    publish();
+    if (focus && !sameCell(previousActive, active)) focusActive();
+  }
+  function selectRect(target, focus = true) {
+    const start = { row: target.top, col: target.left };
+    select(start, { row: target.bottom, col: target.right }, start, focus);
+  }
+  function reset() {
+    if (!rect && !active) return;
+    const previousRect = rect;
+    const previousActive = active;
+    active = anchor = corner = rect = null;
+    refreshArea([previousRect, previousActive && rectOf(previousActive, previousActive)]);
+    publish();
+  }
+  function clamp() {
+    if (!anchor || !corner || !active) return;
+    const rows = rowCount();
+    const cols = columns.length;
+    if (!rows || !cols) return reset();
+    const fit = (cell) => ({
+      row: Math.min(cell.row, rows - 1),
+      col: Math.min(cell.col, cols - 1)
+    });
+    anchor = fit(anchor);
+    corner = fit(corner);
+    active = fit(active);
+    rect = rectOf(anchor, corner);
+    publish();
+  }
+  function syncColumns() {
+    columns = (api?.getAllDisplayedColumns() ?? []).filter(
+      (column) => !column.getColId().startsWith("ag-Grid-")
+    );
+    columnIndex.clear();
+    columns.forEach((column, index) => columnIndex.set(column.getColId(), index));
+    clamp();
+    if (rect || dirty.size) refreshRendered();
+  }
+  function onModelUpdated() {
+    clamp();
+    if (rect || dirty.size) refreshRendered();
+  }
+  function onCellFocused(event) {
+    if (!options.enabled() || event.rowPinned || event.rowIndex === null || !event.column) return;
+    const colId = typeof event.column === "string" ? event.column : event.column.getColId();
+    const col = columnIndex.get(colId);
+    if (col === void 0) return;
+    const cell = { row: event.rowIndex, col };
+    if (sameCell(cell, active)) return;
+    select(cell, cell, cell);
+  }
+  function syncHistory() {
+    canUndo.value = undoStack.length > 0;
+    canRedo.value = redoStack.length > 0;
+  }
+  function countDirty() {
+    let count = 0;
+    for (const row of dirty.values()) count += row.size;
+    return count;
+  }
+  function syncDirty() {
+    const count = countDirty();
+    if (count === dirtyCount.value) return;
+    dirtyCount.value = count;
+    options.onDirty(count);
+  }
+  function trackDirty(changes) {
+    for (const change of changes) {
+      let row = dirty.get(change.rowId);
+      const entry = row?.get(change.colId);
+      if (row && entry) {
+        if (sameValue(entry.original, change.newValue)) {
+          row.delete(change.colId);
+          if (!row.size) dirty.delete(change.rowId);
+        }
+        continue;
+      }
+      if (!row) {
+        row = /* @__PURE__ */ new Map();
+        dirty.set(change.rowId, row);
+      }
+      row.set(change.colId, { field: change.field, original: change.oldValue });
+    }
+    syncDirty();
+  }
+  function refreshChanges(changes) {
+    if (!api) return;
+    const rowNodes = /* @__PURE__ */ new Set();
+    const colIds = /* @__PURE__ */ new Set();
+    for (const change of changes) {
+      const node = api.getRowNode(change.rowId);
+      if (node) rowNodes.add(node);
+      colIds.add(change.colId);
+    }
+    if (rowNodes.size) api.refreshCells({ rowNodes: [...rowNodes], columns: [...colIds] });
+  }
+  function commit(changes, source) {
+    if (!changes.length) return;
+    if (source !== "undo" && source !== "redo") {
+      undoStack.push(changes);
+      if (undoStack.length > HISTORY_LIMIT) undoStack.shift();
+      redoStack.length = 0;
+    }
+    syncHistory();
+    trackDirty(changes);
+    refreshChanges(changes);
+    options.onChange({ changes, source });
+  }
+  function applyWrites(writes, source, checkEditable = true) {
+    const changes = [];
+    if (!api) return changes;
+    for (const { node, column, value } of writes) {
+      if (!node.id || checkEditable && !isEditable(node, column)) continue;
+      const oldValue = readValue(node, column);
+      if (sameValue(oldValue, value)) continue;
+      if (!node.setDataValue(column, value, WRITE_SOURCE)) continue;
+      const newValue = readValue(node, column);
+      if (sameValue(oldValue, newValue)) continue;
+      changes.push({
+        rowId: node.id,
+        colId: column.getColId(),
+        field: fieldOf(column),
+        oldValue,
+        newValue
+      });
+    }
+    commit(changes, source);
+    return changes;
+  }
+  function reportInvalid(cells, source) {
+    if (cells.length) options.onInvalid({ cells, source });
+  }
+  function invalidCell(node, column, text) {
+    return { rowId: node.id ?? "", colId: column.getColId(), field: fieldOf(column), text };
+  }
+  function context() {
+    return api?.getGridOption("context");
+  }
+  function formatWithColumn(node, column, value) {
+    const colDef = column.getColDef();
+    const formatter = colDef.valueFormatter;
+    if (typeof formatter !== "function" || !api) return stringifyCellValue(value);
+    return String(
+      formatter({ api, context: context(), value, node, data: node.data, colDef, column }) ?? ""
+    );
+  }
+  function parseWithColumn(node, column, text) {
+    const colDef = column.getColDef();
+    const parser = colDef.valueParser;
+    if (typeof parser !== "function" || colDef.useValueParserForImport === false || !api)
+      return text;
+    return parser({
+      api,
+      context: context(),
+      node,
+      data: node.data,
+      oldValue: readValue(node, column),
+      newValue: text,
+      colDef,
+      column
+    });
+  }
+  function exportParams(node, column, value) {
+    return {
+      api,
+      context: context(),
+      value,
+      node,
+      column,
+      type: "clipboard",
+      parseValue: (text) => parseWithColumn(node, column, text),
+      formatValue: (input) => formatWithColumn(node, column, input)
+    };
+  }
+  function validate(text, value, colDef) {
+    if (!text.trim()) return { value, valid: true };
+    if (value === null || value === void 0) return { value, valid: false };
+    if (typeof value === "number" && Number.isNaN(value)) return { value, valid: false };
+    if (value instanceof Date && Number.isNaN(value.getTime())) return { value, valid: false };
+    const allowed = allowedValues(colDef);
+    if (!allowed) return { value, valid: true };
+    const match = allowed.find((option) => option === value || String(option) === String(value));
+    return match === void 0 ? { value, valid: false } : { value: match, valid: true };
+  }
+  function parseText(node, column, text) {
+    const fromClipboard = options.gridOptions()?.processCellFromClipboard;
+    if (fromClipboard)
+      return { value: fromClipboard(exportParams(node, column, text)), valid: true };
+    return validate(text, parseWithColumn(node, column, text), column.getColDef());
+  }
+  function emptyValue(node, column) {
+    if (typeof column.getColDef().valueParser !== "function") return null;
+    return parseWithColumn(node, column, "") ?? null;
+  }
+  function copyText(node, column) {
+    const value = readValue(node, column);
+    const forClipboard = options.gridOptions()?.processCellForClipboard;
+    if (!forClipboard) return stringifyCellValue(value);
+    return stringifyCellValue(forClipboard(exportParams(node, column, value)));
+  }
+  function eachCell(target, visit) {
+    for (let row = target.top; row <= target.bottom; row++) {
+      const node = nodeAt(row);
+      if (!node) continue;
+      for (let col = target.left; col <= target.right; col++) {
+        const column = columns[col];
+        if (column) visit(node, column, { row, col });
+      }
+    }
+  }
+  function getRangeText() {
+    if (!rect) return null;
+    const rows = [];
+    for (let row = rect.top; row <= rect.bottom; row++) {
+      const node = nodeAt(row);
+      if (!node) continue;
+      const cells = [];
+      for (let col = rect.left; col <= rect.right; col++) {
+        const column = columns[col];
+        cells.push(column ? copyText(node, column) : "");
+      }
+      rows.push(cells);
+    }
+    return formatTsv(rows);
+  }
+  function restoreFocus(element) {
+    if (element instanceof HTMLElement && element.isConnected)
+      element.focus({ preventScroll: true });
+    else focusActive();
+  }
+  function tempArea(host, value = "") {
+    const area = document.createElement("textarea");
+    area.className = "k-data-grid-clipboard";
+    area.tabIndex = -1;
+    area.setAttribute("aria-hidden", "true");
+    area.value = value;
+    host.append(area);
+    return area;
+  }
+  function copyWithElement(text) {
+    const host = options.body();
+    if (!host) return false;
+    const previous = document.activeElement;
+    const area = tempArea(host, text);
+    area.focus({ preventScroll: true });
+    area.select();
+    let copied = false;
+    try {
+      copied = document.execCommand("copy");
+    } catch {
+      copied = false;
+    }
+    area.remove();
+    restoreFocus(previous);
+    return copied;
+  }
+  async function writeClipboard(text) {
+    try {
+      await navigator.clipboard.writeText(text);
+      return true;
+    } catch {
+      return copyWithElement(text);
+    }
+  }
+  async function copyRange() {
+    const text = getRangeText();
+    if (text === null) return null;
+    const count = selectedCellCount.value;
+    if (!await writeClipboard(text)) return null;
+    options.onCopy(text);
+    options.notify("copied", count, 0);
+    return text;
+  }
+  function capturePaste() {
+    const host = options.body();
+    if (!host) return;
+    const previous = document.activeElement;
+    const area = tempArea(host);
+    let done = false;
+    const finish = (text) => {
+      if (done) return;
+      done = true;
+      area.remove();
+      restoreFocus(previous);
+      if (text) paste(text);
+    };
+    area.addEventListener("paste", (event) => {
+      stopEvent(event);
+      finish(event.clipboardData?.getData("text/plain") ?? "");
+    });
+    area.focus({ preventScroll: true });
+    setTimeout(() => finish(area.value), 100);
+  }
+  function paste(text) {
+    if (!api || !rect || text === "") return 0;
+    const block = parseTsv(text);
+    const height = block.length;
+    const width = block[0]?.length ?? 0;
+    if (!height || !width) return 0;
+    const rangeHeight = rect.bottom - rect.top + 1;
+    const rangeWidth = rect.right - rect.left + 1;
+    const tile = rangeHeight % height === 0 && rangeWidth % width === 0 && (rangeHeight > height || rangeWidth > width);
+    const target = tile ? { ...rect } : {
+      top: rect.top,
+      left: rect.left,
+      bottom: Math.min(rect.top + height - 1, rowCount() - 1),
+      right: Math.min(rect.left + width - 1, columns.length - 1)
+    };
+    const writes = [];
+    const invalid = [];
+    eachCell(target, (node, column, cell) => {
+      if (!isEditable(node, column)) return;
+      const value = block[(cell.row - target.top) % height]?.[(cell.col - target.left) % width];
+      const parsed = parseText(node, column, value ?? "");
+      if (parsed.valid) writes.push({ node, column, value: parsed.value });
+      else invalid.push(invalidCell(node, column, value ?? ""));
+    });
+    const changes = applyWrites(writes, "paste");
+    reportInvalid(invalid, "paste");
+    selectRect(target);
+    options.notify("pasted", changes.length, invalid.length);
+    return changes.length;
+  }
+  function fillArea(source, target) {
+    const height = source.bottom - source.top + 1;
+    const width = source.right - source.left + 1;
+    const writes = [];
+    const invalid = [];
+    eachCell(target, (node, column, cell) => {
+      if (!isEditable(node, column)) return;
+      const sourceNode = nodeAt(source.top + (cell.row - target.top) % height);
+      const sourceColumn = columns[source.left + (cell.col - target.left) % width];
+      if (!sourceNode || !sourceColumn) return;
+      const value = readValue(sourceNode, sourceColumn);
+      if (sourceColumn === column) {
+        writes.push({ node, column, value });
+        return;
+      }
+      const text = stringifyCellValue(value);
+      const parsed = parseText(node, column, text);
+      if (parsed.valid) writes.push({ node, column, value: parsed.value });
+      else invalid.push(invalidCell(node, column, text));
+    });
+    const changes = applyWrites(writes, "fill");
+    reportInvalid(invalid, "fill");
+    options.notify("filled", changes.length, invalid.length);
+    return changes.length;
+  }
+  function fillDown() {
+    if (!rect) return 0;
+    if (rect.top === rect.bottom) {
+      if (rect.top === 0) return 0;
+      return fillArea({ ...rect, top: rect.top - 1, bottom: rect.top - 1 }, rect);
+    }
+    return fillArea({ ...rect, bottom: rect.top }, { ...rect, top: rect.top + 1 });
+  }
+  function fillRight() {
+    if (!rect) return 0;
+    if (rect.left === rect.right) {
+      if (rect.left === 0) return 0;
+      return fillArea({ ...rect, left: rect.left - 1, right: rect.left - 1 }, rect);
+    }
+    return fillArea({ ...rect, right: rect.left }, { ...rect, left: rect.left + 1 });
+  }
+  function clearCells() {
+    if (!rect) return 0;
+    const writes = [];
+    eachCell(rect, (node, column) => {
+      if (isEditable(node, column))
+        writes.push({ node, column, value: emptyValue(node, column) });
+    });
+    const changes = applyWrites(writes, "clear");
+    options.notify("cleared", changes.length, 0);
+    return changes.length;
+  }
+  function setRangeValue(value, settings = {}) {
+    if (!rect) return 0;
+    const writes = [];
+    const invalid = [];
+    eachCell(rect, (node, column) => {
+      if (!isEditable(node, column)) return;
+      if (!settings.parse || typeof value !== "string") {
+        writes.push({ node, column, value });
+        return;
+      }
+      const parsed = parseText(node, column, value);
+      if (parsed.valid) writes.push({ node, column, value: parsed.value });
+      else invalid.push(invalidCell(node, column, value));
+    });
+    const changes = applyWrites(writes, "bulk");
+    reportInvalid(invalid, "bulk");
+    options.notify("updated", changes.length, invalid.length);
+    return changes.length;
+  }
+  function selectChanges(changes) {
+    if (!api || !changes.length) return;
+    let target = null;
+    for (const change of changes) {
+      const row = api.getRowNode(change.rowId)?.rowIndex;
+      const col = columnIndex.get(change.colId);
+      if (row === null || row === void 0 || col === void 0) return;
+      target = target ? {
+        top: Math.min(target.top, row),
+        bottom: Math.max(target.bottom, row),
+        left: Math.min(target.left, col),
+        right: Math.max(target.right, col)
+      } : { top: row, bottom: row, left: col, right: col };
+    }
+    if (!target) return;
+    selectRect(target);
+    ensureVisible({ row: target.top, col: target.left });
+  }
+  function replay(changes, source) {
+    if (!api) return [];
+    const writes = [];
+    const list = source === "undo" ? [...changes].reverse() : changes;
+    for (const change of list) {
+      const node = api.getRowNode(change.rowId);
+      const column = api.getColumn(change.colId);
+      if (!node || !column) continue;
+      writes.push({ node, column, value: source === "undo" ? change.oldValue : change.newValue });
+    }
+    const applied = applyWrites(writes, source, false);
+    selectChanges(applied);
+    options.notify(source === "undo" ? "undone" : "redone", applied.length, 0);
+    return applied;
+  }
+  function undo() {
+    const changes = undoStack.pop();
+    if (!changes) return false;
+    replay(changes, "undo");
+    redoStack.push(changes);
+    syncHistory();
+    return true;
+  }
+  function redo() {
+    const changes = redoStack.pop();
+    if (!changes) return false;
+    replay(changes, "redo");
+    undoStack.push(changes);
+    syncHistory();
+    return true;
+  }
+  function clearHistory() {
+    undoStack.length = 0;
+    redoStack.length = 0;
+    syncHistory();
+  }
+  function getDirtyCells() {
+    const cells = [];
+    for (const [rowId, row] of dirty)
+      for (const [colId, entry] of row)
+        cells.push({ rowId, colId, field: entry.field, originalValue: entry.original });
+    return cells;
+  }
+  function clearDirty(rowIds) {
+    if (!dirty.size) return;
+    if (rowIds) for (const id of rowIds) dirty.delete(id);
+    else dirty.clear();
+    refreshRendered();
+    syncDirty();
+  }
+  function ensureVisible(cell) {
+    if (!api) return;
+    api.ensureIndexVisible(cell.row);
+    const column = columns[cell.col];
+    if (column) api.ensureColumnVisible(column);
+  }
+  function extend(delta, toEdge) {
+    if (!anchor || !corner || !active) return;
+    const lastRow = rowCount() - 1;
+    const lastCol = columns.length - 1;
+    if (lastRow < 0 || lastCol < 0) return;
+    const next = toEdge ? {
+      row: delta.row < 0 ? 0 : delta.row > 0 ? lastRow : corner.row,
+      col: delta.col < 0 ? 0 : delta.col > 0 ? lastCol : corner.col
+    } : {
+      row: clampNumber(corner.row + delta.row, 0, lastRow),
+      col: clampNumber(corner.col + delta.col, 0, lastCol)
+    };
+    select(anchor, next, active);
+    ensureVisible(next);
+  }
+  function selectAll() {
+    const lastRow = rowCount() - 1;
+    const lastCol = columns.length - 1;
+    if (lastRow < 0 || lastCol < 0) return;
+    const start = { row: 0, col: 0 };
+    select(start, { row: lastRow, col: lastCol }, active ?? start, !active);
+  }
+  function selectRange(input) {
+    const lastRow = rowCount() - 1;
+    if (lastRow < 0) return;
+    const startCol = columnIndex.get(input.startColumn);
+    const endCol = columnIndex.get(input.endColumn ?? input.startColumn);
+    if (startCol === void 0 || endCol === void 0) return;
+    const start = { row: clampNumber(input.startRowIndex, 0, lastRow), col: startCol };
+    const end = {
+      row: clampNumber(input.endRowIndex ?? input.startRowIndex, 0, lastRow),
+      col: endCol
+    };
+    select(start, end, start, true);
+    ensureVisible(start);
+  }
+  function getSelectedCells() {
+    const cells = [];
+    if (!rect) return cells;
+    eachCell(rect, (node, column, cell) => {
+      cells.push({
+        rowId: node.id ?? "",
+        rowIndex: cell.row,
+        colId: column.getColId(),
+        field: fieldOf(column),
+        value: readValue(node, column),
+        data: node.data,
+        editable: isEditable(node, column)
+      });
+    });
+    return cells;
+  }
+  function isEditing() {
+    return (api?.getEditingCells().length ?? 0) > 0;
+  }
+  function cellFromTarget(target) {
+    const host = options.body();
+    if (!(target instanceof Element) || !host) return null;
+    const element = target.closest(".ag-cell");
+    if (!element || !host.contains(element)) return null;
+    const col = columnIndex.get(element.getAttribute("col-id") ?? "");
+    const row = Number(element.closest(".ag-row")?.getAttribute("row-index") ?? Number.NaN);
+    if (col === void 0 || !Number.isInteger(row)) return null;
+    return { element, cell: { row, col } };
+  }
+  function hitsFillHandle(element, event) {
+    if (!element.classList.contains("is-fill-corner")) return false;
+    const box = element.getBoundingClientRect();
+    const rtl = getComputedStyle(element).direction === "rtl";
+    const inX = rtl ? event.clientX <= box.left + HANDLE_HIT : event.clientX >= box.right - HANDLE_HIT;
+    return inX && event.clientY >= box.bottom - HANDLE_HIT;
+  }
+  function endDrag() {
+    window.removeEventListener("pointerup", endDrag);
+    const mode = drag;
+    drag = null;
+    if (mode !== "fill" || !fillOrigin || !rect) return;
+    const origin = fillOrigin;
+    const corners = fillCorners;
+    fillOrigin = null;
+    fillCorners = null;
+    filling.value = false;
+    if (rect.bottom > origin.bottom)
+      fillArea(origin, { ...origin, top: origin.bottom + 1, bottom: rect.bottom });
+    else if (corners && active) select(corners[0], corners[1], active);
+  }
+  function startDrag(mode) {
+    drag = mode;
+    window.addEventListener("pointerup", endDrag);
+  }
+  function consume(event) {
+    stopEvent(event);
+    consumedPointer = true;
+  }
+  function onMouseDown(event) {
+    if (!consumedPointer) return;
+    consumedPointer = false;
+    stopEvent(event);
+  }
+  function onPointerDown(event) {
+    consumedPointer = false;
+    if (!api || !options.enabled() || event.button !== 0 || !event.isPrimary) return;
+    const hit = cellFromTarget(event.target);
+    if (!hit || hit.element.classList.contains("ag-cell-inline-editing")) return;
+    if (rect && anchor && corner && hitsFillHandle(hit.element, event)) {
+      consume(event);
+      fillOrigin = { ...rect };
+      fillCorners = [anchor, corner];
+      filling.value = true;
+      startDrag("fill");
+      return;
+    }
+    if (event.shiftKey && anchor && active) {
+      consume(event);
+      select(anchor, hit.cell, active);
+      startDrag("select");
+      return;
+    }
+    select(hit.cell, hit.cell, hit.cell);
+    startDrag("select");
+  }
+  function onPointerOver(event) {
+    if (!drag || !anchor || !active) return;
+    const hit = cellFromTarget(event.target);
+    if (!hit) return;
+    if (drag === "fill" && fillOrigin) {
+      const row = Math.max(hit.cell.row, fillOrigin.bottom);
+      select(
+        { row: fillOrigin.top, col: fillOrigin.left },
+        { row, col: fillOrigin.right },
+        active
+      );
+      return;
+    }
+    select(anchor, hit.cell, active);
+  }
+  function runShortcut(letter, shift) {
+    switch (letter) {
+      case "a":
+        selectAll();
+        return true;
+      case "c":
+        void copyRange();
+        return true;
+      case "d":
+        fillDown();
+        return true;
+      case "r":
+        fillRight();
+        return true;
+      case "z":
+        if (shift) redo();
+        else undo();
+        return true;
+      case "y":
+        redo();
+        return true;
+      default:
+        return false;
+    }
+  }
+  function onKeyDown(event) {
+    if (!api || !options.enabled() || event.defaultPrevented) return;
+    const target = event.target;
+    if (!(target instanceof Element) || isTextInput(target)) return;
+    if (!target.closest(".ag-cell") || isEditing()) return;
+    const mod = isApplePlatform() ? event.metaKey : event.ctrlKey;
+    const arrow = ARROWS[event.key];
+    if (mod && !event.altKey) {
+      if (arrow && event.shiftKey) {
+        stopEvent(event);
+        extend(arrow, true);
+        return;
+      }
+      const letter = shortcutLetter(event);
+      if (letter === "v") {
+        event.stopPropagation();
+        if (rect) capturePaste();
+        return;
+      }
+      if (runShortcut(letter, event.shiftKey)) stopEvent(event);
+      return;
+    }
+    if (event.altKey || event.metaKey || event.ctrlKey) return;
+    if (event.key === "Delete" || event.key === "Backspace") {
+      stopEvent(event);
+      clearCells();
+      return;
+    }
+    if (arrow && event.shiftKey) {
+      stopEvent(event);
+      extend(arrow, false);
+      return;
+    }
+    if (event.key === "Escape" && active && isMulti()) select(active, active, active);
+  }
+  function onEditingStopped(event) {
+    if (!options.enabled() || !event.node.id) return;
+    const newValue = readValue(event.node, event.column);
+    if (sameValue(event.oldValue, newValue)) return;
+    commit(
+      [
+        {
+          rowId: event.node.id,
+          colId: event.column.getColId(),
+          field: fieldOf(event.column),
+          oldValue: event.oldValue,
+          newValue
+        }
+      ],
+      "edit"
+    );
+  }
+  function containsCell(rowIndex, colId) {
+    const col = columnIndex.get(colId);
+    return !!rect && isMulti() && rowIndex !== null && col !== void 0 && rowIndex >= rect.top && rowIndex <= rect.bottom && col >= rect.left && col <= rect.right;
+  }
+  function attach(next) {
+    api = next;
+    next.addEventListener("cellFocused", onCellFocused);
+    next.addEventListener("cellEditingStopped", onEditingStopped);
+    next.addEventListener("displayedColumnsChanged", syncColumns);
+    next.addEventListener("modelUpdated", onModelUpdated);
+    syncColumns();
+  }
+  function detach() {
+    window.removeEventListener("pointerup", endDrag);
+    const current = api;
+    api = null;
+    if (!current || current.isDestroyed()) return;
+    current.removeEventListener("cellFocused", onCellFocused);
+    current.removeEventListener("cellEditingStopped", onEditingStopped);
+    current.removeEventListener("displayedColumnsChanged", syncColumns);
+    current.removeEventListener("modelUpdated", onModelUpdated);
+  }
+  function disable() {
+    reset();
+    clearHistory();
+    clearDirty();
+  }
+  const methods = {
+    getRange: () => toRange(),
+    getSelectedCells,
+    selectRange,
+    selectAll,
+    clearRange: reset,
+    setRangeValue,
+    copyRange,
+    paste,
+    fillDown,
+    fillRight,
+    clearCells,
+    undo,
+    redo,
+    clearHistory,
+    getDirtyCells,
+    clearDirty
+  };
+  const slotProps = computed(() => ({
+    ...methods,
+    range: range.value,
+    selectedCellCount: selectedCellCount.value,
+    dirtyCount: dirtyCount.value,
+    canUndo: canUndo.value,
+    canRedo: canRedo.value
+  }));
+  return {
+    classRules,
+    methods,
+    slotProps,
+    filling,
+    attach,
+    detach,
+    disable,
+    containsCell,
+    copyRange,
+    onKeyDown,
+    onMouseDown,
+    onPointerDown,
+    onPointerOver
+  };
+}