@lavalogic/scoria 0.6.0 → 0.7.1

package/dist/Components/DragMenu/DragMenuHolder.svelte

@@ -82,7 +82,7 @@
 	}
 </script>
 
-{#snippet draggableWithSelect<T>(item: Draggable, index: number)}
+{#snippet draggableWithSelect<T>(item: Draggable<T>, index: number)}
 	<DraggableCard
 		title={item.title}
 		subtitle={item.subtitle}

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

@@ -9,6 +9,7 @@
 	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
 	import { Validity } from '../../../../../Types/Internal/Validity.js';
 	import type { DateTableCell } from '../../../Types/Columns/DateTableCell.js';
+	import { dev } from '$app/environment';
 
 	export interface TableDatePickerProps<T extends object> {
 		cell: DateTableCell<T>;
@@ -32,7 +33,35 @@
 		id: columnDef.id as string & keyof T
 	});
 
-	const editable = $derived(cell.column.columnDef.editable === true);
+	const editableAsync = $derived(
+		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
+	);
+	let editable = $state(false);
+
+	let asyncCounter = 0;
+	$effect(() => {
+		void editableAsync;
+		const localCounter = (asyncCounter = asyncCounter + 1);
+		(async () => {
+			try {
+				const isEditable = await editableAsync;
+				if (asyncCounter === localCounter) {
+					editable = isEditable;
+				} else if (dev) {
+					console.log('skipping async editable because it is stale');
+				}
+			} catch (e) {
+				if (dev) {
+					console.error(e);
+				}
+				if (asyncCounter === localCounter) {
+					editable = false;
+				} else if (dev) {
+					console.log('skipping async editable because it is stale');
+				}
+			}
+		})();
+	});
 	const focusDetails: TableFocusDetails<T> = $derived(
 		new TableFocusDetails(cell, tableContext, toast)
 	);

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

@@ -7,6 +7,8 @@
 </script>
 
 <script lang="ts" generics="T extends object">
+	import { dev } from '$app/environment';
+
 	import NumberInput from '../../../../NumberInput.svelte';
 	import { NumberInputDef } from '../../../Types/Columns/Definitions/Accessors/NumberInputDef.svelte.js';
 	import type { TableCell } from '../../../Types/Columns/TableCell.js';
@@ -49,7 +51,34 @@
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 	const { toast } = getContext<ToastContext>(ToastContext.identifier);
 
-	const editable = $derived(cell.column.columnDef.editable === true);
+	const editableAsync = $derived(
+		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
+	);
+	let editable = $state(false);
+	let asyncCounter = 0;
+	$effect(() => {
+		void editableAsync;
+		const localCounter = (asyncCounter = asyncCounter + 1);
+		(async () => {
+			try {
+				const isEditable = await editableAsync;
+				if (asyncCounter === localCounter) {
+					editable = isEditable;
+				} else if (dev) {
+					console.log('skipping async editable because it is stale');
+				}
+			} catch (e) {
+				if (dev) {
+					console.error(e);
+				}
+				if (asyncCounter === localCounter) {
+					editable = false;
+				} else if (dev) {
+					console.log('skipping async editable because it is stale');
+				}
+			}
+		})();
+	});
 
 	const focusDetails: TableFocusDetails<T> = $derived(
 		new TableFocusDetails(cell, tableContext, toast)

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

@@ -1,6 +1,7 @@
 <svelte:options runes />
 
 <script lang="ts" module>
+	import { dev } from '$app/environment';
 	import QuerySelect from '../../../../QuerySelect.svelte';
 	import type { Column } from '../../../Types/Columns/Column.js';
 	import type { QueryDef } from '../../../Types/Columns/Definitions/Accessors/QueryDef.svelte.js';
@@ -46,7 +47,35 @@
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 	const { toast } = getContext<ToastContext>(ToastContext.identifier);
 
-	const editable = $derived(columnDef.editable === true);
+	const editableAsync = $derived(
+		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
+	);
+	let editable = $state(false);
+
+	let asyncCounter = 0;
+	$effect(() => {
+		void editableAsync;
+		const localCounter = (asyncCounter = asyncCounter + 1);
+		(async () => {
+			try {
+				const isEditable = await editableAsync;
+				if (asyncCounter === localCounter) {
+					editable = isEditable;
+				} else if (dev) {
+					console.log('skipping async editable because it is stale');
+				}
+			} catch (e) {
+				if (dev) {
+					console.error(e);
+				}
+				if (asyncCounter === localCounter) {
+					editable = false;
+				} else if (dev) {
+					console.log('skipping async editable because it is stale');
+				}
+			}
+		})();
+	});
 
 	const focusDetails: TableFocusDetails<T> = $derived(
 		new TableFocusDetails(cell, tableContext, toast)

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

@@ -1,6 +1,7 @@
 <svelte:options runes />
 
 <script lang="ts" module>
+	import { dev } from '$app/environment';
 	import SingleSelect from '../../../../SingleSelect.svelte';
 	import type { Column } from '../../../Types/Columns/Column.js';
 	import type { SelectDef } from '../../../Types/Columns/Definitions/Accessors/SelectDef.svelte.js';
@@ -28,7 +29,7 @@
 
 	let tdref = $state<HTMLTableCellElement | undefined>();
 
-	const selectValue = $derived(cell.getValue() as T |null|undefined);
+	const selectValue = $derived(cell.getValue() as T | null | undefined);
 
 	const visibleValue = $derived(
 		cell.column.columnDef.getDisplayValue!(cell.row.original, cell.row.originalIndex)
@@ -39,7 +40,34 @@
 	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
 	const { toast } = getContext<ToastContext>(ToastContext.identifier);
 
-	const editable = $derived(cell.column.columnDef.editable === true);
+	const editableAsync = $derived(
+		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
+	);
+	let editable = $state(false);
+	let asyncCounter = 0;
+	$effect(() => {
+		void editableAsync;
+		const localCounter = (asyncCounter = asyncCounter + 1);
+		(async () => {
+			try {
+				const isEditable = await editableAsync;
+				if (asyncCounter === localCounter) {
+					editable = isEditable;
+				} else if (dev) {
+					console.log('skipping async editable because it is stale');
+				}
+			} catch (e) {
+				if (dev) {
+					console.error(e);
+				}
+				if (asyncCounter === localCounter) {
+					editable = false;
+				} else if (dev) {
+					console.log('skipping async editable because it is stale');
+				}
+			}
+		})();
+	});
 
 	const focusDetails: TableFocusDetails<T> = $derived(
 		new TableFocusDetails(cell, tableContext, toast)

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

@@ -7,6 +7,8 @@
 </script>
 
 <script lang="ts" generics="T extends object">
+	import { dev } from '$app/environment';
+
 	import type { TableCell } from '../../../Types/Columns/TableCell.js';
 	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
 	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
@@ -22,7 +24,35 @@
 	// 	getNumberColumnDefOrError(cell.column.columnDef)
 	// );
 
-	const editable = $derived(cell.column.columnDef.editable === true);
+	const editableAsync = $derived(
+		cell.column.columnDef.isEditable(cell.row.original, cell.row.originalIndex)
+	);
+	let editable = $state(false);
+
+	let asyncCounter = 0;
+	$effect(() => {
+		void editableAsync;
+		const localCounter = (asyncCounter = asyncCounter + 1);
+		(async () => {
+			try {
+				const isEditable = await editableAsync;
+				if (asyncCounter === localCounter) {
+					editable = isEditable;
+				} else if (dev) {
+					console.log('skipping async editable because it is stale');
+				}
+			} catch (e) {
+				if (dev) {
+					console.error(e);
+				}
+				if (asyncCounter === localCounter) {
+					editable = false;
+				} else if (dev) {
+					console.log('skipping async editable because it is stale');
+				}
+			}
+		})();
+	});
 
 	const value = $derived(cell.getValue());
 

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

@@ -10,6 +10,7 @@ import { BubbleDef } from '../Types/Columns/Definitions/Display/BubbleDef.svelte
 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';
 export class ExampleItemColumnDef {
     static generateExampleItemColumnDefs(modal) {
         let defs = $state([
@@ -41,12 +42,12 @@ export class ExampleItemColumnDef {
             new TextInputDef({
                 header: 'Name',
                 id: 'name',
-                editable: true
+                isEditable: () => true
             }),
             new NumberInputDef({
                 header: 'Some Number',
                 id: 'someNumber',
-                editable: true,
+                isEditable: () => true,
                 min: 0,
                 max: 12345
             }),
@@ -67,25 +68,35 @@ export class ExampleItemColumnDef {
             new DateInputDef({
                 header: 'Some Date',
                 id: 'someDate',
-                editable: true,
-                defaultHidden: true
+                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',
-                editable: true,
+                isEditable: () => true,
                 showTime: true
             }),
             new DateInputDef({
                 header: 'Flo Date',
                 id: 'floDate',
-                editable: true,
+                isEditable: () => true,
                 defaultHidden: true
             }),
             new DateInputDef({
                 header: 'Flo Date With Time',
                 id: 'floDateWithTime',
-                editable: true,
+                isEditable: () => true,
                 defaultHidden: true,
                 showTime: true
             }),
@@ -114,7 +125,7 @@ export class ExampleItemColumnDef {
                     ];
                 },
                 getDisplayValue: (item) => item.someSelect,
-                editable: true
+                isEditable: () => true
             }),
             new BubbleDef({
                 header: 'Generated Bubble',

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

@@ -16,7 +16,7 @@ export interface ColumnDefProps<T extends object, FilterFnType = undefined> {
     defaultHidden?: boolean;
     minSize?: Pixels;
     width?: Pixels;
-    editable?: boolean;
+    isEditable?: (item: T, index: number) => boolean | Promise<boolean>;
     resizable?: boolean;
     isValid?: ValidationFn<T>;
     filterFn?: FilterFn<T, FilterFnType> | CustomFilterFn;
@@ -57,7 +57,7 @@ export declare abstract class ColumnDef<T extends object, FilterFnType = undefin
     get getDisplayValue(): ((item: T, index: number) => string | null | Promise<string | null>) | undefined;
     set getDisplayValue(v: ((item: T, index: number) => string | null | Promise<string | null>) | undefined);
     toJSON(): object;
-    readonly editable: boolean;
+    readonly isEditable: (item: T, index: number) => boolean | Promise<boolean>;
     readonly resizable: boolean;
     readonly header: string | Snippet;
 }

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

@@ -10,7 +10,7 @@ export class ColumnDef {
         this.accessorFn = $derived(props.accessorFn);
         this._minSize = $state(props.minSize ?? 48);
         this._width = $state(props.width ?? props.minSize ?? 48);
-        this.editable = $derived(props.editable ?? false);
+        this.isEditable = $derived(props.isEditable ?? (() => false));
         this.resizable = $derived(props.resizable ?? true);
         this.header = $derived(props.header);
         this._filterValueType = $derived(props.filterValueType);
@@ -84,7 +84,7 @@ export class ColumnDef {
     toJSON() {
         return { columnType: this.columnType, id: this.id, header: this.header };
     }
-    editable;
+    isEditable;
     resizable;
     header;
 }

package/dist/Components/Test/TestContextConsumer.svelte

@@ -0,0 +1,13 @@
+<svelte:options runes />
+
+<script lang="ts">
+	import { TestContext } from '../../Contexts/TestContext.svelte.js';
+	import { getContext } from 'svelte';
+
+	const testContext = getContext<TestContext>(TestContext.identifier);
+</script>
+
+<h1>counter 1: {testContext.value1.value}</h1>
+<p>Ref wrapper 1 is incremented every time you click the button</p>
+<h2>counter 2: {testContext.value2.value}</h2>
+<p>ref wrapper 2 adds ref wrapper 1's value every time ref wrapper 1's value is divisible by 3</p>

package/dist/Components/Test/TestContextConsumer.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const TestContextConsumer: import("svelte").Component<Record<string, never>, {}, "">;
+type TestContextConsumer = ReturnType<typeof TestContextConsumer>;
+export default TestContextConsumer;

package/dist/Contexts/TestContext.svelte.d.ts

@@ -0,0 +1,11 @@
+import type { RefWrapper } from '../Types/Internal/RefWrapper.js';
+export declare class TestContext {
+    static readonly identifier: unique symbol;
+    private _value1;
+    get value1(): RefWrapper<number>;
+    set value1(v: RefWrapper<number>);
+    private _value2;
+    get value2(): RefWrapper<number>;
+    set value2(v: RefWrapper<number>);
+    useTestEffect(sourceValue: RefWrapper<number>): RefWrapper<number>;
+}

package/dist/Contexts/TestContext.svelte.js

@@ -0,0 +1,30 @@
+import { refWrapper } from '../Helpers/Helpers.svelte.js';
+import { untrack } from 'svelte';
+export class TestContext {
+    static identifier = Symbol();
+    _value1 = $state(refWrapper(0));
+    get value1() {
+        return this._value1;
+    }
+    set value1(v) {
+        this._value1 = v;
+    }
+    _value2 = $state(this.useTestEffect(this.value1));
+    get value2() {
+        return this._value2;
+    }
+    set value2(v) {
+        this._value2 = v;
+    }
+    useTestEffect(sourceValue) {
+        const internalState = refWrapper(0);
+        $effect(() => {
+            if (sourceValue.value % 3 == 0) {
+                untrack(() => {
+                    internalState.value += sourceValue.value;
+                });
+            }
+        });
+        return internalState;
+    }
+}

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

@@ -26,4 +26,6 @@ export declare function isErrorResponse(error: unknown): error is IErrorResponse
 export declare function getErrorMessage(error: unknown, includeUUID?: boolean): string;
 export declare function isValidEmailAddress(emailAddress: string): RegExpMatchArray | null;
 export declare function gridItem(element: HTMLElement): (() => void) | undefined;
+export type Milliseconds = number;
+export declare function asyncSleep(delay: Milliseconds): Promise<void>;
 export {};

package/dist/Helpers/Helpers.svelte.js

@@ -1,4 +1,5 @@
 import { Sizing } from '../scss/sizing.js';
+import { untrack } from 'svelte';
 export function autoPluralise(text, quantity = 2, { capitalise = false } = {}) {
     if (quantity === 1) {
         return text;
@@ -39,11 +40,11 @@ export function generateUUID() {
     return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
         let r = Math.random() * 16;
         if (d > 0) {
-            r = (d + r) % 16 | 0;
+            r = ((d + r) % 16) | 0;
             d = Math.floor(d / 16);
         }
         else {
-            r = (d2 + r) % 16 | 0;
+            r = ((d2 + r) % 16) | 0;
             d2 = Math.floor(d2 / 16);
         }
         return (c == 'x' ? r : (r & 0x7) | 0x8).toString(16);
@@ -165,3 +166,6 @@ export function gridItem(element) {
     observer.observe(firstChild);
     return () => observer.unobserve(firstChild);
 }
+export async function asyncSleep(delay) {
+    await new Promise((r) => setTimeout(r, delay));
+}

package/dist/index.d.ts

@@ -123,7 +123,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 { gridItem, autoPluralise, generateUUID, generateShortUUID, refWrapper, SQLFriendly, SQLFriendlyWithLocalTime, passthrough, getCanvasContext, getErrorMessage, isValidEmailAddress, localTimeFormat, vowels } from './Helpers/Helpers.svelte.js';
+export { gridItem, autoPluralise, generateUUID, generateShortUUID, refWrapper, SQLFriendly, SQLFriendlyWithLocalTime, passthrough, getCanvasContext, getErrorMessage, isValidEmailAddress, localTimeFormat, vowels, asyncSleep } 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

@@ -130,7 +130,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 { gridItem, autoPluralise, generateUUID, generateShortUUID, refWrapper, SQLFriendly, SQLFriendlyWithLocalTime, passthrough, getCanvasContext, getErrorMessage, isValidEmailAddress, localTimeFormat, vowels } from './Helpers/Helpers.svelte.js';
+export { gridItem, autoPluralise, generateUUID, generateShortUUID, refWrapper, SQLFriendly, SQLFriendlyWithLocalTime, passthrough, getCanvasContext, getErrorMessage, isValidEmailAddress, localTimeFormat, vowels, asyncSleep } 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.6.0",
+  "version": "0.7.1",
   "publishConfig": {
     "access": "restricted"
   },