@svgrid/grid 2.1.22 → 2.2.0

package/src/editor-contract.ts

@@ -44,6 +44,8 @@ export type SvEditorProps = {
   id?: string
   /** Accessible name when there is no visible `label`. */
   ariaLabel?: string
+  /** Busy state - shows a spinner (e.g. while an async value/validation resolves). */
+  loading?: boolean
 }
 
 /**

package/src/export-data-api.test.ts

@@ -1,126 +1,126 @@
-/**
- * The free CSV / TSV / JSON export + copy-to-clipboard now on the grid API.
- * Mounts a real <SvGrid /> and drives api.exportCsv/exportTsv/exportJson/
- * copyToClipboard with download:false so nothing hits the DOM download path.
- */
-import { afterEach, describe, expect, it, vi } from 'vitest'
-import { mount, unmount } from 'svelte'
-import SvGrid from './SvGrid.svelte'
-import {
-  columnFilteringFeature,
-  rowSelectionFeature,
-  rowSortingFeature,
-  tableFeatures,
-} from './index'
-import type { ColumnDef, SvGridApi } from './index'
-
-type Row = { id: number; name: string; price: number; when: string }
-const rows: Row[] = [
-  { id: 1, name: 'ACME, Inc', price: 1234.5, when: '2026-03-04' },
-  { id: 2, name: 'Globex', price: 20, when: '2026-06-01' },
-]
-const columns: ColumnDef<any, Row>[] = [
-  { field: 'name', header: 'Company', width: 180 },
-  { field: 'price', header: 'Price', width: 120, align: 'right', format: { type: 'currency', currency: 'USD' } },
-  { field: 'when', header: 'Date', width: 120 }, // plain string, no format (deterministic)
-]
-
-const features = tableFeatures({ columnFilteringFeature, rowSortingFeature, rowSelectionFeature })
-
-function mountGrid(): Promise<{ api: SvGridApi<any, Row>; destroy: () => void }> {
-  return new Promise((resolve, reject) => {
-    const target = document.createElement('div')
-    document.body.appendChild(target)
-    let done = false
-    const app = mount(SvGrid, {
-      target,
-      props: {
-        data: rows.map((r) => ({ ...r })),
-        columns: columns.map((c) => ({ ...c })),
-        features,
-        getRowId: (r: Row) => String(r.id),
-        rowHeight: 34,
-        containerHeight: 400,
-        virtualization: false,
-        onApiReady(api: SvGridApi<any, Row>) {
-          done = true
-          resolve({ api, destroy: () => { unmount(app); target.remove() } })
-        },
-      } as any,
-    })
-    queueMicrotask(() => { if (!done) reject(new Error('onApiReady never fired')) })
-  })
-}
-
-let cleanup: (() => void) | null = null
-afterEach(() => { cleanup?.(); cleanup = null; vi.restoreAllMocks() })
-
-describe('free grid export: exportCsv', () => {
-  it('serializes visible rows with faithful formatted values + a BOM header', async () => {
-    const { api, destroy } = await mountGrid()
-    cleanup = destroy
-    const csv = await api.exportCsv({ download: false })
-    const lines = csv.replace(/^/, '').split('\r\n')
-    expect(lines[0]).toBe('Company,Price,Date')
-    // Formatted as on screen; the comma in "ACME, Inc" AND in "$1,234.50" both
-    // force RFC-4180 quoting.
-    expect(lines[1]).toBe('"ACME, Inc","$1,234.50",2026-03-04')
-    expect(csv.startsWith('')).toBe(true)
-  })
-
-  it('rawValues:true writes the underlying numbers/strings', async () => {
-    const { api, destroy } = await mountGrid()
-    cleanup = destroy
-    const csv = await api.exportCsv({ download: false, rawValues: true, bom: false })
-    const lines = csv.split('\r\n')
-    expect(lines[1]).toBe('"ACME, Inc",1234.5,2026-03-04')
-  })
-
-  it('honors a column subset in the given order', async () => {
-    const { api, destroy } = await mountGrid()
-    cleanup = destroy
-    const csv = await api.exportCsv({ download: false, bom: false, columns: ['when', 'name'] })
-    expect(csv.split('\r\n')[0]).toBe('Date,Company')
-  })
-})
-
-describe('free grid export: exportTsv / exportJson', () => {
-  it('exportTsv is tab-delimited', async () => {
-    const { api, destroy } = await mountGrid()
-    cleanup = destroy
-    const tsv = await api.exportTsv({ download: false, bom: false })
-    expect(tsv.split('\r\n')[0]).toBe('Company\tPrice\tDate')
-  })
-
-  it('exportJson emits an array of formatted records', async () => {
-    const { api, destroy } = await mountGrid()
-    cleanup = destroy
-    const json = JSON.parse(await api.exportJson({ download: false }))
-    expect(json).toHaveLength(2)
-    expect(json[0]).toEqual({ name: 'ACME, Inc', price: '$1,234.50', when: '2026-03-04' })
-  })
-})
-
-describe('free grid export: copyToClipboard', () => {
-  it('writes TSV to the clipboard by default', async () => {
-    const writeText = vi.fn().mockResolvedValue(undefined)
-    vi.stubGlobal('navigator', { clipboard: { writeText } })
-    const { api, destroy } = await mountGrid()
-    cleanup = destroy
-    const text = await api.copyToClipboard()
-    expect(writeText).toHaveBeenCalledOnce()
-    expect(text.split('\r\n')[0]).toBe('Company\tPrice\tDate')
-    expect(text.startsWith('')).toBe(false) // no BOM on clipboard
-  })
-
-  it('can copy a Markdown table', async () => {
-    const writeText = vi.fn().mockResolvedValue(undefined)
-    vi.stubGlobal('navigator', { clipboard: { writeText } })
-    const { api, destroy } = await mountGrid()
-    cleanup = destroy
-    const md = await api.copyToClipboard({ format: 'markdown' })
-    const lines = md.split('\n')
-    expect(lines[0]).toBe('| Company | Price | Date |')
-    expect(lines[1]).toBe('| --- | ---: | --- |') // Price is right-aligned
-  })
-})
+/**
+ * The free CSV / TSV / JSON export + copy-to-clipboard now on the grid API.
+ * Mounts a real <SvGrid /> and drives api.exportCsv/exportTsv/exportJson/
+ * copyToClipboard with download:false so nothing hits the DOM download path.
+ */
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { mount, unmount } from 'svelte'
+import SvGrid from './SvGrid.svelte'
+import {
+  columnFilteringFeature,
+  rowSelectionFeature,
+  rowSortingFeature,
+  tableFeatures,
+} from './index'
+import type { ColumnDef, SvGridApi } from './index'
+
+type Row = { id: number; name: string; price: number; when: string }
+const rows: Row[] = [
+  { id: 1, name: 'ACME, Inc', price: 1234.5, when: '2026-03-04' },
+  { id: 2, name: 'Globex', price: 20, when: '2026-06-01' },
+]
+const columns: ColumnDef<any, Row>[] = [
+  { field: 'name', header: 'Company', width: 180 },
+  { field: 'price', header: 'Price', width: 120, align: 'right', format: { type: 'currency', currency: 'USD' } },
+  { field: 'when', header: 'Date', width: 120 }, // plain string, no format (deterministic)
+]
+
+const features = tableFeatures({ columnFilteringFeature, rowSortingFeature, rowSelectionFeature })
+
+function mountGrid(): Promise<{ api: SvGridApi<any, Row>; destroy: () => void }> {
+  return new Promise((resolve, reject) => {
+    const target = document.createElement('div')
+    document.body.appendChild(target)
+    let done = false
+    const app = mount(SvGrid, {
+      target,
+      props: {
+        data: rows.map((r) => ({ ...r })),
+        columns: columns.map((c) => ({ ...c })),
+        features,
+        getRowId: (r: Row) => String(r.id),
+        rowHeight: 34,
+        containerHeight: 400,
+        virtualization: false,
+        onApiReady(api: SvGridApi<any, Row>) {
+          done = true
+          resolve({ api, destroy: () => { unmount(app); target.remove() } })
+        },
+      } as any,
+    })
+    queueMicrotask(() => { if (!done) reject(new Error('onApiReady never fired')) })
+  })
+}
+
+let cleanup: (() => void) | null = null
+afterEach(() => { cleanup?.(); cleanup = null; vi.restoreAllMocks() })
+
+describe('free grid export: exportCsv', () => {
+  it('serializes visible rows with faithful formatted values + a BOM header', async () => {
+    const { api, destroy } = await mountGrid()
+    cleanup = destroy
+    const csv = await api.exportCsv({ download: false })
+    const lines = csv.replace(/^/, '').split('\r\n')
+    expect(lines[0]).toBe('Company,Price,Date')
+    // Formatted as on screen; the comma in "ACME, Inc" AND in "$1,234.50" both
+    // force RFC-4180 quoting.
+    expect(lines[1]).toBe('"ACME, Inc","$1,234.50",2026-03-04')
+    expect(csv.startsWith('')).toBe(true)
+  })
+
+  it('rawValues:true writes the underlying numbers/strings', async () => {
+    const { api, destroy } = await mountGrid()
+    cleanup = destroy
+    const csv = await api.exportCsv({ download: false, rawValues: true, bom: false })
+    const lines = csv.split('\r\n')
+    expect(lines[1]).toBe('"ACME, Inc",1234.5,2026-03-04')
+  })
+
+  it('honors a column subset in the given order', async () => {
+    const { api, destroy } = await mountGrid()
+    cleanup = destroy
+    const csv = await api.exportCsv({ download: false, bom: false, columns: ['when', 'name'] })
+    expect(csv.split('\r\n')[0]).toBe('Date,Company')
+  })
+})
+
+describe('free grid export: exportTsv / exportJson', () => {
+  it('exportTsv is tab-delimited', async () => {
+    const { api, destroy } = await mountGrid()
+    cleanup = destroy
+    const tsv = await api.exportTsv({ download: false, bom: false })
+    expect(tsv.split('\r\n')[0]).toBe('Company\tPrice\tDate')
+  })
+
+  it('exportJson emits an array of formatted records', async () => {
+    const { api, destroy } = await mountGrid()
+    cleanup = destroy
+    const json = JSON.parse(await api.exportJson({ download: false }))
+    expect(json).toHaveLength(2)
+    expect(json[0]).toEqual({ name: 'ACME, Inc', price: '$1,234.50', when: '2026-03-04' })
+  })
+})
+
+describe('free grid export: copyToClipboard', () => {
+  it('writes TSV to the clipboard by default', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    vi.stubGlobal('navigator', { clipboard: { writeText } })
+    const { api, destroy } = await mountGrid()
+    cleanup = destroy
+    const text = await api.copyToClipboard()
+    expect(writeText).toHaveBeenCalledOnce()
+    expect(text.split('\r\n')[0]).toBe('Company\tPrice\tDate')
+    expect(text.startsWith('')).toBe(false) // no BOM on clipboard
+  })
+
+  it('can copy a Markdown table', async () => {
+    const writeText = vi.fn().mockResolvedValue(undefined)
+    vi.stubGlobal('navigator', { clipboard: { writeText } })
+    const { api, destroy } = await mountGrid()
+    cleanup = destroy
+    const md = await api.copyToClipboard({ format: 'markdown' })
+    const lines = md.split('\n')
+    expect(lines[0]).toBe('| Company | Price | Date |')
+    expect(lines[1]).toBe('| --- | ---: | --- |') // Price is right-aligned
+  })
+})

package/src/export-format.test.ts

@@ -1,107 +1,107 @@
-import { describe, expect, it } from 'vitest'
-import {
-  coerceExportDate,
-  formatValueForExport,
-  toExcelNumFmt,
-  valueForExcel,
-} from './export-format'
-import type { CellFormatConfig } from './core'
-
-describe('formatValueForExport', () => {
-  it('returns "" for null / undefined', () => {
-    expect(formatValueForExport(null, undefined)).toBe('')
-    expect(formatValueForExport(undefined, { type: 'number' })).toBe('')
-  })
-
-  it('stringifies when there is no format', () => {
-    expect(formatValueForExport(42, undefined)).toBe('42')
-    expect(formatValueForExport('hi', undefined)).toBe('hi')
-  })
-
-  it('formats currency like the grid does', () => {
-    const f: CellFormatConfig = { type: 'currency', currency: 'USD', locales: 'en-US' }
-    expect(formatValueForExport(19.95, f)).toBe('$19.95')
-  })
-
-  it('formats a percent from 0..100 points', () => {
-    const f: CellFormatConfig = { type: 'percent', valueIsPercentPoints: true, locales: 'en-US' }
-    expect(formatValueForExport(42, f)).toBe('42%')
-  })
-
-  it('formats a number with grouping', () => {
-    const f: CellFormatConfig = {
-      type: 'number',
-      locales: 'en-US',
-      options: { minimumFractionDigits: 2 },
-    }
-    expect(formatValueForExport(1234567, f)).toBe('1,234,567.00')
-  })
-
-  it('formats a date with the y-m-d pattern', () => {
-    const f: CellFormatConfig = { type: 'date', pattern: 'y-m-d', locales: 'en-US' }
-    expect(formatValueForExport(new Date('2026-03-04T00:00:00Z'), f)).toMatch(/2026/)
-  })
-
-  it('falls back to String() when a date value is not parseable', () => {
-    const f: CellFormatConfig = { type: 'date' }
-    expect(formatValueForExport('not-a-date', f)).toBe('not-a-date')
-  })
-})
-
-describe('coerceExportDate', () => {
-  it('accepts Date, epoch ms, and ISO strings; rejects junk', () => {
-    expect(coerceExportDate(new Date('2020-01-01')) instanceof Date).toBe(true)
-    expect(coerceExportDate(1_600_000_000_000) instanceof Date).toBe(true)
-    expect(coerceExportDate('2021-06-15') instanceof Date).toBe(true)
-    expect(coerceExportDate('nope')).toBeNull()
-    expect(coerceExportDate(new Date('bad'))).toBeNull()
-    expect(coerceExportDate(null)).toBeNull()
-  })
-})
-
-describe('toExcelNumFmt', () => {
-  it('maps number/currency/percent/date to Excel codes', () => {
-    expect(toExcelNumFmt({ type: 'number' })).toBe('#,##0')
-    expect(toExcelNumFmt({ type: 'number', options: { maximumFractionDigits: 2 } })).toBe('#,##0.00')
-    expect(toExcelNumFmt({ type: 'currency', currency: 'USD' })).toBe('"$"#,##0.00')
-    expect(toExcelNumFmt({ type: 'currency', currency: 'EUR' })).toBe('"€"#,##0.00')
-    expect(toExcelNumFmt({ type: 'percent' })).toBe('0.00%')
-    expect(toExcelNumFmt({ type: 'date' })).toBe('yyyy-mm-dd')
-    expect(toExcelNumFmt({ type: 'datetime' })).toBe('yyyy-mm-dd hh:mm')
-  })
-
-  it('falls back to the ISO code for currencies without a glyph', () => {
-    expect(toExcelNumFmt({ type: 'currency', currency: 'CHF' })).toBe('"CHF"#,##0.00')
-  })
-
-  it('returns undefined without a format', () => {
-    expect(toExcelNumFmt(undefined)).toBeUndefined()
-  })
-})
-
-describe('valueForExcel', () => {
-  it('keeps numbers/currency numeric', () => {
-    expect(valueForExcel(19.95, { type: 'currency' })).toEqual({ ok: true, value: 19.95 })
-    expect(valueForExcel(1234, { type: 'number' })).toEqual({ ok: true, value: 1234 })
-  })
-
-  it('divides percent points to a fraction', () => {
-    expect(valueForExcel(42, { type: 'percent', valueIsPercentPoints: true })).toEqual({
-      ok: true,
-      value: 0.42,
-    })
-    expect(valueForExcel(0.42, { type: 'percent' })).toEqual({ ok: true, value: 0.42 })
-  })
-
-  it('returns real Dates for date formats', () => {
-    const r = valueForExcel('2026-03-04', { type: 'date' })
-    expect(r.ok).toBe(true)
-    if (r.ok) expect(r.value).toBeInstanceOf(Date)
-  })
-
-  it('reports not-ok for non-representable values', () => {
-    expect(valueForExcel('abc', { type: 'number' })).toEqual({ ok: false })
-    expect(valueForExcel(5, undefined)).toEqual({ ok: false })
-    expect(valueForExcel(null, { type: 'number' })).toEqual({ ok: false })
-  })
-})
+import { describe, expect, it } from 'vitest'
+import {
+  coerceExportDate,
+  formatValueForExport,
+  toExcelNumFmt,
+  valueForExcel,
+} from './export-format'
+import type { CellFormatConfig } from './core'
+
+describe('formatValueForExport', () => {
+  it('returns "" for null / undefined', () => {
+    expect(formatValueForExport(null, undefined)).toBe('')
+    expect(formatValueForExport(undefined, { type: 'number' })).toBe('')
+  })
+
+  it('stringifies when there is no format', () => {
+    expect(formatValueForExport(42, undefined)).toBe('42')
+    expect(formatValueForExport('hi', undefined)).toBe('hi')
+  })
+
+  it('formats currency like the grid does', () => {
+    const f: CellFormatConfig = { type: 'currency', currency: 'USD', locales: 'en-US' }
+    expect(formatValueForExport(19.95, f)).toBe('$19.95')
+  })
+
+  it('formats a percent from 0..100 points', () => {
+    const f: CellFormatConfig = { type: 'percent', valueIsPercentPoints: true, locales: 'en-US' }
+    expect(formatValueForExport(42, f)).toBe('42%')
+  })
+
+  it('formats a number with grouping', () => {
+    const f: CellFormatConfig = {
+      type: 'number',
+      locales: 'en-US',
+      options: { minimumFractionDigits: 2 },
+    }
+    expect(formatValueForExport(1234567, f)).toBe('1,234,567.00')
+  })
+
+  it('formats a date with the y-m-d pattern', () => {
+    const f: CellFormatConfig = { type: 'date', pattern: 'y-m-d', locales: 'en-US' }
+    expect(formatValueForExport(new Date('2026-03-04T00:00:00Z'), f)).toMatch(/2026/)
+  })
+
+  it('falls back to String() when a date value is not parseable', () => {
+    const f: CellFormatConfig = { type: 'date' }
+    expect(formatValueForExport('not-a-date', f)).toBe('not-a-date')
+  })
+})
+
+describe('coerceExportDate', () => {
+  it('accepts Date, epoch ms, and ISO strings; rejects junk', () => {
+    expect(coerceExportDate(new Date('2020-01-01')) instanceof Date).toBe(true)
+    expect(coerceExportDate(1_600_000_000_000) instanceof Date).toBe(true)
+    expect(coerceExportDate('2021-06-15') instanceof Date).toBe(true)
+    expect(coerceExportDate('nope')).toBeNull()
+    expect(coerceExportDate(new Date('bad'))).toBeNull()
+    expect(coerceExportDate(null)).toBeNull()
+  })
+})
+
+describe('toExcelNumFmt', () => {
+  it('maps number/currency/percent/date to Excel codes', () => {
+    expect(toExcelNumFmt({ type: 'number' })).toBe('#,##0')
+    expect(toExcelNumFmt({ type: 'number', options: { maximumFractionDigits: 2 } })).toBe('#,##0.00')
+    expect(toExcelNumFmt({ type: 'currency', currency: 'USD' })).toBe('"$"#,##0.00')
+    expect(toExcelNumFmt({ type: 'currency', currency: 'EUR' })).toBe('"€"#,##0.00')
+    expect(toExcelNumFmt({ type: 'percent' })).toBe('0.00%')
+    expect(toExcelNumFmt({ type: 'date' })).toBe('yyyy-mm-dd')
+    expect(toExcelNumFmt({ type: 'datetime' })).toBe('yyyy-mm-dd hh:mm')
+  })
+
+  it('falls back to the ISO code for currencies without a glyph', () => {
+    expect(toExcelNumFmt({ type: 'currency', currency: 'CHF' })).toBe('"CHF"#,##0.00')
+  })
+
+  it('returns undefined without a format', () => {
+    expect(toExcelNumFmt(undefined)).toBeUndefined()
+  })
+})
+
+describe('valueForExcel', () => {
+  it('keeps numbers/currency numeric', () => {
+    expect(valueForExcel(19.95, { type: 'currency' })).toEqual({ ok: true, value: 19.95 })
+    expect(valueForExcel(1234, { type: 'number' })).toEqual({ ok: true, value: 1234 })
+  })
+
+  it('divides percent points to a fraction', () => {
+    expect(valueForExcel(42, { type: 'percent', valueIsPercentPoints: true })).toEqual({
+      ok: true,
+      value: 0.42,
+    })
+    expect(valueForExcel(0.42, { type: 'percent' })).toEqual({ ok: true, value: 0.42 })
+  })
+
+  it('returns real Dates for date formats', () => {
+    const r = valueForExcel('2026-03-04', { type: 'date' })
+    expect(r.ok).toBe(true)
+    if (r.ok) expect(r.value).toBeInstanceOf(Date)
+  })
+
+  it('reports not-ok for non-representable values', () => {
+    expect(valueForExcel('abc', { type: 'number' })).toEqual({ ok: false })
+    expect(valueForExcel(5, undefined)).toEqual({ ok: false })
+    expect(valueForExcel(null, { type: 'number' })).toEqual({ ok: false })
+  })
+})