@softwareone/spi-sv5-library 1.9.0 → 1.10.0

package/dist/Button/Button.svelte

@@ -83,6 +83,7 @@
 		border: none;
 		background: #fff;
 		color: #472aff;
+		padding: 8px;
 	}
 
 	.btn-outline-none-primary:hover:not(:disabled),
@@ -117,8 +118,23 @@
 		color: #dc182c;
 	}
 
+	.btn-outline-none-danger {
+		border: none;
+		background: #fff;
+		color: #dc182c;
+		padding: 8px;
+	}
+
+	.btn-outline-none-danger:hover:not(:disabled),
+	.btn-outline-none-danger:focus:not(:disabled),
 	.btn-outline-danger:hover:not(:disabled),
 	.btn-outline-danger:focus:not(:disabled) {
 		background: #fce8ea;
 	}
+
+	.btn-outline-none-primary:disabled,
+	.btn-outline-none-danger:disabled {
+		background: transparent;
+		color: #6b7180;
+	}
 </style>

package/dist/Controls/Input/Input.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { HTMLInputAttributes } from 'svelte/elements';
 
-	import Label from '../Label.svelte';
+	import Label from '../Label/Label.svelte';
 	import InputIcon from './InputIcon.svelte';
 
 	type InputType = 'text' | 'password' | 'number' | 'date' | 'money';

package/dist/Controls/{Label.svelte → Label/Label.svelte}

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Tooltip } from '../index.js';
+	import { Tooltip } from '../../index.js';
 
 	interface LabelProps {
 		label?: string;

package/dist/Controls/Select/Select.svelte

@@ -4,7 +4,7 @@
 	import type { Attachment } from 'svelte/attachments';
 
 	import { Search, type SelectOption } from '../../index.js';
-	import Label from '../Label.svelte';
+	import Label from '../Label/Label.svelte';
 
 	interface SelectProps {
 		options: string[] | SelectOption[];

package/dist/Controls/TextArea/TextArea.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import type { HTMLTextareaAttributes } from 'svelte/elements';
 	
-	import Label from '../Label.svelte';
+	import Label from '../Label/Label.svelte';
 
 	interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'value'> {
 		label?: string;

package/dist/Controls/Toggle/Toggle.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import Label from '../Label.svelte';
+	import Label from '../Label/Label.svelte';
 
 	interface ToggleProps {
 		id?: string;

package/dist/Table/ActionsColumn.svelte

@@ -0,0 +1,203 @@
+<script lang="ts">
+	import type { Action } from './types.js';
+
+	interface Props {
+		actions: Action[];
+		isLastChild?: boolean;
+		isOnlyOneRow?: boolean;
+	}
+
+	let { actions, isLastChild = false, isOnlyOneRow = false }: Props = $props();
+
+	const icons: Record<string, string> = {
+		Edit: 'edit',
+		Delete: 'delete'
+	};
+
+	const indexLastSecondaryAction = $derived(
+		actions.findLastIndex((action) => !action.isMainAction)
+	);
+</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}
+		{@const action = actions[0]}
+		{@const nameIcon = icons[action.name]}
+
+		<button
+			type="button"
+			onclick={action.onClick}
+			class="action-button action-button--single"
+			class:action-button--delete={action.isDelete && action.isEnabled}
+			disabled={!action.isEnabled}
+		>
+			{#if nameIcon}
+				<span class="material-icons-outlined">
+					{nameIcon}
+				</span>
+			{:else}
+				<span class:action-button--primary={action.isEnabled}>{action.name}</span>
+			{/if}
+		</button>
+	{/if}
+</div>
+
+<style>
+	.actions-column {
+		--color-primary: #472aff;
+		--color-red-200: #dc182c;
+		--color-gray-200: #e5e7eb;
+		--color-gray-300: #d1d5db;
+		--color-white: #ffffff;
+		--color-text: #000000;
+		--shadow-menu: 0 2px 10px rgba(0, 0, 0, 0.2);
+		--radius-lg: 8px;
+		--spacing-xs: 4px;
+		--spacing-sm: 8px;
+		--spacing-md: 10px;
+		--spacing-lg: 14px;
+		--z-index-menu: 1;
+		--font-size-sm: 14px;
+		--font-size-2xl: 24px;
+		--transition-standard: all 0.3s ease;
+
+		position: relative;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.actions-group {
+		position: absolute;
+	}
+
+	.actions-trigger {
+		display: inline-block;
+		margin-bottom: var(--spacing-sm);
+		font-size: var(--font-size-2xl);
+		font-weight: bold;
+		cursor: default;
+	}
+
+	.actions-menu {
+		position: absolute;
+		z-index: var(--z-index-menu);
+		width: 108px;
+		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 {
+		display: flex;
+		flex-direction: column;
+		gap: var(--spacing-sm);
+		margin: 0;
+		padding: 0;
+		list-style: none;
+		text-align: left;
+		font-size: var(--font-size-sm);
+	}
+
+	.action-button {
+		display: flex;
+		align-items: center;
+		padding: 0;
+		border: none;
+		background: none;
+		color: var(--color-text);
+		font-size: inherit;
+		cursor: pointer;
+	}
+
+	.action-button:hover:not(:disabled) {
+		font-weight: 500;
+	}
+
+	.action-button:disabled {
+		color: var(--color-gray-300);
+		cursor: not-allowed;
+		font-weight: normal;
+	}
+
+	.action-button--delete {
+		color: var(--color-red-200);
+	}
+
+	.action-button--single {
+		display: flex;
+		align-items: center;
+	}
+
+	.action-button--primary {
+		color: var(--color-primary);
+	}
+
+	.action-button--primary:hover {
+		font-weight: 600;
+	}
+
+	.action-divider {
+		border: none;
+		border-top: 1px solid var(--color-gray-200);
+		margin: 0;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+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>;
+export default ActionsColumn;

package/dist/Table/Body.svelte

@@ -0,0 +1,90 @@
+<script lang="ts" generics="T">
+	import { flip } from 'svelte/animate';
+	import { FlexRender, type Row } from './adapter/index.js';
+
+	interface Props {
+		bodyRows: Row<T>[];
+	}
+
+	let { bodyRows }: Props = $props();
+</script>
+
+<tbody class="table-body">
+	{#each bodyRows as row (row.id)}
+		<tr
+			animate:flip={{ duration: 500 }}
+			class={['table-row', row.getIsSelected() && 'table-row--selected']}
+		>
+			{#each row.getVisibleCells() as cell}
+				{@const alignColumn = cell.column.columnDef.meta?.alignColumn}
+				{@const columnWidth = cell.column.columnDef.meta?.columnWidth}
+				{@const columnStyle = cell.column.columnDef.meta?.style}
+				<td
+					class={[
+						'table-cell',
+						alignColumn === 'right' && 'table-cell--right',
+						alignColumn === 'center' && 'table-cell--center',
+						!alignColumn && 'table-cell--left'
+					]}
+					style:width={columnWidth}
+					style={columnStyle}
+				>
+					<FlexRender content={cell.column.columnDef.cell} context={cell.getContext()} />
+				</td>
+			{/each}
+		</tr>
+	{/each}
+</tbody>
+
+<style>
+	.table-body {
+		--color-white: #fff;
+		--color-black: #000;
+		--color-row-selected: #eaecff;
+		--color-gray-300: #e0e5e8;
+		--color-gray-400: #f3f4f6;
+		--spacing-md: 8px;
+		--spacing-lg: 16px;
+		--font-size-sm: 14px;
+
+		background: var(--color-white);
+	}
+
+	.table-row {
+		transition: background-color 100ms ease;
+	}
+
+	.table-row:hover {
+		background: var(--color-gray-400);
+	}
+
+	.table-row--selected {
+		background: var(--color-row-selected);
+	}
+
+	.table-row--selected:hover {
+		background: var(--color-row-selected);
+	}
+
+	.table-cell {
+		max-width: 50px;
+		padding: var(--spacing-md) var(--spacing-lg);
+		border-bottom: 0.5px solid var(--color-gray-300);
+		font-size: var(--font-size-sm);
+		color: var(--color-black);
+		word-wrap: break-word;
+		white-space: normal;
+	}
+
+	.table-cell--left {
+		text-align: left;
+	}
+
+	.table-cell--center {
+		text-align: center;
+	}
+
+	.table-cell--right {
+		text-align: right;
+	}
+</style>

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

@@ -0,0 +1,27 @@
+import { type Row } from './adapter/index.js';
+declare function $$render<T>(): {
+    props: {
+        bodyRows: Row<T>[];
+    };
+    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 Body: $$IsomorphicComponent;
+type Body<T> = InstanceType<typeof Body<T>>;
+export default Body;

package/dist/Table/ColumnVisibilityDropdown.svelte

@@ -0,0 +1,174 @@
+<script lang="ts" generics="T">
+	import type { Column } from './adapter/index.js';
+
+	interface Props {
+		columns: Column<T, unknown>[];
+	}
+
+	let { columns }: Props = $props();
+
+	let isOpen = $state(false);
+
+	const toggleModal = () => {
+		isOpen = !isOpen;
+	};
+</script>
+
+<div class="column-visibility">
+	<button type="button" class="column-visibility-toggle" onclick={toggleModal}>
+		<span class="material-icons">table_rows</span>
+		Columns
+	</button>
+
+	{#if isOpen}
+		<div class="column-visibility-dropdown" role="menu">
+			<div class="column-visibility-header">
+				<h2 class="column-visibility-title">Toggle columns</h2>
+				<button type="button" onclick={toggleModal} class="column-visibility-close">
+					<span class="material-icons">close</span>
+				</button>
+			</div>
+
+			<div class="column-visibility-list">
+				{#each columns as column}
+					{@const columnDef = column.columnDef}
+					{@const header = typeof columnDef.header === 'string' ? columnDef.header : column.id}
+
+					<label class="column-visibility-item">
+						<input
+							type="checkbox"
+							checked={column.getIsVisible()}
+							onchange={() => column.toggleVisibility()}
+						/>
+						<span class="column-visibility-label">{header}</span>
+					</label>
+				{/each}
+			</div>
+		</div>
+	{/if}
+</div>
+
+{#if isOpen}
+	<button
+		type="button"
+		class="column-visibility-backdrop"
+		onclick={toggleModal}
+		aria-label="Close dropdown"
+	></button>
+{/if}
+
+<style>
+	.column-visibility {
+		--color-white: #ffffff;
+		--color-gray-50: #f9fafb;
+		--color-gray-100: #f3f4f6;
+		--color-gray-500: #6b7280;
+		--color-gray-600: #4b5563;
+		--spacing-xs: 8px;
+		--spacing-sm: 8px;
+		--spacing-md: 16px;
+		--font-size-sm: 14px;
+		--font-size-icon: 14px;
+		--font-semibold: 600;
+		--radius-lg: 8px;
+		--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+		--z-index-dropdown: 10;
+		--z-index-backdrop: 9;
+
+		position: relative;
+	}
+
+	.column-visibility-toggle {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-xs);
+		padding: var(--spacing-sm) var(--spacing-md);
+		border: none;
+		border-radius: var(--radius-lg);
+		background: var(--color-white);
+		font-size: var(--font-size-sm);
+		cursor: pointer;
+	}
+
+	.column-visibility-toggle:hover {
+		background: var(--color-gray-100);
+	}
+
+	.column-visibility-toggle .material-icons {
+		font-size: var(--font-size-icon);
+	}
+
+	.column-visibility-dropdown {
+		position: absolute;
+		top: 48px;
+		right: 0;
+		z-index: var(--z-index-dropdown);
+		width: 224px;
+		padding: var(--spacing-md);
+		background: var(--color-white);
+		border-radius: var(--radius-lg);
+		box-shadow: var(--shadow-lg);
+	}
+
+	.column-visibility-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: var(--spacing-sm);
+	}
+
+	.column-visibility-title {
+		margin: 0;
+		font-size: var(--font-size-sm);
+		font-weight: var(--font-semibold);
+	}
+
+	.column-visibility-close {
+		display: flex;
+		align-items: center;
+		padding: 0;
+		border: none;
+		background: none;
+		color: var(--color-gray-500);
+		cursor: pointer;
+	}
+
+	.column-visibility-close:hover {
+		color: var(--color-gray-600);
+	}
+
+	.column-visibility-close .material-icons {
+		font-size: var(--font-size-icon);
+	}
+
+	.column-visibility-list {
+		max-height: 240px;
+		overflow-y: auto;
+	}
+
+	.column-visibility-item {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-xs);
+		padding: var(--spacing-sm);
+		border-radius: var(--radius-lg);
+		cursor: pointer;
+	}
+
+	.column-visibility-item:hover {
+		background: var(--color-gray-50);
+	}
+
+	.column-visibility-label {
+		font-size: var(--font-size-sm);
+	}
+
+	.column-visibility-backdrop {
+		position: fixed;
+		inset: 0;
+		z-index: var(--z-index-backdrop);
+		border: none;
+		background: transparent;
+		cursor: default;
+	}
+</style>

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

@@ -0,0 +1,27 @@
+import type { Column } from './adapter/index.js';
+declare function $$render<T>(): {
+    props: {
+        columns: Column<T, unknown>[];
+    };
+    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 ColumnVisibilityDropdown: $$IsomorphicComponent;
+type ColumnVisibilityDropdown<T> = InstanceType<typeof ColumnVisibilityDropdown<T>>;
+export default ColumnVisibilityDropdown;

package/dist/Table/Footer.svelte

@@ -0,0 +1,34 @@
+<script lang="ts" generics="T">
+	import type { Table } from './adapter/index.js';
+	import PageSize from './PageSize.svelte';
+	import Pagination from './Pagination.svelte';
+
+	interface Props {
+		table: Table<T>;
+		minPageSize: boolean;
+	}
+
+	let { table, minPageSize }: Props = $props();
+</script>
+
+<footer class="table-footer">
+	<Pagination {table} />
+	<PageSize {table} {minPageSize} />
+</footer>
+
+<style>
+	.table-footer {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 20px;
+		font-size: 14px;
+		font-weight: 500;
+	}
+
+	@media (max-width: 750px) {
+		.table-footer {
+			flex-direction: column;
+		}
+	}
+</style>

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

@@ -0,0 +1,28 @@
+import type { Table } from './adapter/index.js';
+declare function $$render<T>(): {
+    props: {
+        table: Table<T>;
+        minPageSize: boolean;
+    };
+    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 Footer: $$IsomorphicComponent;
+type Footer<T> = InstanceType<typeof Footer<T>>;
+export default Footer;