@lavalogic/scoria 0.33.0 → 0.35.0

package/dist/Components/ThreeStateRadio.svelte

@@ -1,126 +1,126 @@
-<svelte:options runes />
-
-<script lang="ts" module>
-	import { Colour, ColourSet } from '../scss/colours.js';
-	import { Ternary } from '../Types/Internal/Ternary.js';
-	import { untrack } from 'svelte';
-	import Action from './Action.svelte';
-	import type { ThreeStateRadioProps } from './ThreeStateRadioProps.js';
-</script>
-
-<script lang="ts">
-	let {
-		value = $bindable(Ternary.Neutral),
-		// id = generateShortUUID(),
-		label,
-		disabled,
-		isValid,
-		onchange,
-		noDisabled = false,
-		yesDisabled = false,
-		neutralDisabled = false,
-		noLabel,
-		yesLabel,
-		neutralLabel,
-		noIcon,
-		yesIcon,
-		neutralIcon
-	}: ThreeStateRadioProps = $props();
-
-	let textValue = $state('');
-
-	$effect(() => {
-		void value;
-		untrack(() => {
-			if (value === Ternary.False && textValue !== '0') {
-				textValue = '0';
-			} else if (value === Ternary.Neutral && textValue !== '-1') {
-				textValue = '-1';
-			} else if (value === Ternary.True && textValue !== '1') {
-				textValue = '1';
-			}
-		});
-	});
-
-	$effect(() => {
-		void textValue;
-		untrack(() => {
-			if (textValue === '0' && value !== Ternary.False) {
-				value = Ternary.False;
-				onchange?.(Ternary.False);
-			} else if (textValue === '-1' && value !== Ternary.Neutral) {
-				value = Ternary.Neutral;
-				onchange?.(Ternary.Neutral);
-			} else if (textValue === '1' && value !== Ternary.True) {
-				value = Ternary.True;
-				onchange?.(Ternary.True);
-			}
-		});
-	});
-</script>
-
-<div class="text-label" class:invalid={isValid === false}>
-	{#if label != undefined}
-		<span>{label}</span>
-	{/if}
-
-	<div class="radios">
-		<label>
-			<Action
-				disabled={disabled || noDisabled}
-				colourSet={value === Ternary.False ? ColourSet.Primary : ColourSet.Auxiliary}
-				icon={{
-					name: 'circle-cross',
-					...noIcon,
-					colour: value === Ternary.False ? undefined : Colour['$ui-blue-5']
-				}}
-				label={noLabel ?? 'No'}
-				onclick={() => {
-					textValue = '0';
-				}}
-			/>
-			<input disabled={disabled || noDisabled} type="radio" bind:group={textValue} value="0" />
-		</label>
-		<label>
-			<Action
-				disabled={disabled || neutralDisabled}
-				colourSet={value === Ternary.Neutral ? ColourSet.Primary : ColourSet.Auxiliary}
-				icon={{
-					name: 'database',
-					...neutralIcon,
-					colour: value === Ternary.Neutral ? undefined : Colour['$ui-blue-5']
-				}}
-				label={neutralLabel ?? 'Allow system to decide'}
-				onclick={() => {
-					textValue = '-1';
-				}}
-			/>
-			<input
-				disabled={disabled || neutralDisabled}
-				type="radio"
-				bind:group={textValue}
-				value="-1"
-			/>
-		</label>
-		<label>
-			<Action
-				disabled={disabled || yesDisabled}
-				colourSet={value === Ternary.True ? ColourSet.Primary : ColourSet.Auxiliary}
-				icon={{
-					name: 'circle-tick',
-					...yesIcon,
-					colour: value === Ternary.True ? undefined : Colour['$ui-blue-5']
-				}}
-				label={yesLabel ?? 'Yes'}
-				onclick={() => {
-					textValue = '1';
-				}}
-			/>
-			<input disabled={disabled || yesDisabled} type="radio" bind:group={textValue} value="1" />
-		</label>
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { Colour, ColourSet } from '../scss/colours.js';
+	import { Ternary } from '../Types/Internal/Ternary.js';
+	import { untrack } from 'svelte';
+	import Action from './Action.svelte';
+	import type { ThreeStateRadioProps } from './ThreeStateRadioProps.js';
+</script>
+
+<script lang="ts">
+	let {
+		value = $bindable(Ternary.Neutral),
+		// id = generateShortUUID(),
+		label,
+		disabled,
+		isValid,
+		onchange,
+		noDisabled = false,
+		yesDisabled = false,
+		neutralDisabled = false,
+		noLabel,
+		yesLabel,
+		neutralLabel,
+		noIcon,
+		yesIcon,
+		neutralIcon
+	}: ThreeStateRadioProps = $props();
+
+	let textValue = $state('');
+
+	$effect(() => {
+		void value;
+		untrack(() => {
+			if (value === Ternary.False && textValue !== '0') {
+				textValue = '0';
+			} else if (value === Ternary.Neutral && textValue !== '-1') {
+				textValue = '-1';
+			} else if (value === Ternary.True && textValue !== '1') {
+				textValue = '1';
+			}
+		});
+	});
+
+	$effect(() => {
+		void textValue;
+		untrack(() => {
+			if (textValue === '0' && value !== Ternary.False) {
+				value = Ternary.False;
+				onchange?.(Ternary.False);
+			} else if (textValue === '-1' && value !== Ternary.Neutral) {
+				value = Ternary.Neutral;
+				onchange?.(Ternary.Neutral);
+			} else if (textValue === '1' && value !== Ternary.True) {
+				value = Ternary.True;
+				onchange?.(Ternary.True);
+			}
+		});
+	});
+</script>
+
+<div class="text-label" class:invalid={isValid === false}>
+	{#if label != undefined}
+		<span>{label}</span>
+	{/if}
+
+	<div class="radios">
+		<label>
+			<Action
+				disabled={disabled || noDisabled}
+				colourSet={value === Ternary.False ? ColourSet.Primary : ColourSet.Auxiliary}
+				icon={{
+					name: 'circle-cross',
+					...noIcon,
+					colour: value === Ternary.False ? undefined : Colour['$ui-blue-5']
+				}}
+				label={noLabel ?? 'No'}
+				onclick={() => {
+					textValue = '0';
+				}}
+			/>
+			<input disabled={disabled || noDisabled} type="radio" bind:group={textValue} value="0" />
+		</label>
+		<label>
+			<Action
+				disabled={disabled || neutralDisabled}
+				colourSet={value === Ternary.Neutral ? ColourSet.Primary : ColourSet.Auxiliary}
+				icon={{
+					name: 'database',
+					...neutralIcon,
+					colour: value === Ternary.Neutral ? undefined : Colour['$ui-blue-5']
+				}}
+				label={neutralLabel ?? 'Allow system to decide'}
+				onclick={() => {
+					textValue = '-1';
+				}}
+			/>
+			<input
+				disabled={disabled || neutralDisabled}
+				type="radio"
+				bind:group={textValue}
+				value="-1"
+			/>
+		</label>
+		<label>
+			<Action
+				disabled={disabled || yesDisabled}
+				colourSet={value === Ternary.True ? ColourSet.Primary : ColourSet.Auxiliary}
+				icon={{
+					name: 'circle-tick',
+					...yesIcon,
+					colour: value === Ternary.True ? undefined : Colour['$ui-blue-5']
+				}}
+				label={yesLabel ?? 'Yes'}
+				onclick={() => {
+					textValue = '1';
+				}}
+			/>
+			<input disabled={disabled || yesDisabled} type="radio" bind:group={textValue} value="1" />
+		</label>
+	</div>
+</div>
+
 <style>.text-label {
   box-sizing: border-box;
   height: max(var(--input-height, 3rem), 2rem);
@@ -201,4 +201,4 @@
 
 input {
   display: none;
-}</style>
+}</style>

package/dist/Components/Touch/BoolCard.svelte

@@ -1,54 +1,54 @@
-<svelte:options runes />
-
-<script lang="ts" module>
-	import { passthrough } from '../../Helpers/Helpers.svelte.js';
-	import { Colour } from '../../scss/colours.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import type { Snippet } from 'svelte';
-	import Icon from '../Icon.svelte';
-	import type { IconProps } from '../IconProps.js';
-
-	export interface BoolCardProps {
-		value?: boolean;
-		disabled?: boolean | undefined;
-		onclick?: (e: MouseEvent) => void;
-		children?: Snippet;
-		nowidth?: boolean;
-		size?: Size;
-	}
-</script>
-
-<script lang="ts">
-	let {
-		value = $bindable(false),
-		disabled,
-		onclick,
-		children,
-		nowidth,
-		size = Size.Medium
-	}: BoolCardProps = $props();
-
-	const iconName = $derived(value ? 'circle-tick' : ('circle' as IconProps['name']));
-</script>
-
-<button
-	class:small={size == Size.Small}
-	onkeydown={passthrough}
-	disabled={disabled || undefined}
-	class:nowidth
-	type="button"
-	class="card"
-	class:ticked={value}
-	{onclick}
->
-	{#if children}
-		<span class="value" class:small={size == Size.Small}>{@render children()}</span>{/if}<Icon
-		name={iconName}
-		size={Size.DoubleXLarge}
-		colour={value ? Colour['$ui-white'] : undefined}
-	/>
-</button>
-
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { passthrough } from '../../Helpers/Helpers.svelte.js';
+	import { Colour } from '../../scss/colours.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import type { Snippet } from 'svelte';
+	import Icon from '../Icon.svelte';
+	import type { IconProps } from '../IconProps.js';
+
+	export interface BoolCardProps {
+		value?: boolean;
+		disabled?: boolean | undefined;
+		onclick?: (e: MouseEvent) => void;
+		children?: Snippet;
+		nowidth?: boolean;
+		size?: Size;
+	}
+</script>
+
+<script lang="ts">
+	let {
+		value = $bindable(false),
+		disabled,
+		onclick,
+		children,
+		nowidth,
+		size = Size.Medium
+	}: BoolCardProps = $props();
+
+	const iconName = $derived(value ? 'circle-tick' : ('circle' as IconProps['name']));
+</script>
+
+<button
+	class:small={size == Size.Small}
+	onkeydown={passthrough}
+	disabled={disabled || undefined}
+	class:nowidth
+	type="button"
+	class="card"
+	class:ticked={value}
+	{onclick}
+>
+	{#if children}
+		<span class="value" class:small={size == Size.Small}>{@render children()}</span>{/if}<Icon
+		name={iconName}
+		size={Size.DoubleXLarge}
+		colour={value ? Colour['$ui-white'] : undefined}
+	/>
+</button>
+
 <style>button.card {
   color: #3a4952;
   fill: #3a4952;
@@ -178,4 +178,4 @@ button.card .value.small {
   font-size: 1.1875rem;
   font-weight: 600;
   padding: 0;
-}</style>
+}</style>