@softwareone/spi-sv5-library 1.11.5 → 1.11.7

package/dist/Controls/AttachFile/AttachFile.svelte

@@ -199,7 +199,7 @@
 
 <style>
 	.container {
-		--color-red: #b30825;
+		--color-red: #dc2626;
 		--color-gray-outer: #434952;
 		--color-gray-auro: #6b7180;
 		--color-gray: #e0e5e8;
@@ -238,9 +238,7 @@
 
 	.text-error {
 		color: var(--color-red);
-		margin: 4px;
 		font-size: 12px;
-		line-height: 16px;
 	}
 
 	.drop-area {

package/dist/DeleteConfirmation/DeleteConfirmation.svelte

@@ -7,7 +7,7 @@
 		showModal?: boolean;
 		ondelete: () => Promise<boolean> | boolean;
 		onclose?: VoidFunction;
-		ondeleteSuccess?: VoidFunction;
+		ondeleteSuccess?: () => Promise<void> | void;
 	}
 
 	let {
@@ -28,15 +28,17 @@
 
 	const handleDelete = async () => {
 		isLoading = true;
+
 		const isSuccessful = await ondelete();
-		isLoading = false;
 
 		if (isSuccessful) {
+			await ondeleteSuccess?.();
 			showModal = false;
-			ondeleteSuccess?.();
 		} else {
 			addToast({ message: 'There was an unexpected error.', type: 'danger' });
 		}
+
+		isLoading = false;
 	};
 </script>
 

package/dist/DeleteConfirmation/DeleteConfirmation.svelte.d.ts

@@ -4,7 +4,7 @@ interface DeleteConfirmationProps {
     showModal?: boolean;
     ondelete: () => Promise<boolean> | boolean;
     onclose?: VoidFunction;
-    ondeleteSuccess?: VoidFunction;
+    ondeleteSuccess?: () => Promise<void> | void;
 }
 declare const DeleteConfirmation: import("svelte").Component<DeleteConfirmationProps, {}, "showModal">;
 type DeleteConfirmation = ReturnType<typeof DeleteConfirmation>;

package/dist/Form/Form.svelte

@@ -52,7 +52,7 @@
 	let isLoading = $state(false);
 
 	const { form, errors, isFormValid } = getFormContext<Schema>(contextName);
-	$form = structuredClone($state.snapshot(initialData));
+	$form = $state.snapshot(initialData);
 
 	const onUpdated = () => {
 		isLoading = false;

package/dist/Table/Body.svelte

@@ -4,16 +4,32 @@
 
 	interface Props {
 		bodyRows: Row<T>[];
+		enableChecked?: boolean;
 	}
 
-	let { bodyRows }: Props = $props();
+	let { bodyRows, enableChecked = false }: Props = $props();
+
+	const CLICKABLE_TAGS = ['td', 'span', 'p'];
+
+	const handleRowClick = (row: Row<T>, target: EventTarget | null) => {
+		const isHtmlElement = target instanceof HTMLElement;
+		const tagName = isHtmlElement ? target.tagName.toLocaleLowerCase() : '';
+		if (isHtmlElement && CLICKABLE_TAGS.includes(tagName)) {
+			row.toggleSelected();
+		}
+	};
 </script>
 
 <tbody class="table-body">
 	{#each bodyRows as row (row.id)}
 		<tr
 			animate:flip={{ duration: 500 }}
-			class={['table-row', row.getIsSelected() && 'table-row--selected']}
+			class={[
+				'table-row',
+				row.getIsSelected() && 'table-row--selected',
+				enableChecked && 'table-row--clickable'
+			]}
+			onclick={enableChecked ? (event) => handleRowClick(row, event.target) : undefined}
 		>
 			{#each row.getVisibleCells() as cell}
 				{@const alignColumn = cell.column.columnDef.meta?.alignColumn}
@@ -66,6 +82,10 @@
 		background: var(--color-row-selected);
 	}
 
+	.table-row--clickable {
+		cursor: pointer;
+	}
+
 	.table-cell {
 		max-width: 50px;
 		padding: var(--spacing-md) var(--spacing-lg);

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

@@ -2,6 +2,7 @@ import { type Row } from './adapter/index.js';
 declare function $$render<T>(): {
     props: {
         bodyRows: Row<T>[];
+        enableChecked?: boolean;
     };
     exports: {};
     bindings: "";

package/dist/Table/Table.svelte

@@ -48,7 +48,7 @@
 		pagination?: Pagination;
 		excelSetting?: ExcelSetting;
 		header?: Snippet;
-		bulkActions?: Snippet<[selectedRows: T[]]>;
+		bulkActions?: Snippet<[selectedRows: T[], clearSelection: VoidFunction]>;
 		onpagechange?: (pageSize: number, pageNumber: number) => void;
 		onpagesizechange?: (pageSize: number) => void;
 	}
@@ -87,11 +87,23 @@
 	const tableManualPagination = manualPagination ? setPaginationTableContext() : undefined;
 	const hasData = $derived(data.length > 0);
 
+	const tableColumns = $derived.by(() => {
+		if (!enableChecked) return columns;
+
+		const checkedColumnExists = columns.some((column) => column.id === 'checked');
+		if (checkedColumnExists) return columns;
+
+		const checkedColumn = createCheckedColumn<T>();
+		return [checkedColumn, ...columns];
+	});
+
 	const table = createSvelteTable({
 		get data() {
 			return tableData;
 		},
-		columns,
+		get columns() {
+			return tableColumns;
+		},
 		state: {
 			get sorting() {
 				return sorting;
@@ -194,6 +206,10 @@
 		}
 	}
 
+	const clearSelection = () => {
+		rowSelection = {};
+	};
+
 	const changeFilters = (filters: Filter[]) => {
 		const searchParams = new URLSearchParams(page.url.searchParams);
 		searchParams.delete('filter');
@@ -222,16 +238,6 @@
 			$tableManualPagination = { ...pagination };
 		}
 	});
-
-	$effect.pre(() => {
-		if (enableChecked && columns.length) {
-			const checkedColumnExists = columns.some((column) => column.id === 'checked');
-			if (!checkedColumnExists) {
-				const checkedColumn = createCheckedColumn<T>();
-				columns.unshift(checkedColumn);
-			}
-		}
-	});
 </script>
 
 <section class="table-container">
@@ -284,7 +290,10 @@
 				</p>
 				{#if bulkActions}
 					<hr class="action-divider" />
-					{@render bulkActions?.(selectedRows.map((row) => row.original))}
+					{@render bulkActions?.(
+						selectedRows.map((row) => row.original),
+						clearSelection
+					)}
 				{/if}
 			</div>
 		{/if}
@@ -293,7 +302,7 @@
 			<table class="table-main">
 				<Header headerGroups={table.getHeaderGroups()} {enableColumnSearch} />
 				{#if hasData}
-					<Body bodyRows={table.getRowModel().rows} />
+					<Body bodyRows={table.getRowModel().rows} {enableChecked} />
 				{/if}
 			</table>
 		</article>

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

@@ -18,7 +18,7 @@ declare function $$render<T>(): {
         pagination?: Pagination;
         excelSetting?: ExcelSetting;
         header?: Snippet;
-        bulkActions?: Snippet<[selectedRows: T[]]>;
+        bulkActions?: Snippet<[selectedRows: T[], clearSelection: VoidFunction]>;
         onpagechange?: (pageSize: number, pageNumber: number) => void;
         onpagesizechange?: (pageSize: number) => void;
     };

package/package.json

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