@makolabs/ripple 0.0.1-dev.3 → 0.0.1-dev.5

package/dist/layout/table/Cells.svelte

@@ -0,0 +1,111 @@
+<script module lang="ts">
+	import type { StatusType, KeyType, DataRow } from './table.js';
+
+	export { DateCell, Currency, Percentage, PhoneNumber, Email, Status, Time };
+
+	function getStatusClass(status: string): KeyType {
+		const base = 'inline-flex px-2 py-1 text-xs font-medium rounded-full';
+		const classes: Record<StatusType, string> = {
+			active: `${base} bg-success-100 text-success-700`,
+			inactive: `${base} bg-default-100 text-default-700`,
+			pending: `${base} bg-warning-100 text-warning-700`,
+			error: `${base} bg-danger-100 text-danger-700`,
+			default: `${base} bg-default-100 text-default-700`
+		};
+		return classes[status as StatusType] || classes.default;
+	}
+
+	function formatPhoneNumber(phoneNumber: string | number | null | undefined): KeyType | null {
+		if (phoneNumber === undefined || phoneNumber === null) {
+			return null;
+		}
+		const clean = String(phoneNumber).replace(/\D/g, '');
+		const match = clean.match(/^(\d{3})(\d{3})(\d{4})$/);
+		return match ? `(${match[1]}) ${match[2]}-${match[3]}` : String(phoneNumber);
+	}
+
+	function formatTime(time: string | number | Date): KeyType {
+		return new Date(time).toLocaleTimeString('en-US', {
+			hour: '2-digit',
+			minute: '2-digit'
+		});
+	}
+
+	function formatCurrency(value: number): KeyType {
+		return new Intl.NumberFormat('en-US', {
+			style: 'currency',
+			currency: 'USD',
+			minimumFractionDigits: 2,
+			maximumFractionDigits: 2
+		}).format(value);
+	}
+
+	function formatPercentage(value: number): KeyType {
+		return new Intl.NumberFormat('en-US', {
+			style: 'percent',
+			minimumFractionDigits: 2,
+			maximumFractionDigits: 2
+		}).format(value / 100);
+	}
+</script>
+
+{#snippet DateCell(row: DataRow, key: KeyType)}
+	{#if row[key] !== undefined && row[key] !== null}
+		{new Date(row[key]).toLocaleDateString('en-US')}
+	{:else}
+		<span class="text-default-300">—</span>
+	{/if}
+{/snippet}
+
+{#snippet Currency(row: DataRow, key: KeyType)}
+	{#if row[key] !== undefined && row[key] !== null}
+		{formatCurrency(row[key])}
+	{:else}
+		<span class="text-default-300">—</span>
+	{/if}
+{/snippet}
+
+{#snippet Percentage(row: DataRow, key: KeyType)}
+	{#if row[key] !== undefined && row[key] !== null}
+		{formatPercentage(row[key])}
+	{:else}
+		<span class="text-default-300">—</span>
+	{/if}
+{/snippet}
+
+{#snippet PhoneNumber(row: DataRow, key: KeyType)}
+	{#if row[key] !== undefined && row[key] !== null}
+		{formatPhoneNumber(row[key])}
+	{:else}
+		<span class="text-default-300">—</span>
+	{/if}
+{/snippet}
+
+{#snippet Email(row: DataRow, key: KeyType)}
+	{#if row[key] !== undefined && row[key] !== null}
+		<a href="mailto:{row[key]}" class="text-primary-600 hover:underline">
+			{row[key]}
+		</a>
+	{:else}
+		<span class="text-default-300">—</span>
+	{/if}
+{/snippet}
+
+{#snippet Status(row: DataRow, key: KeyType)}
+	{#if row[key] !== undefined && row[key] !== null}
+		{@const status = String(row[key]).toLowerCase()}
+		<span class={getStatusClass(status)}>
+			{row[key]}
+		</span>
+	{:else}
+		<span class="text-default-300">—</span>
+	{/if}
+{/snippet}
+
+{#snippet Time(row: DataRow, key: KeyType)}
+	{#if row[key] !== undefined && row[key] !== null}
+		{formatTime(row[key])}
+	{:else}
+		<span class="text-default-300">—</span>
+	{/if}
+{/snippet}

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

@@ -0,0 +1,27 @@
+import type { KeyType, DataRow } from './table.js';
+export { DateCell, Currency, Percentage, PhoneNumber, Email, Status, Time };
+declare const DateCell: (row: DataRow, key: KeyType) => ReturnType<import("svelte").Snippet>;
+declare const Currency: (row: DataRow, key: KeyType) => ReturnType<import("svelte").Snippet>;
+declare const Percentage: (row: DataRow, key: KeyType) => ReturnType<import("svelte").Snippet>;
+declare const PhoneNumber: (row: DataRow, key: KeyType) => ReturnType<import("svelte").Snippet>;
+declare const Email: (row: DataRow, key: KeyType) => ReturnType<import("svelte").Snippet>;
+declare const Status: (row: DataRow, key: KeyType) => ReturnType<import("svelte").Snippet>;
+declare const Time: (row: DataRow, key: KeyType) => ReturnType<import("svelte").Snippet>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Cells: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Cells = InstanceType<typeof Cells>;
+export default Cells;

package/dist/layout/table/Table.svelte

@@ -0,0 +1,413 @@
+<script lang="ts">
+	import { cn } from '../../helper/cls.js';
+	import { table, type TableProps, type SortDirection, type SortState } from './table.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 './table.js';
+declare const Table: import("svelte").Component<TableProps<any>, {}, "selected">;
+type Table = ReturnType<typeof Table>;
+export default Table;

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

@@ -0,0 +1,3 @@
+export { default as Table } from './Table.svelte';
+export type { TableProps, KeyType, DataRow, StatusType, TableColumn, SortState, SortDirection } from './table.js';
+export { default as Cells } from './Cells.svelte';

package/dist/layout/table/index.js

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