@lavalogic/scoria 0.33.0 → 0.35.0

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

@@ -1,261 +1,261 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, RowIdType extends Primitive"
->
-	import { dev } from '$app/environment';
-	import { devCatch, generateShortUUID } 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, side, odd = false, customHeight, includeHighlight }: TableRowProps<T> = $props();
-
-	const hoverable = $derived(tableContext.changeColourOnHover);
-
-	//HACK converted this from derived to state+deffect because otherwise this throws an unsafe mutation error deeper down the stack
-	const cells: Array<TableCell<T>> = $derived(
-		side === 'left'
-			? row.getLeftVisibleCells()
-			: side === 'right'
-				? row.getRightVisibleCells()
-				: row.getCenterVisibleCells()
-	);
-
-	let expandedColumnDef: ExpandDef<T, object> | undefined = $state();
-
-	$effect(() => {
-		if (cells.length) {
-			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: string | undefined = $state();
-
-	let prevExpandedColumnDef: ExpandDef<T, object> | undefined = $state();
-
-	const rowIndex = $derived(cells.at(0) && cells[0].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);
-
-	const colspan = $derived(cells.length + (showHighlightButton ? 1 : 0));
-
-	$effect(() => {
-		void expandedColumnDef;
-
-		untrack(() => {
-			if (expandedColumnDef && expandedColumnDef.id != prevExpandedColumnDef?.id) {
-				prevExpandedColumnDef = expandedColumnDef;
-				innerColumnDefs = expandedColumnDef.getInnerColumnDefs(
-					cells[0].row.original,
-					cells[0].row.originalIndex
-				);
-
-				innerDataPromise = expandedColumnDef.accessorFn(
-					cells[0].row.original,
-					cells[0].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;
-		}
-	}
-
-	let trRef: HTMLTableRowElement | undefined = $state();
-	let _trHeight = $state(0);
-
-	let innerTrRef: HTMLTableRowElement | undefined = $state();
-	let _innerTrHeight = $state(0);
-
-	$effect(() => {
-		void trRef;
-		void customHeight;
-
-		return untrack(() => {
-			if (trRef && customHeight == null) {
-				const observer = new ResizeObserver((entries) => {
-					_trHeight = entries[0].borderBoxSize[0].blockSize;
-				});
-				observer.observe(trRef);
-
-				const currenttrRef = trRef;
-				return () => {
-					observer.unobserve(currenttrRef);
-					_trHeight = 0;
-				};
-			} else {
-				_trHeight = 0;
-			}
-			return () => {};
-		});
-	});
-
-	$effect(() => {
-		void innerTrRef;
-		return untrack(() => {
-			if (innerTrRef) {
-				const observer = new ResizeObserver((entries) => {
-					_innerTrHeight = entries[0].borderBoxSize[0].blockSize;
-				});
-				observer.observe(innerTrRef);
-
-				const currentinnerTrRef = innerTrRef;
-				return () => {
-					observer.unobserve(currentinnerTrRef);
-				};
-			} else {
-				_innerTrHeight = 0;
-			}
-			return () => {};
-		});
-	});
-
-	const _totalTrHeight = $derived(_trHeight + _innerTrHeight);
-	export const totalTrHeight = {
-		get value() {
-			return _totalTrHeight;
-		},
-	};
-</script>
-
-<tr
-	class:hoverable
-	class:alt={tableContext.alternateRowColours && odd}
-	class:highlighted
-	style={customHeight ? `height: ${customHeight}px !important;` : null}
-	bind:this={trRef}
->
-	{#if showHighlightButton}
-		<ColumnHighlight
-			rowIndex={rowIndex ??
-				(() => {
-					if (dev) {
-						console.error(`column had invalid row index: ${rowIndex}`);
-					}
-					return -1;
-				})()}
-			{highlighted}
-			toggleHighlightedRow={() => {
-				tableContext.toggleHighlightedRow(row.original)?.catch(devCatch);
-			}}
-		/>
-	{/if}
-	{#each cells as cell (cell)}
-		<TableColumn
-			{cell}
-			{expandedColumnDef}
-			{onExpandChange}
-		/>
-	{/each}
-</tr>
-
-{#if expandedColumnDef}
-	<!-- TODO re-test and re-implement these -->
-	<!-- transition:slide={{ duration: 150, axis: 'y', delay: 0 }} -->
-	<tr
-		class="inner-table"
-		bind:this={innerTrRef}
-	>
-		{#await innerDataPromise}
-			<td {colspan}>loading&hellip;</td>
-		{:then data}
-			{#if data && data.length}
-				{@const options = expandedColumnDef.innerTableOptions}
-				<td
-					class="no-padding"
-					{colspan}
-				>
-					{#if innerTableName}
-						{#key innerTableName}
-							<NestedTable
-								tableName={innerTableName}
-								{data}
-								columnDefWrapper={innerColumnDefs}
-								{options}
-								getUserId={tableContext.getUserId}
-							/>
-						{/key}
-					{:else}
-						<NestedTable
-							tableName={generateShortUUID()}
-							{data}
-							columnDefWrapper={innerColumnDefs}
-							{options}
-							getUserId={tableContext.getUserId}
-						/>
-					{/if}
-				</td>
-			{:else if !data}
-				<td {colspan}>Error Fetching data</td>
-			{:else}
-				<td {colspan}>No Data</td>
-			{/if}
-		{:catch e}
-			{#if dev}
-				<td>
-					error: {e}
-				</td>
-				<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-				{@debug e}
-			{/if}
-			<td {colspan}>Error Fetching data</td>
-		{/await}
-	</tr>
-{/if}
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, RowIdType extends Primitive"
+>
+	import { dev } from '$app/environment';
+	import { devCatch, generateShortUUID } 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, side, odd = false, customHeight, includeHighlight }: TableRowProps<T> = $props();
+
+	const hoverable = $derived(tableContext.changeColourOnHover);
+
+	//HACK converted this from derived to state+deffect because otherwise this throws an unsafe mutation error deeper down the stack
+	const cells: Array<TableCell<T>> = $derived(
+		side === 'left'
+			? row.getLeftVisibleCells()
+			: side === 'right'
+				? row.getRightVisibleCells()
+				: row.getCenterVisibleCells()
+	);
+
+	let expandedColumnDef: ExpandDef<T, object> | undefined = $state();
+
+	$effect(() => {
+		if (cells.length) {
+			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: string | undefined = $state();
+
+	let prevExpandedColumnDef: ExpandDef<T, object> | undefined = $state();
+
+	const rowIndex = $derived(cells.at(0) && cells[0].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);
+
+	const colspan = $derived(cells.length + (showHighlightButton ? 1 : 0));
+
+	$effect(() => {
+		void expandedColumnDef;
+
+		untrack(() => {
+			if (expandedColumnDef && expandedColumnDef.id != prevExpandedColumnDef?.id) {
+				prevExpandedColumnDef = expandedColumnDef;
+				innerColumnDefs = expandedColumnDef.getInnerColumnDefs(
+					cells[0].row.original,
+					cells[0].row.originalIndex
+				);
+
+				innerDataPromise = expandedColumnDef.accessorFn(
+					cells[0].row.original,
+					cells[0].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;
+		}
+	}
+
+	let trRef: HTMLTableRowElement | undefined = $state();
+	let _trHeight = $state(0);
+
+	let innerTrRef: HTMLTableRowElement | undefined = $state();
+	let _innerTrHeight = $state(0);
+
+	$effect(() => {
+		void trRef;
+		void customHeight;
+
+		return untrack(() => {
+			if (trRef && customHeight == null) {
+				const observer = new ResizeObserver((entries) => {
+					_trHeight = entries[0].borderBoxSize[0].blockSize;
+				});
+				observer.observe(trRef);
+
+				const currenttrRef = trRef;
+				return () => {
+					observer.unobserve(currenttrRef);
+					_trHeight = 0;
+				};
+			} else {
+				_trHeight = 0;
+			}
+			return () => {};
+		});
+	});
+
+	$effect(() => {
+		void innerTrRef;
+		return untrack(() => {
+			if (innerTrRef) {
+				const observer = new ResizeObserver((entries) => {
+					_innerTrHeight = entries[0].borderBoxSize[0].blockSize;
+				});
+				observer.observe(innerTrRef);
+
+				const currentinnerTrRef = innerTrRef;
+				return () => {
+					observer.unobserve(currentinnerTrRef);
+				};
+			} else {
+				_innerTrHeight = 0;
+			}
+			return () => {};
+		});
+	});
+
+	const _totalTrHeight = $derived(_trHeight + _innerTrHeight);
+	export const totalTrHeight = {
+		get value() {
+			return _totalTrHeight;
+		},
+	};
+</script>
+
+<tr
+	class:hoverable
+	class:alt={tableContext.alternateRowColours && odd}
+	class:highlighted
+	style={customHeight ? `height: ${customHeight}px !important;` : null}
+	bind:this={trRef}
+>
+	{#if showHighlightButton}
+		<ColumnHighlight
+			rowIndex={rowIndex ??
+				(() => {
+					if (dev) {
+						console.error(`column had invalid row index: ${rowIndex}`);
+					}
+					return -1;
+				})()}
+			{highlighted}
+			toggleHighlightedRow={() => {
+				tableContext.toggleHighlightedRow(row.original)?.catch(devCatch);
+			}}
+		/>
+	{/if}
+	{#each cells as cell (cell)}
+		<TableColumn
+			{cell}
+			{expandedColumnDef}
+			{onExpandChange}
+		/>
+	{/each}
+</tr>
+
+{#if expandedColumnDef}
+	<!-- TODO re-test and re-implement these -->
+	<!-- transition:slide={{ duration: 150, axis: 'y', delay: 0 }} -->
+	<tr
+		class="inner-table"
+		bind:this={innerTrRef}
+	>
+		{#await innerDataPromise}
+			<td {colspan}>loading&hellip;</td>
+		{:then data}
+			{#if data && data.length}
+				{@const options = expandedColumnDef.innerTableOptions}
+				<td
+					class="no-padding"
+					{colspan}
+				>
+					{#if innerTableName}
+						{#key innerTableName}
+							<NestedTable
+								tableName={innerTableName}
+								{data}
+								columnDefWrapper={innerColumnDefs}
+								{options}
+								getUserId={tableContext.getUserId}
+							/>
+						{/key}
+					{:else}
+						<NestedTable
+							tableName={generateShortUUID()}
+							{data}
+							columnDefWrapper={innerColumnDefs}
+							{options}
+							getUserId={tableContext.getUserId}
+						/>
+					{/if}
+				</td>
+			{:else if !data}
+				<td {colspan}>Error Fetching data</td>
+			{:else}
+				<td {colspan}>No Data</td>
+			{/if}
+		{:catch e}
+			{#if dev}
+				<td>
+					error: {e}
+				</td>
+				<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+				{@debug e}
+			{/if}
+			<td {colspan}>Error Fetching data</td>
+		{/await}
+	</tr>
+{/if}
+
 <style>tr {
   line-height: var(--line-height, 3);
   transition: line-height 0.2s ease, height 0.2s ease;
@@ -269,4 +269,4 @@ tr.alt {
 }
 tr.highlighted, tr.hoverable:hover {
   background-color: #e6f8fd;
-}</style>
+}</style>

package/dist/Components/Table/Body/TableBody.svelte

@@ -1,69 +1,69 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	import type { RefWrapper } from '../../../Types/Internal/RefWrapper.js';
-	import { getContext } from 'svelte';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import QuickSearchCell from './QuickSearchCell.svelte';
-	import TableRow from './Rows/TableRow.svelte';
-	import type { TableBodyProps } from './TableBodyProps.js';
-
-	let { side, heights, columns, includeHighlight }: TableBodyProps<T> = $props();
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	type HasHeight = {
-		totalTrHeight?: RefWrapper<number>;
-	};
-	const rows: Array<TableRow<T, never>> = $state([]);
-
-	const _rowHeights = $derived(
-		// HACK terrible type casting due to svelte type gen not being liked by eslint
-		rows.map((it) => {
-			return (it as HasHeight | undefined)?.totalTrHeight?.value ?? 0;
-		})
-	);
-
-	export const rowHeights = {
-		get value() {
-			return _rowHeights;
-		},
-	};
-</script>
-
-<tbody>
-	{#if tableContext.allowQuickFiltering && tableContext.showQuickFiltering && columns.length}
-		<tr class="sticky">
-			{#if includeHighlight}
-				<td class="highlight-dud"><!-- accomodating for row marking --></td>
-			{/if}
-			{#each columns as column (column.id)}
-				<QuickSearchCell
-					{column}
-					customFilters={tableContext.remoteFilters}
-				/>
-			{/each}
-		</tr>
-	{/if}
-
-	{#each tableContext.paginationRowModel.rows as row, index (row.visibleIndex)}
-		{@const customHeight = heights[index]?.applyTo.includes(side)
-			? heights[index].maxHeight
-			: undefined}
-		<TableRow
-			{customHeight}
-			{includeHighlight}
-			{row}
-			{side}
-			odd={index % 2 == 1}
-			bind:this={rows[index]}
-		/>
-	{/each}
-</tbody>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object"
+>
+	import type { RefWrapper } from '../../../Types/Internal/RefWrapper.js';
+	import { getContext } from 'svelte';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import QuickSearchCell from './QuickSearchCell.svelte';
+	import TableRow from './Rows/TableRow.svelte';
+	import type { TableBodyProps } from './TableBodyProps.js';
+
+	let { side, heights, columns, includeHighlight }: TableBodyProps<T> = $props();
+
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+
+	type HasHeight = {
+		totalTrHeight?: RefWrapper<number>;
+	};
+	const rows: Array<TableRow<T, never>> = $state([]);
+
+	const _rowHeights = $derived(
+		// HACK terrible type casting due to svelte type gen not being liked by eslint
+		rows.map((it) => {
+			return (it as HasHeight | undefined)?.totalTrHeight?.value ?? 0;
+		})
+	);
+
+	export const rowHeights = {
+		get value() {
+			return _rowHeights;
+		},
+	};
+</script>
+
+<tbody>
+	{#if tableContext.allowQuickFiltering && tableContext.showQuickFiltering && columns.length}
+		<tr class="sticky">
+			{#if includeHighlight}
+				<td class="highlight-dud"><!-- accomodating for row marking --></td>
+			{/if}
+			{#each columns as column (column.id)}
+				<QuickSearchCell
+					{column}
+					customFilters={tableContext.remoteFilters}
+				/>
+			{/each}
+		</tr>
+	{/if}
+
+	{#each tableContext.paginationRowModel.rows as row, index (row.visibleIndex)}
+		{@const customHeight = heights[index]?.applyTo.includes(side)
+			? heights[index].maxHeight
+			: undefined}
+		<TableRow
+			{customHeight}
+			{includeHighlight}
+			{row}
+			{side}
+			odd={index % 2 == 1}
+			bind:this={rows[index]}
+		/>
+	{/each}
+</tbody>
+
 <style>td {
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
@@ -90,4 +90,4 @@ tr.sticky {
   transition: line-height 0.2s ease, height 0.2s ease;
   height: 61px;
   --height: 61px;
-}</style>
+}</style>