@lavalogic/scoria 0.40.33 → 0.40.34

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

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, FilterValueType, RowIdType extends Primitive"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, FilterValueType, RowIdType extends Primitive"
 >import { TableContext } from "../../../Types/Context/TableContext.svelte.js";
 import "../../../Types/Context/TableInitOptions.js";
 import { devCatch, formatDateTime, isValidityTuple, loadingText } from "../../../../../Helpers/Helpers.svelte.js";
@@ -86,110 +86,110 @@ $effect(() => {
 		}
 	}).catch(devCatch);
 });
-</script>
-
-<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	id={thisId}
-	class:info={validity == Validity.Info}
-	class:success={validity == Validity.Valid}
-	class:warning={validity == Validity.Warning}
-	class:error={validity == Validity.Invalid}
-	class:has-modal={!!modalComponent}
-	tabIndex={hasValue ? 0 : undefined}
-	class="focusable"
-	title={dateTooltip}
-	style={focusDetails.outline}
-	class:multifocus={hasValue && focusDetails.isMultiFocused}
-	class:multifocus-start={hasValue && focusDetails.isMultiFocusStart}
-	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);
-	}}
-	onclick={() => {
-		// Open the per-cell modal if the column declares one. Click is
-		// the right trigger here (focus already started on mousedown);
-		// modal-less display cells fall through to the default focus
-		// behaviour with no extra handler.
-		if (modalComponent) {
-			tableContext.setOpenModalCell({
-				row: cell.row.original,
-				columnId: cell.column.id,
-			});
-		}
-	}}
-	onkeydown={(e) => {
-		// Keyboard parity with `onclick` above: when the cell has DOM
-		// focus (via `tabIndex`), Enter / Space opens the modal. Only
-		// fires for columns that declare a `modal`; non-modal display
-		// cells defer to the table's global keyboard navigation.
-		if (modalComponent && (e.key === 'Enter' || e.key === ' ')) {
-			e.preventDefault();
-			tableContext.setOpenModalCell({
-				row: cell.row.original,
-				columnId: cell.column.id,
-			});
-		}
-	}}
->
-	{#if hasValue}
-		{#await visibleValue}
-			{loadingText()}
-		{:then v}
-			{(v instanceof Date
-				? v.toLocaleDateString()
-				: options.length
-					? options.find((it) => it.value === v)?.label
-					: v) ??
-				v ??
-				''}
-		{/await}
-	{:else if children}
-		<div
-			class="slot-wrapper"
-			class:multifocus={focusDetails.isMultiFocused}
-			class:multifocus-start={focusDetails.isMultiFocusStart}
-		>
-			{@render children()}
-		</div>
-	{/if}
-</div>
-{#if showModal && modalComponent}
-	<!--
-		The component receives the public `DisplayModalProps<T>` shape
-		`{ row, close }`. The dialog is NOT wrapped in
-		`<Portal target={document.body}>` any more. `<dialog>` opened
-		via `showModal()` enters the browser's top layer, so it already
-		escapes overflow:hidden / sticky / transform ancestors without
-		needing to be re-parented. Moving the `<div>` ancestor mid-mount
-		(Portal's $effect runs during the same microtask round as
-		BaseModal's `tick().then` `dialog.showModal()`) was popping the
-		dialog out of the top layer and leaving it to render inline at
-		the bottom of the page.
-	-->
-	{@const ModalComponent = modalComponent}
-	<ModalComponent
-		row={cell.row.original}
-		close={onclose}
-	/>
-{/if}
-
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	id={thisId}
+	class:info={validity == Validity.Info}
+	class:success={validity == Validity.Valid}
+	class:warning={validity == Validity.Warning}
+	class:error={validity == Validity.Invalid}
+	class:has-modal={!!modalComponent}
+	tabIndex={hasValue ? 0 : undefined}
+	class="focusable"
+	title={dateTooltip}
+	style={focusDetails.outline}
+	class:multifocus={hasValue && focusDetails.isMultiFocused}
+	class:multifocus-start={hasValue && focusDetails.isMultiFocusStart}
+	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);
+	}}
+	onclick={() => {
+		// Open the per-cell modal if the column declares one. Click is
+		// the right trigger here (focus already started on mousedown);
+		// modal-less display cells fall through to the default focus
+		// behaviour with no extra handler.
+		if (modalComponent) {
+			tableContext.setOpenModalCell({
+				row: cell.row.original,
+				columnId: cell.column.id,
+			});
+		}
+	}}
+	onkeydown={(e) => {
+		// Keyboard parity with `onclick` above: when the cell has DOM
+		// focus (via `tabIndex`), Enter / Space opens the modal. Only
+		// fires for columns that declare a `modal`; non-modal display
+		// cells defer to the table's global keyboard navigation.
+		if (modalComponent && (e.key === 'Enter' || e.key === ' ')) {
+			e.preventDefault();
+			tableContext.setOpenModalCell({
+				row: cell.row.original,
+				columnId: cell.column.id,
+			});
+		}
+	}}
+>
+	{#if hasValue}
+		{#await visibleValue}
+			{loadingText()}
+		{:then v}
+			{(v instanceof Date
+				? v.toLocaleDateString()
+				: options.length
+					? options.find((it) => it.value === v)?.label
+					: v) ??
+				v ??
+				''}
+		{/await}
+	{:else if children}
+		<div
+			class="slot-wrapper"
+			class:multifocus={focusDetails.isMultiFocused}
+			class:multifocus-start={focusDetails.isMultiFocusStart}
+		>
+			{@render children()}
+		</div>
+	{/if}
+</div>
+{#if showModal && modalComponent}
+	<!--
+		The component receives the public `DisplayModalProps<T>` shape
+		`{ row, close }`. The dialog is NOT wrapped in
+		`<Portal target={document.body}>` any more. `<dialog>` opened
+		via `showModal()` enters the browser's top layer, so it already
+		escapes overflow:hidden / sticky / transform ancestors without
+		needing to be re-parented. Moving the `<div>` ancestor mid-mount
+		(Portal's $effect runs during the same microtask round as
+		BaseModal's `tick().then` `dialog.showModal()`) was popping the
+		dialog out of the top layer and leaving it to render inline at
+		the bottom of the page.
+	-->
+	{@const ModalComponent = modalComponent}
+	<ModalComponent
+		row={cell.row.original}
+		close={onclose}
+	/>
+{/if}
+
 <style>.focusable,
 .checkbox-cell,
 .input-cell,
@@ -279,4 +279,4 @@ div.slot-wrapper {
 .input-cell.error,
 .select-cell.error {
   background-color: #f9e9e9;
-}</style>
+}</style>

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

@@ -1,19 +1,19 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
 >import ProgressBubble from "../../../../ProgressBubble.svelte";
 import { TableContext } from "../../../Types/Context/TableContext.svelte.js";
 import "../../../Types/Context/TableInitOptions.js";
 import { devCatch, isValidityTuple } from "../../../../../Helpers/Helpers.svelte.js";
 import { Validity } from "../../../../../Types/Internal/Validity.js";
 import { getContext } from "svelte";
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object, FilterValueType, RowIdType extends Primitive"
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object, FilterValueType, RowIdType extends Primitive"
 >const { cell } = $props();
 /**
 * Tuple of `[done, total]`. The cast is unavoidable until `ProgressBarDef`
@@ -37,49 +37,49 @@ $effect(() => {
 	}).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 -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	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>
-</div>
-
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	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>
+</div>
+
 <style>.focusable,
 .checkbox-cell,
 .input-cell,
@@ -166,4 +166,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,18 +1,18 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
 >import { m as i18n } from "../../../../../paraglide/messages.js";
 import Button from "../../../../Button.svelte";
 import { getErrorMessage } from "../../../../../Helpers/Helpers.svelte.js";
 import { ColourSet } from "../../../../../scss/colours.js";
 import { Size } from "../../../../../Types/Internal/Size.js";
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object, FilterValueType"
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object, FilterValueType"
 >import { dev } from "$app/environment";
 const { action, cell } = $props();
 /**
@@ -26,28 +26,28 @@ const buttonStatePromise = $derived.by(() => {
 	const labelPromise = Promise.resolve(action.getLabel(cell.row.original, cell.row.originalIndex));
 	return Promise.all([labelPromise, isEnabledPromise]);
 });
-</script>
-
-{#await buttonStatePromise}
-	<!-- intentionally empty: the actions popover frame already conveys the loading state -->
-{:then [label, 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}
-	{#if dev}
-		Error Loading Button: {getErrorMessage(e)}
-	{:else}
-		{i18n['scoria.text.error_loading_button']()}
-	{/if}
-{/await}
+</script>
+
+{#await buttonStatePromise}
+	<!-- intentionally empty: the actions popover frame already conveys the loading state -->
+{:then [label, 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}
+	{#if dev}
+		Error Loading Button: {getErrorMessage(e)}
+	{:else}
+		{i18n['scoria.text.error_loading_button']()}
+	{/if}
+{/await}

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

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, RowIdType extends Primitive"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, RowIdType extends Primitive"
 >import { TableContext } from "../../../Types/Context/TableContext.svelte.js";
 import "../../../Types/Context/TableInitOptions.js";
 import { devCatch, isValidityTuple } from "../../../../../Helpers/Helpers.svelte.js";
@@ -66,64 +66,64 @@ $effect(() => {
 		}
 	}).catch(devCatch);
 });
-</script>
-
-<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	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' && editable) {
-			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}
-			disabled={!editable}
-		/>
-	</label>
-</div>
-
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	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' && editable) {
+			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}
+			disabled={!editable}
+		/>
+	</label>
+</div>
+
 <style>.focusable,
 .checkbox-cell,
 .input-cell,
@@ -204,4 +204,4 @@ label.multifocus.multifocus-start {
 input:disabled {
   cursor: not-allowed;
   opacity: 0.45;
-}</style>
+}</style>