@lavalogic/scoria 0.33.0 → 0.35.0

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

@@ -1,98 +1,98 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import ProgressBubble from '../../../../ProgressBubble.svelte';
-	import type { ProgressBarTableCell } from '../../../Types/Columns/ProgressBarTableCell.js';
-	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
-	import { Validity } from '../../../../../Types/Internal/Validity.js';
-	import { getContext } from 'svelte';
-
-	export interface ProgressCellProps<T extends object, FilterValueType> {
-		cell: ProgressBarTableCell<T, FilterValueType>;
-	}
-</script>
-
-<!-- TODO editable version of this should contain a multi select -->
-<script
-	lang="ts"
-	generics="T extends object, FilterValueType"
->
-	const { cell }: ProgressCellProps<T, FilterValueType> = $props();
-
-	const value: [number, number] = $derived(cell.getValue()) as [number, number];
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-	// const previousRowIndex: number | undefined = $state(undefined);
-
-	const focusDetails = $derived(new TableFocusDetails<T, never>(cell, tableContext));
-
-	let validity: Validity = $state(Validity.Valid);
-	$effect(() => {
-		const validityPromise = focusDetails.validity;
-
-		validityPromise
-			.then((v) => {
-				if (!v) {
-					validity = Validity.Neutral;
-				} else if (isValidityTuple(v)) {
-					validity = v.value;
-				} else {
-					validity = v;
-				}
-			})
-			.catch(devCatch);
-	});
-
-	const colours = $derived(
-		cell.column.columnDef.getColour(cell.row.original, cell.row.originalIndex, value)
-	);
-</script>
-
-<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-<td
-	id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
-	tabIndex={0}
-	class="focusable"
-	class:multifocus={focusDetails.isMultiFocused}
-	class:multifocus-start={focusDetails.isMultiFocusStart}
-	style={focusDetails.outline}
-	class:info={validity == Validity.Info}
-	class:success={validity == Validity.Valid}
-	class:warning={validity == Validity.Warning}
-	class:error={validity == Validity.Invalid}
-	onmousedown={(e) => {
-		// start focus only on left click
-		if (e.button === 0) {
-			if (e.shiftKey) {
-				e.preventDefault();
-				tableContext.setFocusEnd(focusDetails.coordinates);
-			} else {
-				tableContext.startFocus(focusDetails.coordinates);
-			}
-		}
-	}}
-	onmouseover={() => {
-		if (tableContext.isMousingDown) {
-			tableContext.setFocusEnd(focusDetails.coordinates);
-		}
-	}}
-	onmouseup={() => {
-		tableContext.endFocus(focusDetails.coordinates);
-	}}
->
-	<div class="bubble-parent">
-		<ProgressBubble
-			{value}
-			{colours}
-		/>
-	</div>
-</td>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import ProgressBubble from '../../../../ProgressBubble.svelte';
+	import type { ProgressBarTableCell } from '../../../Types/Columns/ProgressBarTableCell.js';
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
+	import { Validity } from '../../../../../Types/Internal/Validity.js';
+	import { getContext } from 'svelte';
+
+	export interface ProgressCellProps<T extends object, FilterValueType> {
+		cell: ProgressBarTableCell<T, FilterValueType>;
+	}
+</script>
+
+<!-- TODO editable version of this should contain a multi select -->
+<script
+	lang="ts"
+	generics="T extends object, FilterValueType"
+>
+	const { cell }: ProgressCellProps<T, FilterValueType> = $props();
+
+	const value: [number, number] = $derived(cell.getValue()) as [number, number];
+
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+	// const previousRowIndex: number | undefined = $state(undefined);
+
+	const focusDetails = $derived(new TableFocusDetails<T, never>(cell, tableContext));
+
+	let validity: Validity = $state(Validity.Valid);
+	$effect(() => {
+		const validityPromise = focusDetails.validity;
+
+		validityPromise
+			.then((v) => {
+				if (!v) {
+					validity = Validity.Neutral;
+				} else if (isValidityTuple(v)) {
+					validity = v.value;
+				} else {
+					validity = v;
+				}
+			})
+			.catch(devCatch);
+	});
+
+	const colours = $derived(
+		cell.column.columnDef.getColour(cell.row.original, cell.row.originalIndex, value)
+	);
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<td
+	id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
+	tabIndex={0}
+	class="focusable"
+	class:multifocus={focusDetails.isMultiFocused}
+	class:multifocus-start={focusDetails.isMultiFocusStart}
+	style={focusDetails.outline}
+	class:info={validity == Validity.Info}
+	class:success={validity == Validity.Valid}
+	class:warning={validity == Validity.Warning}
+	class:error={validity == Validity.Invalid}
+	onmousedown={(e) => {
+		// start focus only on left click
+		if (e.button === 0) {
+			if (e.shiftKey) {
+				e.preventDefault();
+				tableContext.setFocusEnd(focusDetails.coordinates);
+			} else {
+				tableContext.startFocus(focusDetails.coordinates);
+			}
+		}
+	}}
+	onmouseover={() => {
+		if (tableContext.isMousingDown) {
+			tableContext.setFocusEnd(focusDetails.coordinates);
+		}
+	}}
+	onmouseup={() => {
+		tableContext.endFocus(focusDetails.coordinates);
+	}}
+>
+	<div class="bubble-parent">
+		<ProgressBubble
+			{value}
+			{colours}
+		/>
+	</div>
+</td>
+
 <style>td {
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
@@ -153,4 +153,4 @@ div.bubble-parent {
   align-items: center;
   gap: 0.75rem;
   --line-height: 1;
-}</style>
+}</style>

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

@@ -1,72 +1,72 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import Button from '../../../../Button.svelte';
-	import type { TableActionButton } from '../../../Types/Columns/TableActionButton.js';
-	import { getErrorMessage } from '../../../../../Helpers/Helpers.svelte.js';
-	import { ColourSet } from '../../../../../scss/colours.js';
-	import { Size } from '../../../../../Types/Internal/Size.js';
-	import type { ActionsTableCell } from './ActionsTableCell.js';
-
-	export interface TableActionProps<T extends object, FilterValueType> {
-		action: TableActionButton<T>;
-		cell: ActionsTableCell<T, FilterValueType>;
-	}
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object,FilterValueType"
->
-	const { action, cell }: TableActionProps<T, FilterValueType> = $props();
-
-	const isEnabledPromise: boolean | Promise<boolean> = $derived.by(() => {
-		const disabled = action.isDisabled?.(cell.row.original, cell.row.originalIndex);
-
-		if (disabled != null) {
-			if (typeof disabled == 'boolean') {
-				return !disabled;
-			} else {
-				return disabled.then((it) => !it);
-			}
-		}
-		return (
-			cell.column.columnDef.isEnabled?.(cell.row.original, cell.row.originalIndex, action) ?? true
-		);
-	});
-
-	const labelPromise: Promise<string> = $derived.by(() => {
-		const result = action.getLabel(cell.row.original, cell.row.originalIndex);
-
-		if (typeof result == 'object') {
-			return result.then((it) => it);
-		} else {
-			return Promise.resolve(result);
-		}
-	});
-</script>
-
-{#await labelPromise then label}
-	{#await isEnabledPromise then isEnabled}
-		<Button
-			fullWidth
-			size={Size.Medium}
-			colourSet={cell.column.columnDef.getColourSet?.(
-				cell.row.original,
-				cell.row.originalIndex,
-				action
-			) ?? ColourSet.Secondary}
-			disabled={!isEnabled}
-			onclick={() => {
-				action.callback(cell.row.original, cell.row.originalIndex);
-			}}>{label}</Button
-		>
-	{:catch e}
-		Error Loading Button: {getErrorMessage(e)}
-	{/await}
-{:catch e}
-	Error Loading Button: {getErrorMessage(e)}
-{/await}
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import Button from '../../../../Button.svelte';
+	import type { TableActionButton } from '../../../Types/Columns/TableActionButton.js';
+	import { getErrorMessage } from '../../../../../Helpers/Helpers.svelte.js';
+	import { ColourSet } from '../../../../../scss/colours.js';
+	import { Size } from '../../../../../Types/Internal/Size.js';
+	import type { ActionsTableCell } from './ActionsTableCell.js';
+
+	export interface TableActionProps<T extends object, FilterValueType> {
+		action: TableActionButton<T>;
+		cell: ActionsTableCell<T, FilterValueType>;
+	}
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object,FilterValueType"
+>
+	const { action, cell }: TableActionProps<T, FilterValueType> = $props();
+
+	const isEnabledPromise: boolean | Promise<boolean> = $derived.by(() => {
+		const disabled = action.isDisabled?.(cell.row.original, cell.row.originalIndex);
+
+		if (disabled != null) {
+			if (typeof disabled == 'boolean') {
+				return !disabled;
+			} else {
+				return disabled.then((it) => !it);
+			}
+		}
+		return (
+			cell.column.columnDef.isEnabled?.(cell.row.original, cell.row.originalIndex, action) ?? true
+		);
+	});
+
+	const labelPromise: Promise<string> = $derived.by(() => {
+		const result = action.getLabel(cell.row.original, cell.row.originalIndex);
+
+		if (typeof result == 'object') {
+			return result.then((it) => it);
+		} else {
+			return Promise.resolve(result);
+		}
+	});
+</script>
+
+{#await labelPromise then label}
+	{#await isEnabledPromise then isEnabled}
+		<Button
+			fullWidth
+			size={Size.Medium}
+			colourSet={cell.column.columnDef.getColourSet?.(
+				cell.row.original,
+				cell.row.originalIndex,
+				action
+			) ?? ColourSet.Secondary}
+			disabled={!isEnabled}
+			onclick={() => {
+				action.callback(cell.row.original, cell.row.originalIndex);
+			}}>{label}</Button
+		>
+	{:catch e}
+		Error Loading Button: {getErrorMessage(e)}
+	{/await}
+{:catch e}
+	Error Loading Button: {getErrorMessage(e)}
+{/await}

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

@@ -1,133 +1,133 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	export interface TableCheckboxProps<T extends object> {
-		cell: TableCell<T, BoolFilterValueType>;
-
-		onchange?: ChangeEventHandler<HTMLInputElement>;
-	}
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	import type { TableCell } from '../../../Types/Columns/TableCell.js';
-	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import type { BoolFilterValueType } from '../../../Types/Filtering/FilterFn.js';
-	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
-	import { Validity } from '../../../../../Types/Internal/Validity.js';
-	import { getContext, tick } from 'svelte';
-
-	import type { ChangeEventHandler } from 'svelte/elements';
-
-	const { cell, onchange: parentOnchange }: TableCheckboxProps<T> = $props();
-
-	const value = $derived(!!cell.getValue());
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const focusDetails: TableFocusDetails<T, never> = $derived(
-		new TableFocusDetails(cell, tableContext)
-	);
-
-	let inputRef: HTMLInputElement | undefined = $state();
-
-	const onchange: ChangeEventHandler<HTMLInputElement> = (e) => {
-		tableContext
-			.onEditCell(
-				cell.row.original,
-				focusDetails.coordinates,
-				(e.target as HTMLInputElement).checked
-			)
-			.catch(devCatch);
-		parentOnchange?.(e);
-
-		tick()
-			.then(() => {
-				if (inputRef && value != inputRef.checked) {
-					inputRef.checked = value;
-				}
-			})
-			.catch(devCatch);
-	};
-
-	let validity: Validity = $state(Validity.Valid);
-	$effect(() => {
-		const validityPromise = focusDetails.validity;
-
-		validityPromise
-			.then((v) => {
-				if (!v) {
-					validity = Validity.Neutral;
-				} else if (isValidityTuple(v)) {
-					validity = v.value;
-				} else {
-					validity = v;
-				}
-			})
-			.catch(devCatch);
-	});
-</script>
-
-<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-<td
-	class="checkbox-cell"
-	onmousedown={(e) => {
-		// start focus only on left click
-		if (e.button === 0) {
-			if (e.shiftKey) {
-				e.preventDefault();
-				tableContext.setFocusEnd(focusDetails.coordinates);
-			} else {
-				tableContext.startFocus(focusDetails.coordinates);
-			}
-		}
-	}}
-	onkeyup={(e: KeyboardEvent) => {
-		if (e.key === 'Enter') {
-			e.stopPropagation();
-			tableContext.onEditCell(cell.row.original, focusDetails.coordinates, !value).catch(devCatch);
-		}
-	}}
-	onkeydown={(e: KeyboardEvent) => {
-		if (e.key == 'Enter' || e.key == 'F2') {
-			e.stopPropagation();
-		}
-	}}
-	onmouseover={() => {
-		if (tableContext.isMousingDown) {
-			tableContext.setFocusEnd(focusDetails.coordinates);
-		}
-	}}
-	onmouseup={() => {
-		tableContext.endFocus(focusDetails.coordinates);
-	}}
-	class:info={validity == Validity.Info}
-	class:success={validity == Validity.Valid}
-	class:warning={validity == Validity.Warning}
-	class:error={validity == Validity.Invalid}
->
-	&nbsp;
-	<label
-		class:multifocus={focusDetails.isMultiFocused}
-		class:multifocus-start={focusDetails.isMultiFocusStart}
-		style={focusDetails.outline}
-	>
-		<input
-			bind:this={inputRef}
-			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
-			{onchange}
-			type="checkbox"
-			checked={value}
-		/>
-	</label>
-</td>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	export interface TableCheckboxProps<T extends object> {
+		cell: TableCell<T, BoolFilterValueType>;
+
+		onchange?: ChangeEventHandler<HTMLInputElement>;
+	}
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object"
+>
+	import type { TableCell } from '../../../Types/Columns/TableCell.js';
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import type { BoolFilterValueType } from '../../../Types/Filtering/FilterFn.js';
+	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
+	import { Validity } from '../../../../../Types/Internal/Validity.js';
+	import { getContext, tick } from 'svelte';
+
+	import type { ChangeEventHandler } from 'svelte/elements';
+
+	const { cell, onchange: parentOnchange }: TableCheckboxProps<T> = $props();
+
+	const value = $derived(!!cell.getValue());
+
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+
+	const focusDetails: TableFocusDetails<T, never> = $derived(
+		new TableFocusDetails(cell, tableContext)
+	);
+
+	let inputRef: HTMLInputElement | undefined = $state();
+
+	const onchange: ChangeEventHandler<HTMLInputElement> = (e) => {
+		tableContext
+			.onEditCell(
+				cell.row.original,
+				focusDetails.coordinates,
+				(e.target as HTMLInputElement).checked
+			)
+			.catch(devCatch);
+		parentOnchange?.(e);
+
+		tick()
+			.then(() => {
+				if (inputRef && value != inputRef.checked) {
+					inputRef.checked = value;
+				}
+			})
+			.catch(devCatch);
+	};
+
+	let validity: Validity = $state(Validity.Valid);
+	$effect(() => {
+		const validityPromise = focusDetails.validity;
+
+		validityPromise
+			.then((v) => {
+				if (!v) {
+					validity = Validity.Neutral;
+				} else if (isValidityTuple(v)) {
+					validity = v.value;
+				} else {
+					validity = v;
+				}
+			})
+			.catch(devCatch);
+	});
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<td
+	class="checkbox-cell"
+	onmousedown={(e) => {
+		// start focus only on left click
+		if (e.button === 0) {
+			if (e.shiftKey) {
+				e.preventDefault();
+				tableContext.setFocusEnd(focusDetails.coordinates);
+			} else {
+				tableContext.startFocus(focusDetails.coordinates);
+			}
+		}
+	}}
+	onkeyup={(e: KeyboardEvent) => {
+		if (e.key === 'Enter') {
+			e.stopPropagation();
+			tableContext.onEditCell(cell.row.original, focusDetails.coordinates, !value).catch(devCatch);
+		}
+	}}
+	onkeydown={(e: KeyboardEvent) => {
+		if (e.key == 'Enter' || e.key == 'F2') {
+			e.stopPropagation();
+		}
+	}}
+	onmouseover={() => {
+		if (tableContext.isMousingDown) {
+			tableContext.setFocusEnd(focusDetails.coordinates);
+		}
+	}}
+	onmouseup={() => {
+		tableContext.endFocus(focusDetails.coordinates);
+	}}
+	class:info={validity == Validity.Info}
+	class:success={validity == Validity.Valid}
+	class:warning={validity == Validity.Warning}
+	class:error={validity == Validity.Invalid}
+>
+	&nbsp;
+	<label
+		class:multifocus={focusDetails.isMultiFocused}
+		class:multifocus-start={focusDetails.isMultiFocusStart}
+		style={focusDetails.outline}
+	>
+		<input
+			bind:this={inputRef}
+			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
+			{onchange}
+			type="checkbox"
+			checked={value}
+		/>
+	</label>
+</td>
+
 <style>td {
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
@@ -186,4 +186,4 @@ td.warning {
 }
 td.error {
   background-color: #f9e9e9;
-}</style>
+}</style>