@softwareone/spi-sv5-library 1.9.0 → 1.10.0

package/dist/Table/Skeleton.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	interface Props {
+		columns?: number;
+		rows?: number;
+	}
+
+	let { columns = 5, rows = 10 }: Props = $props();
+</script>
+
+<section class="table-skeleton">
+	<table class="table-skeleton-table">
+		<thead>
+			<tr>
+				{#each Array(columns) as _}
+					<th class="table-skeleton-header">
+						<div class="table-skeleton-header-placeholder"></div>
+					</th>
+				{/each}
+			</tr>
+		</thead>
+		<tbody>
+			{#each Array(rows) as _}
+				<tr>
+					{#each Array(columns) as _}
+						<td class="table-skeleton-cell">
+							<div class="table-skeleton-cell-placeholder"></div>
+						</td>
+					{/each}
+				</tr>
+			{/each}
+		</tbody>
+	</table>
+</section>
+
+<style>
+
+	.table-skeleton {
+		--color-black: #000;
+		--color-gray-300: #d1d5db;
+		--spacing-md: 12px;
+		--spacing-lg: 16px;
+		--font-size-sm: 14px;
+		--skeleton-width: 150px;
+		--skeleton-header-height: 18px;
+		--skeleton-cell-height: 16px;
+		--radius-lg: 8px;
+
+		overflow-x: auto;
+		overflow-y: hidden;
+	}
+
+	.table-skeleton-table {
+		width: 100%;
+		border-spacing: 0;
+	}
+
+	.table-skeleton-header {
+		padding: var(--spacing-md) var(--spacing-lg);
+		border-right: 0.5px solid var(--color-gray-300);
+		border-bottom: 2px solid var(--color-black);
+		text-align: left;
+		font-size: var(--font-size-sm);
+	}
+
+	.table-skeleton-header:last-child {
+		border-right: 0;
+	}
+
+	.table-skeleton-header-placeholder {
+		height: var(--skeleton-header-height);
+		width: var(--skeleton-width);
+		background: var(--color-gray-300);
+		border-radius: var(--radius-lg);
+		animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+	}
+
+	.table-skeleton-cell {
+		padding: var(--spacing-md) var(--spacing-lg);
+		border-bottom: 2px solid var(--color-gray-300);
+	}
+
+	.table-skeleton-cell-placeholder {
+		height: var(--skeleton-cell-height);
+		width: var(--skeleton-width);
+		background: var(--color-gray-300);
+		border-radius: var(--radius-lg);
+		animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+	}
+
+	@keyframes pulse {
+		0%,
+		100% {
+			opacity: 1;
+		}
+		50% {
+			opacity: 0.5;
+		}
+	}
+</style>

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

@@ -0,0 +1,7 @@
+interface Props {
+    columns?: number;
+    rows?: number;
+}
+declare const Skeleton: import("svelte").Component<Props, {}, "">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/Table/Table.svelte

@@ -0,0 +1,351 @@
+<script lang="ts" generics="T">
+	import { type Snippet } from 'svelte';
+
+	import { Button, Search } from '../index.js';
+	import {
+		createSvelteTable,
+		getCoreRowModel,
+		getExpandedRowModel,
+		getFilteredRowModel,
+		getPaginationRowModel,
+		getSortedRowModel,
+		type ColumnDef,
+		type ColumnFiltersState,
+		type ExpandedState,
+		type PaginationState,
+		type RowSelectionState,
+		type SortingState,
+		type Updater,
+		type VisibilityState
+	} from './adapter/index.js';
+	import Body from './Body.svelte';
+	import ColumnVisibilityDropdown from './ColumnVisibilityDropdown.svelte';
+	import { DEFAULT_MIN_PAGE_LIMIT, DEFAULT_PAGE_LIMIT } from './consts.js';
+	import { setPaginationTableContext } from './context.js';
+	import type { ExcelSetting } from './excel-setting.js';
+	import exportExcel from './excel.js';
+	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';
+
+	interface Props {
+		columns: ColumnDef<T, any>[];
+		isLoading?: boolean;
+		data?: T[];
+		minPageSize?: boolean;
+		enableChecked?: boolean;
+		enableExportExcel?: boolean;
+		enableGlobalSearch?: boolean;
+		enableColumnSearch?: boolean;
+		enableColumnVisibility?: boolean;
+		manualPagination?: boolean;
+		pagination?: Pagination;
+		excelSetting?: ExcelSetting;
+		header?: Snippet;
+		bulkActions?: Snippet<[selectedRows: T[]]>;
+		onpagechange?: (pageSize: number, pageNumber: number) => void;
+		onpagesizechange?: (pageSize: number) => void;
+	}
+
+	let {
+		columns = [],
+		isLoading = false,
+		data = [],
+		minPageSize = false,
+		enableChecked = false,
+		enableExportExcel = false,
+		enableGlobalSearch = true,
+		enableColumnSearch = false,
+		enableColumnVisibility = true,
+		manualPagination = false,
+		pagination,
+		excelSetting = {
+			fileName: 'Table',
+			exportAllColumns: false
+		},
+		onpagechange,
+		onpagesizechange,
+		header,
+		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>([]);
+	let rowSelection = $state<RowSelectionState>({});
+	let expanded = $state<ExpandedState>({});
+	let columnVisibility = $state<VisibilityState>(getInitialColumnVisibility());
+	let paginationState = $state<PaginationState>(getInitialPaginationState());
+	let tableData = $derived(data);
+
+	const table = createSvelteTable({
+		get data() {
+			return tableData;
+		},
+		columns,
+		state: {
+			get sorting() {
+				return sorting;
+			},
+			get columnVisibility() {
+				return columnVisibility;
+			},
+			get columnFilters() {
+				return columnFilters;
+			},
+			get rowSelection() {
+				return rowSelection;
+			},
+			get globalFilter() {
+				return globalFilter;
+			},
+			get pagination() {
+				return paginationState;
+			},
+			get expanded() {
+				return expanded;
+			}
+		},
+		get pageCount() {
+			return $tableManualPagination?.totalPages;
+		},
+		onSortingChange: (updater: Updater<SortingState>) => {
+			sorting = updater instanceof Function ? updater(sorting) : updater;
+		},
+		onColumnVisibilityChange: (updater: Updater<VisibilityState>) => {
+			columnVisibility = updater instanceof Function ? updater(columnVisibility) : updater;
+		},
+		onRowSelectionChange: (updater: Updater<RowSelectionState>) => {
+			rowSelection = updater instanceof Function ? updater(rowSelection) : updater;
+		},
+		onColumnFiltersChange: (updater: Updater<ColumnFiltersState>) => {
+			columnFilters = updater instanceof Function ? updater(columnFilters) : updater;
+		},
+		onExpandedChange: (updater: Updater<ExpandedState>) => {
+			expanded = updater instanceof Function ? updater(expanded) : updater;
+		},
+		onPaginationChange: (updater: Updater<PaginationState>) => {
+			const next = updater instanceof Function ? updater(paginationState) : updater;
+			if ($tableManualPagination) {
+				changeManualPagination(next);
+			}
+			paginationState = next;
+		},
+		getCoreRowModel: getCoreRowModel(),
+		getPaginationRowModel: getPaginationRowModel(),
+		getFilteredRowModel: getFilteredRowModel(),
+		getSortedRowModel: getSortedRowModel(),
+		getExpandedRowModel: getExpandedRowModel(),
+		getSubRows: (row) => (row as any)?.children,
+		manualPagination,
+		paginateExpandedRows: false,
+		enableColumnFilters: true,
+		sortDescFirst: false
+	});
+
+	const changeManualPagination = (updatedPaginationState: PaginationState) => {
+		const pageSizeChanged = updatedPaginationState.pageSize !== paginationState.pageSize;
+
+		if (pageSizeChanged) {
+			updatedPaginationState.pageIndex = 0;
+			onpagesizechange?.(updatedPaginationState.pageSize);
+		} else {
+			const currentPageNumber = updatedPaginationState.pageIndex + 1;
+			onpagechange?.(updatedPaginationState.pageSize, currentPageNumber);
+		}
+	};
+
+	const hasData = $derived(data.length > 0);
+	const hasFilteredRows = $derived(table.getRowModel().rows.length > 0);
+	const selectedRows = $derived(table.getSelectedRowModel().rows);
+
+	$effect(() => {
+		if (manualPagination && pagination) {
+			$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">
+	{#if isLoading}
+		<Skeleton columns={minPageSize ? 3 : undefined} rows={minPageSize ? 5 : undefined} />
+	{:else}
+		<header
+			class={[
+				'table-header',
+				enableGlobalSearch ? 'table-header--space-between' : 'table-header--end'
+			]}
+		>
+			{#if enableGlobalSearch}
+				<div class="table-search">
+					<Search bind:value={globalFilter} />
+				</div>
+			{/if}
+
+			{#if header || enableExportExcel || enableColumnVisibility}
+				<div class="table-actions">
+					{#if enableColumnVisibility}
+						<ColumnVisibilityDropdown
+							columns={table.getAllLeafColumns().filter((column) => column.getCanHide())}
+						/>
+					{/if}
+					{#if enableExportExcel}
+						<Button variant="secondary" onclick={() => exportExcel(table, excelSetting)}
+							>Export</Button
+						>
+					{/if}
+					{@render header?.()}
+				</div>
+			{/if}
+		</header>
+
+		{#if enableChecked && (table.getIsSomeRowsSelected() || table.getIsAllRowsSelected())}
+			<div class="table-bulk-actions">
+				<p>
+					{selectedRows.length} of {table.getCoreRowModel().rows.length} items are selected
+				</p>
+				{#if bulkActions}
+					<hr class="action-divider" />
+					{@render bulkActions?.(selectedRows.map((row) => row.original))}
+				{/if}
+			</div>
+		{/if}
+
+		<article class={['table-article', hasFilteredRows && 'table-article--padding']}>
+			<table class="table-main">
+				<Header headerGroups={table.getHeaderGroups()} {enableColumnSearch} />
+				{#if hasData}
+					<Body bodyRows={table.getRowModel().rows} />
+				{/if}
+			</table>
+		</article>
+
+		{#if !hasData}
+			<p class="table-message table-message--error">No data available</p>
+		{:else if !hasFilteredRows}
+			<p class="table-message table-message--error">No items found</p>
+		{/if}
+
+		{#if hasData}
+			<Footer {table} {minPageSize} />
+		{/if}
+	{/if}
+</section>
+
+<style>
+	.table-container {
+		--color-red-600: #dc2626;
+		--color-gray-300: #d1d5db;
+		--color-gray: #6b7180;
+		--font-size-sm: 14px;
+		--spacing-md: 16px;
+		--spacing-lg: 24px;
+		--spacing-xl: 40px;
+		--font-size-xl: 20px;
+		--search-width: 491px;
+
+		width: 100%;
+	}
+
+	.table-header {
+		display: flex;
+		align-items: center;
+	}
+
+	.table-header--space-between {
+		justify-content: space-between;
+	}
+
+	.table-header--end {
+		justify-content: flex-end;
+	}
+
+	.table-search {
+		width: var(--search-width);
+	}
+
+	.table-actions {
+		display: flex;
+		gap: var(--spacing-md);
+	}
+
+	.table-bulk-actions {
+		display: flex;
+		align-items: center;
+		gap: 8px;
+		font-size: var(--font-size-sm);
+		margin-top: var(--spacing-md);
+	}
+
+	.action-divider {
+		border: none;
+		border-left: 1px solid var(--color-gray);
+		margin: 0;
+		height: 15px;
+	}
+
+	.table-article {
+		margin: var(--spacing-md) 0;
+		padding-right: 12px;
+		overflow-x: auto;
+		overflow-y: hidden;
+	}
+
+	.table-article--padding {
+		padding-bottom: var(--spacing-md);
+	}
+
+	.table-main {
+		min-width: 100%;
+		border-spacing: 0;
+	}
+
+	.table-message {
+		margin-top: var(--spacing-xl);
+		text-align: center;
+		font-size: var(--font-size-xl);
+	}
+
+	.table-message--error {
+		color: var(--color-red-600);
+	}
+</style>

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

@@ -0,0 +1,45 @@
+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';
+declare function $$render<T>(): {
+    props: {
+        columns: ColumnDef<T, any>[];
+        isLoading?: boolean;
+        data?: T[];
+        minPageSize?: boolean;
+        enableChecked?: boolean;
+        enableExportExcel?: boolean;
+        enableGlobalSearch?: boolean;
+        enableColumnSearch?: boolean;
+        enableColumnVisibility?: boolean;
+        manualPagination?: boolean;
+        pagination?: Pagination;
+        excelSetting?: ExcelSetting;
+        header?: Snippet;
+        bulkActions?: Snippet<[selectedRows: T[]]>;
+        onpagechange?: (pageSize: number, pageNumber: number) => void;
+        onpagesizechange?: (pageSize: number) => 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 Table: $$IsomorphicComponent;
+type Table<T> = InstanceType<typeof Table<T>>;
+export default Table;

package/dist/Table/adapter/flex-render.svelte

@@ -0,0 +1,40 @@
+<script
+  lang="ts"
+  generics="TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>"
+>
+  import type {
+    CellContext,
+    ColumnDefTemplate,
+    HeaderContext,
+  } from "@tanstack/table-core";
+  import {
+    RenderComponentConfig,
+    RenderSnippetConfig,
+  } from "./render-component.js";
+
+  type Props = {
+    content?: TContext extends HeaderContext<TData, TValue>
+      ? ColumnDefTemplate<HeaderContext<TData, TValue>>
+      : TContext extends CellContext<TData, TValue>
+        ? ColumnDefTemplate<CellContext<TData, TValue>>
+        : never;
+    context: TContext;
+  };
+
+  let { content, context }: Props = $props();
+</script>
+
+{#if typeof content === "string"}
+  {content}
+{:else if content instanceof Function}
+  {@const result = content(context as any)}
+  {#if result instanceof RenderComponentConfig}
+    {@const { component: Component, props } = result}
+    <Component {...props} />
+  {:else if result instanceof RenderSnippetConfig}
+    {@const { snippet, params } = result}
+    {@render snippet(params)}
+  {:else}
+    {result}
+  {/if}
+{/if}

package/dist/Table/adapter/flex-render.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { CellContext, ColumnDefTemplate, HeaderContext } from "@tanstack/table-core";
+declare function $$render<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(): {
+    props: {
+        content?: TContext extends HeaderContext<TData, TValue> ? ColumnDefTemplate<HeaderContext<TData, TValue>> : TContext extends CellContext<TData, TValue> ? ColumnDefTemplate<CellContext<TData, TValue>> : never;
+        context: TContext;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>> {
+    props(): ReturnType<typeof $$render<TData, TValue, TContext>>['props'];
+    events(): ReturnType<typeof $$render<TData, TValue, TContext>>['events'];
+    slots(): ReturnType<typeof $$render<TData, TValue, TContext>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData, TValue, TContext>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData, TValue, TContext>['props']>, ReturnType<__sveltets_Render<TData, TValue, TContext>['events']>, ReturnType<__sveltets_Render<TData, TValue, TContext>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData, TValue, TContext>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData, TValue, TContext>['exports']>;
+    <TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>>(internal: unknown, props: ReturnType<__sveltets_Render<TData, TValue, TContext>['props']> & {}): ReturnType<__sveltets_Render<TData, TValue, TContext>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const FlexRender: $$IsomorphicComponent;
+type FlexRender<TData, TValue, TContext extends HeaderContext<TData, TValue> | CellContext<TData, TValue>> = InstanceType<typeof FlexRender<TData, TValue, TContext>>;
+export default FlexRender;

package/dist/Table/adapter/index.d.ts

@@ -0,0 +1,4 @@
+export * from '@tanstack/table-core';
+export { default as FlexRender } from './flex-render.svelte';
+export { renderComponent, renderSnippet } from './render-component.js';
+export { createSvelteTable } from './table.svelte';

package/dist/Table/adapter/index.js

@@ -0,0 +1,4 @@
+export * from '@tanstack/table-core';
+export { default as FlexRender } from './flex-render.svelte';
+export { renderComponent, renderSnippet } from './render-component.js';
+export { createSvelteTable } from './table.svelte';

package/dist/Table/adapter/render-component.d.ts

@@ -0,0 +1,13 @@
+import type { Component, ComponentProps, Snippet } from "svelte";
+export declare class RenderComponentConfig<TComponent extends Component> {
+    component: TComponent;
+    props: ComponentProps<TComponent> | Record<string, never>;
+    constructor(component: TComponent, props?: ComponentProps<TComponent> | Record<string, never>);
+}
+export declare class RenderSnippetConfig<TProps> {
+    snippet: Snippet<[TProps]>;
+    params: TProps;
+    constructor(snippet: Snippet<[TProps]>, params: TProps);
+}
+export declare const renderComponent: <TComponent extends Component<any>, TProps extends ComponentProps<TComponent>>(component: TComponent, props: TProps) => RenderComponentConfig<TComponent>;
+export declare const renderSnippet: <TProps>(snippet: Snippet<[TProps]>, params: TProps) => RenderSnippetConfig<TProps>;

package/dist/Table/adapter/render-component.js

@@ -0,0 +1,18 @@
+export class RenderComponentConfig {
+    component;
+    props;
+    constructor(component, props = {}) {
+        this.component = component;
+        this.props = props;
+    }
+}
+export class RenderSnippetConfig {
+    snippet;
+    params;
+    constructor(snippet, params) {
+        this.snippet = snippet;
+        this.params = params;
+    }
+}
+export const renderComponent = (component, props) => new RenderComponentConfig(component, props);
+export const renderSnippet = (snippet, params) => new RenderSnippetConfig(snippet, params);

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

@@ -0,0 +1,6 @@
+import { type RowData, type Table, type TableOptions } from "@tanstack/table-core";
+export declare function createSvelteTable<TData extends RowData>(options: TableOptions<TData>): Table<TData>;
+export declare function mergeObjects<T>(source: T): T;
+export declare function mergeObjects<T, U>(source: T, source1: U): T & U;
+export declare function mergeObjects<T, U, V>(source: T, source1: U, source2: V): T & U & V;
+export declare function mergeObjects<T, U, V, W>(source: T, source1: U, source2: V, source3: W): T & U & V & W;

package/dist/Table/adapter/table.svelte.js

@@ -0,0 +1,66 @@
+import { createTable, } from "@tanstack/table-core";
+export function createSvelteTable(options) {
+    const resolvedOptions = mergeObjects(createDefaultOptions(), options);
+    const table = createTable(resolvedOptions);
+    let state = $state(table.initialState);
+    function updateOptions() {
+        table.setOptions((prev) => {
+            return mergeObjects(prev, options, {
+                state: mergeObjects(state, options.state ?? {}),
+                onStateChange: (updater) => {
+                    if (updater instanceof Function) {
+                        state = updater(state);
+                    }
+                    else {
+                        state = mergeObjects(state, updater);
+                    }
+                    options.onStateChange?.(updater);
+                },
+            });
+        });
+    }
+    updateOptions();
+    $effect.pre(() => {
+        updateOptions();
+    });
+    return table;
+}
+function createDefaultOptions() {
+    return {
+        state: {},
+        onStateChange() { },
+        renderFallbackValue: null,
+        mergeOptions: (defaultOptions, options) => {
+            return mergeObjects(defaultOptions, options);
+        },
+    };
+}
+export function mergeObjects(...sources) {
+    const target = {};
+    for (let i = 0; i < sources.length; i++) {
+        let source = sources[i];
+        if (typeof source === "function")
+            source = source();
+        if (source) {
+            const descriptors = Object.getOwnPropertyDescriptors(source);
+            for (const key in descriptors) {
+                if (key in target)
+                    continue;
+                Object.defineProperty(target, key, {
+                    enumerable: true,
+                    get() {
+                        for (let i = sources.length - 1; i >= 0; i--) {
+                            let s = sources[i];
+                            if (typeof s === "function")
+                                s = s();
+                            const v = (s || {})[key];
+                            if (v !== undefined)
+                                return v;
+                        }
+                    },
+                });
+            }
+        }
+    }
+    return target;
+}