@lavalogic/scoria 0.12.2 → 0.13.1

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

@@ -2,17 +2,18 @@
 
 <script lang="ts" generics="T extends object">
 	import { dev } from '$app/environment';
-	import { generateShortUUID } from '../../../../Helpers/Helpers.svelte.js';
+	import { devCatch, generateShortUUID } from '../../../../Helpers/Helpers.svelte.js';
 	import { getContext, untrack } from 'svelte';
 	import NestedTable from '../../NestedTable.svelte';
 	import type { ExpandDef } from '../../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
 	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>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const { row, side, odd = false, customHeight, includeHighlight }: TableRowProps<T> = $props();
 
@@ -27,7 +28,7 @@
 				: row.getCenterVisibleCells()
 	);
 
-	let expandedColumnDef: ExpandDef<T> | undefined = $state();
+	let expandedColumnDef: ExpandDef<T, object, Primitive> | undefined = $state();
 
 	$effect(() => {
 		if (cells.length) {
@@ -44,7 +45,7 @@
 	let innerColumnDefs: DefsWrapper<object> = $state({ defs: [] });
 	let innerTableName: string | undefined = $state();
 
-	let prevExpandedColumnDef: ExpandDef<T> | undefined = $state();
+	let prevExpandedColumnDef: ExpandDef<T, object, Primitive> | undefined = $state();
 
 	const rowIndex = $derived(cells.at(0) && cells[0].row.visibleIndex);
 	const highlighted = $derived(
@@ -83,7 +84,7 @@
 		});
 	});
 
-	function onExpandChange(columnDef: ExpandDef<T>) {
+	function onExpandChange(columnDef: ExpandDef<T, object, Primitive>) {
 		if (expandedColumnDef?.id === columnDef.id) {
 			expandedColumnDef = undefined;
 		} else {
@@ -158,7 +159,7 @@ onMouseLeave={onMouseLeave} -->
 				})()}
 			{highlighted}
 			toggleHighlightedRow={() => {
-				tableContext.toggleHighlightedRow(row.original);
+				tableContext.toggleHighlightedRow(row.original).catch(devCatch);
 			}}
 		/>
 	{/if}

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

@@ -10,7 +10,7 @@
 
 	let { side, heights, columns, includeHighlight }: TableBodyProps<T> = $props();
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	type HasHeight = {
 		trHeight: RefWrapper<number>;
@@ -33,24 +33,28 @@
 			{#if includeHighlight}
 				<td class="highlight-dud"><!-- accomodating for row marking --></td>
 			{/if}
-			{#each columns as column (column)}
+			{#each columns as column (column.id)}
 				<QuickSearchCell {column} customFilters={tableContext.remoteFilters} />
 			{/each}
 		</tr>
 	{/if}
-	{#each tableContext.paginationRowModel.rows as row, index (row)}
-		{@const customHeight = heights[index]?.applyTo.includes(side)
-			? heights[index].maxHeight
-			: undefined}
-		<TableRow
-			{includeHighlight}
-			{customHeight}
-			{row}
-			{side}
-			odd={index % 2 == 1}
-			bind:this={rows[index]}
-		/>
-	{/each}
+	<svelte:boundary>
+		{#await tableContext.paginationRowModel then prm}
+			{#each prm.rows as row, index (row)}
+				{@const customHeight = heights[index]?.applyTo.includes(side)
+					? heights[index].maxHeight
+					: undefined}
+				<TableRow
+					{includeHighlight}
+					{customHeight}
+					{row}
+					{side}
+					odd={index % 2 == 1}
+					bind:this={rows[index]}
+				/>
+			{/each}
+		{/await}
+	</svelte:boundary>
 </tbody>
 
 <style>td {

package/dist/Components/Table/ColumnDefinitions/ExampleItemColumnDefRepository.svelte.d.ts

@@ -2,4 +2,4 @@ import type { ExampleItem } from '../../../Types/Examples/ExampleItem.js';
 import { type Component } from 'svelte';
 import type { DisplayDefModalProps } from '../Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js';
 import type { DefsWrapper } from '../Types/Columns/DefsWrapper.js';
-export declare function generateExampleItemColumnDefs(modal: Component<DisplayDefModalProps<ExampleItem>, object, ''>): DefsWrapper<ExampleItem>;
+export declare function generateExampleItemColumnDefs(modal: Component<DisplayDefModalProps<ExampleItem, never>, object, ''>): DefsWrapper<ExampleItem>;

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

@@ -13,8 +13,22 @@ import { BubbleDef } from '../Types/Columns/Definitions/Display/BubbleDef.svelte
 import { DisplayDef } from '../Types/Columns/Definitions/Display/DisplayDef.svelte.js';
 import { ProgressBarDef } from '../Types/Columns/Definitions/Display/ProgressBarDef.svelte.js';
 import { ValidityDef } from '../Types/Columns/Definitions/Display/ValidityDef.svelte.js';
+import { ExpandDef } from '../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
 export function generateExampleItemColumnDefs(modal) {
     let defs = $state([
+        new ExpandDef({
+            accessorFn: (it) => [it],
+            getInnerColumnDefs: () => generateExampleItemColumnDefs(modal),
+            header: 'Expand Cell',
+            id: 'expand',
+            headerIcon: 'access-token',
+            innerTableName: 'expand-inner',
+            innerTableOptions: {
+                selectionExtractor: (item) => Promise.resolve(item.id),
+                getUserId: () => '1'
+            },
+            isEnabled: () => true
+        }),
         new ValidityDef({
             header: 'Valid',
             id: 'valid',
@@ -42,9 +56,10 @@ export function generateExampleItemColumnDefs(modal) {
             // TODO make filtering work with the below:
             accessorFn: async (item) => {
                 void item.id;
-                await asyncSleep(500);
+                await asyncSleep(10);
                 return item.id;
-            }
+            },
+            debug: true
         }),
         new QueryDef({
             header: 'simulated query def',

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

@@ -8,7 +8,7 @@
 	import Action from '../../Action.svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	let allHighlighted = $state(false);
 
@@ -20,26 +20,39 @@
 			.catch(devCatch);
 	});
 
-	const backgroundColour = $derived(
-		tableContext.sortedData.length > 0 && allHighlighted
+	const backgroundColour = $derived.by(async () => {
+		return (await tableContext.sortedData).length > 0 && allHighlighted
 			? Colour['$brand-primary']
-			: Colour['$ui-white']
-	);
+			: Colour['$ui-white'];
+	});
 </script>
 
 <div class="checkbox-cell">
 	<div class="wrapper">
-		<Action
-			{backgroundColour}
-			hoverBackgroundColour={Colour['$brand-dark']}
-			size={Size.FillWidth}
-			icon={{
-				name: 'nothing'
-			}}
-			onclick={() => {
-				tableContext.onHighlightAll();
-			}}
-		/>
+		{#await backgroundColour}
+			<Action
+				hoverBackgroundColour={Colour['$brand-dark']}
+				size={Size.FillWidth}
+				icon={{
+					name: 'nothing'
+				}}
+				onclick={() => {
+					tableContext.onHighlightAll();
+				}}
+			/>
+		{:then backgroundColour}
+			<Action
+				{backgroundColour}
+				hoverBackgroundColour={Colour['$brand-dark']}
+				size={Size.FillWidth}
+				icon={{
+					name: 'nothing'
+				}}
+				onclick={() => {
+					tableContext.onHighlightAll();
+				}}
+			/>
+		{/await}
 	</div>
 </div>
 

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

@@ -4,7 +4,7 @@
 	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const allSelected: Promise<boolean> = $derived(tableContext.allSelectedInCurrentPage);
 	const checked: Promise<boolean> = $derived.by(() => {

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

@@ -28,7 +28,7 @@
 <script lang="ts" generics="T extends object">
 	const { showHighlight, side = 'centre', oncontextmenu }: TableHeadProps = $props();
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
 
 	const groups: Array<HeaderGroup<T>> = $derived.by(() => {

package/dist/Components/Table/Misc/ColumnPanel.svelte

@@ -11,7 +11,7 @@
 	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const labelledPresets: Array<SelectOption<string>> = $derived(
 		tableContext.columnPresets.map((pr) => ({ label: pr.name, value: pr.name }))

package/dist/Components/Table/Misc/ColumnPanelModal.svelte

@@ -13,7 +13,7 @@
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 	import type { ColumnPanelModalProps } from './ColumnPanelModalProps.js';
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const { onclose }: ColumnPanelModalProps = $props();
 	const labelledPresets: Array<SelectOption<string>> = $derived(

package/dist/Components/Table/Misc/FilterInput.svelte

@@ -24,7 +24,7 @@
 	import { numberDateFilterTypes } from './numberDateFilterTypes.js';
 	import { stringFilterTypes } from './stringFilterTypes.js';
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const { def, customFilters }: FilterInputProps<T> = $props();
 
@@ -447,7 +447,6 @@
 
 						const newFilterType = newValue?.value ?? NumberDateFilterMode.In;
 						tableContext.paginationRepo?.setFilterMode(def.id, newFilterType);
-						tableContext.paginationRepo?.filterModes.set(def.id, newFilterType);
 
 						if (selectedNumberFilterType?.value !== oldFilterType?.value) {
 							if (oldFilterType?.value === NumberDateFilterMode.Between) {
@@ -521,7 +520,6 @@
 					onchange={(newValue: SelectOption<StringFilterMode> | null) => {
 						const filterType = newValue?.value ?? StringFilterMode.Contains;
 						tableContext.paginationRepo?.setFilterMode(def.id, filterType);
-						tableContext.paginationRepo?.filterModes.set(def.id, filterType);
 					}}
 					onkeydown={(e: KeyboardEvent) => {
 						e.stopPropagation();

package/dist/Components/Table/Misc/FilterPanel.svelte

@@ -4,11 +4,11 @@
 	import Button from '../../Button.svelte';
 	import { Size } from '../../../Types/Internal/Size.js';
 	import { Variant } from '../../../Types/Internal/Variant.js';
+	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 	import FilterInput from './FilterInput.svelte';
-	import { getContext } from 'svelte';
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	function reset() {
 		tableContext.paginationRepo?.resetFilters();

package/dist/Components/Table/Misc/FilterPanelModal.svelte

@@ -15,7 +15,7 @@
 </script>
 
 <script lang="ts" generics="T extends object">
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const { onclose }: FilterPanelModalProps = $props();
 	const refs: Array<FilterInput<T>> = $state([]);

package/dist/Components/Table/Misc/TableFooter.svelte

@@ -25,7 +25,7 @@
 <script lang="ts" generics="T extends object">
 	let { onkeydown }: TableFooterProps = $props();
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 	const alertContext = getContext<AlertContext>(AlertContext.identifier);
 
 	const pageSizes: Array<SelectOption<number>> = $state([

package/dist/Components/Table/Misc/TableHorizontalBar.svelte

@@ -14,7 +14,7 @@
 		default as ToolboxPanelModal
 	} from './FilterPanelModal.svelte';
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const panels = {
 		[ExpandedPanel.None]: null,

package/dist/Components/Table/Misc/TableSidebar.svelte

@@ -13,7 +13,8 @@
 	import FilterPanel from './FilterPanel.svelte';
 	import SidePanel from './SidePanel.svelte';
 	import ToolboxPanel from './ToolboxPanel.svelte';
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const panels = {
 		[ExpandedPanel.None]: null,

package/dist/Components/Table/Misc/ToolboxPanel.svelte

@@ -1,11 +1,11 @@
 <svelte:options runes />
 
 <script lang="ts" generics="T extends object">
+	import Checkbox from '../../Checkbox.svelte';
 	import { getContext } from 'svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import Checkbox from '../../Checkbox.svelte';
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const onCompactChange = (e: Event) => {
 		tableContext.setIsCompact((e.target as HTMLInputElement).checked);

package/dist/Components/Table/Misc/ToolboxPanelModal.svelte

@@ -9,7 +9,7 @@
 
 	let { onclose }: ToolboxPanelModalProps = $props();
 
-	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const onCompactChange = (e: Event) => {
 		tableContext.setIsCompact((e.target as HTMLInputElement).checked);

package/dist/Components/Table/NestedTable.svelte

@@ -4,11 +4,14 @@
 	import Table from './Table.svelte';
 	import type { DefsWrapper } from './Types/Columns/DefsWrapper.js';
 	import { TableContext } from './Types/Context/TableContext.svelte.js';
-	import type { TableInitOptions } from './Types/Context/TableInitOptions.js';
+	import type { Primitive, TableInitOptions } from './Types/Context/TableInitOptions.js';
 	import { LocalTableDataRepository } from './Types/DataRepository/LocalTableDataRepository.svelte.js';
 	import { ToolbarPosition } from './Types/Toolbar/ToolbarPosition.js';
 
-	const defaultOptions: Omit<TableInitOptions<object>, 'selectionExtractor' | 'getUserId'> = {
+	const defaultOptions: Omit<
+		TableInitOptions<object, never>,
+		'selectionExtractor' | 'getUserId'
+	> = {
 		allowCopy: false,
 		enableResize: false,
 		allowColumnReordering: false,
@@ -18,17 +21,18 @@
 		displayFooter: false
 	};
 
-	export interface NestedTableProps<T extends object> {
+	export interface NestedTableProps<T extends object, IdType extends Primitive> {
 		tableName: string;
 		data: Array<T>;
 		columnDefWrapper: DefsWrapper<T>;
-		options: Pick<TableInitOptions<T>, 'selectionExtractor'> & Partial<TableInitOptions<T>>;
+		options: Pick<TableInitOptions<T, IdType>, 'selectionExtractor'> &
+			Partial<TableInitOptions<T, IdType>>;
 		oncontextmenu?: (e: MouseEvent) => void;
 		getUserId: () => string | undefined;
 	}
 </script>
 
-<script lang="ts" generics="T extends object">
+<script lang="ts" generics="T extends object,IdType extends Primitive">
 	const {
 		tableName,
 		data,
@@ -36,7 +40,7 @@
 		options,
 		oncontextmenu,
 		getUserId
-	}: NestedTableProps<T> = $props();
+	}: NestedTableProps<T, IdType> = $props();
 
 	const wrapper = {
 		get value() {
@@ -53,8 +57,8 @@
 	const dataRepo = $state(new LocalTableDataRepository(tableName, wrapper, () => getUserId()));
 
 	// NOTE known limitation: These are passed as wrappers, and they should never require reassignment. They are deeply reactive
-	const tableContext: TableContext<T> | undefined = $state(
-		TableContext.init<T>(columnDefWrapper, tableName, dataRepo, {
+	const tableContext: TableContext<T, IdType> | undefined = $state(
+		TableContext.init<T, IdType>(columnDefWrapper, tableName, dataRepo, {
 			...defaultOptions,
 			...options,
 			getUserId: () => getUserId()

package/dist/Components/Table/NestedTable.svelte.d.ts

@@ -1,34 +1,34 @@
 import type { DefsWrapper } from './Types/Columns/DefsWrapper.js';
-import type { TableInitOptions } from './Types/Context/TableInitOptions.js';
-export interface NestedTableProps<T extends object> {
+import type { Primitive, TableInitOptions } from './Types/Context/TableInitOptions.js';
+export interface NestedTableProps<T extends object, IdType extends Primitive> {
     tableName: string;
     data: Array<T>;
     columnDefWrapper: DefsWrapper<T>;
-    options: Pick<TableInitOptions<T>, 'selectionExtractor'> & Partial<TableInitOptions<T>>;
+    options: Pick<TableInitOptions<T, IdType>, 'selectionExtractor'> & Partial<TableInitOptions<T, IdType>>;
     oncontextmenu?: (e: MouseEvent) => void;
     getUserId: () => string | undefined;
 }
-declare function $$render<T extends object>(): {
-    props: NestedTableProps<T>;
+declare function $$render<T extends object, IdType extends Primitive>(): {
+    props: NestedTableProps<T, IdType>;
     exports: {};
     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, IdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, IdType>>['props'];
+    events(): ReturnType<typeof $$render<T, IdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, IdType>>['slots'];
     bindings(): "";
     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']>> & {
-        $$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, IdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, IdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, IdType>['props']>, ReturnType<__sveltets_Render<T, IdType>['events']>, ReturnType<__sveltets_Render<T, IdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, IdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    <T extends object, IdType extends Primitive>(internal: unknown, props: ReturnType<__sveltets_Render<T, IdType>['props']> & {}): ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const NestedTable: $$IsomorphicComponent;
-type NestedTable<T extends object> = InstanceType<typeof NestedTable<T>>;
+type NestedTable<T extends object, IdType extends Primitive> = InstanceType<typeof NestedTable<T, IdType>>;
 export default NestedTable;