@softwareone/spi-sv5-library 1.9.0 → 1.10.0

package/dist/Table/Header.svelte

@@ -0,0 +1,176 @@
+<script lang="ts" generics="T extends RowData">
+	import { Search } from '../index.js';
+	import { FlexRender, type HeaderGroup, type RowData } from './adapter/index.js';
+
+	interface Props {
+		headerGroups: HeaderGroup<T>[];
+		enableColumnSearch: boolean;
+	}
+
+	const getSortIcon: Record<string, string> = {
+		asc: 'arrow_upward',
+		desc: 'arrow_downward',
+		false: 'swap_vert'
+	};
+
+	let { headerGroups, enableColumnSearch }: Props = $props();
+</script>
+
+<thead class="container">
+	{#each headerGroups as headerGroup (headerGroup.id)}
+		<tr class="table-header-row">
+			{#each headerGroup.headers as header}
+				{@const alignColumn = header.column.columnDef.meta?.alignColumn}
+				{@const className = header.column.columnDef.meta?.className}
+				{@const columnWidth = header.column.columnDef.meta?.columnWidth}
+				{@const columnStyle = header.column.columnDef.meta?.style}
+				{@const hideColumnFilter = header.column.columnDef.meta?.hideColumnFilter}
+				{@const justifyContent = alignColumn ?? 'left'}
+				{@const isSorted = header.column.getIsSorted().toString() !== 'false'}
+				<th
+					colSpan={header.colSpan}
+					class={['table-header-cell', className, isSorted && 'table-header-cell--sorted']}
+					style:width={columnWidth}
+					style={columnStyle}
+				>
+					{#if !header.isPlaceholder}
+						{@const canSort = header.column.getCanSort()}
+
+						<button
+							type="button"
+							class={[
+								'table-header-button',
+								canSort && 'table-header-button--sortable',
+								!canSort && 'table-header-button--disabled'
+							]}
+							disabled={!canSort}
+							style:justify-content={justifyContent}
+							onclick={header.column.getToggleSortingHandler()}
+						>
+							<span class="table-header-label" class:table-header-label--sortable={canSort}>
+								<FlexRender
+									content={header.column.columnDef.header}
+									context={header.getContext()}
+								/>
+							</span>
+
+							{#if canSort}
+								<div class="table-header-sort-icon">
+									<span class="material-icons"
+										>{getSortIcon[header.column.getIsSorted().toString()]}</span
+									>
+								</div>
+							{/if}
+						</button>
+
+						{#if enableColumnSearch && !hideColumnFilter}
+							<div class="table-header-search" style:justify-content={justifyContent}>
+								<Search
+									oninput={({ currentTarget }) => header.column.setFilterValue(currentTarget.value)}
+									onclear={() => header.column.setFilterValue('')}
+									disabled={!header.column.getCanFilter()}
+								/>
+							</div>
+						{/if}
+					{/if}
+				</th>
+			{/each}
+		</tr>
+	{/each}
+</thead>
+
+<style>
+	.container {
+		--color-primary: #472aff;
+		--color-black: #000000;
+		--color-gray-100: #f3f4f6;
+		--color-gray-200: #e5e7eb;
+		--color-gray-300: #e0e5e8;
+		--spacing-xs: 4px;
+		--spacing-sm: 8px;
+		--spacing-md: 16px;
+		--font-size-xs: 12px;
+		--font-size-sm: 14px;
+		--font-bold: 700;
+		--font-normal: 400;
+	}
+
+	.table-header-cell:first-child {
+		border-left: 0.5px solid var(--color-gray-300);
+	}
+
+	.table-header-cell {
+		padding: var(--spacing-sm) var(--spacing-md);
+		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);
+		font-weight: var(--font-bold);
+	}
+
+	.table-header-cell:hover {
+		background: var(--color-gray-100);
+	}
+
+	.table-header-cell--sorted {
+		background: var(--color-gray-200);
+		color: var(--color-primary);
+	}
+
+	.table-header-button {
+		position: relative;
+		display: flex;
+		align-items: center;
+		width: 100%;
+		padding: 0;
+		border: none;
+		background: none;
+		font-size: inherit;
+		font-weight: inherit;
+		color: inherit;
+	}
+
+	.table-header-button--sortable {
+		cursor: pointer;
+	}
+
+	.table-header-button--disabled {
+		cursor: default;
+	}
+
+	.table-header-label {
+		white-space: nowrap;
+	}
+
+	.table-header-label--sortable {
+		margin-right: 16px;
+	}
+
+	@media (max-width: 750px) {
+		.table-header-label {
+			white-space: normal;
+		}
+	}
+
+	.table-header-sort-icon {
+		position: absolute;
+		right: -8px;
+		margin-top: 4px;
+	}
+
+	.table-header-sort-icon .material-icons {
+		font-size: var(--font-size-sm);
+	}
+
+	.table-header-search {
+		display: flex;
+		width: 144px;
+		margin: var(--spacing-xs) 0;
+		font-weight: var(--font-normal);
+	}
+
+	.table-header-search :global(.search-input) {
+		padding: var(--spacing-xs) 36px;
+		font-size: var(--font-size-xs);
+	}
+</style>

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

@@ -0,0 +1,28 @@
+import { type HeaderGroup, type RowData } from './adapter/index.js';
+declare function $$render<T extends RowData>(): {
+    props: {
+        headerGroups: HeaderGroup<T>[];
+        enableColumnSearch: boolean;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends RowData> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends RowData>(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 extends RowData>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Header: $$IsomorphicComponent;
+type Header<T extends RowData> = InstanceType<typeof Header<T>>;
+export default Header;

package/dist/Table/PageSize.svelte

@@ -0,0 +1,164 @@
+<script lang="ts" generics="T">
+	import type { Table } from './adapter/index.js';
+	import { DEFAULT_ITEMS_PER_PAGE_OPTIONS } from './consts.js';
+	import { getPaginationTableContext } from './context.js';
+
+	interface Props {
+		table: Table<T>;
+		minPageSize: boolean;
+	}
+
+	let { table, minPageSize }: Props = $props();
+
+	const paginationTable = getPaginationTableContext();
+
+	const rowsLength = $derived(
+		$paginationTable ? $paginationTable.totalItems : table.getFilteredRowModel().rows.length
+	);
+	const currentPageSize = $derived(table.getState().pagination.pageSize);
+	const currentPageIndex = $derived(table.getState().pagination.pageIndex);
+	const initialPageSize = $derived(currentPageIndex * currentPageSize);
+
+	const endPageSize = $derived.by(() => {
+		if ($paginationTable) {
+			const calculatedEnd = initialPageSize + currentPageSize;
+			return calculatedEnd > rowsLength ? rowsLength : calculatedEnd;
+		}
+		return table.getCanNextPage() ? initialPageSize + currentPageSize : rowsLength;
+	});
+</script>
+
+<div class="page-size" class:page-size--margin={!minPageSize}>
+	{#if !minPageSize && rowsLength > DEFAULT_ITEMS_PER_PAGE_OPTIONS[0]}
+		<div class="page-size-selector">
+			<span>Rows per page:</span>
+			<select
+				class="page-size-select"
+				name="rows-per-page"
+				id="rows-per-page"
+				title="Rows per page"
+				value={currentPageSize}
+				onchange={(e) => {
+					table.setPageSize(Number(e.currentTarget.value));
+				}}
+			>
+				{#each DEFAULT_ITEMS_PER_PAGE_OPTIONS as itemPerPage}
+					<option class="page-size-option" value={itemPerPage}>{itemPerPage}</option>
+				{/each}
+			</select>
+		</div>
+	{/if}
+	<span
+		>{rowsLength !== 0 ? `${initialPageSize + 1}-${endPageSize} of ${rowsLength}` : rowsLength} rows</span
+	>
+</div>
+
+<style>
+	.page-size {
+		--color-black: #000000;
+		--color-primary: #472aff;
+		--color-gray-100: #f3f4f6;
+		--color-gray-200: #e5e7eb;
+		--color-border: #ebedef;
+		--spacing-sm: 8px;
+		--spacing-md: 12px;
+		--spacing-lg: 24px;
+		--radius-lg: 8px;
+		--font-medium: 500;
+		--font-semibold: 600;
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--spacing-lg);
+	}
+
+	@media (max-width: 750px) {
+		.page-size {
+			margin-top: 20px;
+		}
+
+		.page-size--margin {
+			margin-left: 12px;
+		}
+	}
+
+	.page-size-selector {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	.page-size-select {
+		width: 64px;
+		padding: var(--spacing-sm);
+		border-radius: var(--radius-lg);
+		font-weight: var(--font-semibold);
+		cursor: pointer;
+		border: none;
+		background: transparent;
+	}
+
+	.page-size-select:hover {
+		background: var(--color-gray-100);
+	}
+
+	.page-size-select:focus {
+		outline: none;
+	}
+
+	.page-size-option {
+		gap: 20px;
+		padding: 4px 16px;
+		font-weight: var(--font-medium);
+		border-right: 2px solid var(--color-border);
+		border-left: 2px solid var(--color-border);
+	}
+
+	.page-size-option:hover {
+		background: var(--color-gray-200);
+	}
+
+	.page-size-option:first-of-type {
+		border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+		border-top: 2px solid var(--color-border);
+	}
+
+	.page-size-option:last-of-type {
+		border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+		border-bottom: 2px solid var(--color-border);
+	}
+
+	select,
+	::picker(select) {
+		appearance: base-select;
+	}
+
+	select::picker-icon {
+		content: '\e5e1';
+		font-family: 'Material Icons';
+		color: var(--color-black);
+		margin-left: 5px;
+		display: inline-flex;
+		align-items: center;
+		transform: rotate(90deg);
+		transition: transform 0.4s ease;
+	}
+
+	option::checkmark {
+		content: '\e5ca';
+		font-family: 'Material Icons';
+		order: 1;
+		margin-left: auto;
+		color: var(--color-primary);
+	}
+
+	select:open::picker-icon {
+		transform: rotate(270deg);
+	}
+
+	::picker(select) {
+		border: none;
+		border-radius: var(--radius-lg);
+	}
+</style>

package/dist/Table/PageSize.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 PageSize: $$IsomorphicComponent;
+type PageSize<T> = InstanceType<typeof PageSize<T>>;
+export default PageSize;

package/dist/Table/Pagination.svelte

@@ -0,0 +1,145 @@
+<script lang="ts" generics="T">
+	import { Tooltip } from '../index.js';
+	import type { Table } from './adapter/index.js';
+
+	interface Props {
+		table: Table<T>;
+	}
+
+	let { table }: Props = $props();
+
+	const initialPage = $derived(table.getState().pagination.pageIndex + 1);
+
+	const handlePaginationChange = (event: Event) => {
+		const input = event.currentTarget as HTMLInputElement;
+		if (input.value) {
+			const value = Number(input.value);
+			if (value > 0 && value <= table.getPageCount()) {
+				table.setPageIndex(value - 1);
+			} else {
+				input.value = '';
+			}
+
+			resizeCurrentPageHtml(input);
+		}
+	};
+
+	const handleInput = (event: Event) => {
+		const input = event.currentTarget as HTMLInputElement;
+		input.value = input.value.replace(/[^0-9]/g, '');
+		resizeCurrentPageHtml(input);
+	};
+
+	const resizeCurrentPageHtml = (htmlInputElement: HTMLInputElement) => {
+		htmlInputElement.style.width =
+			htmlInputElement.value.length > 2 ? `${htmlInputElement.value.length * 14}px` : '36px';
+	};
+</script>
+
+<div class="pagination">
+	<button
+		type="button"
+		class="pagination-button"
+		onclick={() => table.previousPage()}
+		disabled={!table.getCanPreviousPage()}
+	>
+		<span class="pagination-icon material-icons">arrow_back</span>
+		<span>Previous</span>
+	</button>
+	<div class="pagination-info">
+		<span>Page</span>
+		{#if table.getPageCount() > 1}
+			<Tooltip content="Enter page number" width="sm" position="bottom">
+				<input
+					type="text"
+					onchange={handlePaginationChange}
+					oninput={handleInput}
+					class="pagination-input"
+					value={initialPage}
+				/>
+			</Tooltip>
+		{:else}
+			<span>{initialPage}</span>
+		{/if}
+		<span>of {table.getPageCount() !== 0 ? table.getPageCount() : initialPage}</span>
+	</div>
+
+	<button
+		type="button"
+		class="pagination-button"
+		onclick={() => table.nextPage()}
+		disabled={!table.getCanNextPage()}
+	>
+		<span>Next</span>
+		<span class="pagination-icon material-icons">arrow_forward</span>
+	</button>
+</div>
+
+<style>
+	.pagination {
+		--color-primary: #472aff;
+		--color-gray-300: #d1d5db;
+		--color-gray-500: #6b7280;
+		--color-text: #000000;
+		--spacing-sm: 8px;
+		--spacing-md: 12px;
+		--spacing-lg: 24px;
+		--radius-lg: 8px;
+		--font-size-sm: 14px;
+		--font-size-icon: 14px;
+		--input-height: 37px;
+		--input-width: 38px;
+
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: var(--spacing-lg);
+		padding: var(--spacing-sm) 0;
+	}
+
+	.pagination-button {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-sm);
+		padding: 0;
+		border: none;
+		background: none;
+		font-size: var(--font-size-sm);
+		color: var(--color-text);
+		cursor: pointer;
+	}
+
+	.pagination-button:disabled {
+		color: var(--color-gray-300);
+		cursor: not-allowed;
+	}
+
+	.pagination-icon {
+		font-size: var(--font-size-icon);
+	}
+
+	.pagination-info {
+		display: flex;
+		align-items: center;
+		gap: var(--spacing-sm);
+	}
+
+	.pagination-input {
+		height: var(--input-height);
+		width: var(--input-width);
+		padding: 0;
+		border: 1px solid var(--color-gray-500);
+		border-radius: var(--radius-lg);
+		text-align: center;
+		cursor: pointer;
+	}
+
+	.pagination-input:hover {
+		border-color: var(--color-primary);
+	}
+
+	.pagination-input:focus {
+		border: 1px solid var(--color-primary);
+		outline: none;
+	}
+</style>

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

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

package/dist/Table/RowCheckBox.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+	interface Props {
+		indeterminate?: boolean;
+		checked: boolean;
+		disabled?: boolean;
+		onchange: (event: Event) => void;
+	}
+
+	let { indeterminate = false, checked, disabled = false, onchange }: Props = $props();
+</script>
+
+<input
+	type="checkbox"
+	class="accent-magentablue"
+	{disabled}
+	{onchange}
+	{checked}
+	bind:indeterminate
+/>
+
+<style>
+	.accent-magentablue {
+		accent-color: #472aff;
+		cursor: pointer;
+	}
+
+	.accent-magentablue:disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+</style>

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

@@ -0,0 +1,9 @@
+interface Props {
+    indeterminate?: boolean;
+    checked: boolean;
+    disabled?: boolean;
+    onchange: (event: Event) => void;
+}
+declare const RowCheckBox: import("svelte").Component<Props, {}, "">;
+type RowCheckBox = ReturnType<typeof RowCheckBox>;
+export default RowCheckBox;