@lavalogic/scoria 0.16.4 → 0.17.1

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

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" generics="T extends object,FilterValueType">
+<script
+	lang="ts"
+	generics="T extends object,FilterValueType"
+>
 	import { dev } from '$app/environment';
 
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
@@ -59,7 +62,7 @@
 	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
 	const toastContext = getContext<ToastContext>(ToastContext.identifier);
 
-	const focusDetails: TableFocusDetails<T, FilterValueType> = $derived(
+	const focusDetails: TableFocusDetails<T> = $derived(
 		new TableFocusDetails(cell, tableContext, toastContext.toast)
 	);
 
@@ -79,19 +82,17 @@
 			if (editable) {
 				tick()
 					.then(() => {
-						untrack(() => {
-							if (typeof value == 'object' && value instanceof Promise) {
-								value
-									.then((v: unknown) => {
-										tempTextValue = v?.toString() ?? '';
-										isBeingEdited = true;
-									})
-									.catch(devCatch);
-							} else {
-								tempTextValue = value?.toString() ?? '';
-								isBeingEdited = true;
-							}
-						});
+						if (typeof value == 'object' && value instanceof Promise) {
+							value
+								.then((v: unknown) => {
+									tempTextValue = v?.toString() ?? '';
+									isBeingEdited = true;
+								})
+								.catch(devCatch);
+						} else {
+							tempTextValue = value?.toString() ?? '';
+							isBeingEdited = true;
+						}
 					})
 					.catch(devCatch);
 			} else {
@@ -103,17 +104,15 @@
 					})
 					.catch(devCatch);
 			}
-		} else {
-			if (isBeingEdited) {
-				untrack(() => {
-					isBeingEdited = false;
-					tick()
-						.then(() => {
-							onBlur();
-						})
-						.catch(devCatch);
-				});
-			}
+		} else if (isBeingEdited) {
+			untrack(() => {
+				isBeingEdited = false;
+				tick()
+					.then(() => {
+						onBlur();
+					})
+					.catch(devCatch);
+			});
 		}
 	});
 
@@ -227,7 +226,7 @@
 		(e.target as HTMLInputElement).scrollIntoView({
 			behavior: 'instant',
 			block: 'nearest',
-			inline: 'nearest'
+			inline: 'nearest',
 		});
 	}
 
@@ -254,7 +253,6 @@
 			if (!selectAll) {
 				overrideEdit = true;
 
-				tableContext.isMousingDown = false;
 				tick()
 					.then(() => {
 						inputRef?.focus();
@@ -298,7 +296,7 @@
 		if (tdref != prevTdRef) {
 			untrack(() => {
 				prevTdRef = tdref;
-				prevTdRef?.addEventListener('edit', onEdit);
+				tdref?.addEventListener('edit', onEdit);
 				unsubscriber = () => {
 					prevTdRef?.removeEventListener('edit', onEdit);
 				};

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)
 	);
 
@@ -68,6 +74,12 @@
 
 	let validity = $derived(focusDetails.validityTuple);
 
+	$effect(() => {
+		if (ColumnDef.debug) {
+			$inspect(validity);
+		}
+	});
+
 	$effect(() => {
 		void validity;
 		untrack(() => {
@@ -75,6 +87,10 @@
 				await tick();
 				const [validityValue] = await validity;
 
+				if (ColumnDef.debug) {
+					console.log('validity: ', $state.snapshot(validityValue));
+				}
+
 				if (validityValue === Validity.Invalid) {
 					return tableContext.addInvalidValue(cell.row.original);
 				} else {
@@ -140,7 +156,7 @@
 				icon={{
 					name: 'loading',
 					colour: Colour['$ui-blue-6'],
-					size: Size.Medium
+					size: Size.Medium,
 				}}
 			/>
 		{:then maybeTuple}
@@ -163,7 +179,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/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,29 @@ export function generateExampleItemColumnDefs(modal) {
                     return false;
                 }
                 return true;
-            }
+            },
+            debug: true,
+            // filterValueType: 'Date',
             // 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 +154,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 +179,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 +192,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));
 
@@ -397,36 +400,36 @@
 			<div class="inner-row">
 				<label>
 					<input
-						value={null}
+						value={false}
 						type="radio"
 						bind:group={value}
 						onchange={() => {
 							tableContext.paginationRepo?.filterBy(def.id, value);
 						}}
 					/>
-					Any
+					No
 				</label>
 				<label>
 					<input
-						value={true}
+						value={undefined}
 						type="radio"
 						bind:group={value}
 						onchange={() => {
 							tableContext.paginationRepo?.filterBy(def.id, value);
 						}}
 					/>
-					Yes
+					Any
 				</label>
 				<label>
 					<input
-						value={false}
+						value={true}
 						type="radio"
 						bind:group={value}
 						onchange={() => {
 							tableContext.paginationRepo?.filterBy(def.id, value);
 						}}
 					/>
-					No
+					Yes
 				</label>
 			</div>
 		{:else if isNumeric}

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/FilterPanel.svelte

@@ -1,10 +1,14 @@
 <svelte:options runes />
 
-<script lang="ts" generics="T extends object">
+<script
+	lang="ts"
+	generics="T extends object"
+>
 	import Button from '../../Button.svelte';
 	import { Size } from '../../../Types/Internal/Size.js';
 	import { Variant } from '../../../Types/Internal/Variant.js';
 	import { getContext } from 'svelte';
+	import type { ColumnDef } from '../Types/Columns/Definitions/ColumnDef.svelte.js';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 	import FilterInput from './FilterInput.svelte';
 
@@ -13,13 +17,18 @@
 	function reset() {
 		tableContext.paginationRepo?.resetFilters();
 	}
+
+	const defs = $derived(tableContext.columnDefs as Array<ColumnDef<T, unknown>>);
 </script>
 
 <div class="column-panel">
 	<h3>Filter by</h3>
 
-	{#each tableContext.columnDefs as def (def.id)}
-		<FilterInput {def} customFilters={tableContext.remoteFilters} />
+	{#each defs as def (def.id)}
+		<FilterInput
+			{def}
+			customFilters={tableContext.remoteFilters}
+		/>
 	{/each}
 
 	<div class="reset-button">