@lavalogic/scoria 0.18.1 → 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>
 
@@ -32,34 +32,10 @@
 	const optional = $derived(cell.column.columnDef.optional);
 
 	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 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)
@@ -74,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);
 		}
 	});
 
@@ -135,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
 		) {
@@ -156,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) {
@@ -200,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;
 			}
@@ -220,7 +201,7 @@
 		bind:this={tdref}
 	>
 		{#await Promise.all([optionsPromise, selectValue])}
-			loading…
+			{loadingText}
 		{:then [options, value]}
 			<SingleSelect
 				focusOnLoad
@@ -273,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) {
@@ -291,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/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/ColumnDefinitions/ExampleItemColumnDefRepository.svelte.js

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

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;

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

@@ -16,7 +16,7 @@ export interface ColumnDefProps<T extends object, in FilterFnType, out OptionsTy
     defaultHidden?: boolean;
     minSize?: Pixels;
     width?: Pixels;
-    isEditable?: (item: T, index: number) => boolean | Promise<boolean>;
+    isEditable?: (item: T, index: number) => Promise<boolean>;
     resizable?: boolean;
     isValid?: ValidationFn<T>;
     filterFn?: FilterFn<T, FilterFnType>;
@@ -56,7 +56,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(): object;
-    readonly isEditable: (item: T, index: number) => boolean | Promise<boolean>;
+    readonly isEditable: (item: T, index: number) => Promise<boolean>;
     readonly resizable: boolean;
     readonly header: string | Snippet;
     readonly getOptions?: () => Array<SelectOption<OptionsType>> | Promise<Array<SelectOption<OptionsType>>>;

package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.js

@@ -10,7 +10,7 @@ export class ColumnDef {
         this.accessorFn = $derived(props.accessorFn);
         this._minSize = $state(props.minSize ?? 48);
         this._width = $state(props.width ?? props.minSize ?? 48);
-        this.isEditable = $derived(props.isEditable ?? (() => false));
+        this.isEditable = $derived(props.isEditable ?? (() => Promise.resolve(false)));
         this.resizable = $derived(props.resizable ?? true);
         this.header = $derived(props.header);
         this._filterValueType = $derived(props.filterValueType);