@lavalogic/scoria 0.0.1

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

@@ -0,0 +1,171 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	export interface FocusableImmutableCellProps<T extends object> {
+		cell: TableCell<T>;
+	}
+</script>
+
+<!-- TODO editable version of this should contain a multi select -->
+<script lang="ts" generics="T extends object">
+	import Bubble from '../../../../Bubble.svelte';
+	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
+	import { Validity } from '../../../../../Types/Internal/Validity.js';
+	import { getContext, tick, untrack } from 'svelte';
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import type { TableCell } from '../../../Types/Columns/TableCell.js';
+	import { BubbleDef } from '../../../Types/Columns/Definitions/Display/BubbleDef.svelte.js';
+
+	const { cell }: FocusableImmutableCellProps<T> = $props();
+
+	const values = $derived(cell.getValue()) as string[] | Promise<string[]>;
+
+	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const toastContext = getContext<ToastContext>(ToastContext.identifier);
+
+	const focusDetails: TableFocusDetails<T> = $derived(
+		new TableFocusDetails(cell, tableContext, toastContext.toast)
+	);
+
+	let previousValidity = $state(Validity.Valid);
+	let validity = $state(Validity.Valid);
+	$effect(() => {
+		focusDetails.validityTuple.then(([newValidity]) => {
+			untrack(() => {
+				tick().then(() => {
+					validity = newValidity;
+				});
+			});
+		});
+	});
+
+	$effect(() => {
+		if (validity != previousValidity) {
+			untrack(() => {
+				tick().then(() => {
+					if (validity === Validity.Invalid) {
+						tableContext.addInvalidValue(cell.row.original);
+					} else {
+						tableContext.removeInvalidValue(cell.row.original);
+					}
+					previousValidity = validity;
+				});
+			});
+		}
+	});
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<td
+	id={`${tableContext.tableName}-cell-${cell.row.index}-${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.index,
+					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;
+  --input-height: var(--height);
+  white-space: nowrap;
+  overflow-x: clip;
+  text-overflow: ellipsis;
+  position: relative;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  border: solid 1px #cbd4da;
+  border-left: none;
+}
+
+td.multifocus {
+  background-color: var(--multifocus-colour, #e6f8fd);
+}
+td.multifocus.multifocus-start {
+  background-color: #ffffff;
+}
+
+td.focusable {
+  user-select: none;
+  cursor: default;
+  outline: none;
+}
+td.focusable.editable {
+  cursor: pointer;
+}
+
+td.info {
+  background-color: #1f81a0;
+}
+td.warning {
+  background-color: #f8eab8;
+}
+td.error {
+  background-color: #f9e9e9;
+}
+
+td {
+  max-height: var(--max-height);
+  height: var(--height);
+  box-sizing: content-box;
+  overflow-x: clip;
+  --td-padding-left: 0;
+  --td-padding-right: 0;
+}
+
+div.bubble-parent {
+  display: flex;
+  flex-flow: row wrap;
+  max-width: 100%;
+  overflow-x: clip;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 0.5rem;
+  --line-height: 1;
+}</style>

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

@@ -0,0 +1,28 @@
+export interface FocusableImmutableCellProps<T extends object> {
+    cell: TableCell<T>;
+}
+import type { TableCell } from '../../../Types/Columns/TableCell.js';
+declare function $$render<T extends object>(): {
+    props: FocusableImmutableCellProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const BubbleCell: $$IsomorphicComponent;
+type BubbleCell<T extends object> = InstanceType<typeof BubbleCell<T>>;
+export default BubbleCell;

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

@@ -0,0 +1,149 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	export interface ExpandCellProps<T extends object> {
+		cell: ExpandTableCell<T>;
+		expandedColumnDef: ExpandDef<T, unknown & object> | undefined;
+		onExpandChange: (def: ExpandDef<T, unknown & object>) => void;
+	}
+</script>
+
+<script lang="ts" generics="T extends object">
+	import Action from '../../../../Action.svelte';
+	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
+	import { ColourSet } from '../../../../../scss/colours.js';
+	import { Size } from '../../../../../Types/Internal/Size.js';
+	import { getContext } from 'svelte';
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import type { ExpandDef } from '../../../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
+	import type { ExpandTableCell } from '../../../Types/Columns/ExpandTableCell.js';
+
+	const { cell, expandedColumnDef, onExpandChange }: ExpandCellProps<T> = $props();
+
+	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const toastContext = getContext<ToastContext>(ToastContext.identifier);
+	const focusDetails: TableFocusDetails<T> = $derived(
+		new TableFocusDetails(cell, tableContext, toastContext.toast)
+	);
+
+	const enabled: boolean | Promise<boolean> = $derived(
+		cell.column.columnDef.isEnabled?.(cell.row.original, cell.row.index)
+	);
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<td
+	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}
+	>
+		{#await enabled}
+			{@render action(false)}
+		{:then enabled}
+			{@render action(enabled ?? true)}
+		{/await}
+	</div>
+</td>
+
+{#snippet action(enabled: boolean)}
+	<div class="noninteractive">
+		<Action
+			id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+			style={focusDetails.outline}
+			disabled={!enabled}
+			border={false}
+			label="Expand Nested Table"
+			size={Size.FillWidth}
+			icon={{
+				name: expandedColumnDef?.id === cell.column.columnDef.id ? 'minus' : 'plus',
+				size: Size.Medium
+			}}
+			colourSet={expandedColumnDef?.id === cell.column.columnDef.id
+				? ColourSet.Primary
+				: ColourSet.Auxiliary}
+			onclick={(e) => {
+				// FIXME why is this required? svelte bug?
+				e.stopImmediatePropagation();
+				// toastContext.toast("clicked")
+				onExpandChange(cell.column.columnDef as ExpandDef<T, unknown & object>);
+			}}
+		/>
+	</div>
+{/snippet}
+
+<style>td {
+  transition: line-height 0.2s ease, height 0.2s ease;
+  --input-border: none;
+  --input-height: var(--height);
+  white-space: nowrap;
+  overflow-x: clip;
+  text-overflow: ellipsis;
+  position: relative;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  border: solid 1px #cbd4da;
+  border-left: none;
+}
+
+td.focusable {
+  user-select: none;
+  cursor: default;
+  outline: none;
+}
+td.focusable.editable {
+  cursor: pointer;
+}
+
+td {
+  max-height: var(--max-height);
+  height: var(--height);
+  box-sizing: content-box;
+  overflow-x: clip;
+  --td-padding-left: 0;
+  --td-padding-right: 0;
+}
+
+div.slot-wrapper.multifocus {
+  background-color: var(--multifocus-colour, #f4fbfd);
+}
+div.slot-wrapper.multifocus.multifocus-start {
+  background-color: #ffffff;
+}
+div.slot-wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.noninteractive {
+  display: contents;
+  user-select: none;
+}</style>

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

@@ -0,0 +1,31 @@
+export interface ExpandCellProps<T extends object> {
+    cell: ExpandTableCell<T>;
+    expandedColumnDef: ExpandDef<T, unknown & object> | undefined;
+    onExpandChange: (def: ExpandDef<T, unknown & object>) => void;
+}
+import type { ExpandDef } from '../../../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
+import type { ExpandTableCell } from '../../../Types/Columns/ExpandTableCell.js';
+declare function $$render<T extends object>(): {
+    props: ExpandCellProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const ExpandCell: $$IsomorphicComponent;
+type ExpandCell<T extends object> = InstanceType<typeof ExpandCell<T>>;
+export default ExpandCell;

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

@@ -0,0 +1,156 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
+	import { getContext, type Snippet } from 'svelte';
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import type { SelectOption } from '../../../../../Types/Internal/SelectOption.js';
+	import type { TableCell } from '../../../Types/Columns/TableCell.js';
+
+	export interface FocusableImmutableCellProps<T extends object> {
+		cell: TableCell<T>;
+		value?: unknown;
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts" generics="T extends object">
+	const { cell, value: externalValue, children }: FocusableImmutableCellProps<T> = $props();
+
+	const value = $derived(cell.getValue());
+
+	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const toastContext = getContext<ToastContext>(ToastContext.identifier);
+
+	const options: SelectOption<unknown>[] = $derived(
+		('options' in cell.column.columnDef
+			? cell.column.columnDef.options
+			: []) as SelectOption<unknown>[]
+	);
+	const hasValue: boolean = $derived(value !== undefined);
+
+	const focusDetails: TableFocusDetails<T> = $derived(
+		new TableFocusDetails(cell, tableContext, toastContext.toast)
+	);
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<!-- class:left={focusDetails.leftEdge}
+class:top={focusDetails.topEdge}
+class:right={focusDetails.rightEdge}
+class:bottom={focusDetails.bottomEdge} -->
+<td
+	id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+	tabIndex={hasValue ? 0 : undefined}
+	class="focusable"
+	style={focusDetails.outline}
+	class:multifocus={hasValue && focusDetails.isMultiFocused}
+	class:multifocus-start={hasValue && focusDetails.isMultiFocusStart}
+	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);
+	}}
+>
+	{#if hasValue}
+		{#if externalValue}
+			{#await externalValue}
+				loading…
+			{:then externalValue}
+				{externalValue}
+			{/await}
+		{:else}
+			{#await value}
+				loading…
+			{:then value}
+				{(value instanceof Date
+					? value.toLocaleDateString()
+					: options.length
+						? options.find((it) => it.value === value)?.label
+						: value) ??
+					value ??
+					''}
+			{/await}
+		{/if}
+	{:else if children}
+		<div
+			class="slot-wrapper"
+			class:multifocus={focusDetails.isMultiFocused}
+			class:multifocus-start={focusDetails.isMultiFocusStart}
+		>
+			<!-- TODO {focusDetails.isMultiFocusStart} -->
+			{@render children()}
+		</div>
+	{/if}
+</td>
+
+<style>td {
+  transition: line-height 0.2s ease, height 0.2s ease;
+  --input-border: none;
+  --input-height: var(--height);
+  white-space: nowrap;
+  overflow-x: clip;
+  text-overflow: ellipsis;
+  position: relative;
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+  border: solid 1px #cbd4da;
+  border-left: none;
+}
+
+td.multifocus {
+  background-color: var(--multifocus-colour, #e6f8fd);
+}
+td.multifocus.multifocus-start {
+  background-color: #ffffff;
+}
+
+td.focusable {
+  user-select: none;
+  cursor: default;
+  outline: none;
+}
+td.focusable.editable {
+  cursor: pointer;
+}
+
+td {
+  max-height: var(--max-height);
+  height: var(--height);
+  box-sizing: content-box;
+  overflow-x: clip;
+  --td-padding-left: 0;
+  --td-padding-right: 0;
+}
+
+div.slot-wrapper.multifocus {
+  background-color: var(--multifocus-colour, #f4fbfd);
+}
+div.slot-wrapper.multifocus.multifocus-start {
+  background-color: #ffffff;
+}
+div.slot-wrapper {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}</style>

package/dist/Components/Table/Body/Rows/Columns/FocusableImmutableCell.svelte.d.ts

@@ -0,0 +1,31 @@
+import { type Snippet } from 'svelte';
+import type { TableCell } from '../../../Types/Columns/TableCell.js';
+export interface FocusableImmutableCellProps<T extends object> {
+    cell: TableCell<T>;
+    value?: unknown;
+    children?: Snippet;
+}
+declare function $$render<T extends object>(): {
+    props: FocusableImmutableCellProps<T>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const FocusableImmutableCell: $$IsomorphicComponent;
+type FocusableImmutableCell<T extends object> = InstanceType<typeof FocusableImmutableCell<T>>;
+export default FocusableImmutableCell;