@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/Touch/NumberKeyboard.svelte

@@ -1,227 +1,190 @@
-<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;
+<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";
+const DIGITS = Object.freeze([
+	1,
+	2,
+	3,
+	4,
+	5,
+	6,
+	7,
+	8,
+	9
+]);
+</script>
+
+<script lang="ts">let { value = $bindable(null), label, labelRight, placeholder, min, max, decimal = false, inputRef = $bindable(), coerceValue = false } = $props();
+let _value = $derived(value != null && value % 1 == 0 ? value.toString() : getDecimalValue());
+function getDecimalPlaces(value) {
+	const str = value.toString();
+	if (!str.includes(".")) {
+		return decimal ? 2 : 0;
 	}
-
-	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() : '';
+	return str.split(".")[1].length;
+}
+const decimalPlaces = $derived(min != null ? getDecimalPlaces(min) : max != null ? getDecimalPlaces(max) : decimal ? 2 : 0);
+function getDecimalValue() {
+	// 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;
 	}
-
-	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);
+	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 getPrevValue() {
-		if (inputRef) {
-			if (
-				(inputRef.selectionStart === 0 && inputRef.selectionEnd === _value.length) ||
-				(inputRef.selectionEnd === 0 && inputRef.selectionStart === _value.length)
-			) {
-				return '';
-			}
+});
+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);
+	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) {
+	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(10);
+	const base = (value ?? 0) * 10;
+	for (let i = 0; i < 10; i++) {
+		out[i] = max != null && base + i > max;
 	}
-
-	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);
-		}
+	return out;
+});
+function onDigitClick(e) {
+	const digit = e.currentTarget.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>
-
+}
+</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 +272,4 @@ button {
 }
 .number-input-wrapper .number-grid {
   flex-grow: 2;
-}</style>
+}</style>

package/dist/Components/Touch/NumberModal.svelte

@@ -1,81 +1,61 @@
-<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 TouchModal from "./TouchModal.svelte";
+let { coerceValue = false, header, value, label, placeholder, min, max, cancelEditing, confirm, decimal, isValid, explanation } = $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 = $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 +322,4 @@ button {
 }
 .modal-footer button[type=submit]:not([disabled]):focus {
   outline-offset: -2px;
-}</style>
+}</style>

package/dist/Components/Touch/PlusMinusCard.svelte

@@ -1,48 +1,45 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { Size } from '../../Types/Internal/Size.js';
-	import Action from '../Action.svelte';
-	import type { PlusMinusCardProps } from './PlusMinusCardProps.js';
-
-	let { callback, disabled = false, children }: PlusMinusCardProps = $props();
-</script>
-
-<div
-	class="card pad-right"
-	class:disabled
->
-	<div class="icon-left">
-		<Action
-			{disabled}
-			label="Decrement"
-			onclick={() => {
-				callback(-1);
-			}}
-			icon={{
-				name: 'circle-minus',
-				size: Size.DoubleXLarge,
-			}}
-			size={Size.DoubleXLarge}
-		/>
-	</div>
-	<span class="value">{@render children()}</span>
-	<div class="icon-right">
-		<Action
-			{disabled}
-			label="Increment"
-			onclick={() => {
-				callback(1);
-			}}
-			icon={{
-				name: 'circle-plus',
-				size: Size.DoubleXLarge,
-			}}
-			size={Size.DoubleXLarge}
-		/>
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">import { Size } from "../../Types/Internal/Size.js";
+import Action from "../Action.svelte";
+let { callback, disabled = false, children } = $props();
+</script>
+
+<div
+	class="card pad-right"
+	class:disabled
+>
+	<div class="icon-left">
+		<Action
+			{disabled}
+			label="Decrement"
+			onclick={() => {
+				callback(-1);
+			}}
+			icon={{
+				name: 'circle-minus',
+				size: Size.DoubleXLarge,
+			}}
+			size={Size.DoubleXLarge}
+		/>
+	</div>
+	<span class="value">{@render children()}</span>
+	<div class="icon-right">
+		<Action
+			{disabled}
+			label="Increment"
+			onclick={() => {
+				callback(1);
+			}}
+			icon={{
+				name: 'circle-plus',
+				size: Size.DoubleXLarge,
+			}}
+			size={Size.DoubleXLarge}
+		/>
+	</div>
+</div>
+
 <style>.card {
   color: #3a4952;
   fill: #3a4952;
@@ -91,4 +88,4 @@
 .card.disabled {
   background-color: #f4f7f9;
   color: #8096a5;
-}</style>
+}</style>