@svgrid/grid 1.2.34 → 2.0.1

package/src/SvFileUpload.test.ts

@@ -0,0 +1,59 @@
+/**
+ * Tests for the file-upload core's pure accept matching, plus SvFileUpload
+ * rendering: the dropzone carries the editor contract, the selected-files list
+ * renders, and remove emits the trimmed list.
+ */
+import { describe, expect, it } from 'vitest'
+import { mount, unmount, flushSync } from 'svelte'
+import SvFileUpload from './SvFileUpload.svelte'
+import { fileMatchesAccept } from './createFileUpload.svelte'
+
+const mk = (name: string, type = '') => new File(['x'], name, { type })
+
+describe('fileMatchesAccept', () => {
+  it('matches extensions, MIME globs and exact MIME (and passes when empty)', () => {
+    expect(fileMatchesAccept(mk('a.pdf'), '.pdf')).toBe(true)
+    expect(fileMatchesAccept(mk('a.png', 'image/png'), 'image/*')).toBe(true)
+    expect(fileMatchesAccept(mk('a.png', 'image/png'), 'image/png')).toBe(true)
+    expect(fileMatchesAccept(mk('a.txt', 'text/plain'), 'image/*,.pdf')).toBe(false)
+    expect(fileMatchesAccept(mk('anything'), undefined)).toBe(true)
+  })
+})
+
+function mountFu(props: Record<string, unknown>) {
+  const target = document.createElement('div')
+  document.body.appendChild(target)
+  const app = mount(SvFileUpload, { target, props: props as any })
+  flushSync()
+  return { target, destroy: () => { unmount(app); target.remove() } }
+}
+
+describe('SvFileUpload', () => {
+  it('renders a dropzone with the editor contract wired', () => {
+    const { target, destroy } = mountFu({ files: [], accept: 'image/*', label: 'Avatar', required: true, invalid: true, error: 'Required' })
+    try {
+      const zone = target.querySelector<HTMLElement>('.sv-file__zone')!
+      expect(zone.getAttribute('role')).toBe('button')
+      expect(zone.getAttribute('aria-invalid')).toBe('true')
+      expect(zone.getAttribute('aria-required')).toBe('true')
+      expect(target.querySelector('.sv-field__label')!.textContent).toContain('Avatar')
+      expect(target.querySelector('.sv-field__error')!.textContent).toBe('Required')
+      const input = target.querySelector<HTMLInputElement>('.sv-file__input')!
+      expect(input.accept).toBe('image/*')
+    } finally { destroy() }
+  })
+
+  it('lists selected files and removes one on click', () => {
+    let got: File[] | undefined
+    const files = [mk('a.png', 'image/png'), mk('b.png', 'image/png')]
+    const { target, destroy } = mountFu({ files, multiple: true, onChange: (f: File[]) => (got = f) })
+    try {
+      const items = target.querySelectorAll('.sv-file__item')
+      expect(items).toHaveLength(2)
+      target.querySelector<HTMLButtonElement>('.sv-file__remove')!.click()
+      flushSync()
+      expect(got).toHaveLength(1)
+      expect(got![0].name).toBe('b.png')
+    } finally { destroy() }
+  })
+})

package/src/SvForm.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" module>
+  import type { Validator } from './validators'
+
   export type FormFieldType =
     | 'text' | 'email' | 'tel' | 'textarea' | 'number' | 'password'
     | 'select' | 'checkbox' | 'switch' | 'date' | 'color' | 'rating'
@@ -10,6 +12,8 @@
     required?: boolean
     placeholder?: string
     options?: Array<{ value: string | number; label: string }>
+    /** Declarative validation rules (see `rules` - email/pattern/min/compare...). */
+    rules?: ReadonlyArray<Validator>
     /** Return an error message, or null/undefined when valid. */
     validate?: (value: any, values: Record<string, any>) => string | null | undefined
     /** Span full width in the grid. */
@@ -32,6 +36,7 @@
   import SvColorInput from './SvColorInput.svelte'
   import SvRating from './SvRating.svelte'
   import SvButton from './SvButton.svelte'
+  import { runRules } from './validators'
 
   type Props = {
     fields: ReadonlyArray<FormField>
@@ -64,7 +69,8 @@
     const v = values[name]
     let err: string | null | undefined = null
     if (field.required && (v == null || v === '' || (Array.isArray(v) && !v.length))) err = `${field.label} is required`
-    else if (field.validate) err = field.validate(v, values)
+    if (!err && field.rules) err = runRules(v, field.rules, values)
+    if (!err && field.validate) err = field.validate(v, values)
     const next = { ...errors }
     if (err) next[name] = err
     else delete next[name]

package/src/SvGauge.svelte

@@ -7,6 +7,7 @@
    * The arc/needle geometry + `role="meter"` ARIA live in the headless
    * `createGauge` core; this component is just one styled renderer over it.
    */
+  import { type EditorDir } from './editor-contract'
   import { createGauge } from './createGauge.svelte'
 
   type Band = { from: number; to: number; color: string }
@@ -28,6 +29,8 @@
     thickness?: number
     formatValue?: (v: number) => string
     ariaLabel?: string
+    /** Text direction for the center label / unit. */
+    dir?: EditorDir
   }
 
   let {
@@ -43,8 +46,11 @@
     thickness = 14,
     formatValue,
     ariaLabel,
+    dir,
   }: Props = $props()
 
+  const resolvedDir = $derived(dir === 'ltr' || dir === 'rtl' ? dir : undefined)
+
   const gauge = createGauge({
     value: () => value,
     min: () => min,
@@ -63,7 +69,7 @@
   const display = $derived(label ?? `${formatValue ? formatValue(clamped) : Math.round(clamped)}${unit}`)
 </script>
 
-<div class="sv-gauge" {...gauge.rootProps()}>
+<div class="sv-gauge" dir={resolvedDir} {...gauge.rootProps()}>
   <svg viewBox={`0 0 ${size} ${size}`} width={size} height={size} class="sv-gauge__svg">
     <!-- track -->
     <path d={arcPath(min, max, r)} class="sv-gauge__track" fill="none" stroke-width={thickness} stroke-linecap="round" />

package/src/SvGrid.controller.svelte.ts

@@ -441,6 +441,28 @@ export function createSvGridController<
     viewportVersion;
     return scrollContainer ? scrollContainer.clientHeight : 0;
   });
+
+  // --- responsive (narrow-container) mode ---
+  const responsiveBreakpoint = $derived(
+    props.responsive && typeof props.responsive === "object" && props.responsive.breakpoint != null
+      ? props.responsive.breakpoint
+      : 640,
+  );
+  // Below the breakpoint: un-pin columns (pan the whole grid), suspend
+  // fitColumns, and hide `hideBelow` columns. Guarded on width > 0 so it never
+  // triggers before the grid has measured.
+  const isNarrowResponsive = $derived(
+    !!props.responsive && viewportWidth > 0 && viewportWidth < responsiveBreakpoint,
+  );
+  const EMPTY_PINNING = { left: [] as string[], right: [] as string[] };
+  const effectivePinning = $derived(isNarrowResponsive ? EMPTY_PINNING : columnPinning);
+  // A column with `hideBelow: N` is dropped while `responsive` is on and the
+  // grid is narrower than N px (reads viewportWidth so it re-runs on resize).
+  function isHiddenByResponsive(column: { columnDef?: { hideBelow?: number } }): boolean {
+    if (!props.responsive) return false;
+    const hb = column.columnDef?.hideBelow;
+    return hb != null && viewportWidth > 0 && viewportWidth < hb;
+  }
   const scrollMetrics = $derived.by(() => {
     scrollVersion;
     viewportVersion;
@@ -698,7 +720,12 @@ export function createSvGridController<
   const allColumns = $derived.by(() => {
     let raw = grid
       .getAllColumns()
-      .filter((column) => !hiddenColumns[column.id] && !hiddenByGroupCollapse[column.id]);
+      .filter(
+        (column) =>
+          !hiddenColumns[column.id] &&
+          !hiddenByGroupCollapse[column.id] &&
+          !isHiddenByResponsive(column),
+      );
     // Apply user reorder (if any). Unknown ids in userColumnOrder are
     // skipped; columns not in userColumnOrder keep their original
     // relative order after the user-ordered ones.
@@ -715,8 +742,8 @@ export function createSvGridController<
       }
       raw = ordered;
     }
-    const leftIds = columnPinning.left;
-    const rightIds = columnPinning.right;
+    const leftIds = effectivePinning.left;
+    const rightIds = effectivePinning.right;
     if (!leftIds.length && !rightIds.length) return raw;
     const pinned = new Set([...leftIds, ...rightIds]);
     const findById = (id: string) => raw.find((column) => column.id === id);
@@ -907,14 +934,14 @@ export function createSvGridController<
     const selectionWidth = showRowSelectionEffective ? selectionColumnWidth : 0;
     const left: Record<string, number> = {};
     let leftAcc = rowNumberWidth + selectionWidth;
-    for (const id of columnPinning.left) {
+    for (const id of effectivePinning.left) {
       left[id] = leftAcc;
       leftAcc += getColumnWidth(id);
     }
     const right: Record<string, number> = {};
     let rightAcc = 0;
-    for (let i = columnPinning.right.length - 1; i >= 0; i -= 1) {
-      const id = columnPinning.right[i];
+    for (let i = effectivePinning.right.length - 1; i >= 0; i -= 1) {
+      const id = effectivePinning.right[i];
       if (!id) continue;
       right[id] = rightAcc;
       rightAcc += getColumnWidth(id);
@@ -1471,8 +1498,8 @@ export function createSvGridController<
     // that edge and the window are also rendered; negligible for typical grids,
     // and correctness beats shaving a few off-screen cells.)
     const window = virtualColumns;
-    const hasLeft = columnPinning.left.length > 0;
-    const hasRight = columnPinning.right.length > 0;
+    const hasLeft = effectivePinning.left.length > 0;
+    const hasRight = effectivePinning.right.length > 0;
     if ((!hasLeft && !hasRight) || window.length === 0) return window;
 
     const firstIdx = window[0]!.index;
@@ -1828,7 +1855,8 @@ export function createSvGridController<
     // Track viewport size (not scrollVersion) so we don't recompute on
     // every scroll - only when the container actually resizes.
     viewportVersion;
-    if (!props.fitColumns) return null;
+    // Narrow responsive mode pans instead of scaling, so skip fit scaling.
+    if (!props.fitColumns || isNarrowResponsive) return null;
     const cols = grid.getAllColumns().filter((c) => !hiddenColumns[c.id]);
     if (!cols.length) return null;
     const rowNumberWidth = showRowNumbersEffective ? rowNumberColumnWidth : 0;
@@ -2016,11 +2044,39 @@ export function createSvGridController<
     return map;
   });
 
+  // Server-side set-filter values: when a column's filter menu opens and the
+  // consumer provides `serverFilterValues`, fetch the distinct values from the
+  // server once (cached per column) instead of deriving them from the loaded
+  // page - so the checklist shows every value, not just what's on screen.
+  let serverFacetValues = $state<Record<string, Array<string>>>({});
+  let serverFacetLoading = $state<string | null>(null);
+  $effect(() => {
+    const columnId = filterMenuFor ?? columnMenuFor;
+    const fetcher = props.serverFilterValues;
+    if (!columnId || !fetcher || serverFacetValues[columnId]) return;
+    serverFacetLoading = columnId;
+    let cancelled = false;
+    void fetcher(columnId)
+      .then((values) => {
+        if (cancelled) return;
+        serverFacetValues = { ...serverFacetValues, [columnId]: values };
+        serverFacetLoading = null;
+      })
+      .catch(() => {
+        if (!cancelled) serverFacetLoading = null;
+      });
+    return () => {
+      cancelled = true;
+    };
+  });
+
   const columnMenuFacetValues = $derived.by(() => {
     // The funnel popover drives via `filterMenuFor`; the column menu's Filter
     // tab drives via `columnMenuFor`. Support whichever is open.
     const columnId = filterMenuFor ?? columnMenuFor;
     if (!columnId) return [] as Array<string>;
+    // Server-provided distinct values win (fetched + cached above).
+    if (props.serverFilterValues) return serverFacetValues[columnId] ?? [];
     const column = allColumns.find((entry) => entry.id === columnId);
     if (!column) return [] as Array<string>;
     // Range-bucketed facets for numeric / date columns with many values.
@@ -2150,6 +2206,8 @@ export function createSvGridController<
     get MIN_COLUMN_WIDTH() { return MIN_COLUMN_WIDTH; },
     get columnPinning() { return columnPinning; },
     set columnPinning(v) { columnPinning = v as never; },
+    get effectivePinning() { return effectivePinning; },
+    get isNarrowResponsive() { return isNarrowResponsive; },
     get columnVirtualizerVersion() { return columnVirtualizerVersion; },
     set columnVirtualizerVersion(v) { columnVirtualizerVersion = v as never; },
     get gridStateVersion() { return gridStateVersion; },
@@ -2450,6 +2508,7 @@ export function createSvGridController<
     get buildBuckets() { return buildBuckets; },
     get isInBucket() { return isInBucket; },
     get facetBucketsByColumn() { return facetBucketsByColumn; },
+    get serverFacetLoading() { return serverFacetLoading; },
     get columnMenuFacetValues() { return columnMenuFacetValues; },
     get columnMenuVisibleFacets() { return columnMenuVisibleFacets; },
     get isFacetChecked() { return isFacetChecked; },

package/src/SvGrid.css

@@ -730,6 +730,13 @@
   background: var(--sg-header-bg, #f5f7fb);
 }
 
+/* Responsive (narrow) mode: smooth momentum touch panning, and let touch
+   gestures pan the grid freely (the wheel-trap contain stays for pointer). */
+.sv-grid-container.sv-grid-narrow {
+  -webkit-overflow-scrolling: touch;
+  scroll-behavior: auto;
+}
+
 .sv-grid-container {
   scrollbar-width: auto;
   -ms-overflow-style: auto;
@@ -2341,3 +2348,29 @@ select.sv-grid-fr-editor {
 .sv-grid-filter-operator-btn.is-open {
   opacity: 1;
 }
+
+/* Kanban board mode search box (board.searchable) */
+.sv-grid-board-search {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  margin-bottom: 8px;
+  padding: 5px 9px;
+  border: 1px solid var(--sg-border, #e4e7ec);
+  border-radius: var(--sg-radius, 8px);
+  background: var(--sg-bg, #fff);
+  color: color-mix(in srgb, var(--sg-fg, #101828) 55%, transparent);
+  max-width: 280px;
+}
+.sv-grid-board-search:focus-within {
+  border-color: var(--sg-accent, #3b82f6);
+}
+.sv-grid-board-search input {
+  flex: 1 1 auto;
+  border: 0;
+  outline: none;
+  background: transparent;
+  font: inherit;
+  font-size: 0.82rem;
+  color: var(--sg-fg, #101828);
+}

package/src/SvGrid.svelte

@@ -25,6 +25,12 @@
   import { buildSparkline, toSparklineValues } from "./sparkline";
   import SvGridDropdown from "./SvGridDropdown.svelte";
   import SvDateTimePicker from "./SvDateTimePicker.svelte";
+  import {
+    hasCellEditor,
+    getCellEditor,
+    resolveEditorProps,
+    type CellEditorContext,
+  } from "./editor-registry";
   import { timeStringToDate, dateToTimeString } from "./SvGrid.helpers";
   import type {
     Props,
@@ -49,8 +55,20 @@
   import { createSvGridController } from "./SvGrid.controller.svelte";
   import GridMenus from "./GridMenus.svelte";
   import GridFooter from "./GridFooter.svelte";
+  import SvGridBoard from "./SvGridBoard.svelte";
   let props: Props<TFeatures, TData> = $props();
   const ctrl = createSvGridController(props);
+  // Kanban board mode: when `board` is set the grid renders lanes of cards
+  // instead of the table (see SvGridBoard). Narrowed derived so the template
+  // branch can pass it non-null.
+  const boardConfig = $derived(props.board);
+  // The board renders the grid's FILTERED + SORTED rows (not raw data), so the
+  // search box / column filters / sort all flow through to the lanes.
+  const boardData = $derived(
+    ctrl.allRowsBeforePagination
+      .filter((r) => !ctrl.isGroupRow(r))
+      .map((r) => r.original),
+  );
 
   // ---- View facade: re-bind the controller's reactive members as locals so the
   //      markup stays identical. Assignable state + bindings + DOM refs use c.* directly.
@@ -127,6 +145,16 @@
   const hasConditionalFormats = $derived(ctrl.hasConditionalFormats);
   const cellConditionalFormat = $derived(ctrl.cellConditionalFormat);
   const isGroupRow = $derived(ctrl.isGroupRow);
+  // Server-side group / tree a11y: aria-level on every tree row, aria-expanded
+  // on the expandable ones. Undefined (attribute omitted) when serverGroup is off.
+  const serverGroup = $derived(props.serverGroup);
+  function sgAriaLevel(row: Row<TData>): number | undefined {
+    return serverGroup ? serverGroup.level(row.original as TData) + 1 : undefined;
+  }
+  function sgAriaExpanded(row: Row<TData>): boolean | undefined {
+    if (!serverGroup || !serverGroup.isGroup(row.original as TData)) return undefined;
+    return serverGroup.expanded?.(row.original as TData) ?? false;
+  }
   const sortDirectionByColumn = $derived(ctrl.sortDirectionByColumn);
   const groupingColumns = $derived(ctrl.groupingColumns);
   const paginationState = $derived(ctrl.paginationState);
@@ -202,6 +230,22 @@
     return "sv-grid-cell-flash";
   }
 
+  // Keyboard-accessible column resize (#79): focus a resize handle and use the
+  // arrow keys (Shift = fine 1px step). Complements the pointer-drag resize.
+  function resizeColumnByKeyboard(e: KeyboardEvent, columnId: string) {
+    let delta = 0;
+    const step = e.shiftKey ? 1 : 10;
+    if (e.key === "ArrowLeft") delta = -step;
+    else if (e.key === "ArrowRight") delta = step;
+    else return;
+    e.preventDefault();
+    const current = ctrl.getColumnWidth(columnId);
+    ctrl.columnWidths = {
+      ...ctrl.columnWidths,
+      [columnId]: Math.max(40, current + delta),
+    };
+  }
+
   // ---- Full-row editing -------------------------------------------------
   const fullRowEdit = $derived(ctrl.fullRowEdit);
   // Commit the whole row when the user clicks away from its editors (Excel /
@@ -282,6 +326,27 @@
   const updateEditingCellValue = $derived(ctrl.updateEditingCellValue);
   const onEditorKeyDown = $derived(ctrl.onEditorKeyDown);
   const focusOnMount = $derived(ctrl.focusOnMount);
+
+  // Build the interaction context handed to a CUSTOM cell editor registered via
+  // `registerCellEditor`. Maps the grid's editing lifecycle onto the uniform
+  // change / commit / cancel contract every registered editor speaks.
+  function buildRegisteredEditorContext(): CellEditorContext {
+    const cell = ctrl.editingCell;
+    return {
+      value: cell?.value,
+      rowId: cell?.rowId ?? "",
+      columnId: cell?.columnId ?? "",
+      onChange: (v: unknown) => updateEditingCellValue(v),
+      onCommit: (v?: unknown) => {
+        if (v !== undefined) updateEditingCellValue(v);
+        saveEditingCell();
+      },
+      onCancel: () => {
+        ctrl.editingCell = null;
+        ctrl.gridRootEl?.focus({ preventScroll: true });
+      },
+    };
+  }
   const onHeaderSortClick = $derived(ctrl.onHeaderSortClick);
   const onGridKeyDown = $derived(ctrl.onGridKeyDown);
   const onGridPaste = $derived(ctrl.onGridPaste);
@@ -323,6 +388,39 @@
   <div class="sv-grid-state sv-grid-state-error" role="alert">
     {props.error}
   </div>
+{:else if boardConfig}
+  <div
+    class="sv-grid-root sv-grid-board-root"
+    class:sv-grid-root-fill={props.containerHeight === "100%"}
+    style={`height: ${
+      typeof props.containerHeight === "string"
+        ? props.containerHeight
+        : `${props.containerHeight ?? 520}px`
+    }; display: flex; flex-direction: column;`}
+  >
+    {#if boardConfig.searchable !== false}
+      <label class="sv-grid-board-search">
+        <svg viewBox="0 0 16 16" aria-hidden="true" width="14" height="14">
+          <circle cx="7" cy="7" r="4.5" fill="none" stroke="currentColor" stroke-width="1.5" />
+          <line x1="10.2" y1="10.2" x2="14" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" />
+        </svg>
+        <input
+          type="search"
+          placeholder={boardConfig.searchPlaceholder ?? "Search cards..."}
+          bind:value={ctrl.globalFilter}
+          aria-label="Search cards"
+        />
+      </label>
+    {/if}
+    <div style="flex: 1 1 auto; min-height: 0;">
+      <SvGridBoard
+        data={boardData}
+        columns={props.columns}
+        board={boardConfig}
+        getRowId={props.getRowId}
+      />
+    </div>
+  </div>
 {:else}
   {#snippet icon(name: string)}
     <svg
@@ -874,6 +972,12 @@
         onblur={() => saveEditingCell()}
         onkeydown={onEditorKeyDown}
       />
+    {:else if hasCellEditor(String(ctrl.editingCell?.editorType ?? ""))}
+      <!-- Custom editor registered via `registerCellEditor(type, Component)`:
+           mount it and hand it the uniform change / commit / cancel context. -->
+      {@const _reg = getCellEditor(String(ctrl.editingCell?.editorType))!}
+      {@const CustomCellEditor = _reg.component}
+      <CustomCellEditor {...resolveEditorProps(_reg, buildRegisteredEditorContext())} />
     {:else}
       <input
         use:focusOnMount
@@ -1246,6 +1350,7 @@
       <div
         class="sv-grid-container sv-grid-container-custom-scrollbars"
         class:sv-grid-has-vscroll={hasMeasured && hasVerticalOverflow}
+        class:sv-grid-narrow={ctrl.isNarrowResponsive}
         bind:this={ctrl.scrollContainer}
         onscroll={onBodyScroll}
         style={`overflow: auto; position: relative; height: calc(100% - ${hasMeasured && hasHorizontalOverflow ? 16 : 0}px);`}
@@ -1258,6 +1363,7 @@
             activeDescendantId,
             rowCount: allRows.length,
             colCount: allColumns.length,
+            treegrid: !!props.serverGroup,
           })}
           onkeydown={onGridKeyDown}
           onpaste={onGridPaste}
@@ -1544,7 +1650,7 @@
                               class:is-active={isColumnFiltered(
                                 header.column.id,
                               )}
-                              aria-label="Filter"
+                              aria-label={`Filter ${toolPanelHeaderLabel(header.column)}`}
                               aria-haspopup="menu"
                               onclick={(event) =>
                                 openFilterMenu(event, header.column.id)}
@@ -1556,7 +1662,7 @@
                             type="button"
                             class="sv-grid-col-menu-btn"
                             class:is-open={columnMenuFor === header.column.id}
-                            aria-label="Column menu"
+                            aria-label={`${toolPanelHeaderLabel(header.column)} column menu`}
                             aria-haspopup="menu"
                             onclick={(event) =>
                               openColumnMenu(event, header.column.id)}
@@ -1595,9 +1701,12 @@
                             header.column.id}
                           role="separator"
                           aria-orientation="vertical"
-                          aria-label="Resize column"
+                          aria-label={`Resize ${toolPanelHeaderLabel(header.column)}`}
+                          tabindex="0"
                           onpointerdown={(event) =>
                             startColumnResize(event, header.column.id)}
+                          onkeydown={(event) =>
+                            resizeColumnByKeyboard(event, header.column.id)}
                           ondblclick={(event) => event.stopPropagation()}
                         ></div>
                       {/if}
@@ -1789,6 +1898,8 @@
                         rowIndex % 2 === 1}
                       class:sv-grid-row-draggable={rowDragManagedEffective}
                       {...getGridRowA11yProps(rowIndex + 1)}
+                      aria-level={sgAriaLevel(row)}
+                      aria-expanded={sgAriaExpanded(row)}
                       {...rowDragAttrs(rowIndex)}
                       style={`height: ${rowItem.size}px;`}
                     >
@@ -2038,6 +2149,8 @@
                       rowIndex % 2 === 1}
                     class:sv-grid-row-draggable={rowDragManagedEffective}
                     {...getGridRowA11yProps(rowIndex + 1)}
+                    aria-level={sgAriaLevel(row)}
+                    aria-expanded={sgAriaExpanded(row)}
                     {...rowDragAttrs(rowIndex)}
                   >
                     {#if showRowNumbersEffective}