@lavalogic/scoria 0.18.2 → 0.19.1

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/Headers/TableHead.svelte

@@ -59,6 +59,12 @@
 		none: 'sort-none',
 	} as const;
 
+	$effect(() => {
+		if (tableContext.debug && !groups.length) {
+			$inspect(side, tableContext.table, tableContext.table.columnVisibility);
+		}
+	});
+
 	let currentDropTarget: HTMLTableCellElement | null = $state(null);
 
 	function setCurrentDropTarget(target: EventTarget | null) {