@lavalogic/scoria 0.34.0 → 0.35.0

package/dist/Components/Touch/ModalExplanation.svelte

@@ -1,22 +1,22 @@
-<svelte:options runes />
-
-<script lang="ts" module>
-	import type { Snippet } from 'svelte';
-
-	export interface ModalExplanationProps {
-		width?: string;
-		children: Snippet;
-		nowrap?: boolean;
-	}
-</script>
-
-<script lang="ts">
-	let { width, children, nowrap }: ModalExplanationProps = $props();
-</script>
-
-<!-- {width ? 0 : "1rem"} -->
-<p class:nowrap style="--width: {width}; --padding: 0;">{@render children()}</p>
-
+<svelte:options runes />
+
+<script lang="ts" module>
+	import type { Snippet } from 'svelte';
+
+	export interface ModalExplanationProps {
+		width?: string;
+		children: Snippet;
+		nowrap?: boolean;
+	}
+</script>
+
+<script lang="ts">
+	let { width, children, nowrap }: ModalExplanationProps = $props();
+</script>
+
+<!-- {width ? 0 : "1rem"} -->
+<p class:nowrap style="--width: {width}; --padding: 0;">{@render children()}</p>
+
 <style>p {
   padding: var(--padding);
   color: #3a4952;
@@ -24,4 +24,4 @@
 }
 p.nowrap {
   white-space: pre-line;
-}</style>
+}</style>

package/dist/Components/Touch/NumberKeyboard.svelte

@@ -1,270 +1,270 @@
-<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 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>
+
 <style>button {
   color: #3a4952;
   fill: #3a4952;
@@ -352,4 +352,4 @@ button {
 }
 .number-input-wrapper .number-grid {
   flex-grow: 2;
-}</style>
+}</style>