@lavalogic/scoria 0.34.0 → 0.35.0

package/dist/Components/DimensionInput.svelte

@@ -1,186 +1,186 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { InputVariant } from '../Types/Internal/InputVariant.js';
-	import type { Centimetres } from '../Types/Internal/Misc.js';
-	import type { DimensionInputProps } from './DimensionInputProps.js';
-
-	const min = 0;
-	let {
-		id,
-		x = $bindable(null),
-		y = $bindable(null),
-		z = $bindable(null),
-
-		// labelTop,
-		// rightIcon,
-		// onLeftIconClick,
-		// onRightIconClick,
-
-		max,
-		placeholder,
-		required = false,
-		variant = InputVariant.Default,
-		decimal = false,
-		invalid = false,
-		showErrorColours = false,
-		disabled,
-
-		leftIcon,
-
-		onblur,
-		onfocus,
-		onkeydown,
-		oninput,
-
-		inputRef = $bindable(),
-		'data-type': dataType,
-	}: DimensionInputProps = $props();
-
-	// NOTE unable to edit signature
-	function xNumberValidator(_node: HTMLInputElement, _newValue: number | null | undefined) {
-		// function xNumberValidator() {
-		return {
-			update(newValue: number) {
-				const underMinimum = min > newValue;
-				const overMaximum = max != undefined && max < newValue;
-
-				x = (
-					isNaN(newValue) ? 0 : underMinimum ? min : overMaximum ? max : newValue
-				) as Centimetres;
-			},
-		};
-	}
-	function yNumberValidator(_node: HTMLInputElement, _newValue: number | null | undefined) {
-		return {
-			update(newValue: number) {
-				const underMinimum = min > newValue;
-				const overMaximum = max != undefined && max < newValue;
-
-				y = (
-					isNaN(newValue) ? 0 : underMinimum ? min : overMaximum ? max : newValue
-				) as Centimetres;
-			},
-		};
-	}
-
-	function zNumberValidator(_node: HTMLInputElement, _newValue: number | null | undefined) {
-		// function zNumberValidator() {
-		return {
-			update(newValue: number) {
-				const underMinimum = min > newValue;
-				const overMaximum = max != undefined && max < newValue;
-
-				z = (
-					isNaN(newValue) ? 0 : underMinimum ? min : overMaximum ? max : newValue
-				) as Centimetres;
-			},
-		};
-	}
-	// ^
-
-	let isInvalid = $derived(
-		showErrorColours &&
-			((required &&
-				(x == null ||
-					x.toString().trim() === '' ||
-					y == null ||
-					y.toString().trim() === '' ||
-					z == null ||
-					z.toString().trim() === '')) ||
-				invalid)
-	);
-</script>
-
-<div
-	class="error-wrapper"
-	class:for-modal={variant == InputVariant.Modal}
-	class:for-table={variant == InputVariant.Table}
->
-	<span
-		class="top-label"
-		class:for-default={variant === InputVariant.Default}
-		class:invalid={isInvalid}>Dimensions - <span class="optional">optional</span></span
-	>
-	{#if variant === InputVariant.Default}
-		<span class="border">Dimensions - <span class="optional">optional</span></span>
-	{/if}
-	<!-- style="--background-colour: {leftIcon?.backgroundColour ?? rightIcon?.backgroundColour};" -->
-	<div
-		class="icon-container"
-		class:for-modal={variant == InputVariant.Modal}
-	>
-		<input
-			{id}
-			class:for-default={variant === InputVariant.Default}
-			data-type={dataType}
-			use:xNumberValidator={x}
-			class:left-pad={leftIcon != undefined}
-			class:for-modal={variant == InputVariant.Modal}
-			type="number"
-			bind:value={x as number}
-			{onblur}
-			{onfocus}
-			{onkeydown}
-			{oninput}
-			bind:this={inputRef}
-			{placeholder}
-			{required}
-			{disabled}
-			{min}
-			{max}
-			step={decimal ? 0.01 : 1}
-		/>
-		<input
-			{id}
-			class:for-default={variant === InputVariant.Default}
-			data-type={dataType}
-			use:yNumberValidator={y}
-			class:left-pad={leftIcon != undefined}
-			class:for-modal={variant == InputVariant.Modal}
-			type="number"
-			bind:value={y as number}
-			{onblur}
-			{onfocus}
-			{onkeydown}
-			{oninput}
-			bind:this={inputRef}
-			{placeholder}
-			{required}
-			{disabled}
-			{min}
-			{max}
-			step={decimal ? 0.01 : 1}
-		/>
-		<input
-			{id}
-			class:for-default={variant === InputVariant.Default}
-			data-type={dataType}
-			use:zNumberValidator={z}
-			class:left-pad={leftIcon != undefined}
-			class:for-modal={variant == InputVariant.Modal}
-			type="number"
-			bind:value={z as number}
-			{onblur}
-			{onfocus}
-			{onkeydown}
-			{oninput}
-			bind:this={inputRef}
-			{placeholder}
-			{required}
-			{disabled}
-			{min}
-			{max}
-			step={decimal ? 0.01 : 1}
-		/>
-		<div class="spacer"></div>
-		<span
-			class="right-label inset"
-			class:for-modal={variant == InputVariant.Modal}>cm</span
-		>
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { InputVariant } from '../Types/Internal/InputVariant.js';
+	import type { Centimetres } from '../Types/Internal/Misc.js';
+	import type { DimensionInputProps } from './DimensionInputProps.js';
+
+	const min = 0;
+	let {
+		id,
+		x = $bindable(null),
+		y = $bindable(null),
+		z = $bindable(null),
+
+		// labelTop,
+		// rightIcon,
+		// onLeftIconClick,
+		// onRightIconClick,
+
+		max,
+		placeholder,
+		required = false,
+		variant = InputVariant.Default,
+		decimal = false,
+		invalid = false,
+		showErrorColours = false,
+		disabled,
+
+		leftIcon,
+
+		onblur,
+		onfocus,
+		onkeydown,
+		oninput,
+
+		inputRef = $bindable(),
+		'data-type': dataType,
+	}: DimensionInputProps = $props();
+
+	// NOTE unable to edit signature
+	function xNumberValidator(_node: HTMLInputElement, _newValue: number | null | undefined) {
+		// function xNumberValidator() {
+		return {
+			update(newValue: number) {
+				const underMinimum = min > newValue;
+				const overMaximum = max != undefined && max < newValue;
+
+				x = (
+					isNaN(newValue) ? 0 : underMinimum ? min : overMaximum ? max : newValue
+				) as Centimetres;
+			},
+		};
+	}
+	function yNumberValidator(_node: HTMLInputElement, _newValue: number | null | undefined) {
+		return {
+			update(newValue: number) {
+				const underMinimum = min > newValue;
+				const overMaximum = max != undefined && max < newValue;
+
+				y = (
+					isNaN(newValue) ? 0 : underMinimum ? min : overMaximum ? max : newValue
+				) as Centimetres;
+			},
+		};
+	}
+
+	function zNumberValidator(_node: HTMLInputElement, _newValue: number | null | undefined) {
+		// function zNumberValidator() {
+		return {
+			update(newValue: number) {
+				const underMinimum = min > newValue;
+				const overMaximum = max != undefined && max < newValue;
+
+				z = (
+					isNaN(newValue) ? 0 : underMinimum ? min : overMaximum ? max : newValue
+				) as Centimetres;
+			},
+		};
+	}
+	// ^
+
+	let isInvalid = $derived(
+		showErrorColours &&
+			((required &&
+				(x == null ||
+					x.toString().trim() === '' ||
+					y == null ||
+					y.toString().trim() === '' ||
+					z == null ||
+					z.toString().trim() === '')) ||
+				invalid)
+	);
+</script>
+
+<div
+	class="error-wrapper"
+	class:for-modal={variant == InputVariant.Modal}
+	class:for-table={variant == InputVariant.Table}
+>
+	<span
+		class="top-label"
+		class:for-default={variant === InputVariant.Default}
+		class:invalid={isInvalid}>Dimensions - <span class="optional">optional</span></span
+	>
+	{#if variant === InputVariant.Default}
+		<span class="border">Dimensions - <span class="optional">optional</span></span>
+	{/if}
+	<!-- style="--background-colour: {leftIcon?.backgroundColour ?? rightIcon?.backgroundColour};" -->
+	<div
+		class="icon-container"
+		class:for-modal={variant == InputVariant.Modal}
+	>
+		<input
+			{id}
+			class:for-default={variant === InputVariant.Default}
+			data-type={dataType}
+			use:xNumberValidator={x}
+			class:left-pad={leftIcon != undefined}
+			class:for-modal={variant == InputVariant.Modal}
+			type="number"
+			bind:value={x as number}
+			{onblur}
+			{onfocus}
+			{onkeydown}
+			{oninput}
+			bind:this={inputRef}
+			{placeholder}
+			{required}
+			{disabled}
+			{min}
+			{max}
+			step={decimal ? 0.01 : 1}
+		/>
+		<input
+			{id}
+			class:for-default={variant === InputVariant.Default}
+			data-type={dataType}
+			use:yNumberValidator={y}
+			class:left-pad={leftIcon != undefined}
+			class:for-modal={variant == InputVariant.Modal}
+			type="number"
+			bind:value={y as number}
+			{onblur}
+			{onfocus}
+			{onkeydown}
+			{oninput}
+			bind:this={inputRef}
+			{placeholder}
+			{required}
+			{disabled}
+			{min}
+			{max}
+			step={decimal ? 0.01 : 1}
+		/>
+		<input
+			{id}
+			class:for-default={variant === InputVariant.Default}
+			data-type={dataType}
+			use:zNumberValidator={z}
+			class:left-pad={leftIcon != undefined}
+			class:for-modal={variant == InputVariant.Modal}
+			type="number"
+			bind:value={z as number}
+			{onblur}
+			{onfocus}
+			{onkeydown}
+			{oninput}
+			bind:this={inputRef}
+			{placeholder}
+			{required}
+			{disabled}
+			{min}
+			{max}
+			step={decimal ? 0.01 : 1}
+		/>
+		<div class="spacer"></div>
+		<span
+			class="right-label inset"
+			class:for-modal={variant == InputVariant.Modal}>cm</span
+		>
+	</div>
+</div>
+
 <style>input {
   box-sizing: border-box;
   height: 100%;
@@ -459,4 +459,4 @@ div.spacer {
 .icon-container input:last-of-type {
   border-radius: 0;
   border-left-color: transparent;
-}</style>
+}</style>

package/dist/Components/DragMenu/DragMenuHolder.svelte

@@ -1,108 +1,108 @@
-<svelte:options runes />
-
-<script lang="ts" generics="T">
-	import { type DndEvent, dndzone } from 'svelte-dnd-action';
-	import { flip } from 'svelte/animate';
-	import type { DragMenuHolderProps } from './DragMenuHolderProps.js';
-	import type { Draggable } from './Draggable.js';
-	import DraggableCard from './DraggableCard.svelte';
-
-	const {
-		items: originalItems,
-		onUpdate,
-		snippet: customSnippet,
-		transformToDraggable,
-		flipDurationMS = 60,
-		label
-	}: DragMenuHolderProps<T> = $props();
-
-	let items: Array<Draggable<T>> = $state([]);
-
-	function consider(newItems: Array<Draggable<T>>) {
-		items = newItems;
-	}
-	function finalise(newItems: Array<Draggable<T>>) {
-		items = newItems;
-		onUpdate(items.map((it) => it.original));
-	}
-
-	$effect.pre(() => {
-		void originalItems;
-		items = originalItems.map(transformToDraggable);
-	});
-
-	const snippet = $derived(customSnippet ?? draggableWithSelect);
-</script>
-
-{#snippet draggableWithSelect<T>(item: Draggable<T>, index: number)}
-	<DraggableCard
-		title={item.title}
-		subtitle={item.subtitle}
-		{index}
-		selectable
-		selected={item.selected}
-	/>
-{/snippet}
-
-<div class="wrapper">
-	{#if label}
-		<span class="top-label">{label}</span>
-		<span class="top-label-border">{label}</span>
-	{/if}
-	<div
-		class="dnd"
-		use:dndzone={{ items, flipDurationMs: flipDurationMS, delayTouchStart: 30 }}
-		onconsider={(e: CustomEvent<DndEvent<Draggable<T>>>) => {
-			consider(e.detail.items);
-		}}
-		onfinalize={(e: CustomEvent<DndEvent<Draggable<T>>>) => {
-			finalise(e.detail.items);
-		}}
-	>
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		{#each items as item, index (item.id)}
-			<!-- svelte-ignore a11y_click_events_have_key_events -->
-			<div
-				class="contents"
-				onclick={(e) => {
-					if (item.toggleSelected) {
-						e.stopPropagation();
-						item.toggleSelected();
-					}
-				}}
-				animate:flip={{ duration: flipDurationMS }}
-			>
-				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-				{@render snippet(item, index)}
-			</div>
-		{/each}
-	</div>
-</div>
-
-<!-- 
-tabindex="0"
-role="button"
-				onkeydown={(e) => {
-					const prevTarget = e.target;
-					console.log(e.key);
-					if (e.key == 'ArrowUp') {
-						e.stopPropagation();
-						up(item, index);
-					} else if (e.key == 'ArrowDown') {
-						e.stopPropagation();
-						down(item, index);
-					} else if (e.key == ' ') {
-						alert('SPACEBAR');
-					}
-					tick().then(() => {
-						if (prevTarget && 'focus' in prevTarget) {
-							(prevTarget as HTMLElement).focus();
-						} else {
-							console.warn(`prev target is undefined`);
-						}
-					});
-				}} -->
-
+<svelte:options runes />
+
+<script lang="ts" generics="T">
+	import { type DndEvent, dndzone } from 'svelte-dnd-action';
+	import { flip } from 'svelte/animate';
+	import type { DragMenuHolderProps } from './DragMenuHolderProps.js';
+	import type { Draggable } from './Draggable.js';
+	import DraggableCard from './DraggableCard.svelte';
+
+	const {
+		items: originalItems,
+		onUpdate,
+		snippet: customSnippet,
+		transformToDraggable,
+		flipDurationMS = 60,
+		label
+	}: DragMenuHolderProps<T> = $props();
+
+	let items: Array<Draggable<T>> = $state([]);
+
+	function consider(newItems: Array<Draggable<T>>) {
+		items = newItems;
+	}
+	function finalise(newItems: Array<Draggable<T>>) {
+		items = newItems;
+		onUpdate(items.map((it) => it.original));
+	}
+
+	$effect.pre(() => {
+		void originalItems;
+		items = originalItems.map(transformToDraggable);
+	});
+
+	const snippet = $derived(customSnippet ?? draggableWithSelect);
+</script>
+
+{#snippet draggableWithSelect<T>(item: Draggable<T>, index: number)}
+	<DraggableCard
+		title={item.title}
+		subtitle={item.subtitle}
+		{index}
+		selectable
+		selected={item.selected}
+	/>
+{/snippet}
+
+<div class="wrapper">
+	{#if label}
+		<span class="top-label">{label}</span>
+		<span class="top-label-border">{label}</span>
+	{/if}
+	<div
+		class="dnd"
+		use:dndzone={{ items, flipDurationMs: flipDurationMS, delayTouchStart: 30 }}
+		onconsider={(e: CustomEvent<DndEvent<Draggable<T>>>) => {
+			consider(e.detail.items);
+		}}
+		onfinalize={(e: CustomEvent<DndEvent<Draggable<T>>>) => {
+			finalise(e.detail.items);
+		}}
+	>
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		{#each items as item, index (item.id)}
+			<!-- svelte-ignore a11y_click_events_have_key_events -->
+			<div
+				class="contents"
+				onclick={(e) => {
+					if (item.toggleSelected) {
+						e.stopPropagation();
+						item.toggleSelected();
+					}
+				}}
+				animate:flip={{ duration: flipDurationMS }}
+			>
+				<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+				{@render snippet(item, index)}
+			</div>
+		{/each}
+	</div>
+</div>
+
+<!-- 
+tabindex="0"
+role="button"
+				onkeydown={(e) => {
+					const prevTarget = e.target;
+					console.log(e.key);
+					if (e.key == 'ArrowUp') {
+						e.stopPropagation();
+						up(item, index);
+					} else if (e.key == 'ArrowDown') {
+						e.stopPropagation();
+						down(item, index);
+					} else if (e.key == ' ') {
+						alert('SPACEBAR');
+					}
+					tick().then(() => {
+						if (prevTarget && 'focus' in prevTarget) {
+							(prevTarget as HTMLElement).focus();
+						} else {
+							console.warn(`prev target is undefined`);
+						}
+					});
+				}} -->
+
 <style>.top-label {
   position: absolute;
   left: 0.5rem;
@@ -158,4 +158,4 @@ div.dnd {
   gap: 0.5rem;
   padding: 0.5rem;
   outline-color: red;
-}</style>
+}</style>

package/dist/Components/DragMenu/DraggableCard.svelte

@@ -1,43 +1,43 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import Checkbox from '../Checkbox.svelte';
-	import type { DraggableCardProps } from './DraggableCardProps.js';
-
-	let {
-		selectable,
-		title,
-		subtitle,
-		index,
-		selected = $bindable(false),
-		touch = false,
-		toggleSelected
-	}: DraggableCardProps = $props();
-</script>
-
-<div class="card" class:touch>
-	{#if selectable}
-		<div class="limit-size" class:touch>
-			<Checkbox
-				value={selected}
-				onchange={(
-					e: Event & {
-						currentTarget: EventTarget & HTMLInputElement;
-					}
-				) => {
-					e.stopPropagation();
-					toggleSelected?.();
-				}}
-			/>
-		</div>
-	{/if}
-	<div class="text" class:touch>
-		<span class="title" class:touch>{title}</span>
-		<span class="subtitle" class:touch>{subtitle}</span>
-	</div>
-	<span class="row" class:touch>{index + 1}</span>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import Checkbox from '../Checkbox.svelte';
+	import type { DraggableCardProps } from './DraggableCardProps.js';
+
+	let {
+		selectable,
+		title,
+		subtitle,
+		index,
+		selected = $bindable(false),
+		touch = false,
+		toggleSelected
+	}: DraggableCardProps = $props();
+</script>
+
+<div class="card" class:touch>
+	{#if selectable}
+		<div class="limit-size" class:touch>
+			<Checkbox
+				value={selected}
+				onchange={(
+					e: Event & {
+						currentTarget: EventTarget & HTMLInputElement;
+					}
+				) => {
+					e.stopPropagation();
+					toggleSelected?.();
+				}}
+			/>
+		</div>
+	{/if}
+	<div class="text" class:touch>
+		<span class="title" class:touch>{title}</span>
+		<span class="subtitle" class:touch>{subtitle}</span>
+	</div>
+	<span class="row" class:touch>{index + 1}</span>
+</div>
+
 <style>.limit-size:not(.touch) {
   width: 1.5rem;
 }
@@ -134,4 +134,4 @@
   height: 1.75rem;
   width: 1.75rem;
   margin-right: 1rem;
-}</style>
+}</style>