@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/DesktopModal.svelte

@@ -1,92 +1,72 @@
-<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>
-
+<svelte:options runes />
+
+<script lang="ts">import { ColourSet } from "../scss/colours.js";
+import Button from "./Button.svelte";
+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 } = $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;
@@ -184,4 +164,4 @@
 }
 .outer .spacer {
   flex-grow: 1;
-}</style>
+}</style>

package/dist/Components/Dial.svelte

@@ -1,206 +1,176 @@
-<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();
-			}
+<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 = Sizing["$dial-option-height"];
+</script>
+
+<script
+	lang="ts"
+	generics="T"
+>import { onMount } from "svelte";
+let { selected, entries, type, ref = $bindable(), onsubmit, onPrevious, onNext, onchange } = $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 = $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;
+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) {
+	onchange({
+		type,
+		changedData
 	});
-
-	// 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;
 	}
-
-	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)`);
+	// 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 + .1}s`;
+	itemWrapper.style.setProperty("transition", `transform ${transitionDuration}`);
+	itemWrapper.style.setProperty("transform", `translateY(${position}px)`);
+}
+const onmousedown = (event) => {
+	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) => {
+	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) => {
+	if (e.deltaY > 0) {
+		position = position - OPTION_HEIGHT;
 	}
-
-	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) {
+	if (e.deltaY < 0) {
+		position = position + OPTION_HEIGHT;
+	}
+	onMouseUp();
+};
+const handledKeys = new Set([
+	"ArrowLeft",
+	"ArrowRight",
+	"ArrowUp",
+	"ArrowDown",
+	"Enter"
+]);
+function onkeydown(e) {
+	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();
-	};
-
-	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();
-			}
+			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>
-
+}
+</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));
@@ -262,4 +232,4 @@
   width: 80px;
   height: var(--option-height);
   user-select: none;
-}</style>
+}</style>