@lavalogic/scoria 0.39.2 → 0.40.1

package/dist/Components/Touch/ModalExplanation.svelte

@@ -1,19 +1,19 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import type { ModalExplanationProps } from './ModalExplanationProps.js';
-
-	let { width, children, nowrap }: ModalExplanationProps = $props();
-</script>
-
-<p
-	class:nowrap
-	style:--width={width}
-	style:--padding="0"
->
-	{@render children()}
-</p>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import type { ModalExplanationProps } from './ModalExplanationProps.js';
+
+	let { width, children, nowrap }: ModalExplanationProps = $props();
+</script>
+
+<p
+	class:nowrap
+	style:--width={width}
+	style:--padding="0"
+>
+	{@render children()}
+</p>
+
 <style>p {
   padding: var(--padding);
   color: #3a4952;
@@ -21,4 +21,4 @@
 }
 p.nowrap {
   white-space: pre-line;
-}</style>
+}</style>

package/dist/Components/Touch/NumberKeyboard.svelte

@@ -1,227 +1,227 @@
-<svelte:options runes />
-
-<script
-	module
-	lang="ts"
->
-	import { devCatch, passthrough } from '../../Helpers/Helpers.svelte.js';
-	import { InputVariant } from '../../Types/Internal/InputVariant.js';
-	import { tick, untrack } from 'svelte';
-	import Icon from '../Icon.svelte';
-	import TextInput from '../TextInput.svelte';
-	import type { NumberKeyboardProps } from './NumberKeyboardProps.js';
-
-	const DIGITS = Object.freeze([1, 2, 3, 4, 5, 6, 7, 8, 9] as const);
-</script>
-
-<script lang="ts">
-	let {
-		value = $bindable(null),
-		label,
-		labelRight,
-		placeholder,
-		min,
-		max,
-		decimal = false,
-		inputRef = $bindable(),
-		coerceValue = false,
-	}: NumberKeyboardProps = $props();
-
-	let _value: string = $derived(
-		value != null && value % 1 == 0 ? value.toString() : getDecimalValue()
-	);
-
-	function getDecimalPlaces(value: number): number {
-		const str = value.toString();
-		if (!str.includes('.')) {
-			return decimal ? 2 : 0;
-		}
-		return str.split('.')[1].length;
-	}
-
-	const decimalPlaces = $derived(
-		min != null ? getDecimalPlaces(min) : max != null ? getDecimalPlaces(max) : decimal ? 2 : 0
-	);
-
-	function getDecimalValue(): string {
-		// Use toFixed to bound decimal places, then parseFloat to drop trailing
-		// zeros without re-introducing scientific notation. There is no built-in
-		// "as many decimals as requested but no more" formatter.
-		return value ? parseFloat(value.toFixed(decimalPlaces)).toString() : '';
-	}
-
-	const newValue = $derived.by(() => {
-		const v = decimal ? parseFloat(_value) : parseInt(_value);
-		if (isNaN(v)) {
-			return null;
-		}
-		return v;
-	});
-
-	$effect(() => {
-		if (coerceValue) {
-			const v =
-				min != undefined && newValue != null && min > newValue
-					? min
-					: max != undefined && newValue != null && max < newValue
-						? max
-						: newValue;
-
-			value = v;
-		} else {
-			value = newValue;
-		}
-	});
-
-	function refocus() {
-		tick()
-			.then(() => {
-				if (inputRef && document.activeElement !== inputRef) {
-					inputRef.focus();
-				}
-			})
-			.catch(devCatch);
-	}
-
-	function getPrevValue() {
-		if (inputRef) {
-			if (
-				(inputRef.selectionStart === 0 && inputRef.selectionEnd === _value.length) ||
-				(inputRef.selectionEnd === 0 && inputRef.selectionStart === _value.length)
-			) {
-				return '';
-			}
-		}
-		return _value;
-	}
-
-	function addDecimal() {
-		_value = getPrevValue() + '.';
-		untrack(refocus);
-	}
-
-	/* due to the fact that number inputs won't allow a leading dot, we have to use a text input 
-		this doesn't add a number, but concatenated the digit to the end of the string
-	*/
-	function addDigit(digit: string) {
-		const prevValue = getPrevValue();
-		_value = prevValue + digit;
-	}
-
-	function backspace() {
-		const preVvalue = getPrevValue();
-		const v = preVvalue && _value.slice(0, _value.length - 1);
-		_value = v;
-		untrack(refocus);
-	}
-
-	function minus() {
-		const v = ((decimal ? parseFloat(_value) : parseInt(_value)) || 0) - 1;
-
-		_value = (min != null ? Math.max(min, v) : v).toString();
-		untrack(refocus);
-	}
-
-	function plus() {
-		const v = ((decimal ? parseFloat(_value) : parseInt(_value)) || 0) + 1;
-
-		_value = (max != null ? Math.min(max, v) : v).toString();
-		untrack(refocus);
-	}
-
-	const lessThanMin = $derived(min != null && (value == null || value < min));
-	const moreThanMax = $derived(max != null && (value == null || value > max));
-
-	// Precompute disabled state per digit so the 10 buttons do not each evaluate
-	// the same arithmetic on every render.
-	const digitDisabled = $derived.by(() => {
-		const out = new Array<boolean>(10);
-		const base = (value ?? 0) * 10;
-		for (let i = 0; i < 10; i++) {
-			out[i] = max != null && base + i > max;
-		}
-		return out;
-	});
-
-	function onDigitClick(e: MouseEvent) {
-		const digit = (e.currentTarget as HTMLButtonElement).dataset.digit;
-		if (digit != null) {
-			addDigit(digit);
-		}
-	}
-</script>
-
-<div class="number-input-wrapper">
-	<div class="left-side">
-		<div class="value-container">
-			<!-- textInput is the only available option when you try to add a decimal point programmatically -->
-			<TextInput
-				labelTop={label}
-				{placeholder}
-				{labelRight}
-				bind:inputRef
-				bind:value={_value}
-				variant={InputVariant.Modal}
-				required
-				invalid={lessThanMin || moreThanMax}
-			/>
-			{#if max != undefined}
-				<TextInput
-					value={`${max}`}
-					labelTop="Maximum"
-					selectNone
-					disabled
-					variant={InputVariant.Modal}
-				/>
-			{/if}
-		</div>
-		<div class="plus-minus">
-			<button
-				onkeydown={passthrough}
-				type="button"
-				disabled={value != null && min != null && value <= min}
-				onclick={minus}><Icon name="minus" /></button
-			>
-			<button
-				onkeydown={passthrough}
-				type="button"
-				disabled={value != null && max != null && value >= max}
-				onclick={plus}><Icon name="plus" /></button
-			>
-		</div>
-	</div>
-	<div class="number-grid">
-		{#each DIGITS as digit (digit)}
-			<button
-				onkeydown={passthrough}
-				type="button"
-				data-digit={digit}
-				disabled={digitDisabled[digit]}
-				onclick={onDigitClick}>{digit}</button
-			>
-		{/each}
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={!decimal || (value != null && value % 1 !== 0) || _value.endsWith('.')}
-			onclick={addDecimal}>.</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			data-digit="0"
-			disabled={digitDisabled[0]}
-			onclick={onDigitClick}>0</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={_value.length === 0}
-			onclick={backspace}>⌫</button
-		>
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script
+	module
+	lang="ts"
+>
+	import { devCatch, passthrough } from '../../Helpers/Helpers.svelte.js';
+	import { InputVariant } from '../../Types/Internal/InputVariant.js';
+	import { tick, untrack } from 'svelte';
+	import Icon from '../Icon.svelte';
+	import TextInput from '../TextInput.svelte';
+	import type { NumberKeyboardProps } from './NumberKeyboardProps.js';
+
+	const DIGITS = Object.freeze([1, 2, 3, 4, 5, 6, 7, 8, 9] as const);
+</script>
+
+<script lang="ts">
+	let {
+		value = $bindable(null),
+		label,
+		labelRight,
+		placeholder,
+		min,
+		max,
+		decimal = false,
+		inputRef = $bindable(),
+		coerceValue = false,
+	}: NumberKeyboardProps = $props();
+
+	let _value: string = $derived(
+		value != null && value % 1 == 0 ? value.toString() : getDecimalValue()
+	);
+
+	function getDecimalPlaces(value: number): number {
+		const str = value.toString();
+		if (!str.includes('.')) {
+			return decimal ? 2 : 0;
+		}
+		return str.split('.')[1].length;
+	}
+
+	const decimalPlaces = $derived(
+		min != null ? getDecimalPlaces(min) : max != null ? getDecimalPlaces(max) : decimal ? 2 : 0
+	);
+
+	function getDecimalValue(): string {
+		// Use toFixed to bound decimal places, then parseFloat to drop trailing
+		// zeros without re-introducing scientific notation. There is no built-in
+		// "as many decimals as requested but no more" formatter.
+		return value ? parseFloat(value.toFixed(decimalPlaces)).toString() : '';
+	}
+
+	const newValue = $derived.by(() => {
+		const v = decimal ? parseFloat(_value) : parseInt(_value);
+		if (isNaN(v)) {
+			return null;
+		}
+		return v;
+	});
+
+	$effect(() => {
+		if (coerceValue) {
+			const v =
+				min != undefined && newValue != null && min > newValue
+					? min
+					: max != undefined && newValue != null && max < newValue
+						? max
+						: newValue;
+
+			value = v;
+		} else {
+			value = newValue;
+		}
+	});
+
+	function refocus() {
+		tick()
+			.then(() => {
+				if (inputRef && document.activeElement !== inputRef) {
+					inputRef.focus();
+				}
+			})
+			.catch(devCatch);
+	}
+
+	function getPrevValue() {
+		if (inputRef) {
+			if (
+				(inputRef.selectionStart === 0 && inputRef.selectionEnd === _value.length) ||
+				(inputRef.selectionEnd === 0 && inputRef.selectionStart === _value.length)
+			) {
+				return '';
+			}
+		}
+		return _value;
+	}
+
+	function addDecimal() {
+		_value = getPrevValue() + '.';
+		untrack(refocus);
+	}
+
+	/* due to the fact that number inputs won't allow a leading dot, we have to use a text input 
+		this doesn't add a number, but concatenated the digit to the end of the string
+	*/
+	function addDigit(digit: string) {
+		const prevValue = getPrevValue();
+		_value = prevValue + digit;
+	}
+
+	function backspace() {
+		const preVvalue = getPrevValue();
+		const v = preVvalue && _value.slice(0, _value.length - 1);
+		_value = v;
+		untrack(refocus);
+	}
+
+	function minus() {
+		const v = ((decimal ? parseFloat(_value) : parseInt(_value)) || 0) - 1;
+
+		_value = (min != null ? Math.max(min, v) : v).toString();
+		untrack(refocus);
+	}
+
+	function plus() {
+		const v = ((decimal ? parseFloat(_value) : parseInt(_value)) || 0) + 1;
+
+		_value = (max != null ? Math.min(max, v) : v).toString();
+		untrack(refocus);
+	}
+
+	const lessThanMin = $derived(min != null && (value == null || value < min));
+	const moreThanMax = $derived(max != null && (value == null || value > max));
+
+	// Precompute disabled state per digit so the 10 buttons do not each evaluate
+	// the same arithmetic on every render.
+	const digitDisabled = $derived.by(() => {
+		const out = new Array<boolean>(10);
+		const base = (value ?? 0) * 10;
+		for (let i = 0; i < 10; i++) {
+			out[i] = max != null && base + i > max;
+		}
+		return out;
+	});
+
+	function onDigitClick(e: MouseEvent) {
+		const digit = (e.currentTarget as HTMLButtonElement).dataset.digit;
+		if (digit != null) {
+			addDigit(digit);
+		}
+	}
+</script>
+
+<div class="number-input-wrapper">
+	<div class="left-side">
+		<div class="value-container">
+			<!-- textInput is the only available option when you try to add a decimal point programmatically -->
+			<TextInput
+				labelTop={label}
+				{placeholder}
+				{labelRight}
+				bind:inputRef
+				bind:value={_value}
+				variant={InputVariant.Modal}
+				required
+				invalid={lessThanMin || moreThanMax}
+			/>
+			{#if max != undefined}
+				<TextInput
+					value={`${max}`}
+					labelTop="Maximum"
+					selectNone
+					disabled
+					variant={InputVariant.Modal}
+				/>
+			{/if}
+		</div>
+		<div class="plus-minus">
+			<button
+				onkeydown={passthrough}
+				type="button"
+				disabled={value != null && min != null && value <= min}
+				onclick={minus}><Icon name="minus" /></button
+			>
+			<button
+				onkeydown={passthrough}
+				type="button"
+				disabled={value != null && max != null && value >= max}
+				onclick={plus}><Icon name="plus" /></button
+			>
+		</div>
+	</div>
+	<div class="number-grid">
+		{#each DIGITS as digit (digit)}
+			<button
+				onkeydown={passthrough}
+				type="button"
+				data-digit={digit}
+				disabled={digitDisabled[digit]}
+				onclick={onDigitClick}>{digit}</button
+			>
+		{/each}
+		<button
+			onkeydown={passthrough}
+			type="button"
+			disabled={!decimal || (value != null && value % 1 !== 0) || _value.endsWith('.')}
+			onclick={addDecimal}>.</button
+		>
+		<button
+			onkeydown={passthrough}
+			type="button"
+			data-digit="0"
+			disabled={digitDisabled[0]}
+			onclick={onDigitClick}>0</button
+		>
+		<button
+			onkeydown={passthrough}
+			type="button"
+			disabled={_value.length === 0}
+			onclick={backspace}>⌫</button
+		>
+	</div>
+</div>
+
 <style>button {
   color: #3a4952;
   fill: #3a4952;
@@ -309,4 +309,4 @@ button {
 }
 .number-input-wrapper .number-grid {
   flex-grow: 2;
-}</style>
+}</style>

package/dist/Components/Touch/NumberModal.svelte

@@ -1,81 +1,81 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { useAsyncFlag } from '../../Helpers/AsyncFlag.svelte.js';
-	import { passthrough } from '../../Helpers/Helpers.svelte.js';
-	import NumberKeyboard from './NumberKeyboard.svelte';
-	import type { NumberModalProps } from './NumberModalProps.js';
-	import TouchModal from './TouchModal.svelte';
-	let {
-		coerceValue = false,
-		header,
-		value,
-		label,
-		placeholder,
-		min,
-		max,
-		cancelEditing,
-		confirm,
-		decimal,
-		isValid,
-		explanation,
-	}: NumberModalProps = $props();
-
-	// Mirror external `value` snapshots into a writable derived. Reads from
-	// `value` are tracked; writes happen through the assignment binding
-	// fed back to `NumberKeyboard`.
-	let tempValue: number | null = $derived(value);
-
-	const isAcceptableValue = useAsyncFlag(
-		() => (tempValue == null ? false : (isValid?.(tempValue) ?? true)),
-		false
-	);
-</script>
-
-<TouchModal
-	onclose={() => {
-		cancelEditing();
-	}}
-	{header}
-	mandatory
-	onsubmit={(e: SubmitEvent) => {
-		e.preventDefault();
-		if (tempValue == null) {
-			return;
-		}
-		confirm(tempValue);
-	}}
-	{explanation}
->
-	<div class="number-input-wrapper">
-		<NumberKeyboard
-			{coerceValue}
-			{min}
-			{max}
-			{label}
-			{placeholder}
-			bind:value={tempValue}
-			{decimal}
-		/>
-	</div>
-	{#snippet footer()}
-		<div class="modal-footer">
-			<button
-				onkeydown={passthrough}
-				type="submit"
-				disabled={!isAcceptableValue.value}>Confirm</button
-			>
-			<button
-				onkeydown={passthrough}
-				type="button"
-				onclick={() => {
-					cancelEditing();
-				}}>Cancel</button
-			>
-		</div>
-	{/snippet}
-</TouchModal>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { useAsyncFlag } from '../../Helpers/AsyncFlag.svelte.js';
+	import { passthrough } from '../../Helpers/Helpers.svelte.js';
+	import NumberKeyboard from './NumberKeyboard.svelte';
+	import type { NumberModalProps } from './NumberModalProps.js';
+	import TouchModal from './TouchModal.svelte';
+	let {
+		coerceValue = false,
+		header,
+		value,
+		label,
+		placeholder,
+		min,
+		max,
+		cancelEditing,
+		confirm,
+		decimal,
+		isValid,
+		explanation,
+	}: NumberModalProps = $props();
+
+	// Mirror external `value` snapshots into a writable derived. Reads from
+	// `value` are tracked; writes happen through the assignment binding
+	// fed back to `NumberKeyboard`.
+	let tempValue: number | null = $derived(value);
+
+	const isAcceptableValue = useAsyncFlag(
+		() => (tempValue == null ? false : (isValid?.(tempValue) ?? true)),
+		false
+	);
+</script>
+
+<TouchModal
+	onclose={() => {
+		cancelEditing();
+	}}
+	{header}
+	mandatory
+	onsubmit={(e: SubmitEvent) => {
+		e.preventDefault();
+		if (tempValue == null) {
+			return;
+		}
+		confirm(tempValue);
+	}}
+	{explanation}
+>
+	<div class="number-input-wrapper">
+		<NumberKeyboard
+			{coerceValue}
+			{min}
+			{max}
+			{label}
+			{placeholder}
+			bind:value={tempValue}
+			{decimal}
+		/>
+	</div>
+	{#snippet footer()}
+		<div class="modal-footer">
+			<button
+				onkeydown={passthrough}
+				type="submit"
+				disabled={!isAcceptableValue.value}>Confirm</button
+			>
+			<button
+				onkeydown={passthrough}
+				type="button"
+				onclick={() => {
+					cancelEditing();
+				}}>Cancel</button
+			>
+		</div>
+	{/snippet}
+</TouchModal>
+
 <style>dialog {
   overflow: clip;
   background-color: #e9ecf1;
@@ -342,4 +342,4 @@ button {
 }
 .modal-footer button[type=submit]:not([disabled]):focus {
   outline-offset: -2px;
-}</style>
+}</style>