@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/DateTimeInputProps.d.ts

@@ -1,21 +1,46 @@
 import type { InputVariant } from '../Types/Internal/InputVariant.js';
 import type { InputDateWithTime } from '../Types/Internal/Misc.js';
 import type { PartialIconProps } from './PartialIconProps.js';
+/**
+ * Props for the `datetime-local` variant of {@link DateInput}.
+ *
+ * The `type` discriminator is required to keep the union with
+ * {@link DateOnlyInputProps} fully discriminable. `value` is branded
+ * with {@link InputDateWithTime}.
+ */
 export interface DateTimeInputProps {
-    value?: InputDateWithTime | null;
+    /** Discriminator. Must be the literal `'datetime-local'`. */
+    type: 'datetime-local';
+    /** Bindable datetime value. `''` represents "no value selected". */
+    value?: InputDateWithTime | '';
+    /** Label rendered above the input. */
     label?: string;
+    /** Native `placeholder` attribute. */
     placeholder?: string;
+    /** Native `required` attribute. */
     required?: boolean;
-    variant?: InputVariant;
-    min?: string;
-    max?: string;
+    /** Render the "- optional" suffix next to `label`. */
     optional?: boolean;
-    type?: 'datetime-local';
+    /** Render variant. See {@link InputVariant}. */
+    variant?: InputVariant;
+    /** Native `min` constraint. */
+    min?: InputDateWithTime;
+    /** Native `max` constraint. */
+    max?: InputDateWithTime;
+    /** Native `disabled` attribute. */
     disabled?: boolean;
+    /** Icon rendered on the left of the input. */
     leftIcon?: PartialIconProps;
+    /** Icon rendered on the right of the input. */
     rightIcon?: PartialIconProps;
+    /** Bindable reference to the underlying `<input>` element. */
     inputRef?: HTMLInputElement;
+    /** Force the invalid visual state. */
     invalid?: boolean;
+    /** Blur handler. */
     onblur?: (e: FocusEvent) => void;
+    /** Focus handler. */
     onfocus?: (e: FocusEvent) => void;
+    /** Change handler. May return `void` or `Promise<void>`. */
+    onchange?: (value: InputDateWithTime | null) => void | Promise<void>;
 }

package/dist/Components/DesktopModal.svelte

@@ -1,108 +1,92 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { ColourSet } from '../scss/colours.js';
-	import Button from './Button.svelte';
-	import type { DesktopModalProps } from './DesktopModalProps.js';
-	import LoadingOverlay from './LoadingOverlay.svelte';
-	import Modal from './Modal.svelte';
-
-	// testing modal
-
-	let {
-		onclose,
-		onsubmit,
-		noscroll,
-		headerLabel,
-		headerSubtitle,
-		buttons,
-		children,
-		isLoading,
-		mandatory,
-		loadingMessage,
-		staticHeight,
-		staticWidth,
-		minWidth,
-		minHeight,
-		width,
-		height,
-	}: DesktopModalProps = $props();
-</script>
-
-<Modal
-	{onclose}
-	mandatory={mandatory || isLoading}
-	{staticHeight}
-	{staticWidth}
-	{minWidth}
-	{minHeight}
-	{width}
-	{height}
-	{noscroll}
-	{onsubmit}
->
-	{#snippet header()}
-		<div class="outer">
-			<div class="column">
-				{#if typeof headerLabel === 'string'}
-					<h1>{headerLabel}</h1>
-				{:else}
-					{@render headerLabel()}
-				{/if}
-				{#if headerSubtitle}
-					<div class="one-line">
-						<span>{headerSubtitle}</span>
-					</div>
-				{/if}
-			</div>
-			<div class="spacer"></div>
-
-			<!-- <div class="orders">
-				<div class="column">
-					<span>Orders Selected</span>
-					<span class="big-number">{allocationContext.orders.length}</span>
-				</div>
-				<Icon name="paper" size={Size.TripleXLarge} colour={Colour.$main} />
-			</div>
-			<div class="warehouses">
-				<div class="column">
-					<span>Possible Warehouses</span>
-					<span class="big-number">{allocationContext.currentOrderWarehouses.length}</span>
-				</div>
-				<Icon name="warehouse" size={Size.TripleXLarge} colour={Colour.$main} />
-			</div> -->
-		</div>
-	{/snippet}
-
-	{#snippet footer()}
-		<div class="footer">
-			{#each buttons as button (button)}
-				<div class:left={button.left}>
-					<Button
-						type={button.type}
-						disabled={button.disabled}
-						onclick={button.callback}
-						colourSet={(button.colourSet ?? button.type === 'submit')
-							? ColourSet.Primary
-							: undefined}>{button.label}</Button
-					>
-				</div>
-			{/each}
-		</div>
-	{/snippet}
-
-	<div class="body-outer">
-		{@render children()}
-	</div>
-
-	{#if isLoading}
-		<LoadingOverlay
-			absolute
-			message={loadingMessage}
-		/>
-	{/if}
-</Modal>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { ColourSet } from '../scss/colours.js';
+	import Button from './Button.svelte';
+	import type { DesktopModalProps } from './DesktopModalProps.js';
+	import LoadingOverlay from './LoadingOverlay.svelte';
+	import Modal from './Modal.svelte';
+
+	const {
+		onclose,
+		onsubmit,
+		noscroll,
+		headerLabel,
+		headerSubtitle,
+		buttons,
+		children,
+		isLoading,
+		mandatory,
+		loadingMessage,
+		staticHeight,
+		staticWidth,
+		minWidth,
+		minHeight,
+		width,
+		height,
+	}: DesktopModalProps = $props();
+</script>
+
+<Modal
+	{onclose}
+	mandatory={mandatory || isLoading}
+	{staticHeight}
+	{staticWidth}
+	{minWidth}
+	{minHeight}
+	{width}
+	{height}
+	{noscroll}
+	{onsubmit}
+>
+	{#snippet header()}
+		<div class="outer">
+			<div class="column">
+				{#if typeof headerLabel === 'string'}
+					<h1>{headerLabel}</h1>
+				{:else}
+					{@render headerLabel()}
+				{/if}
+				{#if headerSubtitle}
+					<div class="one-line">
+						<span>{headerSubtitle}</span>
+					</div>
+				{/if}
+			</div>
+			<div class="spacer"></div>
+		</div>
+	{/snippet}
+
+	{#snippet footer()}
+		<div class="footer">
+			{#if buttons.length}
+				{#each buttons as button (button.label)}
+					<div class:left={button.left}>
+						<Button
+							type={button.type}
+							disabled={button.disabled}
+							onclick={button.callback}
+							colourSet={button.colourSet ??
+								(button.type === 'submit' ? ColourSet.Primary : undefined)}>{button.label}</Button
+						>
+					</div>
+				{/each}
+			{/if}
+		</div>
+	{/snippet}
+
+	<div class="body-outer">
+		{@render children()}
+	</div>
+
+	{#if isLoading}
+		<LoadingOverlay
+			absolute
+			message={loadingMessage}
+		/>
+	{/if}
+</Modal>
+
 <style>.outer {
   padding: 1.5rem;
   display: flex;
@@ -200,17 +184,4 @@
 }
 .outer .spacer {
   flex-grow: 1;
-}
-.outer .orders,
-.outer .warehouses {
-  display: flex;
-  flex-flow: row nowrap;
-  height: 100%;
-  gap: 0.5rem;
-}
-.outer .orders .column,
-.outer .warehouses .column {
-  display: flex;
-  gap: 0rem;
-  flex-flow: column nowrap;
-}</style>
+}</style>

package/dist/Components/DesktopModalProps.d.ts

@@ -1,4 +1,5 @@
 import type { CallbackButton } from '../Types/Internal/CallbackButton.js';
+import type { CssLength } from '../Types/Internal/Misc.js';
 import type { Snippet } from 'svelte';
 export interface DesktopModalProps {
     onclose: () => void;
@@ -13,8 +14,8 @@ export interface DesktopModalProps {
     loadingMessage?: string;
     staticHeight?: boolean;
     staticWidth?: boolean;
-    minWidth?: string;
-    minHeight?: string;
-    width?: string;
-    height?: string;
+    minWidth?: CssLength;
+    minHeight?: CssLength;
+    width?: CssLength;
+    height?: CssLength;
 }

package/dist/Components/Dial.svelte

@@ -1,154 +1,208 @@
-<svelte:options runes />
-
-<script lang="ts" generics="T">
-	import { onMount } from 'svelte';
-	import type { DialProps } from './DialProps.js';
-
-	const optionHeight = 50;
-
-	let {
-		selected,
-		values,
-		labels,
-		type,
-		ref = $bindable(),
-		onsubmit,
-		onPrevious,
-		onNext,
-		onchange
-	}: DialProps<T> = $props();
-
-	let position = $derived(selected != null ? -values.indexOf(selected) * optionHeight : 0);
-	let offset = 0;
-	let dragging = false;
-
-	let itemWrapper: HTMLUListElement | undefined = $state();
-	let previousY: number;
-
-	onMount(() => {
-		setPosition();
-	});
-
-	$effect(() => {
-		if (!dragging) {
-			const selectedPosition = selected != null ? -values.indexOf(selected) * optionHeight : 0;
-			if (position !== selectedPosition) {
-				position = selectedPosition;
-				setPosition();
-			}
-		}
-	});
-
-	function onChange(changedData: T) {
-		onchange({
-			type,
-			changedData
-		});
-	}
-
-	function setPosition() {
-		const itemPosition = `
-		transition: transform ${Math.abs(offset) / 100 + 0.1}s;
-        transform: translateY(${position}px)
-      `;
-		if (itemWrapper) {
-			itemWrapper.style.cssText = itemPosition;
-		} else {
-			console.warn('item wrapper is undefined');
-		}
-	}
-
-	const onmousedown = (event: MouseEvent | TouchEvent) => {
-		previousY = 'touches' in event ? event.touches[0].clientY : event.clientY;
-		dragging = true;
-
-		window.addEventListener('mousemove', onMouseMove);
-		window.addEventListener('mouseup', onMouseUp);
-		window.addEventListener('touchmove', onMouseMove);
-		window.addEventListener('touchend', onMouseUp);
-	};
-
-	const onMouseMove = (event: MouseEvent | TouchEvent) => {
-		const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;
-		offset = clientY - previousY;
-
-		const maxPosition = -values.length * optionHeight;
-		const _position = position + offset;
-		position = Math.max(maxPosition, Math.min(optionHeight, _position));
-		previousY = 'touches' in event ? event.touches[0].clientY : event.clientY;
-		setPosition();
-	};
-
-	const onMouseUp = () => {
-		const maxPosition = -(values.length - 1) * optionHeight;
-		const rounderPosition = Math.round((position + offset * 5) / optionHeight) * optionHeight;
-		const finalPosition = Math.max(maxPosition, Math.min(0, rounderPosition));
-
-		dragging = false;
-		position = finalPosition;
-
-		window.removeEventListener('mousemove', onMouseMove);
-		window.removeEventListener('mouseup', onMouseUp);
-		window.removeEventListener('touchmove', onMouseMove);
-		window.removeEventListener('touchend', onMouseUp);
-
-		setPosition();
-		onChange(values[-finalPosition / optionHeight]);
-	};
-
-	const onwheel = (e: WheelEvent) => {
-		if (e.deltaY > 0) {
-			position = position - optionHeight;
-		}
-		if (e.deltaY < 0) {
-			position = position + optionHeight;
-		}
-		onMouseUp();
-	};
-
-	const handledKeys = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Enter']);
-	function onkeydown(e: KeyboardEvent) {
-		if (handledKeys.has(e.key)) {
-			e.preventDefault();
-
-			if (e.key === 'ArrowLeft') {
-				onPrevious(type);
-			} else if (e.key === 'ArrowRight') {
-				onNext(type);
-			} else if (e.key === 'ArrowUp') {
-				position = position + optionHeight;
-				onMouseUp();
-			} else if (e.key === 'ArrowDown') {
-				position = position - optionHeight;
-				onMouseUp();
-			} else if (e.key === 'Enter') {
-				onsubmit();
-			}
-		}
-	}
-</script>
-
-<div
-	style="--option-height: {optionHeight}px"
-	class="select-wrapper"
-	role="listbox"
-	tabindex="0"
-	bind:this={ref}
-	{onmousedown}
-	ontouchstart={onmousedown}
-	{onwheel}
-	{onkeydown}
->
-	<div class="selected-wrapper">
-		<ul bind:this={itemWrapper} class="touch-date-container">
-			{#each labels as item (item)}
-				<li>{item}</li>
-			{/each}
-		</ul>
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import { Sizing } from '../scss/sizing.js';
+
+	// Pixel height of each dial option. Sourced from `sizing.ts` so the
+	// SCSS partial and TS constant stay in sync (see comment at the top
+	// of `sizing.ts`).
+	const OPTION_HEIGHT: number = Sizing['$dial-option-height'];
+</script>
+
+<script
+	lang="ts"
+	generics="T"
+>
+	import { onMount } from 'svelte';
+	import type { DialProps } from './DialProps.js';
+
+	let {
+		selected,
+		entries,
+		type,
+		ref = $bindable(),
+		onsubmit,
+		onPrevious,
+		onNext,
+		onchange,
+	}: DialProps<T> = $props();
+
+	// `position`, `offset`, `dragging` must all be `$state` so that the
+	// position-syncing `$effect` below re-runs when `dragging` flips back
+	// to `false` at the end of a drag. The previous `let` variables were
+	// invisible to Svelte's reactivity and made the `$effect`'s firing
+	// order depend on `selected` happening to change.
+	//
+	// `position` initialises to 0; the `$effect` below syncs it to the
+	// `selected`-derived position on first run. Reading `selected` /
+	// `values` directly in the initialiser would only capture their
+	// initial values (svelte warning `state_referenced_locally`), and
+	// since the effect already covers that path we keep the initialiser
+	// trivial.
+	let position = $state(0);
+	let offset = $state(0);
+	let dragging = $state(false);
+
+	let itemWrapper: HTMLUListElement | undefined = $state();
+	let previousY = 0;
+
+	// AbortController used to register/clean up window-level
+	// `mousemove`/`mouseup`/`touchmove`/`touchend` listeners. Stored in a
+	// single ref so a stray `mousedown` cannot leak a second set, and so
+	// the cleanup `$effect` below can detach everything on unmount even
+	// if the user navigates away mid-drag.
+	let dragAbort: AbortController | undefined;
+
+	onMount(() => {
+		setPosition();
+	});
+
+	$effect(() => {
+		if (!dragging) {
+			const selectedPosition =
+				selected != null ? -entries.findIndex((e) => e.value === selected) * OPTION_HEIGHT : 0;
+			if (position !== selectedPosition) {
+				position = selectedPosition;
+				setPosition();
+			}
+		}
+	});
+
+	// Ensure any in-flight drag listeners are detached on unmount. The
+	// listeners would otherwise leak if the component unmounted between
+	// `onmousedown` and `onMouseUp` (rare, but possible if the parent
+	// modal closes mid-drag).
+	$effect(() => () => {
+		dragAbort?.abort();
+	});
+
+	function onChange(changedData: T) {
+		onchange({
+			type,
+			changedData,
+		});
+	}
+
+	function setPosition() {
+		if (!itemWrapper) {
+			// Silently no-op if the wrapper has not yet mounted. The previous
+			// `console.warn` fired during the initial render of every dial
+			// and was noise in production logs.
+			return;
+		}
+
+		// Set transform / transition individually rather than rewriting the
+		// full `cssText`. The latter parses the entire declaration string
+		// per mousemove (~60 Hz); `setProperty` skips the parse and only
+		// updates the named declarations. The `transition-duration` scales
+		// with drag inertia, so we still need imperative updates rather
+		// than `style:transform={...}` for the dragging case.
+		const transitionDuration = `${Math.abs(offset) / 100 + 0.1}s`;
+		itemWrapper.style.setProperty('transition', `transform ${transitionDuration}`);
+		itemWrapper.style.setProperty('transform', `translateY(${position}px)`);
+	}
+
+	const onmousedown = (event: MouseEvent | TouchEvent) => {
+		previousY = 'touches' in event ? event.touches[0].clientY : event.clientY;
+		dragging = true;
+
+		// One AbortController per drag. Attached to all four window
+		// listeners so a single `controller.abort()` detaches everything.
+		dragAbort?.abort();
+		dragAbort = new AbortController();
+		const { signal } = dragAbort;
+
+		window.addEventListener('mousemove', onMouseMove, { signal });
+		window.addEventListener('mouseup', onMouseUp, { signal });
+		window.addEventListener('touchmove', onMouseMove, { signal });
+		window.addEventListener('touchend', onMouseUp, { signal });
+	};
+
+	const onMouseMove = (event: MouseEvent | TouchEvent) => {
+		const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;
+		offset = clientY - previousY;
+
+		const maxPosition = -entries.length * OPTION_HEIGHT;
+		const _position = position + offset;
+		position = Math.max(maxPosition, Math.min(OPTION_HEIGHT, _position));
+		previousY = 'touches' in event ? event.touches[0].clientY : event.clientY;
+		setPosition();
+	};
+
+	const onMouseUp = () => {
+		const maxPosition = -(entries.length - 1) * OPTION_HEIGHT;
+		const rounderPosition = Math.round((position + offset * 5) / OPTION_HEIGHT) * OPTION_HEIGHT;
+		const finalPosition = Math.max(maxPosition, Math.min(0, rounderPosition));
+
+		dragging = false;
+		position = finalPosition;
+
+		dragAbort?.abort();
+		dragAbort = undefined;
+
+		setPosition();
+		onChange(entries[-finalPosition / OPTION_HEIGHT].value);
+	};
+
+	const onwheel = (e: WheelEvent) => {
+		if (e.deltaY > 0) {
+			position = position - OPTION_HEIGHT;
+		}
+		if (e.deltaY < 0) {
+			position = position + OPTION_HEIGHT;
+		}
+		onMouseUp();
+	};
+
+	const handledKeys = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Enter']);
+	function onkeydown(e: KeyboardEvent) {
+		if (handledKeys.has(e.key)) {
+			e.preventDefault();
+
+			if (e.key === 'ArrowLeft') {
+				onPrevious(type);
+			} else if (e.key === 'ArrowRight') {
+				onNext(type);
+			} else if (e.key === 'ArrowUp') {
+				position = position + OPTION_HEIGHT;
+				onMouseUp();
+			} else if (e.key === 'ArrowDown') {
+				position = position - OPTION_HEIGHT;
+				onMouseUp();
+			} else if (e.key === 'Enter') {
+				onsubmit();
+			}
+		}
+	}
+</script>
+
+<div
+	class="select-wrapper"
+	role="listbox"
+	tabindex="0"
+	bind:this={ref}
+	{onmousedown}
+	ontouchstart={onmousedown}
+	{onwheel}
+	{onkeydown}
+>
+	<div class="selected-wrapper">
+		<ul
+			bind:this={itemWrapper}
+			class="touch-date-container"
+		>
+			{#each entries as entry (entry.value)}
+				<li>{entry.label}</li>
+			{/each}
+		</ul>
+	</div>
+</div>
+
 <style>.select-wrapper {
+  --option-height: 50px;
   height: calc(var(--option-height));
   padding: 50px 0;
   margin: 10px 0;
@@ -172,6 +226,14 @@
   margin: 0;
   padding: 0;
 }
+@media (prefers-reduced-motion: reduce) {
+  .touch-date-container {
+    animation-duration: 0.001ms !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0.001ms !important;
+    scroll-behavior: auto !important;
+  }
+}
 
 .selected-wrapper:before,
 .selected-wrapper:after {
@@ -200,4 +262,4 @@
   width: 80px;
   height: var(--option-height);
   user-select: none;
-}</style>
+}</style>