@lavalogic/scoria 0.18.2 → 0.19.0

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

@@ -8,10 +8,10 @@
 	import SingleSelect from '../../../../SingleSelect.svelte';
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
 	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
+	import { devCatch, isValidityTuple, loadingText } from '../../../../../Helpers/Helpers.svelte.js';
 	import type { SelectOption } from '../../../../../Types/Internal/SelectOption.js';
 	import { Validity } from '../../../../../Types/Internal/Validity.js';
-	import { getContext, tick, untrack } from 'svelte';
+	import { getContext, tick } from 'svelte';
 	import type { TableSelectProps } from './TableSelectProps.js';
 </script>
 
@@ -34,7 +34,7 @@
 	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const editable = $derived(
-		await cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
+		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
 	);
 
 	const focusDetails: TableFocusDetails<T, never> = $derived(
@@ -50,40 +50,41 @@
 			tableContext.focusStartIsBeingEdited
 	);
 
-	let isBeingEdited = $state(false);
+	let isBeingEdited = $derived(false);
 	$effect(() => {
+		void editable;
 		if (wantsToBeEdited) {
-			if (editable) {
-				tick()
-					.then(() => {
-						untrack(() => {
+			editable
+				.then((isEditable) => {
+					if (isEditable) {
+						return tick().then(() => {
 							isBeingEdited = true;
 						});
-					})
-					.catch(devCatch);
-			} else {
-				tick()
-					.then(() => {
-						untrack(() => {
-							tableContext.focusStartIsBeingEdited = false;
-						});
-					})
-					.catch(devCatch);
-			}
+					} else {
+						if (isBeingEdited) {
+							return tick()
+								.then(() => {
+									if (!tableContext.singleClickEditing) {
+										tableContext.focusStartIsBeingEdited = false;
+									}
+
+									isBeingEdited = false;
+								})
+								.catch(devCatch);
+						}
+					}
+
+					return;
+				})
+
+				.catch(devCatch);
 		} else {
-			if (isBeingEdited) {
-				tick()
-					.then(() => {
-						untrack(() => {
-							if (!tableContext.singleClickEditing) {
-								tableContext.focusStartIsBeingEdited = false;
-							}
-
-							isBeingEdited = false;
-						});
-					})
-					.catch(devCatch);
-			}
+			tick()
+				.then(() => {
+					isBeingEdited = false;
+					tableContext.focusStartIsBeingEdited = false;
+				})
+				.catch(devCatch);
 		}
 	});
 
@@ -111,9 +112,9 @@
 			.catch(devCatch);
 	});
 
-	function handleTDFocus(): boolean {
+	async function handleTDFocus(): Promise<boolean> {
 		if (
-			editable &&
+			(await editable) &&
 			tableContext.focusStart?.column === focusDetails.coordinates.column &&
 			tableContext.focusStart.row === focusDetails.coordinates.row
 		) {
@@ -132,11 +133,11 @@
 		return false;
 	}
 
-	function handleSingleClick() {
-		return tableContext.singleClickEditing && handleTDFocus();
+	async function handleSingleClick(): Promise<boolean> {
+		return tableContext.singleClickEditing && (await handleTDFocus());
 	}
-	function handleDoubleClick() {
-		return !tableContext.singleClickEditing && handleTDFocus();
+	async function handleDoubleClick(): Promise<boolean> {
+		return !tableContext.singleClickEditing && (await handleTDFocus());
 	}
 
 	function handleTab(e: KeyboardEvent) {
@@ -176,11 +177,15 @@
 		target?.addEventListener('keydown', keydownForce);
 	}
 
+	function tryHandleTDFocus() {
+		handleTDFocus().catch(devCatch);
+	}
+
 	let prevtdref: HTMLTableCellElement | undefined = undefined;
 	$effect(() => {
 		if (tdref) {
 			if (tdref != prevtdref) {
-				tdref.addEventListener('edit', handleTDFocus);
+				tdref.addEventListener('edit', tryHandleTDFocus);
 			} else {
 				prevtdref = tdref;
 			}
@@ -196,7 +201,7 @@
 		bind:this={tdref}
 	>
 		{#await Promise.all([optionsPromise, selectValue])}
-			loading…
+			{loadingText}
 		{:then [options, value]}
 			<SingleSelect
 				focusOnLoad
@@ -249,7 +254,9 @@
 		class:success={validity == Validity.Valid}
 		class:warning={validity == Validity.Warning}
 		class:error={validity == Validity.Invalid}
-		ondblclick={handleDoubleClick}
+		ondblclick={() => {
+			handleDoubleClick().catch(devCatch);
+		}}
 		onmousedown={(e) => {
 			// start focus only on left click
 			if (e.button === 0) {
@@ -267,11 +274,16 @@
 			}
 		}}
 		onmouseup={() => {
-			// eslint-disable-next-line @typescript-eslint/no-unused-expressions
-			handleSingleClick() || tableContext.endFocus(focusDetails.coordinates);
+			handleSingleClick()
+				.then((wasHandled) => {
+					if (!wasHandled) {
+						tableContext.endFocus(focusDetails.coordinates);
+					}
+				})
+				.catch(devCatch);
 		}}
 		>{#await visibleValue}
-			loading…
+			{loadingText}
 		{:then value}
 			{value ?? '-'}
 		{:catch e}

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

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

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

@@ -21,9 +21,35 @@
 	// 	getNumberColumnDefOrError(cell.column.columnDef)
 	// );
 
-	const isEditable = $derived(
+	const editableAsync = $derived(
 		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
 	);
+	let editable = $state(false);
+
+	let asyncCounter = 0;
+	$effect(() => {
+		void editableAsync;
+		const localCounter = (asyncCounter = asyncCounter + 1);
+		(async () => {
+			try {
+				const isEditable = await editableAsync;
+				if (asyncCounter === localCounter) {
+					editable = isEditable;
+				} else if (cell.column.columnDef.debug) {
+					console.log('skipping async editable because it is stale');
+				}
+			} catch (e) {
+				if (cell.column.columnDef.debug) {
+					console.error(e);
+				}
+				if (asyncCounter === localCounter) {
+					editable = false;
+				} else if (cell.column.columnDef.debug) {
+					console.log('skipping async editable because it is stale');
+				}
+			}
+		})().catch(devCatch);
+	});
 
 	const value = $derived(cell.getValue());
 
@@ -51,7 +77,7 @@
 
 	$effect(() => {
 		if (wantsToBeEdited) {
-			if (isEditableText) {
+			if (editable) {
 				tick()
 					.then(() => {
 						if (typeof value == 'object' && value instanceof Promise) {
@@ -192,7 +218,7 @@
 		if (
 			tableContext.focusStart?.column === focusDetails.coordinates.column &&
 			tableContext.focusStart.row === focusDetails.coordinates.row &&
-			isEditableText
+			editable
 		) {
 			if (
 				tableContext.focusEnd?.column !== focusDetails.coordinates.column ||
@@ -259,8 +285,6 @@
 
 		return unsubscriber;
 	});
-
-	const isEditableText = $derived(await isEditable);
 </script>
 
 {#if isBeingEdited}
@@ -307,7 +331,7 @@
 		}}
 		bind:this={tdref}
 		tabIndex="0"
-		class:isEditableText
+		class:editable
 		class="focusable"
 		class:multifocus={focusDetails.isMultiFocused}
 		class:multifocus-start={focusDetails.isMultiFocusStart}

package/dist/Components/Table/Body/Rows/Columns/TableTextInput.svelte.d.ts

@@ -1,17 +1,17 @@
 import type { TableTextInputProps } from './TableTextInputProps.js';
-declare function $$render<T extends object, FilterValueType>(): Promise<{
+declare function $$render<T extends object, FilterValueType>(): {
     props: TableTextInputProps<T, FilterValueType>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
-}>;
+};
 declare class __sveltets_Render<T extends object, FilterValueType> {
-    props(): Awaited<ReturnType<typeof $$render<T, FilterValueType>>>['props'];
-    events(): Awaited<ReturnType<typeof $$render<T, FilterValueType>>>['events'];
-    slots(): Awaited<ReturnType<typeof $$render<T, FilterValueType>>>['slots'];
+    props(): ReturnType<typeof $$render<T, FilterValueType>>['props'];
+    events(): ReturnType<typeof $$render<T, FilterValueType>>['events'];
+    slots(): ReturnType<typeof $$render<T, FilterValueType>>['slots'];
     bindings(): "";
-    exports(): Promise<{}>;
+    exports(): {};
 }
 interface $$IsomorphicComponent {
     new <T extends object, FilterValueType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, FilterValueType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, FilterValueType>['props']>, ReturnType<__sveltets_Render<T, FilterValueType>['events']>, ReturnType<__sveltets_Render<T, FilterValueType>['slots']>> & {

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

@@ -48,24 +48,23 @@
 			{/each}
 		</tr>
 	{/if}
-	<svelte:boundary>
-		{#await tableContext.paginationRowModel then prm}
-			{#each prm.rows as row, index (row)}
-				<!-- {@const customHeight = heights[index]?.applyTo.includes(side)
+
+	{#await tableContext.paginationRowModel then prm}
+		{#each prm.rows as row, index (row)}
+			<!-- {@const customHeight = heights[index]?.applyTo.includes(side)
 					? heights[index].maxHeight
 					: undefined} -->
-				<!-- {customHeight} -->
-				<TableRow
-					customHeight={undefined}
-					{includeHighlight}
-					{row}
-					{side}
-					odd={index % 2 == 1}
-				/>
-				<!-- bind:this={rows[index]} -->
-			{/each}
-		{/await}
-	</svelte:boundary>
+			<!-- {customHeight} -->
+			<TableRow
+				customHeight={undefined}
+				{includeHighlight}
+				{row}
+				{side}
+				odd={index % 2 == 1}
+			/>
+			<!-- bind:this={rows[index]} -->
+		{/each}
+	{/await}
 </tbody>
 
 <style>td {

package/dist/Components/Table/Headers/HighlightAllHeader.svelte

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" generics="T extends object">
+<script
+	lang="ts"
+	generics="T extends object"
+>
 	import { devCatch } from '../../../Helpers/Helpers.svelte.js';
 	import { Colour } from '../../../scss/colours.js';
 	import { Size } from '../../../Types/Internal/Size.js';
@@ -34,7 +37,7 @@
 				hoverBackgroundColour={Colour['$brand-dark']}
 				size={Size.FillWidth}
 				icon={{
-					name: 'nothing'
+					name: 'nothing',
 				}}
 				onclick={() => {
 					tableContext.onHighlightAll();
@@ -46,7 +49,7 @@
 				hoverBackgroundColour={Colour['$brand-dark']}
 				size={Size.FillWidth}
 				icon={{
-					name: 'nothing'
+					name: 'nothing',
 				}}
 				onclick={() => {
 					tableContext.onHighlightAll();

package/dist/Components/Table/Headers/SelectAllHeader.svelte

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" generics="T extends object">
+<script
+	lang="ts"
+	generics="T extends object"
+>
 	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 

package/dist/Components/Table/Table.svelte

@@ -103,12 +103,9 @@
 	});
 
 	$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;
+		void tableContext.dataRepo.data.length;
+		void tableContext.selectedItems;
+		void tableContext.paginationRepo?.pageStartIndex;
 
 		untrack(() => {
 			tableContext.recalculateAllSelectedInCurrentPage();
@@ -359,151 +356,149 @@
 	}}
 />
 
-<svelte:boundary>
+<div
+	class="grid"
+	class:nested
+>
+	{#if tableContext.dataRepo.isLoading}
+		<LoadingOverlay
+			absolute
+			borderRadius="4px"
+		/>
+	{/if}
+
 	<div
-		class="grid"
-		class:nested
+		class="horizontal-bar"
+		class:border={tableContext.toolbarPosition === ToolbarPosition.Top}
 	>
-		{#if tableContext.dataRepo.isLoading}
-			<LoadingOverlay
-				absolute
-				borderRadius="4px"
-			/>
+		{#if tableContext.toolbarPosition === ToolbarPosition.Top}
+			<TableHorizontalBar />
 		{/if}
+	</div>
 
-		<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="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>
+	<div class="footer">
+		{#if tableContext.displayFooter}
+			<TableFooter />
+		{/if}
+	</div>
 
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<!-- 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
-			bind:this={tableRef}
-			class="datatable"
+			class="flex_table"
+			bind:this={ref}
 			class:nested
-			class:compact={tableContext.isCompact}
-			class:quick-filtering={tableContext.showQuickFiltering}
-			onkeydown={tableContext.handleTdKeydown}
 		>
 			<div
-				class="flex_table"
-				bind:this={ref}
-				class:nested
+				bind:this={unfocusRef}
+				class="table-wrapper"
+				oncontextmenu={openContextMenu}
 			>
-				<div
-					bind:this={unfocusRef}
-					class="table-wrapper"
-					oncontextmenu={openContextMenu}
+				<!-- {#if leftTotalSize > 0} -->
+				<table
+					class="datatable__table left"
+					style="min-width: {leftTotalSize}px"
 				>
-					<!-- {#if leftTotalSize > 0} -->
-					<table
-						class="datatable__table left"
-						style="min-width: {leftTotalSize}px"
-					>
-						<TableHead
-							showHighlight={leftTotalSize > 0}
-							side="left"
-						/>
-						<TableBody
-							includeHighlight={appropriateSide == 'left'}
-							columns={leftColumns}
-							side="left"
-						/>
-						<!-- heights={totalRowSizes} -->
-						<!-- bind:this={leftTable} -->
-					</table>
-					<!-- {/if} -->
-
-					<!-- {#if centreTotalSize > 0} -->
-
-					<table
-						class="datatable__table centre"
-						style="min-width: {centreTotalSize}px"
-					>
-						<TableHead
-							showHighlight={leftTotalSize == 0}
-							side="centre"
-						/>
-						<TableBody
-							includeHighlight={appropriateSide == 'centre'}
-							columns={centreColumns}
-							side="centre"
-						/>
-						<!-- heights={totalRowSizes}
+					<TableHead
+						showHighlight={leftTotalSize > 0}
+						side="left"
+					/>
+					<TableBody
+						includeHighlight={appropriateSide == 'left'}
+						columns={leftColumns}
+						side="left"
+					/>
+					<!-- heights={totalRowSizes} -->
+					<!-- bind:this={leftTable} -->
+				</table>
+				<!-- {/if} -->
+
+				<!-- {#if centreTotalSize > 0} -->
+
+				<table
+					class="datatable__table centre"
+					style="min-width: {centreTotalSize}px"
+				>
+					<TableHead
+						showHighlight={leftTotalSize == 0}
+						side="centre"
+					/>
+					<TableBody
+						includeHighlight={appropriateSide == 'centre'}
+						columns={centreColumns}
+						side="centre"
+					/>
+					<!-- heights={totalRowSizes}
 							bind:this={centreTable} -->
-					</table>
-					<!-- {/if} -->
-
-					<!-- {#if rightTotalSize > 0} -->
-					<table
-						class="datatable__table right"
-						style="min-width: {rightTotalSize}px"
-					>
-						<TableHead
-							showHighlight={false}
-							side="right"
-						/>
-						<TableBody
-							includeHighlight={appropriateSide == 'right'}
-							columns={rightColumns}
-							side="right"
-						/>
-						<!-- heights={totalRowSizes}
-							bind:this={rightTable} -->
-					</table>
-					<!-- {/if} -->
-				</div>
+				</table>
+				<!-- {/if} -->
 
-				<!-- TODO add filter callbacks -->
+				<!-- {#if rightTotalSize > 0} -->
+				<table
+					class="datatable__table right"
+					style="min-width: {rightTotalSize}px"
+				>
+					<TableHead
+						showHighlight={false}
+						side="right"
+					/>
+					<TableBody
+						includeHighlight={appropriateSide == 'right'}
+						columns={rightColumns}
+						side="right"
+					/>
+					<!-- heights={totalRowSizes}
+							bind:this={rightTable} -->
+				</table>
+				<!-- {/if} -->
 			</div>
 
-			{#if nested}
-				<!-- svelte-ignore a11y_no_static_element_interactions -->
-				<div
-					class:isResizing
-					class="resizer"
-					onmousedown={(e) => {
-						e.preventDefault();
-						addOverrideResizeHandler();
-					}}
-				></div>
-			{/if}
+			<!-- TODO add filter callbacks -->
 		</div>
+
+		{#if nested}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class:isResizing
+				class="resizer"
+				onmousedown={(e) => {
+					e.preventDefault();
+					addOverrideResizeHandler();
+				}}
+			></div>
+		{/if}
 	</div>
-</svelte:boundary>
+</div>
 
 <style>div.grid {
   border-radius: 4px;