@softwareone/spi-sv5-library 1.14.3 → 1.15.0

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: "";

package/dist/components/table/types.d.ts

@@ -6,13 +6,21 @@ export interface Action {
     isMainAction?: boolean;
     onClick: VoidFunction;
 }
-export interface Pagination {
+interface BasePagination {
     totalItems: number;
     totalPages: number;
+}
+export interface PagePagination extends BasePagination {
     currentPage: number;
 }
+export interface CursorPagination extends BasePagination {
+    nextCursor?: string | null;
+    prevCursor?: string | null;
+}
+export type Pagination = PagePagination | CursorPagination;
 export interface Filter {
     column: string;
     value: string;
     operation?: Operation;
 }
+export {};

package/dist/components/table/utils.d.ts

@@ -1,8 +1,12 @@
 import { type ColumnDef, type Row } from './adapter/index.js';
-import type { Action, Filter } from './types.js';
+import type { Action, CursorPagination, Filter, PagePagination, Pagination } from './types.js';
 export declare const createCheckedColumn: <T>() => import("./adapter/index.js").DisplayColumnDef<T, unknown>;
 export declare const createActionsColumn: <T>(getActions: (row: Row<T>) => Action[]) => import("./adapter/index.js").DisplayColumnDef<T, unknown>;
 export declare const createStaticTable: <TData>(columns: ColumnDef<TData, any>[], data: TData[]) => import("./adapter/index.js").Table<TData>;
+export declare const isValidPage: (value: number | undefined) => value is number;
+export declare const isValidPageSize: (value: number | undefined) => value is number;
 export declare const getPageLimit: (urlSearchParams: URLSearchParams) => number;
 export declare const getPage: (urlSearchParams: URLSearchParams) => number;
 export declare const sanitizeFilters: (filterParams: string[]) => Filter[];
+export declare const isPagePagination: (pagination: Pagination) => pagination is PagePagination;
+export declare const isCursorPagination: (pagination: Pagination) => pagination is CursorPagination;

package/dist/components/table/utils.js

@@ -58,17 +58,15 @@ export const createStaticTable = (columns, data) => {
         renderFallbackValue: null
     });
 };
+export const isValidPage = (value) => value !== undefined && Number.isInteger(value) && value > 0;
+export const isValidPageSize = (value) => value !== undefined && DEFAULT_ITEMS_PER_PAGE_OPTIONS.includes(value);
 export const getPageLimit = (urlSearchParams) => {
-    const limitParam = urlSearchParams.get('limit');
-    const limit = Number(limitParam);
-    const isLimitValid = !Number.isNaN(limit) && DEFAULT_ITEMS_PER_PAGE_OPTIONS.includes(limit);
-    return isLimitValid ? limit : DEFAULT_PAGE_LIMIT;
+    const limit = Number(urlSearchParams.get('limit'));
+    return isValidPageSize(limit) ? limit : DEFAULT_PAGE_LIMIT;
 };
 export const getPage = (urlSearchParams) => {
-    const pageParam = urlSearchParams.get('page');
-    const page = Number(pageParam);
-    const isPageValid = pageParam && !Number.isNaN(page) && page > 0;
-    return isPageValid ? page : DEFAULT_PAGE;
+    const page = Number(urlSearchParams.get('page'));
+    return isValidPage(page) ? page : DEFAULT_PAGE;
 };
 export const sanitizeFilters = (filterParams) => {
     return filterParams
@@ -100,3 +98,5 @@ const isValidFilter = (column, operator, value) => {
 const isValidOperation = (operation) => {
     return Object.values(Operation).includes(operation);
 };
+export const isPagePagination = (pagination) => 'currentPage' in pagination;
+export const isCursorPagination = (pagination) => 'nextCursor' in pagination || 'prevCursor' in pagination;

package/dist/components/tabs/Tabs.svelte

@@ -30,7 +30,7 @@
 					aria-controls="panel-{tab.index}"
 					tabindex={isActiveTab ? 0 : -1}
 					type="button"
-					class:active={isActiveTab}
+					class={isActiveTab ? 'active spi-text-semibold-3' : 'spi-text-medium-3'}
 					onclick={handleClick(tab.index)}
 				>
 					{tab.label}
@@ -42,7 +42,7 @@
 	{#each tabs as tab, index (index)}
 		{#if activeTab === tab.index}
 			<div
-				class={['tabs-content', !tab.disablePadding && 'padding']}
+				class={['tabs-content', 'spi-text-regular-4', !tab.disablePadding && 'padding']}
 				id="panel-{tab.index}"
 				role="tabpanel"
 				aria-labelledby="tab-{tab.index}"
@@ -67,40 +67,37 @@
 
 	.tabs-list {
 		display: flex;
-		gap: 16px;
-		border-bottom: 1px solid #e0e5e8;
-		padding: 0 24px;
+		gap: var(--spi-size-4);
+		border-bottom: var(--spi-border-1) solid var(--spi-color-border-default);
+		padding: 0 var(--spi-size-6);
 	}
 
 	.tabs-list button {
-		border-radius: 8px;
-		background-color: #fff;
-		padding: 20px 16px 20px;
+		border-radius: var(--spi-rounded-lg);
+		background-color: var(--spi-color-surface-default);
+		padding: var(--spi-size-5) var(--spi-size-4);
 		position: relative;
 		border: none;
-		font-size: 16px;
-		font-weight: 500;
 	}
 
 	.tabs-list button:hover {
-		background-color: #f4f6f8;
+		background-color: var(--spi-color-surface-subtle);
 		cursor: pointer;
 	}
 
 	.tabs-list button.active {
-		color: #472aff;
-		font-weight: 600;
+		color: var(--spi-color-primary-base);
 	}
 
 	.tabs-list button::after {
 		content: '';
 		position: absolute;
 		left: 50%;
-		bottom: -2px;
+		bottom: calc(-1 * var(--spi-border-2));
 		width: 0;
-		height: 4px;
-		background-color: #472aff;
-		border-radius: 8px;
+		height: var(--spi-size-1);
+		background-color: var(--spi-color-primary-base);
+		border-radius: var(--spi-rounded-lg);
 		transform: translateX(-50%);
 	}
 
@@ -113,15 +110,14 @@
 		width: 100%;
 		height: 100%;
 		position: relative;
-		border-radius: 0px 0px 16px 16px;
+		border-radius: 0 0 var(--spi-rounded-2xl) var(--spi-rounded-2xl);
 		overflow-wrap: break-word;
 		box-sizing: border-box;
 		min-height: 300px;
 		text-align: left;
-		font-size: 18px;
 	}
 
 	.padding {
-		padding: 24px;
+		padding: var(--spi-size-6);
 	}
 </style>

package/dist/components/toast/Toast.svelte

@@ -28,7 +28,7 @@
 			<div class="toast" in:fly={transitionConfig} out:fly={transitionConfig}>
 				<span class="status-indicator {toast.type}"></span>
 				<div class="toast-content-container">
-					<div class="toast-content">
+					<div class="toast-content spi-text-regular-2">
 						<span>{toast.message}</span>
 						{#if toast.link}
 							<a class="toast-content-link" href={toast.link} title="View details"
@@ -53,12 +53,12 @@
 <style>
 	.toast-container {
 		position: fixed;
-		top: 96px;
-		right: 16px;
+		top: var(--spi-size-24);
+		right: var(--spi-size-4);
 		z-index: 9999;
 		display: flex;
 		flex-direction: column;
-		gap: 16px;
+		gap: var(--spi-size-4);
 		align-items: flex-end;
 	}
 
@@ -66,17 +66,14 @@
 		min-width: 400px;
 		max-width: 600px;
 		width: fit-content;
-		min-height: 52px;
+		min-height: var(--spi-size-14);
 		display: inline-flex;
-		padding: 8px;
-		gap: 16px;
-		border-radius: 8px;
-		border: 1px solid #e0e5e8;
-		background: #fff;
-		box-shadow:
-			0px 4px 5px 0px rgba(51, 56, 64, 0.15),
-			0px 1px 3px 0px rgba(51, 56, 64, 0.2),
-			0px 1px 16px 0px rgba(51, 56, 64, 0.1);
+		padding: var(--spi-size-2);
+		gap: var(--spi-size-4);
+		border-radius: var(--spi-rounded-lg);
+		border: var(--spi-border-1) solid var(--spi-color-border-default);
+		background: var(--spi-color-surface-default);
+		box-shadow: var(--spi-shadow-card);
 	}
 
 	.toast-content {
@@ -84,55 +81,55 @@
 		justify-content: space-between;
 		flex-direction: row;
 		flex-wrap: wrap;
-		gap: 8px;
-		padding: 8px 0px;
-		font-size: 14px;
-		font-weight: 400;
-		line-height: 20px;
+		gap: var(--spi-size-2);
+		padding: var(--spi-size-2) 0;
 		align-items: center;
 	}
 
 	.toast-content-container {
 		display: flex;
 		align-items: center;
-		gap: 16px;
+		gap: var(--spi-size-4);
 		flex-grow: 1;
 	}
 
 	.status-indicator {
-		width: 8px;
+		width: var(--spi-size-2);
 		align-self: stretch;
 		flex-shrink: 0;
-		border-radius: 4px;
+		border-radius: var(--spi-rounded-sm);
 		background-color: var(--toast-bg);
 	}
 
 	.toast-content-link {
 		display: flex;
 		align-items: center;
-		color: #2b1999;
+		color: var(--spi-color-primary-darker);
 	}
 
 	.toast-content-link:hover {
-		color: #472aff;
+		color: var(--spi-color-primary-base);
 		text-decoration: underline;
 	}
 
 	.status-indicator.info {
-		--toast-bg: #472aff;
+		--toast-bg: var(--spi-color-primary-base);
 	}
 
 	.status-indicator.warning {
-		--toast-bg: #e87d1e;
+		--toast-bg: var(--spi-color-warning-base);
 	}
+
 	.status-indicator.danger {
-		--toast-bg: #dc182c;
+		--toast-bg: var(--spi-color-danger-base);
 	}
+
 	.status-indicator.neutral {
-		--toast-bg: #6b7180;
+		--toast-bg: var(--spi-color-neutral-base);
 	}
+
 	.status-indicator.success {
-		--toast-bg: #008556;
+		--toast-bg: var(--spi-color-success-base);
 	}
 
 	.toast-close-container {
@@ -147,7 +144,7 @@
 
 	.toast-close-button:hover {
 		cursor: pointer;
-		color: #434952;
+		color: var(--spi-color-text-secondary);
 	}
 
 	.toast-close-button:focus {

package/dist/components/tooltip/Tooltip.svelte

@@ -51,7 +51,7 @@
 
 	{#if isVisible && content}
 		<div
-			class="tooltip tooltip-{position} tooltip-{width} {customClass}"
+			class="tooltip tooltip-{position} tooltip-{width} {customClass} spi-text-regular-2"
 			in:fly={transitionConfig}
 			out:fly={transitionConfig}
 			role="tooltip"
@@ -76,15 +76,12 @@
 	.tooltip {
 		position: absolute;
 		z-index: 1000;
-		padding: 8px 12px;
-		border-radius: 6px;
-		font-size: 14px;
-		font-weight: 400;
-		line-height: 20px;
+		padding: var(--spi-size-2) var(--spi-size-3);
+		border-radius: var(--spi-rounded-md);
 		text-align: center;
 		pointer-events: none;
-		background-color: #25282d;
-		color: #ffffff;
+		background-color: var(--spi-color-neutral-darkest);
+		color: var(--spi-color-text-inverse);
 		white-space: normal;
 	}
 
@@ -101,66 +98,65 @@
 	}
 
 	.tooltip-top {
-		bottom: calc(100% + 12px);
+		bottom: calc(100% + var(--spi-size-3));
 		left: 50%;
 		transform: translateX(-50%);
 	}
 
 	.tooltip-bottom {
-		top: calc(100% + 12px);
+		top: calc(100% + var(--spi-size-3));
 		left: 50%;
 		transform: translateX(-50%);
 	}
 
 	.tooltip-left {
 		top: 50%;
-		right: calc(100% + 12px);
+		right: calc(100% + var(--spi-size-3));
 		transform: translateY(-50%);
 	}
 
 	.tooltip-right {
 		top: 50%;
-		left: calc(100% + 12px);
+		left: calc(100% + var(--spi-size-3));
 		transform: translateY(-50%);
 	}
 
 	.tooltip-arrow {
 		position: absolute;
-		border: 6px solid transparent;
+		border: var(--spi-border-5) solid transparent;
 	}
 
 	.tooltip-arrow-top {
 		top: 100%;
 		left: 50%;
 		transform: translateX(-50%);
-		border-top-color: #25282d;
+		border-top-color: var(--spi-color-neutral-darkest);
 	}
 
 	.tooltip-arrow-bottom {
 		bottom: 100%;
 		left: 50%;
 		transform: translateX(-50%);
-		border-bottom-color: #25282d;
+		border-bottom-color: var(--spi-color-neutral-darkest);
 	}
 
 	.tooltip-arrow-left {
 		top: 50%;
 		left: 100%;
 		transform: translateY(-50%);
-		border-left-color: #25282d;
+		border-left-color: var(--spi-color-neutral-darkest);
 	}
 
 	.tooltip-arrow-right {
 		top: 50%;
 		right: 100%;
 		transform: translateY(-50%);
-		border-right-color: #25282d;
+		border-right-color: var(--spi-color-neutral-darkest);
 	}
 
 	@media (max-width: 768px) {
 		.tooltip {
-			font-size: 11px;
-			padding: 6px 10px;
+			padding: var(--spi-size-1) var(--spi-size-2);
 		}
 	}
 </style>