@softwareone/spi-sv5-library 1.14.3 → 1.15.0

package/dist/components/table/Header.svelte

@@ -25,7 +25,7 @@
 	};
 </script>
 
-<thead class="container">
+<thead>
 	{#each headerGroups as headerGroup (headerGroup.id)}
 		<tr class="table-header-row">
 			{#each headerGroup.headers as header (header.id)}
@@ -42,6 +42,7 @@
 					colSpan={header.colSpan}
 					class={[
 						'table-header-cell',
+						'spi-text-bold-2',
 						className,
 						isActive && 'table-header-cell--active'
 					]}
@@ -54,7 +55,7 @@
 						<button
 							type="button"
 							class={[
-								'table-header-button',
+								'table-header-button spi-text-bold-2',
 								canSort && 'table-header-button--sortable',
 								!canSort && 'table-header-button--disabled'
 							]}
@@ -74,7 +75,7 @@
 
 							{#if canSort}
 								<div class="table-header-sort-icon">
-									<span class="material-icons"
+									<span class="material-icons spi-text-regular-2"
 										>{getSortIcon[header.column.getIsSorted().toString()]}</span
 									>
 								</div>
@@ -82,13 +83,18 @@
 
 							{#if isFiltered}
 								<div class="table-header-filtered-icon">
-									<span class="material-icons-outlined">filter_alt</span>
+									<span class="material-icons-outlined spi-text-regular-2"
+										>filter_alt</span
+									>
 								</div>
 							{/if}
 						</button>
 
 						{#if enableColumnSearch && !hideColumnFilter}
-							<div class="table-header-search" style:justify-content={justifyContent}>
+							<div
+								class="table-header-search spi-text-regular-1"
+								style:justify-content={justifyContent}
+							>
 								<Search
 									oninput={({ currentTarget }) =>
 										header.column.setFilterValue(currentTarget.value)}
@@ -105,42 +111,24 @@
 </thead>
 
 <style>
-	.container {
-		--color-primary: #472aff;
-		--color-primary-light: #eaecff;
-		--color-black: #000000;
-		--color-gray-100: #f3f4f6;
-		--color-gray-200: #e5e7eb;
-		--color-gray-300: #e0e5e8;
-		--spacing-xs: 4px;
-		--spacing-sm: 8px;
-		--spacing-md: 16px;
-		--font-size-xs: 12px;
-		--font-size-sm: 14px;
-		--font-bold: 700;
-		--font-normal: 400;
-	}
-
 	.table-header-cell:first-child {
-		border-left: 0.5px solid var(--color-gray-300);
+		border-left: 0.5px solid var(--spi-color-border-default);
 	}
 
 	.table-header-cell {
-		padding: var(--spacing-sm) var(--spacing-md);
-		border-right: 0.5px solid var(--color-gray-300);
-		border-bottom: 2px solid var(--color-black);
+		padding: var(--spi-size-2) 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);
-		font-weight: var(--font-bold);
 	}
 
 	.table-header-cell:hover {
-		background: var(--color-gray-100);
+		background: var(--spi-color-surface-subtle);
 	}
 
 	.table-header-cell--active {
-		background: var(--color-primary-light);
-		color: var(--color-primary);
+		background: var(--spi-color-primary-lighter);
+		color: var(--spi-color-primary-base);
 	}
 
 	.table-header-button {
@@ -151,8 +139,6 @@
 		padding: 0;
 		border: none;
 		background: none;
-		font-size: inherit;
-		font-weight: inherit;
 		color: inherit;
 	}
 
@@ -169,7 +155,7 @@
 	}
 
 	.table-header-label--sortable {
-		margin-right: 16px;
+		margin-right: var(--spi-size-4);
 	}
 
 	@media (max-width: 750px) {
@@ -181,7 +167,7 @@
 	.table-header-sort-icon {
 		position: absolute;
 		right: -8px;
-		margin-top: 4px;
+		margin-top: var(--spi-size-1);
 	}
 
 	.table-header-sort-icon:has(+ .table-header-filtered-icon) {
@@ -191,23 +177,16 @@
 	.table-header-filtered-icon {
 		position: absolute;
 		right: -13px;
-		margin-top: 4px;
-	}
-
-	.table-header-sort-icon .material-icons,
-	.material-icons-outlined {
-		font-size: var(--font-size-sm);
+		margin-top: var(--spi-size-1);
 	}
 
 	.table-header-search {
 		display: flex;
 		min-width: 144px;
-		margin: var(--spacing-xs) 0;
-		font-weight: var(--font-normal);
+		margin: var(--spi-size-1) 0;
 	}
 
 	.table-header-search :global(.search-input) {
-		padding: var(--spacing-xs) 36px;
-		font-size: var(--font-size-xs);
+		padding: var(--spi-size-1) var(--spi-size-9);
 	}
 </style>

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>