@lavalogic/scoria 0.40.13 → 0.40.15

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

@@ -1,297 +1,254 @@
-<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;
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, RowIdType extends Primitive"
+>import { dev } from "$app/environment";
+import { devCatch, generateWeakId } from "../../../../Helpers/Helpers.svelte.js";
+import { getContext, untrack } from "svelte";
+import NestedTable from "../../NestedTable.svelte";
+import { TableContext } from "../../Types/Context/TableContext.svelte.js";
+import "../../Types/Context/TableInitOptions.js";
+import ColumnHighlight from "./ColumnHighlight.svelte";
+import TableColumn from "./Columns/TableColumn.svelte";
+const tableContext = getContext(TableContext.identifier);
+const { row, odd = false, includeHighlight } = $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 = $derived(row.getLeftVisibleCells());
+const centreCells = $derived(row.getCenterVisibleCells());
+const rightCells = $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) {
+	return tableContext._columnRenderedWidths.get(cell.column.id) ?? cell.column.columnDef.width;
+}
+const leftOffsets = $derived.by(() => {
+	void tableContext._columnRenderedWidths.size;
+	const offsets = [];
+	let cumulative = includeHighlight ? 20 : 0;
+	for (const cell of leftCells) {
+		offsets.push(cumulative);
+		cumulative += renderedWidth(cell);
 	}
-
-	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>();
-	// Transient click/copy highlight OR the declarative, persistent
-	// `highlightRow` predicate (reactive; survives data/pagination resets).
-	const highlighted = $derived(
-		(id != undefined && tableContext.highlightedItems.has(id)) ||
-			(tableContext.highlightRow ? tableContext.highlightRow(row.original, rowIndex ?? 0) : false)
-	);
-
-	$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;
-
+	return offsets;
+});
+const rightOffsets = $derived.by(() => {
+	void tableContext._columnRenderedWidths.size;
+	const offsets = new Array(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 = $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(() => {
-			// 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;
+		});
+	}
+});
+let innerDataPromise = $state();
+let innerColumnDefs = $state({ defs: [] });
+let innerTableName = $state();
+let prevExpandedColumnDef = $state();
+const firstCell = $derived(leftCells.at(0) ?? centreCells.at(0) ?? rightCells.at(0));
+const rowIndex = $derived(firstCell?.row.visibleIndex);
+let id = $state();
+// Transient click/copy highlight OR the declarative, persistent
+// `highlightRow` predicate (reactive; survives data/pagination resets).
+const highlighted = $derived(id != undefined && tableContext.highlightedItems.has(id) || (tableContext.highlightRow ? tableContext.highlightRow(row.original, rowIndex ?? 0) : false));
+$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 {
-			expandedColumnDef = columnDef;
+			id = maybePromise;
 		}
+	} else {
+		id = undefined;
 	}
-
-	// 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);'
-			: '';
+});
+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);
+			innerTableName = expandedColumnDef.innerTableName;
+		} else if (!expandedColumnDef || tableContext.columnVisibility[expandedColumnDef.id] === false) {
+			innerTableName = undefined;
+			expandedColumnDef = prevExpandedColumnDef = innerDataPromise = undefined;
+			innerColumnDefs = { defs: [] };
+		}
+	});
+});
+function onExpandChange(columnDef) {
+	if (expandedColumnDef?.id === columnDef.id) {
+		expandedColumnDef = undefined;
+	} else {
+		expandedColumnDef = columnDef;
 	}
-</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}
-
+}
+// 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();
+/**
+* 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) {
+	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);
@@ -356,4 +313,4 @@
   padding: 0;
   display: block;
   width: 100%;
-}</style>
+}</style>