feat(createDataGrid): add cell editing with validation and dirty tracking

Author: johnleider

packages/0/src/composables/createDataGrid/editing.test.ts

@@ -0,0 +1,83 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { createCellEditing } from './editing'
+
+describe('createCellEditing', () => {
+  const columns = [
+    { key: 'name', editable: true },
+    { key: 'email', editable: true, validate: (v: unknown) => typeof v === 'string' && v.includes('@') || 'Invalid email' },
+    { key: 'id', editable: false },
+  ]
+
+  it('starts with no active cell', () => {
+    const editing = createCellEditing({ columns })
+    expect(editing.active.value).toBeNull()
+  })
+
+  it('edit sets active cell', () => {
+    const editing = createCellEditing({ columns })
+    editing.edit(1, 'name')
+    expect(editing.active.value).toEqual({ row: 1, column: 'name' })
+  })
+
+  it('edit rejects non-editable columns', () => {
+    const editing = createCellEditing({ columns })
+    editing.edit(1, 'id')
+    expect(editing.active.value).toBeNull()
+  })
+
+  it('cancel clears active cell', () => {
+    const editing = createCellEditing({ columns })
+    editing.edit(1, 'name')
+    editing.cancel()
+    expect(editing.active.value).toBeNull()
+  })
+
+  it('commit calls onEdit and clears active', () => {
+    const onEdit = vi.fn()
+    const editing = createCellEditing({ columns, onEdit })
+    editing.edit(1, 'name')
+    editing.commit('Alice')
+    expect(onEdit).toHaveBeenCalledWith(1, 'name', 'Alice')
+    expect(editing.active.value).toBeNull()
+  })
+
+  it('commit rejects invalid value and sets error', () => {
+    const onEdit = vi.fn()
+    const editing = createCellEditing({ columns, onEdit })
+    editing.edit(1, 'email')
+    editing.commit('not-an-email')
+    expect(onEdit).not.toHaveBeenCalled()
+    expect(editing.error.value).toBe('Invalid email')
+    expect(editing.active.value).toEqual({ row: 1, column: 'email' })
+  })
+
+  it('commit accepts valid value after previous error', () => {
+    const onEdit = vi.fn()
+    const editing = createCellEditing({ columns, onEdit })
+    editing.edit(1, 'email')
+    editing.commit('not-an-email')
+    expect(editing.error.value).toBe('Invalid email')
+
+    editing.commit('valid@email.com')
+    expect(onEdit).toHaveBeenCalledWith(1, 'email', 'valid@email.com')
+    expect(editing.error.value).toBeNull()
+    expect(editing.active.value).toBeNull()
+  })
+
+  it('tracks dirty cells', () => {
+    const editing = createCellEditing({ columns })
+    editing.edit(1, 'name')
+    editing.dirty.value.get(1)?.set('name', 'pending')
+    expect(editing.dirty.value.get(1)?.get('name')).toBe('pending')
+  })
+
+  it('cancel clears error', () => {
+    const editing = createCellEditing({ columns })
+    editing.edit(1, 'email')
+    editing.commit('bad')
+    expect(editing.error.value).toBe('Invalid email')
+    editing.cancel()
+    expect(editing.error.value).toBeNull()
+  })
+})

packages/0/src/composables/createDataGrid/editing.ts

@@ -0,0 +1,106 @@
+/**
+ * @module createDataGrid/editing
+ *
+ * @remarks
+ * Cell editing state management. Tracks active cell, validation errors,
+ * and dirty (uncommitted) edits. Does not mutate source data — commit
+ * fires a callback for the consumer to handle.
+ */
+
+// Utilities
+import { isString } from '#v0/utilities'
+import { ref, shallowRef } from 'vue'
+
+// Types
+import type { ID } from '#v0/types'
+import type { Ref, ShallowRef } from 'vue'
+
+export interface EditableColumn {
+  readonly key: string
+  readonly editable?: boolean | ((item: unknown) => boolean)
+  readonly validate?: (value: unknown, item?: unknown) => boolean | string
+}
+
+export interface CellEditingOptions {
+  columns: readonly EditableColumn[]
+  onEdit?: (row: ID, column: string, value: unknown) => void
+}
+
+export interface ActiveCell {
+  row: ID
+  column: string
+}
+
+export interface CellEditing {
+  active: Readonly<ShallowRef<ActiveCell | null>>
+  edit: (row: ID, column: string) => void
+  commit: (value: unknown) => void
+  cancel: () => void
+  error: Readonly<ShallowRef<string | null>>
+  dirty: Readonly<Ref<Map<ID, Map<string, unknown>>>>
+}
+
+export function createCellEditing (options: CellEditingOptions): CellEditing {
+  const { columns, onEdit } = options
+
+  const columnMap = new Map<string, EditableColumn>()
+  for (const col of columns) {
+    columnMap.set(col.key, col)
+  }
+
+  const active = shallowRef<ActiveCell | null>(null)
+  const error = shallowRef<string | null>(null)
+  const dirty = ref(new Map<ID, Map<string, unknown>>())
+
+  function edit (row: ID, column: string) {
+    const col = columnMap.get(column)
+    if (!col || col.editable === false || col.editable === undefined) {
+      return
+    }
+    error.value = null
+    active.value = { row, column }
+    if (!dirty.value.has(row)) {
+      dirty.value.set(row, new Map())
+    }
+  }
+
+  function commit (value: unknown) {
+    const cell = active.value
+    if (!cell) return
+
+    const col = columnMap.get(cell.column)
+    if (col?.validate) {
+      const result = col.validate(value)
+      if (isString(result)) {
+        error.value = result
+        return
+      }
+    }
+
+    onEdit?.(cell.row, cell.column, value)
+
+    // Clear dirty entry for this cell
+    const rowDirty = dirty.value.get(cell.row)
+    if (rowDirty) {
+      rowDirty.delete(cell.column)
+      if (rowDirty.size === 0) dirty.value.delete(cell.row)
+    }
+
+    error.value = null
+    active.value = null
+  }
+
+  function cancel () {
+    error.value = null
+    active.value = null
+  }
+
+  return {
+    active,
+    edit,
+    commit,
+    cancel,
+    error,
+    dirty,
+  }
+}