@lavalogic/scoria 0.40.33 → 0.40.34

package/dist/Components/Table/Body/Rows/ColumnHighlight.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
 >import Action from "../../../Action.svelte";
 import { Colour } from "../../../../scss/colours.js";
 import { Size } from "../../../../Types/Internal/Size.js";
@@ -15,30 +15,30 @@ const backgroundColour = $derived(highlighted ? Colour["$brand-primary"] : Colou
 // attributes when multiple tables share the page (workorder P2).
 const cellId = $derived(`${tableContext.tableName}-tagger-row-${rowIndex}`);
 const label = $derived(`${highlighted ? "Unhighlight" : "Highlight"} row ${(rowIndex + 1).toString()}`);
-</script>
-
-<!-- Toggle semantics: `aria-pressed` is communicated through the Action's label
-which reads either "Highlight row N" or "Unhighlight row N" depending on state. -->
-<div
-	id={cellId}
-	class="highlight-content"
->
-	<div class="wrapper">
-		<Action
-			{backgroundColour}
-			hoverBackgroundColour={Colour['$brand-dark']}
-			size={Size.FillWidth}
-			{label}
-			icon={{
-				name: 'nothing',
-			}}
-			onclick={() => {
-				toggleHighlightedRow();
-			}}
-		/>
-	</div>
-</div>
-
+</script>
+
+<!-- Toggle semantics: `aria-pressed` is communicated through the Action's label
+which reads either "Highlight row N" or "Unhighlight row N" depending on state. -->
+<div
+	id={cellId}
+	class="highlight-content"
+>
+	<div class="wrapper">
+		<Action
+			{backgroundColour}
+			hoverBackgroundColour={Colour['$brand-dark']}
+			size={Size.FillWidth}
+			{label}
+			icon={{
+				name: 'nothing',
+			}}
+			onclick={() => {
+				toggleHighlightedRow();
+			}}
+		/>
+	</div>
+</div>
+
 <style>.focusable,
 .checkbox-cell,
 .input-cell,
@@ -84,4 +84,4 @@ div.wrapper {
 
 .wrapper {
   overflow: hidden;
-}</style>
+}</style>

package/dist/Components/Table/Body/Rows/ColumnList.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
 >import { m as i18n } from "../../../../paraglide/messages.js";
 import { ColumnType } from "../../Types/Columns/ColumnType.js";
 import { TableContext } from "../../Types/Context/TableContext.svelte.js";
@@ -23,24 +23,24 @@ function onDrop(e) {
 		tableContext.reorderColumn(dropTarget);
 	}
 }
-</script>
-
-<ul
-	class="column-list"
-	ondrop={onDrop}
->
-	<!-- HACK this is used as an anchor for dragging rows to the top -->
-	<ColumnListRow columnDef={null} />
-
-	{#each visibleColumns as columnDef (columnDef.id)}
-		<ColumnListRow {columnDef} />
-	{:else}
-		{#if searchValue.length > 0}
-			<li class="empty-state">{i18n['scoria.text.no_columns_match']({ query: searchValue })}</li>
-		{/if}
-	{/each}
-</ul>
-
+</script>
+
+<ul
+	class="column-list"
+	ondrop={onDrop}
+>
+	<!-- HACK this is used as an anchor for dragging rows to the top -->
+	<ColumnListRow columnDef={null} />
+
+	{#each visibleColumns as columnDef (columnDef.id)}
+		<ColumnListRow {columnDef} />
+	{:else}
+		{#if searchValue.length > 0}
+			<li class="empty-state">{i18n['scoria.text.no_columns_match']({ query: searchValue })}</li>
+		{/if}
+	{/each}
+</ul>
+
 <style>ul {
   list-style: none;
   background-color: #ffffff;
@@ -60,4 +60,4 @@ function onDrop(e) {
   text-align: center;
   color: #8096a5;
   font-style: italic;
-}</style>
+}</style>

package/dist/Components/Table/Body/Rows/ColumnListRow.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
 >import Action from "../../../Action.svelte";
 import Checkbox from "../../../Checkbox.svelte";
 import ThreeStateRadio from "../../../ThreeStateRadio.svelte";
@@ -254,165 +254,165 @@ function onRowKeydown(e) {
 		tableContext.moveColumnTo(currentIndex, targetIndex);
 	});
 }
-</script>
-
-{#if columnDef}
-	{@const reorderLabel = typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}
-	<!--
-		The `<li>` is a structural container for the eye, pin selector,
-		label, and reorder buttons - none activated by clicking the `<li>`
-		itself. The `onkeydown` here only captures Alt+Arrow / Alt+Home /
-		Alt+End bubbling up from whichever inner control has focus to
-		drive the reorder shortcut; the `<li>` is not an interactive
-		widget. The structure is a free-form list of cards (not a tree
-		or listbox), so the right call is to silence the warning rather
-		than fake `role="treeitem"` / `role="option"`.
-	-->
-	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-	<li
-		bind:this={rowEl}
-		class="single-column"
-		class:targeted={isBeingTargeted}
-		class:draggable={tableContext.allowColumnReordering}
-		id="{tableContext.tableName}-column-settings-{columnDef.id}"
-		draggable={tableContext.allowColumnReordering}
-		onkeydown={onRowKeydown}
-		{@attach (node: HTMLLIElement) => {
-			// Capture-phase `mousedown` and `pointerdown` listeners. Both
-			// must fire BEFORE the synthetic click on the visibility /
-			// pin checkbox focuses its hidden input, because that focus
-			// triggers an auto-scroll to bring the 1x1px clip-pathed
-			// input into view. Capture phase runs before target / bubble,
-			// so this listener reliably snapshots the user's true
-			// pre-click scroll position.
-			//
-			// Both event types are wired because browsers differ on which
-			// fires first; the second is a cheap no-op snapshot.
-			const snapshot = (): void => {
-				snapshotScrollPosition();
-			};
-			node.addEventListener('pointerdown', snapshot, { capture: true });
-			node.addEventListener('mousedown', snapshot, { capture: true });
-			return () => {
-				node.removeEventListener('pointerdown', snapshot, { capture: true });
-				node.removeEventListener('mousedown', snapshot, { capture: true });
-			};
-		}}
-		ondragstart={() => {
-			tableContext.dragTarget = columnDef;
-		}}
-		ondragend={disableDragVisual}
-		ondragover={(e) => {
-			e.preventDefault();
-			if (tableContext.dragTarget?.id !== columnDef.id) {
-				isBeingTargeted = true;
-			}
-		}}
-		ondragleave={disableDragVisual}
-		ondrop={disableDragVisual}
-	>
-		<!--
-			`.row-main` stacks the column label on top and the visibility /
-			pin controls underneath so the label gets the full card width
-			to wrap into. `.reorder-buttons` is a sibling outside
-			`.row-main` so the up / down arrows stay vertically centred on
-			the right edge of the card.
-		-->
-		<div class="row-main">
-			<span
-				class="column-label"
-				title={typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}
-			>
-				{#if typeof columnDef.header === 'function'}
-					<!-- FIXME this needs testing -->
-					{@render columnDef.header()}
-				{:else}
-					{columnDef.header}
-				{/if}
-			</span>
-
-			<div class="row-controls">
-				<div class="visibility-wrapper">
-					<Checkbox
-						icon={{ name: 'assessment', size: Size.MediumSmall }}
-						size={Size.FillWidth}
-						id={`is-visible-${tableContext.tableName}-${columnDef.id}`}
-						value={tableContext.columnVisibility[columnDef.id] !== false}
-						onchange={onVisibilityChange}
-					/>
-				</div>
-
-				{#if tableContext.allowColumnReordering}
-					<!--
-						Tri-state pin selector. The three `Ternary` slots map to:
-						  False   -> pinned LEFT  (pin-left icon, leftmost)
-						  Neutral -> unpinned     (circle-cross icon, middle)
-						  True    -> pinned RIGHT (pin-right icon, rightmost)
-						Expand columns can never be pinned and disable the group.
-					-->
-					<div class="pin-selector">
-						<ThreeStateRadio
-							value={pinSide}
-							noLabel={i18n['scoria.action.pin_left']()}
-							neutralLabel={i18n['scoria.label.unpinned']()}
-							yesLabel={i18n['scoria.action.pin_right']()}
-							noIcon={{ name: 'pin-left', size: Size.MediumSmall }}
-							neutralIcon={{ name: 'circle-cross', size: Size.MediumSmall }}
-							yesIcon={{ name: 'pin-right', size: Size.MediumSmall }}
-							onchange={(next: Ternary) => {
-								setPin(next);
-							}}
-						/>
-					</div>
-				{/if}
-			</div>
-		</div>
-
-		{#if tableContext.allowColumnReordering}
-			<!--
-				Up / down "move" buttons make column reordering
-				discoverable without relying on the user noticing a
-				drag-cursor. The whole row remains draggable for power
-				users. Buttons disable at the list boundaries so a no-op
-				`moveColumnTo` is never dispatched.
-			-->
-			<div class="reorder-buttons">
-				<Action
-					icon={{ name: 'chevron-up', size: Size.Medium }}
-					size={Size.Medium}
-					paddingSize={Size.Small}
-					label={i18n['scoria.action.move_column_up']({ name: reorderLabel })}
-					disabled={isAtTop}
-					onclick={moveUp}
-				/>
-				<Action
-					icon={{ name: 'chevron-down', size: Size.Medium }}
-					size={Size.Medium}
-					paddingSize={Size.Small}
-					label={i18n['scoria.action.move_column_down']({ name: reorderLabel })}
-					disabled={isAtBottom}
-					onclick={moveDown}
-				/>
-			</div>
-		{/if}
-	</li>
-{:else}
-	<li
-		id="{tableContext.tableName}-column-settings-top-anchor"
-		class="single-column anchor"
-		class:targeted={isBeingTargeted}
-		ondragover={(e) => {
-			e.preventDefault();
-
-			if (tableContext.dragTarget?.id !== undefined) {
-				isBeingTargeted = true;
-			}
-		}}
-		ondragleave={disableDragVisual}
-		ondrop={disableDragVisual}
-	></li>
-{/if}
-
+</script>
+
+{#if columnDef}
+	{@const reorderLabel = typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}
+	<!--
+		The `<li>` is a structural container for the eye, pin selector,
+		label, and reorder buttons - none activated by clicking the `<li>`
+		itself. The `onkeydown` here only captures Alt+Arrow / Alt+Home /
+		Alt+End bubbling up from whichever inner control has focus to
+		drive the reorder shortcut; the `<li>` is not an interactive
+		widget. The structure is a free-form list of cards (not a tree
+		or listbox), so the right call is to silence the warning rather
+		than fake `role="treeitem"` / `role="option"`.
+	-->
+	<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+	<li
+		bind:this={rowEl}
+		class="single-column"
+		class:targeted={isBeingTargeted}
+		class:draggable={tableContext.allowColumnReordering}
+		id="{tableContext.tableName}-column-settings-{columnDef.id}"
+		draggable={tableContext.allowColumnReordering}
+		onkeydown={onRowKeydown}
+		{@attach (node: HTMLLIElement) => {
+			// Capture-phase `mousedown` and `pointerdown` listeners. Both
+			// must fire BEFORE the synthetic click on the visibility /
+			// pin checkbox focuses its hidden input, because that focus
+			// triggers an auto-scroll to bring the 1x1px clip-pathed
+			// input into view. Capture phase runs before target / bubble,
+			// so this listener reliably snapshots the user's true
+			// pre-click scroll position.
+			//
+			// Both event types are wired because browsers differ on which
+			// fires first; the second is a cheap no-op snapshot.
+			const snapshot = (): void => {
+				snapshotScrollPosition();
+			};
+			node.addEventListener('pointerdown', snapshot, { capture: true });
+			node.addEventListener('mousedown', snapshot, { capture: true });
+			return () => {
+				node.removeEventListener('pointerdown', snapshot, { capture: true });
+				node.removeEventListener('mousedown', snapshot, { capture: true });
+			};
+		}}
+		ondragstart={() => {
+			tableContext.dragTarget = columnDef;
+		}}
+		ondragend={disableDragVisual}
+		ondragover={(e) => {
+			e.preventDefault();
+			if (tableContext.dragTarget?.id !== columnDef.id) {
+				isBeingTargeted = true;
+			}
+		}}
+		ondragleave={disableDragVisual}
+		ondrop={disableDragVisual}
+	>
+		<!--
+			`.row-main` stacks the column label on top and the visibility /
+			pin controls underneath so the label gets the full card width
+			to wrap into. `.reorder-buttons` is a sibling outside
+			`.row-main` so the up / down arrows stay vertically centred on
+			the right edge of the card.
+		-->
+		<div class="row-main">
+			<span
+				class="column-label"
+				title={typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}
+			>
+				{#if typeof columnDef.header === 'function'}
+					<!-- FIXME this needs testing -->
+					{@render columnDef.header()}
+				{:else}
+					{columnDef.header}
+				{/if}
+			</span>
+
+			<div class="row-controls">
+				<div class="visibility-wrapper">
+					<Checkbox
+						icon={{ name: 'assessment', size: Size.MediumSmall }}
+						size={Size.FillWidth}
+						id={`is-visible-${tableContext.tableName}-${columnDef.id}`}
+						value={tableContext.columnVisibility[columnDef.id] !== false}
+						onchange={onVisibilityChange}
+					/>
+				</div>
+
+				{#if tableContext.allowColumnReordering}
+					<!--
+						Tri-state pin selector. The three `Ternary` slots map to:
+						  False   -> pinned LEFT  (pin-left icon, leftmost)
+						  Neutral -> unpinned     (circle-cross icon, middle)
+						  True    -> pinned RIGHT (pin-right icon, rightmost)
+						Expand columns can never be pinned and disable the group.
+					-->
+					<div class="pin-selector">
+						<ThreeStateRadio
+							value={pinSide}
+							noLabel={i18n['scoria.action.pin_left']()}
+							neutralLabel={i18n['scoria.label.unpinned']()}
+							yesLabel={i18n['scoria.action.pin_right']()}
+							noIcon={{ name: 'pin-left', size: Size.MediumSmall }}
+							neutralIcon={{ name: 'circle-cross', size: Size.MediumSmall }}
+							yesIcon={{ name: 'pin-right', size: Size.MediumSmall }}
+							onchange={(next: Ternary) => {
+								setPin(next);
+							}}
+						/>
+					</div>
+				{/if}
+			</div>
+		</div>
+
+		{#if tableContext.allowColumnReordering}
+			<!--
+				Up / down "move" buttons make column reordering
+				discoverable without relying on the user noticing a
+				drag-cursor. The whole row remains draggable for power
+				users. Buttons disable at the list boundaries so a no-op
+				`moveColumnTo` is never dispatched.
+			-->
+			<div class="reorder-buttons">
+				<Action
+					icon={{ name: 'chevron-up', size: Size.Medium }}
+					size={Size.Medium}
+					paddingSize={Size.Small}
+					label={i18n['scoria.action.move_column_up']({ name: reorderLabel })}
+					disabled={isAtTop}
+					onclick={moveUp}
+				/>
+				<Action
+					icon={{ name: 'chevron-down', size: Size.Medium }}
+					size={Size.Medium}
+					paddingSize={Size.Small}
+					label={i18n['scoria.action.move_column_down']({ name: reorderLabel })}
+					disabled={isAtBottom}
+					onclick={moveDown}
+				/>
+			</div>
+		{/if}
+	</li>
+{:else}
+	<li
+		id="{tableContext.tableName}-column-settings-top-anchor"
+		class="single-column anchor"
+		class:targeted={isBeingTargeted}
+		ondragover={(e) => {
+			e.preventDefault();
+
+			if (tableContext.dragTarget?.id !== undefined) {
+				isBeingTargeted = true;
+			}
+		}}
+		ondragleave={disableDragVisual}
+		ondrop={disableDragVisual}
+	></li>
+{/if}
+
 <style>li {
   box-sizing: border-box;
 }
@@ -523,4 +523,4 @@ li.single-column:not(.anchor):last-of-type {
   --colour: #1f81a0;
   color: #1f81a0;
   background-color: transparent;
-}</style>
+}</style>

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

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
 >import { AccessorDef } from "../../../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js";
 import FocusableImmutableCell from "./FocusableImmutableCell.svelte";
 import TableCheckbox from "./TableCheckbox.svelte";
@@ -26,11 +26,11 @@ const cellTypes = Object.freeze({
 	Checkbox: TableCheckbox,
 	Text: TableTextInput
 });
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object"
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object"
 >/** Single cell to render for the supplied {@link TableCell}. The accessor type discriminator is read off `cell.column.columnDef`. */
 const { cell } = $props();
 const CurrentComponent = $derived(getAppropriateAccessorDef(cell.column.columnDef));
@@ -47,6 +47,6 @@ function getAppropriateAccessorDef(columnDef) {
 	}
 	return FocusableImmutableCell;
 }
-</script>
-
-<CurrentComponent {cell} />
+</script>
+
+<CurrentComponent {cell} />