sveltacular 1.0.16 → 1.0.17

package/dist/tables/data-grid.svelte

@@ -25,17 +25,23 @@
 	} from './cell-renderers.js';
 	import type { Snippet } from 'svelte';
 	import { useVirtualList } from '../helpers/use-virtual-list.svelte.js';
+	import type { ButtonVariant, FormFieldSizeOptions } from '../types/form.js';
 
 	type PaginationEvent = (pagination: PaginationProperties) => void;
 
 	interface Action {
 		text: string;
-		onClick: (row: JsonObject) => unknown;
+		variant?: ButtonVariant;
+		href?: (row: JsonObject) => string;
+		onClick?: (row: JsonObject) => unknown;
 	}
 
 	interface Actions {
 		text?: string;
-		type?: string;
+		type?: 'buttons' | 'dropdown';
+		variant?: ButtonVariant | 'default';
+		size?: FormFieldSizeOptions;
+		align?: 'left' | 'center' | 'right';
 		items: Action[];
 	}
 
@@ -113,10 +119,15 @@
 	let colCount = $derived(
 		Math.max(1, visibleCols.length) + (hasActionCol ? 1 : 0) + (hasSelectionCol ? 1 : 0)
 	);
-	
+	let actionButtonVariant = $derived.by(() => {
+		return !actions?.variant || actions.variant === 'default' ? 'outline' : actions.variant;
+	});
+	let actionButtonSize = $derived(actions?.size ?? 'sm');
+	let actionAlign = $derived(actions?.align ?? 'center');
+
 	// Track selected count from selection change callbacks
 	let internalSelectedCount = $state(0);
-	
+
 	// Sync selectedCount with internal tracking
 	$effect(() => {
 		selectedCount = internalSelectedCount;
@@ -198,10 +209,16 @@
 	{selectionMode}
 	{rowIdKey}
 	onSort={handleSortChange}
-	onSelectionChange={(selectedRows) => {
-		onSelectionChange?.(selectedRows);
+	onSelectionChange={(selectedRowIds) => {
+		// Convert selected IDs to actual row objects
+		// Use sortedRows (before pagination) to include all selected rows, not just current page
+		const selectedRowObjects = (sortedRows ?? []).filter((row) => {
+			const id = row[rowIdKey] as string | number;
+			return id !== undefined && selectedRowIds.includes(id);
+		});
+		onSelectionChange?.(selectedRowObjects);
 		// Track selected count from the callback
-		internalSelectedCount = selectedRows.length;
+		internalSelectedCount = selectedRowIds.length;
 	}}
 >
 	{#if children}
@@ -228,7 +245,7 @@
 				</TableHeaderCell>
 			{/each}
 			{#if hasActionCol}
-				<TableHeaderCell type="actions">Actions</TableHeaderCell>
+				<TableHeaderCell type="actions" align={actionAlign}>Actions</TableHeaderCell>
 			{/if}
 		</tr>
 	</TableHeader>
@@ -284,26 +301,32 @@
 									</TableCell>
 								{/each}
 								{#if hasActionCol && actions}
-									<TableCell type="actions">
+									<TableCell type="actions" align={actionAlign}>
 										{#if actions.type === 'dropdown'}
 											<DropdownButton text={actions.text ?? ''} variant="ghost">
 												{#each actions.items as action}
-													<DropdownItem onClick={() => action.onClick(row)}
+													<DropdownItem
+														href={action.href ? action.href(row) : undefined}
+														onClick={action.onClick ? () => action.onClick?.(row) : undefined}
 														>{action.text}</DropdownItem
 													>
 												{/each}
 											</DropdownButton>
 										{:else}
-											{#each actions.items as action}
-												<Button
-													collapse={true}
-													size="sm"
-													type="button"
-													variant={actions.type === 'outline' ? 'outline' : 'secondary'}
-													onClick={() => action.onClick(row)}
-													label={action.text}
-												/>
-											{/each}
+											<div class="actions">
+												{#each actions.items as action}
+													{@const buttonVariant = action.variant ?? actionButtonVariant}
+													<Button
+														collapse={true}
+														type="button"
+														variant={buttonVariant}
+														size={actionButtonSize}
+														href={action.href ? action.href(row) : undefined}
+														onClick={action.onClick ? () => action.onClick?.(row) : undefined}
+														label={action.text}
+													/>
+												{/each}
+											</div>
 										{/if}
 									</TableCell>
 								{/if}
@@ -336,24 +359,31 @@
 						</TableCell>
 					{/each}
 					{#if hasActionCol && actions}
-						<TableCell type="actions">
+						<TableCell type="actions" align={actionAlign}>
 							{#if actions.type === 'dropdown'}
 								<DropdownButton text={actions.text ?? ''} variant="ghost">
 									{#each actions.items as action}
-										<DropdownItem onClick={() => action.onClick(row)}>{action.text}</DropdownItem>
+										<DropdownItem
+											href={action.href ? action.href(row) : undefined}
+											onClick={action.onClick ? () => action.onClick?.(row) : undefined}
+											>{action.text}</DropdownItem
+										>
 									{/each}
 								</DropdownButton>
 							{:else}
-								{#each actions.items as action}
-									<Button
-										collapse={true}
-										size="sm"
-										type="button"
-										variant={actions.type === 'outline' ? 'outline' : 'secondary'}
-										onClick={() => action.onClick(row)}
-										label={action.text}
-									/>
-								{/each}
+								<div class="actions">
+									{#each actions.items as action}
+										{@const buttonVariant = action.variant ?? actionButtonVariant}
+										<Button
+											type="button"
+											variant={buttonVariant}
+											size={actionButtonSize}
+											href={action.href ? action.href(row) : undefined}
+											onClick={action.onClick ? () => action.onClick?.(row) : undefined}
+											label={action.text}
+										/>
+									{/each}
+								</div>
 							{/if}
 						</TableCell>
 					{/if}
@@ -412,4 +442,9 @@ td.footer-cell :global(.pagination) {
   display: flex;
   justify-content: center;
   align-items: center;
+}
+
+.actions {
+  display: flex;
+  gap: 0.5rem;
 }</style>

package/dist/tables/data-grid.svelte.d.ts

@@ -1,13 +1,19 @@
 import type { ColumnDef, JsonObject, PaginationProperties } from '../types/data.js';
 import type { Snippet } from 'svelte';
+import type { ButtonVariant, FormFieldSizeOptions } from '../types/form.js';
 type PaginationEvent = (pagination: PaginationProperties) => void;
 interface Action {
     text: string;
-    onClick: (row: JsonObject) => unknown;
+    variant?: ButtonVariant;
+    href?: (row: JsonObject) => string;
+    onClick?: (row: JsonObject) => unknown;
 }
 interface Actions {
     text?: string;
-    type?: string;
+    type?: 'buttons' | 'dropdown';
+    variant?: ButtonVariant | 'default';
+    size?: FormFieldSizeOptions;
+    align?: 'left' | 'center' | 'right';
     items: Action[];
 }
 type $$ComponentProps = {

package/dist/tables/table-context.svelte.d.ts

@@ -4,7 +4,7 @@ export interface TableContextConfig<T extends JsonObject = JsonObject> {
     selectionMode?: 'none' | 'single' | 'multi';
     rowIdKey?: keyof T & string;
     onSort?: (column: string, direction: SortDirection) => void;
-    onSelectionChange?: (selectedRows: T[]) => void;
+    onSelectionChange?: (selectedRowIds: (string | number)[]) => void;
     rows?: T[];
 }
 export declare class TableContext<T extends JsonObject = JsonObject> {

package/dist/tables/table-context.svelte.js

@@ -101,9 +101,9 @@ export class TableContext {
         this.notifySelectionChange(rows);
     }
     notifySelectionChange(rows) {
-        if (this.config.onSelectionChange && rows) {
-            const selectedRows = this.getSelectedRows(rows);
-            this.config.onSelectionChange(selectedRows);
+        if (this.config.onSelectionChange) {
+            const selectedRowIds = Array.from(this.selectedIds);
+            this.config.onSelectionChange(selectedRowIds);
         }
     }
     selectRange(startIndex, endIndex, rows) {

package/dist/tables/table-selection-cell.svelte

@@ -78,18 +78,33 @@
 	// Handle cell click - toggle selection when clicking anywhere in the cell
 	function handleCellClick(event: MouseEvent) {
 		const target = event.target as HTMLElement;
+		const currentTarget = event.currentTarget as HTMLElement;
+
+		// If the click is on the label or any of its children (input, span, etc.),
+		// let the component's native handlers take care of it
+		const label = currentTarget.querySelector('label');
+		if (label && (target === label || label.contains(target))) {
+			// For single selection, we need to handle deselection ourselves
+			// since native radio buttons don't allow unchecking
+			if (selectionMode === 'single' && rowId !== undefined) {
+				// Check if already selected and toggle off if so
+				if (context?.radioGroup === String(rowId)) {
+					event.preventDefault();
+					handleRadioChange(String(rowId));
+				}
+				// If not selected, let the native handler select it
+			}
+			// For multi-selection, always let the native checkbox handler work
+			return;
+		}
 
-		if (selectionMode === 'multi') {
-			// For checkboxes: skip if clicking on input to avoid double-toggle
-			if (target.tagName === 'INPUT') return;
-			handleCheckboxChange({ isChecked: !localChecked, value: '' });
-		} else if (selectionMode === 'single' && rowId !== undefined) {
-			// For radios: always handle the click ourselves to enable deselection
-			// Native radio buttons don't allow unchecking, so we take control
-			if (target.tagName === 'INPUT') {
-				event.preventDefault();
+		// Only handle cell click if clicking directly on the cell (not on the label/input)
+		if (target === currentTarget) {
+			if (selectionMode === 'multi') {
+				handleCheckboxChange({ isChecked: !localChecked, value: '' });
+			} else if (selectionMode === 'single' && rowId !== undefined) {
+				handleRadioChange(String(rowId));
 			}
-			handleRadioChange(String(rowId));
 		}
 	}
 </script>

package/dist/tables/table-selection-header-cell.svelte

@@ -52,11 +52,21 @@
 
 	// Handle header cell click - toggle select all when clicking anywhere in the cell
 	function handleCellClick(event: MouseEvent) {
-		// Don't double-toggle if the click was on the actual input element
 		const target = event.target as HTMLElement;
-		if (target.tagName === 'INPUT') return;
+		const currentTarget = event.currentTarget as HTMLElement;
 
-		handleSelectAllChange({ isChecked: !localChecked, value: '' });
+		// If the click is on the label or any of its children (input, span, etc.),
+		// let the component's native handlers take care of it
+		const label = currentTarget.querySelector('label');
+		if (label && (target === label || label.contains(target))) {
+			// Let the native checkbox handler work
+			return;
+		}
+
+		// Only handle cell click if clicking directly on the cell (not on the label/input)
+		if (target === currentTarget) {
+			handleSelectAllChange({ isChecked: !localChecked, value: '' });
+		}
 	}
 </script>
 

package/dist/tables/table.svelte

@@ -21,7 +21,7 @@
 		rowIdKey?: string;
 		stickyHeader?: boolean;
 		onSort?: (column: string, direction: 'asc' | 'desc') => void;
-		onSelectionChange?: (selectedRows: JsonObject[]) => void;
+		onSelectionChange?: (selectedRowIds: (string | number)[]) => void;
 	} = $props();
 
 	// Create table context for child components

package/dist/tables/table.svelte.d.ts

@@ -8,7 +8,7 @@ type $$ComponentProps = {
     rowIdKey?: string;
     stickyHeader?: boolean;
     onSort?: (column: string, direction: 'asc' | 'desc') => void;
-    onSelectionChange?: (selectedRows: JsonObject[]) => void;
+    onSelectionChange?: (selectedRowIds: (string | number)[]) => void;
 };
 declare const Table: import("svelte").Component<$$ComponentProps, {}, "">;
 type Table = ReturnType<typeof Table>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sveltacular",
-	"version": "1.0.16",
+	"version": "1.0.17",
 	"description": "A Svelte component library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",