@lavalogic/scoria 0.33.0 → 0.35.0

package/dist/Components/DesktopModal.svelte

@@ -1,108 +1,108 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { ColourSet } from '../scss/colours.js';
-	import Button from './Button.svelte';
-	import type { DesktopModalProps } from './DesktopModalProps.js';
-	import LoadingOverlay from './LoadingOverlay.svelte';
-	import Modal from './Modal.svelte';
-
-	// testing modal
-
-	let {
-		onclose,
-		onsubmit,
-		noscroll,
-		headerLabel,
-		headerSubtitle,
-		buttons,
-		children,
-		isLoading,
-		mandatory,
-		loadingMessage,
-		staticHeight,
-		staticWidth,
-		minWidth,
-		minHeight,
-		width,
-		height,
-	}: DesktopModalProps = $props();
-</script>
-
-<Modal
-	{onclose}
-	mandatory={mandatory || isLoading}
-	{staticHeight}
-	{staticWidth}
-	{minWidth}
-	{minHeight}
-	{width}
-	{height}
-	{noscroll}
-	{onsubmit}
->
-	{#snippet header()}
-		<div class="outer">
-			<div class="column">
-				{#if typeof headerLabel === 'string'}
-					<h1>{headerLabel}</h1>
-				{:else}
-					{@render headerLabel()}
-				{/if}
-				{#if headerSubtitle}
-					<div class="one-line">
-						<span>{headerSubtitle}</span>
-					</div>
-				{/if}
-			</div>
-			<div class="spacer"></div>
-
-			<!-- <div class="orders">
-				<div class="column">
-					<span>Orders Selected</span>
-					<span class="big-number">{allocationContext.orders.length}</span>
-				</div>
-				<Icon name="paper" size={Size.TripleXLarge} colour={Colour.$main} />
-			</div>
-			<div class="warehouses">
-				<div class="column">
-					<span>Possible Warehouses</span>
-					<span class="big-number">{allocationContext.currentOrderWarehouses.length}</span>
-				</div>
-				<Icon name="warehouse" size={Size.TripleXLarge} colour={Colour.$main} />
-			</div> -->
-		</div>
-	{/snippet}
-
-	{#snippet footer()}
-		<div class="footer">
-			{#each buttons as button (button)}
-				<div class:left={button.left}>
-					<Button
-						type={button.type}
-						disabled={button.disabled}
-						onclick={button.callback}
-						colourSet={(button.colourSet ?? button.type === 'submit')
-							? ColourSet.Primary
-							: undefined}>{button.label}</Button
-					>
-				</div>
-			{/each}
-		</div>
-	{/snippet}
-
-	<div class="body-outer">
-		{@render children()}
-	</div>
-
-	{#if isLoading}
-		<LoadingOverlay
-			absolute
-			message={loadingMessage}
-		/>
-	{/if}
-</Modal>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { ColourSet } from '../scss/colours.js';
+	import Button from './Button.svelte';
+	import type { DesktopModalProps } from './DesktopModalProps.js';
+	import LoadingOverlay from './LoadingOverlay.svelte';
+	import Modal from './Modal.svelte';
+
+	// testing modal
+
+	let {
+		onclose,
+		onsubmit,
+		noscroll,
+		headerLabel,
+		headerSubtitle,
+		buttons,
+		children,
+		isLoading,
+		mandatory,
+		loadingMessage,
+		staticHeight,
+		staticWidth,
+		minWidth,
+		minHeight,
+		width,
+		height,
+	}: DesktopModalProps = $props();
+</script>
+
+<Modal
+	{onclose}
+	mandatory={mandatory || isLoading}
+	{staticHeight}
+	{staticWidth}
+	{minWidth}
+	{minHeight}
+	{width}
+	{height}
+	{noscroll}
+	{onsubmit}
+>
+	{#snippet header()}
+		<div class="outer">
+			<div class="column">
+				{#if typeof headerLabel === 'string'}
+					<h1>{headerLabel}</h1>
+				{:else}
+					{@render headerLabel()}
+				{/if}
+				{#if headerSubtitle}
+					<div class="one-line">
+						<span>{headerSubtitle}</span>
+					</div>
+				{/if}
+			</div>
+			<div class="spacer"></div>
+
+			<!-- <div class="orders">
+				<div class="column">
+					<span>Orders Selected</span>
+					<span class="big-number">{allocationContext.orders.length}</span>
+				</div>
+				<Icon name="paper" size={Size.TripleXLarge} colour={Colour.$main} />
+			</div>
+			<div class="warehouses">
+				<div class="column">
+					<span>Possible Warehouses</span>
+					<span class="big-number">{allocationContext.currentOrderWarehouses.length}</span>
+				</div>
+				<Icon name="warehouse" size={Size.TripleXLarge} colour={Colour.$main} />
+			</div> -->
+		</div>
+	{/snippet}
+
+	{#snippet footer()}
+		<div class="footer">
+			{#each buttons as button (button)}
+				<div class:left={button.left}>
+					<Button
+						type={button.type}
+						disabled={button.disabled}
+						onclick={button.callback}
+						colourSet={(button.colourSet ?? button.type === 'submit')
+							? ColourSet.Primary
+							: undefined}>{button.label}</Button
+					>
+				</div>
+			{/each}
+		</div>
+	{/snippet}
+
+	<div class="body-outer">
+		{@render children()}
+	</div>
+
+	{#if isLoading}
+		<LoadingOverlay
+			absolute
+			message={loadingMessage}
+		/>
+	{/if}
+</Modal>
+
 <style>.outer {
   padding: 1.5rem;
   display: flex;
@@ -213,4 +213,4 @@
   display: flex;
   gap: 0rem;
   flex-flow: column nowrap;
-}</style>
+}</style>

package/dist/Components/Dial.svelte

@@ -1,153 +1,153 @@
-<svelte:options runes />
-
-<script lang="ts" generics="T">
-	import { onMount } from 'svelte';
-	import type { DialProps } from './DialProps.js';
-
-	const optionHeight = 50;
-
-	let {
-		selected,
-		values,
-		labels,
-		type,
-		ref = $bindable(),
-		onsubmit,
-		onPrevious,
-		onNext,
-		onchange
-	}: DialProps<T> = $props();
-
-	let position = $derived(selected != null ? -values.indexOf(selected) * optionHeight : 0);
-	let offset = 0;
-	let dragging = false;
-
-	let itemWrapper: HTMLUListElement | undefined = $state();
-	let previousY: number;
-
-	onMount(() => {
-		setPosition();
-	});
-
-	$effect(() => {
-		if (!dragging) {
-			const selectedPosition = selected != null ? -values.indexOf(selected) * optionHeight : 0;
-			if (position !== selectedPosition) {
-				position = selectedPosition;
-				setPosition();
-			}
-		}
-	});
-
-	function onChange(changedData: T) {
-		onchange({
-			type,
-			changedData
-		});
-	}
-
-	function setPosition() {
-		const itemPosition = `
-		transition: transform ${Math.abs(offset) / 100 + 0.1}s;
-        transform: translateY(${position}px)
-      `;
-		if (itemWrapper) {
-			itemWrapper.style.cssText = itemPosition;
-		} else {
-			console.warn('item wrapper is undefined');
-		}
-	}
-
-	const onmousedown = (event: MouseEvent | TouchEvent) => {
-		previousY = 'touches' in event ? event.touches[0].clientY : event.clientY;
-		dragging = true;
-
-		window.addEventListener('mousemove', onMouseMove);
-		window.addEventListener('mouseup', onMouseUp);
-		window.addEventListener('touchmove', onMouseMove);
-		window.addEventListener('touchend', onMouseUp);
-	};
-
-	const onMouseMove = (event: MouseEvent | TouchEvent) => {
-		const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;
-		offset = clientY - previousY;
-
-		const maxPosition = -values.length * optionHeight;
-		const _position = position + offset;
-		position = Math.max(maxPosition, Math.min(optionHeight, _position));
-		previousY = 'touches' in event ? event.touches[0].clientY : event.clientY;
-		setPosition();
-	};
-
-	const onMouseUp = () => {
-		const maxPosition = -(values.length - 1) * optionHeight;
-		const rounderPosition = Math.round((position + offset * 5) / optionHeight) * optionHeight;
-		const finalPosition = Math.max(maxPosition, Math.min(0, rounderPosition));
-
-		dragging = false;
-		position = finalPosition;
-
-		window.removeEventListener('mousemove', onMouseMove);
-		window.removeEventListener('mouseup', onMouseUp);
-		window.removeEventListener('touchmove', onMouseMove);
-		window.removeEventListener('touchend', onMouseUp);
-
-		setPosition();
-		onChange(values[-finalPosition / optionHeight]);
-	};
-
-	const onwheel = (e: WheelEvent) => {
-		if (e.deltaY > 0) {
-			position = position - optionHeight;
-		}
-		if (e.deltaY < 0) {
-			position = position + optionHeight;
-		}
-		onMouseUp();
-	};
-
-	const handledKeys = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Enter']);
-	function onkeydown(e: KeyboardEvent) {
-		if (handledKeys.has(e.key)) {
-			e.preventDefault();
-
-			if (e.key === 'ArrowLeft') {
-				onPrevious(type);
-			} else if (e.key === 'ArrowRight') {
-				onNext(type);
-			} else if (e.key === 'ArrowUp') {
-				position = position + optionHeight;
-				onMouseUp();
-			} else if (e.key === 'ArrowDown') {
-				position = position - optionHeight;
-				onMouseUp();
-			} else if (e.key === 'Enter') {
-				onsubmit();
-			}
-		}
-	}
-</script>
-
-<div
-	style="--option-height: {optionHeight}px"
-	class="select-wrapper"
-	role="listbox"
-	tabindex="0"
-	bind:this={ref}
-	{onmousedown}
-	ontouchstart={onmousedown}
-	{onwheel}
-	{onkeydown}
->
-	<div class="selected-wrapper">
-		<ul bind:this={itemWrapper} class="touch-date-container">
-			{#each labels as item (item)}
-				<li>{item}</li>
-			{/each}
-		</ul>
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts" generics="T">
+	import { onMount } from 'svelte';
+	import type { DialProps } from './DialProps.js';
+
+	const optionHeight = 50;
+
+	let {
+		selected,
+		values,
+		labels,
+		type,
+		ref = $bindable(),
+		onsubmit,
+		onPrevious,
+		onNext,
+		onchange
+	}: DialProps<T> = $props();
+
+	let position = $derived(selected != null ? -values.indexOf(selected) * optionHeight : 0);
+	let offset = 0;
+	let dragging = false;
+
+	let itemWrapper: HTMLUListElement | undefined = $state();
+	let previousY: number;
+
+	onMount(() => {
+		setPosition();
+	});
+
+	$effect(() => {
+		if (!dragging) {
+			const selectedPosition = selected != null ? -values.indexOf(selected) * optionHeight : 0;
+			if (position !== selectedPosition) {
+				position = selectedPosition;
+				setPosition();
+			}
+		}
+	});
+
+	function onChange(changedData: T) {
+		onchange({
+			type,
+			changedData
+		});
+	}
+
+	function setPosition() {
+		const itemPosition = `
+		transition: transform ${Math.abs(offset) / 100 + 0.1}s;
+        transform: translateY(${position}px)
+      `;
+		if (itemWrapper) {
+			itemWrapper.style.cssText = itemPosition;
+		} else {
+			console.warn('item wrapper is undefined');
+		}
+	}
+
+	const onmousedown = (event: MouseEvent | TouchEvent) => {
+		previousY = 'touches' in event ? event.touches[0].clientY : event.clientY;
+		dragging = true;
+
+		window.addEventListener('mousemove', onMouseMove);
+		window.addEventListener('mouseup', onMouseUp);
+		window.addEventListener('touchmove', onMouseMove);
+		window.addEventListener('touchend', onMouseUp);
+	};
+
+	const onMouseMove = (event: MouseEvent | TouchEvent) => {
+		const clientY = 'touches' in event ? event.touches[0].clientY : event.clientY;
+		offset = clientY - previousY;
+
+		const maxPosition = -values.length * optionHeight;
+		const _position = position + offset;
+		position = Math.max(maxPosition, Math.min(optionHeight, _position));
+		previousY = 'touches' in event ? event.touches[0].clientY : event.clientY;
+		setPosition();
+	};
+
+	const onMouseUp = () => {
+		const maxPosition = -(values.length - 1) * optionHeight;
+		const rounderPosition = Math.round((position + offset * 5) / optionHeight) * optionHeight;
+		const finalPosition = Math.max(maxPosition, Math.min(0, rounderPosition));
+
+		dragging = false;
+		position = finalPosition;
+
+		window.removeEventListener('mousemove', onMouseMove);
+		window.removeEventListener('mouseup', onMouseUp);
+		window.removeEventListener('touchmove', onMouseMove);
+		window.removeEventListener('touchend', onMouseUp);
+
+		setPosition();
+		onChange(values[-finalPosition / optionHeight]);
+	};
+
+	const onwheel = (e: WheelEvent) => {
+		if (e.deltaY > 0) {
+			position = position - optionHeight;
+		}
+		if (e.deltaY < 0) {
+			position = position + optionHeight;
+		}
+		onMouseUp();
+	};
+
+	const handledKeys = new Set(['ArrowLeft', 'ArrowRight', 'ArrowUp', 'ArrowDown', 'Enter']);
+	function onkeydown(e: KeyboardEvent) {
+		if (handledKeys.has(e.key)) {
+			e.preventDefault();
+
+			if (e.key === 'ArrowLeft') {
+				onPrevious(type);
+			} else if (e.key === 'ArrowRight') {
+				onNext(type);
+			} else if (e.key === 'ArrowUp') {
+				position = position + optionHeight;
+				onMouseUp();
+			} else if (e.key === 'ArrowDown') {
+				position = position - optionHeight;
+				onMouseUp();
+			} else if (e.key === 'Enter') {
+				onsubmit();
+			}
+		}
+	}
+</script>
+
+<div
+	style="--option-height: {optionHeight}px"
+	class="select-wrapper"
+	role="listbox"
+	tabindex="0"
+	bind:this={ref}
+	{onmousedown}
+	ontouchstart={onmousedown}
+	{onwheel}
+	{onkeydown}
+>
+	<div class="selected-wrapper">
+		<ul bind:this={itemWrapper} class="touch-date-container">
+			{#each labels as item (item)}
+				<li>{item}</li>
+			{/each}
+		</ul>
+	</div>
+</div>
+
 <style>.select-wrapper {
   height: calc(var(--option-height));
   padding: 50px 0;
@@ -200,4 +200,4 @@
   width: 80px;
   height: var(--option-height);
   user-select: none;
-}</style>
+}</style>