@softwareone/spi-sv5-library 1.11.6 → 1.11.8

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/ActionsColumn.svelte

@@ -1,59 +1,56 @@
 <script lang="ts">
+	import type { Attachment } from 'svelte/attachments';
+	import { fade } from 'svelte/transition';
+
 	import type { Action } from './types.js';
 
 	interface Props {
 		actions: Action[];
-		isLastChild?: boolean;
-		isOnlyOneRow?: boolean;
 	}
 
-	let { actions, isLastChild = false, isOnlyOneRow = false }: Props = $props();
+	let { actions }: Props = $props();
+
+	let container = $state<HTMLDivElement>()!;
+	let isOpen = $state(false);
 
-	const icons: Record<string, string> = {
+	const ICONS: Record<string, string> = {
 		Edit: 'edit',
 		Delete: 'delete'
 	};
 
-	const indexLastSecondaryAction = $derived(
-		actions.findLastIndex((action) => !action.isMainAction)
-	);
+	const isSingleAction = $derived(actions.length === 1);
+	const dividerIndex = $derived(actions.findLastIndex((action) => !action.isMainAction));
+
+	const showDividerAfter = (index: number) =>
+		dividerIndex !== -1 && dividerIndex !== actions.length - 1 && dividerIndex === index;
+
+	const autoPosition: Attachment<HTMLElement> = (element: HTMLElement) => {
+		const updatePosition = () => {
+			const rect = container.getBoundingClientRect();
+			const showAbove = rect.bottom + element.offsetHeight > window.innerHeight;
+
+			const left = rect.left + rect.width / 2 - element.offsetWidth / 2;
+			const top = showAbove ? rect.top - element.offsetHeight + 14 : rect.bottom - 8;
+
+			element.style.setProperty('--menu-left', `${Math.max(0, left)}px`);
+			element.style.setProperty('--menu-top', `${top}px`);
+		};
+
+		updatePosition();
+		window.addEventListener('scroll', updatePosition, true);
+
+		return () => window.removeEventListener('scroll', updatePosition, true);
+	};
+
+	const toggleActionsMenu = () => {
+		isOpen = !isOpen;
+	};
 </script>
 
 <div class="actions-column">
-	{#if actions.length > 1}
-		<div class="actions-group">
-			<span class="actions-trigger">...</span>
-			<div
-				class={[
-					'actions-menu',
-					isOnlyOneRow && 'actions-menu--only-row',
-					isLastChild && !isOnlyOneRow && 'actions-menu--last',
-					!isLastChild && !isOnlyOneRow && 'actions-menu--top'
-				]}
-			>
-				<ul class="actions-list">
-					{#each actions as action, index}
-						<li>
-							<button
-								type="button"
-								onclick={action.onClick}
-								class="action-button"
-								class:action-button--delete={action.isDelete && action.isEnabled}
-								disabled={!action.isEnabled}
-							>
-								<span>{action.name}</span>
-							</button>
-						</li>
-						{#if indexLastSecondaryAction !== -1 && indexLastSecondaryAction !== actions.length - 1 && indexLastSecondaryAction === index}
-							<hr class="action-divider" />
-						{/if}
-					{/each}
-				</ul>
-			</div>
-		</div>
-	{:else}
+	{#if isSingleAction}
 		{@const action = actions[0]}
-		{@const nameIcon = icons[action.name]}
+		{@const icon = ICONS[action.name]}
 
 		<button
 			type="button"
@@ -62,14 +59,45 @@
 			class:action-button--delete={action.isDelete && action.isEnabled}
 			disabled={!action.isEnabled}
 		>
-			{#if nameIcon}
-				<span class="material-icons-outlined">
-					{nameIcon}
-				</span>
+			{#if icon}
+				<span class="material-icons-outlined">{icon}</span>
 			{:else}
 				<span class:action-button--primary={action.isEnabled}>{action.name}</span>
 			{/if}
 		</button>
+	{:else}
+		<div
+			role="menu"
+			tabindex="-1"
+			class="actions-group"
+			bind:this={container}
+			onmouseenter={toggleActionsMenu}
+			onmouseleave={toggleActionsMenu}
+		>
+			<span class="actions-trigger">...</span>
+			{#if isOpen}
+				<div class="actions-menu" {@attach autoPosition} transition:fade={{ duration: 100 }}>
+					<ul class="actions-list">
+						{#each actions as action, index}
+							<li>
+								<button
+									type="button"
+									onclick={action.onClick}
+									class="action-button"
+									class:action-button--delete={action.isDelete && action.isEnabled}
+									disabled={!action.isEnabled}
+								>
+									<span>{action.name}</span>
+								</button>
+							</li>
+							{#if showDividerAfter(index)}
+								<hr class="action-divider" />
+							{/if}
+						{/each}
+					</ul>
+				</div>
+			{/if}
+		</div>
 	{/if}
 </div>
 
@@ -99,7 +127,7 @@
 	}
 
 	.actions-group {
-		position: absolute;
+		position: relative;
 	}
 
 	.actions-trigger {
@@ -111,39 +139,15 @@
 	}
 
 	.actions-menu {
-		position: absolute;
+		position: fixed;
 		z-index: var(--z-index-menu);
 		width: 108px;
+		left: var(--menu-left);
+		top: var(--menu-top);
 		padding: var(--spacing-md) var(--spacing-lg);
 		background: var(--color-white);
 		border-radius: var(--radius-lg);
 		box-shadow: var(--shadow-menu);
-		visibility: hidden;
-		opacity: 0;
-		transition: var(--transition-standard);
-	}
-
-	.actions-group:hover .actions-menu {
-		visibility: visible;
-		opacity: 1;
-	}
-
-	.actions-menu--only-row {
-		right: 28px;
-		bottom: 16px;
-		transform: translateY(50%);
-	}
-
-	.actions-menu--last {
-		bottom: 28px;
-		left: 50%;
-		transform: translateX(-50%);
-	}
-
-	.actions-menu--top {
-		top: 32px;
-		left: 50%;
-		transform: translateX(-50%);
 	}
 
 	.actions-list {

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

@@ -1,8 +1,6 @@
 import type { Action } from './types.js';
 interface Props {
     actions: Action[];
-    isLastChild?: boolean;
-    isOnlyOneRow?: boolean;
 }
 declare const ActionsColumn: import("svelte").Component<Props, {}, "">;
 type ActionsColumn = ReturnType<typeof ActionsColumn>;

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;
 	}
@@ -206,6 +206,10 @@
 		}
 	}
 
+	const clearSelection = () => {
+		rowSelection = {};
+	};
+
 	const changeFilters = (filters: Filter[]) => {
 		const searchParams = new URLSearchParams(page.url.searchParams);
 		searchParams.delete('filter');
@@ -271,8 +275,10 @@
 						<Button
 							type="button"
 							variant="secondary"
-							onclick={() => exportExcel(table, excelSetting)}>Export</Button
+							onclick={() => exportExcel(table, excelSetting)}
 						>
+							{excelSetting.label ?? 'Export'}
+						</Button>
 					{/if}
 					{@render header?.()}
 				</div>
@@ -286,7 +292,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}
@@ -295,7 +304,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/dist/Table/excel-setting.d.ts

@@ -1,6 +1,7 @@
 export interface ExcelSetting {
     fileName: string;
     exportAllColumns: boolean;
+    label?: string;
 }
 export declare const ColumnFormat: {
     readonly NUMBER: "#,##0.00";

package/dist/Table/util.js

@@ -43,10 +43,8 @@ export const createActionsColumn = (getActions) => {
             columnWidth: '117px',
             hideColumnFilter: true
         },
-        cell: ({ row, table }) => renderComponent(ActionsColumn, {
-            actions: getActions(row),
-            isLastChild: table.getRowModel().rows.at(-1).index === row.index,
-            isOnlyOneRow: table.getRowModel().rows.length === 1
+        cell: ({ row }) => renderComponent(ActionsColumn, {
+            actions: getActions(row)
         })
     });
 };

package/dist/Waffle/WaffleItems.svelte

@@ -1,18 +1,15 @@
 <script lang="ts">
 	interface Props {
 		title: string;
-		icon: string;
+		iconUrl: string;
 		onclickwaffleitems: VoidFunction;
 	}
 
-	let { title, icon, onclickwaffleitems }: Props = $props();
+	let { title, iconUrl, onclickwaffleitems }: Props = $props();
 </script>
 
 <button type="button" onclick={onclickwaffleitems} class="waffle-item-button">
-	<figure class="waffle-icon-container" aria-hidden="true">
-		{@html icon}
-	</figure>
-
+	<img src={iconUrl} alt="" aria-hidden="true" class="waffle-item-img" />
 	<h3 class="waffle-title">
 		{title}
 	</h3>
@@ -44,13 +41,12 @@
 		background: #eaecff;
 	}
 
-	.waffle-icon-container {
+	.waffle-item-img {
 		width: 40px;
 		height: 40px;
 		margin-bottom: 12px;
-		display: flex;
-		align-items: center;
-		justify-content: center;
+		filter: invert(27%) sepia(99%) saturate(4729%) hue-rotate(240deg) brightness(101%)
+			contrast(106%);
 	}
 
 	.waffle-title {

package/dist/Waffle/WaffleItems.svelte.d.ts

@@ -1,6 +1,6 @@
 interface Props {
     title: string;
-    icon: string;
+    iconUrl: string;
     onclickwaffleitems: VoidFunction;
 }
 declare const WaffleItems: import("svelte").Component<Props, {}, "">;

package/dist/Waffle/waffleState.svelte.d.ts

@@ -1,5 +1,5 @@
 export interface WaffleItem {
     title: string;
     url: string;
-    icon: string;
+    iconUrl: string;
 }

package/package.json

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