@svgrid/grid 1.2.21 → 1.2.23

package/src/datetime/mask.ts

@@ -0,0 +1,84 @@
+/**
+ * mask - a tiny pattern-mask engine shared by SvMaskedInput / SvPhoneInput.
+ * Pattern tokens:
+ *   #  a digit (0-9)
+ *   A  a letter (a-z A-Z)
+ *   *  a letter or digit
+ * Any other character is a literal that is auto-inserted. Framework-free.
+ */
+
+const isDigit = (c: string) => c >= '0' && c <= '9'
+const isAlpha = (c: string) => /[a-zA-Z]/.test(c)
+
+function matches(token: string, ch: string): boolean {
+  if (token === '#') return isDigit(ch)
+  if (token === 'A') return isAlpha(ch)
+  if (token === '*') return isDigit(ch) || isAlpha(ch)
+  return false
+}
+
+const isToken = (c: string) => c === '#' || c === 'A' || c === '*'
+
+/**
+ * Apply `pattern` to raw input `value`, inserting literals and dropping chars
+ * that don't fit the next token. Returns the formatted string and the count of
+ * consumed input characters (useful for caret math).
+ */
+export function applyMask(value: string, pattern: string): { formatted: string; filled: number } {
+  let out = ''
+  let vi = 0
+  let filled = 0
+  for (let pi = 0; pi < pattern.length; pi++) {
+    const token = pattern[pi]!
+    if (!isToken(token)) {
+      // Literal: emit it only once we have (or will have) more input to place.
+      out += token
+      // Skip a matching literal the user may have typed.
+      if (value[vi] === token) vi++
+      continue
+    }
+    // Advance through input until a char fits this token.
+    while (vi < value.length && !matches(token, value[vi]!)) vi++
+    if (vi >= value.length) break // no more input for this token
+    out += value[vi]!
+    vi++
+    filled++
+  }
+  // Drop any trailing literals with no following data char.
+  return { formatted: trimTrailingLiterals(out), filled }
+}
+
+function trimTrailingLiterals(out: string): string {
+  // Count how many token-positions are filled; cut the string at the last
+  // filled data char plus any literals strictly before the next token.
+  let lastData = -1
+  for (let i = 0; i < out.length; i++) {
+    const c = out[i]!
+    if (isDigit(c) || isAlpha(c)) lastData = i
+  }
+  if (lastData < 0) return ''
+  // Keep literals that sit between data chars but trim the tail after last data.
+  return out.slice(0, lastData + 1)
+}
+
+/** Strip literals, returning only the data characters the user supplied. */
+export function unmask(value: string, pattern: string): string {
+  let out = ''
+  let vi = 0
+  for (let pi = 0; pi < pattern.length && vi < value.length; pi++) {
+    const token = pattern[pi]!
+    if (!isToken(token)) {
+      if (value[vi] === token) vi++
+      continue
+    }
+    while (vi < value.length && !matches(token, value[vi]!)) vi++
+    if (vi < value.length) { out += value[vi]!; vi++ }
+  }
+  return out
+}
+
+/** True when every token position in the pattern is filled. */
+export function isMaskComplete(value: string, pattern: string): boolean {
+  const tokenCount = [...pattern].filter(isToken).length
+  return unmask(value, pattern).length >= tokenCount
+}

package/src/editing.test.ts

@@ -834,4 +834,26 @@ describe('clipboard fallbacks (non-paste branches only)', () => {
     expect(ctx.internalData[0]).toMatchObject({ a: 'X', b: 'Y' })
     expect(ctx.internalData[1]).toMatchObject({ a: 'Z', b: 'W' })
   })
+
+  it('onGridPaste bails while a cell is being edited (native editor paste wins)', () => {
+    Object.defineProperty(navigator, 'clipboard', {
+      value: undefined, // fallback path (Firefox / insecure) - would otherwise hijack
+      configurable: true,
+    })
+    const { ctx, ed } = editingFor({
+      columns: [{ id: 'a', field: 'a', editorType: 'text', editable: true }],
+      data: [{ a: 'orig' }],
+    })
+    ctx.selectionRange = { anchor: { rowIndex: 0, colIndex: 0 }, focus: { rowIndex: 0, colIndex: 0 } }
+    ctx.editingCell = { rowId: '0', columnId: 'a', editorType: 'text', value: 'orig' }
+    const ev = {
+      clipboardData: { getData: () => 'PASTED' },
+      preventDefault: vi.fn(),
+    } as unknown as ClipboardEvent
+    ed.onGridPaste(ev)
+    // The grid must NOT preventDefault (so the editor's native paste proceeds)
+    // and must NOT write to the data cell.
+    expect(ev.preventDefault).not.toHaveBeenCalled()
+    expect(ctx.internalData[0]).toMatchObject({ a: 'orig' })
+  })
 })

package/src/editing.ts

@@ -342,7 +342,7 @@ export function createEditing<
     }
   }
 
-  function updateEditingCellValue(value: string) {
+  function updateEditingCellValue(value: unknown) {
     ctx.editingCell = ctx.editingCell ? { ...ctx.editingCell, value } : ctx.editingCell;
   }
 
@@ -442,6 +442,12 @@ export function createEditing<
    * (no preventDefault) whenever the async API is unavailable.
    */
   function onGridPaste(event: ClipboardEvent) {
+    // A cell is being edited: the focused editor input handles its own paste
+    // natively. Never hijack it for a range paste - doing so (on Firefox /
+    // insecure contexts, where the async Clipboard API is unavailable) would
+    // preventDefault the editor's paste and write to the data cell instead,
+    // so the edit "wouldn't update".
+    if (ctx.editingCell) return;
     // When the async API is available the keydown handler already pasted via
     // pasteFromClipboard(); ignore the (suppressed) native event so we don't
     // paste twice.

package/src/editors/cell-editors.ts

@@ -4,6 +4,10 @@
   | 'date'
   | 'datetime'
   | 'time'
+  // Opt-out of the rich date/time pickers: render the plain native inputs.
+  | 'date-native'
+  | 'datetime-native'
+  | 'time-native'
   | 'password'
   | 'checkbox'
   | 'list'
@@ -50,10 +54,12 @@ export function normalizeEditorOptions(
 }
 
 export function parseEditorValue(
-  type: CellEditorType,
+  rawType: CellEditorType,
   value: unknown,
   opts?: ParseEditorValueOptions,
 ) {
+  // `date-native` etc. parse identically to their rich counterparts.
+  const type = rawType.replace(/-native$/, '') as CellEditorType
   if (type === 'number') {
     const parsed = Number(value)
     return Number.isFinite(parsed) ? parsed : null

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

@@ -0,0 +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
+  })
+})

package/src/export-format.test.ts

@@ -0,0 +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 })
+  })
+})