@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/Touch/NumberKeyboard.svelte

@@ -1,270 +1,227 @@
-<svelte:options runes />
-
-<script 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';
-
-	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 {
-		//HACK this absolutely moronic line is intentional. It's the best way to allow arbitrary decimal places without adding leading zeroes
-		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;
-			}
-
-			untrack(() => {
-				refocus();
-			});
-		}
-	});
-
-	function refocus() {
-		tick()
-			.then(() => {
-				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() + '.';
-		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;
-	}
-
-	function minus() {
-		const v = ((decimal ? parseFloat(_value) : parseInt(_value)) || 0) - 1;
-
-		_value = (min != null ? Math.max(min, v) : v).toString();
-	}
-
-	function plus() {
-		const v = ((decimal ? parseFloat(_value) : parseInt(_value)) || 0) + 1;
-
-		_value = (max != null ? Math.min(max, v) : v).toString();
-	}
-
-	const lessThanMin = $derived(min != null && (value == null || value < min));
-	const moreThanMax = $derived(max != null && (value == null || value > max));
-</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">
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={(value != null && max && (value * 10 || 0) + 1 > max) || false}
-			onclick={() => {
-				addDigit('1');
-			}}>1</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={(value != null && max && (value * 10 || 0) + 2 > max) || false}
-			onclick={() => {
-				addDigit('2');
-			}}>2</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={(value != null && max && (value * 10 || 0) + 3 > max) || false}
-			onclick={() => {
-				addDigit('3');
-			}}>3</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={(value != null && max && (value * 10 || 0) + 4 > max) || false}
-			onclick={() => {
-				addDigit('4');
-			}}>4</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={(value != null && max && (value * 10 || 0) + 5 > max) || false}
-			onclick={() => {
-				addDigit('5');
-			}}>5</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={(value != null && max && (value * 10 || 0) + 6 > max) || false}
-			onclick={() => {
-				addDigit('6');
-			}}>6</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={(value != null && max && (value * 10 || 0) + 7 > max) || false}
-			onclick={() => {
-				addDigit('7');
-			}}>7</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={(value != null && max && (value * 10 || 0) + 8 > max) || false}
-			onclick={() => {
-				addDigit('8');
-			}}>8</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={(value != null && max && (value * 10 || 0) + 9 > max) || false}
-			onclick={() => {
-				addDigit('9');
-			}}>9</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={!decimal || (value != null && value % 1 !== 0) || _value.endsWith('.')}
-			onclick={addDecimal}>.</button
-		>
-		<button
-			onkeydown={passthrough}
-			type="button"
-			disabled={(value != null && max && (value * 10 || 0) > max) || false}
-			onclick={() => {
-				addDigit('0');
-			}}>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;
@@ -352,4 +309,4 @@ button {
 }
 .number-input-wrapper .number-grid {
   flex-grow: 2;
-}</style>
+}</style>

package/dist/Components/Touch/NumberKeyboardProps.d.ts

@@ -1,11 +1,30 @@
+/**
+ * Props for `NumberKeyboard`, the on-screen numeric keypad used by
+ * `NumberModal` and standalone touch flows. Tracks its value as a string
+ * internally (because `<input type="number">` cannot host a leading dot)
+ * and surfaces a parsed `number | null` via the bindable `value`.
+ */
 export interface NumberKeyboardProps {
+    /** Current numeric value. Bindable. `null` when the field is empty. */
     value: number | null;
+    /** Label rendered above the input. */
     label?: string | undefined;
+    /** Trailing label rendered to the right of the input. */
     labelRight?: string;
+    /** Placeholder text shown when the value is empty. */
     placeholder?: string | undefined;
+    /** Lower bound. Used both for validation and to clamp when `coerceValue` is true. */
     min?: number | undefined;
+    /** Upper bound. Also disables digit buttons that would exceed it. */
     max?: number | undefined;
+    /** When true, the keypad permits a decimal separator. Defaults to false. */
     decimal?: boolean;
+    /** Two-way bindable reference to the underlying input element. */
     inputRef?: HTMLInputElement | undefined;
+    /**
+     * When true, values are clamped to `[min, max]` before being written
+     * back to `value`. When false, the value is reflected as typed and the
+     * caller is expected to validate.
+     */
     coerceValue?: boolean;
 }