@lavalogic/scoria 0.22.5 → 0.23.0

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

@@ -1,4 +1,4 @@
 import type { DimensionInputProps } from './DimensionInputProps.js';
-declare const DimensionInput: import("svelte").Component<DimensionInputProps, {}, "x" | "z" | "y" | "inputRef">;
+declare const DimensionInput: import("svelte").Component<DimensionInputProps, {}, "x" | "y" | "z" | "inputRef">;
 type DimensionInput = ReturnType<typeof DimensionInput>;
 export default DimensionInput;

package/dist/Components/HorizontalTabGroupButton.svelte

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" generics="Args">
+<script
+	lang="ts"
+	generics="Args"
+>
 	import { devCatch } from '../Helpers/Helpers.svelte.js';
 	import { Colour } from '../scss/colours.js';
 
@@ -11,6 +14,8 @@
 
 	let { option, selected }: TabGroupButtonProps<Args> = $props();
 
+	let disabled = $state(true);
+	let visible = $state(true);
 	let isValid = $state(true);
 
 	$effect(() => {
@@ -24,6 +29,33 @@
 				.catch(devCatch);
 		}
 	});
+	$effect(() => {
+		if (typeof option.disabled === 'boolean') {
+			disabled = option.disabled;
+		} else if (option.disabled == undefined) {
+			disabled = false;
+		} else {
+			option.disabled
+				.then((v) => {
+					disabled = v;
+				})
+				.catch(devCatch);
+		}
+	});
+
+	$effect(() => {
+		if (typeof option.visible === 'boolean') {
+			visible = option.visible;
+		} else if (option.visible == undefined) {
+			visible = false;
+		} else {
+			option.visible
+				.then((v) => {
+					visible = v;
+				})
+				.catch(devCatch);
+		}
+	});
 </script>
 
 <button
@@ -34,12 +66,23 @@
 	type="button"
 	class="tab"
 	class:invalid={!isValid}
+	{disabled}
+	class:hidden={!visible}
 >
-	<Icon name="nothing" colour={Colour['$brand-primary']} size={Size.Small} {...option.iconLeft} />
+	<Icon
+		name="nothing"
+		colour={Colour['$brand-primary']}
+		size={Size.Small}
+		{...option.iconLeft}
+	/>
 
 	{option.label}
 	{#if !isValid}
-		<Icon name="error" colour={Colour['$error-border']} size={Size.Small} />
+		<Icon
+			name="error"
+			colour={Colour['$error-border']}
+			size={Size.Small}
+		/>
 	{:else}
 		<Icon
 			name="nothing"
@@ -50,7 +93,11 @@
 	{/if}
 </button>
 
-<style>.tab {
+<style>button.tab.hidden {
+  display: none !important;
+}
+
+.tab {
   color: #3a4952;
   cursor: pointer;
   font-size: 1rem;

package/dist/Components/QuerySelect.svelte

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" module>
+<script
+	lang="ts"
+	module
+>
 	interface QuerySelectPropsAsObjectCommonProps<V extends object, VP extends ValueProp<V>> {
 		labelProp: NonNullableKey<V>;
 		valueProp: VP;
@@ -25,7 +28,7 @@
 
 	export interface QuerySelectPropsAsObject<
 		V extends object,
-		VP extends ValueProp<V>
+		VP extends ValueProp<V>,
 	> extends QuerySelectPropsAsObjectCommonProps<V, VP> {
 		valueAsObject: true;
 		value: V | null;
@@ -33,11 +36,10 @@
 
 	export interface QuerySelectPropsAsPrimitive<
 		V extends object,
-		VP extends ValueProp<V>
+		VP extends ValueProp<V>,
 	> extends QuerySelectPropsAsObjectCommonProps<V, VP> {
 		valueAsObject: false;
 		value: V[VP] | null;
-		options: Array<V>;
 	}
 
 	export type QuerySelectProps<V extends object, VP extends ValueProp<V>> =
@@ -46,7 +48,10 @@
 </script>
 
 <!-- #region Script -->
-<script lang="ts" generics="V extends object, VP extends ValueProp<V>">
+<script
+	lang="ts"
+	generics="V extends object, VP extends ValueProp<V>"
+>
 	import { ToastContext } from '../Contexts/ToastContext.svelte.js';
 
 	import { dev } from '$app/environment';
@@ -77,7 +82,7 @@
 		options = $bindable<Array<V>>([]),
 		isValid,
 		onchange,
-		onfocus
+		onfocus,
 	}: QuerySelectProps<V, VP> = $props();
 
 	export function forceQuery() {
@@ -120,7 +125,7 @@
 						//best-effort solution. Not a good one
 						// eslint-disable-next-line @typescript-eslint/no-base-to-string
 						[labelProp]: selectedValue.toString(),
-						[valueProp]: selectedValue
+						[valueProp]: selectedValue,
 					} as V);
 				}
 			}
@@ -372,7 +377,7 @@
 					}}
 					icon={{
 						name: 'close-menu-cross',
-						colour: Colour['$ui-blue-9']
+						colour: Colour['$ui-blue-9'],
 					}}
 				/>
 			{/if}
@@ -384,7 +389,7 @@
 				size={Size.Small}
 				icon={{
 					name: isExpanded ? 'chevron-up' : 'chevron-down',
-					colour: Colour['$ui-blue-9']
+					colour: Colour['$ui-blue-9'],
 				}}
 			/>
 		</div>

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

@@ -24,7 +24,6 @@ export interface QuerySelectPropsAsObject<V extends object, VP extends ValueProp
 export interface QuerySelectPropsAsPrimitive<V extends object, VP extends ValueProp<V>> extends QuerySelectPropsAsObjectCommonProps<V, VP> {
     valueAsObject: false;
     value: V[VP] | null;
-    options: Array<V>;
 }
 export type QuerySelectProps<V extends object, VP extends ValueProp<V>> = QuerySelectPropsAsObject<V, VP> | QuerySelectPropsAsPrimitive<V, VP>;
 import type { NonNullableKey, ValueProp } from '../Types/Internal/Misc.js';

package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.d.ts

@@ -56,9 +56,15 @@ export declare abstract class ColumnDef<T extends object, in FilterFnType = neve
     get filterValueType(): FilterValueType | undefined;
     set filterValueType(v: FilterValueType | undefined);
     readonly getDisplayValue: ((item: T, index: number) => string | null | Promise<string | null>) | undefined;
-    toJSON(): object;
+    toJSON(): ColumnJSONRepresentation;
     readonly isEditable: (item: T, index: number) => Promise<boolean>;
     readonly resizable: boolean;
     readonly header: string | Snippet;
     readonly getOptions?: () => Array<SelectOption<OptionsType>> | Promise<Array<SelectOption<OptionsType>>>;
 }
+export interface ColumnJSONRepresentation {
+    columnType: ColumnType;
+    id: string;
+    header: string;
+    filterValueType: FilterValueType | undefined;
+}

package/dist/Components/Table/Types/Columns/Definitions/ColumnDef.svelte.js

@@ -77,7 +77,12 @@ export class ColumnDef {
     }
     getDisplayValue;
     toJSON() {
-        return { columnType: this.columnType, id: this.id, header: this.header };
+        return {
+            columnType: this.columnType,
+            id: this.id,
+            header: this.header.toString(),
+            filterValueType: this.filterValueType,
+        };
     }
     isEditable;
     resizable;

package/dist/Components/Table/Types/Columns/Definitions/JSONColumnDefSet.d.ts

@@ -1,11 +1,11 @@
 import type { SortingState } from '../../DataRepository/SortingState.js';
 import type { JSONColumnPinningState } from '../JSONColumnPinningState.js';
 import type { VisibilityState } from '../VisibilityState.js';
-import type { ColumnDef } from './ColumnDef.svelte.js';
-export interface JSONColumnDefSet<T extends object> {
+import type { ColumnJSONRepresentation } from './ColumnDef.svelte.js';
+export interface JSONColumnDefSet {
     name: string;
     sortingState: SortingState;
     visibilityState: VisibilityState;
     columnPinningState: JSONColumnPinningState;
-    columnDefs: Array<ColumnDef<T>>;
+    columnDefs: Array<ColumnJSONRepresentation>;
 }

package/dist/Components/Table/Types/Context/Row.d.ts

@@ -1,6 +1,9 @@
 import type { TableCell } from '../Columns/TableCell.js';
 export interface Row<T extends object> {
-    getValue: (columnId: string) => Promise<unknown>;
+    getValue: {
+        <K extends keyof T>(columnId: K): T[K] | Promise<T[K]>;
+        (columnId: string): unknown | Promise<unknown>;
+    };
     original: T;
     visibleIndex: number;
     originalIndex: number;

package/dist/Components/Table/Types/Context/TableContext.svelte.js

@@ -1,5 +1,5 @@
 import { browser, dev } from '$app/environment';
-import { asyncAll, asyncForEach, asyncMap, devCatch, getCanvasContext, } from '../../../../Helpers/Helpers.svelte.js';
+import { asyncAll, asyncForEach, asyncMap, devCatch, getCanvasContext, isKeyOf, } from '../../../../Helpers/Helpers.svelte.js';
 import { tick, untrack } from 'svelte';
 import { SvelteMap } from 'svelte/reactivity';
 import { ColumnType } from '../Columns/ColumnType.js';
@@ -345,6 +345,9 @@ export class TableContext {
                         if (presets[0] && areDefsEquivalent(defs, presets[0].columnDefs)) {
                             return this.reassignDefsToPresets(presets).then((p) => p);
                         }
+                        else if (dev && presets[0]) {
+                            console.warn(`invalid presets:`, presets);
+                        }
                     }
                 }
                 return null;
@@ -1959,6 +1962,9 @@ export class TableContext {
         const jsonFriendly = newPresets.map((preset) => {
             return {
                 ...preset,
+                columnDefs: preset.columnDefs.map((it) => {
+                    return { ...it.toJSON(), header: it.header.toString() };
+                }),
                 columnPinningState: {
                     left: [...(preset.columnPinningState.left?.entries() ?? [])],
                     right: [...(preset.columnPinningState.right?.entries() ?? [])],
@@ -1981,12 +1987,15 @@ export class TableContext {
     // #region private methods
     createRow(item, index, unsortedIndex) {
         const row = {
-            getValue: async (key) => {
-                const gotValue = await this.columnDefsById.get(key)?.accessorFn?.(item, unsortedIndex);
+            getValue: (key) => {
+                const gotValue = this.columnDefsById.get(key)?.accessorFn?.(item, unsortedIndex);
                 if (gotValue !== undefined) {
                     return gotValue;
                 }
-                return item[key];
+                if (isKeyOf(key, item)) {
+                    return item[key];
+                }
+                throw new Error(`Row had neither an accessor function or an id that can index the item object`);
             },
             original: item,
             visibleIndex: index,
@@ -2519,14 +2528,14 @@ export class TableContext {
             return {
                 ...preset,
                 columnPinningState: adaptJSONPinningState(preset.columnPinningState),
-                columnDefs: preset.columnDefs.map((def, index) => {
+                columnDefs: preset.columnDefs.map((def) => {
                     const realDef = def.columnType == ColumnType.RowSelect || def.columnType == ColumnType.Actions
                         ? adjustedDefs.find((it) => it.columnType === def.columnType)
                         : asMap.get(def.id);
                     if (!realDef) {
                         throw new Error('Could not find equivalent column def:', { cause: def });
                     }
-                    return (preset.columnDefs[index] = realDef);
+                    return realDef;
                 }),
             };
         });

package/dist/Components/Table/Types/DataRepository/LocalTableDataRepository.svelte.js

@@ -211,16 +211,16 @@ export class LocalTableDataRepository extends TableDataRepository {
     numberFilter = async (row, columnId, // & keyof T,
     values) => {
         const columnValue = await row.getValue(columnId);
-        const filterType = this.filterModes.get(columnId) ?? NumberDateFilterMode.In;
+        const mode = this.filterModes.get(columnId) ?? NumberDateFilterMode.In;
         const isValueInvalid = columnValue == null || typeof columnValue != 'number' || isNaN(columnValue);
-        if (filterType == NumberDateFilterMode.null) {
+        if (mode == NumberDateFilterMode.null) {
             // TODO test
             return isValueInvalid;
         }
         if (isValueInvalid || typeof columnValue != 'number') {
-            return inclusiveFilterModes.has(filterType);
+            return inclusiveFilterModes.has(mode);
         }
-        switch (filterType) {
+        switch (mode) {
             case NumberDateFilterMode.Equals: {
                 const [min] = TableDataRepository.getMinMax(values);
                 return min == undefined || columnValue === min;

package/dist/Components/VerticalTabGroupButton.svelte

@@ -1,6 +1,9 @@
 <svelte:options runes />
 
-<script lang="ts" generics="Args">
+<script
+	lang="ts"
+	generics="Args"
+>
 	import { devCatch } from '../Helpers/Helpers.svelte.js';
 	import { Colour } from '../scss/colours.js';
 	import { Size } from '../Types/Internal/Size.js';
@@ -10,6 +13,7 @@
 	let { option, selected }: TabGroupButtonProps<Args> = $props();
 
 	let disabled = $state(true);
+	let visible = $state(true);
 	let isValid = $state(true);
 
 	$effect(() => {
@@ -36,6 +40,20 @@
 				.catch(devCatch);
 		}
 	});
+
+	$effect(() => {
+		if (typeof option.visible === 'boolean') {
+			visible = option.visible;
+		} else if (option.visible == undefined) {
+			visible = false;
+		} else {
+			option.visible
+				.then((v) => {
+					visible = v;
+				})
+				.catch(devCatch);
+		}
+	});
 </script>
 
 <button
@@ -47,21 +65,40 @@
 	type="button"
 	class="tab"
 	class:invalid={!isValid}
+	class:hidden={!visible}
 >
-	<div class="bordered" class:invalid={!isValid}>
+	<div
+		class="bordered"
+		class:invalid={!isValid}
+	>
 		{#if option.iconLeft}
-			<Icon {...option.iconLeft} colour={Colour['$brand-primary']} />
+			<Icon
+				{...option.iconLeft}
+				colour={Colour['$brand-primary']}
+			/>
 		{/if}
 		{option.label}
 		{#if !isValid}
-			<Icon name="error" colour={Colour['$error-border']} size={Size.Small} />
+			<Icon
+				name="error"
+				colour={Colour['$error-border']}
+				size={Size.Small}
+			/>
 		{:else if option.iconRight}
-			<Icon colour={Colour['$brand-primary']} size={Size.Small} {...option.iconRight} />
+			<Icon
+				colour={Colour['$brand-primary']}
+				size={Size.Small}
+				{...option.iconRight}
+			/>
 		{/if}
 	</div>
 </button>
 
-<style>.tab {
+<style>button.tab.hidden {
+  display: none !important;
+}
+
+.tab {
   cursor: pointer;
   font-size: 0.875rem;
   font-weight: 600;

package/dist/Helpers/Helpers.svelte.d.ts

@@ -1,3 +1,6 @@
+import type { DefsWrapper } from '../Components/Table/Types/Columns/DefsWrapper.js';
+import { TableContext } from '../Components/Table/Types/Context/TableContext.svelte.js';
+import type { Primitive } from '../Components/Table/Types/Context/TableInitOptions.js';
 import type { CustomFilter } from '../Components/Table/Types/Filtering/CustomFilter.js';
 import type { InputDate, InputDateWithTime, SQLDate } from '../Types/Internal/Misc.js';
 import type { RefWrapper } from '../Types/Internal/RefWrapper.js';
@@ -52,3 +55,12 @@ export declare function isDateTuple(value: unknown): value is [Date | null, Date
 export declare function isNumericArray(value: unknown): value is Array<number | null>;
 export declare function isValidityTuple(v: Validity | ValidityWrapper | undefined): v is ValidityWrapper;
 export declare const loadingText = "loading\u2026";
+export declare function isKeyOf<T extends object>(key: string, obj: T): key is string & keyof T;
+export interface ICreateTableArgs<T extends object, RowIdType extends Primitive> {
+    name: string;
+    defs: DefsWrapper<T>;
+    data: RefWrapper<Array<T>>;
+    getUserId: () => string | undefined;
+    selectionExtractor: (item: T) => RowIdType | Promise<RowIdType>;
+}
+export declare function createLocalTable<T extends object, RowIdType extends Primitive>(args: ICreateTableArgs<T, RowIdType>): TableContext<T, RowIdType>;

package/dist/Helpers/Helpers.svelte.js

@@ -1,4 +1,6 @@
 import { dev } from '$app/environment';
+import { TableContext } from '../Components/Table/Types/Context/TableContext.svelte.js';
+import { LocalTableDataRepository } from '../Components/Table/Types/DataRepository/LocalTableDataRepository.svelte.js';
 import { CustomFilterType } from '../Components/Table/Types/Filtering/CustomFilterType.js';
 import { Sizing } from '../scss/sizing.js';
 import { untrack } from 'svelte';
@@ -409,3 +411,13 @@ export function isValidityTuple(v) {
     return v != null && typeof v == 'object';
 }
 export const loadingText = 'loading…';
+export function isKeyOf(key, obj) {
+    return key in obj;
+}
+export function createLocalTable(args) {
+    const localRepo = new LocalTableDataRepository(args.name, args.data, args.getUserId);
+    return TableContext.init(args.defs, args.name, localRepo, {
+        selectionExtractor: args.selectionExtractor,
+        getUserId: args.getUserId,
+    });
+}

package/dist/Types/Internal/TabOption.d.ts

@@ -8,5 +8,8 @@ export interface TabOption<Args> {
     iconLeft?: IconProps;
     iconRight?: IconProps;
     isValid?: boolean | Promise<boolean>;
+    /** default false */
     disabled?: boolean | Promise<boolean>;
+    /** default true */
+    visible?: boolean | Promise<boolean>;
 }

package/dist/index.d.ts

@@ -132,7 +132,7 @@ export { TooltipContext } from './Contexts/TooltipContext.svelte.js';
 export { UntypedInputContext } from './Contexts/UntypedInputContext.svelte.js';
 export { Delay } from './Delay/Delay.js';
 export { DATAMatrix } from './Helpers/Datamatrix.js';
-export { asyncAll, asyncEvery, asyncFilter, asyncFilterIndices, asyncFlatMap, asyncForEach, asyncMap, asyncSleep, asyncSome, autoPluralise, devCatch, generateShortUUID, generateUUID, getCanvasContext, getErrorMessage, gridItem, isDateTuple, isNumericArray, isValidEmailAddress, loadingText, localTimeFormat, passthrough, refWrapper, SQLFriendly, SQLFriendlyWithLocalTime, vowels, } from './Helpers/Helpers.svelte.js';
+export { asyncAll, asyncEvery, asyncFilter, asyncFilterIndices, asyncFlatMap, asyncForEach, asyncMap, asyncSleep, asyncSome, autoPluralise, createLocalTable, devCatch, generateShortUUID, generateUUID, getCanvasContext, getErrorMessage, gridItem, isDateTuple, isNumericArray, isValidEmailAddress, loadingText, localTimeFormat, passthrough, refWrapper, SQLFriendly, SQLFriendlyWithLocalTime, vowels, type ICreateTableArgs, } from './Helpers/Helpers.svelte.js';
 export { type INamed } from './Helpers/INamed.js';
 export { AttributeOperation } from './Types/Internal/AttributeOperation.js';
 export { type BigRadioOption } from './Types/Internal/BigRadioOption.js';

package/dist/index.js

@@ -132,7 +132,7 @@ export { TooltipContext } from './Contexts/TooltipContext.svelte.js';
 export { UntypedInputContext } from './Contexts/UntypedInputContext.svelte.js';
 export { Delay } from './Delay/Delay.js';
 export { DATAMatrix } from './Helpers/Datamatrix.js';
-export { asyncAll, asyncEvery, asyncFilter, asyncFilterIndices, asyncFlatMap, asyncForEach, asyncMap, asyncSleep, asyncSome, autoPluralise, devCatch, generateShortUUID, generateUUID, getCanvasContext, getErrorMessage, gridItem, isDateTuple, isNumericArray, isValidEmailAddress, loadingText, localTimeFormat, passthrough, refWrapper, SQLFriendly, SQLFriendlyWithLocalTime, vowels, } from './Helpers/Helpers.svelte.js';
+export { asyncAll, asyncEvery, asyncFilter, asyncFilterIndices, asyncFlatMap, asyncForEach, asyncMap, asyncSleep, asyncSome, autoPluralise, createLocalTable, devCatch, generateShortUUID, generateUUID, getCanvasContext, getErrorMessage, gridItem, isDateTuple, isNumericArray, isValidEmailAddress, loadingText, localTimeFormat, passthrough, refWrapper, SQLFriendly, SQLFriendlyWithLocalTime, vowels, } from './Helpers/Helpers.svelte.js';
 export {} from './Helpers/INamed.js';
 export { AttributeOperation } from './Types/Internal/AttributeOperation.js';
 export {} from './Types/Internal/BigRadioOption.js';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.22.5",
+  "version": "0.23.0",
   "publishConfig": {
     "access": "restricted"
   },