@softwareone/spi-sv5-library 1.11.0 → 1.11.1

package/dist/Controls/AttachFile/AttachFile.svelte

@@ -223,13 +223,13 @@
 	}
 
 	.caption {
-		font-size: 16px;
+		font-size: 14px;
 		line-height: 24px;
 		color: var(--color-gray-outer);
 	}
 
 	.text-small {
-		font-size: 14px;
+		font-size: 12px;
 		line-height: 20px;
 		color: var(--color-gray-auro);
 		margin-top: 4px;
@@ -262,6 +262,7 @@
 
 	.file-select {
 		display: inline-block;
+		font-size: 14px;
 		background: var(--color-bg-select);
 		color: var(--color-text-select);
 		padding: var(--spacing-sm) var(--spacing-md);

package/dist/Table/AdvancedFilter.svelte

@@ -3,8 +3,9 @@
 
 	import { Button, Input, Select, type SelectOption } from '../index.js';
 	import type { Column } from './adapter/index.js';
-	import { Operator } from './consts.js';
+	import { Operation } from './consts.js';
 	import { type Filter } from './types.js';
+	import { sanitizeFilters } from './util.js';
 
 	interface Props {
 		columns: Column<T, unknown>[];
@@ -15,16 +16,8 @@
 
 	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 operationOptions: Operation[] = Object.values(Operation);
+	const filters = $derived(sanitizeFilters(page.url.searchParams.getAll('filter')));
 	const hasActiveFilters = $derived(filters.length > 0);
 	const columnOptions = $derived<SelectOption[]>(
 		columns
@@ -36,30 +29,30 @@
 	);
 
 	const addFilterRow = () => {
-		editingFilters = [...editingFilters, { column: '', value: '', operator: Operator.And }];
+		editingFilters = [...editingFilters, { column: '', value: '', operation: Operation.And }];
 	};
 
 	const removeFilterRow = (index: number) => {
 		const remainingFilters = editingFilters.filter((_, filterIndex) => filterIndex !== index);
-
-		editingFilters =
-			remainingFilters.length === 1
-				? [{ ...remainingFilters[0], operator: undefined }]
-				: remainingFilters;
+		editingFilters = normalizeFilters(remainingFilters);
 	};
 
 	const applyFilters = () => {
-		const validFilters = getValidFilters();
-		handleFilters(validFilters);
+		editingFilters = normalizeFilters(getValidFilters());
+		handleFilters();
+	};
+
+	const normalizeFilters = (filters: Filter[]) => {
+		return filters.length === 1 ? [{ ...filters[0], operation: undefined }] : filters;
 	};
 
 	const clearAllFilters = () => {
 		editingFilters = [];
-		handleFilters(editingFilters);
+		handleFilters();
 	};
 
-	const handleFilters = (filters: Filter[]) => {
-		onfilterschange?.(filters);
+	const handleFilters = () => {
+		onfilterschange?.(editingFilters);
 		isOpen = false;
 	};
 
@@ -72,7 +65,7 @@
 		if (!editingFilters.length) {
 			editingFilters = filters.length
 				? filters.map((filter) => ({ ...filter }))
-				: [{ column: '', value: '', operator: undefined }];
+				: [{ column: '', value: '', operation: undefined }];
 		}
 	};
 
@@ -86,33 +79,6 @@
 	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">
@@ -155,16 +121,16 @@
 				{#each editingFilters as filter, index (index)}
 					<div class="filter-row">
 						{#if index > 0}
-							<div class="filter-operator">
+							<div class="filter-operation">
 								<Select
-									options={operatorOptions}
+									options={operationOptions}
 									disableValidationColor
-									bind:value={filter.operator}
+									bind:value={filter.operation}
 									hideClearButton
 								/>
 							</div>
 						{:else}
-							<div class="filter-operator"></div>
+							<div class="filter-operation"></div>
 						{/if}
 
 						<div class="filter-column">
@@ -246,7 +212,7 @@
 		--button-size: 40px;
 		--delete-button-size: 48px;
 		--modal-width: 640px;
-		--operator-column-width: 80px;
+		--operation-column-width: 80px;
 		--transition-speed: 0.2s;
 
 		position: relative;
@@ -335,12 +301,12 @@
 
 	.filter-row {
 		display: grid;
-		grid-template-columns: var(--operator-column-width) 1fr 1fr var(--delete-button-size);
+		grid-template-columns: var(--operation-column-width) 1fr 1fr var(--delete-button-size);
 		align-items: end;
 		gap: var(--spacing-md);
 	}
 
-	.filter-operator,
+	.filter-operation,
 	.filter-column,
 	.filter-value {
 		display: flex;

package/dist/Table/Header.svelte

@@ -3,6 +3,7 @@
 
 	import { Search } from '../index.js';
 	import { FlexRender, type HeaderGroup, type RowData } from './adapter/index.js';
+	import { sanitizeFilters } from './util.js';
 
 	interface Props {
 		headerGroups: HeaderGroup<T>[];
@@ -17,15 +18,10 @@
 		false: 'swap_vert'
 	};
 
+	const filters = $derived(sanitizeFilters(page.url.searchParams.getAll('filter')));
+
 	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)
-			);
-		});
+		return filters.some((filter) => filter.column === columnId);
 	};
 </script>
 

package/dist/Table/Table.svelte

@@ -23,7 +23,7 @@
 	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';
+	import { DEFAULT_MIN_PAGE_LIMIT, DEFAULT_PAGE_LIMIT, Operator } from './consts.js';
 	import { setPaginationTableContext } from './context.js';
 	import type { ExcelSetting } from './excel-setting.js';
 	import exportExcel from './excel.js';
@@ -208,8 +208,8 @@
 	};
 
 	const buildFilterValue = (filter: Filter) => {
-		const operator = filter.operator ? `${filter.operator}:` : '';
-		return `${operator}${filter.column}:eq:${filter.value}`;
+		const operation = filter.operation ? `${filter.operation}:` : '';
+		return `${operation}${filter.column}:${Operator.Eq}:${filter.value}`;
 	};
 
 	const buildUrl = (searchParams: URLSearchParams) => {

package/dist/Table/consts.d.ts

@@ -2,9 +2,13 @@ export declare const DEFAULT_PAGE = 1;
 export declare const DEFAULT_PAGE_LIMIT = 10;
 export declare const DEFAULT_MIN_PAGE_LIMIT = 5;
 export declare const DEFAULT_ITEMS_PER_PAGE_OPTIONS: number[];
-export declare const Operator: {
+export declare const Operation: {
     readonly And: "AND";
     readonly Or: "OR";
     readonly Not: "NOT";
 };
+export declare const Operator: {
+    readonly Eq: "eq";
+};
+export type Operation = typeof Operation[keyof typeof Operation];
 export type Operator = typeof Operator[keyof typeof Operator];

package/dist/Table/consts.js

@@ -2,8 +2,11 @@ export const DEFAULT_PAGE = 1;
 export const DEFAULT_PAGE_LIMIT = 10;
 export const DEFAULT_MIN_PAGE_LIMIT = 5;
 export const DEFAULT_ITEMS_PER_PAGE_OPTIONS = [10, 25, 50, 75, 100];
-export const Operator = {
+export const Operation = {
     And: 'AND',
     Or: 'OR',
     Not: 'NOT'
 };
+export const Operator = {
+    Eq: 'eq'
+};

package/dist/Table/index.d.ts

@@ -5,4 +5,4 @@ export { ColumnFormat, type ExcelSetting } from './excel-setting.js';
 export * from './excel.js';
 export { default as Table } from './Table.svelte';
 export * from './types.js';
-export { createActionsColumn, createStaticTable, getPage, getPageLimit } from './util.js';
+export { createActionsColumn, createStaticTable, getPage, getPageLimit, sanitizeFilters } from './util.js';

package/dist/Table/index.js

@@ -5,4 +5,4 @@ export { ColumnFormat } from './excel-setting.js';
 export * from './excel.js';
 export { default as Table } from './Table.svelte';
 export * from './types.js';
-export { createActionsColumn, createStaticTable, getPage, getPageLimit } from './util.js';
+export { createActionsColumn, createStaticTable, getPage, getPageLimit, sanitizeFilters } from './util.js';

package/dist/Table/types.js

@@ -1 +1 @@
-import { Operator } from "./consts.js";
+import { Operation } from "./consts.js";

package/dist/Table/util.d.ts

@@ -1,7 +1,8 @@
 import { type ColumnDef, type Row } from './adapter/index.js';
-import type { Action } from './types.js';
+import type { Action, Filter } 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 getPageLimit: (urlSearchParams: URLSearchParams) => number;
 export declare const getPage: (urlSearchParams: URLSearchParams) => number;
+export declare const sanitizeFilters: (filterParams: string[]) => Filter[];

package/dist/Table/util.js

@@ -1,7 +1,7 @@
 import ActionsColumn from './ActionsColumn.svelte';
 import RowCheckBox from './RowCheckBox.svelte';
 import { createColumnHelper, createTable, getCoreRowModel, renderComponent } from './adapter/index.js';
-import { DEFAULT_ITEMS_PER_PAGE_OPTIONS, DEFAULT_PAGE, DEFAULT_PAGE_LIMIT } from './consts.js';
+import { DEFAULT_ITEMS_PER_PAGE_OPTIONS, DEFAULT_PAGE, DEFAULT_PAGE_LIMIT, Operation, Operator } from './consts.js';
 export const createCheckedColumn = () => {
     const columnHelper = createColumnHelper();
     return columnHelper.display({
@@ -72,3 +72,33 @@ export const getPage = (urlSearchParams) => {
     const isPageValid = pageParam && !Number.isNaN(page) && page > 0;
     return isPageValid ? page : DEFAULT_PAGE;
 };
+export const sanitizeFilters = (filterParams) => {
+    return filterParams
+        .filter((param) => param.trim())
+        .map(parseFilterParam)
+        .filter((filter) => filter !== null);
+};
+const parseFilterParam = (filterValue) => {
+    const parts = filterValue.split(':');
+    if (parts.length === 3)
+        return parseSimpleFilter(parts);
+    if (parts.length === 4)
+        return parseOperationFilter(parts);
+    return null;
+};
+const parseSimpleFilter = (parts) => {
+    const [column, operator, value] = parts;
+    return isValidFilter(column, operator, value) ? { column, value, operation: undefined } : null;
+};
+const parseOperationFilter = (parts) => {
+    const [operation, column, operator, value] = parts;
+    return isValidFilter(column, operator, value) && isValidOperation(operation)
+        ? { column, value, operation }
+        : null;
+};
+const isValidFilter = (column, operator, value) => {
+    return operator === Operator.Eq && !!column && !!value;
+};
+const isValidOperation = (operation) => {
+    return Object.values(Operation).includes(operation);
+};

package/dist/Tabs/tabsState.svelte.d.ts

@@ -10,5 +10,5 @@ type TabComponent<TComponent extends Component<any>> = BaseTab & {
     component: TComponent;
     props: ComponentProps<TComponent>;
 };
-export declare const createTab: <TComponent extends Component<any>>(tab: Tab<TComponent>) => Tab<TComponent>;
+export declare const createTabComponent: <TComponent extends Component<any>>(tab: Tab<TComponent>) => Tab<TComponent>;
 export {};

package/dist/Tabs/tabsState.svelte.js

@@ -1,3 +1,3 @@
-export const createTab = (tab) => {
+export const createTabComponent = (tab) => {
     return tab;
 };

package/dist/index.d.ts

@@ -34,7 +34,7 @@ import Toggle from './Controls/Toggle/Toggle.svelte';
 import Tooltip from './Tooltip/Tooltip.svelte';
 import Waffle from './Waffle/Waffle.svelte';
 import AttachFile from './Controls/AttachFile/AttachFile.svelte';
-import { createTab } from './Tabs/tabsState.svelte.js';
+import { createTabComponent } from './Tabs/tabsState.svelte.js';
 import { addBreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
 import { ChipType } from './Chips/chipsState.svelte.js';
 import { ColumnType, ImageType } from './HighlightPanel/highlightPanelState.svelte.js';
@@ -54,4 +54,4 @@ import type { Tab } from './Tabs/tabsState.svelte.js';
 import type { Toast } from './Toast/toastState.svelte';
 import type { WaffleItem } from './Waffle/waffleState.svelte.js';
 import type { NotificationProps } from './Notification/notificationState.svelte.js';
-export { Accordion, AttachFile, Avatar, Breadcrumbs, Button, Card, Chips, DeleteConfirmationModal, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, Input, Label, Link, Menu, Modal, Notification, Processing, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Switcher, Tabs, TextArea, Toaster, Toggle, Tooltip, Waffle, addBreadcrumbsNameMap, addToast, getProgressWizardContext, setProgressWizardStepsContext, setStepValidity, getSubMenuItemsFromMenu, createTab, ChipType, ColumnType, ImageType, type BreadcrumbsNameMap, type HighlightPanelColumn, type HomeItem, type MainMenu, type MenuItem, type ModalProps, type ProgressWizardStep, type SelectOption, type SwitcherOption, type Tab, type Toast, type WaffleItem, type SubMenuItem, type NotificationProps };
+export { Accordion, AttachFile, Avatar, Breadcrumbs, Button, Card, Chips, DeleteConfirmationModal, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, Input, Label, Link, Menu, Modal, Notification, Processing, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Switcher, Tabs, TextArea, Toaster, Toggle, Tooltip, Waffle, addBreadcrumbsNameMap, addToast, getProgressWizardContext, setProgressWizardStepsContext, setStepValidity, getSubMenuItemsFromMenu, createTabComponent, ChipType, ColumnType, ImageType, type BreadcrumbsNameMap, type HighlightPanelColumn, type HomeItem, type MainMenu, type MenuItem, type ModalProps, type ProgressWizardStep, type SelectOption, type SwitcherOption, type Tab, type Toast, type WaffleItem, type SubMenuItem, type NotificationProps };

package/dist/index.js

@@ -35,7 +35,7 @@ import Toggle from './Controls/Toggle/Toggle.svelte';
 import Tooltip from './Tooltip/Tooltip.svelte';
 import Waffle from './Waffle/Waffle.svelte';
 import AttachFile from './Controls/AttachFile/AttachFile.svelte';
-import { createTab } from './Tabs/tabsState.svelte.js';
+import { createTabComponent } from './Tabs/tabsState.svelte.js';
 // State, enums, and helpers
 import { addBreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
 import { ChipType } from './Chips/chipsState.svelte.js';
@@ -48,6 +48,6 @@ export {
 // Components
 Accordion, AttachFile, Avatar, Breadcrumbs, Button, Card, Chips, DeleteConfirmationModal, ErrorPage, Footer, Header, HeaderAccount, HeaderLoader, HeaderLogo, HighlightPanel, Home, Input, Label, Link, Menu, Modal, Notification, Processing, ProgressPage, ProgressWizard, Search, Select, Sidebar, Spinner, Switcher, Tabs, TextArea, Toaster, Toggle, Tooltip, Waffle, 
 // Functions and helpers
-addBreadcrumbsNameMap, addToast, getProgressWizardContext, setProgressWizardStepsContext, setStepValidity, getSubMenuItemsFromMenu, createTab, 
+addBreadcrumbsNameMap, addToast, getProgressWizardContext, setProgressWizardStepsContext, setStepValidity, getSubMenuItemsFromMenu, createTabComponent, 
 // Enums
 ChipType, ColumnType, ImageType };

package/package.json

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