@aspect-ops/exon-ui 0.2.0 → 0.2.2

package/dist/components/DataTable/DataTable.svelte

@@ -0,0 +1,460 @@
+<script lang="ts">
+	/**
+	 * DataTable - A sortable, customizable data table component
+	 * Supports custom cell rendering, sorting, loading states, and responsive overflow
+	 */
+
+	type SortOrder = 'asc' | 'desc';
+	type ColumnAlign = 'left' | 'center' | 'right';
+
+	interface ColumnDef {
+		/** Unique key matching the data property */
+		key: string;
+		/** Header text to display */
+		header: string;
+		/** Whether this column is sortable */
+		sortable?: boolean;
+		/** Fixed width (e.g., '100px', '10rem') */
+		width?: string;
+		/** Text alignment */
+		align?: ColumnAlign;
+		/** Custom cell renderer - receives (value, row) */
+		cell?: import('svelte').Snippet<[value: unknown, row: unknown]>;
+	}
+
+	interface Props {
+		/** Array of data objects to display */
+		data: unknown[];
+		/** Column definitions */
+		columns: ColumnDef[];
+		/** Currently sorted column key */
+		sortBy?: string;
+		/** Current sort direction */
+		sortOrder?: SortOrder;
+		/** Callback when sort changes */
+		onsort?: (column: string, order: SortOrder) => void;
+		/** Show loading skeleton */
+		loading?: boolean;
+		/** Number of skeleton rows to show when loading */
+		loadingRows?: number;
+		/** Custom empty state content */
+		empty?: import('svelte').Snippet;
+		/** Enable row hover effect */
+		rowHover?: boolean;
+		/** Enable striped rows */
+		striped?: boolean;
+		/** Make header sticky on scroll */
+		stickyHeader?: boolean;
+		/** Additional CSS classes */
+		class?: string;
+	}
+
+	let {
+		data = [],
+		columns,
+		sortBy = $bindable(),
+		sortOrder = $bindable(),
+		onsort,
+		loading = false,
+		loadingRows = 5,
+		empty,
+		rowHover = true,
+		striped = false,
+		stickyHeader = false,
+		class: className = ''
+	}: Props = $props();
+
+	function handleSort(column: ColumnDef) {
+		if (!column.sortable) return;
+
+		let newOrder: SortOrder = 'asc';
+		if (sortBy === column.key) {
+			newOrder = sortOrder === 'asc' ? 'desc' : 'asc';
+		}
+
+		sortBy = column.key;
+		sortOrder = newOrder;
+		onsort?.(column.key, newOrder);
+	}
+
+	function getCellValue(row: unknown, key: string): unknown {
+		if (typeof row === 'object' && row !== null) {
+			return (row as Record<string, unknown>)[key];
+		}
+		return undefined;
+	}
+
+	const isEmpty = $derived(!loading && data.length === 0);
+	const skeletonRows = $derived(Array.from({ length: loadingRows }, (_, i) => i));
+</script>
+
+<div class="data-table-container {className}" class:data-table-container--sticky={stickyHeader}>
+	<table
+		class="data-table"
+		class:data-table--striped={striped}
+		class:data-table--row-hover={rowHover}
+	>
+		<thead class="data-table__head">
+			<tr>
+				{#each columns as column}
+					<th
+						class="data-table__header data-table__header--{column.align || 'left'}"
+						class:data-table__header--sortable={column.sortable}
+						style={column.width ? `width: ${column.width}` : undefined}
+						onclick={() => handleSort(column)}
+						role={column.sortable ? 'button' : undefined}
+						tabindex={column.sortable ? 0 : undefined}
+						onkeydown={(e) => {
+							if (column.sortable && (e.key === 'Enter' || e.key === ' ')) {
+								e.preventDefault();
+								handleSort(column);
+							}
+						}}
+						aria-sort={sortBy === column.key
+							? sortOrder === 'asc'
+								? 'ascending'
+								: 'descending'
+							: undefined}
+					>
+						<div class="data-table__header-content">
+							<span>{column.header}</span>
+							{#if column.sortable}
+								<span
+									class="data-table__sort-icon"
+									class:data-table__sort-icon--active={sortBy === column.key}
+								>
+									{#if sortBy === column.key}
+										<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+											{#if sortOrder === 'asc'}
+												<path
+													fill-rule="evenodd"
+													d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
+													clip-rule="evenodd"
+												/>
+											{:else}
+												<path
+													fill-rule="evenodd"
+													d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z"
+													clip-rule="evenodd"
+												/>
+											{/if}
+										</svg>
+									{:else}
+										<svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+											<path
+												d="M5 8.5a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9A.5.5 0 015 8.5zm0 3a.5.5 0 01.5-.5h9a.5.5 0 010 1h-9a.5.5 0 01-.5-.5z"
+											/>
+										</svg>
+									{/if}
+								</span>
+							{/if}
+						</div>
+					</th>
+				{/each}
+			</tr>
+		</thead>
+		<tbody class="data-table__body">
+			{#if loading}
+				{#each skeletonRows as _row}
+					<tr class="data-table__row data-table__row--skeleton">
+						{#each columns as column}
+							<td
+								class="data-table__cell data-table__cell--{column.align || 'left'}"
+								style={column.width ? `width: ${column.width}` : undefined}
+							>
+								<div class="data-table__skeleton"></div>
+							</td>
+						{/each}
+					</tr>
+				{/each}
+			{:else if isEmpty}
+				<tr class="data-table__row data-table__row--empty">
+					<td colspan={columns.length} class="data-table__cell data-table__cell--empty">
+						{#if empty}
+							{@render empty()}
+						{:else}
+							<div class="data-table__empty-default">
+								<span>No data available</span>
+							</div>
+						{/if}
+					</td>
+				</tr>
+			{:else}
+				{#each data as row, index}
+					<tr class="data-table__row" data-row-index={index}>
+						{#each columns as column}
+							<td
+								class="data-table__cell data-table__cell--{column.align || 'left'}"
+								style={column.width ? `width: ${column.width}` : undefined}
+							>
+								{#if column.cell}
+									{@render column.cell(getCellValue(row, column.key), row)}
+								{:else}
+									{getCellValue(row, column.key) ?? '-'}
+								{/if}
+							</td>
+						{/each}
+					</tr>
+				{/each}
+			{/if}
+		</tbody>
+	</table>
+</div>
+
+<style>
+	/* Container with horizontal overflow */
+	.data-table-container {
+		width: 100%;
+		overflow-x: auto;
+		-webkit-overflow-scrolling: touch;
+		border-radius: var(--radius-lg, 0.5rem);
+		background: var(--color-bg-card, #ffffff);
+		box-shadow: var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05));
+	}
+
+	.data-table-container--sticky {
+		max-height: 70vh;
+		overflow-y: auto;
+	}
+
+	/* Table base */
+	.data-table {
+		width: 100%;
+		border-collapse: collapse;
+		font-family: inherit;
+		font-size: var(--text-sm, 0.875rem);
+	}
+
+	/* Header */
+	.data-table__head {
+		background: var(--color-bg-muted, #f9fafb);
+	}
+
+	.data-table-container--sticky .data-table__head {
+		position: sticky;
+		top: 0;
+		z-index: 1;
+	}
+
+	.data-table__header {
+		padding: var(--space-md, 0.75rem) var(--space-lg, 1rem);
+		font-size: var(--text-xs, 0.75rem);
+		font-weight: 600;
+		color: var(--color-text-muted, #6b7280);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+		white-space: nowrap;
+		border-bottom: 1px solid var(--color-border, #e5e7eb);
+		user-select: none;
+	}
+
+	.data-table__header--left {
+		text-align: left;
+	}
+
+	.data-table__header--center {
+		text-align: center;
+	}
+
+	.data-table__header--right {
+		text-align: right;
+	}
+
+	.data-table__header--sortable {
+		cursor: pointer;
+		transition: background-color 0.15s ease;
+	}
+
+	.data-table__header--sortable:hover {
+		background: var(--color-bg-hover, #f3f4f6);
+	}
+
+	.data-table__header--sortable:focus-visible {
+		outline: 2px solid var(--color-primary, #3b82f6);
+		outline-offset: -2px;
+	}
+
+	.data-table__header-content {
+		display: inline-flex;
+		align-items: center;
+		gap: var(--space-xs, 0.25rem);
+	}
+
+	/* Sort icon */
+	.data-table__sort-icon {
+		display: inline-flex;
+		width: 1rem;
+		height: 1rem;
+		color: var(--color-text-muted, #9ca3af);
+		transition: color 0.15s ease;
+	}
+
+	.data-table__sort-icon svg {
+		width: 100%;
+		height: 100%;
+	}
+
+	.data-table__sort-icon--active {
+		color: var(--color-primary, #3b82f6);
+	}
+
+	/* Body */
+	.data-table__body {
+		background: var(--color-bg-card, #ffffff);
+	}
+
+	/* Row */
+	.data-table__row {
+		border-bottom: 1px solid var(--color-border, #e5e7eb);
+	}
+
+	.data-table__row:last-child {
+		border-bottom: none;
+	}
+
+	/* Row hover */
+	.data-table--row-hover
+		.data-table__row:not(.data-table__row--skeleton):not(.data-table__row--empty):hover {
+		background: var(--color-bg-hover, #f9fafb);
+	}
+
+	/* Striped rows */
+	.data-table--striped .data-table__row:nth-child(even) {
+		background: var(--color-bg-muted, #f9fafb);
+	}
+
+	/* Cell */
+	.data-table__cell {
+		padding: var(--space-md, 0.75rem) var(--space-lg, 1rem);
+		color: var(--color-text, #1f2937);
+		vertical-align: middle;
+	}
+
+	.data-table__cell--left {
+		text-align: left;
+	}
+
+	.data-table__cell--center {
+		text-align: center;
+	}
+
+	.data-table__cell--right {
+		text-align: right;
+	}
+
+	.data-table__cell--empty {
+		padding: var(--space-2xl, 3rem) var(--space-lg, 1rem);
+		text-align: center;
+	}
+
+	/* Empty state */
+	.data-table__empty-default {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--space-sm, 0.5rem);
+		color: var(--color-text-muted, #6b7280);
+	}
+
+	/* Skeleton loading */
+	.data-table__skeleton {
+		height: 1rem;
+		width: 75%;
+		background: linear-gradient(
+			90deg,
+			var(--color-bg-muted, #e5e7eb) 25%,
+			var(--color-bg-skeleton-shine, #f3f4f6) 50%,
+			var(--color-bg-muted, #e5e7eb) 75%
+		);
+		background-size: 200% 100%;
+		animation: skeleton-shimmer 1.5s ease-in-out infinite;
+		border-radius: var(--radius-sm, 0.25rem);
+	}
+
+	.data-table__cell--center .data-table__skeleton {
+		margin: 0 auto;
+	}
+
+	.data-table__cell--right .data-table__skeleton {
+		margin-left: auto;
+	}
+
+	@keyframes skeleton-shimmer {
+		0% {
+			background-position: 200% 0;
+		}
+		100% {
+			background-position: -200% 0;
+		}
+	}
+
+	/* Dark mode support */
+	:global([data-theme='dark']) .data-table-container {
+		background: var(--color-bg-card-dark, #1f2937);
+		box-shadow: var(--shadow-sm-dark, 0 1px 2px 0 rgb(0 0 0 / 0.2));
+	}
+
+	:global([data-theme='dark']) .data-table__head {
+		background: var(--color-bg-muted-dark, #374151);
+	}
+
+	:global([data-theme='dark']) .data-table__header {
+		color: var(--color-text-muted-dark, #9ca3af);
+		border-bottom-color: var(--color-border-dark, #4b5563);
+	}
+
+	:global([data-theme='dark']) .data-table__header--sortable:hover {
+		background: var(--color-bg-hover-dark, #4b5563);
+	}
+
+	:global([data-theme='dark']) .data-table__body {
+		background: var(--color-bg-card-dark, #1f2937);
+	}
+
+	:global([data-theme='dark']) .data-table__row {
+		border-bottom-color: var(--color-border-dark, #374151);
+	}
+
+	:global([data-theme='dark'])
+		.data-table--row-hover
+		.data-table__row:not(.data-table__row--skeleton):not(.data-table__row--empty):hover {
+		background: var(--color-bg-hover-dark, #374151);
+	}
+
+	:global([data-theme='dark']) .data-table--striped .data-table__row:nth-child(even) {
+		background: var(--color-bg-muted-dark, #374151);
+	}
+
+	:global([data-theme='dark']) .data-table__cell {
+		color: var(--color-text-dark, #f9fafb);
+	}
+
+	:global([data-theme='dark']) .data-table__empty-default {
+		color: var(--color-text-muted-dark, #9ca3af);
+	}
+
+	:global([data-theme='dark']) .data-table__skeleton {
+		background: linear-gradient(
+			90deg,
+			var(--color-bg-muted-dark, #374151) 25%,
+			var(--color-bg-skeleton-shine-dark, #4b5563) 50%,
+			var(--color-bg-muted-dark, #374151) 75%
+		);
+		background-size: 200% 100%;
+	}
+
+	/* Mobile touch targets */
+	@media (pointer: coarse) {
+		.data-table__header {
+			padding: var(--space-md, 0.75rem) var(--space-md, 0.75rem);
+		}
+
+		.data-table__cell {
+			padding: var(--space-md, 0.75rem) var(--space-md, 0.75rem);
+		}
+
+		.data-table__header--sortable {
+			min-height: 2.75rem;
+		}
+	}
+</style>

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

@@ -0,0 +1,49 @@
+/**
+ * DataTable - A sortable, customizable data table component
+ * Supports custom cell rendering, sorting, loading states, and responsive overflow
+ */
+type SortOrder = 'asc' | 'desc';
+type ColumnAlign = 'left' | 'center' | 'right';
+interface ColumnDef {
+    /** Unique key matching the data property */
+    key: string;
+    /** Header text to display */
+    header: string;
+    /** Whether this column is sortable */
+    sortable?: boolean;
+    /** Fixed width (e.g., '100px', '10rem') */
+    width?: string;
+    /** Text alignment */
+    align?: ColumnAlign;
+    /** Custom cell renderer - receives (value, row) */
+    cell?: import('svelte').Snippet<[value: unknown, row: unknown]>;
+}
+interface Props {
+    /** Array of data objects to display */
+    data: unknown[];
+    /** Column definitions */
+    columns: ColumnDef[];
+    /** Currently sorted column key */
+    sortBy?: string;
+    /** Current sort direction */
+    sortOrder?: SortOrder;
+    /** Callback when sort changes */
+    onsort?: (column: string, order: SortOrder) => void;
+    /** Show loading skeleton */
+    loading?: boolean;
+    /** Number of skeleton rows to show when loading */
+    loadingRows?: number;
+    /** Custom empty state content */
+    empty?: import('svelte').Snippet;
+    /** Enable row hover effect */
+    rowHover?: boolean;
+    /** Enable striped rows */
+    striped?: boolean;
+    /** Make header sticky on scroll */
+    stickyHeader?: boolean;
+    /** Additional CSS classes */
+    class?: string;
+}
+declare const DataTable: import("svelte").Component<Props, {}, "sortBy" | "sortOrder">;
+type DataTable = ReturnType<typeof DataTable>;
+export default DataTable;

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

@@ -0,0 +1,2 @@
+export { default as DataTable } from './DataTable.svelte';
+export type { DataTableProps, DataTableColumn, DataTableSortOrder } from '../../types/index.js';

package/dist/components/DataTable/index.js

@@ -0,0 +1 @@
+export { default as DataTable } from './DataTable.svelte';