@makolabs/ripple 0.0.1-dev.2 → 0.0.1-dev.21

package/dist/layout/table/Table.svelte

@@ -0,0 +1,413 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { table } from './table.js';
+	import type { TableProps, SortDirection, SortState } from '../../index.js';
+	let {
+		data = [],
+		columns = [],
+		color = 'default',
+		size = 'base',
+		bordered = true,
+		striped = false,
+		pageSize = 10,
+		selectable = false,
+		selected = $bindable([]),
+		onrowclick = () => {},
+		onsort = () => {},
+		onselect = () => {},
+		class: classname = '',
+		wrapperclass: wrapperClass = '',
+		tableclass: tableClass = '',
+		theadclass: theadClass = '',
+		tbodyclass: tbodyClass = '',
+		trclass: trClass = '',
+		thclass: thClass = '',
+		tdclass: tdClass = '',
+		footerclass: footerClass = '',
+		rowclass = () => '',
+		loading = false
+	}: TableProps<any> = $props();
+
+	let sortColumn = $state('');
+	let sortDirection = $state<SortDirection>(null);
+	let currentPage = $state(1);
+
+	// Pagination is automatically determined by pageSize
+	const pagination = $derived(pageSize > 0 && data.length > pageSize);
+
+	const {
+		base,
+		wrapper,
+		table: tableBaseClass,
+		thead,
+		tbody,
+		tr,
+		th,
+		td,
+		footer,
+		pagination: paginationClass,
+		emptyState,
+		sortButton,
+		sortIcon
+	} = $derived(
+		table({
+			size,
+			color,
+			bordered,
+			striped
+		})
+	);
+
+	const baseClasses = $derived(cn(base(), classname));
+	const wrapperClasses = $derived(cn(wrapper(), wrapperClass));
+	const tableClasses = $derived(cn(tableBaseClass(), tableClass));
+	const theadClasses = $derived(cn(thead(), theadClass));
+	const tbodyClasses = $derived(cn(tbody(), tbodyClass));
+	const trClasses = $derived(cn(tr(), trClass));
+	const thClasses = $derived(cn(th(), thClass));
+	const tdClasses = $derived(cn(td(), tdClass));
+	const footerClasses = $derived(cn(footer(), footerClass));
+	const emptyStateClasses = $derived(emptyState());
+
+	// Handle pagination
+	const totalPages = $derived(Math.ceil(data.length / pageSize));
+	const paginatedData = $derived(
+		pagination ? data.slice((currentPage - 1) * pageSize, currentPage * pageSize) : data
+	);
+
+	// Handle sorting
+	function toggleSort(column: string) {
+		const columnDef = columns.find((col) => (col.sortKey || col.key) === column);
+		if (!columnDef?.sortable) return;
+
+		if (sortColumn === column) {
+			// Cycle through: asc -> desc -> null
+			if (sortDirection === 'asc') {
+				sortDirection = 'desc';
+			} else if (sortDirection === 'desc') {
+				sortDirection = null;
+				sortColumn = '';
+			} else {
+				sortDirection = 'asc';
+			}
+		} else {
+			sortColumn = column;
+			sortDirection = 'asc';
+		}
+
+		const newSortState: SortState = { column: sortColumn, direction: sortDirection };
+		onsort(newSortState);
+	}
+
+	function toggleRowSelection(row: any) {
+		if (!selectable) return;
+
+		const index = selected.findIndex((r) => r === row);
+		if (index === -1) {
+			selected = [...selected, row];
+		} else {
+			selected = selected.filter((r) => r !== row);
+		}
+
+		onselect(selected);
+	}
+
+	function isRowSelected(row: any) {
+		return selected.includes(row);
+	}
+
+	function handleRowClick(row: any, index: number) {
+		onrowclick(row, index);
+	}
+
+	function nextPage() {
+		if (currentPage < totalPages) {
+			currentPage++;
+		}
+	}
+
+	function prevPage() {
+		if (currentPage > 1) {
+			currentPage--;
+		}
+	}
+
+	function goToPage(page: number) {
+		if (page >= 1 && page <= totalPages) {
+			currentPage = page;
+		}
+	}
+</script>
+
+<div class={baseClasses}>
+	<div class={wrapperClasses}>
+		<table class={tableClasses}>
+			<thead class={theadClasses}>
+				<tr>
+					{#if selectable}
+						<th class={thClasses}>
+							<input
+								type="checkbox"
+								onchange={() => {
+									if (selected.length === data.length) {
+										selected = [];
+									} else {
+										selected = [...data];
+									}
+									onselect(selected);
+								}}
+								checked={selected.length === data.length && data.length > 0}
+								aria-label="Select all rows"
+							/>
+						</th>
+					{/if}
+
+					{#each columns as column (column.key)}
+						<th
+							class={cn(
+								thClasses,
+								column.align === 'center' && 'text-center',
+								column.align === 'right' && 'text-right',
+								column.class
+							)}
+							style={column.width ? `width: ${column.width}` : undefined}
+						>
+							{#if column.sortable}
+								<button
+									type="button"
+									class={sortButton()}
+									onclick={() => toggleSort(column.sortKey || column.key)}
+									aria-label={`Sort by ${column.header}`}
+								>
+									{column.header}
+									<span class={sortIcon()}>
+										{#if sortColumn === (column.sortKey || column.key)}
+											{#if sortDirection === 'asc'}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 20 20"
+													fill="currentColor"
+													class="h-4 w-4"
+												>
+													<path
+														d="M10 15a.75.75 0 01-.75-.75V7.612L6.058 10.8a.75.75 0 01-1.061-1.061l3.75-3.75a.75.75 0 011.06 0l3.75 3.75a.75.75 0 11-1.06 1.061L10.75 7.612v6.638A.75.75 0 0110 15z"
+													/>
+												</svg>
+											{:else if sortDirection === 'desc'}
+												<svg
+													xmlns="http://www.w3.org/2000/svg"
+													viewBox="0 0 20 20"
+													fill="currentColor"
+													class="h-4 w-4"
+												>
+													<path
+														d="M10 5a.75.75 0 01.75.75v6.638l3.192-3.187a.75.75 0 111.06 1.061l-3.75 3.75a.75.75 0 01-1.06 0l-3.75-3.75a.75.75 0 111.06-1.061L9.25 12.389V5.75A.75.75 0 0110 5z"
+													/>
+												</svg>
+											{/if}
+										{:else}
+											<svg
+												xmlns="http://www.w3.org/2000/svg"
+												fill="none"
+												viewBox="0 0 24 24"
+												stroke-width="1.5"
+												stroke="currentColor"
+												class="h-4 w-4 opacity-40"
+											>
+												<path
+													stroke-linecap="round"
+													stroke-linejoin="round"
+													d="M8.25 15L12 18.75 15.75 15m-7.5-6L12 5.25 15.75 9"
+												/>
+											</svg>
+										{/if}
+									</span>
+								</button>
+							{:else}
+								{column.header}
+							{/if}
+						</th>
+					{/each}
+				</tr>
+			</thead>
+
+			<tbody class={tbodyClasses}>
+				{#if loading}
+					<tr>
+						<td
+							colspan={selectable ? columns.length + 1 : columns.length}
+							class={cn(tdClasses, 'py-8 text-center')}
+						>
+							<div class="flex justify-center">
+								<svg
+									class="text-default-500 h-6 w-6 animate-spin"
+									xmlns="http://www.w3.org/2000/svg"
+									fill="none"
+									viewBox="0 0 24 24"
+								>
+									<circle
+										class="opacity-25"
+										cx="12"
+										cy="12"
+										r="10"
+										stroke="currentColor"
+										stroke-width="4"
+									></circle>
+									<path
+										class="opacity-75"
+										fill="currentColor"
+										d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+									></path>
+								</svg>
+							</div>
+						</td>
+					</tr>
+				{:else if paginatedData.length === 0}
+					<tr>
+						<td
+							colspan={selectable ? columns.length + 1 : columns.length}
+							class={emptyStateClasses}
+						>
+							No data available
+						</td>
+					</tr>
+				{:else}
+					{#each paginatedData as row, rowIndex (rowIndex)}
+						<tr
+							class={cn(
+								trClasses,
+								rowclass(row, rowIndex),
+								selectable && isRowSelected(row) && 'bg-primary-100'
+							)}
+							onclick={() => handleRowClick(row, rowIndex)}
+							aria-selected={selectable && isRowSelected(row)}
+						>
+							{#if selectable}
+								<td class={tdClasses}>
+									<input
+										type="checkbox"
+										checked={isRowSelected(row)}
+										onclick={(e) => {
+											e.stopPropagation(); // Prevent row click
+											toggleRowSelection(row);
+										}}
+										aria-label={`Select row ${rowIndex + 1}`}
+									/>
+								</td>
+							{/if}
+
+							{#each columns as column (column.key)}
+								<td
+									class={cn(
+										tdClasses,
+										column.align === 'center' && 'text-center',
+										column.align === 'right' && 'text-right',
+										column.class
+									)}
+								>
+									{#if column.cell}
+										{@render column.cell(row, column.key, rowIndex)}
+									{:else if row[column.key] === undefined || row[column.key] === null}
+										<span class="text-default-300">—</span>
+									{:else}
+										{row[column.key]}
+									{/if}
+								</td>
+							{/each}
+						</tr>
+					{/each}
+				{/if}
+			</tbody>
+		</table>
+	</div>
+
+	{#if pagination && totalPages > 1}
+		<div class={footerClasses}>
+			<div class={paginationClass}>
+				<div class="flex items-center gap-2">
+					<span class="text-default-500 text-sm">
+						Showing {Math.min((currentPage - 1) * pageSize + 1, data.length)}
+						to {Math.min(currentPage * pageSize, data.length)} of {data.length} entries
+					</span>
+				</div>
+
+				<div class="flex items-center gap-1">
+					<button
+						type="button"
+						class={cn(
+							'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
+							currentPage === 1
+								? 'text-default-300 cursor-not-allowed'
+								: 'text-default-700 hover:bg-default-100'
+						)}
+						onclick={prevPage}
+						disabled={currentPage === 1}
+						aria-label="Previous page"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="h-5 w-5"
+						>
+							<path
+								d="M12.79 5.23a.75.75 0 01-.02 1.06L8.832 10l3.938 3.71a.75.75 0 11-1.04 1.08l-4.5-4.25a.75.75 0 010-1.08l4.5-4.25a.75.75 0 011.06.02z"
+							/>
+						</svg>
+					</button>
+
+					<!--eslint-disable-next-line @typescript-eslint/no-unused-vars-->
+					{#each Array(Math.min(5, totalPages)) as _, i (i)}
+						{@const pageNum =
+							currentPage <= 3
+								? i + 1
+								: currentPage >= totalPages - 2
+									? totalPages - 4 + i
+									: currentPage - 2 + i}
+
+						{#if pageNum > 0 && pageNum <= totalPages}
+							<button
+								type="button"
+								class={cn(
+									'relative inline-flex items-center rounded-md px-3 py-1 text-sm font-medium',
+									currentPage === pageNum
+										? 'bg-primary-100 text-primary-700'
+										: 'text-default-700 hover:bg-default-100'
+								)}
+								onclick={() => goToPage(pageNum)}
+								aria-label={`Page ${pageNum}`}
+								aria-current={currentPage === pageNum ? 'page' : undefined}
+							>
+								{pageNum}
+							</button>
+						{/if}
+					{/each}
+
+					<button
+						type="button"
+						class={cn(
+							'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
+							currentPage === totalPages
+								? 'text-default-300 cursor-not-allowed'
+								: 'text-default-700 hover:bg-default-100'
+						)}
+						onclick={nextPage}
+						disabled={currentPage === totalPages}
+						aria-label="Next page"
+					>
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="h-5 w-5"
+						>
+							<path
+								d="M7.21 14.77a.75.75 0 01.02-1.06L11.168 10 7.23 6.29a.75.75 0 111.04-1.08l4.5 4.25a.75.75 0 010 1.08l-4.5 4.25a.75.75 0 01-1.06-.02z"
+							/>
+						</svg>
+					</button>
+				</div>
+			</div>
+		</div>
+	{/if}
+</div>

package/dist/layout/table/Table.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TableProps } from '../../index.js';
+declare const Table: import("svelte").Component<TableProps<any>, {}, "selected">;
+type Table = ReturnType<typeof Table>;
+export default Table;

package/dist/layout/table/table.d.ts

@@ -0,0 +1,284 @@
+import type { ClassValue } from 'tailwind-variants';
+import type { VariantColors, VariantSizes } from '../../index.js';
+export declare const table: import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            th: string;
+            td: string;
+        };
+        sm: {
+            th: string;
+            td: string;
+        };
+        base: {
+            th: string;
+            td: string;
+        };
+        lg: {
+            th: string;
+            td: string;
+        };
+        xl: {
+            th: string;
+            td: string;
+        };
+        '2xl': {
+            th: string;
+            td: string;
+        };
+    };
+    color: {
+        default: {
+            th: string;
+        };
+        primary: {
+            th: string;
+            tr: string;
+        };
+        secondary: {
+            th: string;
+            tr: string;
+        };
+        info: {
+            th: string;
+            tr: string;
+        };
+        success: {
+            th: string;
+            tr: string;
+        };
+        warning: {
+            th: string;
+            tr: string;
+        };
+        danger: {
+            th: string;
+            tr: string;
+        };
+    };
+    bordered: {
+        true: {
+            table: string;
+            th: string;
+            td: string;
+        };
+        false: {
+            table: string;
+        };
+    };
+    striped: {
+        true: {
+            tr: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    table: string;
+    thead: string;
+    tbody: string;
+    tr: string;
+    th: string;
+    td: string;
+    footer: string;
+    pagination: string;
+    emptyState: string;
+    sortButton: string;
+    sortIcon: string;
+}, undefined, {
+    size: {
+        xs: {
+            th: string;
+            td: string;
+        };
+        sm: {
+            th: string;
+            td: string;
+        };
+        base: {
+            th: string;
+            td: string;
+        };
+        lg: {
+            th: string;
+            td: string;
+        };
+        xl: {
+            th: string;
+            td: string;
+        };
+        '2xl': {
+            th: string;
+            td: string;
+        };
+    };
+    color: {
+        default: {
+            th: string;
+        };
+        primary: {
+            th: string;
+            tr: string;
+        };
+        secondary: {
+            th: string;
+            tr: string;
+        };
+        info: {
+            th: string;
+            tr: string;
+        };
+        success: {
+            th: string;
+            tr: string;
+        };
+        warning: {
+            th: string;
+            tr: string;
+        };
+        danger: {
+            th: string;
+            tr: string;
+        };
+    };
+    bordered: {
+        true: {
+            table: string;
+            th: string;
+            td: string;
+        };
+        false: {
+            table: string;
+        };
+    };
+    striped: {
+        true: {
+            tr: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    table: string;
+    thead: string;
+    tbody: string;
+    tr: string;
+    th: string;
+    td: string;
+    footer: string;
+    pagination: string;
+    emptyState: string;
+    sortButton: string;
+    sortIcon: string;
+}, import("tailwind-variants").TVReturnType<{
+    size: {
+        xs: {
+            th: string;
+            td: string;
+        };
+        sm: {
+            th: string;
+            td: string;
+        };
+        base: {
+            th: string;
+            td: string;
+        };
+        lg: {
+            th: string;
+            td: string;
+        };
+        xl: {
+            th: string;
+            td: string;
+        };
+        '2xl': {
+            th: string;
+            td: string;
+        };
+    };
+    color: {
+        default: {
+            th: string;
+        };
+        primary: {
+            th: string;
+            tr: string;
+        };
+        secondary: {
+            th: string;
+            tr: string;
+        };
+        info: {
+            th: string;
+            tr: string;
+        };
+        success: {
+            th: string;
+            tr: string;
+        };
+        warning: {
+            th: string;
+            tr: string;
+        };
+        danger: {
+            th: string;
+            tr: string;
+        };
+    };
+    bordered: {
+        true: {
+            table: string;
+            th: string;
+            td: string;
+        };
+        false: {
+            table: string;
+        };
+    };
+    striped: {
+        true: {
+            tr: string;
+        };
+    };
+}, {
+    base: string;
+    wrapper: string;
+    table: string;
+    thead: string;
+    tbody: string;
+    tr: string;
+    th: string;
+    td: string;
+    footer: string;
+    pagination: string;
+    emptyState: string;
+    sortButton: string;
+    sortIcon: string;
+}, undefined, unknown, unknown, undefined>>;
+export type TableProps<T extends DataRow = any> = {
+    data: T[];
+    columns: TableColumn<T>[];
+    color?: VariantColors;
+    size?: VariantSizes;
+    bordered?: boolean;
+    striped?: boolean;
+    emptyStateText?: string;
+    pageSize?: number;
+    selectable?: boolean;
+    selected?: T[];
+    class?: ClassValue;
+    wrapperclass?: ClassValue;
+    tableclass?: ClassValue;
+    theadclass?: ClassValue;
+    tbodyclass?: ClassValue;
+    trclass?: ClassValue;
+    thclass?: ClassValue;
+    tdclass?: ClassValue;
+    footerclass?: ClassValue;
+    onrowclick?: (row: T, index: number) => void;
+    onsort?: (sortState: SortState) => void;
+    onselect?: (selected: T[]) => void;
+    rowclass?: (row: T, index: number) => ClassValue;
+    loading?: boolean;
+};