@svgrid/grid 3.0.0 → 3.0.1

package/src/ui-localization.test.ts

@@ -1,113 +1,113 @@
-/**
- * Every user-facing string in the kit must be overridable.
- *
- * These components shipped chrome copy - toolbar tooltips, "No matches", the
- * lazy-load placeholder, search-box labels - baked in as literals, so an app in
- * any other language had English fragments it could not reach. Each is now a
- * prop; these tests pin that down so the strings cannot quietly go back to
- * being hard-coded.
- */
-import { describe, expect, it, afterEach } from 'vitest'
-import { mount, unmount, flushSync } from 'svelte'
-import SvRichText from './SvRichText.svelte'
-import SvMultiSelect from './SvMultiSelect.svelte'
-import SvGridSelect from './SvGridSelect.svelte'
-import SvTree from './SvTree.svelte'
-
-function mnt(Comp: unknown, props: Record<string, unknown>) {
-  const target = document.createElement('div')
-  document.body.appendChild(target)
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  const app = mount(Comp as any, { target, props: props as any })
-  flushSync()
-  return { target, destroy: () => { unmount(app); target.remove() } }
-}
-
-let cleanup: (() => void) | null = null
-afterEach(() => {
-  cleanup?.()
-  cleanup = null
-  document.querySelectorAll('.sv-ms__panel, .sv-gs__panel').forEach((n) => n.remove())
-})
-
-describe('SvRichText localization', () => {
-  it('defaults to English toolbar labels', () => {
-    const g = mnt(SvRichText, {})
-    cleanup = g.destroy
-    const bold = g.target.querySelector('[data-tool="bold"]')!
-    expect(bold.getAttribute('title')).toBe('Bold')
-    expect(bold.getAttribute('aria-label')).toBe('Bold')
-    expect(g.target.querySelector('[role="toolbar"]')!.getAttribute('aria-label')).toBe('Formatting')
-  })
-
-  it('takes per-tool overrides through `messages`', () => {
-    const g = mnt(SvRichText, { messages: { bold: 'Fett', italic: 'Kursiv', toolbar: 'Formatierung' } })
-    cleanup = g.destroy
-    const bold = g.target.querySelector('[data-tool="bold"]')!
-    expect(bold.getAttribute('title')).toBe('Fett')
-    expect(bold.getAttribute('aria-label')).toBe('Fett')
-    expect(g.target.querySelector('[data-tool="italic"]')!.getAttribute('title')).toBe('Kursiv')
-    expect(g.target.querySelector('[role="toolbar"]')!.getAttribute('aria-label')).toBe('Formatierung')
-    // An un-overridden key keeps its default rather than going blank.
-    expect(g.target.querySelector('[data-tool="underline"]')!.getAttribute('title')).toBe('Underline')
-  })
-
-  it('keeps the glyphs fixed - they are not language-dependent', () => {
-    const g = mnt(SvRichText, { messages: { bold: 'Fett' } })
-    cleanup = g.destroy
-    expect(g.target.querySelector('[data-tool="bold"]')!.textContent?.trim()).toBe('B')
-  })
-})
-
-describe('empty / search text is overridable', () => {
-  it('SvMultiSelect emptyText + search chrome', () => {
-    const g = mnt(SvMultiSelect, {
-      options: [],
-      emptyText: 'Keine Treffer',
-      searchPlaceholder: 'Suchen…',
-      searchLabel: 'Optionen suchen',
-    })
-    cleanup = g.destroy
-    g.target.querySelector<HTMLButtonElement>('.sv-ms__trigger')?.click()
-    flushSync()
-    const panel = document.querySelector('.sv-ms__panel')
-    expect(panel?.textContent).toContain('Keine Treffer')
-    const search = panel?.querySelector('input')
-    expect(search?.getAttribute('placeholder')).toBe('Suchen…')
-    expect(search?.getAttribute('aria-label')).toBe('Optionen suchen')
-  })
-
-  it('SvGridSelect emptyText + search chrome', () => {
-    const g = mnt(SvGridSelect, {
-      columns: [{ field: 'name', header: 'Name' }],
-      options: [],
-      emptyText: 'Sin resultados',
-      searchPlaceholder: 'Buscar…',
-      searchLabel: 'Buscar opciones',
-    })
-    cleanup = g.destroy
-    g.target.querySelector<HTMLButtonElement>('.sv-gs__trigger')?.click()
-    flushSync()
-    const panel = document.querySelector('.sv-gs__panel')
-    expect(panel?.textContent).toContain('Sin resultados')
-    const search = panel?.querySelector('input')
-    expect(search?.getAttribute('placeholder')).toBe('Buscar…')
-    expect(search?.getAttribute('aria-label')).toBe('Buscar opciones')
-  })
-
-  it('SvTree lazy-load placeholder', async () => {
-    let resolveKids: (v: Array<{ id: string; label: string }>) => void = () => {}
-    const g = mnt(SvTree, {
-      nodes: [{ id: 'root', label: 'Root', lazy: true }],
-      loadChildren: () => new Promise<Array<{ id: string; label: string }>>((r) => { resolveKids = r }),
-      loadingText: 'Chargement…',
-    })
-    cleanup = g.destroy
-    g.target.querySelector<HTMLElement>('.sv-tree__twist')?.click()
-    flushSync()
-    await Promise.resolve()
-    flushSync()
-    expect(g.target.textContent).toContain('Chargement…')
-    resolveKids([{ id: 'kid', label: 'Child' }])
-  })
-})
+/**
+ * Every user-facing string in the kit must be overridable.
+ *
+ * These components shipped chrome copy - toolbar tooltips, "No matches", the
+ * lazy-load placeholder, search-box labels - baked in as literals, so an app in
+ * any other language had English fragments it could not reach. Each is now a
+ * prop; these tests pin that down so the strings cannot quietly go back to
+ * being hard-coded.
+ */
+import { describe, expect, it, afterEach } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvRichText from './SvRichText.svelte'
+import SvMultiSelect from './SvMultiSelect.svelte'
+import SvGridSelect from './SvGridSelect.svelte'
+import SvTree from './SvTree.svelte'
+
+function mnt(Comp: unknown, props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const app = mount(Comp as any, { target, props: props as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+let cleanup: (() => void) | null = null
+afterEach(() => {
+  cleanup?.()
+  cleanup = null
+  document.querySelectorAll('.sv-ms__panel, .sv-gs__panel').forEach((n) => n.remove())
+})
+
+describe('SvRichText localization', () => {
+  it('defaults to English toolbar labels', () => {
+    const g = mnt(SvRichText, {})
+    cleanup = g.destroy
+    const bold = g.target.querySelector('[data-tool="bold"]')!
+    expect(bold.getAttribute('title')).toBe('Bold')
+    expect(bold.getAttribute('aria-label')).toBe('Bold')
+    expect(g.target.querySelector('[role="toolbar"]')!.getAttribute('aria-label')).toBe('Formatting')
+  })
+
+  it('takes per-tool overrides through `messages`', () => {
+    const g = mnt(SvRichText, { messages: { bold: 'Fett', italic: 'Kursiv', toolbar: 'Formatierung' } })
+    cleanup = g.destroy
+    const bold = g.target.querySelector('[data-tool="bold"]')!
+    expect(bold.getAttribute('title')).toBe('Fett')
+    expect(bold.getAttribute('aria-label')).toBe('Fett')
+    expect(g.target.querySelector('[data-tool="italic"]')!.getAttribute('title')).toBe('Kursiv')
+    expect(g.target.querySelector('[role="toolbar"]')!.getAttribute('aria-label')).toBe('Formatierung')
+    // An un-overridden key keeps its default rather than going blank.
+    expect(g.target.querySelector('[data-tool="underline"]')!.getAttribute('title')).toBe('Underline')
+  })
+
+  it('keeps the glyphs fixed - they are not language-dependent', () => {
+    const g = mnt(SvRichText, { messages: { bold: 'Fett' } })
+    cleanup = g.destroy
+    expect(g.target.querySelector('[data-tool="bold"]')!.textContent?.trim()).toBe('B')
+  })
+})
+
+describe('empty / search text is overridable', () => {
+  it('SvMultiSelect emptyText + search chrome', () => {
+    const g = mnt(SvMultiSelect, {
+      options: [],
+      emptyText: 'Keine Treffer',
+      searchPlaceholder: 'Suchen…',
+      searchLabel: 'Optionen suchen',
+    })
+    cleanup = g.destroy
+    g.target.querySelector<HTMLButtonElement>('.sv-ms__trigger')?.click()
+    flushSync()
+    const panel = document.querySelector('.sv-ms__panel')
+    expect(panel?.textContent).toContain('Keine Treffer')
+    const search = panel?.querySelector('input')
+    expect(search?.getAttribute('placeholder')).toBe('Suchen…')
+    expect(search?.getAttribute('aria-label')).toBe('Optionen suchen')
+  })
+
+  it('SvGridSelect emptyText + search chrome', () => {
+    const g = mnt(SvGridSelect, {
+      columns: [{ field: 'name', header: 'Name' }],
+      options: [],
+      emptyText: 'Sin resultados',
+      searchPlaceholder: 'Buscar…',
+      searchLabel: 'Buscar opciones',
+    })
+    cleanup = g.destroy
+    g.target.querySelector<HTMLButtonElement>('.sv-gs__trigger')?.click()
+    flushSync()
+    const panel = document.querySelector('.sv-gs__panel')
+    expect(panel?.textContent).toContain('Sin resultados')
+    const search = panel?.querySelector('input')
+    expect(search?.getAttribute('placeholder')).toBe('Buscar…')
+    expect(search?.getAttribute('aria-label')).toBe('Buscar opciones')
+  })
+
+  it('SvTree lazy-load placeholder', async () => {
+    let resolveKids: (v: Array<{ id: string; label: string }>) => void = () => {}
+    const g = mnt(SvTree, {
+      nodes: [{ id: 'root', label: 'Root', lazy: true }],
+      loadChildren: () => new Promise<Array<{ id: string; label: string }>>((r) => { resolveKids = r }),
+      loadingText: 'Chargement…',
+    })
+    cleanup = g.destroy
+    g.target.querySelector<HTMLElement>('.sv-tree__twist')?.click()
+    flushSync()
+    await Promise.resolve()
+    flushSync()
+    expect(g.target.textContent).toContain('Chargement…')
+    resolveKids([{ id: 'kid', label: 'Child' }])
+  })
+})

package/src/ui-range.test.ts

@@ -1,70 +1,70 @@
-/** Group E (slider + gauge) component tests. */
-import { describe, expect, it } from 'vitest'
-import { mount, unmount, flushSync } from 'svelte'
-import SvSlider from './SvSlider.svelte'
-import SvGauge from './SvGauge.svelte'
-
-function mnt(Comp: any, props: Record<string, unknown>) {
-  const target = document.createElement('div')
-  document.body.appendChild(target)
-  const app = mount(Comp, { target, props: props as any })
-  flushSync()
-  return { target, destroy: () => { unmount(app); target.remove() } }
-}
-
-describe('SvSlider', () => {
-  it('single: arrow keys step within bounds', () => {
-    let got: any
-    const { target, destroy } = mnt(SvSlider, { value: 50, min: 0, max: 100, step: 5, onChange: (v: any) => (got = v) })
-    try {
-      const thumb = target.querySelector<HTMLElement>('[role="slider"]')!
-      expect(thumb.getAttribute('aria-valuenow')).toBe('50')
-      thumb.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
-      flushSync()
-      expect(got).toBe(55)
-      thumb.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }))
-      flushSync()
-      expect(got).toBe(0)
-    } finally { destroy() }
-  })
-  it('range: two thumbs, low thumb capped at high value', () => {
-    let got: any
-    const { target, destroy } = mnt(SvSlider, { value: [20, 80], range: true, min: 0, max: 100, step: 10, onChange: (v: any) => (got = v) })
-    try {
-      const thumbs = target.querySelectorAll<HTMLElement>('[role="slider"]')
-      expect(thumbs.length).toBe(2)
-      thumbs[0]!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
-      flushSync()
-      expect(got).toEqual([30, 80])
-    } finally { destroy() }
-  })
-  it('wires validation ARIA onto the thumb (aria-invalid + describedby)', () => {
-    const { target, destroy } = mnt(SvSlider, { value: 50, invalid: true, error: 'Out of range', id: 'vol', required: true })
-    try {
-      const thumb = target.querySelector<HTMLElement>('[role="slider"]')!
-      expect(thumb.getAttribute('aria-invalid')).toBe('true')
-      expect(thumb.getAttribute('aria-required')).toBe('true')
-      expect(thumb.getAttribute('aria-describedby')).toContain('vol__error')
-    } finally { destroy() }
-  })
-})
-
-describe('SvGauge', () => {
-  it('exposes a meter role with clamped value + label', () => {
-    const { target, destroy } = mnt(SvGauge, { value: 150, min: 0, max: 100 })
-    try {
-      const meter = target.querySelector('[role="meter"]')!
-      expect(meter.getAttribute('aria-valuenow')).toBe('100') // clamped to max
-      expect(target.querySelector('.sv-gauge__label')!.textContent).toContain('100')
-    } finally { destroy() }
-  })
-  it('renders one path per band when bands are given', () => {
-    const { target, destroy } = mnt(SvGauge, {
-      value: 50, bands: [{ from: 0, to: 50, color: '#16a34a' }, { from: 50, to: 100, color: '#dc2626' }],
-    })
-    try {
-      // track + 2 bands = 3 paths, no value arc
-      expect(target.querySelectorAll('path').length).toBe(3)
-    } finally { destroy() }
-  })
-})
+/** Group E (slider + gauge) component tests. */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvSlider from './SvSlider.svelte'
+import SvGauge from './SvGauge.svelte'
+
+function mnt(Comp: any, props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(Comp, { target, props: props as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+describe('SvSlider', () => {
+  it('single: arrow keys step within bounds', () => {
+    let got: any
+    const { target, destroy } = mnt(SvSlider, { value: 50, min: 0, max: 100, step: 5, onChange: (v: any) => (got = v) })
+    try {
+      const thumb = target.querySelector<HTMLElement>('[role="slider"]')!
+      expect(thumb.getAttribute('aria-valuenow')).toBe('50')
+      thumb.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
+      flushSync()
+      expect(got).toBe(55)
+      thumb.dispatchEvent(new KeyboardEvent('keydown', { key: 'Home', bubbles: true }))
+      flushSync()
+      expect(got).toBe(0)
+    } finally { destroy() }
+  })
+  it('range: two thumbs, low thumb capped at high value', () => {
+    let got: any
+    const { target, destroy } = mnt(SvSlider, { value: [20, 80], range: true, min: 0, max: 100, step: 10, onChange: (v: any) => (got = v) })
+    try {
+      const thumbs = target.querySelectorAll<HTMLElement>('[role="slider"]')
+      expect(thumbs.length).toBe(2)
+      thumbs[0]!.dispatchEvent(new KeyboardEvent('keydown', { key: 'ArrowRight', bubbles: true }))
+      flushSync()
+      expect(got).toEqual([30, 80])
+    } finally { destroy() }
+  })
+  it('wires validation ARIA onto the thumb (aria-invalid + describedby)', () => {
+    const { target, destroy } = mnt(SvSlider, { value: 50, invalid: true, error: 'Out of range', id: 'vol', required: true })
+    try {
+      const thumb = target.querySelector<HTMLElement>('[role="slider"]')!
+      expect(thumb.getAttribute('aria-invalid')).toBe('true')
+      expect(thumb.getAttribute('aria-required')).toBe('true')
+      expect(thumb.getAttribute('aria-describedby')).toContain('vol__error')
+    } finally { destroy() }
+  })
+})
+
+describe('SvGauge', () => {
+  it('exposes a meter role with clamped value + label', () => {
+    const { target, destroy } = mnt(SvGauge, { value: 150, min: 0, max: 100 })
+    try {
+      const meter = target.querySelector('[role="meter"]')!
+      expect(meter.getAttribute('aria-valuenow')).toBe('100') // clamped to max
+      expect(target.querySelector('.sv-gauge__label')!.textContent).toContain('100')
+    } finally { destroy() }
+  })
+  it('renders one path per band when bands are given', () => {
+    const { target, destroy } = mnt(SvGauge, {
+      value: 50, bands: [{ from: 0, to: 50, color: '#16a34a' }, { from: 50, to: 100, color: '#dc2626' }],
+    })
+    try {
+      // track + 2 bands = 3 paths, no value arc
+      expect(target.querySelectorAll('path').length).toBe(3)
+    } finally { destroy() }
+  })
+})