@softwareone/spi-sv5-library 1.16.1 → 1.17.0

package/dist/components/clipboard/Clipboard.svelte

@@ -0,0 +1,74 @@
+<script lang="ts">
+	import { Button, Input, addToast } from '../../index.js';
+
+	interface Props {
+		label?: string;
+		notification?: string;
+		iconOnly?: boolean;
+		value: string;
+	}
+
+	let { label, notification = label, iconOnly = false, value }: Props = $props();
+
+	const copyToClipboard = async (value: string, notification?: string) => {
+		await navigator.clipboard.writeText(value);
+		addToast({
+			message: `${notification || 'Item'} copied to clipboard.`,
+			type: 'neutral'
+		});
+	};
+</script>
+
+<div class={['clipboard', label && 'clipboard-labeled']}>
+	{#if label}
+		<span class="clipboard-label">{label}</span>
+	{/if}
+	<div class={[!iconOnly && 'clipboard-row-with-input']}>
+		{#if !iconOnly}
+			<div class="clipboard-input">
+				<Input
+					placeholder={label}
+					aria-label={label}
+					{value}
+					readonly
+					disableValidationColor
+				/>
+			</div>
+		{/if}
+		<Button
+			variant="outline"
+			aria-label={notification ?? label ?? 'Copy to clipboard'}
+			onclick={() => copyToClipboard(value, notification)}
+		>
+			<span class="material-icons" style:font-size="var(--spi-font-size-sm)"
+				>content_copy</span
+			>
+		</Button>
+	</div>
+</div>
+
+<style>
+	.clipboard {
+		width: 100%;
+	}
+
+	.clipboard-labeled {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spi-size-2);
+	}
+
+	.clipboard-label {
+		font-size: var(--spi-font-size-sm);
+		font-weight: var(--spi-font-weight-medium);
+	}
+
+	.clipboard-row-with-input {
+		display: flex;
+		gap: var(--spi-size-2);
+	}
+
+	.clipboard-input {
+		flex: 1;
+	}
+</style>

package/dist/components/clipboard/Clipboard.svelte.d.ts

@@ -0,0 +1,9 @@
+interface Props {
+    label?: string;
+    notification?: string;
+    iconOnly?: boolean;
+    value: string;
+}
+declare const Clipboard: import("svelte").Component<Props, {}, "">;
+type Clipboard = ReturnType<typeof Clipboard>;
+export default Clipboard;

package/dist/components/index.d.ts

@@ -3,6 +3,7 @@ export { default as Avatar } from './avatar/Avatar.svelte';
 export { default as Button } from './button/Button.svelte';
 export { default as Card } from './card/Card.svelte';
 export { default as Chips } from './chips/Chips.svelte';
+export { default as Clipboard } from './clipboard/Clipboard.svelte';
 export { default as ConfirmationModal } from './confirmation/Confirmation.svelte';
 export { default as AttachFile } from './controls/attach-file/AttachFile.svelte';
 export { default as Input } from './controls/input/Input.svelte';

package/dist/components/index.js

@@ -3,6 +3,7 @@ export { default as Avatar } from './avatar/Avatar.svelte';
 export { default as Button } from './button/Button.svelte';
 export { default as Card } from './card/Card.svelte';
 export { default as Chips } from './chips/Chips.svelte';
+export { default as Clipboard } from './clipboard/Clipboard.svelte';
 export { default as ConfirmationModal } from './confirmation/Confirmation.svelte';
 export { default as AttachFile } from './controls/attach-file/AttachFile.svelte';
 export { default as Input } from './controls/input/Input.svelte';

package/dist/components/table/Table.svelte

@@ -1,9 +1,11 @@
 <script lang="ts" generics="T extends object">
+	import { browser } from '$app/environment';
 	import { goto } from '$app/navigation';
 	import { page } from '$app/state';
-	import { type Snippet } from 'svelte';
+	import { onMount, type Snippet } from 'svelte';
 
 	import { Button, Search } from '../../index.js';
+	import { LocalStorage } from '../../utils/local-storage.js';
 	import {
 		createSvelteTable,
 		getCoreRowModel,
@@ -40,7 +42,8 @@
 		createCheckedColumn,
 		isCursorPagination,
 		isValidPage,
-		isValidPageSize
+		isValidPageSize,
+		sanitizeFilters
 	} from './utils.js';
 
 	interface BaseProps<T> {
@@ -54,6 +57,8 @@
 		enableColumnSearch?: boolean;
 		enableColumnVisibility?: boolean;
 		enableAdvancedFilter?: boolean;
+		stickyFilter?: boolean;
+		stickyFilterKey?: string;
 		serverSide?: boolean;
 		pagination?: Pagination;
 		initialPage?: number;
@@ -101,6 +106,8 @@
 		enableColumnSearch = false,
 		enableColumnVisibility = true,
 		enableAdvancedFilter = false,
+		stickyFilter = false,
+		stickyFilterKey,
 		serverSide = false,
 		pagination,
 		initialPage,
@@ -118,6 +125,7 @@
 	}: Props<T> = $props();
 
 	const tableManualPagination = serverSide ? setPaginationTableContext() : undefined;
+	const STICKY_FILTER_STORAGE_PREFIX = 'spi-table-sticky-filters';
 
 	let globalFilter = $state<string>('');
 	let sorting = $state<SortingState>([]);
@@ -272,17 +280,58 @@
 		rowSelection = {};
 	};
 
+	const getStickyFilterStorageKey = () => {
+		const key = stickyFilterKey?.trim() ? stickyFilterKey : page.url.pathname;
+		return `${STICKY_FILTER_STORAGE_PREFIX}:${key}`;
+	};
+
+	const isStickyFilterActive = () => browser && stickyFilter;
+
+	const readStickyFilterValues = (): string[] =>
+		isStickyFilterActive()
+			? (LocalStorage.getItem<string[]>(getStickyFilterStorageKey()) ?? [])
+			: [];
+
+	const writeStickyFilterValues = (filters: string[]) => {
+		if (!isStickyFilterActive()) return;
+
+		const storageKey = getStickyFilterStorageKey();
+		if (!filters.length) {
+			LocalStorage.removeItem(storageKey);
+		} else {
+			LocalStorage.setItem(storageKey, filters);
+		}
+	};
+
+	const restoreStickyFilters = () => {
+		if (!isStickyFilterActive() || !enableAdvancedFilter) return;
+
+		const currentFilters = page.url.searchParams.getAll('filter');
+		if (currentFilters.length) {
+			writeStickyFilterValues(sanitizeFilters(currentFilters).map(buildFilterValue));
+			return;
+		}
+
+		const storedFilters = sanitizeFilters(readStickyFilterValues()).map(buildFilterValue);
+		if (!storedFilters.length) return;
+
+		const searchParams = new URLSearchParams(page.url.searchParams);
+		storedFilters.forEach((filterValue) => {
+			searchParams.append('filter', filterValue);
+		});
+
+		goto(buildUrl(searchParams), { replaceState: true, noScroll: true, keepFocus: true });
+	};
+
 	const changeFilters = (filters: Filter[]) => {
 		const searchParams = new URLSearchParams(page.url.searchParams);
 		searchParams.delete('filter');
 
-		filters.forEach((filter) => {
-			const filterValue = buildFilterValue(filter);
-			searchParams.append('filter', filterValue);
-		});
+		const filterValues = filters.map(buildFilterValue);
+		filterValues.forEach((filterValue) => searchParams.append('filter', filterValue));
 
-		const url = buildUrl(searchParams);
-		goto(url);
+		writeStickyFilterValues(filterValues);
+		goto(buildUrl(searchParams));
 	};
 
 	const buildFilterValue = (filter: Filter) => {
@@ -295,6 +344,13 @@
 		return queryString ? `${page.url.pathname}?${queryString}` : page.url.pathname;
 	};
 
+	$effect(() => {
+		columnFilters = sanitizeFilters(page.url.searchParams.getAll('filter')).map((filter) => ({
+			id: filter.column,
+			value: filter.value
+		}));
+	});
+
 	$effect(() => {
 		if (serverSide && pagination) {
 			$tableManualPagination = { ...pagination };
@@ -310,6 +366,10 @@
 		if (!enableChecked) return;
 		onclearselection?.(clearSelection);
 	});
+
+	onMount(() => {
+		restoreStickyFilters();
+	});
 </script>
 
 <section class="table-container">

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

@@ -13,6 +13,8 @@ interface BaseProps<T> {
     enableColumnSearch?: boolean;
     enableColumnVisibility?: boolean;
     enableAdvancedFilter?: boolean;
+    stickyFilter?: boolean;
+    stickyFilterKey?: string;
     serverSide?: boolean;
     pagination?: Pagination;
     initialPage?: number;

package/dist/utils/index.d.ts

@@ -1 +1,2 @@
+export * from './local-storage.js';
 export * from './url.js';

package/dist/utils/index.js

@@ -1 +1,2 @@
+export * from './local-storage.js';
 export * from './url.js';

package/dist/utils/local-storage.d.ts

@@ -0,0 +1,6 @@
+export declare const LocalStorage: {
+    readonly getItem: <T>(key: string) => T | null;
+    readonly setItem: <T>(key: string, value: T, expiresInMs?: number) => void;
+    readonly removeItem: (key: string) => void;
+    readonly clear: () => void;
+};

package/dist/utils/local-storage.js

@@ -0,0 +1,26 @@
+export const LocalStorage = {
+    getItem: (key) => {
+        const item = localStorage.getItem(key);
+        if (item === null)
+            return null;
+        const cachedItem = JSON.parse(item);
+        if (cachedItem.expiresAt && Date.now() > cachedItem.expiresAt) {
+            localStorage.removeItem(key);
+            return null;
+        }
+        return cachedItem.value;
+    },
+    setItem: (key, value, expiresInMs) => {
+        const stored = {
+            value,
+            expiresAt: expiresInMs ? Date.now() + expiresInMs : undefined
+        };
+        localStorage.setItem(key, JSON.stringify(stored));
+    },
+    removeItem: (key) => {
+        localStorage.removeItem(key);
+    },
+    clear: () => {
+        localStorage.clear();
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@softwareone/spi-sv5-library",
-	"version": "1.16.1",
+	"version": "1.17.0",
 	"description": "Svelte components",
 	"keywords": [
 		"svelte",