@lavalogic/scoria 0.33.0 → 0.35.0

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

@@ -1,182 +1,182 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import Action from '../../../../Action.svelte';
-	import Portal from '../../../../Portal.svelte';
-	import type { TableActionButton } from '../../../Types/Columns/TableActionButton.js';
-	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import { MultiFocusEdge } from '../../../Types/Focus/MultiFocusEdge.js';
-	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
-	import { asyncMap, devCatch, isValidityTuple, refWrapper } from '../../../../../Helpers/Helpers.svelte.js';
-	import { Colour, ColourSet } from '../../../../../scss/colours.js';
-	import { Size } from '../../../../../Types/Internal/Size.js';
-	import { Validity } from '../../../../../Types/Internal/Validity.js';
-	import { getContext, untrack } from 'svelte';
-	import type { ActionsCellProps } from './ActionsCellProps.js';
-	import TableAction from './TableAction.svelte';
-
-	export let shownPopup = refWrapper<symbol | undefined>(undefined);
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object,FilterValueType"
->
-	const { cell }: ActionsCellProps<T, FilterValueType> = $props();
-
-	const value = $derived(cell.getValue());
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const actions: Array<TableActionButton<T>> = $derived(cell.column.columnDef.actions);
-
-	const thisPopup = $state(Symbol());
-	const thisPopupIsVisibile = $derived(thisPopup === shownPopup.value);
-	const hasValue: boolean = $derived(value !== undefined);
-	const edge: MultiFocusEdge | undefined = $state();
-	const focusDetails: TableFocusDetails<T, never> = $derived(
-		new TableFocusDetails(cell, tableContext)
-	);
-
-	let cellRef: HTMLDivElement | undefined = $state();
-
-	let x = $state(0);
-	let y = $state(0);
-	$effect.pre(() => {
-		if (thisPopupIsVisibile && cellRef) {
-			const rect = cellRef.getBoundingClientRect();
-			untrack(() => {
-				const totalOffsetX = -6;
-				// (props.offsetX ?? 0) +
-				// (props.arrow === Side.Top || props.arrow === Side.Bottom
-				// 	? props.rect.width / 2
-				// 	: props.arrow === Side.Right
-				// 		? -6 //  arrow width
-				// 		: props.rect.width + 6); // arrow width
-
-				const totalOffsetY = rect.height / 2;
-				// (props.offsetY ?? 0) +
-				// (props.arrow === Side.Left || props.arrow === Side.Right
-				// 	? props.rect.height / 2
-				// 	: props.arrow === Side.Top
-				// 		? props.rect.height
-				// 		: 0);
-
-				x = rect.x + totalOffsetX;
-				y = rect.y + totalOffsetY;
-			});
-		}
-	});
-
-	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 -->
-<td
-	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);
-	}}
->
-	<div
-		class="slot-wrapper"
-		class:multifocus={focusDetails.isMultiFocused}
-		class:multifocus-start={focusDetails.isMultiFocusStart}
-		bind:this={cellRef}
-	>
-		<!-- 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 (shownPopup.value === thisPopup) {
-					shownPopup.value = undefined;
-				} else {
-					shownPopup.value = 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}
-</td>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import Action from '../../../../Action.svelte';
+	import Portal from '../../../../Portal.svelte';
+	import type { TableActionButton } from '../../../Types/Columns/TableActionButton.js';
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import { MultiFocusEdge } from '../../../Types/Focus/MultiFocusEdge.js';
+	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import { asyncMap, devCatch, isValidityTuple, refWrapper } from '../../../../../Helpers/Helpers.svelte.js';
+	import { Colour, ColourSet } from '../../../../../scss/colours.js';
+	import { Size } from '../../../../../Types/Internal/Size.js';
+	import { Validity } from '../../../../../Types/Internal/Validity.js';
+	import { getContext, untrack } from 'svelte';
+	import type { ActionsCellProps } from './ActionsCellProps.js';
+	import TableAction from './TableAction.svelte';
+
+	export let shownPopup = refWrapper<symbol | undefined>(undefined);
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object,FilterValueType"
+>
+	const { cell }: ActionsCellProps<T, FilterValueType> = $props();
+
+	const value = $derived(cell.getValue());
+
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+
+	const actions: Array<TableActionButton<T>> = $derived(cell.column.columnDef.actions);
+
+	const thisPopup = $state(Symbol());
+	const thisPopupIsVisibile = $derived(thisPopup === shownPopup.value);
+	const hasValue: boolean = $derived(value !== undefined);
+	const edge: MultiFocusEdge | undefined = $state();
+	const focusDetails: TableFocusDetails<T, never> = $derived(
+		new TableFocusDetails(cell, tableContext)
+	);
+
+	let cellRef: HTMLDivElement | undefined = $state();
+
+	let x = $state(0);
+	let y = $state(0);
+	$effect.pre(() => {
+		if (thisPopupIsVisibile && cellRef) {
+			const rect = cellRef.getBoundingClientRect();
+			untrack(() => {
+				const totalOffsetX = -6;
+				// (props.offsetX ?? 0) +
+				// (props.arrow === Side.Top || props.arrow === Side.Bottom
+				// 	? props.rect.width / 2
+				// 	: props.arrow === Side.Right
+				// 		? -6 //  arrow width
+				// 		: props.rect.width + 6); // arrow width
+
+				const totalOffsetY = rect.height / 2;
+				// (props.offsetY ?? 0) +
+				// (props.arrow === Side.Left || props.arrow === Side.Right
+				// 	? props.rect.height / 2
+				// 	: props.arrow === Side.Top
+				// 		? props.rect.height
+				// 		: 0);
+
+				x = rect.x + totalOffsetX;
+				y = rect.y + totalOffsetY;
+			});
+		}
+	});
+
+	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 -->
+<td
+	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);
+	}}
+>
+	<div
+		class="slot-wrapper"
+		class:multifocus={focusDetails.isMultiFocused}
+		class:multifocus-start={focusDetails.isMultiFocusStart}
+		bind:this={cellRef}
+	>
+		<!-- 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 (shownPopup.value === thisPopup) {
+					shownPopup.value = undefined;
+				} else {
+					shownPopup.value = 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}
+</td>
+
 <style>td {
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
@@ -302,4 +302,4 @@ div.slot-wrapper {
   display: flex;
   align-items: center;
   justify-content: center;
-}</style>
+}</style>

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

@@ -1,104 +1,104 @@
-<svelte:options runes />
-
-<!-- TODO editable version of this should contain a multi select -->
-<script
-	lang="ts"
-	generics="T extends object,FilterValueType"
->
-	import Bubble from '../../../../Bubble.svelte';
-	import { BubbleDef } from '../../../Types/Columns/Definitions/Display/BubbleDef.svelte.js';
-	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
-	import { 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 { FocusableImmutableCellProps } from './FocusableImmutableCellProps.js';
-
-	const { cell }: FocusableImmutableCellProps<T, FilterValueType> = $props();
-
-	const values = $derived(cell.getValue()) as Array<string> | Promise<Array<string>>;
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const focusDetails: TableFocusDetails<T, never> = $derived(
-		new TableFocusDetails(cell, tableContext)
-	);
-
-	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 -->
-<td
-	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}
-			<!-- eslint-disable-next-line svelte/require-each-key -->
-			{#each values as 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}
-						/>
-					{/await}
-				{/if}
-			{/each}
-		{/await}
-	</div>
-</td>
-
+<svelte:options runes />
+
+<!-- TODO editable version of this should contain a multi select -->
+<script
+	lang="ts"
+	generics="T extends object,FilterValueType"
+>
+	import Bubble from '../../../../Bubble.svelte';
+	import { BubbleDef } from '../../../Types/Columns/Definitions/Display/BubbleDef.svelte.js';
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import { 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 { FocusableImmutableCellProps } from './FocusableImmutableCellProps.js';
+
+	const { cell }: FocusableImmutableCellProps<T, FilterValueType> = $props();
+
+	const values = $derived(cell.getValue()) as Array<string> | Promise<Array<string>>;
+
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+
+	const focusDetails: TableFocusDetails<T, never> = $derived(
+		new TableFocusDetails(cell, tableContext)
+	);
+
+	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 -->
+<td
+	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}
+			<!-- eslint-disable-next-line svelte/require-each-key -->
+			{#each values as 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}
+						/>
+					{/await}
+				{/if}
+			{/each}
+		{/await}
+	</div>
+</td>
+
 <style>td {
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
@@ -157,4 +157,4 @@ div.bubble-parent {
   align-items: center;
   gap: 0.5rem;
   --line-height: 1;
-}</style>
+}</style>