sveltacular 1.0.14 → 1.0.16

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

@@ -7,13 +7,16 @@ export class TableContext {
     // Selection state
     selectedIds = $state(new Set());
     lastSelectedIndex = $state(null);
+    // Radio button group state (for single selection mode)
+    radioGroup = $state(undefined);
+    // Reactive selected count
+    selectedCount = $derived(this.selectedIds.size);
     // Configuration
     config;
     constructor(config = {}) {
         this.config = {
             enableSorting: true,
-            enableSelection: false,
-            selectionMode: 'multi',
+            selectionMode: 'none',
             rowIdKey: 'id',
             ...config
         };
@@ -56,25 +59,31 @@ export class TableContext {
         };
     }
     // Selection methods
-    toggleRow(id, index, shiftKey = false) {
-        if (!this.config.enableSelection)
+    toggleRow(id, index, shiftKey = false, rows) {
+        if (this.config.selectionMode === 'none')
             return;
         if (this.config.selectionMode === 'single') {
             // Single selection mode
             if (this.selectedIds.has(id)) {
                 this.selectedIds.delete(id);
+                this.radioGroup = undefined;
+                // Trigger reactivity
+                this.selectedIds = new Set(this.selectedIds);
             }
             else {
                 this.selectedIds.clear();
                 this.selectedIds.add(id);
+                this.radioGroup = String(id);
+                // Trigger reactivity
+                this.selectedIds = new Set(this.selectedIds);
             }
             this.lastSelectedIndex = index;
         }
         else {
             // Multi selection mode
-            if (shiftKey && this.lastSelectedIndex !== null) {
+            if (shiftKey && this.lastSelectedIndex !== null && rows) {
                 // Range selection
-                this.selectRange(this.lastSelectedIndex, index);
+                this.selectRange(this.lastSelectedIndex, index, rows);
             }
             else {
                 // Toggle single row
@@ -84,10 +93,18 @@ export class TableContext {
                 else {
                     this.selectedIds.add(id);
                 }
+                // Trigger reactivity
+                this.selectedIds = new Set(this.selectedIds);
                 this.lastSelectedIndex = index;
             }
         }
-        this.config.onSelectionChange?.(new Set(this.selectedIds));
+        this.notifySelectionChange(rows);
+    }
+    notifySelectionChange(rows) {
+        if (this.config.onSelectionChange && rows) {
+            const selectedRows = this.getSelectedRows(rows);
+            this.config.onSelectionChange(selectedRows);
+        }
     }
     selectRange(startIndex, endIndex, rows) {
         if (!rows)
@@ -103,23 +120,52 @@ export class TableContext {
                 }
             }
         }
-        this.config.onSelectionChange?.(new Set(this.selectedIds));
+        // Trigger reactivity
+        this.selectedIds = new Set(this.selectedIds);
+        this.notifySelectionChange(rows);
     }
     selectAll(rows) {
-        if (!this.config.enableSelection)
+        if (this.config.selectionMode === 'none')
             return;
+        // Clear first, then add all to ensure proper state update
+        this.selectedIds.clear();
         rows.forEach((row) => {
             const id = row[this.config.rowIdKey];
             if (id !== undefined) {
                 this.selectedIds.add(id);
             }
         });
-        this.config.onSelectionChange?.(new Set(this.selectedIds));
+        // Trigger reactivity by reassigning (Svelte 5 tracks Set mutations, but ensure it's reactive)
+        this.selectedIds = new Set(this.selectedIds);
+        this.notifySelectionChange(rows);
     }
-    deselectAll() {
+    deselectAll(rows) {
         this.selectedIds.clear();
+        // Trigger reactivity by reassigning
+        this.selectedIds = new Set(this.selectedIds);
         this.lastSelectedIndex = null;
-        this.config.onSelectionChange?.(new Set(this.selectedIds));
+        this.radioGroup = undefined;
+        this.notifySelectionChange(rows);
+    }
+    // Method to handle radio group changes (from radio button bindings)
+    setRadioSelection(value, rows) {
+        if (this.config.selectionMode !== 'single')
+            return;
+        if (value) {
+            this.selectedIds.clear();
+            this.selectedIds.add(value);
+            // Trigger reactivity
+            this.selectedIds = new Set(this.selectedIds);
+            this.radioGroup = value;
+            this.notifySelectionChange(rows);
+        }
+        else {
+            this.selectedIds.clear();
+            // Trigger reactivity
+            this.selectedIds = new Set(this.selectedIds);
+            this.radioGroup = undefined;
+            this.notifySelectionChange(rows);
+        }
     }
     isRowSelected(id) {
         return this.selectedIds.has(id);
@@ -140,6 +186,7 @@ export class TableContext {
             return id !== undefined && this.selectedIds.has(id);
         });
     }
+    // selectedCount is now a reactive derived state, but keep this method for backwards compatibility
     getSelectedCount() {
         return this.selectedIds.size;
     }

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

@@ -1,5 +1,7 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import Icon from '../icons/icon.svelte';
+	import type { IconType } from '../icons/types.js';
 
 	let {
 		colspan = 1,
@@ -73,6 +75,17 @@
 			}
 		}
 	}
+
+	// Determine which icon to show based on sort state
+	let sortIconType = $derived<IconType | undefined>(
+		canSort
+			? isSorted
+				? sortDirection === 'asc'
+					? 'triangle-up'
+					: 'triangle-down'
+				: 'triangle-up-down'
+			: undefined
+	);
 </script>
 
 <th
@@ -91,17 +104,14 @@
 		<span class="header-text">
 			{@render children?.()}
 		</span>
-		{#if canSort}
+		{#if canSort && sortIconType}
 			<span class="sort-indicator" aria-hidden="true">
-				{#if isSorted}
-					{#if sortDirection === 'asc'}
-						<span class="sort-arrow">▲</span>
-					{:else}
-						<span class="sort-arrow">▼</span>
-					{/if}
-				{:else}
-					<span class="sort-arrow unsorted">⇅</span>
-				{/if}
+				<Icon
+					type={sortIconType}
+					size="sm"
+					variant="secondary"
+					class="sort-arrow {isSorted ? '' : 'unsorted'}"
+				/>
 			</span>
 		{/if}
 	</div>
@@ -158,7 +168,6 @@ th.sorted {
   flex-shrink: 0;
   display: inline-flex;
   align-items: center;
-  font-size: 0.75rem;
   opacity: 0.7;
 }
 
@@ -170,6 +179,6 @@ th.sorted {
   opacity: 0.3;
 }
 
-th.sortable:hover .sort-arrow.unsorted {
+th.sortable:hover :global(.sort-arrow.unsorted) {
   opacity: 0.6;
 }</style>

package/dist/tables/table-row.svelte

@@ -22,36 +22,11 @@
 		row && context?.config.rowIdKey ? (row[context.config.rowIdKey] as string | number) : undefined
 	);
 
-	let isSelected = $derived(rowId !== undefined && context ? context.isRowSelected(rowId) : false);
-
-	let canSelect = $derived(selectable && context?.config.enableSelection && rowId !== undefined);
-
-	function handleClick(event: MouseEvent) {
-		if (canSelect && rowId !== undefined && rowIndex !== undefined) {
-			const shiftKey = event.shiftKey;
-			context?.toggleRow(rowId, rowIndex, shiftKey);
-		}
-	}
-
-	function handleKeyDown(event: KeyboardEvent) {
-		if (canSelect && (event.key === 'Enter' || event.key === ' ')) {
-			event.preventDefault();
-			if (rowId !== undefined && rowIndex !== undefined) {
-				context?.toggleRow(rowId, rowIndex, event.shiftKey);
-			}
-		}
-	}
+	let selectionMode = $derived(context?.config.selectionMode ?? 'none');
+	let canSelect = $derived(selectable && selectionMode !== 'none' && rowId !== undefined);
 </script>
 
-<tr
-	class:selectable={canSelect}
-	class:selected={isSelected}
-	aria-selected={canSelect ? isSelected : undefined}
-	tabindex={canSelect ? 0 : undefined}
-	onclick={handleClick}
-	onkeydown={handleKeyDown}
-	role={canSelect ? 'row' : undefined}
->
+<tr class:selectable={canSelect}>
 	{@render children?.()}
 </tr>
 
@@ -69,8 +44,6 @@
 	}
 
 	tr.selectable {
-		cursor: pointer;
-
 		&:hover {
 			background-color: var(--table-row-hover-bg, rgba(0, 0, 0, 0.05));
 		}
@@ -80,13 +53,4 @@
 			outline-offset: -2px;
 		}
 	}
-
-	tr.selected {
-		background-color: var(--table-row-selected-bg, rgba(0, 102, 204, 0.1)) !important;
-		border-color: var(--table-row-selected-border, #0066cc);
-	}
-
-	tr.selected.selectable:hover {
-		background-color: var(--table-row-selected-hover-bg, rgba(0, 102, 204, 0.15)) !important;
-	}
 </style>

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

@@ -0,0 +1,134 @@
+<script lang="ts">
+	import type { JsonObject } from '../types/data.js';
+	import { getTableContext } from './table-context.svelte.js';
+	import CheckBox from '../forms/check-box/check-box.svelte';
+	import RadioBox from '../forms/radio-group/radio-box.svelte';
+
+	let {
+		row = undefined,
+		rowIndex = undefined
+	}: {
+		row?: JsonObject;
+		rowIndex?: number;
+	} = $props();
+
+	const context = getTableContext();
+
+	if (!context) {
+		throw new Error('TableSelectionCell must be used within a Table component');
+	}
+
+	// Get row ID for selection
+	let rowId = $derived(
+		row && context?.config.rowIdKey ? (row[context.config.rowIdKey] as string | number) : undefined
+	);
+
+	// Derive selection state from context - this is the source of truth
+	// Access selectedIds directly to ensure reactivity is tracked properly
+	let isSelectedInContext = $derived.by(() => {
+		if (rowId === undefined || !context) return false;
+		// Explicitly access selectedIds to set up reactivity tracking
+		const selectedIds = context.selectedIds;
+		return selectedIds.has(rowId);
+	});
+
+	let selectionMode = $derived(context?.config.selectionMode ?? 'none');
+
+	// Local state for checkbox binding - synced from context
+	let localChecked = $state(false);
+
+	// Sync local state FROM context whenever context selection changes
+	// This ensures external changes (like "select all") update the checkbox
+	$effect(() => {
+		localChecked = isSelectedInContext;
+	});
+
+	// For radio buttons in single selection mode
+	let radioGroupLocal = $state<string | undefined>(undefined);
+
+	// Sync radio state FROM context
+	$effect(() => {
+		if (selectionMode === 'single' && context) {
+			radioGroupLocal = context.radioGroup;
+		}
+	});
+
+	// Handle checkbox change - update context (source of truth)
+	function handleCheckboxChange(data: { isChecked: boolean; value: string }) {
+		if (rowId !== undefined && rowIndex !== undefined && context) {
+			const rows = context.config.rows ?? [];
+			// Toggle the row in context - context is the source of truth
+			context.toggleRow(rowId, rowIndex, false, rows);
+		}
+	}
+
+	// Handle radio button change
+	function handleRadioChange(value: string) {
+		if (context && selectionMode === 'single') {
+			const rows = context.config.rows ?? [];
+			// Toggle: if already selected, deselect; otherwise select
+			if (context.radioGroup === value) {
+				context.setRadioSelection(undefined, rows);
+			} else {
+				context.setRadioSelection(value, rows);
+			}
+		}
+	}
+
+	// Handle cell click - toggle selection when clicking anywhere in the cell
+	function handleCellClick(event: MouseEvent) {
+		const target = event.target as HTMLElement;
+
+		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();
+			}
+			handleRadioChange(String(rowId));
+		}
+	}
+</script>
+
+{#if selectionMode === 'multi'}
+	<td class="selection-cell" role="gridcell" onclick={handleCellClick}>
+		<CheckBox
+			bind:isChecked={localChecked}
+			onChange={handleCheckboxChange}
+			inline={true}
+			ariaLabel="Select row"
+		/>
+	</td>
+{:else if selectionMode === 'single'}
+	<td class="selection-cell" role="gridcell" onclick={handleCellClick}>
+		<RadioBox
+			value={String(rowId ?? '')}
+			bind:group={radioGroupLocal}
+			onChange={handleRadioChange}
+			ariaLabel="Select row"
+		/>
+	</td>
+{/if}
+
+<style>.selection-cell {
+  text-align: center;
+  padding: 0.5rem 0.25rem;
+  width: 48px;
+  min-width: 48px;
+  vertical-align: middle;
+  cursor: pointer;
+  display: table-cell;
+}
+
+:global(.selection-cell .checkbox-label),
+:global(.selection-cell label) {
+  margin: 0 auto;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}</style>

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

@@ -0,0 +1,8 @@
+import type { JsonObject } from '../types/data.js';
+type $$ComponentProps = {
+    row?: JsonObject;
+    rowIndex?: number;
+};
+declare const TableSelectionCell: import("svelte").Component<$$ComponentProps, {}, "">;
+type TableSelectionCell = ReturnType<typeof TableSelectionCell>;
+export default TableSelectionCell;

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

@@ -0,0 +1,103 @@
+<script lang="ts">
+	import { getTableContext } from './table-context.svelte.js';
+	import CheckBox from '../forms/check-box/check-box.svelte';
+
+	const context = getTableContext();
+
+	if (!context) {
+		throw new Error('TableSelectionHeaderCell must be used within a Table component');
+	}
+
+	let selectionMode = $derived(context?.config.selectionMode ?? 'none');
+	let rows = $derived(context?.config.rows ?? []);
+
+	// Compute whether all rows are selected - source of truth from context
+	let isAllSelectedInContext = $derived.by(() => {
+		if (!context || !rows.length) return false;
+		// Access selectedIds directly to ensure reactivity is tracked
+		const selectedIds = context.selectedIds;
+		const rowIdKey = context.config.rowIdKey!;
+		// Check if every row's ID is in the selected set
+		return rows.every((row) => {
+			const id = row[rowIdKey] as string | number;
+			return id !== undefined && selectedIds.has(id);
+		});
+	});
+
+	// Local state for checkbox binding - synced from context
+	let localChecked = $state(false);
+
+	// Sync local state FROM context whenever selection changes
+	// This ensures the header checkbox reflects the actual selection state
+	$effect(() => {
+		localChecked = isAllSelectedInContext;
+	});
+
+	// Handle "select all" checkbox change
+	function handleSelectAllChange(data: { isChecked: boolean; value: string }) {
+		if (!context) return;
+		const currentRows = rows;
+		if (!currentRows || currentRows.length === 0) return;
+
+		// data.isChecked is the NEW desired state from user interaction
+		if (data.isChecked) {
+			// User wants to select all
+			context.selectAll(currentRows);
+		} else {
+			// User wants to deselect all
+			context.deselectAll(currentRows);
+		}
+		// The effect will sync localChecked from context after this
+	}
+
+	// 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;
+
+		handleSelectAllChange({ isChecked: !localChecked, value: '' });
+	}
+</script>
+
+{#if selectionMode === 'multi'}
+	<th
+		class="selection-header"
+		style="width: 48px; min-width: 48px; text-align: center;"
+		onclick={handleCellClick}
+	>
+		<div class="header-content">
+			<CheckBox
+				bind:isChecked={localChecked}
+				onChange={handleSelectAllChange}
+				inline={true}
+				ariaLabel="Select all rows"
+			/>
+		</div>
+	</th>
+{:else if selectionMode === 'single'}
+	<th class="selection-header" style="width: 48px; min-width: 48px; text-align: center;"></th>
+{/if}
+
+<style>.selection-header {
+  padding: 0.5rem 0.25rem !important;
+  vertical-align: middle;
+  text-align: center;
+  cursor: pointer;
+}
+
+.header-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+
+:global(.header-content .checkbox-label) {
+  margin: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}</style>

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

@@ -0,0 +1,3 @@
+declare const TableSelectionHeaderCell: import("svelte").Component<Record<string, never>, {}, "">;
+type TableSelectionHeaderCell = ReturnType<typeof TableSelectionHeaderCell>;
+export default TableSelectionHeaderCell;

package/dist/tables/table.svelte

@@ -6,42 +6,48 @@
 
 	let {
 		children,
+		rows = [],
 		enableSorting = true,
-		enableSelection = false,
-		selectionMode = 'multi',
+		selectionMode = 'none',
 		rowIdKey = 'id',
 		stickyHeader = false,
 		onSort = undefined,
 		onSelectionChange = undefined
 	}: {
 		children?: Snippet;
+		rows?: JsonObject[];
 		enableSorting?: boolean;
-		enableSelection?: boolean;
-		selectionMode?: 'single' | 'multi';
+		selectionMode?: 'none' | 'single' | 'multi';
 		rowIdKey?: string;
 		stickyHeader?: boolean;
 		onSort?: (column: string, direction: 'asc' | 'desc') => void;
-		onSelectionChange?: (selectedIds: Set<string | number>) => void;
+		onSelectionChange?: (selectedRows: JsonObject[]) => void;
 	} = $props();
 
 	// Create table context for child components
 	// Using untrack() to indicate we intentionally want non-reactive initial values
 	const config: TableContextConfig<JsonObject> = {
 		enableSorting: untrack(() => enableSorting),
-		enableSelection: untrack(() => enableSelection),
 		selectionMode: untrack(() => selectionMode),
 		rowIdKey: untrack(() => rowIdKey),
 		onSort: untrack(() => onSort),
-		onSelectionChange: untrack(() => onSelectionChange)
+		onSelectionChange: untrack(() => onSelectionChange),
+		rows: untrack(() => rows)
 	};
 
-	createTableContext(config);
+	const context = createTableContext(config);
+
+	// Keep context.config.rows updated reactively when rows prop changes
+	// This is essential for selection features to work correctly
+	$effect(() => {
+		context.config.rows = rows;
+	});
 </script>
 
 <table
 	class:sticky-header={stickyHeader}
 	role="grid"
-	aria-rowcount={enableSelection ? undefined : undefined}
+	aria-rowcount={undefined}
 	aria-colcount={undefined}
 >
 	{@render children?.()}

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

@@ -1,13 +1,14 @@
 import type { Snippet } from 'svelte';
+import type { JsonObject } from '../types/data.js';
 type $$ComponentProps = {
     children?: Snippet;
+    rows?: JsonObject[];
     enableSorting?: boolean;
-    enableSelection?: boolean;
-    selectionMode?: 'single' | 'multi';
+    selectionMode?: 'none' | 'single' | 'multi';
     rowIdKey?: string;
     stickyHeader?: boolean;
     onSort?: (column: string, direction: 'asc' | 'desc') => void;
-    onSelectionChange?: (selectedIds: Set<string | number>) => void;
+    onSelectionChange?: (selectedRows: JsonObject[]) => 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.14",
+	"version": "1.0.16",
 	"description": "A Svelte component library",
 	"main": "dist/index.js",
 	"module": "dist/index.js",