@marianmeres/stuic 3.66.1 → 3.68.0

package/dist/components/DataTable/DataTable.svelte

@@ -19,8 +19,12 @@
 			next_page: "Next",
 			page_x_of_y: "Page {page} of {pageCount}",
 			no_data: "No data",
-			select_all_rows: "Select all rows",
+			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)
@@ -71,6 +75,25 @@
 		selected?: Set<string | number>;
 		/** Toggle row selection when clicking anywhere on the row */
 		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;
@@ -78,16 +101,63 @@
 		/** Show loading state (spinner overlay + reduced opacity) */
 		loading?: boolean;
 
-		/** Custom cell renderer snippet */
+		/** Custom cell renderer snippet (rendered in both desktop table and mobile card layouts; use `variant` to tell them apart) */
 		cell?: Snippet<
-			[{ column: DataTableColumn<T>; row: T; value: any; rowIndex: number }]
+			[
+				{
+					column: DataTableColumn<T>;
+					row: T;
+					value: any;
+					rowIndex: number;
+					variant: "desktop" | "mobile";
+				},
+			]
 		>;
-		/** Batch actions bar snippet (shown when items are selected) */
+		/** Custom desktop row renderer — replaces the entire `<tr>` */
+		row?: Snippet<
+			[
+				{
+					row: T;
+					columns: DataTableColumn<T>[];
+					rowIndex: number;
+					isSelected: boolean;
+				},
+			]
+		>;
+		/**
+		 * 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;
 				},
 			]
@@ -96,8 +166,6 @@
 		empty?: Snippet;
 		/** Custom mobile row card snippet */
 		mobileRow?: Snippet<[{ row: T; columns: DataTableColumn<T>[]; rowIndex: number }]>;
-		/** Default children snippet (not used directly) */
-		children?: Snippet;
 
 		/** Optional translate function */
 		t?: TranslateFn;
@@ -130,13 +198,18 @@
 		selectable = false,
 		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,
-		children,
 		t = t_default,
 		small = false,
 		unstyled = false,
@@ -154,48 +227,121 @@
 
 	// --- Selection ---
 	let allRowIds = $derived(data.map((row, i) => getRowId(row, i)));
+	let selectableRowIds = $derived.by(() => {
+		if (!selectDisabledBy) return allRowIds;
+		return data
+			.map((row, i) => (selectDisabledBy(row, i) ? null : getRowId(row, i)))
+			.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 || allRowIds.length === 0) return false;
-		return allRowIds.every((id) => selected.has(id));
+		if (!selectable || selectableRowIds.length === 0) return false;
+		return selectableRowIds.every((id) => isRowSelected(id));
 	});
 
 	let someOnPageSelected = $derived.by(() => {
-		if (!selectable || allRowIds.length === 0) return false;
-		return allRowIds.some((id) => selected.has(id)) && !allOnPageSelected;
+		if (!selectable || selectableRowIds.length === 0) return false;
+		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 allRowIds) next.delete(id);
-			selected = next;
-		} else {
-			const next = new Set(selected);
-			for (const id of allRowIds) 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;
@@ -230,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}
@@ -248,7 +430,7 @@
 				<thead>
 					<tr>
 						{#if selectable}
-							<th data-checkbox class="stuic-checkbox">
+							<th scope="col" data-checkbox class="stuic-checkbox">
 								<input
 									type="checkbox"
 									checked={allOnPageSelected}
@@ -260,6 +442,7 @@
 						{/if}
 						{#each columns as col (col.key)}
 							<th
+								scope="col"
 								class={col.classHeader}
 								data-align={!unstyled && col.align ? col.align : undefined}
 								style={col.width ? `width: ${col.width}` : undefined}
@@ -274,46 +457,53 @@
 					</tr>
 				</thead>
 				<tbody>
-					{#each data as row, rowIndex (getRowId(row, rowIndex))}
-						{@const rowId = getRowId(row, rowIndex)}
-						{@const isSelected = selectable && selected.has(rowId)}
-						<tr
-							data-hoverable={!unstyled ? "true" : undefined}
-							data-clickable={!unstyled && (onRowClick || selectOnRowClick)
-								? "true"
-								: undefined}
-							data-selected={!unstyled && isSelected ? "true" : undefined}
-							onclick={(e) => handleRowClick(row, rowIndex, e)}
-						>
-							{#if selectable}
-								<td data-checkbox class="stuic-checkbox">
-									<input
-										type="checkbox"
-										checked={isSelected}
-										onchange={() => toggleSelectRow(rowId)}
-										aria-label={t("select_row")}
-									/>
-								</td>
-							{/if}
-							{#each columns as col (col.key)}
-								{@const value = getCellValue(row, col)}
-								<td
-									class={col.class}
-									data-align={!unstyled && col.align ? col.align : undefined}
-								>
-									{#if cell}
-										{@render cell({
-											column: col,
-											row,
-											value,
-											rowIndex,
-										})}
-									{:else}
-										{getCellDisplay(row, col)}
-									{/if}
-								</td>
-							{/each}
-						</tr>
+					{#each data as rowData, rowIndex (getRowId(rowData, rowIndex))}
+						{@const rowId = getRowId(rowData, rowIndex)}
+						{@const isSelected = selectable && isRowSelected(rowId)}
+						{@const selectDisabled = !!selectDisabledBy?.(rowData, rowIndex)}
+						{#if row}
+							{@render row({ row: rowData, columns, rowIndex, isSelected })}
+						{:else}
+							<tr
+								data-hoverable={!unstyled ? "true" : undefined}
+								data-clickable={!unstyled && (onRowClick || selectOnRowClick)
+									? "true"
+									: undefined}
+								data-selected={!unstyled && isSelected ? "true" : undefined}
+								onclick={(e) => handleRowClick(rowData, rowIndex, e)}
+							>
+								{#if selectable}
+									<td data-checkbox class="stuic-checkbox">
+										<input
+											type="checkbox"
+											checked={isSelected}
+											disabled={selectDisabled}
+											onclick={(e) => handleCheckboxClick(rowIndex, e)}
+											aria-label={t("select_row")}
+										/>
+									</td>
+								{/if}
+								{#each columns as col (col.key)}
+									{@const value = getCellValue(rowData, col)}
+									<td
+										class={col.class}
+										data-align={!unstyled && col.align ? col.align : undefined}
+									>
+										{#if cell}
+											{@render cell({
+												column: col,
+												row: rowData,
+												value,
+												rowIndex,
+												variant: "desktop",
+											})}
+										{:else}
+											{getCellDisplay(rowData, col)}
+										{/if}
+									</td>
+								{/each}
+							</tr>
+						{/if}
 					{:else}
 						<tr>
 							<td
@@ -337,12 +527,13 @@
 			class={!unstyled ? "stuic-data-table-cards" : undefined}
 			data-loading={!unstyled && loading ? "true" : undefined}
 		>
-			{#each data as row, rowIndex (getRowId(row, rowIndex))}
-				{@const rowId = getRowId(row, rowIndex)}
-				{@const isSelected = selectable && selected.has(rowId)}
+			{#each data as rowData, rowIndex (getRowId(rowData, rowIndex))}
+				{@const rowId = getRowId(rowData, rowIndex)}
+				{@const isSelected = selectable && isRowSelected(rowId)}
+				{@const selectDisabled = !!selectDisabledBy?.(rowData, rowIndex)}
 				{#if mobileRow}
 					{@render mobileRow({
-						row,
+						row: rowData,
 						columns: mobileColumns,
 						rowIndex,
 					})}
@@ -357,7 +548,7 @@
 						data-selected={!unstyled && isSelected ? "true" : undefined}
 						role={onRowClick || selectOnRowClick ? "button" : undefined}
 						tabindex={onRowClick || selectOnRowClick ? 0 : undefined}
-						onclick={(e) => handleRowClick(row, rowIndex, e)}
+						onclick={(e) => handleRowClick(rowData, rowIndex, e)}
 						onkeydown={(e) => {
 							if (
 								(onRowClick || selectOnRowClick) &&
@@ -367,22 +558,23 @@
 								if (selectable && selectOnRowClick) {
 									toggleSelectRow(rowId);
 								}
-								onRowClick?.(row, rowIndex);
+								onRowClick?.(rowData, rowIndex);
 							}
 						}}
 					>
 						{#if selectable}
-							<div class="stuic-checkbox flex items-center gap-2 mb-1">
+							<div class={!unstyled ? "stuic-checkbox stuic-data-table-card-checkbox" : undefined}>
 								<input
 									type="checkbox"
 									checked={isSelected}
-									onchange={() => toggleSelectRow(rowId)}
+									disabled={selectDisabled}
+									onclick={(e) => handleCheckboxClick(rowIndex, e)}
 									aria-label={t("select_row")}
 								/>
 							</div>
 						{/if}
 						{#each mobileColumns as col (col.key)}
-							{@const value = getCellValue(row, col)}
+							{@const value = getCellValue(rowData, col)}
 							<div class={!unstyled ? "stuic-data-table-card-row" : undefined}>
 								<span class={!unstyled ? "stuic-data-table-card-label" : undefined}>
 									{#if isTHCNotEmpty(col.label)}
@@ -395,12 +587,13 @@
 									{#if cell}
 										{@render cell({
 											column: col,
-											row,
+											row: rowData,
 											value,
 											rowIndex,
+											variant: "mobile",
 										})}
 									{:else}
-										{getCellDisplay(row, col)}
+										{getCellDisplay(rowData, col)}
 									{/if}
 								</span>
 							</div>
@@ -412,7 +605,7 @@
 					{#if empty}
 						{@render empty()}
 					{:else}
-						No data
+						{t("no_data")}
 					{/if}
 				</div>
 			{/each}

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

@@ -38,24 +38,78 @@ export interface Props<T = Record<string, any>> extends Omit<HTMLAttributes<HTML
     selected?: Set<string | number>;
     /** Toggle row selection when clicking anywhere on the row */
     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) */
     loading?: boolean;
-    /** Custom cell renderer snippet */
+    /** Custom cell renderer snippet (rendered in both desktop table and mobile card layouts; use `variant` to tell them apart) */
     cell?: Snippet<[
         {
             column: DataTableColumn<T>;
             row: T;
             value: any;
             rowIndex: number;
+            variant: "desktop" | "mobile";
         }
     ]>;
-    /** Batch actions bar snippet (shown when items are selected) */
+    /** Custom desktop row renderer — replaces the entire `<tr>` */
+    row?: Snippet<[
+        {
+            row: T;
+            columns: DataTableColumn<T>[];
+            rowIndex: number;
+            isSelected: boolean;
+        }
+    ]>;
+    /**
+     * 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;
         }
     ]>;
@@ -67,8 +121,6 @@ export interface Props<T = Record<string, any>> extends Omit<HTMLAttributes<HTML
         columns: DataTableColumn<T>[];
         rowIndex: number;
     }]>;
-    /** Default children snippet (not used directly) */
-    children?: Snippet;
     /** Optional translate function */
     t?: TranslateFn;
     /** Force mobile/card layout regardless of breakpoint */
@@ -83,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: {};
 };
@@ -91,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 {