@lavalogic/scoria 0.39.2 → 0.40.0

package/dist/Components/Table/Body/Rows/TableRow.svelte

@@ -1,292 +1,292 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, RowIdType extends Primitive"
->
-	import type { ScoriaStorageKey } from '../../../../Types/Internal/Misc.js';
-	import { dev } from '$app/environment';
-	import { devCatch, generateWeakId } from '../../../../Helpers/Helpers.svelte.js';
-	import { getContext, untrack } from 'svelte';
-	import NestedTable from '../../NestedTable.svelte';
-	import type { ExpandDef } from '../../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
-	import type { DefsWrapper } from '../../Types/Columns/DefsWrapper.js';
-	import type { TableCell } from '../../Types/Columns/TableCell.js';
-	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
-	import { type Primitive } from '../../Types/Context/TableInitOptions.js';
-	import ColumnHighlight from './ColumnHighlight.svelte';
-	import TableColumn from './Columns/TableColumn.svelte';
-	import type { TableRowProps } from './TableRowProps.js';
-
-	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
-
-	const { row, odd = false, includeHighlight }: TableRowProps<T> = $props();
-
-	const hoverable = $derived(tableContext.changeColourOnHover);
-
-	// Visible cells in display order: left-pinned -> centre -> right-pinned.
-	// The browser now handles row-height alignment natively because all
-	// cells live in the same grid row, so the previous per-side fan-out
-	// and height-reconciliation pool is gone.
-	const leftCells: Array<TableCell<T>> = $derived(row.getLeftVisibleCells());
-	const centreCells: Array<TableCell<T>> = $derived(row.getCenterVisibleCells());
-	const rightCells: Array<TableCell<T>> = $derived(row.getRightVisibleCells());
-
-	// Cumulative pinning offsets for the sticky-positioned cells. Reads
-	// rendered widths from `_columnRenderedWidths` (populated by the
-	// ResizeObserver in TableHead) so the sticky positions stay
-	// accurate even though each pinned column track uses
-	// `minmax(W, 1fr)` and the actual width can exceed `columnDef.width`.
-	function renderedWidth(cell: TableCell<T>): number {
-		return tableContext._columnRenderedWidths.get(cell.column.id) ?? cell.column.columnDef.width;
-	}
-
-	const leftOffsets: Array<number> = $derived.by(() => {
-		void tableContext._columnRenderedWidths.size;
-		const offsets: Array<number> = [];
-		let cumulative = includeHighlight ? 20 : 0;
-		for (const cell of leftCells) {
-			offsets.push(cumulative);
-			cumulative += renderedWidth(cell);
-		}
-		return offsets;
-	});
-
-	const rightOffsets: Array<number> = $derived.by(() => {
-		void tableContext._columnRenderedWidths.size;
-		const offsets = new Array<number>(rightCells.length).fill(0);
-		let cumulative = 0;
-		for (let i = rightCells.length - 1; i >= 0; i--) {
-			offsets[i] = cumulative;
-			cumulative += renderedWidth(rightCells[i]);
-		}
-		return offsets;
-	});
-
-	let expandedColumnDef: ExpandDef<T, object> | undefined = $state();
-
-	$effect(() => {
-		if (leftCells.length + centreCells.length + rightCells.length > 0) {
-			void tableContext.table.data;
-			void tableContext.paginationRepo?.paginationState.pageIndex;
-			void tableContext.paginationRepo?.paginationState.pageSize;
-			untrack(() => {
-				expandedColumnDef = undefined;
-			});
-		}
-	});
-
-	let innerDataPromise: Array<object> | Promise<Array<object>> | undefined = $state();
-	let innerColumnDefs: DefsWrapper<object> = $state({ defs: [] });
-	let innerTableName: ScoriaStorageKey | undefined = $state();
-
-	let prevExpandedColumnDef: ExpandDef<T, object> | undefined = $state();
-
-	const firstCell = $derived(leftCells.at(0) ?? centreCells.at(0) ?? rightCells.at(0));
-	const rowIndex = $derived(firstCell?.row.visibleIndex);
-	let id = $state<RowIdType | undefined>();
-	const highlighted = $derived(id != undefined && tableContext.highlightedItems.has(id));
-
-	$effect(() => {
-		void row.original;
-		void tableContext.selectionExtractor;
-
-		if (rowIndex != undefined) {
-			const maybePromise = tableContext.selectionExtractor(row.original);
-			if (maybePromise instanceof Promise) {
-				maybePromise
-					.then((it) => {
-						id = it;
-					})
-					.catch(devCatch);
-			} else {
-				id = maybePromise;
-			}
-		} else {
-			id = undefined;
-		}
-	});
-
-	const showHighlightButton = $derived(rowIndex != null && includeHighlight);
-
-	$effect(() => {
-		void expandedColumnDef;
-
-		untrack(() => {
-			// Guard: if all columns have been hidden the cells arrays are
-			// empty; `firstCell` would otherwise be undefined.
-			if (!firstCell) {
-				return;
-			}
-			if (expandedColumnDef && expandedColumnDef.id != prevExpandedColumnDef?.id) {
-				prevExpandedColumnDef = expandedColumnDef;
-				innerColumnDefs = expandedColumnDef.getInnerColumnDefs(
-					firstCell.row.original,
-					firstCell.row.originalIndex
-				);
-
-				innerDataPromise = expandedColumnDef.accessorFn(
-					firstCell.row.original,
-					firstCell.row.originalIndex
-				) as Promise<Array<object>>;
-				innerTableName = expandedColumnDef.innerTableName;
-			} else if (
-				!expandedColumnDef ||
-				tableContext.columnVisibility[expandedColumnDef.id] === false
-			) {
-				innerTableName = undefined;
-				expandedColumnDef = prevExpandedColumnDef = innerDataPromise = undefined;
-				innerColumnDefs = { defs: [] };
-			}
-		});
-	});
-
-	function onExpandChange(columnDef: ExpandDef<T, object>) {
-		if (expandedColumnDef?.id === columnDef.id) {
-			expandedColumnDef = undefined;
-		} else {
-			expandedColumnDef = columnDef;
-		}
-	}
-
-	// Stable fallback name used when an ExpandDef does not supply its own
-	// `innerTableName`. Generating this once per row prevents localStorage
-	// preset keys from accumulating UUID-keyed garbage every expand toggle.
-	const fallbackInnerTableName = generateWeakId<ScoriaStorageKey>();
-
-	/**
-	 * Inline style appended to a cell's `style="..."` when its column opts
-	 * into `wrapValue`. The hooks switch the leaf cell's `white-space`,
-	 * `overflow-x`, and `height` to wrap-friendly values. Implemented as
-	 * CSS-variable overrides so the table-cell-basic mixin in
-	 * `_mixins.scss` consumes them via `var(--cell-* , fallback)`.
-	 */
-	function cellWrapStyle(cell: TableCell<T>): string {
-		return cell.column.columnDef.wrapValue
-			? '--cell-white-space: normal; --cell-overflow-x: visible; --cell-height: auto; --cell-min-height: var(--height);'
-			: '';
-	}
-</script>
-
-<div
-	role="row"
-	class="datatable-row"
-	class:hoverable
-	class:alt={tableContext.alternateRowColours && odd}
-	class:highlighted
->
-	{#if showHighlightButton}
-		<div
-			role="cell"
-			class="cell highlight-cell pinned-left"
-			style="left: 0px"
-		>
-			<ColumnHighlight
-				rowIndex={rowIndex ??
-					(() => {
-						if (dev) {
-							console.error(`column had invalid row index: ${rowIndex}`);
-						}
-						return -1;
-					})()}
-				{highlighted}
-				toggleHighlightedRow={() => {
-					tableContext.toggleHighlightedRow(row.original)?.catch(devCatch);
-				}}
-			/>
-		</div>
-	{/if}
-	{#each leftCells as cell, index (cell.column.id)}
-		<div
-			role="cell"
-			class="cell pinned-left"
-			style="left: {leftOffsets[index]}px; {cellWrapStyle(cell)}"
-		>
-			<TableColumn
-				{cell}
-				{expandedColumnDef}
-				{onExpandChange}
-			/>
-		</div>
-	{/each}
-	{#each centreCells as cell (cell.column.id)}
-		<div
-			role="cell"
-			class="cell"
-			style={cellWrapStyle(cell)}
-		>
-			<TableColumn
-				{cell}
-				{expandedColumnDef}
-				{onExpandChange}
-			/>
-		</div>
-	{/each}
-	{#each rightCells as cell, index (cell.column.id)}
-		<div
-			role="cell"
-			class="cell pinned-right"
-			style="right: {rightOffsets[index]}px; {cellWrapStyle(cell)}"
-		>
-			<TableColumn
-				{cell}
-				{expandedColumnDef}
-				{onExpandChange}
-			/>
-		</div>
-	{/each}
-</div>
-
-{#if expandedColumnDef}
-	<div
-		role="row"
-		class="datatable-row expand-row"
-	>
-		<div
-			role="cell"
-			class="cell expand-cell"
-		>
-			{#await innerDataPromise}
-				loading&hellip;
-			{:then data}
-				{#if data && data.length}
-					{@const options = expandedColumnDef.innerTableOptions}
-					{#if innerTableName}
-						{#key innerTableName}
-							<NestedTable
-								tableName={innerTableName}
-								{data}
-								columnDefWrapper={innerColumnDefs}
-								{options}
-								getUserId={tableContext.getUserId}
-							/>
-						{/key}
-					{:else}
-						<NestedTable
-							tableName={fallbackInnerTableName}
-							{data}
-							columnDefWrapper={innerColumnDefs}
-							{options}
-							getUserId={tableContext.getUserId}
-						/>
-					{/if}
-				{:else if !data}
-					Error Fetching data
-				{:else}
-					No Data
-				{/if}
-			{:catch e}
-				{#if dev}
-					error: {e}
-					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-					{@debug e}
-				{/if}
-				Error Fetching data
-			{/await}
-		</div>
-	</div>
-{/if}
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, RowIdType extends Primitive"
+>
+	import type { ScoriaStorageKey } from '../../../../Types/Internal/Misc.js';
+	import { dev } from '$app/environment';
+	import { devCatch, generateWeakId } from '../../../../Helpers/Helpers.svelte.js';
+	import { getContext, untrack } from 'svelte';
+	import NestedTable from '../../NestedTable.svelte';
+	import type { ExpandDef } from '../../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
+	import type { DefsWrapper } from '../../Types/Columns/DefsWrapper.js';
+	import type { TableCell } from '../../Types/Columns/TableCell.js';
+	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
+	import { type Primitive } from '../../Types/Context/TableInitOptions.js';
+	import ColumnHighlight from './ColumnHighlight.svelte';
+	import TableColumn from './Columns/TableColumn.svelte';
+	import type { TableRowProps } from './TableRowProps.js';
+
+	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
+
+	const { row, odd = false, includeHighlight }: TableRowProps<T> = $props();
+
+	const hoverable = $derived(tableContext.changeColourOnHover);
+
+	// Visible cells in display order: left-pinned -> centre -> right-pinned.
+	// The browser now handles row-height alignment natively because all
+	// cells live in the same grid row, so the previous per-side fan-out
+	// and height-reconciliation pool is gone.
+	const leftCells: Array<TableCell<T>> = $derived(row.getLeftVisibleCells());
+	const centreCells: Array<TableCell<T>> = $derived(row.getCenterVisibleCells());
+	const rightCells: Array<TableCell<T>> = $derived(row.getRightVisibleCells());
+
+	// Cumulative pinning offsets for the sticky-positioned cells. Reads
+	// rendered widths from `_columnRenderedWidths` (populated by the
+	// ResizeObserver in TableHead) so the sticky positions stay
+	// accurate even though each pinned column track uses
+	// `minmax(W, 1fr)` and the actual width can exceed `columnDef.width`.
+	function renderedWidth(cell: TableCell<T>): number {
+		return tableContext._columnRenderedWidths.get(cell.column.id) ?? cell.column.columnDef.width;
+	}
+
+	const leftOffsets: Array<number> = $derived.by(() => {
+		void tableContext._columnRenderedWidths.size;
+		const offsets: Array<number> = [];
+		let cumulative = includeHighlight ? 20 : 0;
+		for (const cell of leftCells) {
+			offsets.push(cumulative);
+			cumulative += renderedWidth(cell);
+		}
+		return offsets;
+	});
+
+	const rightOffsets: Array<number> = $derived.by(() => {
+		void tableContext._columnRenderedWidths.size;
+		const offsets = new Array<number>(rightCells.length).fill(0);
+		let cumulative = 0;
+		for (let i = rightCells.length - 1; i >= 0; i--) {
+			offsets[i] = cumulative;
+			cumulative += renderedWidth(rightCells[i]);
+		}
+		return offsets;
+	});
+
+	let expandedColumnDef: ExpandDef<T, object> | undefined = $state();
+
+	$effect(() => {
+		if (leftCells.length + centreCells.length + rightCells.length > 0) {
+			void tableContext.table.data;
+			void tableContext.paginationRepo?.paginationState.pageIndex;
+			void tableContext.paginationRepo?.paginationState.pageSize;
+			untrack(() => {
+				expandedColumnDef = undefined;
+			});
+		}
+	});
+
+	let innerDataPromise: Array<object> | Promise<Array<object>> | undefined = $state();
+	let innerColumnDefs: DefsWrapper<object> = $state({ defs: [] });
+	let innerTableName: ScoriaStorageKey | undefined = $state();
+
+	let prevExpandedColumnDef: ExpandDef<T, object> | undefined = $state();
+
+	const firstCell = $derived(leftCells.at(0) ?? centreCells.at(0) ?? rightCells.at(0));
+	const rowIndex = $derived(firstCell?.row.visibleIndex);
+	let id = $state<RowIdType | undefined>();
+	const highlighted = $derived(id != undefined && tableContext.highlightedItems.has(id));
+
+	$effect(() => {
+		void row.original;
+		void tableContext.selectionExtractor;
+
+		if (rowIndex != undefined) {
+			const maybePromise = tableContext.selectionExtractor(row.original);
+			if (maybePromise instanceof Promise) {
+				maybePromise
+					.then((it) => {
+						id = it;
+					})
+					.catch(devCatch);
+			} else {
+				id = maybePromise;
+			}
+		} else {
+			id = undefined;
+		}
+	});
+
+	const showHighlightButton = $derived(rowIndex != null && includeHighlight);
+
+	$effect(() => {
+		void expandedColumnDef;
+
+		untrack(() => {
+			// Guard: if all columns have been hidden the cells arrays are
+			// empty; `firstCell` would otherwise be undefined.
+			if (!firstCell) {
+				return;
+			}
+			if (expandedColumnDef && expandedColumnDef.id != prevExpandedColumnDef?.id) {
+				prevExpandedColumnDef = expandedColumnDef;
+				innerColumnDefs = expandedColumnDef.getInnerColumnDefs(
+					firstCell.row.original,
+					firstCell.row.originalIndex
+				);
+
+				innerDataPromise = expandedColumnDef.accessorFn(
+					firstCell.row.original,
+					firstCell.row.originalIndex
+				) as Promise<Array<object>>;
+				innerTableName = expandedColumnDef.innerTableName;
+			} else if (
+				!expandedColumnDef ||
+				tableContext.columnVisibility[expandedColumnDef.id] === false
+			) {
+				innerTableName = undefined;
+				expandedColumnDef = prevExpandedColumnDef = innerDataPromise = undefined;
+				innerColumnDefs = { defs: [] };
+			}
+		});
+	});
+
+	function onExpandChange(columnDef: ExpandDef<T, object>) {
+		if (expandedColumnDef?.id === columnDef.id) {
+			expandedColumnDef = undefined;
+		} else {
+			expandedColumnDef = columnDef;
+		}
+	}
+
+	// Stable fallback name used when an ExpandDef does not supply its own
+	// `innerTableName`. Generating this once per row prevents localStorage
+	// preset keys from accumulating UUID-keyed garbage every expand toggle.
+	const fallbackInnerTableName = generateWeakId<ScoriaStorageKey>();
+
+	/**
+	 * Inline style appended to a cell's `style="..."` when its column opts
+	 * into `wrapValue`. The hooks switch the leaf cell's `white-space`,
+	 * `overflow-x`, and `height` to wrap-friendly values. Implemented as
+	 * CSS-variable overrides so the table-cell-basic mixin in
+	 * `_mixins.scss` consumes them via `var(--cell-* , fallback)`.
+	 */
+	function cellWrapStyle(cell: TableCell<T>): string {
+		return cell.column.columnDef.wrapValue
+			? '--cell-white-space: normal; --cell-overflow-x: visible; --cell-height: auto; --cell-min-height: var(--height);'
+			: '';
+	}
+</script>
+
+<div
+	role="row"
+	class="datatable-row"
+	class:hoverable
+	class:alt={tableContext.alternateRowColours && odd}
+	class:highlighted
+>
+	{#if showHighlightButton}
+		<div
+			role="cell"
+			class="cell highlight-cell pinned-left"
+			style="left: 0px"
+		>
+			<ColumnHighlight
+				rowIndex={rowIndex ??
+					(() => {
+						if (dev) {
+							console.error(`column had invalid row index: ${rowIndex}`);
+						}
+						return -1;
+					})()}
+				{highlighted}
+				toggleHighlightedRow={() => {
+					tableContext.toggleHighlightedRow(row.original)?.catch(devCatch);
+				}}
+			/>
+		</div>
+	{/if}
+	{#each leftCells as cell, index (cell.column.id)}
+		<div
+			role="cell"
+			class="cell pinned-left"
+			style="left: {leftOffsets[index]}px; {cellWrapStyle(cell)}"
+		>
+			<TableColumn
+				{cell}
+				{expandedColumnDef}
+				{onExpandChange}
+			/>
+		</div>
+	{/each}
+	{#each centreCells as cell (cell.column.id)}
+		<div
+			role="cell"
+			class="cell"
+			style={cellWrapStyle(cell)}
+		>
+			<TableColumn
+				{cell}
+				{expandedColumnDef}
+				{onExpandChange}
+			/>
+		</div>
+	{/each}
+	{#each rightCells as cell, index (cell.column.id)}
+		<div
+			role="cell"
+			class="cell pinned-right"
+			style="right: {rightOffsets[index]}px; {cellWrapStyle(cell)}"
+		>
+			<TableColumn
+				{cell}
+				{expandedColumnDef}
+				{onExpandChange}
+			/>
+		</div>
+	{/each}
+</div>
+
+{#if expandedColumnDef}
+	<div
+		role="row"
+		class="datatable-row expand-row"
+	>
+		<div
+			role="cell"
+			class="cell expand-cell"
+		>
+			{#await innerDataPromise}
+				loading&hellip;
+			{:then data}
+				{#if data && data.length}
+					{@const options = expandedColumnDef.innerTableOptions}
+					{#if innerTableName}
+						{#key innerTableName}
+							<NestedTable
+								tableName={innerTableName}
+								{data}
+								columnDefWrapper={innerColumnDefs}
+								{options}
+								getUserId={tableContext.getUserId}
+							/>
+						{/key}
+					{:else}
+						<NestedTable
+							tableName={fallbackInnerTableName}
+							{data}
+							columnDefWrapper={innerColumnDefs}
+							{options}
+							getUserId={tableContext.getUserId}
+						/>
+					{/if}
+				{:else if !data}
+					Error Fetching data
+				{:else}
+					No Data
+				{/if}
+			{:catch e}
+				{#if dev}
+					error: {e}
+					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+					{@debug e}
+				{/if}
+				Error Fetching data
+			{/await}
+		</div>
+	</div>
+{/if}
+
 <style>.datatable-row {
   display: grid;
   grid-template-columns: var(--cols);
@@ -351,4 +351,4 @@
   padding: 0;
   display: block;
   width: 100%;
-}</style>
+}</style>