@lavalogic/scoria 0.40.33 → 0.40.34

package/dist/Components/Table/Body/Rows/Columns/TableTextInput.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 { m as i18n } from "../../../../../paraglide/messages.js";
 import { dev } from "$app/environment";
 import { TableContext } from "../../../Types/Context/TableContext.svelte.js";
@@ -90,91 +90,91 @@ function onInputFocus(e) {
 * lives in the shared `useAsyncEditable` helper.
 */
 $effect(() => editable.attachEditListener(tdref));
-</script>
-
-{#if editable.isBeingEdited}
-	<div class="input-cell">
-		<TextInput
-			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
-			onkeydown={handleInputKeydown}
-			variant={InputVariant.Table}
-			bind:value={tempTextValue}
-			onfocus={onInputFocus}
-			bind:inputRef
-			onblur={onBlur}
-		/>
-		<!-- HACK this onBlur is now being called by an effect because otherwise it fires twice -->
-	</div>
-{:else}
-	<!-- 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}`}
-		style={editable.focusDetails.outline}
-		onmousedown={(e) => {
-			// start focus only on left click
-			if (e.button === 0) {
-				if (e.shiftKey) {
-					e.preventDefault();
-					tableContext.setFocusEnd(editable.focusDetails.coordinates);
-				} else {
-					tableContext.startFocus(editable.focusDetails.coordinates);
-				}
-			}
-		}}
-		onmouseover={() => {
-			if (tableContext.isMousingDown) {
-				tableContext.setFocusEnd(editable.focusDetails.coordinates);
-			}
-		}}
-		bind:this={tdref}
-		tabIndex="0"
-		class:editable={editable.editable}
-		class="focusable"
-		class:multifocus={editable.focusDetails.isMultiFocused}
-		class:multifocus-start={editable.focusDetails.isMultiFocusStart}
-		class:info={editable.validity == Validity.Info}
-		class:success={editable.validity == Validity.Valid}
-		class:warning={editable.validity == Validity.Warning}
-		class:error={editable.validity == Validity.Invalid}
-		onmouseup={() => {
-			const wasHandled = editable.handleSingleClickFocus();
-			if (wasHandled) {
-				tick()
-					.then(() => {
-						inputRef?.focus();
-					})
-					.catch(devCatch);
-			} else {
-				tableContext.endFocus(editable.focusDetails.coordinates);
-			}
-		}}
-		ondblclick={() => {
-			const wasHandled = editable.handleDoubleClickFocus();
-			if (wasHandled) {
-				tick()
-					.then(() => {
-						inputRef?.focus();
-					})
-					.catch(devCatch);
-			}
-		}}
-	>
-		{#await visibleValue}
-			{loadingText()}
-		{:then value}
-			{value}
-		{:catch error}
-			{#if dev}
-				error: {error}
-				<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-				{@debug error}
-			{/if}
-			{i18n['scoria.text.error_getting_value']()}
-		{/await}
-	</div>
-{/if}
-
+</script>
+
+{#if editable.isBeingEdited}
+	<div class="input-cell">
+		<TextInput
+			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
+			onkeydown={handleInputKeydown}
+			variant={InputVariant.Table}
+			bind:value={tempTextValue}
+			onfocus={onInputFocus}
+			bind:inputRef
+			onblur={onBlur}
+		/>
+		<!-- HACK this onBlur is now being called by an effect because otherwise it fires twice -->
+	</div>
+{:else}
+	<!-- 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}`}
+		style={editable.focusDetails.outline}
+		onmousedown={(e) => {
+			// start focus only on left click
+			if (e.button === 0) {
+				if (e.shiftKey) {
+					e.preventDefault();
+					tableContext.setFocusEnd(editable.focusDetails.coordinates);
+				} else {
+					tableContext.startFocus(editable.focusDetails.coordinates);
+				}
+			}
+		}}
+		onmouseover={() => {
+			if (tableContext.isMousingDown) {
+				tableContext.setFocusEnd(editable.focusDetails.coordinates);
+			}
+		}}
+		bind:this={tdref}
+		tabIndex="0"
+		class:editable={editable.editable}
+		class="focusable"
+		class:multifocus={editable.focusDetails.isMultiFocused}
+		class:multifocus-start={editable.focusDetails.isMultiFocusStart}
+		class:info={editable.validity == Validity.Info}
+		class:success={editable.validity == Validity.Valid}
+		class:warning={editable.validity == Validity.Warning}
+		class:error={editable.validity == Validity.Invalid}
+		onmouseup={() => {
+			const wasHandled = editable.handleSingleClickFocus();
+			if (wasHandled) {
+				tick()
+					.then(() => {
+						inputRef?.focus();
+					})
+					.catch(devCatch);
+			} else {
+				tableContext.endFocus(editable.focusDetails.coordinates);
+			}
+		}}
+		ondblclick={() => {
+			const wasHandled = editable.handleDoubleClickFocus();
+			if (wasHandled) {
+				tick()
+					.then(() => {
+						inputRef?.focus();
+					})
+					.catch(devCatch);
+			}
+		}}
+	>
+		{#await visibleValue}
+			{loadingText()}
+		{:then value}
+			{value}
+		{:catch error}
+			{#if dev}
+				error: {error}
+				<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+				{@debug error}
+			{/if}
+			{i18n['scoria.text.error_getting_value']()}
+		{/await}
+	</div>
+{/if}
+
 <style>.focusable,
 .checkbox-cell,
 .input-cell,
@@ -241,4 +241,4 @@ $effect(() => editable.attachEditListener(tdref));
 .input-cell {
   padding: unset;
   box-sizing: border-box;
-}</style>
+}</style>

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

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
 >import Action from "../../../../Action.svelte";
 import { TableContext } from "../../../Types/Context/TableContext.svelte.js";
 import { devCatch, isValidityTuple } from "../../../../../Helpers/Helpers.svelte.js";
@@ -36,11 +36,11 @@ const iconSets = {
 		size: Size.Medium
 	}
 };
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object,  FilterValueType, RowIdType extends Primitive"
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object,  FilterValueType, RowIdType extends Primitive"
 >import "../../../Types/Context/TableInitOptions.js";
 import { getContext, tick } from "svelte";
 const { cell } = $props();
@@ -89,83 +89,83 @@ function onclose() {
 	}
 }
 const icon = $derived(iconSets[validity]);
-</script>
-
-<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class="focusable"
-	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="slot-wrapper"
-		class:multifocus={focusDetails.isMultiFocused}
-		class:multifocus-start={focusDetails.isMultiFocusStart}
-	>
-		<Action
-			id={thisId}
-			style={focusDetails.outline}
-			border={false}
-			colourSet={ColourSet.Auxiliary}
-			label={reason}
-			size={Size.FillWidth}
-			{icon}
-			onclick={() => {
-				if (ColumnDef.modal) {
-					tableContext.setOpenModalCell({
-						row: cell.row.original,
-						columnId: cell.column.id,
-					});
-				}
-			}}
-		/>
-	</div>
-	{#if showModal}
-		<!--
-			`ColumnDef.modal` is declared as
-			`Component<DisplayModalProps<TRow>>` on the public column
-			options, which exposes a stable `{ row, close }` prop
-			shape. Cell renderers used to hand a legacy
-			`{ cell, onclose, onsubmit }` triple here, which made the
-			public type lie about the runtime shape - migrated to
-			`{ row, close }` so consumer-authored modals can rely on
-			the documented type.
-
-			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.
-		-->
-		<ColumnDef.modal
-			row={cell.row.original}
-			close={onclose}
-		/>
-	{/if}
-</div>
-
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="focusable"
+	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="slot-wrapper"
+		class:multifocus={focusDetails.isMultiFocused}
+		class:multifocus-start={focusDetails.isMultiFocusStart}
+	>
+		<Action
+			id={thisId}
+			style={focusDetails.outline}
+			border={false}
+			colourSet={ColourSet.Auxiliary}
+			label={reason}
+			size={Size.FillWidth}
+			{icon}
+			onclick={() => {
+				if (ColumnDef.modal) {
+					tableContext.setOpenModalCell({
+						row: cell.row.original,
+						columnId: cell.column.id,
+					});
+				}
+			}}
+		/>
+	</div>
+	{#if showModal}
+		<!--
+			`ColumnDef.modal` is declared as
+			`Component<DisplayModalProps<TRow>>` on the public column
+			options, which exposes a stable `{ row, close }` prop
+			shape. Cell renderers used to hand a legacy
+			`{ cell, onclose, onsubmit }` triple here, which made the
+			public type lie about the runtime shape - migrated to
+			`{ row, close }` so consumer-authored modals can rely on
+			the documented type.
+
+			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.
+		-->
+		<ColumnDef.modal
+			row={cell.row.original}
+			close={onclose}
+		/>
+	{/if}
+</div>
+
 <style>.focusable,
 .checkbox-cell,
 .input-cell,
@@ -223,4 +223,4 @@ div.slot-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
-}</style>
+}</style>

package/dist/Components/Table/Body/Rows/TableRow.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 { m as i18n } from "../../../../paraglide/messages.js";
 import { dev } from "$app/environment";
 import { devCatch, generateWeakId } from "../../../../Helpers/Helpers.svelte.js";
@@ -129,127 +129,127 @@ const fallbackInnerTableName = generateWeakId();
 function cellWrapStyle(cell) {
 	return cell.column.columnDef.wrapValue ? "--cell-white-space: normal; --cell-overflow-x: visible; --cell-height: auto; --cell-min-height: var(--height);" : "";
 }
-</script>
-
-<div
-	role="row"
-	class="datatable-row"
-	class:hoverable
-	class:alt={tableContext.alternateRowColours && odd}
-	class:highlighted
->
-	{#if showHighlightButton}
-		<div
-			role="cell"
-			class="cell highlight-cell pinned-left"
-			style="left: 0px"
-		>
-			<ColumnHighlight
-				rowIndex={rowIndex ??
-					(() => {
-						if (dev) {
-							console.error(`column had invalid row index: ${rowIndex}`);
-						}
-						return -1;
-					})()}
-				{highlighted}
-				toggleHighlightedRow={() => {
-					tableContext.toggleHighlightedRow(row.original)?.catch(devCatch);
-				}}
-			/>
-		</div>
-	{/if}
-	{#each leftCells as cell, index (cell.column.id)}
-		<div
-			role="cell"
-			class="cell pinned-left"
-			style="left: {leftOffsets[index]}px; {cellWrapStyle(cell)}"
-		>
-			<TableColumn
-				{cell}
-				{expandedColumnDef}
-				{onExpandChange}
-			/>
-		</div>
-	{/each}
-	{#each centreCells as cell (cell.column.id)}
-		<div
-			role="cell"
-			class="cell"
-			style={cellWrapStyle(cell)}
-		>
-			<TableColumn
-				{cell}
-				{expandedColumnDef}
-				{onExpandChange}
-			/>
-		</div>
-	{/each}
-	{#each rightCells as cell, index (cell.column.id)}
-		<div
-			role="cell"
-			class="cell pinned-right"
-			style="right: {rightOffsets[index]}px; {cellWrapStyle(cell)}"
-		>
-			<TableColumn
-				{cell}
-				{expandedColumnDef}
-				{onExpandChange}
-			/>
-		</div>
-	{/each}
-</div>
-
-{#if expandedColumnDef}
-	<div
-		role="row"
-		class="datatable-row expand-row"
-	>
-		<div
-			role="cell"
-			class="cell expand-cell"
-		>
-			{#await innerDataPromise}
-				{i18n['scoria.text.loading_inline']()}
-			{:then data}
-				{#if data && data.length}
-					{@const options = expandedColumnDef.innerTableOptions}
-					{#if innerTableName}
-						{#key innerTableName}
-							<NestedTable
-								tableName={innerTableName}
-								{data}
-								columnDefWrapper={innerColumnDefs}
-								{options}
-								getUserId={tableContext.getUserId}
-							/>
-						{/key}
-					{:else}
-						<NestedTable
-							tableName={fallbackInnerTableName}
-							{data}
-							columnDefWrapper={innerColumnDefs}
-							{options}
-							getUserId={tableContext.getUserId}
-						/>
-					{/if}
-				{:else if !data}
-					{i18n['scoria.text.error_fetching_data']()}
-				{:else}
-					{i18n['scoria.text.no_data']()}
-				{/if}
-			{:catch e}
-				{#if dev}
-					error: {e}
-					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-					{@debug e}
-				{/if}
-				{i18n['scoria.text.error_fetching_data']()}
-			{/await}
-		</div>
-	</div>
-{/if}
-
+</script>
+
+<div
+	role="row"
+	class="datatable-row"
+	class:hoverable
+	class:alt={tableContext.alternateRowColours && odd}
+	class:highlighted
+>
+	{#if showHighlightButton}
+		<div
+			role="cell"
+			class="cell highlight-cell pinned-left"
+			style="left: 0px"
+		>
+			<ColumnHighlight
+				rowIndex={rowIndex ??
+					(() => {
+						if (dev) {
+							console.error(`column had invalid row index: ${rowIndex}`);
+						}
+						return -1;
+					})()}
+				{highlighted}
+				toggleHighlightedRow={() => {
+					tableContext.toggleHighlightedRow(row.original)?.catch(devCatch);
+				}}
+			/>
+		</div>
+	{/if}
+	{#each leftCells as cell, index (cell.column.id)}
+		<div
+			role="cell"
+			class="cell pinned-left"
+			style="left: {leftOffsets[index]}px; {cellWrapStyle(cell)}"
+		>
+			<TableColumn
+				{cell}
+				{expandedColumnDef}
+				{onExpandChange}
+			/>
+		</div>
+	{/each}
+	{#each centreCells as cell (cell.column.id)}
+		<div
+			role="cell"
+			class="cell"
+			style={cellWrapStyle(cell)}
+		>
+			<TableColumn
+				{cell}
+				{expandedColumnDef}
+				{onExpandChange}
+			/>
+		</div>
+	{/each}
+	{#each rightCells as cell, index (cell.column.id)}
+		<div
+			role="cell"
+			class="cell pinned-right"
+			style="right: {rightOffsets[index]}px; {cellWrapStyle(cell)}"
+		>
+			<TableColumn
+				{cell}
+				{expandedColumnDef}
+				{onExpandChange}
+			/>
+		</div>
+	{/each}
+</div>
+
+{#if expandedColumnDef}
+	<div
+		role="row"
+		class="datatable-row expand-row"
+	>
+		<div
+			role="cell"
+			class="cell expand-cell"
+		>
+			{#await innerDataPromise}
+				{i18n['scoria.text.loading_inline']()}
+			{:then data}
+				{#if data && data.length}
+					{@const options = expandedColumnDef.innerTableOptions}
+					{#if innerTableName}
+						{#key innerTableName}
+							<NestedTable
+								tableName={innerTableName}
+								{data}
+								columnDefWrapper={innerColumnDefs}
+								{options}
+								getUserId={tableContext.getUserId}
+							/>
+						{/key}
+					{:else}
+						<NestedTable
+							tableName={fallbackInnerTableName}
+							{data}
+							columnDefWrapper={innerColumnDefs}
+							{options}
+							getUserId={tableContext.getUserId}
+						/>
+					{/if}
+				{:else if !data}
+					{i18n['scoria.text.error_fetching_data']()}
+				{:else}
+					{i18n['scoria.text.no_data']()}
+				{/if}
+			{:catch e}
+				{#if dev}
+					error: {e}
+					<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+					{@debug e}
+				{/if}
+				{i18n['scoria.text.error_fetching_data']()}
+			{/await}
+		</div>
+	</div>
+{/if}
+
 <style>.datatable-row {
   display: grid;
   grid-template-columns: var(--cols);
@@ -314,4 +314,4 @@ function cellWrapStyle(cell) {
   padding: 0;
   display: block;
   width: 100%;
-}</style>
+}</style>