@makolabs/ripple 0.0.1-dev.8 → 0.0.1-dev.80

package/dist/layout/table/Table.svelte

@@ -1,20 +1,23 @@
 <script lang="ts">
 	import { cn } from '../../helper/cls.js';
-	import { table, type TableProps, type SortDirection, type SortState } from './table.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,
+		currentPage: externalCurrentPage,
+		totalItems,
 		selectable = false,
 		selected = $bindable([]),
-		onrowclick = () => {},
+		onrowclick,
 		onsort = () => {},
 		onselect = () => {},
+		onpagechange,
+		onpagesizechange,
 		class: classname = '',
 		wrapperclass: wrapperClass = '',
 		tableclass: tableClass = '',
@@ -24,56 +27,93 @@
 		thclass: thClass = '',
 		tdclass: tdClass = '',
 		footerclass: footerClass = '',
+		paginationclass: paginationClass = '',
 		rowclass = () => '',
-		loading = false
+		loading = false,
+		expandedContent,
+		pagination = true,
+		showPagination = true,
+		showPageSize = false,
+		pageSizeOptions = [5, 10, 25, 50, 100],
+		paginationPosition = 'bottom',
+		paginationTemplate = 'full'
 	}: TableProps<any> = $props();
 
 	let sortColumn = $state('');
 	let sortDirection = $state<SortDirection>(null);
-	let currentPage = $state(1);
+	let internalCurrentPage = $state(externalCurrentPage || 1);
+	let internalPageSize = $state(pageSize);
 
-	// Pagination is automatically determined by pageSize
-	const pagination = $derived(pageSize > 0 && data.length > pageSize);
+	// Use external current page if provided
+	$effect(() => {
+		if (externalCurrentPage !== undefined) {
+			internalCurrentPage = externalCurrentPage;
+		}
+	});
+
+	// Pagination is automatically determined by pageSize and pagination prop
+	const showPaginationControls = $derived(
+		pagination &&
+			showPagination &&
+			(data.length > internalPageSize || totalItems > internalPageSize)
+	);
+
+	// Calculate total items and pages
+	const effectiveTotalItems = $derived(totalItems !== undefined ? totalItems : data.length);
+	const totalPages = $derived(Math.ceil(effectiveTotalItems / internalPageSize));
 
 	const {
-		base,
-		wrapper,
+		base: baseClass,
+		wrapper: wrapperBaseClass,
 		table: tableBaseClass,
-		thead,
-		tbody,
-		tr,
-		th,
-		td,
-		footer,
-		pagination: paginationClass,
-		emptyState,
-		sortButton,
-		sortIcon
+		thead: theadBaseClass,
+		tbody: tbodyBaseClass,
+		tr: trBaseClass,
+		th: thBaseClass,
+		td: tdBaseClass,
+		footer: footerBaseClass,
+		pagination: paginationBaseClass,
+		emptyState: emptyStateBaseClass,
+		sortButton: sortButtonBaseClass,
+		sortIcon: sortIconBaseClass
 	} = $derived(
 		table({
-			size,
-			color,
 			bordered,
 			striped
 		})
 	);
 
-	const baseClasses = $derived(cn(base(), classname));
-	const wrapperClasses = $derived(cn(wrapper(), wrapperClass));
+	const baseClasses = $derived(cn(baseClass(), classname));
+	const wrapperClasses = $derived(cn(wrapperBaseClass(), 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());
+	const theadClasses = $derived(cn(theadBaseClass(), theadClass));
+	const tbodyClasses = $derived(cn(tbodyBaseClass(), tbodyClass));
+	const trClasses = $derived(cn(trBaseClass(), trClass));
+	const thClasses = $derived(cn(thBaseClass(), thClass));
+	const tdClasses = $derived(cn(tdBaseClass(), tdClass));
+	const footerClasses = $derived(cn(footerBaseClass(), footerClass));
+	const paginationClasses = $derived(cn(paginationBaseClass(), paginationClass));
+	const emptyStateClasses = $derived(emptyStateBaseClass());
 
 	// Handle pagination
-	const totalPages = $derived(Math.ceil(data.length / pageSize));
-	const paginatedData = $derived(
-		pagination ? data.slice((currentPage - 1) * pageSize, currentPage * pageSize) : data
-	);
+	function getPaginatedData() {
+		// If no pagination or all data fits on one page, return all data
+		if (!pagination || data.length <= internalPageSize) {
+			return data;
+		}
+
+		// If external data source might be handling pagination
+		if (totalItems !== undefined) {
+			// If data.length is less than or equal to pageSize, assume it's already paginated
+			if (data.length <= internalPageSize) {
+				return data;
+			}
+		}
+
+		// Otherwise, handle pagination internally
+		const startIndex = (internalCurrentPage - 1) * internalPageSize;
+		return data.slice(startIndex, startIndex + internalPageSize);
+	}
 
 	// Handle sorting
 	function toggleSort(column: string) {
@@ -117,35 +157,271 @@
 	}
 
 	function handleRowClick(row: any, index: number) {
-		onrowclick(row, index);
+		onrowclick?.(row, index);
+	}
+
+	function goToFirstPage() {
+		if (internalCurrentPage !== 1) {
+			internalCurrentPage = 1;
+			onpagechange?.(internalCurrentPage);
+		}
+	}
+
+	function goToLastPage() {
+		if (internalCurrentPage !== totalPages) {
+			internalCurrentPage = totalPages;
+			onpagechange?.(internalCurrentPage);
+		}
 	}
 
 	function nextPage() {
-		if (currentPage < totalPages) {
-			currentPage++;
+		if (internalCurrentPage < totalPages) {
+			internalCurrentPage++;
+			onpagechange?.(internalCurrentPage);
 		}
 	}
 
 	function prevPage() {
-		if (currentPage > 1) {
-			currentPage--;
+		if (internalCurrentPage > 1) {
+			internalCurrentPage--;
+			onpagechange?.(internalCurrentPage);
 		}
 	}
 
 	function goToPage(page: number) {
-		if (page >= 1 && page <= totalPages) {
-			currentPage = page;
+		if (page >= 1 && page <= totalPages && page !== internalCurrentPage) {
+			internalCurrentPage = page;
+			onpagechange?.(internalCurrentPage);
+		}
+	}
+
+	function handlePageSizeChange(event: Event) {
+		const select = event.target as HTMLSelectElement;
+		const newPageSize = parseInt(select.value, 10);
+		internalPageSize = newPageSize;
+
+		// Adjust current page if it would exceed the new total pages
+		const newTotalPages = Math.ceil(effectiveTotalItems / newPageSize);
+		if (internalCurrentPage > newTotalPages) {
+			internalCurrentPage = newTotalPages || 1;
+		}
+
+		onpagesizechange?.(newPageSize);
+		onpagechange?.(internalCurrentPage);
+	}
+
+	function getPageNumbers(): number[] {
+		const pages: number[] = [];
+		const maxPages = 5;
+		const halfMax = Math.floor(maxPages / 2);
+
+		let start = Math.max(1, internalCurrentPage - halfMax);
+		let end = Math.min(totalPages, start + maxPages - 1);
+
+		if (end - start + 1 < maxPages) {
+			start = Math.max(1, end - maxPages + 1);
+		}
+
+		for (let i = start; i <= end; i++) {
+			pages.push(i);
 		}
+
+		return pages;
 	}
 </script>
 
 <div class={baseClasses}>
+	{#if showPaginationControls && (paginationPosition === 'top' || paginationPosition === 'both')}
+		<div class={footerClasses}>
+			<div class={paginationClasses}>
+				<div class="flex items-center gap-2">
+					{#if showPageSize}
+						<div class="flex items-center gap-2">
+							<label for="table-page-size" class="text-default-500 text-sm">Show</label>
+							<select
+								id="table-page-size"
+								class="border-default-200 rounded-md border px-2 py-1 text-sm"
+								value={internalPageSize}
+								onchange={handlePageSizeChange}
+							>
+								{#each pageSizeOptions as option}
+									<option value={option}>{option}</option>
+								{/each}
+							</select>
+							<span class="text-default-500 text-sm">entries</span>
+						</div>
+					{/if}
+					<span class="text-default-500 text-sm">
+						Showing {Math.min(
+							(internalCurrentPage - 1) * internalPageSize + 1,
+							effectiveTotalItems
+						)}
+						to {Math.min(internalCurrentPage * internalPageSize, effectiveTotalItems)} of {effectiveTotalItems}
+						entries
+					</span>
+				</div>
+
+				<div class="flex items-center gap-1">
+					{#if paginationTemplate === 'full'}
+						<!-- First page button -->
+						<button
+							type="button"
+							class={cn(
+								'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
+								internalCurrentPage === 1
+									? 'text-default-300 cursor-not-allowed'
+									: 'text-default-700 hover:bg-default-100'
+							)}
+							onclick={goToFirstPage}
+							disabled={internalCurrentPage === 1}
+							aria-label="First page"
+						>
+							<!-- Double Chevron Left SVG -->
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="h-4 w-4"
+							>
+								<path d="m11 17-5-5 5-5"></path>
+								<path d="m18 17-5-5 5-5"></path>
+							</svg>
+						</button>
+					{/if}
+
+					<!-- Previous page button -->
+					<button
+						type="button"
+						class={cn(
+							'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
+							internalCurrentPage === 1
+								? 'text-default-300 cursor-not-allowed'
+								: 'text-default-700 hover:bg-default-100'
+						)}
+						onclick={prevPage}
+						disabled={internalCurrentPage === 1}
+						aria-label="Previous page"
+					>
+						<!-- Chevron Left SVG -->
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="16"
+							height="16"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="h-4 w-4"
+						>
+							<path d="m15 18-6-6 6-6"></path>
+						</svg>
+					</button>
+
+					<!-- Page numbers -->
+					{#if paginationTemplate === 'full'}
+						{#each getPageNumbers() as pageNum}
+							<button
+								type="button"
+								class={cn(
+									'relative inline-flex items-center rounded-md px-3 py-1 text-sm font-medium',
+									internalCurrentPage === pageNum
+										? 'bg-primary-100 text-primary-700'
+										: 'text-default-700 hover:bg-default-100'
+								)}
+								onclick={() => goToPage(pageNum)}
+								aria-label={`Page ${pageNum}`}
+								aria-current={internalCurrentPage === pageNum ? 'page' : undefined}
+							>
+								{pageNum}
+							</button>
+						{/each}
+					{:else}
+						<span class="text-default-500 px-2 text-sm">
+							Page {internalCurrentPage} of {totalPages}
+						</span>
+					{/if}
+
+					<!-- Next page button -->
+					<button
+						type="button"
+						class={cn(
+							'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
+							internalCurrentPage === totalPages
+								? 'text-default-300 cursor-not-allowed'
+								: 'text-default-700 hover:bg-default-100'
+						)}
+						onclick={nextPage}
+						disabled={internalCurrentPage === totalPages}
+						aria-label="Next page"
+					>
+						<!-- Chevron Right SVG -->
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							width="16"
+							height="16"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="h-4 w-4"
+						>
+							<path d="m9 18 6-6-6-6"></path>
+						</svg>
+					</button>
+
+					{#if paginationTemplate === 'full'}
+						<!-- Last page button -->
+						<button
+							type="button"
+							class={cn(
+								'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
+								internalCurrentPage === totalPages
+									? 'text-default-300 cursor-not-allowed'
+									: 'text-default-700 hover:bg-default-100'
+							)}
+							onclick={goToLastPage}
+							disabled={internalCurrentPage === totalPages}
+							aria-label="Last page"
+						>
+							<!-- Double Chevron Right SVG -->
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="h-4 w-4"
+							>
+								<path d="m13 17 5-5-5-5"></path>
+								<path d="m6 17 5-5-5-5"></path>
+							</svg>
+						</button>
+					{/if}
+				</div>
+			</div>
+		</div>
+	{/if}
+
 	<div class={wrapperClasses}>
 		<table class={tableClasses}>
 			<thead class={theadClasses}>
 				<tr>
 					{#if selectable}
-						<th class={thClasses}>
+						<th class={cn(thClasses, 'text-center')}>
 							<input
 								type="checkbox"
 								onchange={() => {
@@ -175,12 +451,12 @@
 							{#if column.sortable}
 								<button
 									type="button"
-									class={sortButton()}
+									class={sortButtonBaseClass()}
 									onclick={() => toggleSort(column.sortKey || column.key)}
 									aria-label={`Sort by ${column.header}`}
 								>
 									{column.header}
-									<span class={sortIcon()}>
+									<span class={sortIconBaseClass()}>
 										{#if sortColumn === (column.sortKey || column.key)}
 											{#if sortDirection === 'asc'}
 												<svg
@@ -262,7 +538,7 @@
 							</div>
 						</td>
 					</tr>
-				{:else if paginatedData.length === 0}
+				{:else if getPaginatedData().length === 0}
 					<tr>
 						<td
 							colspan={selectable ? columns.length + 1 : columns.length}
@@ -272,18 +548,17 @@
 						</td>
 					</tr>
 				{:else}
-					{#each paginatedData as row, rowIndex (rowIndex)}
+					{#each getPaginatedData() as row, rowIndex}
 						<tr
-							class={cn(
-								trClasses,
-								rowclass(row, rowIndex),
-								selectable && isRowSelected(row) && 'bg-primary-100'
-							)}
+							class={cn(trClasses, rowclass(row, rowIndex), {
+								'bg-primary-100': selectable && isRowSelected(row),
+								'cursor-pointer': onrowclick
+							})}
 							onclick={() => handleRowClick(row, rowIndex)}
 							aria-selected={selectable && isRowSelected(row)}
 						>
 							{#if selectable}
-								<td class={tdClasses}>
+								<td class={cn(tdClasses, 'text-center')}>
 									<input
 										type="checkbox"
 										checked={isRowSelected(row)}
@@ -315,97 +590,199 @@
 								</td>
 							{/each}
 						</tr>
+						{#if expandedContent}
+							<tr class="expandedContent-row">
+								<td colspan={selectable ? columns.length + 1 : columns.length} class="border-0 p-0">
+									{@render expandedContent(row)}
+								</td>
+							</tr>
+						{/if}
 					{/each}
 				{/if}
 			</tbody>
 		</table>
 	</div>
 
-	{#if pagination && totalPages > 1}
+	{#if showPaginationControls && (paginationPosition === 'bottom' || paginationPosition === 'both')}
 		<div class={footerClasses}>
-			<div class={paginationClass}>
+			<div class={paginationClasses}>
 				<div class="flex items-center gap-2">
+					{#if showPageSize}
+						<div class="flex items-center gap-2">
+							<label for="table-page-size-bottom" class="text-default-500 text-sm">Show</label>
+							<select
+								id="table-page-size-bottom"
+								class="border-default-200 rounded-md border px-2 py-1 text-sm"
+								value={internalPageSize}
+								onchange={handlePageSizeChange}
+							>
+								{#each pageSizeOptions as option}
+									<option value={option}>{option}</option>
+								{/each}
+							</select>
+							<span class="text-default-500 text-sm">entries</span>
+						</div>
+					{/if}
 					<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
+						Showing {Math.min(
+							(internalCurrentPage - 1) * internalPageSize + 1,
+							effectiveTotalItems
+						)}
+						to {Math.min(internalCurrentPage * internalPageSize, effectiveTotalItems)} of {effectiveTotalItems}
+						entries
 					</span>
 				</div>
 
 				<div class="flex items-center gap-1">
+					{#if paginationTemplate === 'full'}
+						<!-- First page button -->
+						<button
+							type="button"
+							class={cn(
+								'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
+								internalCurrentPage === 1
+									? 'text-default-300 cursor-not-allowed'
+									: 'text-default-700 hover:bg-default-100'
+							)}
+							onclick={goToFirstPage}
+							disabled={internalCurrentPage === 1}
+							aria-label="First page"
+						>
+							<!-- Double Chevron Left SVG -->
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="h-4 w-4"
+							>
+								<path d="m11 17-5-5 5-5"></path>
+								<path d="m18 17-5-5 5-5"></path>
+							</svg>
+						</button>
+					{/if}
+
+					<!-- Previous page button -->
 					<button
 						type="button"
 						class={cn(
 							'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
-							currentPage === 1
+							internalCurrentPage === 1
 								? 'text-default-300 cursor-not-allowed'
 								: 'text-default-700 hover:bg-default-100'
 						)}
 						onclick={prevPage}
-						disabled={currentPage === 1}
+						disabled={internalCurrentPage === 1}
 						aria-label="Previous page"
 					>
+						<!-- Chevron Left SVG -->
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 20 20"
-							fill="currentColor"
-							class="h-5 w-5"
+							width="16"
+							height="16"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="h-4 w-4"
 						>
-							<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"
-							/>
+							<path d="m15 18-6-6 6-6"></path>
 						</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}
+					<!-- Page numbers -->
+					{#if paginationTemplate === 'full'}
+						{#each getPageNumbers() as pageNum}
 							<button
 								type="button"
 								class={cn(
 									'relative inline-flex items-center rounded-md px-3 py-1 text-sm font-medium',
-									currentPage === pageNum
+									internalCurrentPage === 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}
+								aria-current={internalCurrentPage === pageNum ? 'page' : undefined}
 							>
 								{pageNum}
 							</button>
-						{/if}
-					{/each}
+						{/each}
+					{:else}
+						<span class="text-default-500 px-2 text-sm">
+							Page {internalCurrentPage} of {totalPages}
+						</span>
+					{/if}
 
+					<!-- Next page button -->
 					<button
 						type="button"
 						class={cn(
 							'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
-							currentPage === totalPages
+							internalCurrentPage === totalPages
 								? 'text-default-300 cursor-not-allowed'
 								: 'text-default-700 hover:bg-default-100'
 						)}
 						onclick={nextPage}
-						disabled={currentPage === totalPages}
+						disabled={internalCurrentPage === totalPages}
 						aria-label="Next page"
 					>
+						<!-- Chevron Right SVG -->
 						<svg
 							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 20 20"
-							fill="currentColor"
-							class="h-5 w-5"
+							width="16"
+							height="16"
+							viewBox="0 0 24 24"
+							fill="none"
+							stroke="currentColor"
+							stroke-width="2"
+							stroke-linecap="round"
+							stroke-linejoin="round"
+							class="h-4 w-4"
 						>
-							<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"
-							/>
+							<path d="m9 18 6-6-6-6"></path>
 						</svg>
 					</button>
+
+					{#if paginationTemplate === 'full'}
+						<!-- Last page button -->
+						<button
+							type="button"
+							class={cn(
+								'relative inline-flex items-center rounded-md px-2 py-1 text-sm font-medium',
+								internalCurrentPage === totalPages
+									? 'text-default-300 cursor-not-allowed'
+									: 'text-default-700 hover:bg-default-100'
+							)}
+							onclick={goToLastPage}
+							disabled={internalCurrentPage === totalPages}
+							aria-label="Last page"
+						>
+							<!-- Double Chevron Right SVG -->
+							<svg
+								xmlns="http://www.w3.org/2000/svg"
+								width="16"
+								height="16"
+								viewBox="0 0 24 24"
+								fill="none"
+								stroke="currentColor"
+								stroke-width="2"
+								stroke-linecap="round"
+								stroke-linejoin="round"
+								class="h-4 w-4"
+							>
+								<path d="m13 17 5-5-5-5"></path>
+								<path d="m6 17 5-5-5-5"></path>
+							</svg>
+						</button>
+					{/if}
 				</div>
 			</div>
 		</div>