@nu-grid/nuxt 0.1.1

package/dist/runtime/composables/_internal/useNuGridCellEditing.js

@@ -0,0 +1,1243 @@
+import { FlexRender } from "@tanstack/vue-table";
+import { computed, h, nextTick, onMounted, onUnmounted, ref, resolveComponent } from "vue";
+import { textCellType } from "../../cell-types/index.js";
+import { getDefaults, usePropWithDefault } from "../../config/_internal/index.js";
+import { splitPath, validateFieldValue } from "../../utils/standardSchema.js";
+import { useNuGridCellTypeRegistry } from "../useNuGridCellTypeRegistry.js";
+import { useNuGridKeyboardNavigation } from "./useNuGridKeyboardNavigation.js";
+import { useNuGridScroll } from "./useNuGridScroll.js";
+const validationDefaults = getDefaults("validation");
+export const defaultValidationIcon = validationDefaults.icon;
+function resolveValidationConfig(validation) {
+  if (!validation) return null;
+  return {
+    schema: validation.schema ?? null,
+    rowRules: validation.rowRules ?? [],
+    validateOn: validation.validateOn ?? validationDefaults.validateOn,
+    showErrors: validation.showErrors ?? validationDefaults.showErrors,
+    icon: validation.icon ?? validationDefaults.icon,
+    onInvalid: validation.onInvalid ?? validationDefaults.onInvalid,
+    validateOnAddRow: validation.validateOnAddRow ?? validationDefaults.validateOnAddRow
+  };
+}
+export function useNuGridCellEditing(props, tableApi, data, rows, tableRef, rootRef, focusFns, interactionRouter, emit, navigableRows, externalEditingCell, addRowContext, eventEmitter) {
+  const editingCell = externalEditingCell ?? ref(null);
+  const editingValue = ref(null);
+  const isNavigating = ref(false);
+  const shouldFocusEditor = ref(false);
+  const cellSelector = '[data-row-id="$ID"] [data-cell-index="$COL"]';
+  const validationError = ref(null);
+  const validationPending = ref(false);
+  let validationRunId = 0;
+  const hasBeenPunished = ref(false);
+  const hasAttemptedClickAway = ref(false);
+  const isRowLevelValidationError = ref(false);
+  let unregisterInteraction = null;
+  let unregisterDoubleClick = null;
+  let unregisterOutsidePointer = null;
+  const typeRegistry = useNuGridCellTypeRegistry(
+    props.cellTypes ? computed(() => props.cellTypes) : void 0
+  );
+  const { scrollManager } = useNuGridScroll(tableApi);
+  const editingEnabled = usePropWithDefault(props, "editing", "enabled");
+  const startClicks = usePropWithDefault(props, "editing", "startClicks");
+  const startKeys = usePropWithDefault(props, "editing", "startKeys");
+  const validationConfig = computed(() => resolveValidationConfig(props.validation));
+  const showValidationErrors = computed(
+    () => validationConfig.value?.showErrors ?? validationDefaults.showErrors
+  );
+  const validationIcon = computed(() => validationConfig.value?.icon ?? defaultValidationIcon);
+  const pathCache = /* @__PURE__ */ new Map();
+  const keyboardNav = useNuGridKeyboardNavigation(props, tableApi);
+  const { multiRowEnabled, multiRowCount, getVisualRowForColumn, findColumnInVisualRow } = keyboardNav;
+  const rowValidationErrors = ref(
+    /* @__PURE__ */ new Map()
+  );
+  function runRowValidation(rowData, candidateField, candidateValue) {
+    const config = validationConfig.value;
+    if (!config || config.rowRules.length === 0) {
+      return { valid: true };
+    }
+    const candidateRow = candidateField ? { ...rowData, [candidateField]: candidateValue } : rowData;
+    for (const rule of config.rowRules) {
+      const result = rule(candidateRow);
+      if (!result.valid) {
+        return result;
+      }
+    }
+    return { valid: true };
+  }
+  function hasRowValidationError(rowId) {
+    return rowValidationErrors.value.has(rowId);
+  }
+  function hasCellValidationError(rowId, columnId) {
+    const rowError = rowValidationErrors.value.get(rowId);
+    if (!rowError) return false;
+    if (!rowError.failedFields || rowError.failedFields.length === 0) return true;
+    return rowError.failedFields.includes(columnId);
+  }
+  function getRowValidationError(rowId) {
+    return rowValidationErrors.value.get(rowId)?.message ?? null;
+  }
+  function clearRowValidationError(rowId) {
+    if (rowValidationErrors.value.has(rowId)) {
+      const newMap = new Map(rowValidationErrors.value);
+      newMap.delete(rowId);
+      rowValidationErrors.value = newMap;
+    }
+  }
+  function setRowValidationError(rowId, message, failedFields) {
+    const newMap = new Map(rowValidationErrors.value);
+    newMap.set(rowId, { message, failedFields });
+    rowValidationErrors.value = newMap;
+  }
+  function runSchemaValidation(row, cell, value) {
+    const config = validationConfig.value;
+    if (!config || !config.schema) return true;
+    const accessorKey = "accessorKey" in cell.column.columnDef && cell.column.columnDef.accessorKey ? cell.column.columnDef.accessorKey : cell.column.id;
+    const fieldPath = (() => {
+      const cached = pathCache.get(accessorKey);
+      if (cached) return cached;
+      const resolved = splitPath(accessorKey);
+      pathCache.set(accessorKey, resolved);
+      return resolved;
+    })();
+    const schemaResult = validateFieldValue(
+      config.schema,
+      fieldPath,
+      value,
+      row.original
+    );
+    const handleSchemaResult = (result) => {
+      if (!result.valid) {
+        validationError.value = result.message || "Validation failed";
+        return false;
+      }
+      validationError.value = null;
+      return true;
+    };
+    if (schemaResult instanceof Promise) {
+      const runId = ++validationRunId;
+      validationPending.value = true;
+      schemaResult.then((result) => {
+        if (runId !== validationRunId) return;
+        validationPending.value = false;
+        handleSchemaResult(result);
+      }).catch(() => {
+        if (runId !== validationRunId) return;
+        validationPending.value = false;
+        validationError.value = "Validation failed";
+      });
+      return true;
+    }
+    validationPending.value = false;
+    return handleSchemaResult(schemaResult);
+  }
+  function renderEditor(editorConfig, context, additionalProps) {
+    const getCurrentEditingContext2 = () => {
+      if (!editingCell.value) return null;
+      const rowsList = navigableRows?.value ?? rows.value;
+      const currentRow = rowsList.find((r) => r.id === editingCell.value.rowId);
+      if (!currentRow) return null;
+      const currentCell = currentRow.getAllCells().find((c) => c.column.id === editingCell.value.columnId);
+      if (!currentCell) return null;
+      return { row: currentRow, cell: currentCell };
+    };
+    if (typeof editorConfig === "function") {
+      return editorConfig(context);
+    }
+    let componentToRender;
+    let componentProps = {};
+    if (typeof editorConfig === "string") {
+      componentToRender = resolveComponent(editorConfig);
+    } else if (typeof editorConfig === "object" && "component" in editorConfig) {
+      componentToRender = typeof editorConfig.component === "string" ? resolveComponent(editorConfig.component) : editorConfig.component;
+      componentProps = editorConfig.props || {};
+    } else {
+      componentToRender = editorConfig;
+    }
+    const shouldShowPopover = showValidationErrors.value;
+    return h(componentToRender, {
+      "modelValue": context.getValue(),
+      "cell": context.cell,
+      "row": context.row,
+      "isNavigating": isNavigating.value,
+      "shouldFocus": shouldFocusEditor.value,
+      "validationError": validationError.value,
+      "showValidationErrors": shouldShowPopover,
+      "interactionRouter": interactionRouter,
+      ...componentProps,
+      ...additionalProps,
+      "onUpdate:modelValue": (value) => {
+        context.setValue(value);
+        const config = validationConfig.value;
+        if (!config) return;
+        const validateOn = config.validateOn;
+        if (validateOn === "change") {
+          runSchemaValidation(context.row, context.cell, value);
+        } else if (validateOn === "reward" && hasBeenPunished.value) {
+          const isValid = runSchemaValidation(context.row, context.cell, value);
+          if (isValid) {
+            validationError.value = null;
+          }
+        }
+      },
+      "onUpdate:isNavigating": (value) => {
+        isNavigating.value = value;
+      },
+      "onStopEditing": (direction) => {
+        if (direction && scrollManager.isProcessingScroll) {
+          isNavigating.value = false;
+          return;
+        }
+        context.stopEditing(direction);
+      },
+      "onCancelEditing": () => {
+        const ctx = getCurrentEditingContext2();
+        const hadError = !!validationError.value;
+        if (ctx && eventEmitter?.cellEditingCancelled) {
+          eventEmitter.cellEditingCancelled({
+            row: ctx.row,
+            column: ctx.cell.column,
+            value: editingValue.value
+          });
+        }
+        validationRunId++;
+        validationPending.value = false;
+        editingCell.value = null;
+        editingValue.value = null;
+        validationError.value = null;
+        hasBeenPunished.value = false;
+        hasAttemptedClickAway.value = false;
+        if (ctx) {
+          if (hadError) {
+            nextTick(() => restoreFocus(ctx.row, ctx.cell));
+            setTimeout(() => restoreFocus(ctx.row, ctx.cell), 0);
+          } else {
+            restoreFocus(ctx.row, ctx.cell);
+          }
+        }
+      }
+    });
+  }
+  function isCellEditable(row, cell) {
+    if (editingEnabled.value === false) {
+      return false;
+    }
+    const columnDef = cell.column.columnDef;
+    const isAddRow = addRowContext?.isAddRowRow(row) ?? false;
+    if (isAddRow && columnDef.showNew === false) {
+      return false;
+    }
+    if (isAddRow) {
+      const groupingState = tableApi.getState().grouping || [];
+      if (groupingState.includes(cell.column.id)) {
+        return false;
+      }
+    }
+    if (columnDef.enableEditing !== void 0) {
+      if (typeof columnDef.enableEditing === "function") {
+        return columnDef.enableEditing(row);
+      }
+      return columnDef.enableEditing;
+    }
+    return true;
+  }
+  function startEditing(row, cell, initialValue, options) {
+    const wasNavigating = isNavigating.value;
+    if (wasNavigating && scrollManager.isProcessingScroll) {
+      isNavigating.value = false;
+      return;
+    }
+    if (editingCell.value?.rowId === row.id && editingCell.value?.columnId === cell.column.id && initialValue === void 0) {
+      return;
+    }
+    if (!isCellEditable(row, cell)) {
+      return;
+    }
+    shouldFocusEditor.value = false;
+    editingCell.value = {
+      rowId: row.id,
+      columnId: cell.column.id
+    };
+    editingValue.value = initialValue !== void 0 ? initialValue : cell.getValue();
+    if (eventEmitter?.cellEditingStarted) {
+      eventEmitter.cellEditingStarted({
+        row,
+        column: cell.column,
+        value: editingValue.value
+      });
+    }
+    const rowError = rowValidationErrors.value.get(row.id);
+    if (rowError && isRowLevelValidationError.value) {
+      const accessorKey = "accessorKey" in cell.column.columnDef && cell.column.columnDef.accessorKey ? cell.column.columnDef.accessorKey : cell.column.id;
+      const isFailedField = rowError.failedFields.length === 0 || rowError.failedFields.includes(accessorKey);
+      if (isFailedField) {
+        validationError.value = rowError.message;
+        hasBeenPunished.value = true;
+      } else {
+        validationError.value = null;
+        hasBeenPunished.value = false;
+      }
+    } else {
+      validationError.value = null;
+      hasBeenPunished.value = false;
+    }
+    hasAttemptedClickAway.value = false;
+    if (wasNavigating) {
+      if (scrollManager.isProcessingScroll) {
+        isNavigating.value = false;
+        return;
+      }
+      scrollManager.setProcessing(true);
+    }
+    const rowsList = navigableRows?.value ?? rows.value;
+    const rowIndex = options?.rowIndex !== void 0 ? options.rowIndex : rowsList.findIndex((r) => r.id === row.id);
+    const cellIndex = options?.cellIndex !== void 0 ? options.cellIndex : row.getVisibleCells().findIndex((c) => c.id === cell.id);
+    if (rowIndex !== -1 && cellIndex !== -1) {
+      const currentSuppressOutline = focusFns.focusedCell.value?.suppressOutline;
+      focusFns.focusedCell.value = {
+        rowIndex,
+        columnIndex: cellIndex,
+        ...currentSuppressOutline && { suppressOutline: true }
+      };
+    }
+    if (rowIndex !== -1 && cellIndex !== -1 && tableRef.value) {
+      const cellElement = focusFns.getCellElement(row.id, cellIndex);
+      const rootElement = rootRef.value && "$el" in rootRef.value ? rootRef.value.$el : rootRef.value;
+      if (cellElement && rootElement) {
+        focusFns.scrollToCellAndFocus({
+          cellElement,
+          rowId: row.id,
+          rowIndex,
+          columnIndex: cellIndex,
+          behavior: wasNavigating ? "instant" : "smooth",
+          onComplete: () => {
+            shouldFocusEditor.value = true;
+            if (wasNavigating) {
+              scrollManager.setProcessing(false);
+            }
+          }
+        });
+      } else {
+        shouldFocusEditor.value = true;
+        if (wasNavigating) {
+          scrollManager.setProcessing(false);
+        }
+      }
+    } else {
+      shouldFocusEditor.value = true;
+      if (wasNavigating) {
+        scrollManager.setProcessing(false);
+      }
+    }
+  }
+  function isEditingCell(row, columnId) {
+    return editingCell.value?.rowId === row.id && editingCell.value?.columnId === columnId;
+  }
+  function stopEditing(row, cell, newValue, moveDirection, options) {
+    const shouldRestoreFocus = options?.restoreFocus !== false;
+    const isClickAway = options?.isClickAway === true;
+    const config = validationConfig.value;
+    const onInvalid = config?.onInvalid ?? validationDefaults.onInvalid;
+    if (onInvalid === "block" && hasAttemptedClickAway.value && !isClickAway) {
+      return;
+    }
+    const navDirection = moveDirection;
+    const oldValue = cell.getValue();
+    let valueToSave = newValue;
+    const isAddRow = addRowContext?.isAddRowRow(row);
+    const isCurrentValueEmpty = newValue === void 0 || newValue === null || newValue === "";
+    const isVerticalNav = navDirection === "up" || navDirection === "down";
+    if (isAddRow && isCurrentValueEmpty && isVerticalNav) {
+      const rowsList = navigableRows?.value ?? rows.value;
+      const currentRowIndex = rowsList.findIndex((r) => r.id === row.id);
+      editingCell.value = null;
+      editingValue.value = null;
+      validationError.value = null;
+      hasBeenPunished.value = false;
+      hasAttemptedClickAway.value = false;
+      addRowContext.resetAddRow(row);
+      if (navDirection === "up" || navDirection === "down") {
+        isNavigating.value = true;
+        const targetRowIndex = navDirection === "up" ? currentRowIndex - 1 : currentRowIndex + 1;
+        const freshRowsList = navigableRows?.value ?? rows.value;
+        if (targetRowIndex >= 0 && targetRowIndex < freshRowsList.length) {
+          const targetRow = freshRowsList[targetRowIndex];
+          if (targetRow) {
+            const targetCells = targetRow.getVisibleCells();
+            const targetCellIdx = targetCells.findIndex((c) => c.column.id === cell.column.id);
+            const targetCell = targetCellIdx !== -1 ? targetCells[targetCellIdx] : null;
+            if (targetCell && isCellEditable(targetRow, targetCell)) {
+              nextTick(() => {
+                startEditing(targetRow, targetCell, void 0, {
+                  rowIndex: targetRowIndex,
+                  cellIndex: targetCellIdx
+                });
+                isNavigating.value = false;
+              });
+              return;
+            }
+          }
+        }
+        isNavigating.value = false;
+      }
+      return;
+    }
+    const visibleCells = row.getVisibleCells();
+    const editableCellIndices = visibleCells.map((c, idx) => ({ c, idx })).filter(({ c }) => isCellEditable(row, c));
+    const lastEditableIndex = editableCellIndices[editableCellIndices.length - 1]?.idx ?? visibleCells.length - 1;
+    const currentCellIndex = visibleCells.findIndex((c) => c.id === cell.id);
+    const columnDef = cell.column.columnDef;
+    const cellDataType = columnDef.cellDataType || "text";
+    const plugin = typeRegistry.getCellType(cellDataType);
+    if (plugin?.validation) {
+      const pluginContext = {
+        cell,
+        row,
+        columnDef,
+        column: cell.column,
+        getValue: () => newValue,
+        isFocused: false,
+        canEdit: true,
+        data: data.value,
+        tableApi,
+        startEditing: (initialValue) => startEditing(row, cell, initialValue),
+        stopEditing: (value, dir) => stopEditing(row, cell, value, dir),
+        emitChange: (oldVal, newVal) => {
+          emit({ row, column: cell.column, oldValue: oldVal, newValue: newVal });
+        }
+      };
+      const validationResult = plugin.validation(newValue, pluginContext);
+      if (!validationResult.valid) {
+        if (onInvalid === "revert") {
+          valueToSave = oldValue;
+        } else {
+          validationError.value = validationResult.message || "Invalid value";
+          return;
+        }
+      }
+    }
+    if (config && config.validateOn !== "change") {
+      const isValid = runSchemaValidation(row, cell, valueToSave);
+      if (!isValid) {
+        if (onInvalid === "revert") {
+          valueToSave = oldValue;
+          validationError.value = null;
+        } else {
+          isRowLevelValidationError.value = false;
+          if (handleValidationFailure(config, isClickAway)) return;
+        }
+      }
+    }
+    const accessorKey = "accessorKey" in cell.column.columnDef && cell.column.columnDef.accessorKey ? cell.column.columnDef.accessorKey : cell.column.id;
+    const rowValidationResult = runRowValidation(row.original, accessorKey, valueToSave);
+    if (!rowValidationResult.valid) {
+      if (onInvalid === "revert") {
+        valueToSave = oldValue;
+        validationError.value = null;
+      } else {
+        setRowValidationError(
+          row.id,
+          rowValidationResult.message || "Row validation failed",
+          rowValidationResult.failedFields || [accessorKey]
+        );
+        validationError.value = rowValidationResult.message || "Row validation failed";
+        isRowLevelValidationError.value = true;
+        const isHorizontalNavigation = navDirection === "next" || navDirection === "previous";
+        if (isHorizontalNavigation) {
+          const cells = row.getVisibleCells();
+          let hasEditableCellInDirection = false;
+          if (navDirection === "next") {
+            for (let i = currentCellIndex + 1; i < cells.length; i++) {
+              const candidateCell = cells[i];
+              if (candidateCell && isCellEditable(row, candidateCell)) {
+                hasEditableCellInDirection = true;
+                break;
+              }
+            }
+          } else {
+            for (let i = currentCellIndex - 1; i >= 0; i--) {
+              const candidateCell = cells[i];
+              if (candidateCell && isCellEditable(row, candidateCell)) {
+                hasEditableCellInDirection = true;
+                break;
+              }
+            }
+          }
+          if (hasEditableCellInDirection) {
+            if (config?.validateOn === "reward") {
+              hasBeenPunished.value = true;
+            }
+          } else {
+            if (config && handleValidationFailure(config, isClickAway))
+              return;
+          }
+        } else {
+          if (config && handleValidationFailure(config, isClickAway))
+            return;
+        }
+      }
+    } else {
+      clearRowValidationError(row.id);
+      isRowLevelValidationError.value = false;
+      validationError.value = null;
+    }
+    const coerceToOriginalType = (original, value) => {
+      if (value === null || value === void 0) return value;
+      if (original === null || original === void 0) return value;
+      const originalType = typeof original;
+      const valueType = typeof value;
+      if (originalType === valueType) return value;
+      if (originalType === "number" && valueType === "string") {
+        const num = Number(value);
+        return Number.isNaN(num) ? value : num;
+      }
+      if (originalType === "boolean" && valueType === "string") {
+        if (value === "true") return true;
+        if (value === "false") return false;
+        return value;
+      }
+      return value;
+    };
+    const coercedValue = coerceToOriginalType(oldValue, valueToSave);
+    if (oldValue !== coercedValue && cell.column.columnDef.cellDataType !== "selection") {
+      if (plugin?.onValueChanged) {
+        const pluginContext = {
+          cell,
+          row,
+          columnDef,
+          column: cell.column,
+          getValue: () => coercedValue,
+          isFocused: false,
+          canEdit: true,
+          data: data.value,
+          tableApi,
+          startEditing: (initialValue) => startEditing(row, cell, initialValue),
+          stopEditing: (value, dir) => stopEditing(row, cell, value, dir),
+          emitChange: (oldVal, newVal) => {
+            emit({ row, column: cell.column, oldValue: oldVal, newValue: newVal });
+          }
+        };
+        plugin.onValueChanged(oldValue, coercedValue, pluginContext);
+      }
+      emit({
+        row,
+        column: cell.column,
+        oldValue,
+        newValue: coercedValue
+      });
+      const rowIndex = data.value.findIndex((r, index) => {
+        return tableApi.options.getRowId?.(r, index) === row.id || r === row.original;
+      });
+      const accessorKey2 = "accessorKey" in cell.column.columnDef && cell.column.columnDef.accessorKey ? cell.column.columnDef.accessorKey : void 0;
+      const fallbackKey = !accessorKey2 ? cell.column.id : void 0;
+      const assignValue = (target) => {
+        if (accessorKey2) {
+          target[accessorKey2] = coercedValue;
+        } else if (fallbackKey) {
+          target[fallbackKey] = coercedValue;
+        }
+      };
+      if (rowIndex !== -1) {
+        assignValue(data.value[rowIndex]);
+      } else if (addRowContext?.isAddRowRow(row)) {
+        assignValue(row.original);
+      }
+      const valuesCache = row._valuesCache;
+      if (valuesCache) {
+        if (typeof valuesCache.clear === "function") {
+          valuesCache.clear();
+        } else if (typeof valuesCache === "object") {
+          delete valuesCache[cell.column.id];
+        }
+      }
+      data.value = [...data.value];
+    }
+    let shouldFocusNewAddRowAfterFinalize = false;
+    let groupIdToFocus = null;
+    if (isAddRow && addRowContext) {
+      const currentIndex = visibleCells.findIndex((c) => c.id === cell.id);
+      const isLastEditable = currentIndex === lastEditableIndex;
+      const shouldFinalizeAfterNav = navDirection === "down" || navDirection === "next" && isLastEditable || navDirection === void 0 && isLastEditable;
+      if (shouldFinalizeAfterNav) {
+        const parentId = row.parentId;
+        groupIdToFocus = parentId || null;
+        const result = addRowContext.finalizeAddRow(row);
+        if (!result.success) {
+          validationError.value = result.messages?.[0] || "Invalid value";
+          if (!navDirection) {
+            return;
+          }
+        } else {
+          if ((navDirection === "next" || navDirection === void 0) && isLastEditable) {
+            shouldFocusNewAddRowAfterFinalize = true;
+          }
+        }
+      }
+    }
+    const findEditableInRow = (targetRow, startIndex, direction) => {
+      const cells = targetRow.getVisibleCells();
+      if (direction === "next") {
+        for (let i = startIndex + 1; i < cells.length; i++) {
+          const candidate = cells[i];
+          if (candidate && isCellEditable(targetRow, candidate))
+            return { cell: candidate, index: i };
+        }
+      } else {
+        for (let i = startIndex - 1; i >= 0; i--) {
+          const candidate = cells[i];
+          if (candidate && isCellEditable(targetRow, candidate))
+            return { cell: candidate, index: i };
+        }
+      }
+      return null;
+    };
+    if (navDirection) {
+      isNavigating.value = true;
+      const rowsList = navigableRows?.value ?? rows.value;
+      const currentRowIndex = rowsList.findIndex((r) => r.id === row.id);
+      if (shouldFocusNewAddRowAfterFinalize) {
+        nextTick(() => {
+          const nextRowsList = navigableRows?.value ?? rows.value;
+          const newAddRow = groupIdToFocus ? nextRowsList.find(
+            (r) => addRowContext?.isAddRowRow(r) && r.parentId === groupIdToFocus
+          ) : nextRowsList.find((r) => addRowContext?.isAddRowRow(r));
+          if (newAddRow) {
+            const firstEditableCell = newAddRow.getVisibleCells().find((c) => isCellEditable(newAddRow, c));
+            if (firstEditableCell) {
+              startEditing(newAddRow, firstEditableCell);
+              isNavigating.value = false;
+              return;
+            }
+          }
+          editingCell.value = null;
+          editingValue.value = null;
+          isNavigating.value = false;
+          hasAttemptedClickAway.value = false;
+          if (shouldRestoreFocus) {
+            restoreFocus(row, cell);
+          }
+        });
+        return;
+      }
+      if (navDirection === "up" || navDirection === "down") {
+        const visibleCells2 = row.getVisibleCells();
+        const currentCellIdx = visibleCells2.findIndex((c) => c.id === cell.id);
+        if (multiRowEnabled.value && multiRowCount.value > 1) {
+          const currentVisualRow = getVisualRowForColumn(currentCellIdx);
+          const lastVisualRow = multiRowCount.value - 1;
+          if (navDirection === "up") {
+            if (currentVisualRow > 0) {
+              const targetColIdx = findColumnInVisualRow(currentCellIdx, currentVisualRow - 1, row);
+              const targetCell = visibleCells2[targetColIdx];
+              if (targetCell && isCellEditable(row, targetCell)) {
+                nextTick(() => {
+                  startEditing(row, targetCell, void 0, {
+                    rowIndex: currentRowIndex,
+                    cellIndex: targetColIdx
+                  });
+                  isNavigating.value = false;
+                });
+                return;
+              }
+            } else {
+              const targetRowIndex = currentRowIndex - 1;
+              if (targetRowIndex >= 0) {
+                const targetRow = rowsList[targetRowIndex];
+                if (targetRow) {
+                  let targetColIdx = findColumnInVisualRow(currentCellIdx, lastVisualRow, targetRow);
+                  const targetCells = targetRow.getVisibleCells();
+                  const targetCell = targetCells[targetColIdx];
+                  let effectiveTargetCell = targetCell ?? null;
+                  if (effectiveTargetCell && !isCellEditable(targetRow, effectiveTargetCell)) {
+                    const fallback = findEditableInRow(targetRow, targetColIdx, "previous");
+                    effectiveTargetCell = fallback?.cell ?? null;
+                    if (fallback) {
+                      targetColIdx = fallback.index;
+                    }
+                  }
+                  if (effectiveTargetCell) {
+                    nextTick(() => {
+                      startEditing(targetRow, effectiveTargetCell, void 0, {
+                        rowIndex: targetRowIndex,
+                        cellIndex: targetColIdx
+                      });
+                      isNavigating.value = false;
+                    });
+                    return;
+                  }
+                }
+              }
+            }
+          } else {
+            if (currentVisualRow < lastVisualRow) {
+              const targetColIdx = findColumnInVisualRow(currentCellIdx, currentVisualRow + 1, row);
+              const targetCell = visibleCells2[targetColIdx];
+              if (targetCell && isCellEditable(row, targetCell)) {
+                nextTick(() => {
+                  startEditing(row, targetCell, void 0, {
+                    rowIndex: currentRowIndex,
+                    cellIndex: targetColIdx
+                  });
+                  isNavigating.value = false;
+                });
+                return;
+              }
+            } else {
+              const targetRowIndex = currentRowIndex + 1;
+              if (targetRowIndex < rowsList.length) {
+                const targetRow = rowsList[targetRowIndex];
+                if (targetRow) {
+                  let targetColIdx = findColumnInVisualRow(currentCellIdx, 0, targetRow);
+                  const targetCells = targetRow.getVisibleCells();
+                  const targetCell = targetCells[targetColIdx];
+                  let effectiveTargetCell = targetCell ?? null;
+                  if (effectiveTargetCell && !isCellEditable(targetRow, effectiveTargetCell)) {
+                    const fallback = findEditableInRow(targetRow, targetColIdx, "previous");
+                    effectiveTargetCell = fallback?.cell ?? null;
+                    if (fallback) {
+                      targetColIdx = fallback.index;
+                    }
+                  }
+                  if (effectiveTargetCell) {
+                    nextTick(() => {
+                      startEditing(targetRow, effectiveTargetCell, void 0, {
+                        rowIndex: targetRowIndex,
+                        cellIndex: targetColIdx
+                      });
+                      isNavigating.value = false;
+                    });
+                    return;
+                  }
+                }
+              }
+            }
+          }
+        } else {
+          const targetRowIndex = navDirection === "up" ? currentRowIndex - 1 : currentRowIndex + 1;
+          if (targetRowIndex >= 0 && targetRowIndex < rowsList.length) {
+            const targetRow = rowsList[targetRowIndex];
+            if (targetRow) {
+              const targetCells = targetRow.getVisibleCells();
+              const targetCellIdx = targetCells.findIndex((c) => c.column.id === cell.column.id);
+              let effectiveTargetCell = targetCellIdx !== -1 ? targetCells[targetCellIdx] ?? null : null;
+              let resolvedCellIdx = targetCellIdx;
+              if (effectiveTargetCell && !isCellEditable(targetRow, effectiveTargetCell)) {
+                const fallback = findEditableInRow(targetRow, targetCellIdx, "previous");
+                effectiveTargetCell = fallback?.cell ?? null;
+                resolvedCellIdx = fallback?.index ?? targetCellIdx;
+              }
+              if (effectiveTargetCell) {
+                nextTick(() => {
+                  startEditing(targetRow, effectiveTargetCell, void 0, {
+                    rowIndex: targetRowIndex,
+                    cellIndex: resolvedCellIdx
+                  });
+                  isNavigating.value = false;
+                });
+                return;
+              }
+            }
+          }
+        }
+        editingCell.value = null;
+        editingValue.value = null;
+        isNavigating.value = false;
+        hasAttemptedClickAway.value = false;
+        if (shouldRestoreFocus) {
+          restoreFocus(row, cell);
+        }
+        return;
+      } else if (navDirection === "next" || navDirection === "previous") {
+        let targetCellInfo = null;
+        let targetRow = row;
+        let targetRowIndex = currentRowIndex;
+        if (navDirection === "next") {
+          targetCellInfo = findEditableInRow(row, currentCellIndex, "next");
+          if (!targetCellInfo && currentRowIndex < rowsList.length - 1) {
+            for (let r = currentRowIndex + 1; r < rowsList.length; r++) {
+              const candidateRow = rowsList[r];
+              if (!candidateRow) continue;
+              const candidateCellInfo = findEditableInRow(candidateRow, -1, "next");
+              if (candidateCellInfo) {
+                targetRow = candidateRow;
+                targetRowIndex = r;
+                targetCellInfo = candidateCellInfo;
+                break;
+              }
+            }
+          }
+        } else {
+          targetCellInfo = findEditableInRow(row, currentCellIndex, "previous");
+          if (!targetCellInfo && currentRowIndex > 0) {
+            for (let r = currentRowIndex - 1; r >= 0; r--) {
+              const candidateRow = rowsList[r];
+              if (!candidateRow) continue;
+              const cells = candidateRow.getVisibleCells();
+              const candidateCellInfo = findEditableInRow(candidateRow, cells.length, "previous");
+              if (candidateCellInfo) {
+                targetRow = candidateRow;
+                targetRowIndex = r;
+                targetCellInfo = candidateCellInfo;
+                break;
+              }
+            }
+          }
+        }
+        if (targetCellInfo) {
+          nextTick(() => {
+            startEditing(targetRow, targetCellInfo.cell, void 0, {
+              rowIndex: targetRowIndex,
+              cellIndex: targetCellInfo.index
+            });
+            isNavigating.value = false;
+          });
+          return;
+        }
+        editingCell.value = null;
+        editingValue.value = null;
+        isNavigating.value = false;
+        hasAttemptedClickAway.value = false;
+        if (shouldRestoreFocus) {
+          restoreFocus(row, cell);
+        }
+        return;
+      }
+    }
+    if (shouldFocusNewAddRowAfterFinalize && !navDirection) {
+      nextTick(() => {
+        const nextRowsList = navigableRows?.value ?? rows.value;
+        const newAddRow = groupIdToFocus ? nextRowsList.find(
+          (r) => addRowContext?.isAddRowRow(r) && r.parentId === groupIdToFocus
+        ) : nextRowsList.find((r) => addRowContext?.isAddRowRow(r));
+        if (newAddRow) {
+          const firstEditableCell = newAddRow.getVisibleCells().find((c) => isCellEditable(newAddRow, c));
+          if (firstEditableCell) {
+            startEditing(newAddRow, firstEditableCell);
+            return;
+          }
+        }
+        editingCell.value = null;
+        editingValue.value = null;
+        hasAttemptedClickAway.value = false;
+        if (shouldRestoreFocus) {
+          restoreFocus(row, cell);
+        }
+      });
+      return;
+    }
+    editingCell.value = null;
+    editingValue.value = null;
+    hasAttemptedClickAway.value = false;
+    if (shouldRestoreFocus) {
+      restoreFocus(row, cell);
+    }
+  }
+  function restoreFocus(row, cell) {
+    nextTick(() => {
+      const rowsList = navigableRows?.value ?? rows.value;
+      const rowIndex = rowsList.findIndex((r) => r.id === row.id);
+      const cellIndex = row.getVisibleCells().findIndex((c) => c.id === cell.id);
+      if (rowIndex === -1) {
+        return;
+      }
+      if (rowIndex !== -1 && cellIndex !== -1) {
+        const currentSuppressOutline = focusFns.focusedCell.value?.suppressOutline;
+        focusFns.focusedCell.value = {
+          rowIndex,
+          columnIndex: cellIndex,
+          ...currentSuppressOutline && { suppressOutline: true }
+        };
+        focusFns.focusCell(row, rowIndex, cellIndex);
+      }
+    });
+  }
+  const getCurrentEditingContext = () => {
+    if (!editingCell.value) return null;
+    const rowsList = navigableRows?.value ?? rows.value;
+    const currentRow = rowsList.find((r) => r.id === editingCell.value.rowId);
+    if (!currentRow) return null;
+    const currentCell = currentRow.getAllCells().find((c) => c.column.id === editingCell.value.columnId);
+    if (!currentCell) return null;
+    return { row: currentRow, cell: currentCell };
+  };
+  function createEditorContext(cell, row) {
+    return {
+      cell,
+      row,
+      getValue: () => editingValue.value,
+      setValue: (value) => {
+        editingValue.value = value;
+      },
+      stopEditing: (moveDirection) => {
+        const ctx = getCurrentEditingContext();
+        if (ctx) {
+          stopEditing(ctx.row, ctx.cell, editingValue.value, moveDirection);
+        }
+      },
+      table: tableApi,
+      column: cell.column
+    };
+  }
+  function createDefaultEditor(cell, row) {
+    const columnDef = cell.column.columnDef;
+    const defined = columnDef.cellDataType;
+    let cellDataType = defined || "text";
+    if (!defined || defined === "text") {
+      if (columnDef.wrapText === true) {
+        cellDataType = "textarea";
+      } else {
+        const value = cell.getValue();
+        if (typeof value === "string" && value.includes("\n")) {
+          cellDataType = "textarea";
+        }
+      }
+    }
+    if (props.editing?.defaultEditors?.[cellDataType]) {
+      const customEditor = props.editing.defaultEditors[cellDataType];
+      if (customEditor) {
+        const context2 = createEditorContext(cell, row);
+        return renderEditor(customEditor, context2);
+      }
+    }
+    const cellTypeEditor = typeRegistry.getDefaultEditor(cellDataType);
+    const EditorComponent = cellTypeEditor ?? textCellType.editor;
+    if (!EditorComponent) {
+      console.warn(
+        `[NuGrid] No editor registered for cellDataType "${cellDataType}". Rendering skipped.`
+      );
+      return null;
+    }
+    const context = createEditorContext(cell, row);
+    return renderEditor(EditorComponent, context);
+  }
+  function renderCellContent(cell, row) {
+    const columnDef = cell.column.columnDef;
+    const isEditing = isEditingCell(row, cell.column.id);
+    if (isEditing) {
+      if (columnDef.editor) {
+        const context = {
+          cell,
+          row,
+          getValue: () => editingValue.value,
+          setValue: (value) => {
+            editingValue.value = value;
+          },
+          stopEditing: (moveDirection) => {
+            if (!editingCell.value) return;
+            const rowsList = navigableRows?.value ?? rows.value;
+            const currentRow = rowsList.find((r) => r.id === editingCell.value.rowId);
+            if (!currentRow) return;
+            const currentCell = currentRow.getAllCells().find((c) => c.column.id === editingCell.value.columnId);
+            if (!currentCell) return;
+            if (moveDirection) {
+              stopEditing(currentRow, currentCell, editingValue.value, moveDirection);
+            } else {
+              stopEditing(currentRow, currentCell, editingValue.value);
+            }
+          },
+          table: tableApi,
+          column: cell.column
+        };
+        return renderEditor(columnDef.editor, context);
+      }
+      return createDefaultEditor(cell, row);
+    }
+    return h(FlexRender, {
+      render: cell.column.columnDef.cell,
+      props: cell.getContext()
+    });
+  }
+  function handleValidationFailure(config, isClickAway) {
+    if (isRowLevelValidationError.value && isClickAway) {
+      if (config.validateOn === "reward") {
+        hasBeenPunished.value = true;
+      }
+      editingCell.value = null;
+      editingValue.value = null;
+      return true;
+    }
+    if (isClickAway) {
+      if (!hasAttemptedClickAway.value) {
+        hasAttemptedClickAway.value = true;
+        if (config.validateOn === "reward") {
+          hasBeenPunished.value = true;
+        }
+        shouldFocusEditor.value = false;
+        nextTick(() => {
+          shouldFocusEditor.value = true;
+        });
+        return true;
+      }
+      editingCell.value = null;
+      editingValue.value = null;
+      validationError.value = null;
+      hasBeenPunished.value = false;
+      hasAttemptedClickAway.value = false;
+      return true;
+    }
+    if (config.validateOn === "reward") {
+      hasBeenPunished.value = true;
+    }
+    shouldFocusEditor.value = true;
+    return true;
+  }
+  function onCellClick(event, row, cell) {
+    if (hasAttemptedClickAway.value) {
+      return;
+    }
+    if (startClicks.value === "single") {
+      event.stopPropagation();
+      startEditing(row, cell);
+    }
+  }
+  function onCellDoubleClick(event, row, cell) {
+    if (hasAttemptedClickAway.value) {
+      return;
+    }
+    if (startClicks.value === "double") {
+      event.stopPropagation();
+      startEditing(row, cell);
+    }
+  }
+  if (interactionRouter) {
+    unregisterInteraction = interactionRouter.registerCellClickHandler({
+      id: "cell-editing",
+      priority: 20,
+      handle: ({ event, row, cell }) => {
+        if (event.__addRowCellTransition) {
+          if (focusFns.focusedCell.value) {
+            focusFns.focusedCell.value = {
+              ...focusFns.focusedCell.value,
+              suppressOutline: true
+            };
+          }
+          const ctx = getCurrentEditingContext();
+          if (ctx) {
+            stopEditing(ctx.row, ctx.cell, editingValue.value, void 0, {
+              restoreFocus: false
+            });
+          }
+          startEditing(row, cell);
+          return { handled: false };
+        }
+        onCellClick(event, row, cell);
+        return { handled: event.defaultPrevented || event.cancelBubble };
+      }
+    });
+    unregisterDoubleClick = interactionRouter.registerCellDoubleClickHandler({
+      id: "cell-editing-dblclick",
+      priority: 20,
+      handle: ({ event, row, cell }) => {
+        onCellDoubleClick(event, row, cell);
+        return { handled: event.defaultPrevented || event.cancelBubble };
+      }
+    });
+  }
+  function onCellKeyDown(event, row, cell, cellIndex) {
+    const isEditing = isEditingCell(row, cell.column.id);
+    const columnDef = cell.column.columnDef;
+    const cellDataType = columnDef.cellDataType || "text";
+    const isFocused = focusFns.shouldCellHandleKeydown(row, cellIndex);
+    const canEdit = isCellEditable(row, cell);
+    if (!isEditing) {
+      const keyboardHandler = typeRegistry.getKeyboardHandler(cellDataType);
+      if (keyboardHandler) {
+        const pluginContext = {
+          cell,
+          row,
+          columnDef,
+          column: cell.column,
+          getValue: () => cell.getValue(),
+          isFocused,
+          canEdit,
+          data: data.value,
+          tableApi,
+          startEditing: (initialValue) => startEditing(row, cell, initialValue),
+          stopEditing: (newValue, moveDirection) => {
+            stopEditing(row, cell, newValue, moveDirection);
+          },
+          emitChange: (oldValue, newValue) => {
+            emit({
+              row,
+              column: cell.column,
+              oldValue,
+              newValue
+            });
+          }
+        };
+        const result = keyboardHandler(event, pluginContext);
+        if (result.handled) {
+          if (result.preventDefault) {
+            event.preventDefault();
+          }
+          if (result.stopPropagation) {
+            event.stopPropagation();
+          }
+          return;
+        }
+      }
+    }
+    if (isEditing) {
+      event.stopPropagation();
+      return;
+    }
+    const enabledKeys = startKeys.value === "all" ? ["enter", "f2", "bs", "alpha", "numeric"] : startKeys.value === "minimal" ? ["enter", "f2"] : startKeys.value === "none" ? [] : startKeys.value;
+    const noKeysEnabled = enabledKeys.length === 0;
+    if (!isEditing && isFocused && canEdit && !noKeysEnabled) {
+      if (event.key === "F2" && enabledKeys.includes("f2")) {
+        event.preventDefault();
+        event.stopPropagation();
+        startEditing(row, cell);
+        return;
+      }
+      if ((event.key === "Backspace" || event.key === "Delete") && enabledKeys.includes("bs")) {
+        event.preventDefault();
+        event.stopPropagation();
+        startEditing(row, cell, "");
+        return;
+      }
+      if (event.key === "Enter" && enabledKeys.includes("enter")) {
+        event.preventDefault();
+        event.stopPropagation();
+        startEditing(row, cell);
+        return;
+      }
+      if (event.key.length === 1 && !event.ctrlKey && !event.metaKey && !event.altKey && event.key !== " ") {
+        const isAlpha = /[a-z]/i.test(event.key);
+        const isNumeric = /\d/.test(event.key);
+        if (isAlpha && enabledKeys.includes("alpha") || isNumeric && enabledKeys.includes("numeric")) {
+          event.preventDefault();
+          event.stopPropagation();
+          startEditing(row, cell, event.key);
+          return;
+        }
+      }
+    }
+    if (isFocused) {
+      focusFns.onCellKeyDown(event);
+    }
+  }
+  const handleClickOutside = (event) => {
+    if (!editingCell.value) return;
+    if (event.__addRowCellTransition) {
+      return;
+    }
+    if (event.__addRowFinalizing) {
+      return;
+    }
+    const target = event.target;
+    const isInsideUIOverlay = target.closest(
+      '[role="menu"], [role="listbox"], [role="dialog"], .headlessui-portal-root, [data-headlessui-portal]'
+    );
+    if (isInsideUIOverlay) {
+      return;
+    }
+    const isClickInsideGrid = Boolean(tableRef.value && tableRef.value.contains(target));
+    if (tableRef.value && editingCell.value) {
+      const rowsList = navigableRows?.value ?? rows.value;
+      const currentRow = rowsList.find((r) => r.id === editingCell.value.rowId);
+      if (!currentRow) return;
+      const cellIndex = currentRow.getVisibleCells().findIndex((c) => c.column.id === editingCell.value.columnId);
+      if (cellIndex === -1) return;
+      const selector = cellSelector.replace("$COL", String(cellIndex)).replace("$ID", currentRow.id);
+      const editingCellElement = tableRef.value.querySelector(selector);
+      if (editingCellElement && !editingCellElement.contains(target)) {
+        const currentCell = currentRow.getAllCells().find((c) => c.column.id === editingCell.value.columnId);
+        if (currentCell) {
+          const isAddRow = addRowContext?.isAddRowRow(currentRow);
+          if (isAddRow && addRowContext) {
+            addRowContext.resetAddRow(currentRow);
+            editingCell.value = null;
+            editingValue.value = null;
+            validationError.value = null;
+            hasBeenPunished.value = false;
+            hasAttemptedClickAway.value = false;
+            if (isClickInsideGrid) {
+              focusFns.gridHasFocus.value = true;
+              if (focusFns.focusedCell.value) {
+                focusFns.focusedCell.value = {
+                  ...focusFns.focusedCell.value,
+                  columnIndex: -1
+                };
+              }
+            } else {
+              focusFns.focusedCell.value = null;
+            }
+            return;
+          }
+          if (isClickInsideGrid) {
+            focusFns.gridHasFocus.value = true;
+            if (focusFns.focusedCell.value) {
+              focusFns.focusedCell.value = {
+                ...focusFns.focusedCell.value,
+                columnIndex: -1
+              };
+            }
+          }
+          stopEditing(currentRow, currentCell, editingValue.value, void 0, {
+            restoreFocus: !isClickInsideGrid,
+            isClickAway: isClickInsideGrid
+            // Signal this is a click-away attempt
+          });
+        }
+      }
+    }
+  };
+  if (interactionRouter) {
+    unregisterOutsidePointer = interactionRouter.registerGlobalPointerHandler({
+      id: "cell-editing-outside",
+      priority: 25,
+      handle: ({ event }) => {
+        handleClickOutside(event);
+        return { handled: false };
+      }
+    });
+  } else if (typeof document !== "undefined") {
+    const listener = (event) => handleClickOutside(event);
+    onMounted(() => document.addEventListener("mousedown", listener));
+    unregisterOutsidePointer = () => {
+      document.removeEventListener("mousedown", listener);
+    };
+  }
+  onUnmounted(() => {
+    if (unregisterInteraction) {
+      unregisterInteraction();
+      unregisterInteraction = null;
+    }
+    if (unregisterDoubleClick) {
+      unregisterDoubleClick();
+      unregisterDoubleClick = null;
+    }
+    if (unregisterOutsidePointer) {
+      unregisterOutsidePointer();
+      unregisterOutsidePointer = null;
+    }
+  });
+  return {
+    editingCell,
+    editingValue,
+    isNavigating,
+    shouldFocusEditor,
+    validationError,
+    showValidationErrors,
+    validationIcon,
+    startClicks,
+    // Row validation
+    rowValidationErrors,
+    hasRowValidationError,
+    hasCellValidationError,
+    getRowValidationError,
+    // Cell editing functions
+    isEditingCell,
+    isCellEditable,
+    startEditing,
+    stopEditing,
+    createDefaultEditor,
+    renderCellContent,
+    onCellClick,
+    onCellDoubleClick,
+    onCellKeyDown
+  };
+}