@lavalogic/scoria 0.11.14 → 0.12.0

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

@@ -1,28 +1,17 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script lang="ts" generics="T extends object">
+	import { dev } from '$app/environment';
 	import { generateShortUUID } from '../../../../Helpers/Helpers.svelte.js';
-	import { getContext, onMount, untrack } from 'svelte';
+	import { getContext, untrack } from 'svelte';
 	import NestedTable from '../../NestedTable.svelte';
-	import type { Row } from '../../Types/Context/Row.js';
-	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
-	import type { TableCell } from '../../Types/Columns/TableCell.js';
 	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 ColumnHighlight from './ColumnHighlight.svelte';
 	import TableColumn from './Columns/TableColumn.svelte';
-
-	export interface TableRowProps<T extends object> {
-		row: Row<T>;
-		side: 'left' | 'right' | 'centre';
-		odd: boolean;
-		customHeight: number | undefined;
-		includeHighlight: boolean;
-		// oncontextmenu?: (e: MouseEvent) => void
-	}
-</script>
-
-<script lang="ts" generics="T extends object">
+	import type { TableRowProps } from './TableRowProps.js';
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 
 	const { row, side, odd = false, customHeight, includeHighlight }: TableRowProps<T> = $props();
@@ -30,7 +19,7 @@
 	const hoverable = $derived(tableContext.changeColourOnHover);
 
 	//HACK converted this from derived to state+deffect because otherwise this throws an unsafe mutation error deeper down the stack
-	const cells: TableCell<T>[] = $derived(
+	const cells: Array<TableCell<T>> = $derived(
 		side === 'left'
 			? row.getLeftVisibleCells()
 			: side === 'right'
@@ -41,7 +30,7 @@
 	let expandedColumnDef: ExpandDef<T> | undefined = $state();
 
 	$effect(() => {
-		if (cells?.length) {
+		if (cells.length) {
 			void tableContext.table.data;
 			void tableContext.paginationRepo?.paginationState.pageIndex;
 			void tableContext.paginationRepo?.paginationState.pageSize;
@@ -51,13 +40,13 @@
 		}
 	});
 
-	let innerDataPromise: object[] | Promise<object[]> | undefined = $state();
+	let innerDataPromise: Array<object> | Promise<Array<object>> | undefined = $state();
 	let innerColumnDefs: DefsWrapper<object> = $state({ defs: [] });
 	let innerTableName: string | undefined = $state();
 
-	let prevExpandedColumnDef: ExpandDef<T, object> | undefined = $state();
+	let prevExpandedColumnDef: ExpandDef<T> | undefined = $state();
 
-	const rowIndex = $derived(cells[0] && cells[0].row.visibleIndex);
+	const rowIndex = $derived(cells.at(0) && cells[0].row.visibleIndex);
 	const highlighted = $derived(
 		rowIndex != undefined &&
 			tableContext.highlightedItems.has(tableContext.selectionExtractor(row.original))
@@ -71,17 +60,17 @@
 		void expandedColumnDef;
 
 		untrack(() => {
-			if (expandedColumnDef && expandedColumnDef?.id != prevExpandedColumnDef?.id) {
+			if (expandedColumnDef && expandedColumnDef.id != prevExpandedColumnDef?.id) {
 				prevExpandedColumnDef = expandedColumnDef;
 				innerColumnDefs = expandedColumnDef.getInnerColumnDefs(
 					cells[0].row.original,
 					cells[0].row.originalIndex
 				);
 
-				innerDataPromise = expandedColumnDef.accessorFn!(
+				innerDataPromise = expandedColumnDef.accessorFn(
 					cells[0].row.original,
 					cells[0].row.originalIndex
-				) as Promise<object[]>;
+				) as Promise<Array<object>>;
 				innerTableName = expandedColumnDef.innerTableName;
 			} else if (
 				!expandedColumnDef ||
@@ -94,7 +83,7 @@
 		});
 	});
 
-	function onExpandChange(columnDef: ExpandDef<T, object>) {
+	function onExpandChange(columnDef: ExpandDef<T>) {
 		if (expandedColumnDef?.id === columnDef.id) {
 			expandedColumnDef = undefined;
 		} else {
@@ -109,6 +98,7 @@
 			return _trHeight;
 		}
 	};
+
 	$effect(() => {
 		if (trRef) {
 			const observer = new ResizeObserver((entries) => {
@@ -121,11 +111,14 @@
 			observer.observe(trRef);
 
 			const currentTrRef = trRef;
-			return () => observer.unobserve(currentTrRef);
+			return () => {
+				observer.unobserve(currentTrRef);
+			};
 		}
+		return () => {};
 	});
 
-	let innerTrRef: HTMLTableRowElement | undefined = $state();
+	// let innerTrRef: HTMLTableRowElement | undefined = $state();
 	// let _innerTrHeight = $state(0);
 	// export const innerTrHeight = {
 	// 	get value() {
@@ -156,7 +149,13 @@ onMouseLeave={onMouseLeave} -->
 >
 	{#if showHighlightButton}
 		<ColumnHighlight
-			{rowIndex}
+			rowIndex={rowIndex ??
+				(() => {
+					if (dev) {
+						console.error(`column had invalid row index: ${rowIndex}`);
+					}
+					return -1;
+				})()}
 			{highlighted}
 			toggleHighlightedRow={() => {
 				tableContext.toggleHighlightedRow(row.original);
@@ -169,8 +168,10 @@ onMouseLeave={onMouseLeave} -->
 </tr>
 
 {#if expandedColumnDef}
+	<!-- TODO re-test and re-implement these -->
 	<!-- transition:slide={{ duration: 150, axis: 'y', delay: 0 }} -->
-	<tr class="inner-table" bind:this={innerTrRef}>
+	<!--  bind:this={innerTrRef} -->
+	<tr class="inner-table">
 		{#await innerDataPromise}
 			<td {colspan}>loading&hellip;</td>
 		{:then data}
@@ -203,7 +204,13 @@ onMouseLeave={onMouseLeave} -->
 				<td {colspan}>No Data</td>
 			{/if}
 		{:catch e}
-			{@debug e}
+			{#if dev}
+				<td>
+					error: {e}
+				</td>
+				<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+				{@debug e}
+			{/if}
 			<td {colspan}>Error Fetching data</td>
 		{/await}
 	</tr>

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

@@ -1,11 +1,4 @@
-import type { Row } from '../../Types/Context/Row.js';
-export interface TableRowProps<T extends object> {
-    row: Row<T>;
-    side: 'left' | 'right' | 'centre';
-    odd: boolean;
-    customHeight: number | undefined;
-    includeHighlight: boolean;
-}
+import type { TableRowProps } from './TableRowProps.js';
 declare function $$render<T extends object>(): {
     props: TableRowProps<T>;
     exports: {

package/dist/Components/Table/Body/Rows/TableRowProps.d.ts

@@ -0,0 +1,8 @@
+import type { Row } from '../../Types/Context/Row.js';
+export interface TableRowProps<T extends object> {
+    row: Row<T>;
+    side: 'left' | 'right' | 'centre';
+    odd: boolean;
+    customHeight: number | undefined;
+    includeHighlight: boolean;
+}

package/dist/Components/Table/Body/Rows/TableRowProps.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,33 +1,25 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	export interface HeightData<T extends object> {
-		index: number;
-		applyTo: Array<TableBodyProps<T>['side']>;
-		maxHeight: number;
-	}
-	export interface TableBodyProps<T extends object> {
-		side: 'left' | 'centre' | 'right';
-		heights: Array<HeightData<T>>;
-		columns: Array<Column<T>>;
-		includeHighlight: boolean;
-	}
-</script>
-
 <script lang="ts" generics="T extends object">
-	import { dev } from '$app/environment';
+	import type { RefWrapper } from '../../../Types/Internal/RefWrapper.js';
 	import { getContext } from 'svelte';
-	import type { Column } from '../Types/Columns/Column.js';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 	import QuickSearchCell from './QuickSearchCell.svelte';
 	import TableRow from './Rows/TableRow.svelte';
+	import type { TableBodyProps } from './TableBodyProps.js';
 
 	let { side, heights, columns, includeHighlight }: TableBodyProps<T> = $props();
 
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 
+	type HasHeight = {
+		trHeight: RefWrapper<number>;
+	};
 	const rows: Array<TableRow<T>> = $state([]);
-	const _rowHeights = $derived(rows.map((it) => it?.trHeight.value ?? 0));
+	const _rowHeights = $derived(
+		// HACK terrible type casting due to svelte type gen not being liked by eslint
+		rows.map((it) => (it as HasHeight | undefined)?.trHeight.value ?? 0)
+	);
 	export const rowHeights = {
 		get value() {
 			return _rowHeights;
@@ -46,10 +38,7 @@
 			{/each}
 		</tr>
 	{/if}
-	{#each tableContext.paginationRowModel.rows ?? [] as row, index (row)}
-		{#if dev && !row.original}
-			{@debug row}
-		{/if}
+	{#each tableContext.paginationRowModel.rows as row, index (row)}
 		{@const customHeight = heights[index]?.applyTo.includes(side)
 			? heights[index].maxHeight
 			: undefined}

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

@@ -1,15 +1,4 @@
-export interface HeightData<T extends object> {
-    index: number;
-    applyTo: Array<TableBodyProps<T>['side']>;
-    maxHeight: number;
-}
-export interface TableBodyProps<T extends object> {
-    side: 'left' | 'centre' | 'right';
-    heights: Array<HeightData<T>>;
-    columns: Array<Column<T>>;
-    includeHighlight: boolean;
-}
-import type { Column } from '../Types/Columns/Column.js';
+import type { TableBodyProps } from './TableBodyProps.js';
 declare function $$render<T extends object>(): {
     props: TableBodyProps<T>;
     exports: {

package/dist/Components/Table/Body/TableBodyProps.d.ts

@@ -0,0 +1,8 @@
+import type { Column } from '../Types/Columns/Column.js';
+import type { HeightData } from './HeightData.js';
+export interface TableBodyProps<T extends object> {
+    side: 'left' | 'centre' | 'right';
+    heights: Array<HeightData<T>>;
+    columns: Array<Column<T>>;
+    includeHighlight: boolean;
+}

package/dist/Components/Table/Body/TableBodyProps.js

@@ -0,0 +1 @@
+export {};

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

@@ -1,7 +1,5 @@
 import type { ExampleItem } from '../../../Types/Examples/ExampleItem.js';
 import { type Component } from 'svelte';
-import type { DefsWrapper } from '../Types/Columns/DefsWrapper.js';
 import type { DisplayDefModalProps } from '../Types/Columns/Definitions/Display/AbstractDisplayDef.svelte.js';
-export declare class ExampleItemColumnDefRepository {
-    static generateExampleItemColumnDefs(modal: Component<DisplayDefModalProps<ExampleItem>, any, any>): DefsWrapper<ExampleItem>;
-}
+import type { DefsWrapper } from '../Types/Columns/DefsWrapper.js';
+export declare function generateExampleItemColumnDefs(modal: Component<DisplayDefModalProps<ExampleItem>, object, ''>): DefsWrapper<ExampleItem>;

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

@@ -1,180 +1,178 @@
+import { asyncSleep } from '../../../Helpers/Helpers.svelte.js';
 import { Colour } from '../../../scss/colours.js';
 import { ExampleSelectEnum } from '../../../Types/Examples/ExampleSelectEnum.js';
 import { Validity } from '../../../Types/Internal/Validity.js';
-import { tick, untrack } from 'svelte';
+import {} from 'svelte';
 import { CheckboxDef } from '../Types/Columns/Definitions/Accessors/CheckboxDef.svelte.js';
 import { DateInputDef } from '../Types/Columns/Definitions/Accessors/DateInputDef.svelte.js';
 import { NumberInputDef } from '../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
+import { QueryDef } from '../Types/Columns/Definitions/Accessors/QueryDef.svelte.js';
 import { SelectDef } from '../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
 import { TextInputDef } from '../Types/Columns/Definitions/Accessors/TextInputDef.svelte.js';
 import { BubbleDef } from '../Types/Columns/Definitions/Display/BubbleDef.svelte.js';
 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 { asyncSleep } from '../../../Helpers/Helpers.svelte.js';
-import { QueryDef } from '../Types/Columns/Definitions/Accessors/QueryDef.svelte.js';
-export class ExampleItemColumnDefRepository {
-    static generateExampleItemColumnDefs(modal) {
-        let defs = $state([
-            new ValidityDef({
-                header: 'Valid',
-                id: 'valid',
-                isValid: (item, isSelected) => {
-                    if (isSelected) {
-                        if (!item.name?.trim()) {
-                            return { value: Validity.Invalid, reason: 'Missing name' };
-                        }
-                        if (item.isChecked === true) {
-                            return Validity.Valid;
-                        }
-                        return {
-                            value: Validity.Warning,
-                            reason: 'Example item is not checked.'
-                        };
+export function generateExampleItemColumnDefs(modal) {
+    let defs = $state([
+        new ValidityDef({
+            header: 'Valid',
+            id: 'valid',
+            isValid: (item, isSelected) => {
+                if (isSelected) {
+                    if (!item.name.trim()) {
+                        return { value: Validity.Invalid, reason: 'Missing name' };
+                    }
+                    if (item.isChecked) {
+                        return Validity.Valid;
                     }
-                    return { value: Validity.Neutral, reason: 'row not selected' };
-                },
-                modal
-            }),
-            new DisplayDef({
-                header: 'ID',
-                id: 'id',
-                filterValueType: 'Number',
-                // TODO make filtering work with the below:
-                accessorFn: async (item) => {
-                    void item.id;
-                    await asyncSleep(500);
-                    return item.id;
-                }
-            }),
-            new QueryDef({
-                header: 'simulated query def',
-                getDisplayValue: async (item, index) => {
-                    return item.simulatedQuery?.value ?? null;
-                },
-                isEditable: () => true,
-                id: 'simulatedQuery',
-                query: async (v, item, index) => {
-                    void item.someDate;
-                    await asyncSleep(25);
-                    return item.someDate
-                        ? new Array(5).fill(0).map((it, index) => {
-                            return {
-                                label: (it + index).toString(),
-                                value: { value: (it + index).toString() }
-                            };
-                        })
-                        : [];
-                }
-            }),
-            new TextInputDef({
-                header: 'Name',
-                id: 'name',
-                isEditable: () => true
-            }),
-            new NumberInputDef({
-                header: 'Some Number',
-                id: 'someNumber',
-                isEditable: () => true,
-                min: 0,
-                max: 12345
-            }),
-            new ProgressBarDef({
-                getColour: () => {
                     return {
-                        colour: Colour['$ui-white'],
-                        backgroundColour: Colour['$brand-primary']
+                        value: Validity.Warning,
+                        reason: 'Example item is not checked.'
                     };
-                },
-                header: 'Progress',
-                id: 'progress'
-            }),
-            new CheckboxDef({
-                header: 'Checkbox',
-                id: 'isChecked'
-            }),
-            new DateInputDef({
-                header: 'Some Date',
-                id: 'someDate',
-                isEditable: async (item) => {
-                    if (item.someDate?.getFullYear() == 2030) {
-                        await asyncSleep(1000);
-                        return false;
-                    }
-                    else if (item.someDate?.getFullYear() == 2029) {
-                        await asyncSleep(5000);
-                        return false;
-                    }
-                    return true;
                 }
-                // defaultHidden: true
-            }),
-            new DateInputDef({
-                header: 'Some Date With Time',
-                id: 'someDateWithTime',
-                isEditable: () => true,
-                showTime: true
-            }),
-            new DateInputDef({
-                header: 'Flo Date',
-                id: 'floDate',
-                isEditable: () => true,
-                defaultHidden: true
-            }),
-            new DateInputDef({
-                header: 'Flo Date With Time',
-                id: 'floDateWithTime',
-                isEditable: () => true,
-                defaultHidden: true,
-                showTime: true
-            }),
-            new SelectDef({
-                id: 'someSelect',
-                header: 'Select Example',
-                optional: false,
-                getOptions: () => {
-                    return [
-                        {
-                            label: 'First Option',
-                            value: ExampleSelectEnum.FirstOption
-                        },
-                        {
-                            label: 'Second Option',
-                            value: ExampleSelectEnum.SecondOption
-                        },
-                        {
-                            label: 'Third Option',
-                            value: ExampleSelectEnum.ThirdOption
-                        },
-                        {
-                            label: 'Fourth Option',
-                            value: ExampleSelectEnum.FourthOption
-                        }
-                    ];
-                },
-                getDisplayValue: (item) => item.someSelect,
-                isEditable: () => true
-            }),
-            new BubbleDef({
-                header: 'Generated Bubble',
-                id: 'generatedBubble',
-                accessorFn: () => {
-                    return ['foo', 'bar', 'baz'];
-                },
-                defaultHidden: true
-            }),
-            new BubbleDef({
-                header: 'Multi Bubbles',
-                id: 'someBubbles'
-            })
-        ]);
-        return {
-            get defs() {
-                return defs;
+                return { value: Validity.Neutral, reason: 'row not selected' };
             },
-            set defs(items) {
-                defs = items;
+            modal
+        }),
+        new DisplayDef({
+            header: 'ID',
+            id: 'id',
+            filterValueType: 'Number',
+            // TODO make filtering work with the below:
+            accessorFn: async (item) => {
+                void item.id;
+                await asyncSleep(500);
+                return item.id;
             }
-        };
-    }
+        }),
+        new QueryDef({
+            header: 'simulated query def',
+            getDisplayValue: (item) => {
+                return item.simulatedQuery?.value ?? null;
+            },
+            isEditable: () => true,
+            id: 'simulatedQuery',
+            query: async (_v, item) => {
+                void item.someDate;
+                await asyncSleep(25);
+                return item.someDate
+                    ? new Array(5).fill(0).map((it, index) => {
+                        return {
+                            label: (it + index).toString(),
+                            value: { value: (it + index).toString() }
+                        };
+                    })
+                    : [];
+            }
+        }),
+        new TextInputDef({
+            header: 'Name',
+            id: 'name',
+            isEditable: () => true
+        }),
+        new NumberInputDef({
+            header: 'Some Number',
+            id: 'someNumber',
+            isEditable: () => true,
+            min: 0,
+            max: 12345
+        }),
+        new ProgressBarDef({
+            getColour: () => {
+                return {
+                    colour: Colour['$ui-white'],
+                    backgroundColour: Colour['$brand-primary']
+                };
+            },
+            header: 'Progress',
+            id: 'progress'
+        }),
+        new CheckboxDef({
+            header: 'Checkbox',
+            id: 'isChecked'
+        }),
+        new DateInputDef({
+            header: 'Some Date',
+            id: 'someDate',
+            isEditable: async (item) => {
+                if (item.someDate?.getFullYear() == 2030) {
+                    await asyncSleep(1000);
+                    return false;
+                }
+                else if (item.someDate?.getFullYear() == 2029) {
+                    await asyncSleep(5000);
+                    return false;
+                }
+                return true;
+            }
+            // defaultHidden: true
+        }),
+        new DateInputDef({
+            header: 'Some Date With Time',
+            id: 'someDateWithTime',
+            isEditable: () => true,
+            showTime: true
+        }),
+        new DateInputDef({
+            header: 'Flo Date',
+            id: 'floDate',
+            isEditable: () => true,
+            defaultHidden: true
+        }),
+        new DateInputDef({
+            header: 'Flo Date With Time',
+            id: 'floDateWithTime',
+            isEditable: () => true,
+            defaultHidden: true,
+            showTime: true
+        }),
+        new SelectDef({
+            id: 'someSelect',
+            header: 'Select Example',
+            optional: false,
+            getOptions: () => {
+                return [
+                    {
+                        label: 'First Option',
+                        value: ExampleSelectEnum.FirstOption
+                    },
+                    {
+                        label: 'Second Option',
+                        value: ExampleSelectEnum.SecondOption
+                    },
+                    {
+                        label: 'Third Option',
+                        value: ExampleSelectEnum.ThirdOption
+                    },
+                    {
+                        label: 'Fourth Option',
+                        value: ExampleSelectEnum.FourthOption
+                    }
+                ];
+            },
+            getDisplayValue: (item) => item.someSelect,
+            isEditable: () => true
+        }),
+        new BubbleDef({
+            header: 'Generated Bubble',
+            id: 'generatedBubble',
+            accessorFn: () => {
+                return ['foo', 'bar', 'baz'];
+            },
+            defaultHidden: true
+        }),
+        new BubbleDef({
+            header: 'Multi Bubbles',
+            id: 'someBubbles'
+        })
+    ]);
+    return {
+        get defs() {
+            return defs;
+        },
+        set defs(items) {
+            defs = items;
+        }
+    };
 }

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

@@ -1,10 +1,11 @@
 <svelte:options runes />
 
 <script lang="ts" generics="T extends object">
-	import { getContext } from 'svelte';
-	import Action from '../../Action.svelte';
+	import { devCatch } from '../../../Helpers/Helpers.svelte.js';
 	import { Colour } from '../../../scss/colours.js';
 	import { Size } from '../../../Types/Internal/Size.js';
+	import { getContext } from 'svelte';
+	import Action from '../../Action.svelte';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
@@ -12,9 +13,11 @@
 	let allHighlighted = $state(false);
 
 	$effect(() => {
-		tableContext.allHighlighted.then((flag) => {
-			allHighlighted = flag;
-		});
+		tableContext.allHighlighted
+			.then((flag) => {
+				allHighlighted = flag;
+			})
+			.catch(devCatch);
 	});
 
 	const backgroundColour = $derived(

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

@@ -8,7 +8,7 @@
 
 	const allSelected: Promise<boolean> = $derived(tableContext.allSelectedInCurrentPage);
 	const checked: Promise<boolean> = $derived.by(() => {
-		return (tableContext.dataRepo?.data.length ?? 0) > 0 ? allSelected : Promise.resolve(false);
+		return tableContext.dataRepo.data.length > 0 ? allSelected : Promise.resolve(false);
 	});
 </script>