@lavalogic/scoria 0.16.3 → 0.17.0

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

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script
+	lang="ts"
+	module
+>
 	import Action from '../../../../Action.svelte';
 	import type { IconProps } from '../../../../IconProps.js';
 	import Portal from '../../../../Portal.svelte';
@@ -17,26 +20,29 @@
 		[Validity.Invalid]: {
 			name: 'circle-cross',
 			colour: Colour['$error-border'],
-			size: Size.Medium
+			size: Size.Medium,
 		},
 		[Validity.Valid]: { name: 'circle-tick', colour: Colour['$brand-primary'], size: Size.Medium },
 		[Validity.Info]: {
 			name: 'circle-information',
 			colour: Colour['$ui-blue-6'],
-			size: Size.Medium
+			size: Size.Medium,
 		},
 		[Validity.Warning]: {
 			name: 'circle-exclamation',
 			colour: Colour['$warning-border'],
-			size: Size.Medium
+			size: Size.Medium,
 		},
-		[Validity.Neutral]: { name: 'circle-minus', colour: Colour['$ui-blue-6'], size: Size.Medium }
+		[Validity.Neutral]: { name: 'circle-minus', colour: Colour['$ui-blue-6'], size: Size.Medium },
 	};
 
 	let previousFocusElement: HTMLElement | undefined = $state();
 </script>
 
-<script lang="ts" generics="T extends object,  FilterValueType">
+<script
+	lang="ts"
+	generics="T extends object,  FilterValueType"
+>
 	import { getContext, tick, untrack } from 'svelte';
 	import type { ValidityCellProps } from './ValidityCellProps.js';
 
@@ -47,7 +53,7 @@
 
 	const ColumnDef = $derived(cell.column.columnDef as AbstractDisplayDef<T, FilterValueType>);
 
-	const focusDetails: TableFocusDetails<T, FilterValueType> = $derived(
+	const focusDetails: TableFocusDetails<T> = $derived(
 		new TableFocusDetails(cell, tableContext, toast)
 	);
 
@@ -140,7 +146,7 @@
 				icon={{
 					name: 'loading',
 					colour: Colour['$ui-blue-6'],
-					size: Size.Medium
+					size: Size.Medium,
 				}}
 			/>
 		{:then maybeTuple}
@@ -163,7 +169,11 @@
 	</div>
 	{#if showModal}
 		<Portal target={document.body}>
-			<ColumnDef.modal {cell} {onclose} onsubmit={onclose} />
+			<ColumnDef.modal
+				{cell}
+				{onclose}
+				onsubmit={onclose}
+			/>
 		</Portal>
 	{/if}
 </td>

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

@@ -94,13 +94,14 @@
 		}
 	}
 
-	let trRef: HTMLTableRowElement | undefined = $state();
-	let _trHeight = $state(0);
-	export const trHeight = {
-		get value() {
-			return _trHeight;
-		},
-	};
+	//FIXME the below threw errors before. Please investigate
+	// let trRef: HTMLTableRowElement | undefined = $state();
+	// let _trHeight = $state(0);
+	// export const trHeight = {
+	// 	get value() {
+	// 		return _trHeight;
+	// 	},
+	// };
 
 	// $effect(() => {
 	// 	void trRef;
@@ -151,8 +152,8 @@ onMouseLeave={onMouseLeave} -->
 	class:alt={tableContext.alternateRowColours && odd}
 	class:highlighted
 	style={customHeight ? `height: ${customHeight}px !important;` : null}
-	bind:this={trRef}
 >
+	<!-- bind:this={trRef} -->
 	{#if showHighlightButton}
 		<ColumnHighlight
 			rowIndex={rowIndex ??

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

@@ -1,11 +1,7 @@
 import type { TableRowProps } from './TableRowProps.js';
 declare function $$render<T extends object>(): {
     props: TableRowProps<T>;
-    exports: {
-        trHeight: {
-            readonly value: number;
-        };
-    };
+    exports: {};
     bindings: "";
     slots: {};
     events: {};
@@ -15,11 +11,7 @@ declare class __sveltets_Render<T extends object> {
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
-    exports(): {
-        trHeight: {
-            readonly value: number;
-        };
-    };
+    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/TableBody.svelte

@@ -1,30 +1,37 @@
 <svelte:options runes />
 
-<script lang="ts" generics="T extends object">
-	import type { RefWrapper } from '../../../Types/Internal/RefWrapper.js';
+<script
+	lang="ts"
+	generics="T extends object"
+>
 	import { getContext } from 'svelte';
 	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();
+	let {
+		side,
+		// heights,
+		columns,
+		includeHighlight,
+	}: TableBodyProps<T> = $props();
 
 	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
-	type HasHeight = {
-		trHeight: RefWrapper<number>;
-	};
-	const rows: Array<TableRow<T>> = $state([]);
-	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;
-		}
-	};
+	// type HasHeight = {
+	// 	trHeight: RefWrapper<number>;
+	// };
+	// const rows: Array<TableRow<T>> = $state([]);
+	// 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;
+	// 	}
+	// };
 </script>
 
 <tbody>
@@ -34,24 +41,28 @@
 				<td class="highlight-dud"><!-- accomodating for row marking --></td>
 			{/if}
 			{#each columns as column (column.id)}
-				<QuickSearchCell {column} customFilters={tableContext.remoteFilters} />
+				<QuickSearchCell
+					{column}
+					customFilters={tableContext.remoteFilters}
+				/>
 			{/each}
 		</tr>
 	{/if}
 	<svelte:boundary>
 		{#await tableContext.paginationRowModel then prm}
 			{#each prm.rows as row, index (row)}
-				{@const customHeight = heights[index]?.applyTo.includes(side)
+				<!-- {@const customHeight = heights[index]?.applyTo.includes(side)
 					? heights[index].maxHeight
-					: undefined}
+					: undefined} -->
+				<!-- {customHeight} -->
 				<TableRow
+					customHeight={undefined}
 					{includeHighlight}
-					{customHeight}
 					{row}
 					{side}
 					odd={index % 2 == 1}
-					bind:this={rows[index]}
 				/>
+				<!-- bind:this={rows[index]} -->
 			{/each}
 		{/await}
 	</svelte:boundary>

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

@@ -1,11 +1,7 @@
 import type { TableBodyProps } from './TableBodyProps.js';
 declare function $$render<T extends object>(): {
     props: TableBodyProps<T>;
-    exports: {
-        rowHeights: {
-            readonly value: number[];
-        };
-    };
+    exports: {};
     bindings: "";
     slots: {};
     events: {};
@@ -15,11 +11,7 @@ declare class __sveltets_Render<T extends object> {
     events(): ReturnType<typeof $$render<T>>['events'];
     slots(): ReturnType<typeof $$render<T>>['slots'];
     bindings(): "";
-    exports(): {
-        rowHeights: {
-            readonly value: number[];
-        };
-    };
+    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/TableBodyProps.d.ts

@@ -1,8 +1,6 @@
 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/ColumnDefinitions/ExampleItemColumnDefRepository.svelte.js

@@ -24,9 +24,9 @@ export function generateExampleItemColumnDefs(modal) {
         innerTableName: 'expand-inner',
         innerTableOptions: {
             selectionExtractor: (item) => Promise.resolve(item.id),
-            getUserId: () => '1'
+            getUserId: () => '1',
         },
-        isEnabled: () => true
+        isEnabled: () => true,
     }));
     let defs = $state([
         expandDef,
@@ -43,12 +43,12 @@ export function generateExampleItemColumnDefs(modal) {
                     }
                     return {
                         value: Validity.Warning,
-                        reason: 'Example item is not checked.'
+                        reason: 'Example item is not checked.',
                     };
                 }
                 return { value: Validity.Neutral, reason: 'row not selected' };
             },
-            modal
+            modal,
         }),
         new DisplayDef({
             header: 'ID',
@@ -60,7 +60,7 @@ export function generateExampleItemColumnDefs(modal) {
                 await asyncSleep(10);
                 return item.id;
             },
-            debug: true
+            debug: true,
         }),
         new QueryDef({
             header: 'simulated query def',
@@ -76,37 +76,37 @@ export function generateExampleItemColumnDefs(modal) {
                     ? new Array(5).fill(0).map((it, index) => {
                         return {
                             label: (it + index).toString(),
-                            value: { value: (it + index).toString() }
+                            value: { value: (it + index).toString() },
                         };
                     })
                     : [];
-            }
+            },
         }),
         new TextInputDef({
             header: 'Name',
             id: 'name',
-            isEditable: () => true
+            isEditable: () => true,
         }),
         new NumberInputDef({
             header: 'Some Number',
             id: 'someNumber',
             isEditable: () => true,
             min: 0,
-            max: 12345
+            max: 12345,
         }),
         new ProgressBarDef({
             getColour: () => {
                 return {
                     colour: Colour['$ui-white'],
-                    backgroundColour: Colour['$brand-primary']
+                    backgroundColour: Colour['$brand-primary'],
                 };
             },
             header: 'Progress',
-            id: 'progress'
+            id: 'progress',
         }),
         new CheckboxDef({
             header: 'Checkbox',
-            id: 'isChecked'
+            id: 'isChecked',
         }),
         new DateInputDef({
             header: 'Some Date',
@@ -121,27 +121,27 @@ export function generateExampleItemColumnDefs(modal) {
                     return false;
                 }
                 return true;
-            }
+            },
             // defaultHidden: true
         }),
         new DateInputDef({
             header: 'Some Date With Time',
             id: 'someDateWithTime',
             isEditable: () => true,
-            showTime: true
+            showTime: true,
         }),
         new DateInputDef({
             header: 'Flo Date',
             id: 'floDate',
             isEditable: () => true,
-            defaultHidden: true
+            defaultHidden: true,
         }),
         new DateInputDef({
             header: 'Flo Date With Time',
             id: 'floDateWithTime',
             isEditable: () => true,
             defaultHidden: true,
-            showTime: true
+            showTime: true,
         }),
         // altSelectDef,
         new SelectDef({
@@ -152,24 +152,24 @@ export function generateExampleItemColumnDefs(modal) {
                 return [
                     {
                         label: 'First Option',
-                        value: ExampleSelectEnum.FirstOption
+                        value: ExampleSelectEnum.FirstOption,
                     },
                     {
                         label: 'Second Option',
-                        value: ExampleSelectEnum.SecondOption
+                        value: ExampleSelectEnum.SecondOption,
                     },
                     {
                         label: 'Third Option',
-                        value: ExampleSelectEnum.ThirdOption
+                        value: ExampleSelectEnum.ThirdOption,
                     },
                     {
                         label: 'Fourth Option',
-                        value: ExampleSelectEnum.FourthOption
-                    }
+                        value: ExampleSelectEnum.FourthOption,
+                    },
                 ];
             },
             getDisplayValue: (item) => item.someSelect,
-            isEditable: () => true
+            isEditable: () => true,
         }),
         new BubbleDef({
             header: 'Generated Bubble',
@@ -177,12 +177,12 @@ export function generateExampleItemColumnDefs(modal) {
             accessorFn: () => {
                 return ['foo', 'bar', 'baz'];
             },
-            defaultHidden: true
+            defaultHidden: true,
         }),
         new BubbleDef({
             header: 'Multi Bubbles',
-            id: 'someBubbles'
-        })
+            id: 'someBubbles',
+        }),
     ]);
     return {
         get defs() {
@@ -190,7 +190,7 @@ export function generateExampleItemColumnDefs(modal) {
         },
         set defs(items) {
             defs = items;
-        }
+        },
     };
 }
 //sanity check

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

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script module lang="ts">
+<script
+	module
+	lang="ts"
+>
 	import Icon from '../../Icon.svelte';
 	import { TooltipContext } from '../../../Contexts/TooltipContext.svelte.js';
 	import { Delay } from '../../../Delay/Delay.js';
@@ -25,7 +28,10 @@
 	}
 </script>
 
-<script lang="ts" generics="T extends object">
+<script
+	lang="ts"
+	generics="T extends object"
+>
 	const { showHighlight, side = 'centre', oncontextmenu }: TableHeadProps = $props();
 
 	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
@@ -50,7 +56,7 @@
 	const iconNames = {
 		asc: 'sort-asc',
 		desc: 'sort-desc',
-		none: 'sort-none'
+		none: 'sort-none',
 	} as const;
 
 	let currentDropTarget: HTMLTableCellElement | null = $state(null);
@@ -73,7 +79,7 @@
 				text: `Show ${typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}`,
 				arrow: Side.Bottom,
 				delay: Delay.Default,
-				rect
+				rect,
 			});
 		}
 	}
@@ -119,7 +125,12 @@
 	{#each groups as group (group)}
 		<tr>
 			{#if showHighlight && group.headers.length}
-				<th id="highlight-header" draggable={false} colspan="1" class="highlight-column">
+				<th
+					id="highlight-header"
+					draggable={false}
+					colspan="1"
+					class="highlight-column"
+				>
 					<div class="th">
 						<HighlightAllHeader />
 					</div>
@@ -203,7 +214,10 @@
 									}}
 									class="contents"
 								>
-									<div class="th" class:nopadding={isRowSelect}>
+									<div
+										class="th"
+										class:nopadding={isRowSelect}
+									>
 										<div class="header-text-wrapper no-sort cursor-pointer select-none">
 											{#if isRowSelect}
 												<SelectAllHeader />

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

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" generics="T extends object">
+<script
+	lang="ts"
+	generics="T extends object"
+>
 	import Button from '../../Button.svelte';
 	import SingleSelect from '../../SingleSelect.svelte';
 	import ColumnList from '../Body/Rows/ColumnList.svelte';
@@ -60,9 +63,15 @@
 	}}
 >
 	<!-- size={Size.MediumSmall} -->
-	<TextInput placeholder="name" bind:value={pendingPresetName} />
-	<Button type="submit" variant={Variant.Secondary} nowrap size={Size.MediumSmall}
-		>Save Layout</Button
+	<TextInput
+		placeholder="name"
+		bind:value={pendingPresetName}
+	/>
+	<Button
+		type="submit"
+		variant={Variant.Secondary}
+		nowrap
+		size={Size.MediumSmall}>Save Layout</Button
 	>
 </form>
 

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

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" generics="T extends object">
+<script
+	lang="ts"
+	generics="T extends object"
+>
 	import Button from '../../Button.svelte';
 	import SingleSelect from '../../SingleSelect.svelte';
 	import ColumnList from '../Body/Rows/ColumnList.svelte';
@@ -77,7 +80,11 @@
 		</div>
 		<div class="column-panel bottom save-preset-wrapper">
 			<!-- size={Size.MediumSmall} -->
-			<TextInput placeholder="name" bind:value={pendingPresetName} onkeydown={trySavePreset} />
+			<TextInput
+				placeholder="name"
+				bind:value={pendingPresetName}
+				onkeydown={trySavePreset}
+			/>
 			<Button
 				type="submit"
 				variant={Variant.Secondary}

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

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" generics="T extends object">
+<script
+	lang="ts"
+	generics="T extends object, FilterValueType, FilterOptionsType"
+>
 	import { dev } from '$app/environment';
 	import Button from '../../Button.svelte';
 	import MultiSelect from '../../MultiSelect.svelte';
@@ -26,7 +29,7 @@
 
 	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
-	const { def, customFilters }: FilterInputProps<T, unknown> = $props();
+	const { def, customFilters }: FilterInputProps<T, FilterValueType, FilterOptionsType> = $props();
 
 	const customFilter = $derived(customFilters?.get(def.id));
 

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

@@ -1,25 +1,25 @@
 import type { FilterInputProps } from './FilterInputProps.js';
-declare function $$render<T extends object>(): {
-    props: FilterInputProps<T, unknown>;
+declare function $$render<T extends object, FilterValueType, FilterOptionsType>(): {
+    props: FilterInputProps<T, FilterValueType, FilterOptionsType>;
     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, FilterValueType, FilterOptionsType> {
+    props(): ReturnType<typeof $$render<T, FilterValueType, FilterOptionsType>>['props'];
+    events(): ReturnType<typeof $$render<T, FilterValueType, FilterOptionsType>>['events'];
+    slots(): ReturnType<typeof $$render<T, FilterValueType, FilterOptionsType>>['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, FilterValueType, FilterOptionsType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, FilterValueType, FilterOptionsType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, FilterValueType, FilterOptionsType>['props']>, ReturnType<__sveltets_Render<T, FilterValueType, FilterOptionsType>['events']>, ReturnType<__sveltets_Render<T, FilterValueType, FilterOptionsType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, FilterValueType, FilterOptionsType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, FilterValueType, FilterOptionsType>['exports']>;
+    <T extends object, FilterValueType, FilterOptionsType>(internal: unknown, props: ReturnType<__sveltets_Render<T, FilterValueType, FilterOptionsType>['props']> & {}): ReturnType<__sveltets_Render<T, FilterValueType, FilterOptionsType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
 }
 declare const FilterInput: $$IsomorphicComponent;
-type FilterInput<T extends object> = InstanceType<typeof FilterInput<T>>;
+type FilterInput<T extends object, FilterValueType, FilterOptionsType> = InstanceType<typeof FilterInput<T, FilterValueType, FilterOptionsType>>;
 export default FilterInput;

package/dist/Components/Table/Misc/FilterInputProps.d.ts

@@ -1,6 +1,6 @@
 import type { ColumnDef } from '../Types/Columns/Definitions/ColumnDef.svelte.js';
 import type { CustomRemoteFilters } from '../Types/Filtering/CustomRemoteFilters.js';
-export interface FilterInputProps<T extends object, FilterValueType> {
-    def: ColumnDef<T, FilterValueType>;
+export interface FilterInputProps<T extends object, FilterValueType, out FilterOptionsType> {
+    def: ColumnDef<T, FilterValueType, FilterOptionsType>;
     customFilters?: CustomRemoteFilters<FilterValueType> | undefined;
 }

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

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script
+	lang="ts"
+	module
+>
 	import Button from '../../Button.svelte';
 	import TouchModal from '../../Touch/TouchModal.svelte';
 	import { Size } from '../../../Types/Internal/Size.js';
@@ -14,11 +17,14 @@
 	}
 </script>
 
-<script lang="ts" generics="T extends object">
+<script
+	lang="ts"
+	generics="T extends object"
+>
 	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 
 	const { onclose }: FilterPanelModalProps = $props();
-	const refs: Array<FilterInput<T>> = $state([]);
+	const refs: Array<FilterInput<T, never, unknown>> = $state([]);
 
 	function reset() {
 		tableContext.paginationRepo?.resetFilters();
@@ -34,7 +40,11 @@
 	<div class="flex">
 		<div class="column-panel">
 			{#each tableContext.columnDefs as def, index (def)}
-				<FilterInput bind:this={refs[index]} {def} customFilters={tableContext.remoteFilters} />
+				<FilterInput
+					bind:this={refs[index]}
+					{def}
+					customFilters={tableContext.remoteFilters}
+				/>
 			{/each}
 
 			<div class="reset-button">