@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/DragMenu/DraggableCard.svelte

@@ -1,79 +1,67 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { devCatch } from '../../Helpers/Helpers.svelte.js';
-	import Checkbox from '../Checkbox.svelte';
-	import type { DraggableCardProps } from './DraggableCardProps.js';
-
-	// `selected` must remain `let` because it is `$bindable`; the rest
-	// are read-only props.
-	let {
-		selectable,
-		title,
-		subtitle,
-		index,
-		selected = $bindable(false),
-		touch = false,
-		toggleSelected,
-	}: DraggableCardProps = $props();
-
-	function fireToggle(): void {
-		if (!toggleSelected) {
-			return;
-		}
-		const result = toggleSelected();
-		if (result instanceof Promise) {
-			result.catch((e: unknown) => {
-				devCatch(e);
-			});
-		}
+<svelte:options runes />
+
+<script lang="ts">import { devCatch } from "../../Helpers/Helpers.svelte.js";
+import Checkbox from "../Checkbox.svelte";
+// `selected` must remain `let` because it is `$bindable`; the rest
+// are read-only props.
+let { selectable, title, subtitle, index, selected = $bindable(false), touch = false, toggleSelected } = $props();
+function fireToggle() {
+	if (!toggleSelected) {
+		return;
 	}
-</script>
-
-<div
-	class="card"
-	class:touch
-	role={selectable ? 'checkbox' : 'listitem'}
-	aria-checked={selectable ? selected : undefined}
-	aria-label={title}
->
-	{#if selectable}
-		<div
-			class="limit-size"
-			class:touch
-		>
-			<Checkbox
-				value={selected}
-				onchange={(
-					e: Event & {
-						currentTarget: EventTarget & HTMLInputElement;
-					}
-				) => {
-					e.stopPropagation();
-					fireToggle();
-				}}
-			/>
-		</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>
-
+	const result = toggleSelected();
+	if (result instanceof Promise) {
+		result.catch((e) => {
+			devCatch(e);
+		});
+	}
+}
+</script>
+
+<div
+	class="card"
+	class:touch
+	role={selectable ? 'checkbox' : 'listitem'}
+	aria-checked={selectable ? selected : undefined}
+	aria-label={title}
+>
+	{#if selectable}
+		<div
+			class="limit-size"
+			class:touch
+		>
+			<Checkbox
+				value={selected}
+				onchange={(
+					e: Event & {
+						currentTarget: EventTarget & HTMLInputElement;
+					}
+				) => {
+					e.stopPropagation();
+					fireToggle();
+				}}
+			/>
+		</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;
 }
@@ -170,4 +158,4 @@
   height: 1.75rem;
   width: 1.75rem;
   margin-right: 1rem;
-}</style>
+}</style>

package/dist/Components/FileCard.svelte

@@ -1,30 +1,27 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import Action from './Action.svelte';
-	import { Colour } from '../scss/colours.js';
-	import type { FileCardProps } from './FileCardProps.js';
-
-	const { file, ondelete }: FileCardProps = $props();
-</script>
-
-<div
-	role="listitem"
-	aria-label={file.name}
->
-	<span>{file.name}</span>
-	<Action
-		icon={{ name: 'circle-cross' }}
-		backgroundColour={Colour['$transparent-0']}
-		label="Delete"
-		onclick={ondelete}
-	/>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">import Action from "./Action.svelte";
+import { Colour } from "../scss/colours.js";
+const { file, ondelete } = $props();
+</script>
+
+<div
+	role="listitem"
+	aria-label={file.name}
+>
+	<span>{file.name}</span>
+	<Action
+		icon={{ name: 'circle-cross' }}
+		backgroundColour={Colour['$transparent-0']}
+		label="Delete"
+		onclick={ondelete}
+	/>
+</div>
+
 <style>div {
   display: flex;
   flex-flow: row nowrap;
   flex-grow: 1;
   align-items: center;
   gap: 0.375rem;
-}</style>
+}</style>

package/dist/Components/FileUpload.svelte

@@ -1,238 +1,203 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { cssLength } from '../Helpers/Helpers.svelte.js';
-	import { Colour, ColourSet } from '../scss/colours.js';
-	import { InputVariant } from '../Types/Internal/InputVariant.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import Action from './Action.svelte';
-	import FileCard from './FileCard.svelte';
-	import type { FileRejection, FileUploadProps } from './FileUploadProps.js';
-	import Icon from './Icon.svelte';
-
-	let {
-		accept,
-		files = $bindable([]),
-		multiple = false,
-		labelTop,
-		labelRight,
-		placeholder,
-		required = false,
-		variant = InputVariant.Default,
-		disabled,
-		optional = false,
-		leftIcon,
-		rightIcon,
-		onLeftIconClick,
-		onRightIconClick,
-
-		inputRef = $bindable(),
-		onblur,
-		onfocus,
-		onchange,
-		onreject,
-		maxSize,
-		allowedMimeTypes,
-		allowedExtensions,
-	}: FileUploadProps = $props();
-
-	function reasonToReject(file: File): FileRejection['reason'] | null {
-		if (maxSize != undefined && file.size > maxSize) {
-			return 'size';
-		}
-		if (allowedMimeTypes && allowedMimeTypes.length > 0) {
-			if (!allowedMimeTypes.includes(file.type)) {
-				return 'mime';
-			}
-		}
-		if (allowedExtensions && allowedExtensions.length > 0) {
-			const lower = file.name.toLocaleLowerCase();
-			const matched = allowedExtensions.some((ext) => lower.endsWith(ext.toLocaleLowerCase()));
-			if (!matched) {
-				return 'extension';
-			}
-		}
-		return null;
+<svelte:options runes />
+
+<script lang="ts">import { cssLength } from "../Helpers/Helpers.svelte.js";
+import { Colour, ColourSet } from "../scss/colours.js";
+import { InputVariant } from "../Types/Internal/InputVariant.js";
+import { Size } from "../Types/Internal/Size.js";
+import Action from "./Action.svelte";
+import FileCard from "./FileCard.svelte";
+import Icon from "./Icon.svelte";
+let { accept, files = $bindable([]), multiple = false, labelTop, labelRight, placeholder, required = false, variant = InputVariant.Default, disabled, optional = false, leftIcon, rightIcon, onLeftIconClick, onRightIconClick, inputRef = $bindable(), onblur, onfocus, onchange, onreject, maxSize, allowedMimeTypes, allowedExtensions } = $props();
+function reasonToReject(file) {
+	if (maxSize != undefined && file.size > maxSize) {
+		return "size";
 	}
-
-	function partition(candidates: ArrayLike<File>): {
-		accepted: ReadonlyArray<File>;
-		rejected: ReadonlyArray<FileRejection>;
-	} {
-		const accepted: Array<File> = [];
-		const rejected: Array<FileRejection> = [];
-		for (let i = 0; i < candidates.length; i++) {
-			const file = candidates[i];
-			const reason = reasonToReject(file);
-			if (reason == null) {
-				accepted.push(file);
-			} else {
-				rejected.push({ file, reason });
-			}
+	if (allowedMimeTypes && allowedMimeTypes.length > 0) {
+		if (!allowedMimeTypes.includes(file.type)) {
+			return "mime";
 		}
-		return { accepted, rejected };
 	}
-
-	function commit(accepted: ReadonlyArray<File>) {
-		if (accepted.length === 0) {
-			return;
+	if (allowedExtensions && allowedExtensions.length > 0) {
+		const lower = file.name.toLocaleLowerCase();
+		const matched = allowedExtensions.some((ext) => lower.endsWith(ext.toLocaleLowerCase()));
+		if (!matched) {
+			return "extension";
 		}
-		files = [...files, ...accepted];
-		onchange?.(files);
 	}
-
-	function onPickerChange(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
-		const markedFiles = e.currentTarget.files ?? [];
-		const { accepted, rejected } = partition(markedFiles);
-		if (rejected.length > 0) {
-			onreject?.(rejected);
+	return null;
+}
+function partition(candidates) {
+	const accepted = [];
+	const rejected = [];
+	for (let i = 0; i < candidates.length; i++) {
+		const file = candidates[i];
+		const reason = reasonToReject(file);
+		if (reason == null) {
+			accepted.push(file);
+		} else {
+			rejected.push({
+				file,
+				reason
+			});
 		}
-		commit(accepted);
 	}
-
-	function openPicker() {
-		inputRef?.showPicker();
+	return {
+		accepted,
+		rejected
+	};
+}
+function commit(accepted) {
+	if (accepted.length === 0) {
+		return;
 	}
-
-	let dragover = $state(false);
-
-	function ondrop(e: DragEvent) {
-		e.stopPropagation();
-		e.preventDefault();
-		dragover = false;
-
-		if (!e.dataTransfer?.files) {
-			return;
-		}
-
-		const { accepted, rejected } = partition(e.dataTransfer.files);
-		if (rejected.length > 0) {
-			onreject?.(rejected);
-		}
-		commit(accepted);
+	files = [...files, ...accepted];
+	onchange?.(files);
+}
+function onPickerChange(e) {
+	const markedFiles = e.currentTarget.files ?? [];
+	const { accepted, rejected } = partition(markedFiles);
+	if (rejected.length > 0) {
+		onreject?.(rejected);
 	}
-
-	function ondragover(e: DragEvent) {
-		e.preventDefault();
-		dragover = true;
+	commit(accepted);
+}
+function openPicker() {
+	inputRef?.showPicker();
+}
+let dragover = $state(false);
+function ondrop(e) {
+	e.stopPropagation();
+	e.preventDefault();
+	dragover = false;
+	if (!e.dataTransfer?.files) {
+		return;
 	}
-
-	function ondragleave(e: DragEvent) {
-		e.preventDefault();
-		dragover = false;
+	const { accepted, rejected } = partition(e.dataTransfer.files);
+	if (rejected.length > 0) {
+		onreject?.(rejected);
 	}
-</script>
-
-<label
-	class:dragover
-	class:for-modal={variant === InputVariant.Modal}
-	{ondrop}
-	{ondragover}
-	{ondragleave}
->
-	{#if labelTop && variant !== InputVariant.Modal}
-		<span
-			class="top-label"
-			class:for-default={variant === InputVariant.Default}
-			>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
-		>
-		{#if variant === InputVariant.Default}
-			<span class="border"
-				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
-			>
-		{/if}
-	{/if}
-	<div
-		class="icon-container"
-		class:for-modal={variant == InputVariant.Modal}
-	>
-		{#if leftIcon}
-			<Icon
-				name={leftIcon.name}
-				size={leftIcon.size ?? Size.Medium}
-				colour={leftIcon.colour}
-				float
-				left={cssLength('0.75rem')}
-				top={cssLength('50%')}
-				anchorX={cssLength('0')}
-				anchorY={cssLength('-50%')}
-				clickable={!!onLeftIconClick}
-				onclick={onLeftIconClick}
-			/>
-		{/if}
-		<input
-			hidden
-			class:left-pad={leftIcon != undefined}
-			class:right-pad={rightIcon != undefined}
-			class:for-modal={variant == InputVariant.Modal}
-			{onblur}
-			{accept}
-			{onfocus}
-			type="file"
-			bind:this={inputRef}
-			{placeholder}
-			{required}
-			{disabled}
-			{multiple}
-			onchange={onPickerChange}
-		/>
-
-		<div
-			class="file-list"
-			role="list"
-			aria-label="Selected files"
-		>
-			{#if files.length}
-				{#each files as file, index (file)}
-					<FileCard
-						{file}
-						ondelete={() => {
-							files = files.toSpliced(index, 1);
-							onchange?.(files);
-						}}
-					/>
-				{/each}
-			{:else}
-				<p>
-					Drag and Drop or Click to Upload {#if multiple}multiple documents{:else}a document{/if}
-				</p>
-			{/if}
-		</div>
-		<div class="side">
-			<Action
-				colourSet={ColourSet.Secondary}
-				backgroundColour={Colour['$transparent-0']}
-				icon={{ name: 'upload' }}
-				label="Upload"
-				size={Size.Medium}
-				onclick={() => {
-					openPicker();
-				}}
-			/>
-		</div>
-		{#if rightIcon}
-			<Icon
-				name={rightIcon.name}
-				size={rightIcon.size ?? Size.Medium}
-				colour={rightIcon.colour}
-				float
-				right={cssLength(variant == InputVariant.Modal ? '1rem' : '0.5rem')}
-				top={cssLength('50%')}
-				anchorX={cssLength('0')}
-				anchorY={cssLength('-50%')}
-				clickable={!!onRightIconClick}
-				onclick={onRightIconClick}
-			/>
-		{/if}
-		{#if labelRight}
-			<span
-				class="right-label"
-				class:for-modal={variant == InputVariant.Modal}>{labelRight}</span
-			>
-		{/if}
-	</div>
-</label>
-
+	commit(accepted);
+}
+function ondragover(e) {
+	e.preventDefault();
+	dragover = true;
+}
+function ondragleave(e) {
+	e.preventDefault();
+	dragover = false;
+}
+</script>
+
+<label
+	class:dragover
+	class:for-modal={variant === InputVariant.Modal}
+	{ondrop}
+	{ondragover}
+	{ondragleave}
+>
+	{#if labelTop && variant !== InputVariant.Modal}
+		<span
+			class="top-label"
+			class:for-default={variant === InputVariant.Default}
+			>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+		>
+		{#if variant === InputVariant.Default}
+			<span class="border"
+				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+			>
+		{/if}
+	{/if}
+	<div
+		class="icon-container"
+		class:for-modal={variant == InputVariant.Modal}
+	>
+		{#if leftIcon}
+			<Icon
+				name={leftIcon.name}
+				size={leftIcon.size ?? Size.Medium}
+				colour={leftIcon.colour}
+				float
+				left={cssLength('0.75rem')}
+				top={cssLength('50%')}
+				anchorX={cssLength('0')}
+				anchorY={cssLength('-50%')}
+				clickable={!!onLeftIconClick}
+				onclick={onLeftIconClick}
+			/>
+		{/if}
+		<input
+			hidden
+			class:left-pad={leftIcon != undefined}
+			class:right-pad={rightIcon != undefined}
+			class:for-modal={variant == InputVariant.Modal}
+			{onblur}
+			{accept}
+			{onfocus}
+			type="file"
+			bind:this={inputRef}
+			{placeholder}
+			{required}
+			{disabled}
+			{multiple}
+			onchange={onPickerChange}
+		/>
+
+		<div
+			class="file-list"
+			role="list"
+			aria-label="Selected files"
+		>
+			{#if files.length}
+				{#each files as file, index (file)}
+					<FileCard
+						{file}
+						ondelete={() => {
+							files = files.toSpliced(index, 1);
+							onchange?.(files);
+						}}
+					/>
+				{/each}
+			{:else}
+				<p>
+					Drag and Drop or Click to Upload {#if multiple}multiple documents{:else}a document{/if}
+				</p>
+			{/if}
+		</div>
+		<div class="side">
+			<Action
+				colourSet={ColourSet.Secondary}
+				backgroundColour={Colour['$transparent-0']}
+				icon={{ name: 'upload' }}
+				label="Upload"
+				size={Size.Medium}
+				onclick={() => {
+					openPicker();
+				}}
+			/>
+		</div>
+		{#if rightIcon}
+			<Icon
+				name={rightIcon.name}
+				size={rightIcon.size ?? Size.Medium}
+				colour={rightIcon.colour}
+				float
+				right={cssLength(variant == InputVariant.Modal ? '1rem' : '0.5rem')}
+				top={cssLength('50%')}
+				anchorX={cssLength('0')}
+				anchorY={cssLength('-50%')}
+				clickable={!!onRightIconClick}
+				onclick={onRightIconClick}
+			/>
+		{/if}
+		{#if labelRight}
+			<span
+				class="right-label"
+				class:for-modal={variant == InputVariant.Modal}>{labelRight}</span
+			>
+		{/if}
+	</div>
+</label>
+
 <style>input {
   box-sizing: border-box;
   height: 100%;
@@ -438,4 +403,4 @@ label {
 
 .dragover {
   background-color: rgba(31, 129, 160, 0.4);
-}</style>
+}</style>