@lavalogic/scoria 0.0.1

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

@@ -0,0 +1,331 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { dev } from '$app/environment';
+	import QuerySelect from '../../../../QuerySelect.svelte';
+	import type { QueryDef } from '../../../Types/Columns/Definitions/Accessors/QueryDef.js';
+	import type { TableCell } from '../../../Types/Columns/TableCell.js';
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
+	import type { SelectOption } from '../../../../../Types/Internal/SelectOption.js';
+	import { Validity } from '../../../../../Types/Internal/Validity.js';
+	import { getContext, tick, untrack, onMount } from 'svelte';
+	export interface TableQuerySelectProps<T extends object> {
+		cell: TableCell<T>;
+	}
+</script>
+
+<script lang="ts" generics="T extends object,">
+	const { cell }: TableQuerySelectProps<T> = $props();
+
+	const value = $derived((cell.getValue() ?? null) as SelectOption<unknown> | null);
+
+	let tdref = $state<HTMLTableCellElement | undefined>();
+
+	const columnDef: QueryDef<T> = $derived(cell.column.columnDef) as unknown as QueryDef<T>; // TODO stabilise and remove `as unknown`
+	// const optional = $derived(columnDef.optional ?? false);
+
+	let lastOptions: SelectOption<unknown>[] = $state([]);
+
+	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+	const { toast } = getContext<ToastContext>(ToastContext.identifier);
+
+	const editable = $derived(columnDef.editable === true);
+
+	const focusDetails: TableFocusDetails<T> = $derived(
+		new TableFocusDetails(cell, tableContext, toast)
+	);
+
+	const wantsToBeEdited = $derived(
+		tableContext.focusStart?.column === focusDetails.coordinates.column &&
+			tableContext.focusEnd?.column === focusDetails.coordinates.column &&
+			tableContext.focusStart.row === focusDetails.coordinates.row &&
+			tableContext.focusEnd.row === focusDetails.coordinates.row &&
+			tableContext.isMousingDown === false &&
+			tableContext.focusStartIsBeingEdited === true
+	);
+
+	let isBeingEdited = $state(false);
+	$effect(() => {
+		if (wantsToBeEdited) {
+			if (editable) {
+				tick().then(() => {
+					untrack(() => {
+						isBeingEdited = true;
+					});
+				});
+			} else {
+				tick().then(() => {
+					untrack(() => {
+						tableContext.focusStartIsBeingEdited = false;
+					});
+				});
+			}
+		} else {
+			if (isBeingEdited) {
+				tick().then(() => {
+					untrack(() => {
+						if (!tableContext.singleClickEditing) {
+							tableContext.focusStartIsBeingEdited = false;
+						}
+
+						isBeingEdited = false;
+					});
+				});
+			}
+		}
+	});
+
+	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;
+				});
+			});
+		}
+	});
+
+	const handleTDFocus = () => {
+		if (
+			editable &&
+			tableContext.focusStart?.column === focusDetails.coordinates.column &&
+			tableContext.focusStart.row === focusDetails.coordinates.row
+		) {
+			if (
+				tableContext.focusEnd?.column !== focusDetails.coordinates.column ||
+				tableContext.focusEnd.row !== focusDetails.coordinates.row
+			) {
+				tableContext.setFocusEnd(focusDetails.coordinates);
+			}
+
+			tableContext.isMousingDown = false;
+			tableContext.focusStartIsBeingEdited = true;
+			return true;
+		}
+
+		return false;
+	};
+
+	function handleSingleClick() {
+		return tableContext.singleClickEditing && handleTDFocus();
+	}
+	function handleDoubleClick() {
+		return !tableContext.singleClickEditing && handleTDFocus();
+	}
+
+	function handleUnfocus(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			e.stopPropagation();
+
+			tableContext.focusStartIsBeingEdited = false;
+			tick().then(() => {
+				tdref?.focus();
+			});
+
+			return true;
+		}
+
+		if (e.key === 'Tab') {
+			e.preventDefault();
+
+			tick().then(() => {
+				tick().then(() => {
+					// tdref?.dispatchEvent(
+					// 	new KeyboardEvent('keydown', {
+					// 		key: e.key,
+					// 		altKey: e.getModifierState('Alt'),
+					// 		metaKey: e.getModifierState('Meta'),
+					// 		shiftKey: e.getModifierState('Shift'),
+					// 		ctrlKey: e.getModifierState('Control'),
+					// 		bubbles: true
+					// 	})
+					// );
+				});
+			});
+			return true;
+		}
+	}
+
+	function keydownForce(e: KeyboardEvent) {
+		const shouldStop = handleUnfocus(e);
+		if (!shouldStop && !(e.key === 'ArrowUp' || e.key === 'ArrowDown')) {
+			tick().then(() => {
+				tdref?.dispatchEvent(
+					new KeyboardEvent('keydown', {
+						key: e.key,
+						altKey: e.getModifierState('Alt'),
+						metaKey: e.getModifierState('Meta'),
+						shiftKey: e.getModifierState('Shift'),
+						ctrlKey: e.getModifierState('Control'),
+						bubbles: true
+					})
+				);
+			});
+		}
+	}
+
+	function addKeydownEvent(target: HTMLInputElement | undefined) {
+		target?.addEventListener('keydown', keydownForce);
+	}
+
+	onMount(() => {
+		if (tdref) {
+			tdref!.addEventListener('edit', handleTDFocus);
+		} else if (dev) {
+			throw new Error("tdref didn't exist during onMount");
+		}
+	});
+</script>
+
+{#if isBeingEdited}
+	<!-- onkeydown={handleInputKeydown} -->
+	<!-- onkeydown={handleEsc} -->
+	<td class="select-cell" bind:this={tdref}>
+		<!-- TODO: -->
+		{#await value then value}
+			<QuerySelect
+				focusOnLoad
+				name={cell.column.columnDef.id}
+				valueProp="value"
+				labelProp="label"
+				valueAsObject={columnDef.valueAsObject as true}
+				selectedValue={value}
+				query={(v) => columnDef.query(v, cell.row.original, cell.row.index)}
+				bind:options={lastOptions}
+				onfocus={addKeydownEvent}
+				onchange={(newValue) => {
+					if (newValue?.value !== value) {
+						tableContext.onEditCell(cell.row.original, focusDetails.coordinates, newValue?.value);
+					}
+
+					tableContext.focusStartIsBeingEdited = false;
+					tick().then(() => {
+						tdref?.focus();
+					});
+				}}
+			/>
+		{/await}
+	</td>
+{:else}
+	<!-- // onkeydown={handleTdKeydown} -->
+	<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+	<td
+		style={focusDetails.outline}
+		bind:this={tdref}
+		tabIndex="0"
+		id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+		class="focusable editable"
+		class:multifocus={focusDetails.isMultiFocused}
+		class:multifocus-start={focusDetails.isMultiFocusStart}
+		class:info={validity == Validity.Info}
+		class:success={validity == Validity.Valid}
+		class:warning={validity == Validity.Warning}
+		class:error={validity == Validity.Invalid}
+		ondblclick={handleDoubleClick}
+		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={() => {
+			const wasHandled = handleSingleClick();
+			if (!wasHandled) {
+				tableContext.endFocus(focusDetails.coordinates);
+			}
+		}}
+	>
+		{#await value}
+			loading…
+		{:then v}
+			{v}
+		{/await}
+	</td>
+{/if}
+
+<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.select-cell {
+  padding: unset;
+  box-sizing: border-box;
+  vertical-align: middle;
+  text-align: center;
+}
+
+td {
+  --sv-border: none;
+}
+td :global(.select-wrapper) {
+  --sv-min-height: 0px;
+  --sv-general-padding: 0px;
+  --sv-item-wrap-padding: 0px 0.75rem;
+  --input-height: var(--height);
+}</style>

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

@@ -0,0 +1,28 @@
+import type { TableCell } from '../../../Types/Columns/TableCell.js';
+export interface TableQuerySelectProps<T extends object> {
+    cell: TableCell<T>;
+}
+declare function $$render<T extends object>(): {
+    props: TableQuerySelectProps<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 TableQuerySelect: $$IsomorphicComponent;
+type TableQuerySelect<T extends object> = InstanceType<typeof TableQuerySelect<T>>;
+export default TableQuerySelect;

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

@@ -0,0 +1,157 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import type { RowSelectionDef } from '../../../Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
+	import type { TableCell } from '../../../Types/Columns/TableCell.js';
+	import { TableContext } from '../../../Types/Context/TableContext.svelte.js';
+	import { TableFocusDetails } from '../../../Types/Focus/TableFocusDetails.svelte.js';
+	import { ToastContext } from '../../../../../Contexts/ToastContext.svelte.js';
+	import { getContext } from 'svelte';
+	import type { ChangeEventHandler } from 'svelte/elements';
+
+	export interface TableCheckboxProps<T extends object> {
+		cell: TableCell<T>;
+
+		onchange?: ChangeEventHandler<HTMLInputElement>;
+	}
+</script>
+
+<script lang="ts" generics="T extends object">
+	const { cell, onchange: parentOnchange }: TableCheckboxProps<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 key = $derived(tableContext.selectionExtractor(cell.row.original));
+
+	const value = $derived(tableContext.selectedItems.has(key));
+
+	const isSelectable = $derived(
+		(cell.column.columnDef as RowSelectionDef<T>).isSelectable?.(
+			cell.row.original,
+			cell.row.index
+		) ?? true
+	);
+
+	const onchange: ChangeEventHandler<HTMLInputElement> = (e) => {
+		tableContext.toggleSelected(cell.row.original, (e.target as HTMLInputElement).checked);
+		parentOnchange?.(e);
+	};
+
+	let inputRef: HTMLInputElement | undefined = $state();
+</script>
+
+<!-- svelte-ignore a11y_mouse_events_have_key_events -->
+<td
+	class="checkbox-cell"
+	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);
+			}
+		}
+	}}
+	onkeydown={(e) => {
+		if (e.key === 'Enter') {
+			e.stopPropagation();
+		}
+	}}
+	onkeyup={(e) => {
+		if (e.key === 'Enter') {
+			e.stopPropagation();
+			tableContext.toggleSelected(cell.row.original, !value);
+
+			inputRef?.dispatchEvent(new InputEvent('change'));
+			// tableContext.onEditCell(cell.row.original, focusDetails.coordinates, !value);
+		}
+	}}
+	onmouseover={() => {
+		if (tableContext.isMousingDown) {
+			tableContext.setFocusEnd(focusDetails.coordinates);
+		}
+	}}
+	onmouseup={() => {
+		tableContext.endFocus(focusDetails.coordinates);
+	}}
+>
+	<label
+		class:multifocus={focusDetails.isMultiFocused}
+		class:multifocus-start={focusDetails.isMultiFocusStart}
+		style={focusDetails.outline}
+	>
+		{#await isSelectable}
+			{@render input(false)}
+		{:then isSelectable}
+			{@render input(isSelectable)}
+		{/await}
+	</label>
+</td>
+
+{#snippet input(isSelectable: boolean)}
+	<input
+		id={`${tableContext.tableName}-cell-${cell.row.index}-${cell.column.id}`}
+		bind:this={inputRef}
+		{onchange}
+		type="checkbox"
+		checked={value}
+		disabled={!isSelectable || tableContext.showSelectedOnly}
+	/>
+{/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;
+}
+
+input[type=checkbox] {
+  height: var(--checkbox-height);
+  padding: 1rem;
+  box-sizing: border-box;
+  cursor: pointer;
+  accent-color: var(--colour, #259fc7);
+  flex-grow: 1;
+}
+input[type=checkbox]:focus, input[type=checkbox]:focus-visible, input[type=checkbox]:focus-within {
+  outline: none !important;
+}
+
+label {
+  display: flex;
+  flex-flow: row nowrap;
+  justify-content: center;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  align-items: center;
+}
+
+label {
+  cursor: pointer;
+}
+
+label.multifocus {
+  background-color: var(--multifocus-colour, #f4fbfd);
+}
+label.multifocus.multifocus-start {
+  background-color: #ffffff;
+}</style>

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

@@ -0,0 +1,30 @@
+import type { TableCell } from '../../../Types/Columns/TableCell.js';
+import type { ChangeEventHandler } from 'svelte/elements';
+export interface TableCheckboxProps<T extends object> {
+    cell: TableCell<T>;
+    onchange?: ChangeEventHandler<HTMLInputElement>;
+}
+declare function $$render<T extends object>(): {
+    props: TableCheckboxProps<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 TableRowSelectionCheckbox: $$IsomorphicComponent;
+type TableRowSelectionCheckbox<T extends object> = InstanceType<typeof TableRowSelectionCheckbox<T>>;
+export default TableRowSelectionCheckbox;