sveltacular 0.0.76 → 1.0.0

package/dist/tables/data-grid.svelte

@@ -1,111 +1,230 @@
-<script>import TableBody from "./table-body.svelte";
-import TableCell from "./table-cell.svelte";
-import TableFooterCell from "./table-footer-cell.svelte";
-import TableFooterRow from "./table-footer-row.svelte";
-import TableFooter from "./table-footer.svelte";
-import TableHeaderCell from "./table-header-cell.svelte";
-import TableHeaderRow from "./table-header-row.svelte";
-import TableHeader from "./table-header.svelte";
-import TableRow from "./table-row.svelte";
-import Table from "./table.svelte";
-import Button from "../forms/button/button.svelte";
-import DropdownItem from "../generic/dropdown-item/dropdown-item.svelte";
-import Empty from "../generic/empty/empty.svelte";
-import Pill from "../generic/pill/pill.svelte";
-import FolderOpenIcon from "../icons/folder-open-icon.svelte";
-import { formatDateTime } from "../index.js";
-import DropdownButton from "../navigation/dropdown-button/dropdown-button.svelte";
-import Pagination from "../navigation/pagination/pagination.svelte";
-import Loading from "../placeholders/loading.svelte";
-import TableCaption from "./table-caption.svelte";
-export let captionSide = "top";
-export let captionAlign = "center";
-export let rows = void 0;
-export let cols;
-export let pagination = void 0;
-export let actions = void 0;
-export let onPageChange = null;
-const getColType = (col) => {
-  if (col.type)
-    return col.type;
-  if (!rows?.length)
-    return "string";
-  const firstRow = rows[0];
-  if (!firstRow)
-    return "undefined";
-  if (col.key in firstRow)
-    return typeof firstRow[col.key];
-};
-const format = (row, key) => {
-  const col = cols.find((col2) => col2.key === key);
-  if (!col)
-    return key in row ? String(row[key]) : "";
-  if ((row[key] === null || row[key] === void 0) && col.nullText)
-    return col.nullText;
-  if (String(row[key]).trim() === "" && col.emptyText)
-    return col.emptyText;
-  if (col.format)
-    return col.format(row, key);
-  if (col.type === "date")
-    return formatDateTime(String(row[key])).substring(0, 10);
-  if (col.type === "date-time")
-    return formatDateTime(String(row[key]));
-  return String(row[key]);
-};
-const calculateTotalPages = () => {
-  if (!pagination || !rows)
-    return 1;
-  const totalRows = Math.max(pagination.total || rows.length);
-  return Math.ceil(totalRows / pagination.perPage);
-};
-const changePage = async (e) => {
-  pagination = { page: e.detail, perPage: pagination?.perPage || 5 };
-  if (onPageChange) {
-    rows = await onPageChange(pagination);
-  }
-};
-const filterRows = () => {
-  if (!rows?.length || !pagination)
-    return rows;
-  if (onPageChange)
-    return rows;
-  const currentPage = pagination.page || 1;
-  const perPage = pagination.perPage || 5;
-  const startIndex = currentPage * perPage - perPage;
-  const endIndex = startIndex + perPage;
-  return rows.filter((_row, index) => index >= startIndex && index < endIndex);
-};
-$:
-  hasActionCol = actions?.items && actions.items.length > 0;
-$:
-  colCount = Math.max(1, cols.filter((col) => !col.hide).length) + (hasActionCol ? 1 : 0);
-$:
-  totalPages = pagination && rows ? calculateTotalPages() : 1;
-$:
-  filteredRows = rows && pagination ? filterRows() : rows;
+<script lang="ts">
+	import TableCell from './table-cell.svelte';
+	import TableHeaderCell from './table-header-cell.svelte';
+	import TableHeader from './table-header.svelte';
+	import TableRow from './table-row.svelte';
+	import Table from './table.svelte';
+	import type { ColumnDef, JsonObject, PaginationProperties } from '../types/data.js';
+	import Button from '../forms/button/button.svelte';
+	import DropdownItem from '../generic/dropdown-item/dropdown-item.svelte';
+	import Empty from '../generic/empty/empty.svelte';
+	import Pill from '../generic/pill/pill.svelte';
+	import FolderOpenIcon from '../icons/folder-open-icon.svelte';
+	import DropdownButton from '../navigation/dropdown-button/dropdown-button.svelte';
+	import Pagination from '../navigation/pagination/pagination.svelte';
+	import Loading from '../placeholders/loading.svelte';
+	import TableCaption from './table-caption.svelte';
+	import {
+		formatCell,
+		getCellLink,
+		getCellAlignment,
+		getCellTypeClass,
+		sortRows
+	} from './cell-renderers.js';
+	import { getTableContext } from './table-context.svelte.js';
+	import type { Snippet } from 'svelte';
+	import { useVirtualList } from '../helpers/use-virtual-list.svelte.js';
+	import { onMount } from 'svelte';
+
+	type PaginationEvent = (pagination: PaginationProperties) => void;
+
+	interface Action {
+		text: string;
+		onClick: (row: JsonObject) => unknown;
+	}
+
+	interface Actions {
+		text?: string;
+		type?: string;
+		items: Action[];
+	}
+
+	let {
+		captionSide = 'top' as 'top' | 'bottom',
+		captionAlign = 'center' as 'left' | 'center' | 'right',
+		rows = undefined,
+		cols,
+		pagination = undefined,
+		actions = undefined,
+		stickyHeader = false,
+		enableSorting = true,
+		enableSelection = false,
+		selectionMode = 'multi',
+		rowIdKey = 'id',
+		onPageChange = null,
+		onSort = undefined,
+		onSelectionChange = undefined,
+		children = undefined,
+		virtualScroll = false,
+		rowHeight = 48,
+		maxHeight = '600px'
+	}: {
+		captionSide?: 'top' | 'bottom';
+		captionAlign?: 'left' | 'center' | 'right';
+		rows?: JsonObject[];
+		cols: ColumnDef[];
+		pagination?: PaginationProperties;
+		actions?: Actions;
+		stickyHeader?: boolean;
+		enableSorting?: boolean;
+		enableSelection?: boolean;
+		selectionMode?: 'single' | 'multi';
+		rowIdKey?: string;
+		onPageChange?: PaginationEvent | null;
+		onSort?: (column: string, direction: 'asc' | 'desc') => void;
+		onSelectionChange?: (selectedIds: Set<string | number>) => void;
+		children?: Snippet;
+		virtualScroll?: boolean;
+		rowHeight?: number;
+		maxHeight?: string;
+	} = $props();
+
+	// Track current page internally
+	let currentPage = $state(1);
+
+	// Update currentPage when pagination prop changes
+	$effect(() => {
+		const page = pagination?.page;
+		if (page) {
+			currentPage = page;
+		}
+	});
+
+	let totalPages = $derived.by(() => {
+		if (!pagination || !rows) return 1;
+		const totalRows = Math.max(pagination.total || rows.length);
+		return Math.ceil(totalRows / pagination.perPage);
+	});
+
+	const changePage = (page: number) => {
+		if (!pagination) return;
+		currentPage = page;
+		// Notify parent if callback provided
+		if (onPageChange) {
+			const newPagination = { ...pagination, page };
+			onPageChange(newPagination);
+		}
+	};
+
+	// Computed values
+	let hasActionCol = $derived(actions?.items && actions.items.length > 0);
+	let visibleCols = $derived(cols.filter((col) => !col.hidden));
+	let colCount = $derived(Math.max(1, visibleCols.length) + (hasActionCol ? 1 : 0));
+
+	// Manage sort state directly in DataGrid (not via context)
+	let currentSortColumn = $state<string | null>(null);
+	let currentSortDirection = $state<'asc' | 'desc'>('asc');
+
+	// Handle sort changes
+	function handleSortChange(column: string, direction: 'asc' | 'desc') {
+		// Empty column means clear sort
+		if (column === '') {
+			currentSortColumn = null;
+		} else {
+			currentSortColumn = column;
+			currentSortDirection = direction;
+			onSort?.(column, direction);
+		}
+	}
+
+	// Apply sorting
+	let sortedRows = $derived.by(() => {
+		if (!rows?.length || !enableSorting) return rows;
+		if (!currentSortColumn) return rows;
+
+		const sortColumn = cols.find((col) => col.key === currentSortColumn);
+		if (!sortColumn) return rows;
+
+		return sortRows(rows, sortColumn, currentSortDirection);
+	});
+
+	// Apply pagination
+	let filteredRows = $derived.by(() => {
+		const dataRows = sortedRows;
+		if (!dataRows?.length || !pagination) return dataRows;
+
+		// Always do client-side pagination
+		// onPageChange callback is just for notification
+		const perPage = pagination.perPage || 5;
+		const startIndex = currentPage * perPage - perPage;
+		const endIndex = startIndex + perPage;
+		return dataRows.filter((_row, index) => index >= startIndex && index < endIndex);
+	});
+
+	// Virtual scrolling setup (only when pagination is disabled)
+	let tbodyRef: HTMLElement | null = null;
+	let virtual = $state<ReturnType<typeof useVirtualList<JsonObject>> | null>(null);
+
+	// Initialize virtual list
+	$effect(() => {
+		if (virtualScroll && !pagination) {
+			if (!virtual) {
+				virtual = useVirtualList(filteredRows || [], { itemHeight: rowHeight });
+				if (tbodyRef) {
+					virtual.setContainer(tbodyRef);
+				}
+			} else {
+				virtual.setItems(filteredRows || []);
+			}
+		} else if (virtual) {
+			virtual.destroy();
+			virtual = null;
+		}
+	});
+
+	// Set container when tbody ref is available
+	$effect(() => {
+		if (virtual && tbodyRef) {
+			virtual.setContainer(tbodyRef);
+		}
+	});
 </script>
 
-<Table>
-	{#if $$slots.default}
-		<TableCaption side={captionSide} align={captionAlign}><slot /></TableCaption>
+<Table
+	{stickyHeader}
+	enableSorting={false}
+	{enableSelection}
+	{selectionMode}
+	{rowIdKey}
+	onSort={handleSortChange}
+	{onSelectionChange}
+>
+	{#if children}
+		<TableCaption side={captionSide} align={captionAlign}>{@render children?.()}</TableCaption>
 	{/if}
-	<TableHeader>
-		<TableHeaderRow>
-			{#each cols as col}
-				{#if !col.hide}
-					<TableHeaderCell type={getColType(col)} width={col.width}>{col.label}</TableHeaderCell>
-				{/if}
+
+	<TableHeader sticky={stickyHeader}>
+		<tr>
+			{#each visibleCols as col}
+				<TableHeaderCell
+					type={col.type}
+					width={col.width}
+					sortable={col.sortable ?? enableSorting}
+					sortKey={col.key}
+					align={getCellAlignment(col)}
+					isSorted={currentSortColumn === col.key}
+					sortDirection={currentSortColumn === col.key ? currentSortDirection : undefined}
+					onSort={handleSortChange}
+				>
+					{col.label}
+				</TableHeaderCell>
 			{/each}
 			{#if hasActionCol}
-				<TableHeaderCell type="string" />
+				<TableHeaderCell type="actions">Actions</TableHeaderCell>
 			{/if}
-		</TableHeaderRow>
+		</tr>
 	</TableHeader>
-	<TableBody>
+
+	<tbody
+		bind:this={tbodyRef}
+		style={virtualScroll && !pagination
+			? `display: block; max-height: ${maxHeight}; overflow-y: auto;`
+			: ''}
+	>
 		{#if !filteredRows?.length}
 			<TableRow>
 				<TableCell colspan={colCount}>
-					<div class="empty">
+					<div class="empty" role="status" aria-live="polite">
 						{#if rows === undefined}
 							<Loading />
 						{:else}
@@ -116,32 +235,88 @@ $:
 					</div>
 				</TableCell>
 			</TableRow>
+		{:else if virtualScroll && !pagination && virtual}
+			<!-- Virtual scrolling mode -->
+			<tr style="height: {virtual.totalHeight}px; position: relative;">
+				<td colspan={colCount} style="padding: 0; border: 0;">
+					{#each virtual.visibleItems as vItem (vItem.index)}
+						{@const row = vItem.data}
+						{@const index = vItem.index}
+						<div
+							style="position: absolute; top: {vItem.offsetTop}px; height: {vItem.height}px; width: 100%; display: table; table-layout: fixed;"
+						>
+							<TableRow {row} rowIndex={index} selectable={enableSelection}>
+								{#each visibleCols as col}
+									{@const cellValue = formatCell(row, col)}
+									{@const cellLink = getCellLink(row, col)}
+									{@const cellAlign = getCellAlignment(col)}
+									<TableCell type={getCellTypeClass(col)} width={col.width} align={cellAlign}>
+										{#if cellLink}
+											<a href={cellLink}>{cellValue}</a>
+										{:else if col.type === 'check' || col.type === 'boolean'}
+											{#if row[col.key]}
+												<Pill shape="circle" variant="positive" compact label="✔" />
+											{/if}
+										{:else}
+											{cellValue}
+										{/if}
+									</TableCell>
+								{/each}
+								{#if hasActionCol && actions}
+									<TableCell type="actions">
+										{#if actions.type === 'dropdown'}
+											<DropdownButton text={actions.text ?? ''} variant="ghost">
+												{#each actions.items as action}
+													<DropdownItem onClick={() => action.onClick(row)}
+														>{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}
+										{/if}
+									</TableCell>
+								{/if}
+							</TableRow>
+						</div>
+					{/each}
+				</td>
+			</tr>
 		{:else}
-			{#each filteredRows as row}
-				<TableRow>
-					{#each cols as col}
-						{#if !col.hide}
-							<TableCell type={col.type || typeof row[col.key]} width={col.width}>
-								{#if col.link}
-									<a href={col.link(row, col.key)}>{format(row, col.key)}</a>
-								{:else if col.type == 'email' && row[col.key]}
-									<a href={`mailto:${row[col.key]}`}>{format(row, col.key)}</a>
-								{:else if col.type == 'check'}
-									{#if row[col.key]}
-										<Pill shape="circle" style="positive" compact>✔</Pill>
-									{/if}
-								{:else}
-									{format(row, col.key)}
+			<!-- Regular rendering mode -->
+			{#each filteredRows as row, index}
+				<TableRow {row} rowIndex={index} selectable={enableSelection}>
+					{#each visibleCols as col}
+						{@const cellValue = formatCell(row, col)}
+						{@const cellLink = getCellLink(row, col)}
+						{@const cellAlign = getCellAlignment(col)}
+						<TableCell type={getCellTypeClass(col)} width={col.width} align={cellAlign}>
+							{#if cellLink}
+								<a href={cellLink}>{cellValue}</a>
+							{:else if col.type === 'check' || col.type === 'boolean'}
+								{#if row[col.key]}
+									<Pill shape="circle" variant="positive" compact label="✔" />
 								{/if}
-							</TableCell>
-						{/if}
+							{:else}
+								{cellValue}
+							{/if}
+						</TableCell>
 					{/each}
 					{#if hasActionCol && actions}
 						<TableCell type="actions">
 							{#if actions.type === 'dropdown'}
-								<DropdownButton text={actions.text ?? ''} style="ghost">
+								<DropdownButton text={actions.text ?? ''} variant="ghost">
 									{#each actions.items as action}
-										<DropdownItem on:click={() => action.onClick(row)}>{action.text}</DropdownItem>
+										<DropdownItem onClick={() => action.onClick(row)}>{action.text}</DropdownItem>
 									{/each}
 								</DropdownButton>
 							{:else}
@@ -150,9 +325,10 @@ $:
 										collapse={true}
 										size="sm"
 										type="button"
-										style={actions.type == 'link' ? 'link' : 'secondary'}
-										on:click={() => action.onClick(row)}>{action.text}</Button
-									>
+										variant={actions.type === 'outline' ? 'outline' : 'secondary'}
+										onClick={() => action.onClick(row)}
+										label={action.text}
+									/>
 								{/each}
 							{/if}
 						</TableCell>
@@ -160,22 +336,25 @@ $:
 				</TableRow>
 			{/each}
 		{/if}
-	</TableBody>
+	</tbody>
+
 	{#if pagination}
-		<TableFooter>
-			<TableFooterRow>
-				<TableFooterCell colspan={colCount}>
-					<Pagination
-						currentPage={pagination.page}
-						{totalPages}
-						style="flat"
-						size="sm"
-						align="center"
-						on:page={changePage}
-					/>
-				</TableFooterCell>
-			</TableFooterRow>
-		</TableFooter>
+		<tfoot>
+			<tr>
+				<td colspan={colCount} class="footer-cell">
+					<nav aria-label="Table pagination">
+						<Pagination
+							bind:currentPage
+							{totalPages}
+							variant="flat"
+							size="sm"
+							align="center"
+							onPage={changePage}
+						/>
+					</nav>
+				</td>
+			</tr>
+		</tfoot>
 	{/if}
 </Table>
 
@@ -191,4 +370,22 @@ a {
 }
 a:hover {
   text-decoration: underline;
+}
+
+tfoot {
+  background: var(--table-footer-bg);
+  color: var(--table-footer-fg);
+  border-top: solid var(--border-thin) var(--table-footer-border);
+  border-bottom: solid var(--border-thin) var(--table-footer-border);
+  font-size: var(--font-sm);
+}
+
+.footer-cell {
+  padding: 0.5rem;
+}
+
+td.footer-cell :global(.pagination) {
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }</style>

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

@@ -1,34 +1,35 @@
-import { SvelteComponent } from "svelte";
-import type { DataCol, JsonObject, PaginationProperties } from '../types/data.js';
-declare const __propDef: {
-    props: {
-        captionSide?: "top" | "bottom" | undefined;
-        captionAlign?: "center" | "left" | "right" | undefined;
-        rows?: JsonObject[] | undefined;
-        cols: DataCol[];
-        pagination?: PaginationProperties | undefined;
-        actions?: {
-            text?: string | undefined;
-            type?: string | undefined;
-            items: {
-                text: string;
-                onClick: (row: JsonObject) => unknown;
-            }[];
-        } | undefined;
-        /**
-             * Handle page change, which should return the new filtered/fetched rows.
-             */ onPageChange?: ((pagination: PaginationProperties) => Promise<JsonObject[]>) | null | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type DataGridProps = typeof __propDef.props;
-export type DataGridEvents = typeof __propDef.events;
-export type DataGridSlots = typeof __propDef.slots;
-export default class DataGrid extends SvelteComponent<DataGridProps, DataGridEvents, DataGridSlots> {
+import type { ColumnDef, JsonObject, PaginationProperties } from '../types/data.js';
+import type { Snippet } from 'svelte';
+type PaginationEvent = (pagination: PaginationProperties) => void;
+interface Action {
+    text: string;
+    onClick: (row: JsonObject) => unknown;
+}
+interface Actions {
+    text?: string;
+    type?: string;
+    items: Action[];
 }
-export {};
+type $$ComponentProps = {
+    captionSide?: 'top' | 'bottom';
+    captionAlign?: 'left' | 'center' | 'right';
+    rows?: JsonObject[];
+    cols: ColumnDef[];
+    pagination?: PaginationProperties;
+    actions?: Actions;
+    stickyHeader?: boolean;
+    enableSorting?: boolean;
+    enableSelection?: boolean;
+    selectionMode?: 'single' | 'multi';
+    rowIdKey?: string;
+    onPageChange?: PaginationEvent | null;
+    onSort?: (column: string, direction: 'asc' | 'desc') => void;
+    onSelectionChange?: (selectedIds: Set<string | number>) => void;
+    children?: Snippet;
+    virtualScroll?: boolean;
+    rowHeight?: number;
+    maxHeight?: string;
+};
+declare const DataGrid: import("svelte").Component<$$ComponentProps, {}, "">;
+type DataGrid = ReturnType<typeof DataGrid>;
+export default DataGrid;

package/dist/tables/index.d.ts

@@ -0,0 +1,10 @@
+export { default as DataGrid } from './data-grid.svelte';
+export { default as Table } from './table.svelte';
+export { default as TableCell } from './table-cell.svelte';
+export { default as TableHeader } from './table-header.svelte';
+export { default as TableHeaderCell } from './table-header-cell.svelte';
+export { default as TableRow } from './table-row.svelte';
+export { default as TableCaption } from './table-caption.svelte';
+export { createTableContext, getTableContext, TableContext } from './table-context.svelte.js';
+export type { TableContextConfig } from './table-context.svelte.js';
+export { formatCell, formatTextCell, formatNumberCell, formatCurrencyCell, formatDateCell, formatDateTimeCell, formatBooleanCell, formatEmailCell, formatCustomCell, getCellValue, getCellLink, getCellAlignment, getCellTypeClass, sortRows, compareValues } from './cell-renderers.js';

package/dist/tables/index.js

@@ -0,0 +1,12 @@
+// Main components
+export { default as DataGrid } from './data-grid.svelte';
+export { default as Table } from './table.svelte';
+export { default as TableCell } from './table-cell.svelte';
+export { default as TableHeader } from './table-header.svelte';
+export { default as TableHeaderCell } from './table-header-cell.svelte';
+export { default as TableRow } from './table-row.svelte';
+export { default as TableCaption } from './table-caption.svelte';
+// Context and utilities
+export { createTableContext, getTableContext, TableContext } from './table-context.svelte.js';
+// Cell renderers and utilities
+export { formatCell, formatTextCell, formatNumberCell, formatCurrencyCell, formatDateCell, formatDateTimeCell, formatBooleanCell, formatEmailCell, formatCustomCell, getCellValue, getCellLink, getCellAlignment, getCellTypeClass, sortRows, compareValues } from './cell-renderers.js';

package/dist/tables/table-caption.svelte

@@ -1,9 +1,19 @@
-<script>export let side = "top";
-export let align = "center";
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	let {
+		side = 'top' as 'top' | 'bottom',
+		align = 'center' as 'left' | 'center' | 'right',
+		children
+	}: {
+		side?: 'top' | 'bottom';
+		align?: 'left' | 'center' | 'right';
+		children: Snippet;
+	} = $props();
 </script>
 
 <caption class="{side} {align}">
-	<slot />
+	{@render children?.()}
 </caption>
 
 <style>caption {
@@ -14,7 +24,6 @@ export let align = "center";
   letter-spacing: 0.1em;
   text-transform: uppercase;
   font-family: sans-serif;
-  text-shadow: 1px 1px 1px black;
   text-align: center;
   caption-side: top;
 }