@lavalogic/scoria 0.0.1

package/dist/Components/Table/NestedTable.svelte

@@ -0,0 +1,86 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import Table from './Table.svelte';
+	import type { DefsWrapper } from './Types/Columns/DefsWrapper.js';
+	import { TableContext } from './Types/Context/TableContext.svelte.js';
+	import type { ITableInitOptions } from './Types/Context/TableInitOptions.js';
+	import { LocalTableDataRepository } from './Types/DataRepository/LocalTableDataRepository.svelte.js';
+	import { ToolbarPosition } from './Types/Toolbar/ToolbarPosition.js';
+
+	const defaultOptions: Omit<ITableInitOptions<object>, 'selectionExtractor' | 'getUserId'> = {
+		allowCopy: false,
+		enableResize: false,
+		allowColumnReordering: false,
+		allowQuickFiltering: true,
+		allowAdvancedFiltering: true,
+		toolbar: ToolbarPosition.None,
+		displayFooter: false
+	};
+
+	export interface NestedTableProps<T extends object> {
+		tableName: string;
+		data: T[];
+		columnDefWrapper: DefsWrapper<T>;
+		options: Pick<ITableInitOptions<T>, 'selectionExtractor'> & Partial<ITableInitOptions<T>>;
+		oncontextmenu?: (e: MouseEvent) => void;
+		getUserId: () => string | undefined;
+	}
+</script>
+
+<script lang="ts" generics="T extends object">
+	const {
+		tableName,
+		data,
+		columnDefWrapper,
+		options,
+		oncontextmenu,
+		getUserId
+	}: NestedTableProps<T> = $props();
+
+	const wrapper = {
+		get value() {
+			return data;
+		}
+	};
+
+	let root: HTMLDivElement | undefined = $state();
+	const maxWidth: number | undefined = $derived(
+		root?.closest('.flex_table')?.getBoundingClientRect().width
+	);
+
+	const dataRepo = $state(new LocalTableDataRepository(tableName, wrapper, getUserId));
+
+	const tableContext: TableContext<T> | undefined = $state(
+		TableContext.init<T>(columnDefWrapper, tableName, dataRepo, {
+			...defaultOptions,
+			...options,
+			getUserId
+		})
+	);
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="limit-height"
+	bind:this={root}
+	style={maxWidth != null ? `max-width: ${maxWidth}px` : ''}
+	oncontextmenu={(e) => {
+		e.stopPropagation();
+		oncontextmenu?.(e);
+	}}
+>
+	{#if tableContext}
+		<Table nested {tableContext} />
+	{/if}
+</div>
+
+<style>.limit-height {
+  box-shadow: inset 0px 7px 5px -6px #cbd4da, inset 0px -7px 5px -6px #cbd4da;
+  position: relative;
+  padding: 1.5rem;
+  background-color: #f4f7f9;
+  position: sticky;
+  left: 0;
+  z-index: 3;
+}</style>

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

@@ -0,0 +1,34 @@
+import type { DefsWrapper } from './Types/Columns/DefsWrapper.js';
+import type { ITableInitOptions } from './Types/Context/TableInitOptions.js';
+export interface NestedTableProps<T extends object> {
+    tableName: string;
+    data: T[];
+    columnDefWrapper: DefsWrapper<T>;
+    options: Pick<ITableInitOptions<T>, 'selectionExtractor'> & Partial<ITableInitOptions<T>>;
+    oncontextmenu?: (e: MouseEvent) => void;
+    getUserId: () => string | undefined;
+}
+declare function $$render<T extends object>(): {
+    props: NestedTableProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    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 object>(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 object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const NestedTable: $$IsomorphicComponent;
+type NestedTable<T extends object> = InstanceType<typeof NestedTable<T>>;
+export default NestedTable;

package/dist/Components/Table/Table.svelte

@@ -0,0 +1,555 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { browser } from '$app/environment';
+	import {
+		ContextMenuContext,
+		type IContextMenuOption
+	} from '../../Contexts/ContextMenuContext.svelte.js';
+	import { setContext, getContext, untrack, onMount, tick } from 'svelte';
+	import { SvelteMap } from 'svelte/reactivity';
+	import LoadingOverlay from '../LoadingOverlay.svelte';
+	import { TableContext } from './Types/Context/TableContext.svelte.js';
+	import { PaginationType } from './Types/Pagination/PaginationType.js';
+	import { ToolbarPosition } from './Types/Toolbar/ToolbarPosition.js';
+	import { refWrapper } from '../../Helpers/Helpers.svelte.js';
+	import TableHorizontalBar from './Misc/TableHorizontalBar.svelte';
+	import TableSidebar from './Misc/TableSidebar.svelte';
+	import TableFooter from './Misc/TableFooter.svelte';
+	import TableHead from './Headers/TableHead.svelte';
+	import TableBody from './Body/TableBody.svelte';
+	import { shownPopup } from './Body/Rows/Columns/ActionsCell.svelte';
+
+	declare global {
+		interface HTMLElementEventMap {
+			edit: CustomEvent<{
+				selectAll: boolean;
+			}>;
+		}
+	}
+
+	export interface TableProps<T extends object> {
+		tableContext: TableContext<T>;
+		nested?: boolean;
+	}
+
+	export const quickFilterContextIdentifier: symbol = Symbol();
+
+	const openedQuickFilterSelect = refWrapper(null);
+</script>
+
+<script lang="ts" generics="T extends object">
+	const { nested = false, tableContext }: TableProps<T> = $props();
+
+	setContext(TableContext.identifier, tableContext);
+
+	// const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+
+	const { openContextMenu: _openContextMenu } = getContext<ContextMenuContext>(
+		ContextMenuContext.identifier
+	);
+
+	let ref: HTMLDivElement | undefined = $state();
+	let unfocusRef: HTMLDivElement | undefined = $state();
+
+	setContext(quickFilterContextIdentifier, openedQuickFilterSelect);
+
+	$effect(() => {
+		if (tableContext.focusStart && ref) {
+			untrack(() => {
+				const { row, column: index } = tableContext.focusStart!;
+				let element = ref?.querySelector(
+					`#${tableContext.tableName}-cell-${row}-${tableContext.columnDefs[index].id}`
+				) as HTMLElement | undefined;
+
+				if (element?.tabIndex == -1) {
+					const td = element;
+					element = td.querySelector('button') as HTMLElement;
+					if (!element) {
+						element = td.querySelector('input') as HTMLElement;
+					}
+				}
+
+				element?.focus({ preventScroll: true });
+				element?.scrollIntoView({
+					behavior: 'instant',
+					block: 'nearest',
+					inline: 'nearest'
+				});
+			});
+		}
+	});
+
+	$effect(() => {
+		if (tableContext.focusEnd && ref) {
+			const { row, column: index } = tableContext.focusEnd;
+			const cell = ref.querySelector(
+				`#${tableContext.tableName}-cell-${row}-${tableContext.columnDefs[index].id}`
+			) as HTMLElement | undefined;
+
+			cell?.scrollIntoView({
+				behavior: 'instant',
+				block: 'nearest',
+				inline: 'nearest'
+			});
+		}
+	});
+
+	$effect(() => {
+		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+		tableContext.dataRepo?.data?.length;
+		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+		tableContext.selectedItems;
+		// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+		tableContext.paginationRepo?.pageStartIndex;
+
+		untrack(() => {
+			tableContext.recalculateAllSelectedInCurrentPage();
+		});
+	});
+
+	function openContextMenu(e: MouseEvent) {
+		e.stopPropagation();
+
+		if (
+			(e.target as HTMLElement).tagName === 'INPUT' ||
+			(e.target as HTMLElement).closest('.select-wrapper') != null
+		) {
+			return;
+		}
+
+		const clickedElement = document.activeElement?.id.split('-cell-')[1]?.split('-');
+
+		if (clickedElement) {
+			const [rowString, columnId] = clickedElement;
+			const row = parseInt(rowString);
+			if (
+				!tableContext.focusedColumnIds.has(columnId) ||
+				!tableContext.focusedRowIndexIds.has(row)
+			) {
+				const columnIndex = tableContext.columnDefs.find((it) => it.id === columnId)?.index;
+
+				if (columnIndex) {
+					tableContext.moveFocus({
+						column: columnIndex,
+						row,
+						id: columnId
+					});
+				}
+			}
+		}
+
+		if (tableContext.allowCopy && window.Clipboard) {
+			e.preventDefault();
+
+			const options: IContextMenuOption[] = [
+				{ callback: () => tableContext.copyDataToClipboard(), text: 'Copy Selection' }
+			];
+
+			if (tableContext.hasHighlightedItems) {
+				options.push({
+					callback: () => tableContext.copyHighlightedRowsToClipboard(),
+					text: 'Copy Highlighted Rows'
+				});
+			}
+
+			_openContextMenu(e, options);
+		}
+	}
+
+	function handleClickOutside(e: MouseEvent) {
+		const target = e.target as HTMLElement;
+		if (target.isConnected) {
+			if (target.closest('div.floating') == null && target.closest('div.stick-right') == null) {
+				openedQuickFilterSelect.value = null;
+			}
+
+			if (target.closest('div.slot-wrapper') == null) {
+				shownPopup.value = undefined;
+			}
+		}
+	}
+
+	// nested table resizing
+	let isResizing = $state(false);
+	let remPxRatio = $state(0);
+	const minNestedHeight = $derived(20 * remPxRatio);
+
+	// HACK please figure this one out
+	// let nestedHeight = $state(minNestedHeight);
+
+	//intentionally not using derived here as we sometimes need to manually change it
+	// while also allowing it to auto-pickup min height mutations
+	// eslint-disable-next-line svelte/prefer-writable-derived
+	let nestedHeight = $state(0);
+
+	$effect(() => {
+		nestedHeight = minNestedHeight;
+	});
+
+	let tableRef: HTMLDivElement | undefined = undefined;
+	let mousedDownEmptySpace = $state(false);
+
+	onMount(() => {
+		remPxRatio = parseFloat(getComputedStyle(document.documentElement).fontSize);
+	});
+
+	// eslint-disable-next-line @typescript-eslint/no-unused-vars
+	function addOverrideResizeHandler(e: MouseEvent) {
+		isResizing = true;
+		window.addEventListener('mousemove', onResize);
+	}
+
+	function onResize(e: MouseEvent) {
+		const sliderHeight = tableRef ? e.clientY - tableRef.getBoundingClientRect().top : 0;
+		nestedHeight = Math.max(sliderHeight, minNestedHeight);
+	}
+
+	function removeOverrideResizeHandler() {
+		isResizing = false;
+		window.removeEventListener('mousemove', onResize);
+	}
+
+	const usesLoading = $derived(
+		tableContext.paginationRepo &&
+			tableContext.paginationRepo.paginationType === PaginationType.Remote
+	);
+
+	const shouldUnfocusRemote = $derived(
+		usesLoading &&
+			tableContext.paginationRepo?.isLoading === false &&
+			tableContext.paginationRepo!.paginationState?.pageIndex !==
+				tableContext.paginationRepo.previouslyViewedPage
+	);
+
+	const shouldUnfocusLocal = $derived(
+		!usesLoading && tableContext.paginationRepo?.paginationState?.pageIndex
+	);
+
+	$effect(() => {
+		if ((shouldUnfocusRemote || shouldUnfocusLocal) && unfocusRef) {
+			untrack(() => tableContext.unfocus());
+			unfocusRef.scrollTop = 0;
+		} else if (usesLoading && tableContext.paginationRepo!.isLoading === false) {
+			// refocus same element after a reload
+			// this does not break mutifocus
+			untrack(() => {
+				const fs = tableContext.focusStart;
+				if (!fs) {
+					return;
+				}
+				const idToFocusTo = `#${tableContext.tableName}-cell-${fs.row}-${fs.id}`;
+
+				tick().then(() => {
+					if (idToFocusTo && browser) {
+						(document.querySelector(idToFocusTo) as HTMLTableCellElement | undefined)?.focus();
+					}
+				});
+			});
+		}
+	});
+
+	$effect(() => {
+		if (tableContext.dataRepo?.data) {
+			untrack(() => {
+				if (
+					tableContext.paginationRepo?.paginationState.pageIndex != undefined &&
+					tableContext.paginationRepo?.paginationState.pageSize != undefined
+				) {
+					tableContext.updateSelectedItems();
+					tableContext.resetHighlightedRows();
+				}
+			});
+		}
+	});
+
+	const leftTotalSize = $derived(tableContext.table.getLeftTotalSize());
+	const centreTotalSize = $derived(tableContext.table.getCenterTotalSize());
+	const rightTotalSize = $derived(tableContext.table.getRightTotalSize());
+</script>
+
+<svelte:window
+	onmouseup={(e) => {
+		if (
+			// if it's not a click on an item in the context menu
+			!(e.target as HTMLElement | undefined)?.classList?.contains('context-menu-item') &&
+			// if it's outside the table or inside the empty space of the table
+			(e.target === unfocusRef ||
+				((e.target as HTMLElement | undefined)?.closest?.('.table-wrapper') == null &&
+					mousedDownEmptySpace))
+		) {
+			tableContext.unfocus();
+		}
+		mousedDownEmptySpace = false;
+
+		if (tableContext.isMousingDown) {
+			tableContext.isMousingDown = false;
+		}
+
+		removeOverrideResizeHandler();
+	}}
+	onclick={(e) => {
+		handleClickOutside(e);
+	}}
+	onmousedown={(e) => {
+		mousedDownEmptySpace =
+			e.target === unfocusRef || (e.target as HTMLElement).closest('.table-wrapper') == null;
+	}}
+/>
+
+<div class="grid" class:nested>
+	{#if tableContext.dataRepo?.isLoading}
+		<LoadingOverlay absolute borderRadius="4px" />
+	{/if}
+
+	<div class="horizontal-bar" class:border={tableContext.toolbarPosition === ToolbarPosition.Top}>
+		{#if tableContext.toolbarPosition === ToolbarPosition.Top}
+			<TableHorizontalBar />
+		{/if}
+	</div>
+
+	<div
+		class="sidebar-wrapper sidebar-wrapper-left"
+		class:nested
+		style="--nested-height: {nestedHeight}px;"
+	>
+		{#if tableContext.toolbarPosition === ToolbarPosition.Left}
+			<div class="sidebar toolbar-left">
+				<TableSidebar />
+			</div>
+		{/if}
+	</div>
+	<div
+		class="sidebar-wrapper sidebar-wrapper-right"
+		class:nested
+		style="--nested-height: {nestedHeight}px;"
+	>
+		{#if tableContext.toolbarPosition === ToolbarPosition.Right}
+			<div class="sidebar toolbar-right">
+				<TableSidebar />
+			</div>
+		{/if}
+	</div>
+
+	<div class="footer">
+		{#if tableContext.displayFooter}
+			<TableFooter />
+		{/if}
+	</div>
+
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		bind:this={tableRef}
+		class="datatable"
+		class:nested
+		class:compact={tableContext.isCompact}
+		class:quick-filtering={tableContext.showQuickFiltering}
+		onkeydown={tableContext.handleTdKeydown}
+	>
+		<div class="flex_table" bind:this={ref} class:nested>
+			<div bind:this={unfocusRef} class="table-wrapper" oncontextmenu={openContextMenu}>
+				<!-- {#if leftTotalSize > 0} -->
+				<table class="datatable__table left" style="min-width: {leftTotalSize}px">
+					<TableHead showHighlight={leftTotalSize > 0} side="left" />
+					<TableBody side="left" />
+				</table>
+				<!-- {/if} -->
+
+				<!-- {#if centreTotalSize > 0} -->
+
+				<table class="datatable__table centre" style="min-width: {centreTotalSize}px">
+					<TableHead showHighlight={leftTotalSize == 0} side="centre" />
+					<TableBody side="centre" />
+				</table>
+				<!-- {/if} -->
+
+				<!-- {#if rightTotalSize > 0} -->
+				<table class="datatable__table right" style="min-width: {rightTotalSize}px">
+					<TableHead showHighlight={false} side="right" />
+					<TableBody side="right" />
+				</table>
+				<!-- {/if} -->
+			</div>
+
+			<!-- TODO add filter callbacks -->
+		</div>
+
+		{#if nested}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class:isResizing
+				class="resizer"
+				onmousedown={(e) => {
+					e.preventDefault();
+					addOverrideResizeHandler(e);
+				}}
+			></div>
+		{/if}
+	</div>
+</div>
+
+<style>div.grid {
+  border-radius: 4px;
+  display: grid;
+  grid-template-columns: [left-sidebar-start] auto [left-sidebar-end main-start] minmax(0, 1fr) [main-end right-sidebar-start] auto [right-sidebar-end];
+  grid-template-rows: [header-start] auto [header-end main-start] minmax(0, 1fr) [main-end footer-start] auto [footer-end];
+  width: 100%;
+  max-height: 100%;
+  flex-grow: 1;
+  grid-template-areas: "sidebar-left header sidebar-right" "sidebar-left main sidebar-right" "sidebar-left footer sidebar-right";
+}
+div.grid:not(.nested) {
+  min-height: 300px;
+}
+div.grid .horizontal-bar {
+  grid-area: header;
+}
+div.grid .horizontal-bar.border {
+  border: solid 2px #cbd4da;
+  border-radius: 4px;
+  margin-bottom: 1rem;
+}
+div.grid .sidebar-wrapper-left {
+  grid-area: sidebar-left;
+}
+div.grid .sidebar-wrapper-left:not(:empty) {
+  margin-right: 1rem;
+}
+div.grid .sidebar-wrapper-right {
+  grid-area: sidebar-right;
+}
+div.grid .sidebar-wrapper-right:not(:empty) {
+  margin-left: 1rem;
+}
+div.grid .footer {
+  grid-area: footer;
+  border: solid 2px #cbd4da;
+  border-top: none;
+  border-bottom-left-radius: 4px;
+  border-bottom-right-radius: 4px;
+}
+div.grid .datatable {
+  border: solid 2px #cbd4da;
+  border-bottom: none;
+  border-top-left-radius: 4px;
+  border-top-right-radius: 4px;
+}
+
+div.resizer {
+  position: absolute;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  border: solid 2px transparent;
+  z-index: 99999;
+  height: 2px;
+  width: 100%;
+  cursor: row-resize;
+}
+div.resizer.isResizing {
+  border-color: rgba(31, 129, 160, 0.4);
+  opacity: 1;
+}
+
+.right {
+  border-left: solid 2px #3a4952;
+}
+
+div.sidebar-wrapper {
+  display: flex;
+  flex-flow: row nowrap;
+  flex-shrink: 2;
+  flex-basis: 100%;
+  gap: 0.5rem;
+  position: relative;
+  width: 100%;
+  overscroll-behavior: contain;
+  height: 100%;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+div.sidebar-wrapper .sidebar {
+  display: flex;
+  flex-flow: row nowrap;
+}
+div.sidebar-wrapper .sidebar.toolbar-left {
+  border: solid 2px #cbd4da;
+  border-radius: 4px;
+  order: -1;
+}
+div.sidebar-wrapper .sidebar.toolbar-right {
+  border: solid 2px #cbd4da;
+  border-radius: 4px;
+}
+
+.flex_table {
+  display: flex;
+  flex: 1;
+  justify-content: space-between;
+  flex-flow: row nowrap;
+  max-height: 100%;
+  min-height: 1px;
+}
+
+.table-wrapper {
+  background-color: #f4f7f9;
+  flex-basis: 100%;
+  align-items: baseline;
+  display: flex;
+  position: relative;
+  flex-grow: 2;
+  max-height: 100%;
+  scroll-padding-top: calc(3rem + 0px);
+}
+
+.datatable {
+  --line-height: 3;
+  --checkbox-height: 1.6rem;
+  --height: 3rem;
+  --max-height: 3rem;
+  overflow-x: auto;
+  width: 100%;
+  color: #3a4952;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+  flex-grow: 1;
+  --progress-bar-radius: 18px;
+}
+.datatable.quick-filtering {
+  --quick-filter-height: 3rem;
+}
+.datatable.compact {
+  --line-height: 2;
+  --height: 1.75rem;
+  --max-height: 1.75rem;
+  --progress-bar-radius: 12px;
+}
+.datatable.compact.quick-filtering {
+  --quick-filter-height: 1.75rem;
+}
+.datatable.nested {
+  max-height: var(--nested-height, 20rem);
+}
+
+.datatable__table {
+  table-layout: fixed;
+  border-collapse: collapse;
+  border-spacing: 0;
+  text-align: left;
+}
+.datatable__table.left {
+  position: sticky;
+  z-index: 2;
+  left: 0;
+}
+.datatable__table.centre {
+  z-index: 1;
+  flex-grow: 10;
+}
+.datatable__table.right {
+  position: sticky;
+  z-index: 2;
+  right: 0;
+}</style>

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

@@ -0,0 +1,37 @@
+import { TableContext } from './Types/Context/TableContext.svelte.js';
+declare global {
+    interface HTMLElementEventMap {
+        edit: CustomEvent<{
+            selectAll: boolean;
+        }>;
+    }
+}
+export interface TableProps<T extends object> {
+    tableContext: TableContext<T>;
+    nested?: boolean;
+}
+export declare const quickFilterContextIdentifier: symbol;
+declare function $$render<T extends object>(): {
+    props: TableProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    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 object>(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 object>(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 extends object> = InstanceType<typeof Table<T>>;
+export default Table;