@softwareone/spi-sv5-library 1.16.0 → 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/controls/select/Select.svelte

@@ -362,7 +362,7 @@
 {#snippet removeButton(event: VoidFunction)}
 	<button
 		type="button"
-		class="clear-button"
+		class="clear-button spi-text-regular-2"
 		onclick={(e) => {
 			e.stopPropagation();
 			event();

package/dist/components/header/Header.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { AnnouncementItem, MenuItem } from '../../index.js';
+	import type { AnnouncementItem, MainMenu, MenuItem } from '../../index.js';
 	import Announcement from '../announcement/Announcement.svelte';
 	import Menu from '../menu/Menu.svelte';
 	import Waffle from '../waffle/Waffle.svelte';
@@ -17,7 +17,7 @@
 		userName?: string;
 		hideLoader?: boolean;
 		hideAnnouncement?: boolean;
-		menuItems?: MenuItem[];
+		menuItems?: MainMenu[];
 		waffleItems?: WaffleItem[];
 		profileMenuItems?: MenuItem[];
 		announcementItems?: AnnouncementItem[];

package/dist/components/header/Header.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { AnnouncementItem, MenuItem } from '../../index.js';
+import type { AnnouncementItem, MainMenu, MenuItem } from '../../index.js';
 import type { WaffleItem } from '../waffle/types.js';
 interface Props {
     title?: string;
@@ -9,7 +9,7 @@ interface Props {
     userName?: string;
     hideLoader?: boolean;
     hideAnnouncement?: boolean;
-    menuItems?: MenuItem[];
+    menuItems?: MainMenu[];
     waffleItems?: WaffleItem[];
     profileMenuItems?: MenuItem[];
     announcementItems?: AnnouncementItem[];

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/menu/Menu.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
+	import { page } from '$app/state';
 	import { fade } from 'svelte/transition';
 
-	import { existRoute, getFirstPathSegment, getNormalizedPathname } from '../../utils/index.js';
+	import { existRoute, getSectionPrefix } from '../../utils/index.js';
 	import MainMenuItem from './MenuItem.svelte';
-	import type { MenuItem } from './types.js';
+	import type { MainMenu } from './types.js';
+	import { hasMenuItems } from './utils.js';
 
 	interface Props {
-		menuItems: MenuItem[];
+		menuItems: MainMenu[];
 		showMenu: boolean;
 	}
 
@@ -15,14 +17,13 @@
 	let activeItem = $state('');
 
 	const setActiveMenuItem = () => {
-		activeItem =
-			menuItems.find((menuItem: MenuItem) => isActiveMenuItem(menuItem.url))?.text || '';
+		activeItem = menuItems.find((menu) => isActiveMenuItem(menu))?.text || '';
 	};
 
-	const isActiveMenuItem = (url: string) => {
-		const pathname = getNormalizedPathname();
-		const firstPathSegment = getFirstPathSegment(pathname);
-		return existRoute(firstPathSegment, url);
+	const isActiveMenuItem = (menu: MainMenu): boolean => {
+		const pathname = page.url.pathname;
+		const routeToMatch = hasMenuItems(menu.children) ? getSectionPrefix(menu.url) : menu.url;
+		return existRoute(routeToMatch, pathname);
 	};
 
 	const onHandleMenu = () => {

package/dist/components/menu/Menu.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { MenuItem } from './types.js';
+import type { MainMenu } from './types.js';
 interface Props {
-    menuItems: MenuItem[];
+    menuItems: MainMenu[];
     showMenu: boolean;
 }
 declare const Menu: import("svelte").Component<Props, {}, "showMenu">;

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

@@ -1,2 +1,3 @@
 import type { MainMenu, SubMenuItem } from './types.js';
+export declare const hasMenuItems: (children?: SubMenuItem[]) => boolean;
 export declare const getSubMenuItemsFromMenu: (items: MainMenu[], excludedRoutes?: string[]) => SubMenuItem[];

package/dist/components/menu/utils.js

@@ -1,11 +1,16 @@
-import { existRoute, getFirstPathSegment, getNormalizedPathname } from '../../utils/index.js';
+import { page } from '$app/state';
+import { existRoute, getSectionPrefix } from '../../utils/index.js';
+export const hasMenuItems = (children) => {
+    return Boolean(children?.some((child) => child.menuItems.length));
+};
 export const getSubMenuItemsFromMenu = (items, excludedRoutes) => {
-    const pathname = getNormalizedPathname();
+    const pathname = page.url.pathname;
     if (excludedRoutes?.includes(pathname))
         return [];
-    const firstPathSegment = getFirstPathSegment(pathname);
     const matchedMenu = items.find((menu) => {
-        return existRoute(firstPathSegment, menu.url);
+        if (!hasMenuItems(menu.children))
+            return false;
+        return existRoute(getSectionPrefix(menu.url), pathname);
     });
     return matchedMenu?.children ?? [];
 };

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/dist/utils/url.d.ts

@@ -1,3 +1,2 @@
-export declare const getNormalizedPathname: () => string;
-export declare const getFirstPathSegment: (pathname: string) => string;
+export declare const getSectionPrefix: (url: string) => string;
 export declare const existRoute: (url: string, pathname: string) => boolean;

package/dist/utils/url.js

@@ -1,17 +1,9 @@
-import { base } from '$app/paths';
-import { page } from '$app/state';
-const normalizePathname = (path) => path.replace(/^\/v\d+\//, '/');
-export const getNormalizedPathname = () => {
-    const pathname = page.url.pathname;
-    const withoutBase = base && pathname.startsWith(base) ? pathname.slice(base.length) : pathname;
-    return normalizePathname(withoutBase);
-};
-export const getFirstPathSegment = (pathname) => {
-    const matchedPath = /^\/[^/]+/.exec(pathname);
-    return matchedPath?.[0] ?? '/';
+export const getSectionPrefix = (url) => {
+    const segments = url.split('/');
+    segments.pop();
+    return segments.join('/') || '/';
 };
 export const existRoute = (url, pathname) => {
-    const normalizedPathname = normalizePathname(pathname);
-    const regex = new RegExp(`^${url}(?![\\w-])`);
-    return regex.test(normalizedPathname);
+    const regex = new RegExp(String.raw `^${url}(?![\w-])`);
+    return regex.test(pathname);
 };

package/package.json

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