@softwareone/spi-sv5-library 1.14.4 → 1.15.0

package/dist/components/table/PageSize.svelte

@@ -33,7 +33,7 @@
 		<div class="page-size-selector">
 			<span>Rows per page:</span>
 			<select
-				class="page-size-select"
+				class="page-size-select spi-text-semibold-2"
 				name="rows-per-page"
 				id="rows-per-page"
 				title="Rows per page"
@@ -43,7 +43,9 @@
 				}}
 			>
 				{#each DEFAULT_ITEMS_PER_PAGE_OPTIONS as itemPerPage (itemPerPage)}
-					<option class="page-size-option" value={itemPerPage}>{itemPerPage}</option>
+					<option class="page-size-option spi-text-medium-2" value={itemPerPage}
+						>{itemPerPage}</option
+					>
 				{/each}
 			</select>
 		</div>
@@ -55,31 +57,19 @@
 
 <style>
 	.page-size {
-		--color-black: #000000;
-		--color-primary: #472aff;
-		--color-gray-100: #f3f4f6;
-		--color-gray-200: #e5e7eb;
-		--color-border: #ebedef;
-		--spacing-sm: 8px;
-		--spacing-md: 12px;
-		--spacing-lg: 24px;
-		--radius-lg: 8px;
-		--font-medium: 500;
-		--font-semibold: 600;
-
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		gap: var(--spacing-lg);
+		gap: var(--spi-size-6);
 	}
 
 	@media (max-width: 750px) {
 		.page-size {
-			margin-top: 20px;
+			margin-top: var(--spi-size-5);
 		}
 
 		.page-size--margin {
-			margin-left: 12px;
+			margin-left: var(--spi-size-3);
 		}
 	}
 
@@ -90,17 +80,16 @@
 	}
 
 	.page-size-select {
-		width: 64px;
-		padding: var(--spacing-sm);
-		border-radius: var(--radius-lg);
-		font-weight: var(--font-semibold);
+		width: var(--spi-size-16);
+		padding: var(--spi-size-2);
+		border-radius: var(--spi-rounded-lg);
 		cursor: pointer;
 		border: none;
 		background: transparent;
 	}
 
 	.page-size-select:hover {
-		background: var(--color-gray-100);
+		background: var(--spi-color-surface-subtle);
 	}
 
 	.page-size-select:focus {
@@ -108,25 +97,24 @@
 	}
 
 	.page-size-option {
-		gap: 20px;
-		padding: 4px 16px;
-		font-weight: var(--font-medium);
-		border-right: 2px solid var(--color-border);
-		border-left: 2px solid var(--color-border);
+		gap: var(--spi-size-5);
+		padding: var(--spi-size-1) var(--spi-size-4);
+		border-right: var(--spi-border-2) solid var(--spi-color-border-default);
+		border-left: var(--spi-border-2) solid var(--spi-color-border-default);
 	}
 
 	.page-size-option:hover {
-		background: var(--color-gray-200);
+		background: var(--spi-color-surface-muted);
 	}
 
 	.page-size-option:first-of-type {
-		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
-		border-top: 2px solid var(--color-border);
+		border-radius: var(--spi-rounded-lg) var(--spi-rounded-lg) 0 0;
+		border-top: var(--spi-border-2) solid var(--spi-color-border-default);
 	}
 
 	.page-size-option:last-of-type {
-		border-radius: 0 0 var(--radius-lg) var(--radius-lg);
-		border-bottom: 2px solid var(--color-border);
+		border-radius: 0 0 var(--spi-rounded-lg) var(--spi-rounded-lg);
+		border-bottom: var(--spi-border-2) solid var(--spi-color-border-default);
 	}
 
 	select,
@@ -137,12 +125,12 @@
 	select::picker-icon {
 		content: '\e5e1';
 		font-family: 'Material Icons';
-		color: var(--color-black);
+		color: var(--spi-color-text-primary);
 		margin-left: 5px;
 		display: inline-flex;
 		align-items: center;
 		transform: rotate(90deg);
-		transition: transform 0.4s ease;
+		transition: transform var(--spi-duration-slow) var(--spi-ease-default);
 	}
 
 	option::checkmark {
@@ -150,7 +138,7 @@
 		font-family: 'Material Icons';
 		order: 1;
 		margin-left: auto;
-		color: var(--color-primary);
+		color: var(--spi-color-primary-base);
 	}
 
 	select:open::picker-icon {
@@ -159,6 +147,6 @@
 
 	::picker(select) {
 		border: none;
-		border-radius: var(--radius-lg);
+		border-radius: var(--spi-rounded-lg);
 	}
 </style>

package/dist/components/table/Pagination.svelte

@@ -1,6 +1,8 @@
 <script lang="ts" generics="T">
 	import { Tooltip } from '../../index.js';
 	import type { Table } from './adapter/index.js';
+	import { getPaginationTableContext } from './context.js';
+	import { isCursorPagination } from './utils.js';
 
 	interface Props {
 		table: Table<T>;
@@ -8,7 +10,13 @@
 
 	let { table }: Props = $props();
 
+	const paginationTable = getPaginationTableContext();
+
 	const initialPage = $derived(table.getState().pagination.pageIndex + 1);
+	const isCursorPaginationEnabled = $derived(
+		$paginationTable && isCursorPagination($paginationTable)
+	);
+	const hasMultiplePages = $derived(table.getPageCount() > 2);
 
 	const handlePaginationChange = (event: Event) => {
 		const input = event.currentTarget as HTMLInputElement;
@@ -37,18 +45,30 @@
 </script>
 
 <div class="pagination">
+	{#if hasMultiplePages}
+		<Tooltip content="First page" width="xs" position="bottom">
+			<button
+				type="button"
+				class="pagination-button spi-text-regular-2"
+				onclick={() => table.setPageIndex(0)}
+				disabled={!table.getCanPreviousPage()}
+			>
+				<span class="pagination-icon material-icons spi-text-regular-5">first_page</span>
+			</button>
+		</Tooltip>
+	{/if}
 	<button
 		type="button"
-		class="pagination-button"
+		class="pagination-button spi-text-regular-2"
 		onclick={() => table.previousPage()}
 		disabled={!table.getCanPreviousPage()}
 	>
-		<span class="pagination-icon material-icons">arrow_back</span>
+		<span class="pagination-icon material-icons spi-text-regular-2">arrow_back</span>
 		<span>Previous</span>
 	</button>
 	<div class="pagination-info">
 		<span>Page</span>
-		{#if table.getPageCount() > 1}
+		{#if !isCursorPaginationEnabled && table.getPageCount() > 1}
 			<Tooltip content="Enter page number" width="sm" position="bottom">
 				<input
 					type="text"
@@ -66,80 +86,74 @@
 
 	<button
 		type="button"
-		class="pagination-button"
+		class="pagination-button spi-text-regular-2"
 		onclick={() => table.nextPage()}
 		disabled={!table.getCanNextPage()}
 	>
 		<span>Next</span>
-		<span class="pagination-icon material-icons">arrow_forward</span>
+		<span class="pagination-icon material-icons spi-text-regular-2">arrow_forward</span>
 	</button>
+	{#if hasMultiplePages}
+		<Tooltip content="Last page" width="xs" position="bottom">
+			<button
+				type="button"
+				class="pagination-button spi-text-regular-2"
+				onclick={() => table.setPageIndex(table.getPageCount() - 1)}
+				disabled={isCursorPaginationEnabled || !table.getCanNextPage()}
+			>
+				<span class="pagination-icon material-icons spi-text-regular-5">last_page</span>
+			</button>
+		</Tooltip>
+	{/if}
 </div>
 
 <style>
 	.pagination {
-		--color-primary: #472aff;
-		--color-gray-300: #d1d5db;
-		--color-gray-500: #6b7280;
-		--color-text: #000000;
-		--spacing-sm: 8px;
-		--spacing-md: 12px;
-		--spacing-lg: 24px;
-		--radius-lg: 8px;
-		--font-size-sm: 14px;
-		--font-size-icon: 14px;
-		--input-height: 37px;
-		--input-width: 38px;
-
 		display: flex;
 		align-items: center;
 		justify-content: center;
-		gap: var(--spacing-lg);
-		padding: var(--spacing-sm) 0;
+		gap: var(--spi-size-6);
+		padding: var(--spi-size-2) 0;
 	}
 
 	.pagination-button {
 		display: flex;
 		align-items: center;
-		gap: var(--spacing-sm);
+		gap: var(--spi-size-2);
 		padding: 0;
 		border: none;
 		background: none;
-		font-size: var(--font-size-sm);
-		color: var(--color-text);
+		color: var(--spi-color-text-primary);
 		cursor: pointer;
 	}
 
 	.pagination-button:disabled {
-		color: var(--color-gray-300);
+		color: var(--spi-color-text-disabled);
 		cursor: not-allowed;
 	}
 
-	.pagination-icon {
-		font-size: var(--font-size-icon);
-	}
-
 	.pagination-info {
 		display: flex;
 		align-items: center;
-		gap: var(--spacing-sm);
+		gap: var(--spi-size-2);
 	}
 
 	.pagination-input {
-		height: var(--input-height);
-		width: var(--input-width);
+		height: var(--spi-size-9);
+		width: var(--spi-size-9);
 		padding: 0;
-		border: 1px solid var(--color-gray-500);
-		border-radius: var(--radius-lg);
+		border: var(--spi-border-1) solid var(--spi-color-border-strong);
+		border-radius: var(--spi-rounded-lg);
 		text-align: center;
 		cursor: pointer;
 	}
 
 	.pagination-input:hover {
-		border-color: var(--color-primary);
+		border-color: var(--spi-color-primary-base);
 	}
 
 	.pagination-input:focus {
-		border: 1px solid var(--color-primary);
+		border: var(--spi-border-1) solid var(--spi-color-primary-base);
 		outline: none;
 	}
 </style>

package/dist/components/table/RowCheckBox.svelte

@@ -9,23 +9,16 @@
 	let { indeterminate = false, checked, disabled = false, onchange }: Props = $props();
 </script>
 
-<input
-	type="checkbox"
-	class="accent-magentablue"
-	{disabled}
-	{onchange}
-	{checked}
-	bind:indeterminate
-/>
+<input type="checkbox" class="row-checkbox" {disabled} {onchange} {checked} bind:indeterminate />
 
 <style>
-	.accent-magentablue {
-		accent-color: #472aff;
+	.row-checkbox {
+		accent-color: var(--spi-color-primary-base);
 		cursor: pointer;
 	}
 
-	.accent-magentablue:disabled {
+	.row-checkbox:disabled {
 		cursor: not-allowed;
-		opacity: 0.5;
+		opacity: var(--spi-opacity-disabled);
 	}
 </style>

package/dist/components/table/Skeleton.svelte

@@ -12,7 +12,7 @@
 		<thead>
 			<tr>
 				{#each Array(columns).keys() as index (index)}
-					<th class="table-skeleton-header">
+					<th class="table-skeleton-header spi-text-regular-2">
 						<div class="table-skeleton-header-placeholder"></div>
 					</th>
 				{/each}
@@ -34,15 +34,7 @@
 
 <style>
 	.table-skeleton {
-		--color-black: #000;
-		--color-gray-300: #d1d5db;
-		--spacing-md: 12px;
-		--spacing-lg: 16px;
-		--font-size-sm: 14px;
 		--skeleton-width: 150px;
-		--skeleton-header-height: 18px;
-		--skeleton-cell-height: 16px;
-		--radius-lg: 8px;
 
 		overflow-x: auto;
 		overflow-y: hidden;
@@ -54,11 +46,10 @@
 	}
 
 	.table-skeleton-header {
-		padding: var(--spacing-md) var(--spacing-lg);
-		border-right: 0.5px solid var(--color-gray-300);
-		border-bottom: 2px solid var(--color-black);
+		padding: var(--spi-size-3) var(--spi-size-4);
+		border-right: 0.5px solid var(--spi-color-border-default);
+		border-bottom: var(--spi-border-2) solid var(--spi-color-text-primary);
 		text-align: left;
-		font-size: var(--font-size-sm);
 	}
 
 	.table-skeleton-header:last-child {
@@ -66,33 +57,33 @@
 	}
 
 	.table-skeleton-header-placeholder {
-		height: var(--skeleton-header-height);
+		height: 18px;
 		width: var(--skeleton-width);
-		background: var(--color-gray-300);
-		border-radius: var(--radius-lg);
-		animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+		background: var(--spi-color-neutral-light);
+		border-radius: var(--spi-rounded-lg);
+		animation: pulse 2s var(--spi-ease-in-out) infinite;
 	}
 
 	.table-skeleton-cell {
-		padding: var(--spacing-md) var(--spacing-lg);
-		border-bottom: 2px solid var(--color-gray-300);
+		padding: var(--spi-size-3) var(--spi-size-4);
+		border-bottom: var(--spi-border-2) solid var(--spi-color-border-default);
 	}
 
 	.table-skeleton-cell-placeholder {
-		height: var(--skeleton-cell-height);
+		height: var(--spi-size-4);
 		width: var(--skeleton-width);
-		background: var(--color-gray-300);
-		border-radius: var(--radius-lg);
-		animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+		background: var(--spi-color-neutral-light);
+		border-radius: var(--spi-rounded-lg);
+		animation: pulse 2s var(--spi-ease-in-out) infinite;
 	}
 
 	@keyframes pulse {
 		0%,
 		100% {
-			opacity: 1;
+			opacity: var(--spi-opacity-100);
 		}
 		50% {
-			opacity: 0.5;
+			opacity: var(--spi-opacity-50);
 		}
 	}
 </style>

package/dist/components/table/Table.svelte

@@ -23,7 +23,12 @@
 	import AdvancedFilter from './AdvancedFilter.svelte';
 	import Body from './Body.svelte';
 	import ColumnVisibilityDropdown from './ColumnVisibilityDropdown.svelte';
-	import { DEFAULT_MIN_PAGE_LIMIT, DEFAULT_PAGE_LIMIT, Operator } from './consts.js';
+	import {
+		DEFAULT_MIN_PAGE_LIMIT,
+		DEFAULT_PAGE,
+		DEFAULT_PAGE_LIMIT,
+		Operator
+	} from './consts.js';
 	import { setPaginationTableContext } from './context.js';
 	import type { ExcelSetting } from './excel-setting.js';
 	import exportExcel from './excel.js';
@@ -31,7 +36,12 @@
 	import Header from './Header.svelte';
 	import Skeleton from './Skeleton.svelte';
 	import { type Filter, type Pagination } from './types.js';
-	import { createCheckedColumn, getPage, getPageLimit } from './utils.js';
+	import {
+		createCheckedColumn,
+		isCursorPagination,
+		isValidPage,
+		isValidPageSize
+	} from './utils.js';
 
 	interface Props {
 		columns: ColumnDef<T, any>[];
@@ -45,13 +55,17 @@
 		enableColumnSearch?: boolean;
 		enableColumnVisibility?: boolean;
 		enableAdvancedFilter?: boolean;
-		manualPagination?: boolean;
+		serverSide?: boolean;
 		pagination?: Pagination;
+		initialPage?: number;
+		initialPageSize?: number;
 		excelSetting?: ExcelSetting;
 		header?: Snippet;
 		bulkActions?: Snippet<[selectedRows: T[], clearSelection: VoidFunction]>;
 		onpagechange?: (pageSize: number, pageNumber: number) => void;
 		onpagesizechange?: (pageSize: number) => void;
+		onnextpage?: (pageSize: number, pageNumber: number) => void;
+		onprevpage?: (pageSize: number, pageNumber: number) => void;
 	}
 
 	let {
@@ -66,14 +80,18 @@
 		enableColumnSearch = false,
 		enableColumnVisibility = true,
 		enableAdvancedFilter = false,
-		manualPagination = false,
+		serverSide = false,
 		pagination,
+		initialPage,
+		initialPageSize,
 		excelSetting = {
 			fileName: 'Table',
 			exportAllColumns: false
 		},
 		onpagechange,
 		onpagesizechange,
+		onnextpage,
+		onprevpage,
 		header,
 		bulkActions
 	}: Props = $props();
@@ -86,7 +104,7 @@
 	let columnVisibility = $state<VisibilityState>(getInitialColumnVisibility());
 	let paginationState = $state<PaginationState>(getInitialPaginationState());
 	let tableData = $derived(data);
-	const tableManualPagination = manualPagination ? setPaginationTableContext() : undefined;
+	const tableManualPagination = serverSide ? setPaginationTableContext() : undefined;
 	const hasData = $derived(data.length > 0);
 
 	const tableColumns = $derived.by(() => {
@@ -160,7 +178,7 @@
 		getSortedRowModel: getSortedRowModel(),
 		getExpandedRowModel: getExpandedRowModel(),
 		getSubRows: (row) => ('children' in row ? (row.children as T[]) : undefined),
-		manualPagination,
+		manualPagination: serverSide,
 		paginateExpandedRows: false,
 		enableColumnFilters: true,
 		sortDescFirst: false
@@ -182,28 +200,34 @@
 	}
 
 	function getInitialPaginationState(): PaginationState {
-		if (!manualPagination) {
+		if (!serverSide) {
 			return {
 				pageIndex: 0,
 				pageSize: minPageSize ? DEFAULT_MIN_PAGE_LIMIT : DEFAULT_PAGE_LIMIT
 			};
 		}
 
-		const currentPage = getPage(page.url.searchParams);
-		const pageSize = getPageLimit(page.url.searchParams);
+		const currentPage = isValidPage(initialPage) ? initialPage : DEFAULT_PAGE;
+		const pageSize = isValidPageSize(initialPageSize) ? initialPageSize : undefined;
+
 		const pageIndex = Math.max(0, currentPage - 1);
 
-		return { pageIndex, pageSize };
+		return { pageIndex, pageSize: pageSize ?? DEFAULT_PAGE_LIMIT };
 	}
 
 	function changeManualPagination(updatedPaginationState: PaginationState) {
 		const pageSizeChanged = updatedPaginationState.pageSize !== paginationState.pageSize;
+		const currentPageNumber = updatedPaginationState.pageIndex + 1;
 
 		if (pageSizeChanged) {
 			updatedPaginationState.pageIndex = 0;
 			onpagesizechange?.(updatedPaginationState.pageSize);
+		} else if (pagination && isCursorPagination(pagination)) {
+			const isNext = updatedPaginationState.pageIndex > paginationState.pageIndex;
+			const handler = isNext ? onnextpage : onprevpage;
+
+			handler?.(updatedPaginationState.pageSize, currentPageNumber);
 		} else {
-			const currentPageNumber = updatedPaginationState.pageIndex + 1;
 			onpagechange?.(updatedPaginationState.pageSize, currentPageNumber);
 		}
 	}
@@ -236,7 +260,7 @@
 	};
 
 	$effect(() => {
-		if (manualPagination && pagination) {
+		if (serverSide && pagination) {
 			$tableManualPagination = { ...pagination };
 		}
 	});
@@ -292,7 +316,7 @@
 		</header>
 
 		{#if enableChecked && (keepVisibleBulkActions || selectedRows.length > 0)}
-			<div class="table-bulk-actions">
+			<div class="table-bulk-actions spi-text-regular-2">
 				<p>
 					{selectedRows.length} of {table.getCoreRowModel().rows.length} items are selected
 				</p>
@@ -316,9 +340,9 @@
 		</article>
 
 		{#if !hasData}
-			<p class="table-message table-message--error">No data available</p>
+			<p class="table-message table-message--error spi-text-regular-5">No data available</p>
 		{:else if !hasFilteredRows}
-			<p class="table-message table-message--error">No items found</p>
+			<p class="table-message table-message--error spi-text-regular-5">No items found</p>
 		{/if}
 
 		{#if hasData}
@@ -329,16 +353,6 @@
 
 <style>
 	.table-container {
-		--color-red-600: #dc2626;
-		--color-gray-300: #d1d5db;
-		--color-gray: #6b7180;
-		--font-size-sm: 14px;
-		--spacing-md: 16px;
-		--spacing-lg: 24px;
-		--spacing-xl: 40px;
-		--font-size-xl: 20px;
-		--search-width: 491px;
-
 		width: 100%;
 	}
 
@@ -356,44 +370,43 @@
 	}
 
 	.table-search {
-		width: var(--search-width);
+		width: 491px;
 	}
 
 	.table-search-container {
 		display: flex;
 		align-items: center;
-		gap: var(--spacing-md);
+		gap: var(--spi-size-4);
 	}
 
 	.table-actions {
 		display: flex;
-		gap: var(--spacing-md);
+		gap: var(--spi-size-4);
 	}
 
 	.table-bulk-actions {
 		display: flex;
 		align-items: center;
-		gap: 8px;
-		font-size: var(--font-size-sm);
-		margin-top: var(--spacing-md);
+		gap: var(--spi-size-2);
+		margin-top: var(--spi-size-4);
 	}
 
 	.action-divider {
 		border: none;
-		border-left: 1px solid var(--color-gray);
+		border-left: var(--spi-border-1) solid var(--spi-color-border-strong);
 		margin: 0;
 		height: 15px;
 	}
 
 	.table-article {
-		margin: var(--spacing-md) 0;
-		padding-right: 12px;
+		margin: var(--spi-size-4) 0;
+		padding-right: var(--spi-size-3);
 		overflow-x: auto;
 		overflow-y: hidden;
 	}
 
 	.table-article--padding {
-		padding-bottom: var(--spacing-md);
+		padding-bottom: var(--spi-size-4);
 	}
 
 	.table-main {
@@ -402,12 +415,11 @@
 	}
 
 	.table-message {
-		margin-top: var(--spacing-xl);
+		margin-top: var(--spi-size-10);
 		text-align: center;
-		font-size: var(--font-size-xl);
 	}
 
 	.table-message--error {
-		color: var(--color-red-600);
+		color: var(--spi-color-text-danger);
 	}
 </style>

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

@@ -15,13 +15,17 @@ declare function $$render<T extends object>(): {
         enableColumnSearch?: boolean;
         enableColumnVisibility?: boolean;
         enableAdvancedFilter?: boolean;
-        manualPagination?: boolean;
+        serverSide?: boolean;
         pagination?: Pagination;
+        initialPage?: number;
+        initialPageSize?: number;
         excelSetting?: ExcelSetting;
         header?: Snippet;
         bulkActions?: Snippet<[selectedRows: T[], clearSelection: VoidFunction]>;
         onpagechange?: (pageSize: number, pageNumber: number) => void;
         onpagesizechange?: (pageSize: number) => void;
+        onnextpage?: (pageSize: number, pageNumber: number) => void;
+        onprevpage?: (pageSize: number, pageNumber: number) => void;
     };
     exports: {};
     bindings: "";