npm - @svgrid/grid - Versions diffs - 1.2.22 → 1.2.24 - Mend

@svgrid/grid 1.2.22 → 1.2.24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (263) hide show

package/dist/GridFooter.svelte +34 -20
package/dist/GridFooter.svelte.d.ts +8 -0
package/dist/SvAutoComplete.svelte +89 -0
package/dist/SvAutoComplete.svelte.d.ts +16 -0
package/dist/SvButton.svelte +97 -0
package/dist/SvButton.svelte.d.ts +23 -0
package/dist/SvCalendar.svelte +409 -0
package/dist/SvCalendar.svelte.d.ts +52 -0
package/dist/SvCheckBox.svelte +82 -0
package/dist/SvCheckBox.svelte.d.ts +19 -0
package/dist/SvColorInput.svelte +160 -0
package/dist/SvColorInput.svelte.d.ts +15 -0
package/dist/SvComboBox.svelte +108 -0
package/dist/SvComboBox.svelte.d.ts +15 -0
package/dist/SvCountryInput.svelte +125 -0
package/dist/SvCountryInput.svelte.d.ts +14 -0
package/dist/SvDateTimePicker.svelte +265 -0
package/dist/SvDateTimePicker.svelte.d.ts +38 -0
package/dist/SvDropDownList.svelte +120 -0
package/dist/SvDropDownList.svelte.d.ts +15 -0
package/dist/SvForm.svelte +147 -0
package/dist/SvForm.svelte.d.ts +29 -0
package/dist/SvGauge.svelte +97 -0
package/dist/SvGauge.svelte.d.ts +26 -0
package/dist/SvGrid.controller.svelte.d.ts +16 -2
package/dist/SvGrid.controller.svelte.js +63 -8
package/dist/SvGrid.css +84 -31
package/dist/SvGrid.helpers.d.ts +4 -0
package/dist/SvGrid.helpers.js +40 -12
package/dist/SvGrid.svelte +84 -5
package/dist/SvGrid.types.d.ts +36 -0
package/dist/SvGridDropdown.svelte +16 -30
package/dist/SvGridDropdown.svelte.d.ts +4 -0
package/dist/SvListBox.svelte +89 -0
package/dist/SvListBox.svelte.d.ts +22 -0
package/dist/SvMaskedInput.svelte +66 -0
package/dist/SvMaskedInput.svelte.d.ts +15 -0
package/dist/SvNumberInput.svelte +116 -0
package/dist/SvNumberInput.svelte.d.ts +18 -0
package/dist/SvPasswordInput.svelte +100 -0
package/dist/SvPasswordInput.svelte.d.ts +18 -0
package/dist/SvPhoneInput.svelte +87 -0
package/dist/SvPhoneInput.svelte.d.ts +19 -0
package/dist/SvRadioGroup.svelte +85 -0
package/dist/SvRadioGroup.svelte.d.ts +20 -0
package/dist/SvRating.svelte +91 -0
package/dist/SvRating.svelte.d.ts +18 -0
package/dist/SvRepeatButton.svelte +89 -0
package/dist/SvRepeatButton.svelte.d.ts +21 -0
package/dist/SvSlider.svelte +155 -0
package/dist/SvSlider.svelte.d.ts +20 -0
package/dist/SvSwitchButton.svelte +87 -0
package/dist/SvSwitchButton.svelte.d.ts +14 -0
package/dist/SvTabs.svelte +109 -0
package/dist/SvTabs.svelte.d.ts +26 -0
package/dist/SvTagsInput.svelte +70 -0
package/dist/SvTagsInput.svelte.d.ts +14 -0
package/dist/SvTimePicker.svelte +201 -0
package/dist/SvTimePicker.svelte.d.ts +30 -0
package/dist/SvToggleButton.svelte +57 -0
package/dist/SvToggleButton.svelte.d.ts +16 -0
package/dist/SvTree.svelte +131 -0
package/dist/SvTree.svelte.d.ts +27 -0
package/dist/build-api.js +78 -1
package/dist/cdn/svgrid.js +11674 -5907
package/dist/cdn/svgrid.svelte-external.js +10436 -4671
package/dist/cell-render.d.ts +4 -0
package/dist/cell-render.js +35 -1
package/dist/clipboard.js +19 -1
package/dist/collaboration.d.ts +2 -0
package/dist/collaboration.js +4 -0
package/dist/core.d.ts +22 -1
package/dist/countries.d.ts +15 -0
package/dist/countries.js +61 -0
package/dist/createAutocomplete.svelte.d.ts +77 -0
package/dist/createAutocomplete.svelte.js +100 -0
package/dist/createCalendar.svelte.d.ts +192 -0
package/dist/createCalendar.svelte.js +402 -0
package/dist/createCheckbox.svelte.d.ts +45 -0
package/dist/createCheckbox.svelte.js +26 -0
package/dist/createColorInput.svelte.d.ts +67 -0
package/dist/createColorInput.svelte.js +100 -0
package/dist/createCombobox.svelte.d.ts +102 -0
package/dist/createCombobox.svelte.js +171 -0
package/dist/createCountryInput.svelte.d.ts +86 -0
package/dist/createCountryInput.svelte.js +126 -0
package/dist/createDateTimePicker.svelte.d.ts +83 -0
package/dist/createDateTimePicker.svelte.js +202 -0
package/dist/createDropdownList.svelte.d.ts +78 -0
package/dist/createDropdownList.svelte.js +117 -0
package/dist/createGauge.svelte.d.ts +56 -0
package/dist/createGauge.svelte.js +49 -0
package/dist/createListbox.svelte.d.ts +79 -0
package/dist/createListbox.svelte.js +117 -0
package/dist/createMaskedInput.svelte.d.ts +30 -0
package/dist/createMaskedInput.svelte.js +62 -0
package/dist/createNumberInput.svelte.d.ts +72 -0
package/dist/createNumberInput.svelte.js +167 -0
package/dist/createPasswordInput.svelte.d.ts +60 -0
package/dist/createPasswordInput.svelte.js +72 -0
package/dist/createPhoneInput.svelte.d.ts +46 -0
package/dist/createPhoneInput.svelte.js +105 -0
package/dist/createRadioGroup.svelte.d.ts +64 -0
package/dist/createRadioGroup.svelte.js +73 -0
package/dist/createRating.svelte.d.ts +70 -0
package/dist/createRating.svelte.js +85 -0
package/dist/createSlider.svelte.d.ts +71 -0
package/dist/createSlider.svelte.js +123 -0
package/dist/createSwitch.svelte.d.ts +43 -0
package/dist/createSwitch.svelte.js +41 -0
package/dist/createTabs.svelte.d.ts +78 -0
package/dist/createTabs.svelte.js +92 -0
package/dist/createTagsInput.svelte.d.ts +65 -0
package/dist/createTagsInput.svelte.js +93 -0
package/dist/createTimePicker.svelte.d.ts +106 -0
package/dist/createTimePicker.svelte.js +248 -0
package/dist/createToggle.svelte.d.ts +43 -0
package/dist/createToggle.svelte.js +39 -0
package/dist/createTree.svelte.d.ts +96 -0
package/dist/createTree.svelte.js +194 -0
package/dist/datetime/date-core.d.ts +88 -0
package/dist/datetime/date-core.js +165 -0
package/dist/datetime/date-format.d.ts +39 -0
package/dist/datetime/date-format.js +371 -0
package/dist/datetime/date-restrict.d.ts +23 -0
package/dist/datetime/date-restrict.js +50 -0
package/dist/datetime/date-selection.d.ts +25 -0
package/dist/datetime/date-selection.js +94 -0
package/dist/datetime/mask.d.ts +21 -0
package/dist/datetime/mask.js +90 -0
package/dist/editing.d.ts +1 -1
package/dist/editing.js +7 -0
package/dist/editor-contract.d.ts +48 -0
package/dist/editor-contract.js +26 -0
package/dist/editors/cell-editors.d.ts +2 -2
package/dist/editors/cell-editors.js +3 -1
package/dist/export-format.d.ts +178 -0
package/dist/export-format.js +419 -0
package/dist/hyperformula-adapter.d.ts +4 -0
package/dist/hyperformula-adapter.js +15 -6
package/dist/index.d.ts +60 -0
package/dist/index.js +72 -0
package/dist/list-option.d.ts +10 -0
package/dist/list-option.js +7 -0
package/dist/menus.js +18 -2
package/dist/popover.d.ts +48 -0
package/dist/popover.js +65 -0
package/dist/row-resize.d.ts +4 -4
package/dist/row-resize.js +8 -5
package/dist/selection.d.ts +6 -0
package/dist/selection.js +31 -5
package/dist/server-data-source.d.ts +43 -0
package/dist/server-data-source.js +100 -0
package/dist/sparkline.js +8 -4
package/dist/svgrid-wrapper.types.d.ts +26 -1
package/package.json +6 -1
package/src/GridFooter.svelte +34 -20
package/src/SvAutoComplete.svelte +89 -0
package/src/SvButton.svelte +97 -0
package/src/SvCalendar.svelte +409 -0
package/src/SvCalendar.test.ts +211 -0
package/src/SvCheckBox.svelte +82 -0
package/src/SvColorInput.svelte +160 -0
package/src/SvComboBox.svelte +108 -0
package/src/SvCountryInput.svelte +125 -0
package/src/SvDateTimePicker.svelte +265 -0
package/src/SvDateTimePicker.test.ts +136 -0
package/src/SvDropDownList.svelte +120 -0
package/src/SvForm.svelte +147 -0
package/src/SvGauge.svelte +97 -0
package/src/SvGrid.controller.svelte.ts +74 -8
package/src/SvGrid.css +84 -31
package/src/SvGrid.helpers.ts +41 -12
package/src/SvGrid.svelte +84 -5
package/src/SvGrid.types.ts +33 -0
package/src/SvGridDropdown.svelte +16 -30
package/src/SvListBox.svelte +89 -0
package/src/SvMaskedInput.svelte +66 -0
package/src/SvNumberInput.svelte +116 -0
package/src/SvPasswordInput.svelte +100 -0
package/src/SvPhoneInput.svelte +87 -0
package/src/SvRadioGroup.svelte +85 -0
package/src/SvRating.svelte +91 -0
package/src/SvRepeatButton.svelte +89 -0
package/src/SvSlider.svelte +155 -0
package/src/SvSwitchButton.svelte +87 -0
package/src/SvTabs.svelte +109 -0
package/src/SvTagsInput.svelte +70 -0
package/src/SvTimePicker.svelte +201 -0
package/src/SvTimePicker.test.ts +98 -0
package/src/SvToggleButton.svelte +57 -0
package/src/SvTree.svelte +131 -0
package/src/build-api.ts +115 -0
package/src/cell-render.test.ts +38 -0
package/src/cell-render.ts +43 -0
package/src/clipboard.test.ts +18 -0
package/src/clipboard.ts +24 -1
package/src/collaboration.test.ts +30 -0
package/src/collaboration.ts +6 -0
package/src/core.ts +27 -3
package/src/countries.ts +71 -0
package/src/createAutocomplete.svelte.ts +104 -0
package/src/createCalendar.svelte.ts +488 -0
package/src/createCheckbox.svelte.ts +74 -0
package/src/createColorInput.svelte.ts +115 -0
package/src/createCombobox.svelte.ts +158 -0
package/src/createCountryInput.svelte.ts +126 -0
package/src/createDateTimePicker.svelte.ts +216 -0
package/src/createDropdownList.svelte.ts +125 -0
package/src/createGauge.svelte.ts +86 -0
package/src/createListbox.svelte.ts +186 -0
package/src/createMaskedInput.svelte.ts +81 -0
package/src/createNumberInput.svelte.ts +193 -0
package/src/createPasswordInput.svelte.ts +87 -0
package/src/createPhoneInput.svelte.ts +119 -0
package/src/createRadioGroup.svelte.ts +132 -0
package/src/createRating.svelte.ts +145 -0
package/src/createSlider.svelte.ts +160 -0
package/src/createSwitch.svelte.ts +78 -0
package/src/createTabs.svelte.ts +129 -0
package/src/createTagsInput.svelte.ts +98 -0
package/src/createTimePicker.svelte.ts +289 -0
package/src/createToggle.svelte.ts +69 -0
package/src/createTree.svelte.ts +216 -0
package/src/datetime/date-core.test.ts +217 -0
package/src/datetime/date-core.ts +204 -0
package/src/datetime/date-format.test.ts +121 -0
package/src/datetime/date-format.ts +317 -0
package/src/datetime/date-restrict.ts +60 -0
package/src/datetime/date-selection.test.ts +129 -0
package/src/datetime/date-selection.ts +137 -0
package/src/datetime/mask.test.ts +36 -0
package/src/datetime/mask.ts +84 -0
package/src/editing.test.ts +22 -0
package/src/editing.ts +7 -1
package/src/editor-contract.test.ts +32 -0
package/src/editor-contract.ts +60 -0
package/src/editors/cell-editors.ts +7 -1
package/src/export-data-api.test.ts +126 -0
package/src/export-format.test.ts +107 -0
package/src/export-format.ts +598 -0
package/src/hyperformula-adapter.test.ts +35 -1
package/src/hyperformula-adapter.ts +18 -6
package/src/index.ts +110 -0
package/src/list-option.ts +15 -0
package/src/menus.ts +21 -2
package/src/popover.ts +79 -0
package/src/row-resize.test.ts +25 -0
package/src/row-resize.ts +8 -5
package/src/selection.test.ts +36 -4
package/src/selection.ts +30 -9
package/src/server-data-source.test.ts +201 -0
package/src/server-data-source.ts +148 -0
package/src/sparkline.test.ts +9 -0
package/src/sparkline.ts +9 -4
package/src/svgrid-wrapper.types.ts +28 -1
package/src/svgrid.behavior.test.ts +27 -0
package/src/svgrid.new-features.wrapper.test.ts +27 -1
package/src/ui-buttons.test.ts +105 -0
package/src/ui-composite.test.ts +89 -0
package/src/ui-inputs.test.ts +118 -0
package/src/ui-range.test.ts +61 -0
package/src/ui-selection.test.ts +119 -0

package/dist/menus.js CHANGED Viewed

@@ -216,21 +216,37 @@ export function createMenus(ctx) {
             ctx.filterRowValues = next;
         }
     }
+    // External pagination is controlled: emit the requested page/size and let
+    // the consumer fetch + update props. Never mutate local pagination state.
+    function emitExternalPagination(pageIndex, pageSize) {
+        if (ctx.props.externalPagination !== true)
+            return false;
+        ctx.props.onPaginationChange?.({ pageIndex: Math.max(0, pageIndex), pageSize });
+        ctx.scrollContainer?.scrollTo?.({ top: 0 });
+        return true;
+    }
     function changePage(delta) {
+        if (emitExternalPagination((ctx.props.pageIndex ?? 0) + delta, ctx.props.pageSize ?? 10))
+            return;
         ctx.grid.setPagination((prev) => ({
             ...prev,
             pageIndex: Math.max((prev?.pageIndex ?? 0) + delta, 0),
         }));
-        ctx.scrollContainer?.scrollTo({ top: 0 });
+        ctx.scrollContainer?.scrollTo?.({ top: 0 });
     }
     function goToPage(pageIndex) {
+        if (emitExternalPagination(pageIndex, ctx.props.pageSize ?? 10))
+            return;
         ctx.grid.setPagination((prev) => ({
             ...prev,
             pageIndex: Math.max(0, pageIndex),
         }));
-        ctx.scrollContainer?.scrollTo({ top: 0 });
+        ctx.scrollContainer?.scrollTo?.({ top: 0 });
     }
     function setPageSize(pageSize) {
+        // External mode: changing page size resets to the first page.
+        if (emitExternalPagination(0, pageSize))
+            return;
         ctx.grid.setPagination((prev) => {
             const oldSize = prev?.pageSize ?? 10;
             const oldIndex = prev?.pageIndex ?? 0;

package/dist/popover.d.ts ADDED Viewed

@@ -0,0 +1,48 @@
+/**
+ * popover - shared helpers for panels that must escape the grid's
+ * `overflow:hidden` scroll container by portalling to <body>: the theme-var
+ * snapshot + portal action, and the fixed-position anchor/flip math. Rune-free
+ * and DOM-only so it is reused verbatim by SvGridDropdown, SvDateTimePicker and
+ * any future popover. The per-component `$effect` wiring (scroll/resize
+ * reposition, outside-click close) stays in the component since it needs the
+ * component's own open state.
+ */
+/**
+ * Theme tokens a portalled panel must carry with it. `--sg-*` custom properties
+ * are scoped to whatever wrapper the grid sits inside (e.g. a per-preset theme
+ * class); moving the panel to <body> leaves that scope, so we snapshot the
+ * resolved values and pin them inline. Keep this list in sync with the tokens
+ * any popover panel actually consumes.
+ */
+export declare const PANEL_THEME_VARS: readonly ["--sg-accent", "--sg-bg", "--sg-fg", "--sg-border", "--sg-muted", "--sg-header-bg", "--sg-row-hover-bg", "--sg-selection-bg", "--sg-input-bg", "--sg-input-border", "--sg-selection-fg"];
+/**
+ * Svelte action: snapshot the resolved theme tokens from the node's current
+ * (in-scope) position, then detach it and append to <body> so it can never be
+ * clipped by an ancestor's overflow. Removes itself on destroy.
+ */
+export declare function portalToBody(node: HTMLElement, vars?: ReadonlyArray<string>): {
+    destroy(): void;
+};
+export type AnchoredRect = {
+    top: number;
+    left: number;
+    width: number;
+    openUpward: boolean;
+};
+export type AnchorOptions = {
+    /** Estimated panel height, used to decide whether to flip upward. */
+    estimatedHeight: number;
+    /** Gap between trigger and panel. Default 2px. */
+    gap?: number;
+    /** Force the panel at least this wide (else it matches the trigger). */
+    minWidth?: number;
+    /** Keep the panel within the viewport horizontally. Default true. */
+    clampHorizontal?: boolean;
+};
+/**
+ * Compute a `position: fixed` rect anchored to `triggerRect`, flipping above the
+ * trigger when there isn't room below and there's more room above. Mirrors the
+ * behavior SvGridDropdown shipped with, generalized with min-width + horizontal
+ * clamping for wider panels (date/time popovers).
+ */
+export declare function anchoredRect(triggerRect: DOMRect, opts: AnchorOptions): AnchoredRect;

package/dist/popover.js ADDED Viewed

@@ -0,0 +1,65 @@
+/**
+ * popover - shared helpers for panels that must escape the grid's
+ * `overflow:hidden` scroll container by portalling to <body>: the theme-var
+ * snapshot + portal action, and the fixed-position anchor/flip math. Rune-free
+ * and DOM-only so it is reused verbatim by SvGridDropdown, SvDateTimePicker and
+ * any future popover. The per-component `$effect` wiring (scroll/resize
+ * reposition, outside-click close) stays in the component since it needs the
+ * component's own open state.
+ */
+/**
+ * Theme tokens a portalled panel must carry with it. `--sg-*` custom properties
+ * are scoped to whatever wrapper the grid sits inside (e.g. a per-preset theme
+ * class); moving the panel to <body> leaves that scope, so we snapshot the
+ * resolved values and pin them inline. Keep this list in sync with the tokens
+ * any popover panel actually consumes.
+ */
+export const PANEL_THEME_VARS = [
+    '--sg-accent', '--sg-bg', '--sg-fg', '--sg-border', '--sg-muted',
+    '--sg-header-bg', '--sg-row-hover-bg', '--sg-selection-bg',
+    '--sg-input-bg', '--sg-input-border', '--sg-selection-fg',
+];
+/**
+ * Svelte action: snapshot the resolved theme tokens from the node's current
+ * (in-scope) position, then detach it and append to <body> so it can never be
+ * clipped by an ancestor's overflow. Removes itself on destroy.
+ */
+export function portalToBody(node, vars = PANEL_THEME_VARS) {
+    const cs = getComputedStyle(node);
+    for (const v of vars) {
+        const val = cs.getPropertyValue(v).trim();
+        if (val)
+            node.style.setProperty(v, val);
+    }
+    document.body.appendChild(node);
+    return {
+        destroy() {
+            if (node.parentNode === document.body)
+                document.body.removeChild(node);
+        },
+    };
+}
+/**
+ * Compute a `position: fixed` rect anchored to `triggerRect`, flipping above the
+ * trigger when there isn't room below and there's more room above. Mirrors the
+ * behavior SvGridDropdown shipped with, generalized with min-width + horizontal
+ * clamping for wider panels (date/time popovers).
+ */
+export function anchoredRect(triggerRect, opts) {
+    const gap = opts.gap ?? 2;
+    const spaceBelow = window.innerHeight - triggerRect.bottom;
+    const spaceAbove = triggerRect.top;
+    const openUpward = spaceBelow < opts.estimatedHeight && spaceAbove > spaceBelow;
+    const width = Math.max(triggerRect.width, opts.minWidth ?? 0);
+    let left = triggerRect.left;
+    if (opts.clampHorizontal !== false) {
+        const maxLeft = window.innerWidth - width - 4;
+        left = Math.max(4, Math.min(left, maxLeft));
+    }
+    return {
+        top: openUpward ? triggerRect.top - opts.estimatedHeight - gap : triggerRect.bottom + gap,
+        left,
+        width,
+        openUpward,
+    };
+}

package/dist/row-resize.d.ts CHANGED Viewed

@@ -4,10 +4,10 @@
  * reads per-row heights from a reactive store.
  *
  * The action is OFF until a consumer attaches it AND a row-header
- * gutter cell exists in each row. A row-header cell is any TD with
- * the `sv-row-gutter` class (typically the one rendering the row
- * number 1, 2, 3, ...). Demos opt in by setting
- * `cellClass: 'sv-row-gutter'` on the gutter column.
+ * gutter cell exists in each row. A row-header cell is either the
+ * grid's built-in row-number gutter (enable `showRowNumbers`) or any
+ * TD tagged with the `sv-row-gutter` class (set
+ * `cellClass: 'sv-row-gutter'` on a custom gutter column).
  *
  *   <script>
  *     let heights = $state<Record<number, number>>({})

package/dist/row-resize.js CHANGED Viewed

@@ -4,10 +4,10 @@
  * reads per-row heights from a reactive store.
  *
  * The action is OFF until a consumer attaches it AND a row-header
- * gutter cell exists in each row. A row-header cell is any TD with
- * the `sv-row-gutter` class (typically the one rendering the row
- * number 1, 2, 3, ...). Demos opt in by setting
- * `cellClass: 'sv-row-gutter'` on the gutter column.
+ * gutter cell exists in each row. A row-header cell is either the
+ * grid's built-in row-number gutter (enable `showRowNumbers`) or any
+ * TD tagged with the `sv-row-gutter` class (set
+ * `cellClass: 'sv-row-gutter'` on a custom gutter column).
  *
  *   <script>
  *     let heights = $state<Record<number, number>>({})
@@ -103,7 +103,10 @@ export function rowResize(node, opts) {
                 continue;
             if (tr.classList.contains('sv-grid-row-spacer'))
                 continue;
-            const gutter = tr.querySelector('.sv-grid-cell.sv-row-gutter');
+            // A row-header gutter cell: either a user column tagged
+            // `sv-row-gutter`, or the grid's built-in row-number gutter
+            // (`showRowNumbers`), whose cell is `.sv-grid-row-number-cell`.
+            const gutter = tr.querySelector('.sv-grid-cell.sv-row-gutter, .sv-grid-cell.sv-grid-row-number-cell');
             if (!gutter)
                 continue;
             if (gutter.querySelector(`:scope > .${STRIP_CLASS}`))

package/dist/selection.d.ts CHANGED Viewed

@@ -15,6 +15,12 @@ export declare function createSelection<TFeatures extends TableFeatures = TableF
         left: boolean;
         right: boolean;
     } | null;
+    fillMarqueeEdges: (rowIndex: number, colIndex: number) => {
+        top: boolean;
+        bottom: boolean;
+        left: boolean;
+        right: boolean;
+    } | null;
     getSelectionRects: () => {
         minRow: number;
         maxRow: number;

package/dist/selection.js CHANGED Viewed

@@ -264,6 +264,31 @@ export function createSelection(ctx) {
             colIndex <= d.sourceMaxCol;
         return !inSource;
     }
+    /**
+     * Which edges of the fill-drag rectangle a cell sits on, so the render can
+     * paint a single dashed marquee around the WHOLE target range (source +
+     * extension) - the Excel fill-handle look - instead of a thick per-cell
+     * border. Returns null when the cell isn't on the rectangle's boundary.
+     */
+    function fillMarqueeEdges(rowIndex, colIndex) {
+        const d = ctx.fillDrag;
+        if (!d)
+            return null;
+        const minR = Math.min(d.sourceMinRow, d.targetRow);
+        const maxR = Math.max(d.sourceMaxRow, d.targetRow);
+        const minC = Math.min(d.sourceMinCol, d.targetCol);
+        const maxC = Math.max(d.sourceMaxCol, d.targetCol);
+        if (rowIndex < minR || rowIndex > maxR || colIndex < minC || colIndex > maxC) {
+            return null;
+        }
+        const top = rowIndex === minR;
+        const bottom = rowIndex === maxR;
+        const left = colIndex === minC;
+        const right = colIndex === maxC;
+        if (!top && !bottom && !left && !right)
+            return null;
+        return { top, bottom, left, right };
+    }
     /** Look up a column by id without depending on `buildApi`'s private
      *  closure (those helpers don't exist at this scope). */
     function findColumnById(columnId) {
@@ -276,11 +301,11 @@ export function createSelection(ctx) {
         const column = ctx.allColumns[colIndex];
         if (!row || !column || isGroupRow(row))
             return;
-        const cellValue = ctx.getCellDisplayValue(row.id, column.id, getColumnBaseValue(row, column));
-        const isCheckboxColumn = column.columnDef.editorType === "checkbox" ||
-            typeof cellValue === "boolean";
-        if (isCheckboxColumn)
-            return; // let onCellClick toggle the checkbox
+        // NOTE: we no longer bail for checkbox columns. Bailing here meant a
+        // range drag could never START on a checkbox cell. A plain click still
+        // toggles the checkbox via onCellClick (a same-cell click), while a
+        // cross-cell drag fires its `click` on a common ancestor - not the cell -
+        // so it selects a range without toggling.
         const active = ctx.grid.getState().activeCell;
         ctx.activeAtPointerDown = active
             ? { rowIndex: active.rowIndex, colIndex: active.colIndex }
@@ -414,6 +439,7 @@ export function createSelection(ctx) {
         extendSelection,
         isCellInSelectedRange,
         getCellRangeEdges,
+        fillMarqueeEdges,
         getSelectionRects,
         isInFillPreview,
         findColumnById,

package/dist/server-data-source.d.ts CHANGED Viewed

@@ -8,6 +8,12 @@
  * It's headless and framework-agnostic on purpose: wire `setSort` /
  * `setFilter` / `setPage` to the grid's controlled callbacks, and render the
  * grid from the `{ rows, total, loading }` it hands you. See the demo.
+ *
+ * The write side (`createRow` / `updateRow` / `deleteRow`) is optional: a
+ * source that only implements `getRows` stays a pure read model, and the
+ * matching controller methods throw a clear error if called. Mutations are
+ * non-optimistic for now - the grid reflects a change only after the
+ * follow-up re-fetch of the current page lands.
  */
 export type ServerSortModel = Array<{
     id: string;
@@ -45,11 +51,22 @@ export type ServerResult<TData> = {
 };
 export type ServerDataSource<TData> = {
     getRows(request: ServerRequest): Promise<ServerResult<TData>>;
+    /**
+     * Optional write side. Implement whichever your backend supports; the
+     * controller exposes matching `createRow` / `updateRow` / `deleteRow`
+     * methods that call through and then `refresh()` the current page.
+     * Calling a controller method whose source counterpart is missing throws.
+     */
+    createRow?(input: Partial<TData>): Promise<TData>;
+    updateRow?(id: string, patch: Partial<TData>): Promise<TData>;
+    deleteRow?(id: string): Promise<void>;
 };
 export type ServerState<TData> = {
     rows: ReadonlyArray<TData>;
     total: number;
     loading: boolean;
+    /** True while a create / update / delete mutation is in flight. */
+    saving: boolean;
     error: unknown;
     pageIndex: number;
     pageSize: number;
@@ -64,6 +81,23 @@ export type ServerController<TData> = {
     setFilter(filterModel: ServerFilterModel): void;
     setPage(pageIndex: number): void;
     setPageSize(pageSize: number): void;
+    /**
+     * Create a row through the source, then refresh the current page. Resolves
+     * with the created row. Rejects if the source has no `createRow` (or if the
+     * create itself fails - the read state is left untouched on failure).
+     */
+    createRow(input: Partial<TData>): Promise<TData>;
+    /**
+     * Update a row by id through the source. Non-optimistic: refreshes the page.
+     * Optimistic (see `optimistic` + `getRowId` options): patches the local row
+     * immediately, then reconciles with the server result, rolling back on error.
+     */
+    updateRow(id: string, patch: Partial<TData>): Promise<TData>;
+    /**
+     * Delete a row by id through the source. Non-optimistic: refreshes the page.
+     * Optimistic: removes the local row immediately, restoring it on error.
+     */
+    deleteRow(id: string): Promise<void>;
     getState(): ServerState<TData>;
     /** Stop accepting in-flight responses (call on unmount). */
     dispose(): void;
@@ -72,5 +106,14 @@ export type ServerControllerOptions<TData> = {
     pageSize?: number;
     /** Called whenever any of `rows` / `total` / `loading` / page changes. */
     onChange: (state: ServerState<TData>) => void;
+    /**
+     * Apply `updateRow` / `deleteRow` to the local rows immediately (before the
+     * server confirms) and roll back on error - so edits feel instant and no
+     * refetch is needed. Requires `getRowId` to locate rows; ignored without it.
+     * A subsequent `refresh()` reconciles ordering/filtering. Default false.
+     */
+    optimistic?: boolean;
+    /** Resolve a row's stable id, so optimistic update/delete can find it in `rows`. */
+    getRowId?: (row: TData) => string;
 };
 export declare function createServerDataSource<TData>(source: ServerDataSource<TData>, options: ServerControllerOptions<TData>): ServerController<TData>;

package/dist/server-data-source.js CHANGED Viewed

@@ -3,6 +3,7 @@ export function createServerDataSource(source, options) {
         rows: [],
         total: 0,
         loading: false,
+        saving: false,
         error: null,
         pageIndex: 0,
         pageSize: options.pageSize ?? 50,
@@ -51,8 +52,100 @@ export function createServerDataSource(source, options) {
             emit();
         }
     }
+    // Shared mutation lifecycle: flip `saving`, run the write, refresh the
+    // current page on success, and always clear `saving`. A missing source
+    // method (or a disposed controller) rejects before anything is emitted.
+    function mutate(name, thunk) {
+        if (disposed) {
+            return Promise.reject(new Error('createServerDataSource: controller is disposed'));
+        }
+        if (!thunk) {
+            return Promise.reject(new Error(`createServerDataSource: the datasource does not implement ${name}()`));
+        }
+        state.saving = true;
+        emit();
+        return (async () => {
+            try {
+                const result = await thunk();
+                await fetchPage();
+                return result;
+            }
+            finally {
+                state.saving = false;
+                emit();
+            }
+        })();
+    }
+    const optimistic = !!options.optimistic && !!options.getRowId;
+    const getRowId = options.getRowId;
+    // Optimistic update: patch the local row, reconcile with the server result,
+    // roll back on error. Falls back to the plain refresh path when the row
+    // isn't on the current page (nothing local to update).
+    async function optimisticUpdate(id, patch, fn) {
+        if (disposed)
+            throw new Error('createServerDataSource: controller is disposed');
+        const prevRows = state.rows;
+        const idx = prevRows.findIndex((r) => getRowId(r) === id);
+        if (idx < 0)
+            return mutate('updateRow', () => fn(id, patch));
+        state.rows = [...prevRows.slice(0, idx), { ...prevRows[idx], ...patch }, ...prevRows.slice(idx + 1)];
+        state.saving = true;
+        emit();
+        try {
+            const result = await fn(id, patch);
+            state.rows = state.rows.map((r) => (getRowId(r) === id ? result : r));
+            return result;
+        }
+        catch (err) {
+            state.rows = prevRows;
+            throw err;
+        }
+        finally {
+            state.saving = false;
+            emit();
+        }
+    }
+    // Optimistic delete: drop the local row + decrement total, restore on error.
+    async function optimisticDelete(id, fn) {
+        if (disposed)
+            throw new Error('createServerDataSource: controller is disposed');
+        const prevRows = state.rows;
+        const prevTotal = state.total;
+        const next = prevRows.filter((r) => getRowId(r) !== id);
+        if (next.length === prevRows.length)
+            return mutate('deleteRow', () => fn(id));
+        state.rows = next;
+        state.total = Math.max(0, prevTotal - (prevRows.length - next.length));
+        state.saving = true;
+        emit();
+        try {
+            await fn(id);
+        }
+        catch (err) {
+            state.rows = prevRows;
+            state.total = prevTotal;
+            throw err;
+        }
+        finally {
+            state.saving = false;
+            emit();
+        }
+    }
     return {
         refresh: fetchPage,
+        createRow: (input) => mutate('createRow', source.createRow ? () => source.createRow(input) : null),
+        updateRow: (id, patch) => {
+            if (!source.updateRow)
+                return mutate('updateRow', null);
+            const fn = source.updateRow;
+            return optimistic ? optimisticUpdate(id, patch, fn) : mutate('updateRow', () => fn(id, patch));
+        },
+        deleteRow: (id) => {
+            if (!source.deleteRow)
+                return mutate('deleteRow', null);
+            const fn = source.deleteRow;
+            return optimistic ? optimisticDelete(id, fn) : mutate('deleteRow', () => fn(id));
+        },
         setSort(sortModel) {
             state.sortModel = sortModel;
             state.pageIndex = 0;
@@ -78,6 +171,13 @@ export function createServerDataSource(source, options) {
         getState: () => ({ ...state }),
         dispose() {
             disposed = true;
+            // An in-flight fetch's resolution short-circuits on `disposed`, so it
+            // never clears `loading`. Clear it here (and emit) so a disposed
+            // controller doesn't report a permanent loading state.
+            if (state.loading) {
+                state.loading = false;
+                emit();
+            }
         },
     };
 }

package/dist/sparkline.js CHANGED Viewed

@@ -72,12 +72,16 @@ export function buildSparkline(values, cfg = {}) {
     const n = values.length;
     const stepX = n > 1 ? innerW / (n - 1) : 0;
     const pts = values.map((v, i) => ({
-        x: pad + i * stepX,
+        // A single point has no span to walk, so centre it rather than pinning it
+        // to the left edge.
+        x: n === 1 ? pad + innerW / 2 : pad + i * stepX,
         y: pad + innerH - ((v - min) / span) * innerH,
     }));
-    const linePath = pts
-        .map((p, i) => `${i === 0 ? 'M' : 'L'}${round(p.x)},${round(p.y)}`)
-        .join(' ');
+    const linePath = n === 1
+        ? // One point produces only a moveto, which draws nothing. Emit a tiny
+            // horizontal segment so a single value still renders a visible mark.
+            `M${round(pts[0].x - 1)},${round(pts[0].y)} L${round(pts[0].x + 1)},${round(pts[0].y)}`
+        : pts.map((p, i) => `${i === 0 ? 'M' : 'L'}${round(p.x)},${round(p.y)}`).join(' ');
     const first = pts[0];
     const last = pts[pts.length - 1];
     const baseY = pad + innerH;

package/dist/svgrid-wrapper.types.d.ts CHANGED Viewed

@@ -1,4 +1,5 @@
-import type { ColumnDef, RowData, SvGridOptions, TableFeatures } from './core';
+import type { CellFormatConfig, ColumnDef, RowData, SvGridOptions, TableFeatures } from './core';
+import type { GridExportOptions, GridClipboardOptions } from './export-format';
 export type SvGridFilterOperator = 'contains' | 'equals' | 'startsWith' | 'greaterThan' | 'lessThan' | 'between' | 'isBlank';
 /**
  * A serializable snapshot of everything that makes up the current "view":
@@ -168,7 +169,31 @@ export type SvGridApi<TFeatures extends TableFeatures, TData extends RowData> =
         field?: string;
         header: string;
         visible: boolean;
+        /** The column's `format` config, when set. Lets an exporter reproduce
+         *  the on-screen display value (currency, date pattern, etc.). */
+        format?: CellFormatConfig;
+        /** Effective horizontal alignment ('left' | 'center' | 'right'). */
+        align?: 'left' | 'center' | 'right';
     }>;
+    /**
+     * Export the grid to a **CSV** file. Free in the community grid; the
+     * richer Excel / PDF / styled formats live in @svgrid/enterprise. Values
+     * are formatted as shown on screen (pass `rawValues: true` for raw). Rows
+     * default to the current view (`rows: 'selected' | 'all'` to change).
+     * Resolves with the serialized text; pass `download: false` to skip the
+     * browser download and just get the string.
+     */
+    exportCsv(options?: GridExportOptions): Promise<string>;
+    /** Export the grid to a **TSV** file (tab-separated). See `exportCsv`. */
+    exportTsv(options?: GridExportOptions): Promise<string>;
+    /** Export the grid to a **JSON** file (array of `{ field: value }`). */
+    exportJson(options?: GridExportOptions): Promise<string>;
+    /**
+     * Copy the grid to the system clipboard. `format: 'tsv'` (default) pastes
+     * straight into Excel / Sheets; `'csv'` / `'markdown'` also supported.
+     * Resolves with the copied text.
+     */
+    copyToClipboard(options?: GridClipboardOptions): Promise<string>;
     /** Clear every checked row. Emits `onRowSelectionChange({}, [])`. */
     clearRowSelection(): void;
     /**

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@svgrid/grid",
-  "version": "1.2.22",
+  "version": "1.2.24",
   "description": "SvGrid - a headless-first, Svelte 5-native data grid engine and render component.",
   "author": "jQWidgets <boikom@jqwidgets.com>",
   "license": "MIT",
@@ -42,6 +42,11 @@
       "svelte": "./dist/static-functions.js",
       "import": "./dist/static-functions.js"
     },
+    "./format": {
+      "types": "./dist/export-format.d.ts",
+      "svelte": "./dist/export-format.js",
+      "import": "./dist/export-format.js"
+    },
     "./flex-render": {
       "types": "./dist/flex-render.d.ts",
       "svelte": "./dist/flex-render.js",

package/src/GridFooter.svelte CHANGED Viewed

@@ -47,7 +47,23 @@
     } from "./SvGrid.controller.svelte";
   import type { SvGridController } from "./SvGrid.controller.svelte";
-  let { ctrl }: { ctrl: SvGridController<TFeatures, TData> } = $props();
+  let {
+    ctrl,
+    pager = true,
+    showStatus = true,
+    top = false,
+    pageSizeOptions,
+  }: {
+    ctrl: SvGridController<TFeatures, TData>;
+    /** Render the pagination controls in this instance. */
+    pager?: boolean;
+    /** Render the status bar in this instance. */
+    showStatus?: boolean;
+    /** This is a top-positioned footer (styling only). */
+    top?: boolean;
+    /** Page-size choices for the selector. Defaults to `[10, 25, 50, 100]`. */
+    pageSizeOptions?: number[];
+  } = $props();
   // View facade: re-bind the controller's reactive members so the markup
   // (moved verbatim from SvGrid.svelte) stays identical.
@@ -63,7 +79,7 @@
   const setPageSize = $derived(ctrl.setPageSize);
 </script>
-    {#if statusBarEnabled && statusBarStats}
+    {#if showStatus && statusBarEnabled && statusBarStats}
       {@const s = statusBarStats}
       <div class="sv-grid-status-bar" role="status" aria-live="polite">
         {#each statusBarAggregates as agg (agg)}
@@ -96,31 +112,29 @@
       </div>
     {/if}
-    {#if paginationEnabled}
-      {@const totalRows = allRowsBeforePagination.length}
-      {@const pageSize = paginationState.pageSize}
+    {#if pager && paginationEnabled}
+      {@const totalRows = ctrl.paginationTotalRows}
+      {@const pageSize = ctrl.paginationPageSize}
       {@const pageCount = Math.max(1, Math.ceil(totalRows / pageSize))}
-      {@const currentPage = Math.min(paginationState.pageIndex + 1, pageCount)}
+      {@const currentPage = Math.min(ctrl.paginationPageIndex + 1, pageCount)}
       {@const rangeStart =
         totalRows === 0 ? 0 : (currentPage - 1) * pageSize + 1}
       {@const rangeEnd = Math.min(totalRows, currentPage * pageSize)}
       {@const onFirst = currentPage <= 1}
       {@const onLast = currentPage >= pageCount}
-      <div class="sv-grid-pagination" role="navigation" aria-label="Pagination">
-        <label class="sv-grid-pagination-pagesize">
+      {@const sizes = pageSizeOptions && pageSizeOptions.length ? pageSizeOptions : [10, 25, 50, 100]}
+      <div class="sv-grid-pagination" class:sv-grid-pagination-top={top} role="navigation" aria-label="Pagination">
+        <div class="sv-grid-pagination-pagesize">
           <span>Page Size:</span>
-          <select
-            onchange={(event) =>
-              setPageSize(
-                parseInt((event.currentTarget as HTMLSelectElement).value, 10),
-              )}
-          >
-            <option value="10" selected={pageSize === 10}>10</option>
-            <option value="25" selected={pageSize === 25}>25</option>
-            <option value="50" selected={pageSize === 50}>50</option>
-            <option value="100" selected={pageSize === 100}>100</option>
-          </select>
-        </label>
+          <div class="sv-grid-pagination-pagesize-dd">
+            <SvGridDropdown
+              options={sizes.map((n) => ({ value: n, label: String(n) }))}
+              value={pageSize}
+              autoOpen={false}
+              onChange={(v) => setPageSize(Number(v))}
+            />
+          </div>
+        </div>
         <span class="sv-grid-pagination-range">
           <strong>{rangeStart.toLocaleString()}</strong> to
           <strong>{rangeEnd.toLocaleString()}</strong> of