@lavalogic/scoria 0.18.1 → 0.19.0

package/dist/Components/Base/Snippets.svelte

@@ -0,0 +1,26 @@
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import { getErrorMessage, loadingText } from '../../Helpers/Helpers.svelte.js';
+	import Button from '../Button.svelte';
+
+	export const pending = _pending;
+	export const failed = _failed;
+</script>
+
+{#snippet _pending()}
+	{loadingText}
+{/snippet}
+{#snippet _failed(e: unknown, retry?: () => void)}
+	Error: {getErrorMessage(e)}
+	{#if retry}
+		<Button
+			onclick={() => {
+				retry();
+			}}>Retry</Button
+		>
+	{/if}
+{/snippet}

package/dist/Components/Base/Snippets.svelte.d.ts

@@ -0,0 +1,5 @@
+export declare const pending: () => ReturnType<import("svelte").Snippet>;
+export declare const failed: (e: unknown, retry?: () => void) => ReturnType<import("svelte").Snippet>;
+declare const Snippets: import("svelte").Component<Record<string, never>, {}, "">;
+type Snippets = ReturnType<typeof Snippets>;
+export default Snippets;

package/dist/Components/CollapsibleCard.svelte

@@ -12,7 +12,7 @@
 		maxHeight: maxHeight,
 		children,
 		grow,
-		isCollapsed = $bindable(false)
+		isCollapsed = $bindable(false),
 	}: CollapsibleCardProps = $props();
 
 	let cardRef: HTMLDivElement | undefined = $state();
@@ -50,13 +50,16 @@
 				icon={{
 					name: isCollapsed ? 'circle-plus' : 'circle-minus',
 					colour: Colour['$ui-blue-5'],
-					size: Size.Medium
+					size: Size.Medium,
 				}}
 			/>
 		</div>
 	</div>
 
-	<div class="content" class:is-collapsed={isCollapsed}>
+	<div
+		class="content"
+		class:is-collapsed={isCollapsed}
+	>
 		{#if children}
 			{@render children()}
 		{/if}

package/dist/Components/GridInput.svelte

@@ -1,18 +1,21 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script
+	lang="ts"
+	module
+>
 	import { dev } from '$app/environment';
 	import type { GridItem } from '../Types/Internal/GridItem.js';
 	import type {
 		GridMultiSelectItem,
 		GridMultiSelectItemAsObject,
-		GridMultiSelectItemAsPrimitive
+		GridMultiSelectItemAsPrimitive,
 	} from '../Types/Internal/GridMultiSelectItem.js';
 	import type { GridSelectItem } from '../Types/Internal/GridSelectItem.js';
 	import type {
 		GridSingleSelectItem,
 		GridSingleSelectItemAsObject,
-		GridSingleSelectItemAsPrimitive
+		GridSingleSelectItemAsPrimitive,
 	} from '../Types/Internal/GridSingleSelectItem.js';
 	import type { GridTextItem } from '../Types/Internal/GridTextItem.js';
 	import type { ValueProp } from '../Types/Internal/Misc.js';
@@ -24,7 +27,10 @@
 	const textTypes = new Set(['text', 'email', 'tel']);
 </script>
 
-<script lang="ts" generics="V extends object,VP extends ValueProp<V>">
+<script
+	lang="ts"
+	generics="V extends object,VP extends ValueProp<V>"
+>
 	const { item, first, last }: GridInputProps<V, VP> = $props();
 
 	let value = $derived(isText(item) ? (item.value ?? '') : '');
@@ -76,9 +82,15 @@
 	}
 </script>
 
-<label class:first class:last>
+<label
+	class:first
+	class:last
+>
 	<div class="left">
-		<span class:first class:last>{item.label}</span>
+		<span
+			class:first
+			class:last>{item.label}</span
+		>
 	</div>
 	{#if isText(item)}
 		<TextInput

package/dist/Components/LoadingAnimation.svelte

@@ -1,12 +1,17 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script
+	lang="ts"
+	module
+>
 	export interface LoadingAnimationProps {
 		showText?: boolean;
 	}
 </script>
 
 <script lang="ts">
+	import { loadingText } from '../Helpers/Helpers.svelte.js';
+
 	let { showText = true }: LoadingAnimationProps = $props();
 </script>
 
@@ -14,7 +19,7 @@
 	<div id="cube">
 		<div class="front"></div>
 		<div class="front">
-			{#if showText}<span>loading…</span>{/if}
+			{#if showText}<span>{loadingText}</span>{/if}
 		</div>
 		<div class="back"></div>
 		<div class="right"></div>

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

@@ -478,38 +478,36 @@
 						/>
 					</div>
 				{:else}
-					<svelte:boundary>
-						<div class="input-wrapper right">
-							{#await isNullFilter}
-								loading
-							{:then isNullFilter}
-								{#if isNullFilter}
-									<TextInput
-										data-type="quicksearch"
-										id={inputId}
-										value="is Null"
-										disabled
-										variant={InputVariant.Table}
-									/>
-								{:else}
-									<!-- NOTE: This is a text input in order to support the __in functionality, which is a comma separated list of numbers -->
-									<TextInput
-										data-type="quicksearch"
-										id={inputId}
-										bind:value={asdfvalue as string | null}
-										placeholder="Filter&hellip;"
-										variant={InputVariant.Table}
-										oninput={() => {
-											tableContext.paginationRepo?.filterBy(def.id, [asdfvalue || null]);
-										}}
-										onkeydown={closeOnCtrlF}
-									/>
-								{/if}
-							{:catch e}
-								{@debug e}
-							{/await}
-						</div>
-					</svelte:boundary>
+					<div class="input-wrapper right">
+						{#await isNullFilter}
+							loading
+						{:then isNullFilter}
+							{#if isNullFilter}
+								<TextInput
+									data-type="quicksearch"
+									id={inputId}
+									value="is Null"
+									disabled
+									variant={InputVariant.Table}
+								/>
+							{:else}
+								<!-- NOTE: This is a text input in order to support the __in functionality, which is a comma separated list of numbers -->
+								<TextInput
+									data-type="quicksearch"
+									id={inputId}
+									bind:value={asdfvalue as string | null}
+									placeholder="Filter&hellip;"
+									variant={InputVariant.Table}
+									oninput={() => {
+										tableContext.paginationRepo?.filterBy(def.id, [asdfvalue || null]);
+									}}
+									onkeydown={closeOnCtrlF}
+								/>
+							{/if}
+						{:catch e}
+							{@debug e}
+						{/await}
+					</div>
 				{/if}
 			{:else if asdfvalue == null || typeof asdfvalue == 'string'}
 				<div class="input-wrapper right">

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

@@ -25,7 +25,7 @@
 
 	const cellTypes: Record<
 		'Number' | 'Date' | 'Select' | 'Checkbox' | 'Query' | 'Text',
-		Component<any>
+		object & Component<any>
 	> = {
 		Number: TableNumberInput,
 		Date: TableDatePicker,

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

@@ -6,7 +6,7 @@
 >
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
 	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { devCatch, getErrorMessage, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
+	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
 	import type { SelectOption } from '../../../../../Types/Internal/SelectOption.js';
 	import { Validity } from '../../../../../Types/Internal/Validity.js';
 	import { getContext } from 'svelte';
@@ -87,16 +87,10 @@ class:bottom={focusDetails.bottomEdge} -->
 		tableContext.endFocus(focusDetails.coordinates);
 	}}
 >
-	<svelte:boundary>
-		{#snippet pending()}
+	{#if hasValue}
+		{#await visibleValue}
 			loading…
-		{/snippet}
-		{#snippet onerror(e)}
-			Error: {getErrorMessage(e)}
-		{/snippet}
-		{#if hasValue}
-			{@const v = await visibleValue}
-
+		{:then v}
 			{(v instanceof Date
 				? v.toLocaleDateString()
 				: options.length
@@ -104,17 +98,17 @@ class:bottom={focusDetails.bottomEdge} -->
 					: v) ??
 				v ??
 				''}
-		{:else if children}
-			<div
-				class="slot-wrapper"
-				class:multifocus={focusDetails.isMultiFocused}
-				class:multifocus-start={focusDetails.isMultiFocusStart}
-			>
-				<!-- TODO {focusDetails.isMultiFocusStart} -->
-				{@render children()}
-			</div>
-		{/if}
-	</svelte:boundary>
+		{/await}
+	{:else if children}
+		<div
+			class="slot-wrapper"
+			class:multifocus={focusDetails.isMultiFocused}
+			class:multifocus-start={focusDetails.isMultiFocusStart}
+		>
+			<!-- TODO {focusDetails.isMultiFocusStart} -->
+			{@render children()}
+		</div>
+	{/if}
 </td>
 
 <style>td {

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

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script
+	lang="ts"
+	module
+>
 	import Button from '../../../../Button.svelte';
 	import type { TableActionButton } from '../../../Types/Columns/TableActionButton.js';
 	import { getErrorMessage } from '../../../../../Helpers/Helpers.svelte.js';
@@ -14,7 +17,10 @@
 	}
 </script>
 
-<script lang="ts" generics="T extends object,FilterValueType">
+<script
+	lang="ts"
+	generics="T extends object,FilterValueType"
+>
 	const { action, cell }: TableActionProps<T, FilterValueType> = $props();
 
 	const isEnabledPromise: boolean | Promise<boolean> = $derived.by(() => {

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

@@ -29,44 +29,17 @@
 		id: columnDef.id,
 	});
 
-	const editableAsync = $derived(
+	const editable = $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 focusDetails: TableFocusDetails<T, never> = $derived(
 		new TableFocusDetails(cell, tableContext)
 	);
 
 	let modalLock = $state(false);
 
-	const isBeingEdited = $derived(
-		editable &&
-			tableContext.focusStart?.column === focusDetails.coordinates.column &&
+	const wantsToBeEdited = $derived(
+		tableContext.focusStart?.column === focusDetails.coordinates.column &&
 			tableContext.focusEnd?.column === focusDetails.coordinates.column &&
 			tableContext.focusStart.row === focusDetails.coordinates.row &&
 			tableContext.focusEnd.row === focusDetails.coordinates.row &&
@@ -74,10 +47,33 @@
 	);
 
 	$effect(() => {
-		if (isBeingEdited) {
+		void editable;
+		if (wantsToBeEdited) {
+			editable
+				.then((isEditable) => {
+					if (isEditable) {
+						return tick().then(() => {
+							modalLock = true;
+						});
+					} else {
+						if (modalLock) {
+							return tick().then(() => {
+								if (!tableContext.singleClickEditing) {
+									tableContext.focusStartIsBeingEdited = false;
+								}
+								modalLock = false;
+							});
+						}
+
+						return;
+					}
+				})
+				.catch(devCatch);
+		} else {
 			tick()
 				.then(() => {
-					modalLock = true;
+					modalLock = false;
+					tableContext.focusStartIsBeingEdited = false;
 				})
 				.catch(devCatch);
 		}
@@ -86,9 +82,9 @@
 	let tdref: HTMLTableCellElement | undefined = $state();
 
 	const id = $derived(`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`);
-	function handleSingleClick(event?: Event) {
+	async function handleSingleClick(event?: Event) {
 		if (
-			editable &&
+			(await editable) &&
 			tableContext.singleClickEditing &&
 			(!event || !event.target || (event.target as HTMLElement).id === id)
 		) {
@@ -118,8 +114,8 @@
 			.catch(devCatch);
 	});
 
-	const handleDoubleClick = () => {
-		if (editable) {
+	const handleDoubleClick = async () => {
+		if (await editable) {
 			tableContext.focusStartIsBeingEdited = true;
 		}
 	};
@@ -134,11 +130,15 @@
 			.catch(devCatch);
 	}
 
+	function tryHandleDoubleClick() {
+		handleDoubleClick().catch(devCatch);
+	}
+
 	let prevtdref: HTMLTableCellElement | undefined = undefined;
 	$effect(() => {
 		if (tdref) {
 			if (tdref != prevtdref) {
-				tdref.addEventListener('edit', handleDoubleClick);
+				tdref.addEventListener('edit', tryHandleDoubleClick);
 			} else {
 				prevtdref = tdref;
 			}
@@ -184,8 +184,12 @@
 	onmouseup={() => {
 		tableContext.endFocus(coordinates);
 	}}
-	onclick={handleSingleClick}
-	ondblclick={handleDoubleClick}
+	onclick={() => {
+		handleSingleClick().catch(devCatch);
+	}}
+	ondblclick={() => {
+		handleDoubleClick().catch(devCatch);
+	}}
 >
 	{#if modalLock}
 		<DateModal

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

@@ -4,12 +4,11 @@
 	lang="ts"
 	generics="T extends object,"
 >
-	import { dev } from '$app/environment';
 	import QuerySelect from '../../../../QuerySelect.svelte';
 	import type { QueryDef } from '../../../Types/Columns/Definitions/Accessors/QueryDef.svelte.js';
 	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';
@@ -32,10 +31,9 @@
 
 	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
-	const editableAsync = $derived(
+	const editable = $derived(
 		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
 	);
-	let editable = $state(false);
 
 	let valueAsyncCounter = 0;
 	$effect(() => {
@@ -76,33 +74,6 @@
 		});
 	});
 
-	let editableAsyncCounter = 0;
-	$effect(() => {
-		void editableAsync;
-		untrack(() => {
-			const localCounter = (editableAsyncCounter = editableAsyncCounter + 1);
-			(async () => {
-				try {
-					const isEditable = await editableAsync;
-					if (editableAsyncCounter === localCounter) {
-						editable = isEditable;
-					} else if (dev || columnDef.debug) {
-						console.log('skipping async editable because it is stale');
-					}
-				} catch (e) {
-					if (dev || columnDef.debug) {
-						console.error(e);
-					}
-					if (editableAsyncCounter === localCounter) {
-						editable = false;
-					} else if (dev || columnDef.debug) {
-						console.log('skipping async editable because it is stale');
-					}
-				}
-			})().catch(devCatch);
-		});
-	});
-
 	const focusDetails: TableFocusDetails<T, never> = $derived(
 		new TableFocusDetails(cell, tableContext)
 	);
@@ -118,7 +89,9 @@
 
 	let isBeingEdited = $state(false);
 
-	$effect(() => {
+	/*
+	 	$effect(() => {
+		void editable;
 		if (wantsToBeEdited) {
 			if (editable) {
 				tick()
@@ -153,6 +126,42 @@
 			}
 		}
 	});
+	*/
+	$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;
+				})
+
+				.catch(devCatch);
+		} else {
+			tick()
+				.then(() => {
+					tableContext.focusStartIsBeingEdited = false;
+				})
+				.catch(devCatch);
+		}
+	});
 
 	let validity: Validity = $state(Validity.Valid);
 	$effect(() => {
@@ -171,9 +180,9 @@
 			.catch(devCatch);
 	});
 
-	const handleTDFocus = () => {
+	const handleTDFocus = async () => {
 		if (
-			editable &&
+			(await editable) &&
 			tableContext.focusStart?.column === focusDetails.coordinates.column &&
 			tableContext.focusStart.row === focusDetails.coordinates.row
 		) {
@@ -192,11 +201,15 @@
 		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 tryHandleTDFocus() {
+		handleTDFocus().catch(devCatch);
 	}
 
 	function handleUnfocus(e: KeyboardEvent) {
@@ -251,7 +264,7 @@
 		void tdref;
 		untrack(() => {
 			if (tdref && tdref != prevtdref) {
-				tdref.addEventListener('edit', handleTDFocus);
+				tdref.addEventListener('edit', tryHandleTDFocus);
 			} else {
 				prevtdref = tdref;
 			}
@@ -329,14 +342,17 @@
 			}
 		}}
 		onmouseup={() => {
-			const wasHandled = handleSingleClick();
-			if (!wasHandled) {
-				tableContext.endFocus(focusDetails.coordinates);
-			}
+			handleSingleClick()
+				.then((wasHandled) => {
+					if (!wasHandled) {
+						tableContext.endFocus(focusDetails.coordinates);
+					}
+				})
+				.catch(devCatch);
 		}}
 	>
 		{#await visibleValue}
-			loading…
+			{loadingText}
 		{:then v}
 			{v}
 		{/await}