@marianmeres/stuic 3.67.0 → 3.69.0

package/dist/components/DataTable/DataTable.svelte

@@ -21,6 +21,10 @@
 			no_data: "No data",
 			select_all_rows: "Select all rows on this page",
 			select_row: "Select row",
+			select_all_on_page_x: "All {count} on this page selected.",
+			select_all_results: "Select all {totalCount} results",
+			all_results_selected: "All {totalCount} results selected.",
+			clear_selection: "Clear selection",
 		};
 		let out = m[k] ?? fallback ?? k;
 		return isPlainObject(values)
@@ -74,6 +78,23 @@
 		/** Return true to disable selection for a specific row */
 		selectDisabledBy?: (row: T, index: number) => boolean;
 
+		/**
+		 * Allow the user to opt into "select all results across all pages" mode.
+		 * When enabled and `paging.total > data.length`, a banner offers to expand
+		 * selection beyond the current page. Consumers must execute batch operations
+		 * as server-side filter queries (not by iterating row IDs) since off-page rows
+		 * are not available locally.
+		 */
+		allowSelectAllPages?: boolean;
+		/**
+		 * All-pages selection mode (bindable). When true, selection semantics invert:
+		 * `excluded` holds deselected IDs, and every row not in `excluded` is selected.
+		 * Newly inserted rows are implicitly selected in this mode.
+		 */
+		selectedAll?: boolean;
+		/** Set of row IDs explicitly deselected while in all-pages mode (bindable) */
+		excluded?: Set<string | number>;
+
 		/** Callback when a row is clicked */
 		onRowClick?: (row: T, index: number) => void;
 
@@ -103,12 +124,40 @@
 				},
 			]
 		>;
-		/** Batch actions bar snippet (shown when items are selected) */
+		/**
+		 * Batch actions bar snippet (shown when items are selected).
+		 *
+		 * Note: in all-pages mode (`selectedAll === true`) `selectedRows` only contains
+		 * rows from the current page that aren't excluded. Off-page rows are not
+		 * materialized — execute batch operations server-side using the active filter
+		 * minus `excluded`.
+		 */
 		batchActions?: Snippet<
 			[
 				{
 					selected: Set<string | number>;
 					selectedRows: T[];
+					selectedAll: boolean;
+					excluded: Set<string | number>;
+					/** `selected.size` in normal mode, or `totalItems - excluded.size` in all-pages mode */
+					effectiveCount: number;
+					totalCount: number | null;
+					clearSelection: () => void;
+				},
+			]
+		>;
+		/**
+		 * Custom "select all results across pages" banner. When omitted, a default
+		 * banner is rendered.
+		 */
+		selectAllBanner?: Snippet<
+			[
+				{
+					selectedAll: boolean;
+					effectiveCount: number;
+					totalCount: number;
+					pageCount: number;
+					selectAll: () => void;
 					clearSelection: () => void;
 				},
 			]
@@ -150,11 +199,15 @@
 		selected = $bindable(new Set()),
 		selectOnRowClick = false,
 		selectDisabledBy,
+		allowSelectAllPages = false,
+		selectedAll = $bindable(false),
+		excluded = $bindable(new Set()),
 		onRowClick,
 		loading = false,
 		cell,
 		row,
 		batchActions,
+		selectAllBanner,
 		empty,
 		mobileRow,
 		t = t_default,
@@ -181,47 +234,114 @@
 			.filter((id): id is string | number => id !== null);
 	});
 
+	function isRowSelected(id: string | number): boolean {
+		return selectedAll ? !excluded.has(id) : selected.has(id);
+	}
+
+	// Batch variant avoids creating one Set per row for shift-range / select-all.
+	function setRowsSelected(ids: Array<string | number>, on: boolean) {
+		if (selectedAll) {
+			const next = new Set(excluded);
+			for (const id of ids) {
+				if (on) next.delete(id);
+				else next.add(id);
+			}
+			excluded = next;
+		} else {
+			const next = new Set(selected);
+			for (const id of ids) {
+				if (on) next.add(id);
+				else next.delete(id);
+			}
+			selected = next;
+		}
+	}
+
 	let allOnPageSelected = $derived.by(() => {
 		if (!selectable || selectableRowIds.length === 0) return false;
-		return selectableRowIds.every((id) => selected.has(id));
+		return selectableRowIds.every((id) => isRowSelected(id));
 	});
 
 	let someOnPageSelected = $derived.by(() => {
 		if (!selectable || selectableRowIds.length === 0) return false;
-		return selectableRowIds.some((id) => selected.has(id)) && !allOnPageSelected;
+		return selectableRowIds.some((id) => isRowSelected(id)) && !allOnPageSelected;
+	});
+
+	let totalCount = $derived(paging?.total ?? null);
+	let effectiveCount = $derived.by(() => {
+		if (selectedAll) {
+			const base = totalCount ?? data.length;
+			return Math.max(0, base - excluded.size);
+		}
+		return selected.size;
 	});
 
 	let selectedRows = $derived.by(() => {
-		if (!selectable || selected.size === 0) return [] as T[];
+		if (!selectable) return [] as T[];
+		if (selectedAll) {
+			return data.filter((row, i) => !excluded.has(getRowId(row, i)));
+		}
+		if (selected.size === 0) return [] as T[];
 		return data.filter((row, i) => selected.has(getRowId(row, i)));
 	});
 
 	function toggleSelectAll() {
-		if (allOnPageSelected) {
-			const next = new Set(selected);
-			for (const id of selectableRowIds) next.delete(id);
-			selected = next;
-		} else {
-			const next = new Set(selected);
-			for (const id of selectableRowIds) next.add(id);
-			selected = next;
+		// In all-mode the header checkbox exits the mode entirely.
+		if (selectedAll) {
+			clearAllSelection();
+			return;
 		}
+		setRowsSelected(selectableRowIds, !allOnPageSelected);
 	}
 
 	function toggleSelectRow(id: string | number) {
-		const next = new Set(selected);
-		if (next.has(id)) {
-			next.delete(id);
-		} else {
-			next.add(id);
-		}
-		selected = next;
+		setRowsSelected([id], !isRowSelected(id));
 	}
 
-	function clearSelection() {
+	function enterSelectAll() {
 		selected = new Set();
+		excluded = new Set();
+		selectedAll = true;
+	}
+
+	function clearAllSelection() {
+		selectedAll = false;
+		excluded = new Set();
+		selected = new Set();
+		lastClickedIndex = null;
+	}
+
+	// Anchor for shift+click range selection; reset when data reference changes.
+	let lastClickedIndex: number | null = null;
+	$effect(() => {
+		data;
+		lastClickedIndex = null;
+	});
+
+	function handleCheckboxClick(rowIndex: number, e: MouseEvent) {
+		const newChecked = (e.currentTarget as HTMLInputElement).checked;
+		if (e.shiftKey && lastClickedIndex !== null && lastClickedIndex !== rowIndex) {
+			const start = Math.min(lastClickedIndex, rowIndex);
+			const end = Math.max(lastClickedIndex, rowIndex);
+			const ids: Array<string | number> = [];
+			for (let i = start; i <= end; i++) {
+				if (selectDisabledBy?.(data[i], i)) continue;
+				ids.push(getRowId(data[i], i));
+			}
+			setRowsSelected(ids, newChecked);
+		} else {
+			setRowsSelected([getRowId(data[rowIndex], rowIndex)], newChecked);
+		}
+		lastClickedIndex = rowIndex;
 	}
 
+	let showSelectAllBanner = $derived.by(() => {
+		if (!allowSelectAllPages || !selectable || !paging) return false;
+		if (paging.total <= data.length) return false;
+		if (selectedAll) return true;
+		return allOnPageSelected;
+	});
+
 	// --- Row click ---
 	function handleRowClick(row: T, index: number, e: MouseEvent) {
 		const target = e.target as HTMLElement;
@@ -256,12 +376,48 @@
 </script>
 
 <!-- Batch action bar -->
-{#if selectable && selected.size > 0 && batchActions}
+{#if selectable && effectiveCount > 0 && batchActions}
 	<div class={!unstyled ? "stuic-data-table-batch" : undefined}>
-		{@render batchActions({ selected, selectedRows, clearSelection })}
+		{@render batchActions({
+			selected,
+			selectedRows,
+			selectedAll,
+			excluded,
+			effectiveCount,
+			totalCount,
+			clearSelection: clearAllSelection,
+		})}
 	</div>
 {/if}
 
+<!-- Select-all-across-pages banner -->
+{#if showSelectAllBanner && paging}
+	{#if selectAllBanner}
+		{@render selectAllBanner({
+			selectedAll,
+			effectiveCount,
+			totalCount: paging.total,
+			pageCount: data.length,
+			selectAll: enterSelectAll,
+			clearSelection: clearAllSelection,
+		})}
+	{:else}
+		<div class={!unstyled ? "stuic-data-table-select-all-banner" : undefined}>
+			{#if selectedAll}
+				<span>{t("all_results_selected", { totalCount: paging.total })}</span>
+				<Button variant="ghost" size="sm" onclick={clearAllSelection}>
+					{t("clear_selection")}
+				</Button>
+			{:else}
+				<span>{t("select_all_on_page_x", { count: data.length })}</span>
+				<Button variant="ghost" size="sm" onclick={enterSelectAll}>
+					{t("select_all_results", { totalCount: paging.total })}
+				</Button>
+			{/if}
+		</div>
+	{/if}
+{/if}
+
 <!-- Root container -->
 <div bind:this={el} class={rootClass} {...rest}>
 	{#if isDesktop}
@@ -303,7 +459,7 @@
 				<tbody>
 					{#each data as rowData, rowIndex (getRowId(rowData, rowIndex))}
 						{@const rowId = getRowId(rowData, rowIndex)}
-						{@const isSelected = selectable && selected.has(rowId)}
+						{@const isSelected = selectable && isRowSelected(rowId)}
 						{@const selectDisabled = !!selectDisabledBy?.(rowData, rowIndex)}
 						{#if row}
 							{@render row({ row: rowData, columns, rowIndex, isSelected })}
@@ -322,7 +478,7 @@
 											type="checkbox"
 											checked={isSelected}
 											disabled={selectDisabled}
-											onchange={() => toggleSelectRow(rowId)}
+											onclick={(e) => handleCheckboxClick(rowIndex, e)}
 											aria-label={t("select_row")}
 										/>
 									</td>
@@ -373,7 +529,7 @@
 		>
 			{#each data as rowData, rowIndex (getRowId(rowData, rowIndex))}
 				{@const rowId = getRowId(rowData, rowIndex)}
-				{@const isSelected = selectable && selected.has(rowId)}
+				{@const isSelected = selectable && isRowSelected(rowId)}
 				{@const selectDisabled = !!selectDisabledBy?.(rowData, rowIndex)}
 				{#if mobileRow}
 					{@render mobileRow({
@@ -412,7 +568,7 @@
 									type="checkbox"
 									checked={isSelected}
 									disabled={selectDisabled}
-									onchange={() => toggleSelectRow(rowId)}
+									onclick={(e) => handleCheckboxClick(rowIndex, e)}
 									aria-label={t("select_row")}
 								/>
 							</div>

package/dist/components/DataTable/DataTable.svelte.d.ts

@@ -40,6 +40,22 @@ export interface Props<T = Record<string, any>> extends Omit<HTMLAttributes<HTML
     selectOnRowClick?: boolean;
     /** Return true to disable selection for a specific row */
     selectDisabledBy?: (row: T, index: number) => boolean;
+    /**
+     * Allow the user to opt into "select all results across all pages" mode.
+     * When enabled and `paging.total > data.length`, a banner offers to expand
+     * selection beyond the current page. Consumers must execute batch operations
+     * as server-side filter queries (not by iterating row IDs) since off-page rows
+     * are not available locally.
+     */
+    allowSelectAllPages?: boolean;
+    /**
+     * All-pages selection mode (bindable). When true, selection semantics invert:
+     * `excluded` holds deselected IDs, and every row not in `excluded` is selected.
+     * Newly inserted rows are implicitly selected in this mode.
+     */
+    selectedAll?: boolean;
+    /** Set of row IDs explicitly deselected while in all-pages mode (bindable) */
+    excluded?: Set<string | number>;
     /** Callback when a row is clicked */
     onRowClick?: (row: T, index: number) => void;
     /** Show loading state (spinner overlay + reduced opacity) */
@@ -63,11 +79,37 @@ export interface Props<T = Record<string, any>> extends Omit<HTMLAttributes<HTML
             isSelected: boolean;
         }
     ]>;
-    /** Batch actions bar snippet (shown when items are selected) */
+    /**
+     * Batch actions bar snippet (shown when items are selected).
+     *
+     * Note: in all-pages mode (`selectedAll === true`) `selectedRows` only contains
+     * rows from the current page that aren't excluded. Off-page rows are not
+     * materialized — execute batch operations server-side using the active filter
+     * minus `excluded`.
+     */
     batchActions?: Snippet<[
         {
             selected: Set<string | number>;
             selectedRows: T[];
+            selectedAll: boolean;
+            excluded: Set<string | number>;
+            /** `selected.size` in normal mode, or `totalItems - excluded.size` in all-pages mode */
+            effectiveCount: number;
+            totalCount: number | null;
+            clearSelection: () => void;
+        }
+    ]>;
+    /**
+     * Custom "select all results across pages" banner. When omitted, a default
+     * banner is rendered.
+     */
+    selectAllBanner?: Snippet<[
+        {
+            selectedAll: boolean;
+            effectiveCount: number;
+            totalCount: number;
+            pageCount: number;
+            selectAll: () => void;
             clearSelection: () => void;
         }
     ]>;
@@ -93,7 +135,7 @@ export interface Props<T = Record<string, any>> extends Omit<HTMLAttributes<HTML
 declare function $$render<T extends Record<string, any> = Record<string, any>>(): {
     props: Props<T>;
     exports: {};
-    bindings: "el" | "selected";
+    bindings: "el" | "selected" | "selectedAll" | "excluded";
     slots: {};
     events: {};
 };
@@ -101,7 +143,7 @@ declare class __sveltets_Render<T extends Record<string, any> = Record<string, a
     props(): ReturnType<typeof $$render<T>>['props'];
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "el" | "selected";
+    bindings(): "el" | "selected" | "selectedAll" | "excluded";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/components/DataTable/README.md

@@ -62,6 +62,72 @@ DataTable integrates with [`@marianmeres/paging-store`](https://github.com/maria
 </DataTable>
 ```
 
+Shift+click a checkbox to toggle a range of rows from the last clicked checkbox to the current one. Disabled rows in the range are skipped. The anchor resets when `data` changes (e.g. on page navigation).
+
+### Select All Across Pages
+
+When your data is paged, DataTable can offer a "select all results" affordance that expands selection beyond the current page. Enable it with `allowSelectAllPages`. When the user opts in, selection flips to **all-pages mode**: every row is implicitly selected, and `excluded` holds IDs the user has explicitly deselected.
+
+```svelte
+<script lang="ts">
+	let selected = $state(new Set<string | number>());
+	let selectedAll = $state(false);
+	let excluded = $state(new Set<string | number>());
+</script>
+
+<DataTable
+	{columns}
+	{data}
+	{paging}
+	{onPageChange}
+	selectable
+	allowSelectAllPages
+	bind:selected
+	bind:selectedAll
+	bind:excluded
+	getRowId={(row) => row.id}
+>
+	{#snippet batchActions({ selectedAll, excluded, effectiveCount, totalCount, clearSelection })}
+		<span>{effectiveCount} selected{selectedAll ? ` of ${totalCount}` : ""}</span>
+		<Button onclick={() => deleteSelection({ selectedAll, excluded })}>Delete</Button>
+		<Button variant="ghost" onclick={clearSelection}>Clear</Button>
+	{/snippet}
+</DataTable>
+```
+
+**Important — executing batch operations:** in all-pages mode the off-page rows are not loaded locally, so consumers cannot iterate IDs. Execute operations server-side using the active filter minus `excluded`:
+
+```ts
+function deleteSelection({ selectedAll, excluded }) {
+	if (selectedAll) {
+		// Server-side: DELETE FROM rows WHERE <currentFilter> AND id NOT IN excluded
+		return api.delete({ filter: currentFilter, exclude: [...excluded] });
+	}
+	return api.delete({ ids: [...selected] });
+}
+```
+
+New records inserted while all-pages mode is active are implicitly selected (they aren't in `excluded`). This matches the conventional intent — "delete everything matching X" should include matches that arrive before the operation runs. If you need snapshot-at-click semantics, capture a timestamp or ID list in your consumer.
+
+**Customising the banner:** the default banner uses the built-in `t()` keys `select_all_on_page_x`, `select_all_results`, `all_results_selected`, and `clear_selection`. Override markup entirely with the `selectAllBanner` snippet:
+
+```svelte
+<DataTable {columns} {data} {paging} selectable allowSelectAllPages bind:selected bind:selectedAll bind:excluded>
+	{#snippet selectAllBanner({ selectedAll, totalCount, selectAll, clearSelection })}
+		<div class="my-banner">
+			{#if selectedAll}
+				<span>All {totalCount} selected.</span>
+				<button onclick={clearSelection}>Undo</button>
+			{:else}
+				<button onclick={selectAll}>Select all {totalCount}</button>
+			{/if}
+		</div>
+	{/snippet}
+</DataTable>
+```
+
+**Filter changes:** when filters change in the consumer, reset the bound selection stores (`selected`, `selectedAll`, `excluded`) explicitly — DataTable doesn't track which filter produced the current state.
+
 ### Custom Cell Rendering
 
 The `cell` snippet is used for both desktop and mobile layouts. Use the `variant` param if rendering differs per layout.
@@ -134,6 +200,9 @@ Replace the entire `<tr>` on desktop. When this snippet is provided, DataTable d
 | `selected`          | `Set<string \| number>`                    | `new Set()`   | Selected row IDs (bindable)                                       |
 | `selectOnRowClick`  | `boolean`                                  | `false`       | Clicking anywhere on a row toggles its selection                  |
 | `selectDisabledBy`  | `(row, index) => boolean`                  | -             | Return `true` to disable selection for a specific row             |
+| `allowSelectAllPages` | `boolean`                                | `false`       | Show a banner offering "select all results" across paged data     |
+| `selectedAll`       | `boolean`                                  | `false`       | All-pages mode flag (bindable). In this mode `excluded` drives selection |
+| `excluded`          | `Set<string \| number>`                    | `new Set()`   | Deselected row IDs while in all-pages mode (bindable)             |
 | `onRowClick`        | `(row, index) => void`                     | -             | Row click callback                                                |
 | `loading`           | `boolean`                                  | `false`       | Show loading overlay                                              |
 | `small`             | `boolean`                                  | `false`       | Force mobile/card layout regardless of viewport                   |
@@ -142,6 +211,7 @@ Replace the entire `<tr>` on desktop. When this snippet is provided, DataTable d
 | `row`               | `Snippet`                                  | -             | Custom desktop `<tr>` renderer (overrides default row)            |
 | `mobileRow`         | `Snippet`                                  | -             | Custom mobile card renderer                                       |
 | `batchActions`      | `Snippet`                                  | -             | Batch action bar content                                          |
+| `selectAllBanner`   | `Snippet`                                  | -             | Override default "select all across pages" banner                 |
 | `empty`             | `Snippet`                                  | -             | Custom empty state                                                |
 | `unstyled`          | `boolean`                                  | `false`       | Skip default styling                                              |
 | `class`             | `string`                                   | -             | Additional CSS classes                                            |
@@ -149,15 +219,18 @@ Replace the entire `<tr>` on desktop. When this snippet is provided, DataTable d
 
 ### Snippet signatures
 
-| Snippet        | Props                                                                                            |
-| -------------- | ------------------------------------------------------------------------------------------------ |
-| `cell`         | `{ column, row, value, rowIndex, variant: "desktop" \| "mobile" }`                               |
-| `row`          | `{ row, columns, rowIndex, isSelected }` — desktop only                                          |
-| `mobileRow`    | `{ row, columns, rowIndex }` — mobile only                                                       |
-| `batchActions` | `{ selected, selectedRows, clearSelection }`                                                     |
-| `empty`        | —                                                                                                |
+| Snippet            | Props                                                                                                                |
+| ------------------ | -------------------------------------------------------------------------------------------------------------------- |
+| `cell`             | `{ column, row, value, rowIndex, variant: "desktop" \| "mobile" }`                                                   |
+| `row`              | `{ row, columns, rowIndex, isSelected }` — desktop only                                                              |
+| `mobileRow`        | `{ row, columns, rowIndex }` — mobile only                                                                           |
+| `batchActions`     | `{ selected, selectedRows, selectedAll, excluded, effectiveCount, totalCount, clearSelection }`                      |
+| `selectAllBanner`  | `{ selectedAll, effectiveCount, totalCount, pageCount, selectAll, clearSelection }`                                  |
+| `empty`            | —                                                                                                                    |
 
-> **Note:** "Select all rows" affects only the rows currently in `data` (i.e. the current page when using external paging). Rows for which `selectDisabledBy` returns `true` are excluded from "select all".
+> **Note:** "Select all rows" affects only the rows currently in `data` (i.e. the current page when using external paging). Rows for which `selectDisabledBy` returns `true` are excluded from "select all". To select across pages, enable `allowSelectAllPages` and use the banner that appears.
+>
+> **Note:** `clearSelection` (exposed by the `batchActions` snippet) resets all selection state — `selected`, `selectedAll`, and `excluded` — including exiting all-pages mode.
 
 ## DataTableColumn
 
@@ -197,3 +270,6 @@ Replace the entire `<tr>` on desktop. When this snippet is provided, DataTable d
 | `--stuic-data-table-card-radius`        | `var(--radius-md)`                    | Mobile card radius        |
 | `--stuic-data-table-card-padding`       | `0.75rem`                             | Mobile card padding       |
 | `--stuic-data-table-card-gap`           | `0.5rem`                              | Gap between mobile cards  |
+| `--stuic-data-table-select-all-bg`      | `color-mix(primary 10%)`              | Select-all banner background |
+| `--stuic-data-table-select-all-padding-x` | `0.75rem`                           | Banner horizontal padding |
+| `--stuic-data-table-select-all-padding-y` | `0.5rem`                            | Banner vertical padding   |

package/dist/components/DataTable/index.css

@@ -38,6 +38,11 @@
 	--stuic-data-table-batch-padding-x: 0.75rem;
 	--stuic-data-table-batch-padding-y: 0.5rem;
 
+	/* Select-all-across-pages banner */
+	--stuic-data-table-select-all-bg: color-mix(in srgb, var(--stuic-color-primary) 10%, var(--stuic-color-background));
+	--stuic-data-table-select-all-padding-x: 0.75rem;
+	--stuic-data-table-select-all-padding-y: 0.5rem;
+
 	/* Checkbox column */
 	--stuic-data-table-checkbox-width: 3rem;
 
@@ -210,6 +215,25 @@
 		margin-bottom: 0.5rem;
 	}
 
+	/* ============================================================================
+	   SELECT-ALL-ACROSS-PAGES BANNER
+	   ============================================================================ */
+
+	.stuic-data-table-select-all-banner {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--stuic-data-table-paging-gap);
+		padding: var(--stuic-data-table-select-all-padding-y)
+			var(--stuic-data-table-select-all-padding-x);
+		background: var(--stuic-data-table-select-all-bg);
+		border-radius: var(--stuic-data-table-radius, var(--stuic-radius));
+		margin-bottom: 0.5rem;
+		font-size: var(--stuic-data-table-cell-font-size);
+		color: var(--stuic-data-table-header-color);
+		text-align: center;
+	}
+
 	/* ============================================================================
 	   LOADING SPINNER OVERLAY
 	   ============================================================================ */