@lavalogic/scoria 0.40.33 → 0.40.34

package/dist/Components/Table/Body/Rows/Columns/ActionsCell.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 Portal from "../../../../Portal.svelte";
 import { TableContext } from "../../../Types/Context/TableContext.svelte.js";
@@ -13,11 +13,11 @@ import { Size } from "../../../../../Types/Internal/Size.js";
 import { Validity } from "../../../../../Types/Internal/Validity.js";
 import { getContext, untrack } from "svelte";
 import TableAction from "./TableAction.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();
 const value = $derived(cell.getValue());
 const tableContext = getContext(TableContext.identifier);
@@ -54,115 +54,115 @@ $effect(() => {
 		}
 	}).catch(devCatch);
 });
-</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={hasValue ? 0 : undefined}
-	class="focusable"
-	class:multifocus={hasValue && focusDetails.isMultiFocused}
-	class:multifocus-start={hasValue && focusDetails.isMultiFocusStart}
-	class:left={edge === MultiFocusEdge.Left}
-	class:top-left={edge === MultiFocusEdge.TopLeft}
-	class:top={edge === MultiFocusEdge.Top}
-	class:top-right={edge === MultiFocusEdge.TopRight}
-	class:right={edge === MultiFocusEdge.Right}
-	class:bottom-right={edge === MultiFocusEdge.BottomRight}
-	class:bottom={edge === MultiFocusEdge.Bottom}
-	class:bottom-left={edge === MultiFocusEdge.BottomLeft}
-	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);
-	}}
->
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
-		class="slot-wrapper"
-		class:multifocus={focusDetails.isMultiFocused}
-		class:multifocus-start={focusDetails.isMultiFocusStart}
-		bind:this={cellRef}
-		onmousedown={(e) => {
-			// Suppress click side effects that jump the table horizontally
-			// on Action clicks:
-			//   1. `preventDefault()` cancels the default mousedown ->
-			//      focus on the inner `<button>`, which would otherwise
-			//      call `scrollIntoView` against the button's position
-			//      at the far right (the Actions column is sticky-pinned
-			//      right).
-			//   2. `stopPropagation()` keeps the event out of the outer
-			//      `.focusable` cell handler, which would otherwise call
-			//      `tableContext.startFocus(...)` and trigger another
-			//      `scrollIntoView` via Table.svelte's focusStart effect.
-			// The Action's `onclick` still fires (click is dispatched on
-			// mouseup independent of mousedown), so the popup toggle works.
-			e.preventDefault();
-			e.stopPropagation();
-		}}
-	>
-		<!-- TODO {isMultiFocusStart} -->
-		<Action
-			style={focusDetails.outline}
-			border={false}
-			size={Size.FillWidth}
-			icon={{ name: 'ellipsis', size: Size.Medium, colour: Colour['$brand-primary'] }}
-			colourSet={ColourSet.Auxiliary}
-			onclick={() => {
-				if (tableContext.shownActionsPopup === thisPopup) {
-					tableContext.shownActionsPopup = undefined;
-				} else {
-					tableContext.shownActionsPopup = thisPopup;
-				}
-			}}
-		/>
-	</div>
-	{#if thisPopupIsVisibile}
-		{@const awaitedActions = asyncMap<TableActionButton<T>, [TableActionButton<T>, string]>(
-			actions,
-			async (item) => {
-				return [item, await item.getLabel(cell.row.original, cell.row.visibleIndex)];
-			}
-		)}
-		{#await awaitedActions then actions}
-			<Portal>
-				<div
-					class="popup"
-					style="--y: {y}px; --x: {x}px;"
-				>
-					<div class="action-container">
-						{#each actions as [action, label] (label)}
-							<TableAction
-								{action}
-								{cell}
-							/>
-						{/each}
-					</div>
-				</div>
-			</Portal>
-		{/await}
-	{/if}
-</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={hasValue ? 0 : undefined}
+	class="focusable"
+	class:multifocus={hasValue && focusDetails.isMultiFocused}
+	class:multifocus-start={hasValue && focusDetails.isMultiFocusStart}
+	class:left={edge === MultiFocusEdge.Left}
+	class:top-left={edge === MultiFocusEdge.TopLeft}
+	class:top={edge === MultiFocusEdge.Top}
+	class:top-right={edge === MultiFocusEdge.TopRight}
+	class:right={edge === MultiFocusEdge.Right}
+	class:bottom-right={edge === MultiFocusEdge.BottomRight}
+	class:bottom={edge === MultiFocusEdge.Bottom}
+	class:bottom-left={edge === MultiFocusEdge.BottomLeft}
+	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);
+	}}
+>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		class="slot-wrapper"
+		class:multifocus={focusDetails.isMultiFocused}
+		class:multifocus-start={focusDetails.isMultiFocusStart}
+		bind:this={cellRef}
+		onmousedown={(e) => {
+			// Suppress click side effects that jump the table horizontally
+			// on Action clicks:
+			//   1. `preventDefault()` cancels the default mousedown ->
+			//      focus on the inner `<button>`, which would otherwise
+			//      call `scrollIntoView` against the button's position
+			//      at the far right (the Actions column is sticky-pinned
+			//      right).
+			//   2. `stopPropagation()` keeps the event out of the outer
+			//      `.focusable` cell handler, which would otherwise call
+			//      `tableContext.startFocus(...)` and trigger another
+			//      `scrollIntoView` via Table.svelte's focusStart effect.
+			// The Action's `onclick` still fires (click is dispatched on
+			// mouseup independent of mousedown), so the popup toggle works.
+			e.preventDefault();
+			e.stopPropagation();
+		}}
+	>
+		<!-- TODO {isMultiFocusStart} -->
+		<Action
+			style={focusDetails.outline}
+			border={false}
+			size={Size.FillWidth}
+			icon={{ name: 'ellipsis', size: Size.Medium, colour: Colour['$brand-primary'] }}
+			colourSet={ColourSet.Auxiliary}
+			onclick={() => {
+				if (tableContext.shownActionsPopup === thisPopup) {
+					tableContext.shownActionsPopup = undefined;
+				} else {
+					tableContext.shownActionsPopup = thisPopup;
+				}
+			}}
+		/>
+	</div>
+	{#if thisPopupIsVisibile}
+		{@const awaitedActions = asyncMap<TableActionButton<T>, [TableActionButton<T>, string]>(
+			actions,
+			async (item) => {
+				return [item, await item.getLabel(cell.row.original, cell.row.visibleIndex)];
+			}
+		)}
+		{#await awaitedActions then actions}
+			<Portal>
+				<div
+					class="popup"
+					style="--y: {y}px; --x: {x}px;"
+				>
+					<div class="action-container">
+						{#each actions as [action, label] (label)}
+							<TableAction
+								{action}
+								{cell}
+							/>
+						{/each}
+					</div>
+				</div>
+			</Portal>
+		{/await}
+	{/if}
+</div>
+
 <style>.focusable,
 .checkbox-cell,
 .input-cell,
@@ -313,4 +313,4 @@ div.slot-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
-}</style>
+}</style>

package/dist/Components/Table/Body/Rows/Columns/BubbleCell.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 Bubble from "../../../../Bubble.svelte";
 import { BubbleDef } from "../../../Types/Columns/Definitions/Display/BubbleDef.svelte.js";
@@ -34,81 +34,81 @@ $effect(() => {
 		}
 	}).catch(devCatch);
 });
-</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">
-		{#await values then values}
-			<!-- `maxBubbles` (default 3) caps how many pills render inline;
-			     anything beyond gets a single `"+N more"` overflow chip with
-			     the hidden labels as a hover tooltip. Key combines index and
-			     value because duplicate labels would otherwise collapse and
-			     reordering with identical labels would force unrelated
-			     bubbles to swap. -->
-			{@const maxBubbles = (cell.column.columnDef as BubbleDef<T>).maxBubbles ?? 3}
-			{@const visibleBubbles = values.slice(0, maxBubbles)}
-			{@const overflowCount = Math.max(0, values.length - maxBubbles)}
-			{@const overflowTitle = values.slice(maxBubbles).join(', ')}
-			{#each visibleBubbles as value, index (`${index}:${value}`)}
-				{@const colourPromise = (cell.column.columnDef as BubbleDef<T>).getColour?.(
-					cell.row.original,
-					cell.row.originalIndex,
-					value
-				)}
-
-				{#if colourPromise == undefined}
-					<Bubble {value} />
-				{:else}
-					{#await colourPromise then colour}
-						<Bubble
-							{value}
-							colours={colour ?? undefined}
-						/>
-					{/await}
-				{/if}
-			{/each}
-			{#if overflowCount > 0}
-				<span
-					class="bubble-overflow"
-					title={overflowTitle}
-				>{i18n['scoria.text.bubble_overflow']({ count: overflowCount })}</span>
-			{/if}
-		{/await}
-	</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">
+		{#await values then values}
+			<!-- `maxBubbles` (default 3) caps how many pills render inline;
+			     anything beyond gets a single `"+N more"` overflow chip with
+			     the hidden labels as a hover tooltip. Key combines index and
+			     value because duplicate labels would otherwise collapse and
+			     reordering with identical labels would force unrelated
+			     bubbles to swap. -->
+			{@const maxBubbles = (cell.column.columnDef as BubbleDef<T>).maxBubbles ?? 3}
+			{@const visibleBubbles = values.slice(0, maxBubbles)}
+			{@const overflowCount = Math.max(0, values.length - maxBubbles)}
+			{@const overflowTitle = values.slice(maxBubbles).join(', ')}
+			{#each visibleBubbles as value, index (`${index}:${value}`)}
+				{@const colourPromise = (cell.column.columnDef as BubbleDef<T>).getColour?.(
+					cell.row.original,
+					cell.row.originalIndex,
+					value
+				)}
+
+				{#if colourPromise == undefined}
+					<Bubble {value} />
+				{:else}
+					{#await colourPromise then colour}
+						<Bubble
+							{value}
+							colours={colour ?? undefined}
+						/>
+					{/await}
+				{/if}
+			{/each}
+			{#if overflowCount > 0}
+				<span
+					class="bubble-overflow"
+					title={overflowTitle}
+				>{i18n['scoria.text.bubble_overflow']({ count: overflowCount })}</span>
+			{/if}
+		{/await}
+	</div>
+</div>
+
 <style>.focusable,
 .checkbox-cell,
 .input-cell,
@@ -206,4 +206,4 @@ div.bubble-parent {
   font-weight: 500;
   white-space: nowrap;
   cursor: default;
-}</style>
+}</style>

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

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, R extends object,FilterValueType, IdType extends Primitive"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, R extends object,FilterValueType, IdType extends Primitive"
 >import { m as i18n } from "../../../../../paraglide/messages.js";
 import Action from "../../../../Action.svelte";
 import { TableContext } from "../../../Types/Context/TableContext.svelte.js";
@@ -51,92 +51,92 @@ $effect(() => {
 		}
 	}).catch(devCatch);
 });
-</script>
-
-<!-- svelte-ignore a11y_mouse_events_have_key_events -->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class:info={validity == Validity.Info}
-	class:success={validity == Validity.Valid}
-	class:warning={validity == Validity.Warning}
-	class:error={validity == Validity.Invalid}
-	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}
-	>
-		{#if visible}
-			{#await enabled}
-				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-				{@render action(false)}
-			{:then enabled}
-				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-				{@render action(enabled)}
-			{/await}
-		{/if}
-	</div>
-</div>
-
-{#snippet action(enabled: boolean)}
-	<div class="noninteractive">
-		<Action
-			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
-			style={focusDetails.outline}
-			disabled={!enabled}
-			border={false}
-			label={cell.column.columnDef.onActivate
-				? i18n['scoria.action.open_related_table']()
-				: i18n['scoria.action.expand_nested_table']()}
-			size={Size.FillWidth}
-			icon={{
-				name:
-					!cell.column.columnDef.onActivate &&
-					expandedColumnDef?.id === cell.column.columnDef.id
-						? 'minus'
-						: 'plus',
-				size: Size.Medium,
-			}}
-			colourSet={expandedColumnDef?.id === cell.column.columnDef.id && !cell.column.columnDef.onActivate
-				? ColourSet.Primary
-				: ColourSet.Auxiliary}
-			onclick={(e: MouseEvent) => {
-				// FIXME why is this required? svelte bug?
-				e.stopImmediatePropagation();
-				// Navigate-instead-of-expand: when the column carries an
-				// `onActivate`, drive the consumer's drill-down rather than
-				// mounting an inner table.
-				const onActivate = cell.column.columnDef.onActivate;
-				if (onActivate) {
-					void onActivate(cell.row.original);
-				} else {
-					onExpandChange(cell.column.columnDef);
-				}
-			}}
-		/>
-	</div>
-{/snippet}
-
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class:info={validity == Validity.Info}
+	class:success={validity == Validity.Valid}
+	class:warning={validity == Validity.Warning}
+	class:error={validity == Validity.Invalid}
+	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}
+	>
+		{#if visible}
+			{#await enabled}
+				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+				{@render action(false)}
+			{:then enabled}
+				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+				{@render action(enabled)}
+			{/await}
+		{/if}
+	</div>
+</div>
+
+{#snippet action(enabled: boolean)}
+	<div class="noninteractive">
+		<Action
+			id={`${tableContext.tableName}-cell-${cell.row.visibleIndex}-${cell.column.id}`}
+			style={focusDetails.outline}
+			disabled={!enabled}
+			border={false}
+			label={cell.column.columnDef.onActivate
+				? i18n['scoria.action.open_related_table']()
+				: i18n['scoria.action.expand_nested_table']()}
+			size={Size.FillWidth}
+			icon={{
+				name:
+					!cell.column.columnDef.onActivate &&
+					expandedColumnDef?.id === cell.column.columnDef.id
+						? 'minus'
+						: 'plus',
+				size: Size.Medium,
+			}}
+			colourSet={expandedColumnDef?.id === cell.column.columnDef.id && !cell.column.columnDef.onActivate
+				? ColourSet.Primary
+				: ColourSet.Auxiliary}
+			onclick={(e: MouseEvent) => {
+				// FIXME why is this required? svelte bug?
+				e.stopImmediatePropagation();
+				// Navigate-instead-of-expand: when the column carries an
+				// `onActivate`, drive the consumer's drill-down rather than
+				// mounting an inner table.
+				const onActivate = cell.column.columnDef.onActivate;
+				if (onActivate) {
+					void onActivate(cell.row.original);
+				} else {
+					onExpandChange(cell.column.columnDef);
+				}
+			}}
+		/>
+	</div>
+{/snippet}
+
 <style>.focusable,
 .checkbox-cell,
 .input-cell,
@@ -218,4 +218,4 @@ div.slot-wrapper {
 .noninteractive {
   display: contents;
   user-select: none;
-}</style>
+}</style>