@lavalogic/scoria 0.40.13 → 0.40.15

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

@@ -1,126 +1,113 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, FilterValueType, RowIdType extends Primitive"
->
-	import Bubble from '../../../../Bubble.svelte';
-	import { BubbleDef } from '../../../Types/Columns/Definitions/Display/BubbleDef.svelte.js';
-	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import { type Primitive } from '../../../Types/Context/TableInitOptions.js';
-	import type { 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';
-	import type { BubbleCellProps } from './BubbleCellProps.js';
-
-	const { cell }: BubbleCellProps<T, FilterValueType> = $props();
-
-	/**
-	 * Awaited or sync array of string labels to render as Bubble chips.
-	 * The cast is required because `BubbleDef` does not yet carry a
-	 * narrowed `TValue` generic and the dispatch passes the loose
-	 * `TableCell` rather than `BubbleTableCell<T, FilterValueType>`.
-	 */
-	const values = $derived(cell.getValue()) as Array<string> | Promise<Array<string>>;
-
-	const tableContext = getContext<TableContext<T, RowIdType>>(TableContext.identifier);
-
-	const focusDetails: TableFocusDetails<T, RowIdType> = $derived(
-		tableContext._focus.getFocusDetailsFor(cell)
-	);
-
-	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 -->
-<!-- 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);
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, FilterValueType, RowIdType extends Primitive"
+>import Bubble from "../../../../Bubble.svelte";
+import { BubbleDef } from "../../../Types/Columns/Definitions/Display/BubbleDef.svelte.js";
+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";
+const { cell } = $props();
+/**
+* Awaited or sync array of string labels to render as Bubble chips.
+* The cast is required because `BubbleDef` does not yet carry a
+* narrowed `TValue` generic and the dispatch passes the loose
+* `TableCell` rather than `BubbleTableCell<T, FilterValueType>`.
+*/
+const values = $derived(cell.getValue());
+const tableContext = getContext(TableContext.identifier);
+const focusDetails = $derived(tableContext._focus.getFocusDetailsFor(cell));
+let 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;
 		}
-	}}
-	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}
-				>+{overflowCount} more</span>
-			{/if}
-		{/await}
-	</div>
-</div>
-
+	}).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}
+				>+{overflowCount} more</span>
+			{/if}
+		{/await}
+	</div>
+</div>
+
 <style>.focusable,
 .checkbox-cell,
 .input-cell,
@@ -218,4 +205,4 @@ div.bubble-parent {
   font-weight: 500;
   white-space: nowrap;
   cursor: default;
-}</style>
+}</style>

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

@@ -1,165 +1,139 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, R extends object,FilterValueType, IdType extends Primitive"
->
-	import Action from '../../../../Action.svelte';
-	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import type { Primitive } from '../../../Types/Context/TableInitOptions.js';
-	import type { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { devCatch, isValidityTuple } from '../../../../../Helpers/Helpers.svelte.js';
-	import { ColourSet } from '../../../../../scss/colours.js';
-	import { Size } from '../../../../../Types/Internal/Size.js';
-	import { Validity } from '../../../../../Types/Internal/Validity.js';
-	import { getContext } from 'svelte';
-	import type { ExpandCellProps } from './ExpandCellProps.js';
-
-	const {
-		cell,
-		expandedColumnDef,
-		onExpandChange,
-	}: ExpandCellProps<T, R, IdType, FilterValueType> = $props();
-
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-	const focusDetails: TableFocusDetails<T, IdType> = $derived(
-		tableContext._focus.getFocusDetailsFor(cell)
-	);
-
-	const enabled: boolean | Promise<boolean> = $derived(
-		cell.column.columnDef.isEnabled(cell.row.original, cell.row.originalIndex)
-	);
-
-	// Per-row toggle visibility. When `isVisible` resolves false the toggle is
-	// omitted entirely (rather than disabled). Sync booleans are used directly
-	// so non-visible rows never flash the icon; promises resolve into state.
-	const visibleRaw: boolean | Promise<boolean> = $derived(
-		cell.column.columnDef.isVisible
-			? cell.column.columnDef.isVisible(cell.row.original, cell.row.originalIndex)
-			: true
-	);
-	let visibleAsyncResolved = $state(true);
-	let visibleCounter = 0;
-	$effect(() => {
-		const raw = visibleRaw;
-		if (typeof raw === 'boolean') {
-			return;
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, R extends object,FilterValueType, IdType extends Primitive"
+>import Action from "../../../../Action.svelte";
+import { TableContext } from "../../../Types/Context/TableContext.svelte.js";
+import { devCatch, isValidityTuple } from "../../../../../Helpers/Helpers.svelte.js";
+import { ColourSet } from "../../../../../scss/colours.js";
+import { Size } from "../../../../../Types/Internal/Size.js";
+import { Validity } from "../../../../../Types/Internal/Validity.js";
+import { getContext } from "svelte";
+const { cell, expandedColumnDef, onExpandChange } = $props();
+const tableContext = getContext(TableContext.identifier);
+const focusDetails = $derived(tableContext._focus.getFocusDetailsFor(cell));
+const enabled = $derived(cell.column.columnDef.isEnabled(cell.row.original, cell.row.originalIndex));
+// Per-row toggle visibility. When `isVisible` resolves false the toggle is
+// omitted entirely (rather than disabled). Sync booleans are used directly
+// so non-visible rows never flash the icon; promises resolve into state.
+const visibleRaw = $derived(cell.column.columnDef.isVisible ? cell.column.columnDef.isVisible(cell.row.original, cell.row.originalIndex) : true);
+let visibleAsyncResolved = $state(true);
+let visibleCounter = 0;
+$effect(() => {
+	const raw = visibleRaw;
+	if (typeof raw === "boolean") {
+		return;
+	}
+	const local = visibleCounter = visibleCounter + 1;
+	raw.then((v) => {
+		if (visibleCounter === local) {
+			visibleAsyncResolved = v;
 		}
-		const local = (visibleCounter = visibleCounter + 1);
-		raw
-			.then((v) => {
-				if (visibleCounter === local) {
-					visibleAsyncResolved = v;
-				}
-			})
-			.catch(() => {
-				if (visibleCounter === local) {
-					visibleAsyncResolved = false;
-				}
-			});
-	});
-	const visible = $derived(typeof visibleRaw === 'boolean' ? visibleRaw : visibleAsyncResolved);
-
-	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 -->
-<!-- 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);
-			}
+	}).catch(() => {
+		if (visibleCounter === local) {
+			visibleAsyncResolved = false;
 		}
-	}}
-	onmouseover={() => {
-		if (tableContext.isMousingDown) {
-			tableContext.setFocusEnd(focusDetails.coordinates);
+	});
+});
+const visible = $derived(typeof visibleRaw === "boolean" ? visibleRaw : visibleAsyncResolved);
+let 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;
 		}
-	}}
-	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 ? 'Open Related Table' : '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}
-
+	}).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 ? 'Open Related Table' : '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,
@@ -242,4 +216,4 @@ div.slot-wrapper {
 .noninteractive {
   display: contents;
   user-select: none;
-}</style>
+}</style>