@svgrid/grid 1.2.34 → 2.0.0

package/dist/SvFileUpload.svelte

@@ -0,0 +1,169 @@
+<script lang="ts" module>
+  export type { FileRejection, FileRejectReason } from './createFileUpload.svelte'
+</script>
+
+<script lang="ts">
+  /**
+   * SvFileUpload - a drag-and-drop file field with a click-to-browse fallback,
+   * accept / size / count validation and a selected-files list. Parity: Smart
+   * `smart-file-upload`. Controlled via `files` + `onChange`.
+   *
+   * Part of the editor kit: carries the shared contract (label, hint, error
+   * validation, `dir`/RTL and localizable `messages`) via `<SvField>`. The
+   * drag/validation/state live in the headless `createFileUpload` core.
+   */
+  import SvField from './SvField.svelte'
+  import { nextEditorId, resolveMessages, type SvEditorProps } from './editor-contract'
+  import { createFileUpload, type FileRejection } from './createFileUpload.svelte'
+
+  /** User-facing strings (localizable via `messages`). */
+  type FileMessages = { prompt: string; browse: string; remove: string; hintTypes: string }
+  const DEFAULT_MESSAGES: FileMessages = {
+    prompt: 'Drag files here or', browse: 'browse', remove: 'Remove', hintTypes: 'Accepted:',
+  }
+
+  type Props = SvEditorProps & {
+    files?: File[]
+    onChange?: (files: File[]) => void
+    onReject?: (rejections: FileRejection[]) => void
+    accept?: string
+    multiple?: boolean
+    /** Max size per file in bytes. */
+    maxSize?: number
+    maxFiles?: number
+    messages?: Partial<FileMessages>
+  }
+
+  let {
+    files = $bindable([]),
+    onChange,
+    onReject,
+    accept,
+    multiple = false,
+    maxSize,
+    maxFiles,
+    disabled = false,
+    readonly = false,
+    ariaLabel,
+    invalid = false,
+    required = false,
+    error,
+    label,
+    hint,
+    dir,
+    id,
+    messages,
+  }: Props = $props()
+
+  const autoId = nextEditorId('sv-file')
+  const uid = $derived(id ?? autoId)
+  const M = $derived(resolveMessages(DEFAULT_MESSAGES, messages))
+
+  const fu = createFileUpload({
+    files: () => files,
+    onChange: (f) => { files = f; onChange?.(f) },
+    onReject: (r) => onReject?.(r),
+    accept: () => accept,
+    multiple: () => multiple,
+    maxSize: () => maxSize,
+    maxFiles: () => maxFiles,
+    disabled: () => disabled,
+    readonly: () => readonly,
+    id: () => uid,
+    invalid: () => invalid,
+    required: () => required,
+    error: () => error,
+    hint: () => hint,
+    ariaLabel: () => ariaLabel,
+  })
+
+  let inputEl = $state<HTMLInputElement | null>(null)
+
+  function openPicker() { if (fu.isInteractive) inputEl?.click() }
+  function onDropzoneKey(e: KeyboardEvent) {
+    if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); openPicker() }
+  }
+  function onInputChange(e: Event) {
+    const list = (e.currentTarget as HTMLInputElement).files
+    if (list) fu.addFiles([...list])
+    ;(e.currentTarget as HTMLInputElement).value = '' // allow re-selecting the same file
+  }
+  function onDrop(e: DragEvent) {
+    e.preventDefault()
+    fu.setDragging(false)
+    if (e.dataTransfer?.files) fu.addFiles([...e.dataTransfer.files])
+  }
+
+  const fmtSize = (n: number) => (n < 1024 ? `${n} B` : n < 1048576 ? `${(n / 1024).toFixed(0)} KB` : `${(n / 1048576).toFixed(1)} MB`)
+</script>
+
+<SvField id={uid} {label} {hint} {error} {required} {dir}>
+  <div class="sv-file" class:is-disabled={disabled}>
+    <!-- svelte-ignore a11y_no_static_element_interactions -->
+    <div
+      class="sv-file__zone"
+      class:is-dragging={fu.dragging}
+      class:is-invalid={invalid}
+      {...fu.dropzoneProps()}
+      onclick={openPicker}
+      onkeydown={onDropzoneKey}
+      ondragenter={(e) => { e.preventDefault(); fu.setDragging(true) }}
+      ondragover={(e) => { e.preventDefault(); fu.setDragging(true) }}
+      ondragleave={() => fu.setDragging(false)}
+      ondrop={onDrop}
+    >
+      <svg class="sv-file__icon" viewBox="0 0 24 24" width="26" height="26" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4M17 8l-5-5-5 5M12 3v12" /></svg>
+      <p class="sv-file__prompt">{M.prompt} <span class="sv-file__browse">{M.browse}</span></p>
+      {#if accept}<p class="sv-file__types">{M.hintTypes} {accept}</p>{/if}
+      <input bind:this={inputEl} class="sv-file__input" {...fu.inputProps()} onchange={onInputChange} />
+    </div>
+
+    {#if files.length}
+      <ul class="sv-file__list">
+        {#each files as file, i (file.name + file.size + i)}
+          <li class="sv-file__item">
+            <span class="sv-file__name" title={file.name}>{file.name}</span>
+            <span class="sv-file__size">{fmtSize(file.size)}</span>
+            {#if fu.isInteractive}
+              <button class="sv-file__remove" aria-label={`${M.remove} ${file.name}`} {...fu.removeProps(i)}>&times;</button>
+            {/if}
+          </li>
+        {/each}
+      </ul>
+    {/if}
+  </div>
+</SvField>
+
+<style>
+  .sv-file {
+    --_accent: var(--sg-accent, #2563eb);
+    --_border: var(--sg-input-border, var(--sg-border, #cbd5e1));
+    --_radius: var(--sg-radius, 8px);
+    display: flex; flex-direction: column; gap: 8px; width: 320px; color: var(--sg-fg, #0f172a);
+  }
+  .sv-file.is-disabled { opacity: 0.6; }
+  .sv-file__zone {
+    display: flex; flex-direction: column; align-items: center; gap: 4px;
+    padding: 22px 16px; text-align: center; cursor: pointer;
+    background: var(--sg-input-bg, #fff); color: var(--sg-muted, #64748b);
+    border: 1.5px dashed var(--_border); border-radius: var(--_radius); transition: border-color 0.15s, background 0.15s;
+  }
+  .sv-file__zone:hover, .sv-file__zone:focus-visible { border-color: var(--_accent); outline: none; }
+  .sv-file__zone.is-dragging { border-color: var(--_accent); background: color-mix(in srgb, var(--_accent) 8%, transparent); color: var(--_accent); }
+  .sv-file__zone.is-invalid { border-color: var(--sg-danger, #dc2626); }
+  .sv-file__icon { color: var(--_accent); }
+  .sv-file__prompt { margin: 0; font-size: 13px; }
+  .sv-file__browse { color: var(--_accent); font-weight: 650; text-decoration: underline; }
+  .sv-file__types { margin: 0; font-size: 11.5px; opacity: 0.8; }
+  .sv-file__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); border: 0; }
+
+  .sv-file__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
+  .sv-file__item {
+    display: flex; align-items: center; gap: 8px; padding: 6px 8px; font-size: 12.5px;
+    background: var(--sg-header-bg, #f8fafc); border: 1px solid var(--sg-border, #e2e8f0); border-radius: 6px;
+  }
+  .sv-file__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 550; }
+  .sv-file__size { color: var(--sg-muted, #64748b); flex: none; font-variant-numeric: tabular-nums; }
+  .sv-file__remove { flex: none; background: none; border: 0; color: var(--sg-muted, #64748b); cursor: pointer; font-size: 16px; line-height: 1; padding: 0 2px; }
+  .sv-file__remove:hover { color: var(--sg-danger, #dc2626); }
+</style>

package/dist/SvFileUpload.svelte.d.ts

@@ -0,0 +1,24 @@
+export type { FileRejection, FileRejectReason } from './createFileUpload.svelte';
+import { type SvEditorProps } from './editor-contract';
+import { type FileRejection } from './createFileUpload.svelte';
+/** User-facing strings (localizable via `messages`). */
+type FileMessages = {
+    prompt: string;
+    browse: string;
+    remove: string;
+    hintTypes: string;
+};
+type Props = SvEditorProps & {
+    files?: File[];
+    onChange?: (files: File[]) => void;
+    onReject?: (rejections: FileRejection[]) => void;
+    accept?: string;
+    multiple?: boolean;
+    /** Max size per file in bytes. */
+    maxSize?: number;
+    maxFiles?: number;
+    messages?: Partial<FileMessages>;
+};
+declare const SvFileUpload: import("svelte").Component<Props, {}, "files">;
+type SvFileUpload = ReturnType<typeof SvFileUpload>;
+export default SvFileUpload;

package/dist/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/dist/SvForm.svelte.d.ts

@@ -1,3 +1,4 @@
+import type { Validator } from './validators';
 export type FormFieldType = 'text' | 'email' | 'tel' | 'textarea' | 'number' | 'password' | 'select' | 'checkbox' | 'switch' | 'date' | 'color' | 'rating';
 export type FormField = {
     name: string;
@@ -9,6 +10,8 @@ export type FormField = {
         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. */

package/dist/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/dist/SvGauge.svelte.d.ts

@@ -1,3 +1,12 @@
+/**
+   * SvGauge - a radial arc gauge (SVG) that renders a value within [min, max]
+   * with optional colored threshold bands, a needle, and a center label. Parity:
+   * Smart `smart-gauge` (radial). Display control; theme-driven.
+   *
+   * 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';
 type Band = {
     from: number;
     to: number;
@@ -20,6 +29,8 @@ type Props = {
     thickness?: number;
     formatValue?: (v: number) => string;
     ariaLabel?: string;
+    /** Text direction for the center label / unit. */
+    dir?: EditorDir;
 };
 declare const SvGauge: import("svelte").Component<Props, {}, "">;
 type SvGauge = ReturnType<typeof SvGauge>;

package/dist/SvGrid.controller.svelte.d.ts

@@ -98,6 +98,11 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
         left: Array<string>;
         right: Array<string>;
     };
+    readonly effectivePinning: {
+        left: Array<string>;
+        right: Array<string>;
+    };
+    readonly isNarrowResponsive: boolean;
     columnVirtualizerVersion: number;
     gridStateVersion: number;
     readonly selectionColumnWidth: number;
@@ -472,6 +477,7 @@ export declare function createSvGridController<TFeatures extends TableFeatures =
     readonly buildBuckets: typeof buildBuckets;
     readonly isInBucket: typeof isInBucket;
     readonly facetBucketsByColumn: Map<string, FacetBucket[]>;
+    readonly serverFacetLoading: string | null;
     readonly columnMenuFacetValues: string[];
     readonly columnMenuVisibleFacets: string[];
     readonly isFacetChecked: (columnId: string, value: string) => any;

package/dist/SvGrid.controller.svelte.js

@@ -275,6 +275,24 @@ export function createSvGridController(props) {
         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: [], right: [] };
+    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) {
+        if (!props.responsive)
+            return false;
+        const hb = column.columnDef?.hideBelow;
+        return hb != null && viewportWidth > 0 && viewportWidth < hb;
+    }
     const scrollMetrics = $derived.by(() => {
         scrollVersion;
         viewportVersion;
@@ -498,7 +516,9 @@ export function createSvGridController(props) {
     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.
@@ -519,8 +539,8 @@ export function createSvGridController(props) {
             }
             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]);
@@ -659,14 +679,14 @@ export function createSvGridController(props) {
         const selectionWidth = showRowSelectionEffective ? selectionColumnWidth : 0;
         const left = {};
         let leftAcc = rowNumberWidth + selectionWidth;
-        for (const id of columnPinning.left) {
+        for (const id of effectivePinning.left) {
             left[id] = leftAcc;
             leftAcc += getColumnWidth(id);
         }
         const right = {};
         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;
@@ -1150,8 +1170,8 @@ export function createSvGridController(props) {
         // 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;
@@ -1462,7 +1482,8 @@ export function createSvGridController(props) {
         // Track viewport size (not scrollVersion) so we don't recompute on
         // every scroll - only when the container actually resizes.
         viewportVersion;
-        if (!props.fitColumns)
+        // 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)
@@ -1581,12 +1602,43 @@ export function createSvGridController(props) {
         }
         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({});
+    let serverFacetLoading = $state(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 [];
+        // 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 [];
@@ -1706,6 +1758,8 @@ export function createSvGridController(props) {
         get MIN_COLUMN_WIDTH() { return MIN_COLUMN_WIDTH; },
         get columnPinning() { return columnPinning; },
         set columnPinning(v) { columnPinning = v; },
+        get effectivePinning() { return effectivePinning; },
+        get isNarrowResponsive() { return isNarrowResponsive; },
         get columnVirtualizerVersion() { return columnVirtualizerVersion; },
         set columnVirtualizerVersion(v) { columnVirtualizerVersion = v; },
         get gridStateVersion() { return gridStateVersion; },
@@ -2006,6 +2060,7 @@ export function createSvGridController(props) {
         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; },