@svgrid/grid 1.2.34 → 2.0.0

package/src/builtin-editors.grid.test.ts

@@ -0,0 +1,85 @@
+/**
+ * End-to-end: after registerBuiltinEditors(), a column with editorType 'duration'
+ * mounts SvDurationInput in the editing cell (proving the built-in registration +
+ * the SvGrid registry wiring together).
+ */
+import { afterEach, describe, expect, it } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  registerBuiltinEditors,
+  unregisterCellEditor,
+  registeredCellEditorTypes,
+  createCoreRowModel,
+  createFilteredRowModel,
+  createPaginatedRowModel,
+  createSortedRowModel,
+  sortFns,
+  tableFeatures,
+  columnFilteringFeature,
+  rowSortingFeature,
+} from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: number; task: string; estimate: number }
+
+const features = tableFeatures({ columnFilteringFeature, rowSortingFeature })
+const rows: Row[] = [
+  { id: 1, task: 'Design', estimate: 90 },
+  { id: 2, task: 'Build', estimate: 240 },
+]
+const cols: ColumnDef<typeof features, Row>[] = [
+  { field: 'task', header: 'Task', width: 200, editorType: 'text' },
+  { field: 'estimate', header: 'Estimate', width: 160, editorType: 'duration' },
+]
+
+const tick = () => new Promise<void>((r) => queueMicrotask(r))
+
+function mountGrid() {
+  return new Promise<{ api: SvGridApi<typeof features, Row>; target: HTMLElement; destroy: () => void }>(
+    (res) => {
+      const target = document.createElement('div')
+      document.body.appendChild(target)
+      const app = mount(SvGrid, {
+        target,
+        props: {
+          data: rows,
+          columns: cols,
+          features,
+          _rowModels: {
+            coreRowModel: createCoreRowModel(),
+            filteredRowModel: createFilteredRowModel(),
+            sortedRowModel: createSortedRowModel(sortFns),
+            paginatedRowModel: createPaginatedRowModel(),
+          },
+          rowHeight: 36,
+          containerHeight: 300,
+          virtualization: false,
+          enableInlineEditing: true,
+          onApiReady(api: SvGridApi<typeof features, Row>) {
+            res({ api, target, destroy: () => { unmount(app); target.remove() } })
+          },
+        } as any,
+      })
+    },
+  )
+}
+
+afterEach(() => {
+  for (const t of registeredCellEditorTypes()) unregisterCellEditor(t)
+})
+
+describe('registerBuiltinEditors in SvGrid', () => {
+  it("mounts SvDurationInput for an editorType 'duration' cell", async () => {
+    registerBuiltinEditors()
+    const { api, target, destroy } = await mountGrid()
+    try {
+      api.startEditing(0, 'estimate')
+      await tick()
+      await tick()
+      expect(target.querySelector('.sv-dur')).not.toBeNull()
+    } finally {
+      destroy()
+    }
+  })
+})

package/src/builtin-editors.test.ts

@@ -0,0 +1,58 @@
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { registerBuiltinEditors } from './builtin-editors'
+import {
+  getCellEditor,
+  hasCellEditor,
+  unregisterCellEditor,
+  registeredCellEditorTypes,
+  resolveEditorProps,
+  type CellEditorContext,
+} from './editor-registry'
+
+function ctx(overrides: Partial<CellEditorContext> = {}): CellEditorContext {
+  return {
+    value: null,
+    rowId: 'r1',
+    columnId: 'c1',
+    onChange: () => {},
+    onCommit: () => {},
+    onCancel: () => {},
+    ...overrides,
+  }
+}
+
+afterEach(() => {
+  for (const t of registeredCellEditorTypes()) unregisterCellEditor(t)
+})
+
+describe('registerBuiltinEditors', () => {
+  it('registers the config-free editor types', () => {
+    const types = registerBuiltinEditors()
+    expect(types).toEqual(['otp', 'duration'])
+    expect(hasCellEditor('otp')).toBe(true)
+    expect(hasCellEditor('duration')).toBe(true)
+  })
+
+  it("maps the OTP editor's onComplete to commit", () => {
+    registerBuiltinEditors()
+    const onCommit = vi.fn(), onChange = vi.fn()
+    const props = resolveEditorProps(getCellEditor('otp')!, ctx({ value: '12', onChange, onCommit }))
+    expect(props.value).toBe('12')
+    expect(props.autofocus).toBe(true)
+    ;(props.onComplete as (v: string) => void)('123456')
+    expect(onCommit).toHaveBeenCalledWith('123456')
+    ;(props.onChange as (v: string) => void)('1')
+    expect(onChange).toHaveBeenCalledWith('1')
+  })
+
+  it('maps the duration editor commit/cancel through the context', () => {
+    registerBuiltinEditors()
+    const onCommit = vi.fn(), onCancel = vi.fn()
+    const props = resolveEditorProps(getCellEditor('duration')!, ctx({ value: 90, onCommit, onCancel }))
+    expect(props.value).toBe(90)
+    ;(props.onCommit as (v: number | null) => void)(120)
+    expect(onCommit).toHaveBeenCalledWith(120)
+    ;(props.onCancel as () => void)()
+    expect(onCancel).toHaveBeenCalled()
+  })
+})

package/src/builtin-editors.ts

@@ -0,0 +1,56 @@
+/**
+ * builtin-editors - opt-in registration of the configuration-free UI-kit editors
+ * as grid cell editors, so a column can use `editorType: 'otp'` or
+ * `editorType: 'duration'` out of the box. Call `registerBuiltinEditors()` once
+ * near your app root.
+ *
+ * It is opt-in (rather than automatic) so the editor components tree-shake away
+ * when you don't use them. Option / structured editors (SvMultiSelect,
+ * SvTreeSelect, SvGridSelect) need their `options` / `nodes` / `columns`, so
+ * register those yourself with a props mapping:
+ *
+ * ```ts
+ * import { registerCellEditor, SvMultiSelect } from '@svgrid/grid'
+ * registerCellEditor('tags', {
+ *   component: SvMultiSelect,
+ *   props: (ctx) => ({
+ *     options: TAG_OPTIONS,
+ *     value: ctx.value,
+ *     onChange: ctx.onChange,        // update the in-progress value
+ *     onCommit: () => ctx.onCommit(),// e.g. the panel's Done button
+ *   }),
+ * })
+ * ```
+ */
+import { registerCellEditor } from './editor-registry'
+import SvOtpInput from './SvOtpInput.svelte'
+import SvDurationInput from './SvDurationInput.svelte'
+
+/**
+ * Register the config-free UI-kit editors (`otp`, `duration`) as grid cell
+ * editors. Idempotent. Returns the list of type names it registered.
+ */
+export function registerBuiltinEditors(): string[] {
+  registerCellEditor('otp', {
+    component: SvOtpInput,
+    autoOpen: false,
+    props: (ctx) => ({
+      value: (ctx.value ?? '') as string,
+      autofocus: true,
+      onChange: (v: string) => ctx.onChange(v),
+      // The code is complete -> commit + stop editing.
+      onComplete: (v: string) => ctx.onCommit(v),
+    }),
+  })
+  registerCellEditor('duration', {
+    component: SvDurationInput,
+    props: (ctx) => ({
+      value: (ctx.value ?? null) as number | null,
+      autofocus: true,
+      onChange: (v: number | null) => ctx.onChange(v),
+      onCommit: (v: number | null) => ctx.onCommit(v),
+      onCancel: () => ctx.onCancel(),
+    }),
+  })
+  return ['otp', 'duration']
+}

package/src/cell-formatting.ts

@@ -1,169 +1,169 @@
-/**
- * Helpers for SvGrid column `format` presets (numbers, currency, percent, date patterns).
- */
-
-/** Map shortcut date patterns to Intl options (merged with caller `options`). */
-export function resolveDatePattern(
-  pattern: string | undefined,
-  kind: 'date' | 'datetime',
-): Intl.DateTimeFormatOptions | undefined {
-  if (!pattern) return undefined
-
-  const p = pattern.trim()
-
-  switch (p) {
-    /** Short numeric local date (no weekday). */
-    case 'd':
-      return kind === 'datetime'
-        ? {
-            year: 'numeric',
-            month: 'numeric',
-            day: 'numeric',
-            hour: 'numeric',
-            minute: 'numeric',
-          }
-        : { year: 'numeric', month: 'numeric', day: 'numeric' }
-    /** Long spelled-out date (+ time if datetime). */
-    case 'D':
-      return kind === 'datetime'
-        ? {
-            weekday: 'long',
-            year: 'numeric',
-            month: 'long',
-            day: 'numeric',
-            hour: 'numeric',
-            minute: 'numeric',
-          }
-        : { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
-    /** ISO-friendly yyyy-mm-dd (with time when datetime). */
-    case 'y-m-d':
-      return kind === 'datetime'
-        ? {
-            year: 'numeric',
-            month: '2-digit',
-            day: '2-digit',
-            hour: '2-digit',
-            minute: '2-digit',
-            hour12: false,
-          }
-        : { year: 'numeric', month: '2-digit', day: '2-digit' }
-    case 'medium':
-      return { dateStyle: 'medium', timeStyle: kind === 'datetime' ? 'short' : undefined }
-    case 'short':
-      return { dateStyle: 'short', timeStyle: kind === 'datetime' ? 'short' : undefined }
-    case 'long':
-      return { dateStyle: 'long', timeStyle: kind === 'datetime' ? 'short' : undefined }
-    default:
-      return undefined
-  }
-}
-
-type NumericFormatInput = {
-  type: 'number' | 'currency' | 'percent'
-  locales?: string | string[]
-  currency?: string
-  /** When type is percent: treat value as 0–100 instead of Intl’s 0–1 fraction */
-  valueIsPercentPoints?: boolean
-  options?: Intl.NumberFormatOptions
-}
-
-/**
- * `Intl.NumberFormat` is one of the most expensive constructors in the
- * platform - building one per cell on every scroll makes large grids
- * noticeably stutter. Cache instances by config signature (locale + style
- * + currency + options).
- */
-const numberFormatterCache = new Map<string, Intl.NumberFormat>()
-function getNumberFormatter(
-  locales: string | string[] | undefined,
-  options: Intl.NumberFormatOptions,
-): Intl.NumberFormat {
-  // Stable key - for normal column configs the options object is reused
-  // (declared in module scope), so this stringifies a small static shape.
-  const key =
-    (Array.isArray(locales) ? locales.join(',') : locales ?? '') +
-    '|' +
-    (options.style ?? '') +
-    '|' +
-    (options.currency ?? '') +
-    '|' +
-    (options.minimumFractionDigits ?? '') +
-    '|' +
-    (options.maximumFractionDigits ?? '') +
-    '|' +
-    (options.useGrouping ?? '') +
-    '|' +
-    (options.currencyDisplay ?? '') +
-    '|' +
-    (options.notation ?? '')
-  let fmt = numberFormatterCache.get(key)
-  if (!fmt) {
-    fmt = new Intl.NumberFormat(locales, options)
-    numberFormatterCache.set(key, fmt)
-  }
-  return fmt
-}
-
-/** Cache of `Intl.DateTimeFormat` by `(locale, options)` signature. */
-const dateFormatterCache = new Map<string, Intl.DateTimeFormat>()
-export function getDateFormatter(
-  locales: string | string[] | undefined,
-  options: Intl.DateTimeFormatOptions,
-): Intl.DateTimeFormat {
-  const key =
-    (Array.isArray(locales) ? locales.join(',') : locales ?? '') +
-    '|' +
-    (options.dateStyle ?? '') +
-    '|' +
-    (options.timeStyle ?? '') +
-    '|' +
-    (options.year ?? '') +
-    '|' +
-    (options.month ?? '') +
-    '|' +
-    (options.day ?? '') +
-    '|' +
-    (options.hour ?? '') +
-    '|' +
-    (options.minute ?? '') +
-    '|' +
-    (options.second ?? '') +
-    '|' +
-    (options.weekday ?? '') +
-    '|' +
-    (options.hour12 ?? '')
-  let fmt = dateFormatterCache.get(key)
-  if (!fmt) {
-    fmt = new Intl.DateTimeFormat(locales, options)
-    dateFormatterCache.set(key, fmt)
-  }
-  return fmt
-}
-
-/** Format a numeric value for number / currency / percent column formats. */
-export function formatNumericWithConfig(value: unknown, config: NumericFormatInput): string {
-  const n = typeof value === 'number' ? value : Number(value)
-  if (!Number.isFinite(n)) return String(value ?? '')
-
-  const locales = config.locales
-
-  if (config.type === 'currency') {
-    return getNumberFormatter(locales, {
-      style: 'currency',
-      currency: config.currency ?? 'USD',
-      ...config.options,
-    }).format(n)
-  }
-
-  if (config.type === 'percent') {
-    const frac = config.valueIsPercentPoints === true ? n / 100 : n
-    return getNumberFormatter(locales, {
-      style: 'percent',
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 2,
-      ...config.options,
-    }).format(frac)
-  }
-
-  return getNumberFormatter(locales, config.options ?? {}).format(n)
-}
+/**
+ * Helpers for SvGrid column `format` presets (numbers, currency, percent, date patterns).
+ */
+
+/** Map shortcut date patterns to Intl options (merged with caller `options`). */
+export function resolveDatePattern(
+  pattern: string | undefined,
+  kind: 'date' | 'datetime',
+): Intl.DateTimeFormatOptions | undefined {
+  if (!pattern) return undefined
+
+  const p = pattern.trim()
+
+  switch (p) {
+    /** Short numeric local date (no weekday). */
+    case 'd':
+      return kind === 'datetime'
+        ? {
+            year: 'numeric',
+            month: 'numeric',
+            day: 'numeric',
+            hour: 'numeric',
+            minute: 'numeric',
+          }
+        : { year: 'numeric', month: 'numeric', day: 'numeric' }
+    /** Long spelled-out date (+ time if datetime). */
+    case 'D':
+      return kind === 'datetime'
+        ? {
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: 'numeric',
+            hour: 'numeric',
+            minute: 'numeric',
+          }
+        : { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }
+    /** ISO-friendly yyyy-mm-dd (with time when datetime). */
+    case 'y-m-d':
+      return kind === 'datetime'
+        ? {
+            year: 'numeric',
+            month: '2-digit',
+            day: '2-digit',
+            hour: '2-digit',
+            minute: '2-digit',
+            hour12: false,
+          }
+        : { year: 'numeric', month: '2-digit', day: '2-digit' }
+    case 'medium':
+      return { dateStyle: 'medium', timeStyle: kind === 'datetime' ? 'short' : undefined }
+    case 'short':
+      return { dateStyle: 'short', timeStyle: kind === 'datetime' ? 'short' : undefined }
+    case 'long':
+      return { dateStyle: 'long', timeStyle: kind === 'datetime' ? 'short' : undefined }
+    default:
+      return undefined
+  }
+}
+
+type NumericFormatInput = {
+  type: 'number' | 'currency' | 'percent'
+  locales?: string | string[]
+  currency?: string
+  /** When type is percent: treat value as 0–100 instead of Intl’s 0–1 fraction */
+  valueIsPercentPoints?: boolean
+  options?: Intl.NumberFormatOptions
+}
+
+/**
+ * `Intl.NumberFormat` is one of the most expensive constructors in the
+ * platform - building one per cell on every scroll makes large grids
+ * noticeably stutter. Cache instances by config signature (locale + style
+ * + currency + options).
+ */
+const numberFormatterCache = new Map<string, Intl.NumberFormat>()
+function getNumberFormatter(
+  locales: string | string[] | undefined,
+  options: Intl.NumberFormatOptions,
+): Intl.NumberFormat {
+  // Stable key - for normal column configs the options object is reused
+  // (declared in module scope), so this stringifies a small static shape.
+  const key =
+    (Array.isArray(locales) ? locales.join(',') : locales ?? '') +
+    '|' +
+    (options.style ?? '') +
+    '|' +
+    (options.currency ?? '') +
+    '|' +
+    (options.minimumFractionDigits ?? '') +
+    '|' +
+    (options.maximumFractionDigits ?? '') +
+    '|' +
+    (options.useGrouping ?? '') +
+    '|' +
+    (options.currencyDisplay ?? '') +
+    '|' +
+    (options.notation ?? '')
+  let fmt = numberFormatterCache.get(key)
+  if (!fmt) {
+    fmt = new Intl.NumberFormat(locales, options)
+    numberFormatterCache.set(key, fmt)
+  }
+  return fmt
+}
+
+/** Cache of `Intl.DateTimeFormat` by `(locale, options)` signature. */
+const dateFormatterCache = new Map<string, Intl.DateTimeFormat>()
+export function getDateFormatter(
+  locales: string | string[] | undefined,
+  options: Intl.DateTimeFormatOptions,
+): Intl.DateTimeFormat {
+  const key =
+    (Array.isArray(locales) ? locales.join(',') : locales ?? '') +
+    '|' +
+    (options.dateStyle ?? '') +
+    '|' +
+    (options.timeStyle ?? '') +
+    '|' +
+    (options.year ?? '') +
+    '|' +
+    (options.month ?? '') +
+    '|' +
+    (options.day ?? '') +
+    '|' +
+    (options.hour ?? '') +
+    '|' +
+    (options.minute ?? '') +
+    '|' +
+    (options.second ?? '') +
+    '|' +
+    (options.weekday ?? '') +
+    '|' +
+    (options.hour12 ?? '')
+  let fmt = dateFormatterCache.get(key)
+  if (!fmt) {
+    fmt = new Intl.DateTimeFormat(locales, options)
+    dateFormatterCache.set(key, fmt)
+  }
+  return fmt
+}
+
+/** Format a numeric value for number / currency / percent column formats. */
+export function formatNumericWithConfig(value: unknown, config: NumericFormatInput): string {
+  const n = typeof value === 'number' ? value : Number(value)
+  if (!Number.isFinite(n)) return String(value ?? '')
+
+  const locales = config.locales
+
+  if (config.type === 'currency') {
+    return getNumberFormatter(locales, {
+      style: 'currency',
+      currency: config.currency ?? 'USD',
+      ...config.options,
+    }).format(n)
+  }
+
+  if (config.type === 'percent') {
+    const frac = config.valueIsPercentPoints === true ? n / 100 : n
+    return getNumberFormatter(locales, {
+      style: 'percent',
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 2,
+      ...config.options,
+    }).format(frac)
+  }
+
+  return getNumberFormatter(locales, config.options ?? {}).format(n)
+}