@softwareone/spi-sv5-library 1.10.4 → 1.11.0

package/dist/Table/AdvancedFilter.svelte

@@ -0,0 +1,385 @@
+<script lang="ts" generics="T">
+	import { page } from '$app/state';
+
+	import { Button, Input, Select, type SelectOption } from '../index.js';
+	import type { Column } from './adapter/index.js';
+	import { Operator } from './consts.js';
+	import { type Filter } from './types.js';
+
+	interface Props {
+		columns: Column<T, unknown>[];
+		onfilterschange?: (filters: Filter[]) => void;
+	}
+
+	let { columns, onfilterschange }: Props = $props();
+
+	let isOpen = $state(false);
+	let editingFilters = $state<Filter[]>([]);
+	const operatorOptions: Operator[] = Object.values(Operator);
+
+	const filters = $derived.by<Filter[]>(() => {
+		const filterParams = page.url.searchParams.getAll('filter');
+		return filterParams
+			.filter((param) => param.trim())
+			.map(parseFilterParam)
+			.filter((filter): filter is Filter => filter !== null);
+	});
+
+	const hasActiveFilters = $derived(filters.length > 0);
+	const columnOptions = $derived<SelectOption[]>(
+		columns
+			.filter((column) => !column.columnDef.meta?.hideColumnFilter)
+			.map((column) => ({
+				value: column.id,
+				label: (column.columnDef.header as string) || column.id
+			}))
+	);
+
+	const addFilterRow = () => {
+		editingFilters = [...editingFilters, { column: '', value: '', operator: Operator.And }];
+	};
+
+	const removeFilterRow = (index: number) => {
+		const remainingFilters = editingFilters.filter((_, filterIndex) => filterIndex !== index);
+
+		editingFilters =
+			remainingFilters.length === 1
+				? [{ ...remainingFilters[0], operator: undefined }]
+				: remainingFilters;
+	};
+
+	const applyFilters = () => {
+		const validFilters = getValidFilters();
+		handleFilters(validFilters);
+	};
+
+	const clearAllFilters = () => {
+		editingFilters = [];
+		handleFilters(editingFilters);
+	};
+
+	const handleFilters = (filters: Filter[]) => {
+		onfilterschange?.(filters);
+		isOpen = false;
+	};
+
+	const toggleModal = () => {
+		isOpen = !isOpen;
+		isOpen ? initializeEditingFilters() : clearFilters();
+	};
+
+	const initializeEditingFilters = () => {
+		if (!editingFilters.length) {
+			editingFilters = filters.length
+				? filters.map((filter) => ({ ...filter }))
+				: [{ column: '', value: '', operator: undefined }];
+		}
+	};
+
+	const clearFilters = () => {
+		const validFilters = getValidFilters();
+		if (validFilters.length === 0 && filters.length > 0) {
+			clearAllFilters();
+		}
+	};
+
+	const getValidFilters = () => {
+		return editingFilters.filter((filter) => filter.column && filter.value.trim());
+	};
+
+	const parseFilterParam = (filterValue: string) => {
+		const parts = filterValue.split(':');
+		if (parts.length === 3) return parseSimpleFilter(parts);
+		if (parts.length === 4) return parseOperatorFilter(parts);
+		return null;
+	};
+
+	const parseSimpleFilter = (parts: string[]): Filter | null => {
+		const [column, operator, value] = parts;
+		return isValidFilter(column, operator, value) ? { column, value, operator: undefined } : null;
+	};
+
+	const parseOperatorFilter = (parts: string[]): Filter | null => {
+		const [operator, column, eq, value] = parts;
+		return isValidFilter(column, eq, value) && isValidOperator(operator)
+			? { column, value, operator }
+			: null;
+	};
+
+	const isValidFilter = (column: string, operator: string, value: string) => {
+		return operator === 'eq' && !!column && !!value;
+	};
+
+	const isValidOperator = (operator: string): operator is Operator => {
+		return operatorOptions.includes(operator as Operator);
+	};
+</script>
+
+<div class="filter-container">
+	<button
+		type="button"
+		class={['filter-button', hasActiveFilters && 'filter-button--active']}
+		onclick={toggleModal}
+	>
+		<span class="material-icons">filter_list</span>
+		{#if hasActiveFilters}
+			<strong>{filters.length} {filters.length === 1 ? 'Filter' : 'Filters'}</strong>
+		{:else}
+			<p>Filters</p>
+		{/if}
+	</button>
+
+	{#if isOpen}
+		<button
+			type="button"
+			class="filter-overlay"
+			onclick={toggleModal}
+			aria-label="Close filter modal"
+		></button>
+
+		<div
+			class="filter-modal"
+			role="dialog"
+			tabindex="-1"
+			aria-modal="true"
+			aria-labelledby="filter-dialog-title"
+		>
+			<div class="filter-header">
+				<h2 id="filter-dialog-title" class="filter-title">Filters</h2>
+				<button type="button" onclick={toggleModal} class="filter-close-button" aria-label="Close">
+					<span class="material-icons">close</span>
+				</button>
+			</div>
+
+			<div class="filter-body">
+				{#each editingFilters as filter, index (index)}
+					<div class="filter-row">
+						{#if index > 0}
+							<div class="filter-operator">
+								<Select
+									options={operatorOptions}
+									disableValidationColor
+									bind:value={filter.operator}
+									hideClearButton
+								/>
+							</div>
+						{:else}
+							<div class="filter-operator"></div>
+						{/if}
+
+						<div class="filter-column">
+							<Select
+								options={columnOptions}
+								disableValidationColor
+								bind:value={filter.column}
+								placeholder="Select column"
+								searchable
+							/>
+						</div>
+
+						<div class="filter-value">
+							<Input
+								id="filter-value-{index}"
+								disableValidationColor
+								type="text"
+								bind:value={filter.value}
+								placeholder="Enter value"
+							/>
+						</div>
+
+						<button
+							type="button"
+							onclick={() => removeFilterRow(index)}
+							class="filter-delete-button"
+							aria-label="Remove filter"
+						>
+							<span class="material-icons-outlined">delete</span>
+						</button>
+					</div>
+				{/each}
+
+				<div class="filter-actions">
+					<Button variant="outline-none" type="button" onclick={addFilterRow}>Add condition</Button>
+					{#if editingFilters.length}
+						<Button variant="outline-none" type="button" onclick={clearAllFilters}>
+							Reset filters
+						</Button>
+					{/if}
+				</div>
+			</div>
+
+			{#if editingFilters.length}
+				<div class="filter-footer">
+					<Button
+						onclick={applyFilters}
+						disabled={editingFilters.every((filter) => !filter.column || !filter.value.trim())}
+					>
+						Apply Filters
+					</Button>
+				</div>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.filter-container {
+		--color-primary: #472aff;
+		--color-primary-light: #eaecff;
+		--color-white: #fff;
+		--color-text-primary: #25282d;
+		--color-text-dark: #111827;
+		--color-text-secondary: #6b7280;
+		--color-text-hover: #374151;
+		--color-bg-hover: #f4f6f8;
+		--color-border: #e5e7eb;
+		--spacing-xs: 4px;
+		--spacing-sm: 8px;
+		--spacing-md: 12px;
+		--spacing-lg: 16px;
+		--spacing-xl: 24px;
+		--font-size-sm: 14px;
+		--font-size-md: 18px;
+		--font-size-icon: 20px;
+		--border-radius-sm: 8px;
+		--border-radius-circle: 50%;
+		--button-size: 40px;
+		--delete-button-size: 48px;
+		--modal-width: 640px;
+		--operator-column-width: 80px;
+		--transition-speed: 0.2s;
+
+		position: relative;
+	}
+
+	.filter-button {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-sm);
+		padding: var(--spacing-sm) var(--spacing-lg);
+		border: none;
+		border-radius: var(--border-radius-sm);
+		background: var(--color-white);
+		font-size: var(--font-size-sm);
+		color: var(--color-text-primary);
+		cursor: pointer;
+		transition: background-color var(--transition-speed) ease-in-out;
+	}
+
+	.filter-button:hover {
+		background: var(--color-bg-hover);
+	}
+
+	.filter-button--active {
+		background: var(--color-primary-light);
+		color: var(--color-primary);
+	}
+
+	.filter-overlay {
+		position: fixed;
+		inset: 0;
+		z-index: 9;
+		background: transparent;
+		border: none;
+		cursor: default;
+	}
+
+	.filter-modal {
+		position: absolute;
+		top: calc(100% + var(--spacing-sm));
+		right: 0;
+		z-index: 10;
+		width: var(--modal-width);
+		padding: var(--spacing-xl);
+		border: 1px solid var(--color-border);
+		border-radius: var(--border-radius-sm);
+		background: var(--color-white);
+		box-shadow:
+			0 10px 15px -3px rgba(0, 0, 0, 0.1),
+			0 4px 6px -2px rgba(0, 0, 0, 0.05);
+	}
+
+	.filter-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: var(--spacing-xl);
+	}
+
+	.filter-title {
+		font-size: var(--font-size-md);
+		font-weight: 600;
+		color: var(--color-text-dark);
+	}
+
+	.filter-close-button {
+		display: flex;
+		align-items: center;
+		padding: var(--spacing-xs);
+		border: none;
+		background: transparent;
+		color: var(--color-text-secondary);
+		cursor: pointer;
+		transition: color var(--transition-speed) ease-in-out;
+	}
+
+	.filter-close-button:hover {
+		color: var(--color-text-hover);
+	}
+
+	.filter-body {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-lg);
+	}
+
+	.filter-row {
+		display: grid;
+		grid-template-columns: var(--operator-column-width) 1fr 1fr var(--delete-button-size);
+		align-items: end;
+		gap: var(--spacing-md);
+	}
+
+	.filter-operator,
+	.filter-column,
+	.filter-value {
+		display: flex;
+	}
+
+	.filter-delete-button {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: var(--spacing-sm);
+		border: none;
+		background: transparent;
+		color: var(--color-text-primary);
+		border-radius: var(--border-radius-circle);
+		width: var(--button-size);
+		height: var(--button-size);
+		cursor: pointer;
+		transition: background-color var(--transition-speed) ease-in-out;
+	}
+
+	.filter-delete-button:hover {
+		background: var(--color-bg-hover);
+	}
+
+	.filter-actions {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-top: var(--spacing-sm);
+	}
+
+	.filter-footer {
+		display: flex;
+		justify-content: flex-end;
+		margin-top: var(--spacing-lg);
+	}
+
+	.material-icons,
+	.material-icons-outlined {
+		font-size: var(--font-size-icon);
+	}
+</style>

package/dist/Table/AdvancedFilter.svelte.d.ts

@@ -0,0 +1,29 @@
+import type { Column } from './adapter/index.js';
+import { type Filter } from './types.js';
+declare function $$render<T>(): {
+    props: {
+        columns: Column<T, unknown>[];
+        onfilterschange?: (filters: Filter[]) => void;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const AdvancedFilter: $$IsomorphicComponent;
+type AdvancedFilter<T> = InstanceType<typeof AdvancedFilter<T>>;
+export default AdvancedFilter;

package/dist/Table/Header.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" generics="T extends RowData">
+	import { page } from '$app/state';
+
 	import { Search } from '../index.js';
 	import { FlexRender, type HeaderGroup, type RowData } from './adapter/index.js';
 
@@ -7,13 +9,24 @@
 		enableColumnSearch: boolean;
 	}
 
+	let { headerGroups, enableColumnSearch }: Props = $props();
+
 	const getSortIcon: Record<string, string> = {
 		asc: 'arrow_upward',
 		desc: 'arrow_downward',
 		false: 'swap_vert'
 	};
 
-	let { headerGroups, enableColumnSearch }: Props = $props();
+	const isColumnFiltered = (columnId: string): boolean => {
+		const filterParams = page.url.searchParams.getAll('filter');
+		return filterParams.some((filterValue) => {
+			const parts = filterValue.split(':');
+			return (
+				(parts.length === 3 && parts[0] === columnId) ||
+				(parts.length === 4 && parts[1] === columnId)
+			);
+		});
+	};
 </script>
 
 <thead class="container">
@@ -27,9 +40,11 @@
 				{@const hideColumnFilter = header.column.columnDef.meta?.hideColumnFilter}
 				{@const justifyContent = alignColumn ?? 'left'}
 				{@const isSorted = header.column.getIsSorted().toString() !== 'false'}
+				{@const isFiltered = isColumnFiltered(header.column.id)}
+				{@const isActive = isSorted || isFiltered}
 				<th
 					colSpan={header.colSpan}
-					class={['table-header-cell', className, isSorted && 'table-header-cell--sorted']}
+					class={['table-header-cell', className, isActive && 'table-header-cell--active']}
 					style:width={columnWidth}
 					style={columnStyle}
 				>
@@ -61,6 +76,12 @@
 									>
 								</div>
 							{/if}
+
+							{#if isFiltered}
+								<div class="table-header-filtered-icon">
+									<span class="material-icons-outlined">filter_alt</span>
+								</div>
+							{/if}
 						</button>
 
 						{#if enableColumnSearch && !hideColumnFilter}
@@ -82,6 +103,7 @@
 <style>
 	.container {
 		--color-primary: #472aff;
+		--color-primary-light: #eaecff;
 		--color-black: #000000;
 		--color-gray-100: #f3f4f6;
 		--color-gray-200: #e5e7eb;
@@ -112,8 +134,8 @@
 		background: var(--color-gray-100);
 	}
 
-	.table-header-cell--sorted {
-		background: var(--color-gray-200);
+	.table-header-cell--active {
+		background: var(--color-primary-light);
 		color: var(--color-primary);
 	}
 
@@ -158,7 +180,18 @@
 		margin-top: 4px;
 	}
 
-	.table-header-sort-icon .material-icons {
+	.table-header-sort-icon:has(+ .table-header-filtered-icon) {
+		right: 0;
+	}
+
+	.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);
 	}
 

package/dist/Table/Table.svelte

@@ -1,4 +1,6 @@
 <script lang="ts" generics="T">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
 	import { type Snippet } from 'svelte';
 
 	import { Button, Search } from '../index.js';
@@ -18,6 +20,7 @@
 		type Updater,
 		type VisibilityState
 	} from './adapter/index.js';
+	import AdvancedFilter from './AdvancedFilter.svelte';
 	import Body from './Body.svelte';
 	import ColumnVisibilityDropdown from './ColumnVisibilityDropdown.svelte';
 	import { DEFAULT_MIN_PAGE_LIMIT, DEFAULT_PAGE_LIMIT } from './consts.js';
@@ -27,8 +30,8 @@
 	import Footer from './Footer.svelte';
 	import Header from './Header.svelte';
 	import Skeleton from './Skeleton.svelte';
-	import type { Pagination } from './types.js';
-	import { createCheckedColumn } from './util.js';
+	import { type Filter, type Pagination } from './types.js';
+	import { createCheckedColumn, getPage, getPageLimit } from './util.js';
 
 	interface Props {
 		columns: ColumnDef<T, any>[];
@@ -40,6 +43,7 @@
 		enableGlobalSearch?: boolean;
 		enableColumnSearch?: boolean;
 		enableColumnVisibility?: boolean;
+		enableAdvancedFilter?: boolean;
 		manualPagination?: boolean;
 		pagination?: Pagination;
 		excelSetting?: ExcelSetting;
@@ -59,6 +63,7 @@
 		enableGlobalSearch = true,
 		enableColumnSearch = false,
 		enableColumnVisibility = true,
+		enableAdvancedFilter = false,
 		manualPagination = false,
 		pagination,
 		excelSetting = {
@@ -71,33 +76,6 @@
 		bulkActions
 	}: Props = $props();
 
-	const getInitialColumnVisibility = (): VisibilityState => {
-		const visibility: VisibilityState = {};
-		columns.forEach((column) => {
-			const columnId =
-				column.id ?? ('accessorKey' in column ? String(column.accessorKey) : undefined);
-			if (columnId && column.meta?.isVisible === false) {
-				visibility[columnId] = false;
-			}
-		});
-		return visibility;
-	};
-
-	const getInitialPaginationState = (): PaginationState => {
-		if (!manualPagination) {
-			return {
-				pageIndex: 0,
-				pageSize: minPageSize ? DEFAULT_MIN_PAGE_LIMIT : DEFAULT_PAGE_LIMIT
-			};
-		}
-
-		const pageSize = DEFAULT_PAGE_LIMIT;
-		const pageIndex = 0;
-
-		return { pageIndex, pageSize };
-	};
-
-	const tableManualPagination = manualPagination ? setPaginationTableContext() : undefined;
 	let globalFilter = $state<string>('');
 	let sorting = $state<SortingState>([]);
 	let columnFilters = $state<ColumnFiltersState>([]);
@@ -106,6 +84,8 @@
 	let columnVisibility = $state<VisibilityState>(getInitialColumnVisibility());
 	let paginationState = $state<PaginationState>(getInitialPaginationState());
 	let tableData = $derived(data);
+	const tableManualPagination = manualPagination ? setPaginationTableContext() : undefined;
+	const hasData = $derived(data.length > 0);
 
 	const table = createSvelteTable({
 		get data() {
@@ -172,7 +152,37 @@
 		sortDescFirst: false
 	});
 
-	const changeManualPagination = (updatedPaginationState: PaginationState) => {
+	const hasFilteredRows = $derived(table.getRowModel().rows.length > 0);
+	const selectedRows = $derived(table.getSelectedRowModel().rows);
+
+	function getInitialColumnVisibility(): VisibilityState {
+		const visibility: VisibilityState = {};
+		columns.forEach((column) => {
+			const columnId =
+				column.id ?? ('accessorKey' in column ? String(column.accessorKey) : undefined);
+			if (columnId && column.meta?.isVisible === false) {
+				visibility[columnId] = false;
+			}
+		});
+		return visibility;
+	}
+
+	function getInitialPaginationState(): PaginationState {
+		if (!manualPagination) {
+			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 pageIndex = Math.max(0, currentPage - 1);
+
+		return { pageIndex, pageSize };
+	}
+
+	function changeManualPagination(updatedPaginationState: PaginationState) {
 		const pageSizeChanged = updatedPaginationState.pageSize !== paginationState.pageSize;
 
 		if (pageSizeChanged) {
@@ -182,11 +192,30 @@
 			const currentPageNumber = updatedPaginationState.pageIndex + 1;
 			onpagechange?.(updatedPaginationState.pageSize, currentPageNumber);
 		}
+	}
+
+	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 url = buildUrl(searchParams);
+		goto(url);
 	};
 
-	const hasData = $derived(data.length > 0);
-	const hasFilteredRows = $derived(table.getRowModel().rows.length > 0);
-	const selectedRows = $derived(table.getSelectedRowModel().rows);
+	const buildFilterValue = (filter: Filter) => {
+		const operator = filter.operator ? `${filter.operator}:` : '';
+		return `${operator}${filter.column}:eq:${filter.value}`;
+	};
+
+	const buildUrl = (searchParams: URLSearchParams) => {
+		const queryString = searchParams.toString();
+		return queryString ? `${page.url.pathname}?${queryString}` : page.url.pathname;
+	};
 
 	$effect(() => {
 		if (manualPagination && pagination) {
@@ -216,8 +245,16 @@
 			]}
 		>
 			{#if enableGlobalSearch}
-				<div class="table-search">
-					<Search bind:value={globalFilter} />
+				<div class="table-search-container">
+					<div class="table-search">
+						<Search bind:value={globalFilter} />
+					</div>
+					{#if enableAdvancedFilter}
+						<AdvancedFilter
+							columns={table.getAllLeafColumns().filter((column) => column.getCanHide())}
+							onfilterschange={changeFilters}
+						/>
+					{/if}
 				</div>
 			{/if}
 
@@ -303,6 +340,12 @@
 		width: var(--search-width);
 	}
 
+	.table-search-container {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-md);
+	}
+
 	.table-actions {
 		display: flex;
 		gap: var(--spacing-md);

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

@@ -1,7 +1,7 @@
 import { type Snippet } from 'svelte';
 import { type ColumnDef } from './adapter/index.js';
 import type { ExcelSetting } from './excel-setting.js';
-import type { Pagination } from './types.js';
+import { type Pagination } from './types.js';
 declare function $$render<T>(): {
     props: {
         columns: ColumnDef<T, any>[];
@@ -13,6 +13,7 @@ declare function $$render<T>(): {
         enableGlobalSearch?: boolean;
         enableColumnSearch?: boolean;
         enableColumnVisibility?: boolean;
+        enableAdvancedFilter?: boolean;
         manualPagination?: boolean;
         pagination?: Pagination;
         excelSetting?: ExcelSetting;