@lavalogic/scoria 0.11.14 → 0.12.0

package/dist/Components/SingleSelectCommonProps.d.ts

@@ -0,0 +1,27 @@
+import type { NonNullableKey, ValueProp } from '../Types/Internal/Misc.js';
+export interface SingleSelectCommonProps<V extends object, VP extends ValueProp<V>> {
+    options: Array<V>;
+    labelProp: NonNullableKey<V>;
+    valueProp: VP;
+    onchange: (newValue: V | null) => void;
+    name?: string;
+    width?: string;
+    height?: string;
+    label?: string;
+    minHeight?: string;
+    focusOnLoad?: boolean;
+    searchable?: boolean;
+    creatable?: boolean;
+    onCreateOption?: (option: V) => void;
+    clearable?: boolean;
+    disabled?: boolean;
+    borderless?: boolean;
+    forceUpwards?: boolean;
+    lazyDropdown?: boolean;
+    required?: boolean;
+    invalid?: boolean;
+    inputId?: string;
+    createFilter?: (value: string) => boolean;
+    onkeydown?: (e: KeyboardEvent) => void;
+    onfocus?: (target: HTMLInputElement) => void;
+}

package/dist/Components/SingleSelectCommonProps.js

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

package/dist/Components/SingleSelectProps.d.ts

@@ -0,0 +1,4 @@
+import type { ValueProp } from '../Types/Internal/Misc.js';
+import type { SingleSelectPropsAsObject } from './SingleSelectPropsAsObject.js';
+import type { SingleSelectPropsAsPrimitive } from './SingleSelectPropsAsPrimitive.js';
+export type SingleSelectProps<V extends object, VP extends ValueProp<V>> = SingleSelectPropsAsPrimitive<V, VP> | SingleSelectPropsAsObject<V, VP>;

package/dist/Components/SingleSelectProps.js

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

package/dist/Components/SingleSelectPropsAsObject.d.ts

@@ -0,0 +1,6 @@
+import type { ValueProp } from '../Types/Internal/Misc.js';
+import type { SingleSelectCommonProps } from './SingleSelectCommonProps.js';
+export interface SingleSelectPropsAsObject<V extends object, VP extends ValueProp<V>> extends SingleSelectCommonProps<V, VP> {
+    valueAsObject: true;
+    value: V | null;
+}

package/dist/Components/SingleSelectPropsAsObject.js

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

package/dist/Components/SingleSelectPropsAsPrimitive.d.ts

@@ -0,0 +1,6 @@
+import type { ValueProp } from '../Types/Internal/Misc.js';
+import type { SingleSelectCommonProps } from './SingleSelectCommonProps.js';
+export interface SingleSelectPropsAsPrimitive<V extends object, VP extends ValueProp<V>> extends SingleSelectCommonProps<V, VP> {
+    valueAsObject: false;
+    value: V[VP] | null;
+}

package/dist/Components/SingleSelectPropsAsPrimitive.js

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

package/dist/Components/Switch.svelte

@@ -1,19 +1,8 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	import { generateShortUUID } from '../Helpers/Helpers.svelte.js';
-	import type { ChangeEventHandler } from 'svelte/elements';
-	export interface SwitchProps {
-		label: string;
-		value: boolean;
-		onchange?: ChangeEventHandler<HTMLInputElement>;
-		id?: string;
-		disabled?: boolean;
-		isValid?: boolean;
-	}
-</script>
-
 <script lang="ts">
+	import { generateShortUUID } from '../Helpers/Helpers.svelte.js';
+	import type { SwitchProps } from './SwitchProps.js';
 	let {
 		value = false,
 		id = generateShortUUID(),

package/dist/Components/Switch.svelte.d.ts

@@ -1,12 +1,4 @@
-import type { ChangeEventHandler } from 'svelte/elements';
-export interface SwitchProps {
-    label: string;
-    value: boolean;
-    onchange?: ChangeEventHandler<HTMLInputElement>;
-    id?: string;
-    disabled?: boolean;
-    isValid?: boolean;
-}
+import type { SwitchProps } from './SwitchProps.js';
 declare const Switch: import("svelte").Component<SwitchProps, {}, "">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/Components/SwitchProps.d.ts

@@ -0,0 +1,9 @@
+import type { ChangeEventHandler } from 'svelte/elements';
+export interface SwitchProps {
+    label: string;
+    value: boolean;
+    onchange?: ChangeEventHandler<HTMLInputElement>;
+    id?: string;
+    disabled?: boolean;
+    isValid?: boolean;
+}

package/dist/Components/SwitchProps.js

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

package/dist/Components/TabGroupButtonProps.d.ts

@@ -0,0 +1,5 @@
+import type { TabOption } from '../Types/Internal/TabOption.js';
+export interface TabGroupButtonProps<Args extends object | undefined> {
+    option: TabOption<Args>;
+    selected: boolean;
+}

package/dist/Components/TabGroupButtonProps.js

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

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

@@ -0,0 +1,6 @@
+import type { TableBodyProps } from './TableBodyProps.js';
+export interface HeightData<T extends object> {
+    index: number;
+    applyTo: Array<TableBodyProps<T>['side']>;
+    maxHeight: number;
+}

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

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

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

@@ -1,43 +1,38 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script lang="ts" generics="T extends object">
+	import { dev } from '$app/environment';
 	import Action from '../../Action.svelte';
 	import Button from '../../Button.svelte';
 	import MultiSelect from '../../MultiSelect.svelte';
 	import NumberInput from '../../NumberInput.svelte';
 	import SingleSelect from '../../SingleSelect.svelte';
 	import TextInput from '../../TextInput.svelte';
+	import ThreeStateRadio from '../../ThreeStateRadio.svelte';
 	import DateModal from '../../Touch/DateModal.svelte';
-	import { ColourSet, Colour } from '../../../scss/colours.js';
+	import { devCatch, hasQuery, isDateTuple, isNumberTuple } from '../../../Helpers/Helpers.svelte.js';
+	import { Colour, ColourSet } from '../../../scss/colours.js';
 	import { InputVariant } from '../../../Types/Internal/InputVariant.js';
+	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
 	import { Size } from '../../../Types/Internal/Size.js';
-	import { getContext, untrack, onMount } from 'svelte';
+	import { getContext, onMount, untrack } from 'svelte';
 	import { cubicOut } from 'svelte/easing';
 	import { fade } from 'svelte/transition';
-	import { numberDateFilterTypes, stringFilterTypes } from '../Misc/FilterInput.svelte';
+
+	import QuerySelect from '../../QuerySelect.svelte';
+	import { Ternary } from '../../../Types/Internal/Ternary.js';
+	import { numberDateFilterTypes } from '../Misc/numberDateFilterTypes.js';
+	import { stringFilterTypes } from '../Misc/stringFilterTypes.js';
 	import { quickFilterContextIdentifier } from '../Table.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 { SelectDef } from '../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
 	import { TableContext } from '../Types/Context/TableContext.svelte.js';
 	import { CustomFilterType } from '../Types/Filtering/CustomFilterType.js';
-	import type { CustomRemoteFilters } from '../Types/Filtering/CustomRemoteFilters.js';
 	import { NumberDateFilterMode } from '../Types/Filtering/NumberDateFilterMode.js';
 	import { StringFilterMode } from '../Types/Filtering/StringFilterMode.js';
-	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
-	import type { Column } from '../Types/Columns/Column.js';
-
-	import { DateInputDef } from '../Types/Columns/Definitions/Accessors/DateInputDef.svelte.js';
-	import { SelectDef } from '../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
-	import { NumberInputDef } from '../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
-	import { dev } from '$app/environment';
-	import { CheckboxDef, QuerySelect, Ternary } from '../../../index.js';
-	import ThreeStateRadio from '../../ThreeStateRadio.svelte';
-
-	export interface QuickSearchCellProps<T extends object> {
-		column: Column<T>;
-		customFilters?: CustomRemoteFilters | undefined;
-	}
-</script>
-
-<script lang="ts" generics="T extends object">
+	import type { QuickSearchCellProps } from './QuickSearchCellProps.js';
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 
 	const { column, customFilters }: QuickSearchCellProps<T> = $props();
@@ -59,7 +54,7 @@
 	// );
 
 	const isSearchable = $derived(
-		def.allowFiltering != false && (hasFilterFn || customFilters?.has(def.id) == true)
+		def.allowFiltering && (hasFilterFn || customFilters?.has(def.id) == true)
 		// ((hasFilterFn && hasAcceptableColumnType) || customFilters?.has(def.id) == true) // removed hasAcceptableColumnType due to it being redundant
 	);
 
@@ -74,11 +69,10 @@
 		return [];
 	}
 	const options = $derived(
-		isSelect ? (def?.getOptions?.() ?? customFilter?.options ?? emptyOptsAndWarn()) : []
+		isSelect ? (def.getOptions?.() ?? customFilter?.options ?? emptyOptsAndWarn()) : []
 	);
 	const isDate = $derived(def instanceof DateInputDef);
 	const isRemoteSelect = $derived(customFilter?.type === CustomFilterType.Select);
-	const hasQuery = $derived(isRemoteSelect && customFilter?.query);
 
 	const selectSymbol = Symbol();
 
@@ -97,15 +91,16 @@
 
 	const inputId = $derived(`${tableContext.tableName}-cell-quicksearch-${column.id}`);
 
-	const filterMode = $derived(tableContext.paginationRepo?.filterModes?.get(def.id));
+	const filterMode = $derived(tableContext.paginationRepo?.filterModes.get(def.id));
 
-	const selectedNumberFilterType: SelectOption<NumberDateFilterMode> = $derived.by(() => {
+	const selectedNumberFilterType: SelectOption<NumberDateFilterMode> | null = $derived.by(() => {
 		const value = (filterMode as NumberDateFilterMode | undefined) ?? NumberDateFilterMode.In;
-		return numberDateFilterTypes.find((it) => it.value === value)!;
+		return numberDateFilterTypes.find((it) => it.value === value) ?? null;
 	});
-	const selectedStringFilterType: SelectOption<StringFilterMode> = $derived.by(() => {
+
+	const selectedStringFilterType: SelectOption<StringFilterMode> | null = $derived.by(() => {
 		const value = (filterMode as StringFilterMode | undefined) ?? StringFilterMode.Contains;
-		return stringFilterTypes.find((it) => it.value === value)!;
+		return stringFilterTypes.find((it) => it.value === value) ?? null;
 	});
 
 	const filteringStateValue = $derived(
@@ -120,13 +115,13 @@
 		if (def.debug) {
 			console.log('filtering state value:', $state.snapshot(filteringStateValue));
 		}
-		if (hasQuery) {
+		if (hasQuery(customFilter)) {
 			if (def.debug) {
 				console.log('has query');
 			}
 
-			untrack(async () => {
-				const gotValue = filteringStateValue as unknown as
+			untrack(() => {
+				const gotValue = filteringStateValue as
 					| Array<string | number | SelectOption<unknown>>
 					| undefined;
 
@@ -137,13 +132,8 @@
 						if (def.debug) {
 							console.log(`query values:`, tableContext.dataRepo.__queryValues);
 						}
-						const key =
-							customFilter?.id ??
-							customFilter?.label ??
-							customFilter?.objectName ??
-							customFilter?.queryKey ??
-							def.id;
-						const x = key == null ? null : tableContext.dataRepo.__queryValues.get(key);
+						const key = customFilter.id;
+						const x = tableContext.dataRepo.__queryValues.get(key);
 
 						if (def.debug) {
 							console.log('value:', $state.snapshot(x));
@@ -169,7 +159,7 @@
 				return;
 			}
 
-			const gotValue = filteringStateValue as unknown as
+			const gotValue = filteringStateValue as
 				| Array<string | number | SelectOption<unknown>>
 				| undefined;
 
@@ -202,10 +192,10 @@
 						console.log(e);
 					}
 				}
-			});
+			}).catch(devCatch);
 		} else if (isNumeric) {
 			if (
-				selectedNumberFilterType.value === NumberDateFilterMode.Between &&
+				selectedNumberFilterType?.value === NumberDateFilterMode.Between &&
 				tableContext.paginationRepo?.filtering
 			) {
 				const gotValue = filteringStateValue;
@@ -239,10 +229,10 @@
 	onMount(() => {
 		const filterOption =
 			tableContext.paginationRepo?.filtering &&
-			tableContext.paginationRepo?.filtering.find((it) => it.id === def.id);
+			tableContext.paginationRepo.filtering.find((it) => it.id === def.id);
 
 		if (filterOption) {
-			if (Array.isArray(filterOption.value)) {
+			if (isNumberTuple(filterOption.value)) {
 				[valueMin, valueMax] = filterOption.value;
 				if (valueMax == undefined) {
 					valueMax = valueMin;
@@ -251,9 +241,9 @@
 					valueMin = valueMax;
 					value = valueMax.toString();
 				} else {
-					value = valueMin?.toString();
+					value = valueMin.toString();
 				}
-			} else if (!hasQuery) {
+			} else if (!hasQuery(customFilter)) {
 				const gotValue = filterOption.value;
 				if (gotValue == null || typeof gotValue == 'string' || typeof gotValue == 'number') {
 					value = gotValue;
@@ -294,8 +284,8 @@
 		<div class="input-wrapper-parent">
 			{#if isDate}
 				{@const dateValues =
-					tableContext.paginationRepo?.filtering?.find((it) => it.id === def.id)?.value ?? []}
-				{#if Array.isArray(dateValues)}
+					tableContext.paginationRepo?.filtering.find((it) => it.id === def.id)?.value ?? []}
+				{#if isDateTuple(dateValues)}
 					{@const [fromDate, toDate] = dateValues}
 					<div class="spaced-around">
 						<Button
@@ -345,46 +335,36 @@
 					{/if}
 				{/if}
 			{:else if isSelect}
-				{#if hasQuery}
-					{#if customFilter!.valueAsObject !== true}
-						{@const label =
-							customFilter?.id ??
-							customFilter?.label ??
-							customFilter?.objectName ??
-							customFilter?.queryKey ??
-							def.id}
+				{#if hasQuery(customFilter)}
+					{#if customFilter.valueAsObject !== true}
+						{@const label = customFilter.id}
 
 						<!-- TODO: multiselect -->
 
 						<QuerySelect
 							valueAsObject={false}
 							clearable
-							name={customFilter?.objectName ?? 'Item'}
+							name={customFilter.objectName ?? 'Item'}
 							valueProp="value"
 							labelProp="label"
 							value={value as string | number | null}
-							query={customFilter!.query!}
+							query={customFilter.query}
 							bind:options={lastQueryOptions}
 							onchange={generateOnChangePrimitive(label)}
 						/>
 					{:else}
-						{@const label =
-							customFilter?.id ??
-							customFilter?.label ??
-							customFilter?.objectName ??
-							customFilter?.queryKey ??
-							def.id}
+						{@const label = customFilter.id}
 
 						<!-- TODO: multiselect -->
 
 						<QuerySelect
 							valueAsObject={true}
 							clearable
-							name={customFilter?.objectName ?? 'Item'}
+							name={customFilter.objectName ?? 'Item'}
 							valueProp="value"
 							labelProp="label"
 							value={value as null}
-							query={customFilter!.query!}
+							query={customFilter.query}
 							bind:options={lastQueryOptions}
 							onchange={generateOnChangeObject(label)}
 						/>
@@ -396,7 +376,7 @@
 							valueProp="value"
 							{options}
 							valueAsObject
-							onchange={(e) => {
+							onchange={(e: Array<SelectOption<unknown>>) => {
 								tableContext.paginationRepo?.filterBy(
 									def.id,
 									e.map((it) => it.value)
@@ -416,12 +396,8 @@
 						case false: {
 							return Ternary.False;
 						}
-
-						case null:
-						case undefined: {
-							return Ternary.Neutral;
-						}
 					}
+					return Ternary.Neutral;
 				})()}
 				<div class="centered">
 					<ThreeStateRadio
@@ -450,7 +426,7 @@
 					/>
 				</div>
 			{:else if isNumeric}
-				{#if selectedNumberFilterType.value === NumberDateFilterMode.Between}
+				{#if selectedNumberFilterType?.value === NumberDateFilterMode.Between}
 					<div class="input-wrapper left">
 						<NumberInput
 							data-type="quicksearch"
@@ -575,15 +551,16 @@
 						name="Filter Type"
 						valueAsObject
 						value={selectedNumberFilterType}
-						onchange={(newValue) => {
+						onchange={(newValue: SelectOption<NumberDateFilterMode> | null) => {
 							const oldFilterType = selectedNumberFilterType;
 
 							const newFilterType = newValue?.value ?? NumberDateFilterMode.In;
+
 							tableContext.paginationRepo?.setFilterMode(def.id, newFilterType);
-							tableContext.paginationRepo?.filterModes?.set(def.id, newFilterType);
+							tableContext.paginationRepo?.filterModes.set(def.id, newFilterType);
 
-							if (selectedNumberFilterType.value !== oldFilterType.value) {
-								if (oldFilterType.value === NumberDateFilterMode.Between) {
+							if (selectedNumberFilterType?.value !== oldFilterType?.value) {
+								if (oldFilterType?.value === NumberDateFilterMode.Between) {
 									valueMax = null;
 									tableContext.paginationRepo?.filterBy(def.id, [valueMin, valueMin]);
 								}
@@ -595,7 +572,7 @@
 								// TODO what about the other modes?
 							}
 						}}
-						onkeydown={(e) => {
+						onkeydown={(e: KeyboardEvent) => {
 							e.stopPropagation();
 						}}
 					/>
@@ -607,12 +584,12 @@
 						name="Filter Type"
 						valueAsObject
 						value={selectedStringFilterType}
-						onchange={(newValue) => {
+						onchange={(newValue: SelectOption<StringFilterMode> | null) => {
 							const filterType = newValue?.value ?? StringFilterMode.Contains;
 							tableContext.paginationRepo?.setFilterMode(def.id, filterType);
-							tableContext.paginationRepo?.filterModes?.set(def.id, filterType);
+							tableContext.paginationRepo?.filterModes.set(def.id, filterType);
 						}}
-						onkeydown={(e) => {
+						onkeydown={(e: KeyboardEvent) => {
 							e.stopPropagation();
 						}}
 					/>

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

@@ -1,9 +1,4 @@
-import type { CustomRemoteFilters } from '../Types/Filtering/CustomRemoteFilters.js';
-import type { Column } from '../Types/Columns/Column.js';
-export interface QuickSearchCellProps<T extends object> {
-    column: Column<T>;
-    customFilters?: CustomRemoteFilters | undefined;
-}
+import type { QuickSearchCellProps } from './QuickSearchCellProps.js';
 declare function $$render<T extends object>(): {
     props: QuickSearchCellProps<T>;
     exports: {};

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

@@ -0,0 +1,6 @@
+import type { Column } from '../Types/Columns/Column.js';
+import type { CustomRemoteFilters } from '../Types/Filtering/CustomRemoteFilters.js';
+export interface QuickSearchCellProps<T extends object> {
+    column: Column<T>;
+    customFilters?: CustomRemoteFilters | undefined;
+}

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

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

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

@@ -1,17 +1,10 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	export interface ColumnHighlightProps {
-		rowIndex: number;
-		highlighted: boolean;
-		toggleHighlightedRow: () => void;
-	}
-</script>
-
 <script lang="ts">
 	import Action from '../../../Action.svelte';
 	import { Colour } from '../../../../scss/colours.js';
 	import { Size } from '../../../../Types/Internal/Size.js';
+	import type { ColumnHighlightProps } from './ColumnHighlightProps.js';
 
 	const { rowIndex, highlighted, toggleHighlightedRow }: ColumnHighlightProps = $props();
 
@@ -27,7 +20,9 @@
 			icon={{
 				name: 'nothing'
 			}}
-			onclick={() => toggleHighlightedRow()}
+			onclick={() => {
+				toggleHighlightedRow();
+			}}
 		/>
 	</div></td
 >

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

@@ -1,8 +1,4 @@
-export interface ColumnHighlightProps {
-    rowIndex: number;
-    highlighted: boolean;
-    toggleHighlightedRow: () => void;
-}
+import type { ColumnHighlightProps } from './ColumnHighlightProps.js';
 declare const ColumnHighlight: import("svelte").Component<ColumnHighlightProps, {}, "">;
 type ColumnHighlight = ReturnType<typeof ColumnHighlight>;
 export default ColumnHighlight;

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

@@ -0,0 +1,5 @@
+export interface ColumnHighlightProps {
+    rowIndex: number;
+    highlighted: boolean;
+    toggleHighlightedRow: () => void;
+}

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

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

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

@@ -1,23 +1,18 @@
 <svelte:options runes />
 
-<script lang="ts" module>
-	export interface ColumnListProps {
-		searchValue: string;
-	}
-</script>
-
 <script lang="ts" generics="T extends object">
-	import { getContext } from 'svelte';
 	import { ColumnType } from '../../Types/Columns/ColumnType.js';
+	import type { ColumnDef } from '../../Types/Columns/Definitions/ColumnDef.svelte.js';
 	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
+	import { getContext } from 'svelte';
+	import type { ColumnListProps } from './ColumnListProps.js';
 	import ColumnListRow from './ColumnListRow.svelte';
-	import type { ColumnDef } from '../../Types/Columns/Definitions/ColumnDef.svelte.js';
 
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 
 	const { searchValue }: ColumnListProps = $props();
 
-	const visibleColumns: ColumnDef<T>[] = $derived.by(() => {
+	const visibleColumns: Array<ColumnDef<T>> = $derived.by(() => {
 		const lowercasedSearchValue = searchValue.toLocaleLowerCase();
 		return tableContext.columnDefs.filter(
 			(it) =>
@@ -33,7 +28,7 @@
 			return;
 		}
 
-		const dropTarget = (e.target as HTMLElement)?.closest('li');
+		const dropTarget = (e.target as HTMLElement | undefined)?.closest('li');
 
 		if (dropTarget) {
 			tableContext.reorderColumn(dropTarget);

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

@@ -1,6 +1,4 @@
-export interface ColumnListProps {
-    searchValue: string;
-}
+import type { ColumnListProps } from './ColumnListProps.js';
 declare function $$render<T extends object>(): {
     props: ColumnListProps;
     exports: {};

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

@@ -0,0 +1,3 @@
+export interface ColumnListProps {
+    searchValue: string;
+}

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

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