@lavalogic/scoria 0.24.0 → 0.25.1

package/dist/Components/Table/Body/Rows/Columns/TableSelect.svelte

@@ -51,33 +51,42 @@
 	);
 
 	let isBeingEdited = $derived(false);
+
+	function handleIsEditable(isEditable: boolean): Promise<void> {
+		if (isEditable) {
+			return tick().then(() => {
+				isBeingEdited = true;
+			});
+		} else {
+			if (isBeingEdited) {
+				return tick()
+					.then(() => {
+						if (!tableContext.singleClickEditing) {
+							tableContext.focusStartIsBeingEdited = false;
+						}
+
+						isBeingEdited = false;
+					})
+					.catch(devCatch);
+			}
+		}
+
+		return Promise.resolve();
+	}
+
 	$effect(() => {
 		void editable;
 		if (wantsToBeEdited) {
-			editable
-				.then((isEditable) => {
-					if (isEditable) {
-						return tick().then(() => {
-							isBeingEdited = true;
-						});
-					} else {
-						if (isBeingEdited) {
-							return tick()
-								.then(() => {
-									if (!tableContext.singleClickEditing) {
-										tableContext.focusStartIsBeingEdited = false;
-									}
-
-									isBeingEdited = false;
-								})
-								.catch(devCatch);
-						}
-					}
-
-					return;
-				})
+			if (editable instanceof Promise) {
+				editable
+					.then((isEditable) => {
+						return handleIsEditable(isEditable);
+					})
 
-				.catch(devCatch);
+					.catch(devCatch);
+			} else {
+				handleIsEditable(editable).catch(devCatch);
+			}
 		} else {
 			tick()
 				.then(() => {

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

@@ -2,7 +2,7 @@
 
 <script
 	lang="ts"
-	generics="T extends object"
+	generics="T extends object, RowIdType extends Primitive"
 >
 	import { dev } from '$app/environment';
 	import { devCatch, generateShortUUID } from '../../../../Helpers/Helpers.svelte.js';
@@ -12,10 +12,12 @@
 	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, never>>(TableContext.identifier);
+
+	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
 
 	const { row, side, odd = false, customHeight, includeHighlight }: TableRowProps<T> = $props();
 
@@ -50,10 +52,28 @@
 	let prevExpandedColumnDef: ExpandDef<T, object> | undefined = $state();
 
 	const rowIndex = $derived(cells.at(0) && cells[0].row.visibleIndex);
-	const highlighted = $derived(
-		rowIndex != undefined &&
-			tableContext.highlightedItems.has(tableContext.selectionExtractor(row.original))
-	);
+	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);
 
@@ -94,66 +114,70 @@
 		}
 	}
 
-	//FIXME the below threw errors before. Please investigate
-	// let trRef: HTMLTableRowElement | undefined = $state();
-	// let _trHeight = $state(0);
-	// export const trHeight = {
-	// 	get value() {
-	// 		return _trHeight;
-	// 	},
-	// };
-
-	// $effect(() => {
-	// 	void trRef;
-	// 	return untrack(() => {
-	// 		if (trRef) {
-	// 			const observer = new ResizeObserver((entries) => {
-	// 				if (customHeight) {
-	// 					_trHeight = 0;
-	// 				} else {
-	// 					_trHeight = entries[0].borderBoxSize[0].blockSize;
-	// 				}
-	// 			});
-	// 			observer.observe(trRef);
-
-	// 			const currentTrRef = trRef;
-	// 			return () => {
-	// 				observer.unobserve(currentTrRef);
-	// 			};
-	// 		}
-	// 		return () => {};
-	// 	});
-	// });
-
-	// let innerTrRef: HTMLTableRowElement | undefined = $state();
-	// let _innerTrHeight = $state(0);
-	// export const innerTrHeight = {
-	// 	get value() {
-	// 		return _innerTrHeight;
-	// 	}
-	// };
-	// $effect(() => {
-	// 	if (innerTrRef) {
-	// 		const observer = new ResizeObserver((entries) => {
-	// 			_innerTrHeight = entries[0].borderBoxSize[0].blockSize;
-	// 		});
-	// 		observer.observe(innerTrRef);
-
-	// 		const currentinnerTrRef = innerTrRef;
-	// 		return () => observer.unobserve(currentTrRef);
-	// 	}
-	// });
+	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>
 
-<!-- onMouseEnter={onMouseEnter}
-onMouseLeave={onMouseLeave} -->
 <tr
 	class:hoverable
 	class:alt={tableContext.alternateRowColours && odd}
 	class:highlighted
 	style={customHeight ? `height: ${customHeight}px !important;` : null}
+	bind:this={trRef}
 >
-	<!-- bind:this={trRef} -->
 	{#if showHighlightButton}
 		<ColumnHighlight
 			rowIndex={rowIndex ??
@@ -181,8 +205,10 @@ onMouseLeave={onMouseLeave} -->
 {#if expandedColumnDef}
 	<!-- TODO re-test and re-implement these -->
 	<!-- transition:slide={{ duration: 150, axis: 'y', delay: 0 }} -->
-	<!--  bind:this={innerTrRef} -->
-	<tr class="inner-table">
+	<tr
+		class="inner-table"
+		bind:this={innerTrRef}
+	>
 		{#await innerDataPromise}
 			<td {colspan}>loading&hellip;</td>
 		{:then data}

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

@@ -1,25 +1,34 @@
+import { type Primitive } from '../../Types/Context/TableInitOptions.js';
 import type { TableRowProps } from './TableRowProps.js';
-declare function $$render<T extends object>(): {
+declare function $$render<T extends object, RowIdType extends Primitive>(): {
     props: TableRowProps<T>;
-    exports: {};
+    exports: {
+        totalTrHeight: {
+            readonly value: number;
+        };
+    };
     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'];
+declare class __sveltets_Render<T extends object, RowIdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, RowIdType>>['props'];
+    events(): ReturnType<typeof $$render<T, RowIdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, RowIdType>>['slots'];
     bindings(): "";
-    exports(): {};
+    exports(): {
+        totalTrHeight: {
+            readonly value: number;
+        };
+    };
 }
 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']>;
+    new <T extends object, RowIdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, RowIdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, RowIdType>['props']>, ReturnType<__sveltets_Render<T, RowIdType>['events']>, ReturnType<__sveltets_Render<T, RowIdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, RowIdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, RowIdType>['exports']>;
+    <T extends object, RowIdType extends Primitive>(internal: unknown, props: ReturnType<__sveltets_Render<T, RowIdType>['props']> & {}): ReturnType<__sveltets_Render<T, RowIdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const TableRow: $$IsomorphicComponent;
-type TableRow<T extends object> = InstanceType<typeof TableRow<T>>;
+type TableRow<T extends object, RowIdType extends Primitive> = InstanceType<typeof TableRow<T, RowIdType>>;
 export default TableRow;

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

@@ -4,38 +4,34 @@
 	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();
+	let { side, heights, columns, includeHighlight }: TableBodyProps<T> = $props();
 
 	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
-	// type HasHeight = {
-	// 	trHeight: RefWrapper<number>;
-	// };
-	// const rows: Array<TableRow<T>> = $state([]);
-	// const _rowHeights = $derived(
-	// 	// HACK terrible type casting due to svelte type gen not being liked by eslint
-	// 	rows.map((it) => (it as HasHeight | undefined)?.trHeight.value ?? 0)
-	// );
-	// export const rowHeights = {
-	// 	get value() {
-	// 		return _rowHeights;
-	// 	}
-	// };
+	type HasHeight = {
+		totalTrHeight?: RefWrapper<number>;
+	};
+	const rows: Array<TableRow<T, never>> = $state([]);
 
-	// $inspect(tableContext.paginationRowModel).with((...v) => {
-	// 	console.trace(...v);
-	// });
+	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>
@@ -54,18 +50,17 @@
 	{/if}
 
 	{#each tableContext.paginationRowModel.rows as row, index (row.visibleIndex)}
-		<!-- {@const customHeight = heights[index]?.applyTo.includes(side)
-					? heights[index].maxHeight
-					: undefined} -->
-		<!-- {customHeight} -->
+		{@const customHeight = heights[index]?.applyTo.includes(side)
+			? heights[index].maxHeight
+			: undefined}
 		<TableRow
-			customHeight={undefined}
+			{customHeight}
 			{includeHighlight}
 			{row}
 			{side}
 			odd={index % 2 == 1}
+			bind:this={rows[index]}
 		/>
-		<!-- bind:this={rows[index]} -->
 	{/each}
 </tbody>
 

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

@@ -1,7 +1,11 @@
 import type { TableBodyProps } from './TableBodyProps.js';
 declare function $$render<T extends object>(): {
     props: TableBodyProps<T>;
-    exports: {};
+    exports: {
+        rowHeights: {
+            readonly value: number[];
+        };
+    };
     bindings: "";
     slots: {};
     events: {};
@@ -11,7 +15,11 @@ declare class __sveltets_Render<T extends object> {
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
-    exports(): {};
+    exports(): {
+        rowHeights: {
+            readonly value: number[];
+        };
+    };
 }
 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']>> & {

package/dist/Components/Table/Body/TableBodyProps.d.ts

@@ -1,6 +1,8 @@
 import type { Column } from '../Types/Columns/Column.js';
+import type { HeightData } from './HeightData.js';
 export interface TableBodyProps<T extends object> {
     side: 'left' | 'centre' | 'right';
+    heights: Array<HeightData<T>>;
     columns: Array<Column<T>>;
     includeHighlight: boolean;
 }

package/dist/Components/Table/ColumnDefinitions/ExampleItemColumnDefRepository.svelte.js

@@ -60,7 +60,7 @@ export function generateExampleItemColumnDefs(modal) {
         new ValidityDef({
             header: 'Valid',
             id: 'valid',
-            debug: true,
+            // debug: true,
             isValid,
             modal,
         }),
@@ -82,7 +82,7 @@ export function generateExampleItemColumnDefs(modal) {
             getDisplayValue: (item) => {
                 return item.simulatedQuery?.value ?? null;
             },
-            isEditable: () => Promise.resolve(true),
+            isEditable: () => true,
             id: 'simulatedQuery',
             query: async (_v, item) => {
                 void item.someDate;
@@ -101,13 +101,13 @@ export function generateExampleItemColumnDefs(modal) {
         new TextInputDef({
             header: 'Name',
             id: 'name',
-            isEditable: () => Promise.resolve(true),
+            isEditable: () => true,
             isValid,
         }),
         new NumberInputDef({
             header: 'Some Number',
             id: 'someNumber',
-            isEditable: () => Promise.resolve(true),
+            isEditable: () => true,
             min: 0,
             max: 12345,
             isValid,
@@ -150,20 +150,20 @@ export function generateExampleItemColumnDefs(modal) {
         new DateInputDef({
             header: 'Some Date With Time',
             id: 'someDateWithTime',
-            isEditable: () => Promise.resolve(true),
+            isEditable: () => true,
             showTime: true,
             isValid,
         }),
         new DateInputDef({
             header: 'Flo Date',
             id: 'floDate',
-            isEditable: () => Promise.resolve(true),
+            isEditable: () => true,
             defaultHidden: true,
         }),
         new DateInputDef({
             header: 'Flo Date With Time',
             id: 'floDateWithTime',
-            isEditable: () => Promise.resolve(true),
+            isEditable: () => true,
             defaultHidden: true,
             showTime: true,
             isValid,
@@ -194,7 +194,7 @@ export function generateExampleItemColumnDefs(modal) {
                 ];
             },
             getDisplayValue: (item) => item.someSelect,
-            isEditable: () => Promise.resolve(true),
+            isEditable: () => true,
             isValid,
         }),
         new BubbleDef({

package/dist/Components/Table/Table.svelte

@@ -12,6 +12,7 @@
 	import type { RefWrapper } from '../../Types/Internal/RefWrapper.js';
 	import { getContext, onMount, setContext, tick, untrack } from 'svelte';
 	import LoadingOverlay from '../LoadingOverlay.svelte';
+	import type { HeightData } from './Body/HeightData.js';
 	import { shownPopup } from './Body/Rows/Columns/ActionsCell.svelte';
 	import TableBody from './Body/TableBody.svelte';
 	import TableHead from './Headers/TableHead.svelte';
@@ -48,6 +49,7 @@
 	const { nested = false, tableContext }: TableProps<T, IdType> = $props();
 
 	// NOTE: known limitation. This is passed as a wrapper, and they should never require reassignment. It is deeply reactive
+	// svelte-ignore state_referenced_locally
 	setContext(TableContext.identifier, tableContext);
 
 	const { openContextMenu: _openContextMenu } = getContext<ContextMenuContext>(
@@ -181,16 +183,7 @@
 	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 nestedHeight = $derived(minNestedHeight);
 
 	let tableRef: HTMLDivElement | undefined = undefined;
 	let mousedDownEmptySpace = $state(false);
@@ -275,46 +268,51 @@
 		}
 	});
 
-	// type SvelteTableElement = {
-	// 	rowHeights: RefWrapper<Array<number>>;
-	// };
-
-	// let leftTable: SvelteTableElement | undefined = $state();
-	// let centreTable: SvelteTableElement | undefined = $state();
-	// let rightTable: SvelteTableElement | undefined = $state();
-
-	// const totalRowSizes: Array<HeightData<T>> = $derived.by(() => {
-	// 	if (!leftTable || !centreTable || !rightTable) {
-	// 		return [];
-	// 	}
-	// 	const centre = centreTable.rowHeights.value;
-	// 	const right = rightTable.rowHeights.value;
-
-	// 	return leftTable.rowHeights.value.map((_leftHeight, index) => {
-	// 		const leftHeight = _leftHeight || 0;
-	// 		const centreHeight = centre[index] || 0;
-	// 		const rightHeight = right[index] || 0;
-
-	// 		const maxHeight = Math.max(leftHeight, centreHeight, rightHeight);
-	// 		const applyTo: HeightData<T>['applyTo'] = [];
-
-	// 		if (leftHeight < maxHeight) {
-	// 			applyTo.push('left');
-	// 		}
-	// 		if (centreHeight < maxHeight) {
-	// 			applyTo.push('centre');
-	// 		}
-	// 		if (rightHeight < maxHeight) {
-	// 			applyTo.push('right');
-	// 		}
-
-	// 		return {
-	// 			index,
-	// 			applyTo,
-	// 			maxHeight
-	// 		};
-	// 	});
-	// });
+	type SvelteTableElement = {
+		rowHeights: RefWrapper<Array<number>>;
+	};
+
+	let leftTable: SvelteTableElement | undefined = $state();
+	let centreTable: SvelteTableElement | undefined = $state();
+	let rightTable: SvelteTableElement | undefined = $state();
+
+	const totalRowSizes: Array<HeightData<T>> = $derived.by(() => {
+		if (!leftTable || !centreTable || !rightTable) {
+			return [];
+		}
+
+		// console.debug(`got refs for all tables`);
+		const centre = centreTable.rowHeights.value;
+		const right = rightTable.rowHeights.value;
+
+		return leftTable.rowHeights.value.map((_leftHeight, index) => {
+			const leftHeight = _leftHeight || 0;
+			const centreHeight = centre[index] || 0;
+			const rightHeight = right[index] || 0;
+
+			const maxHeight = Math.max(leftHeight, centreHeight, rightHeight);
+			const applyTo: HeightData<T>['applyTo'] = [];
+
+			if (leftHeight < maxHeight) {
+				// console.debug(`left (${leftHeight}) was lower than max (${maxHeight})`);
+				applyTo.push('left');
+			}
+			if (centreHeight < maxHeight) {
+				// console.debug(`centre (${centreHeight}) was lower than max (${maxHeight})`);
+				applyTo.push('centre');
+			}
+			if (rightHeight < maxHeight) {
+				// console.debug(`right (${rightHeight}) was lower than max (${maxHeight})`);
+				applyTo.push('right');
+			}
+
+			return {
+				index,
+				applyTo,
+				maxHeight,
+			};
+		});
+	});
 </script>
 
 <svelte:window
@@ -427,9 +425,9 @@
 						includeHighlight={appropriateSide == 'left'}
 						columns={leftColumns}
 						side="left"
+						heights={totalRowSizes}
+						bind:this={leftTable}
 					/>
-					<!-- heights={totalRowSizes} -->
-					<!-- bind:this={leftTable} -->
 				</table>
 				<!-- {/if} -->
 
@@ -447,9 +445,9 @@
 						includeHighlight={appropriateSide == 'centre'}
 						columns={centreColumns}
 						side="centre"
+						heights={totalRowSizes}
+						bind:this={centreTable}
 					/>
-					<!-- heights={totalRowSizes}
-							bind:this={centreTable} -->
 				</table>
 				<!-- {/if} -->
 
@@ -466,9 +464,9 @@
 						includeHighlight={appropriateSide == 'right'}
 						columns={rightColumns}
 						side="right"
+						heights={totalRowSizes}
+						bind:this={rightTable}
 					/>
-					<!-- heights={totalRowSizes}
-							bind:this={rightTable} -->
 				</table>
 				<!-- {/if} -->
 			</div>

package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.d.ts

@@ -17,7 +17,7 @@ export interface ColumnDefProps<T extends object, in FilterFnType, out OptionsTy
     defaultHidden?: boolean;
     minSize?: Pixels;
     width?: Pixels;
-    isEditable?: (item: T, index: number) => Promise<boolean>;
+    isEditable?: (item: T, index: number) => boolean | Promise<boolean>;
     resizable?: boolean;
     isValid?: ValidationFn<T>;
     filterFn?: FilterFn<T, FilterFnType>;
@@ -57,7 +57,7 @@ export declare abstract class ColumnDef<T extends object, in FilterFnType = neve
     set filterValueType(v: FilterValueType | undefined);
     readonly getDisplayValue: ((item: T, index: number) => string | null | Promise<string | null>) | undefined;
     toJSON(): ColumnJSONRepresentation;
-    readonly isEditable: (item: T, index: number) => Promise<boolean>;
+    readonly isEditable: (item: T, index: number) => boolean | Promise<boolean>;
     readonly resizable: boolean;
     readonly header: string | Snippet;
     readonly getOptions?: () => Array<SelectOption<OptionsType>> | Promise<Array<SelectOption<OptionsType>>>;