@lavalogic/scoria 0.33.0 → 0.35.0

package/dist/Components/FileCard.svelte

@@ -1,26 +1,26 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import Action from './Action.svelte';
-	import type { FileCardProps } from './FileCardProps.js';
-
-	const { file, ondelete }: FileCardProps = $props();
-</script>
-
-<div>
-	<span>{file.name}</span>
-	<Action
-		icon={{ name: 'circle-cross' }}
-		backgroundColour="transparent"
-		label="Delete"
-		onclick={ondelete}
-	/>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import Action from './Action.svelte';
+	import type { FileCardProps } from './FileCardProps.js';
+
+	const { file, ondelete }: FileCardProps = $props();
+</script>
+
+<div>
+	<span>{file.name}</span>
+	<Action
+		icon={{ name: 'circle-cross' }}
+		backgroundColour="transparent"
+		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,198 +1,198 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { ColourSet } from '../scss/colours.js';
-	import { InputVariant } from '../Types/Internal/InputVariant.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import { onMount } from 'svelte';
-	import Action from './Action.svelte';
-	import FileCard from './FileCard.svelte';
-	import type { FileUploadProps } from './FileUploadProps.js';
-	import Icon from './Icon.svelte';
-
-	let _files: FileList | null | undefined = $state();
-
-	let {
-		accept,
-		files = $bindable([]),
-		multiple = false,
-		labelTop,
-		labelRight,
-		placeholder,
-		required = false,
-		variant = InputVariant.Default,
-		selectNone = false,
-		noresize = false,
-		uppercase = false,
-		disabled,
-		optional = false,
-		leftIcon,
-		rightIcon,
-		onLeftIconClick,
-		onRightIconClick,
-
-		inputRef = $bindable(),
-		onblur,
-		onfocus,
-	}: FileUploadProps = $props();
-
-	function onchange(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
-		const markedFiles = (e.target as HTMLInputElement).files ?? [];
-		for (let i = 0; i < markedFiles.length; i++) {
-			files.push(markedFiles[i]);
-		}
-	}
-
-	function a() {
-		inputRef?.showPicker();
-	}
-
-	let dragover = $state(false);
-
-	function ondrop(e: DragEvent) {
-		e.stopPropagation();
-		e.preventDefault();
-		dragover = false;
-
-		if (!e.dataTransfer?.files) {
-			return;
-		}
-
-		const len = e.dataTransfer.files.length;
-		for (let i = 0; i < len; i++) {
-			files.push(e.dataTransfer.files[i]);
-		}
-	}
-
-	function ondragover(e: DragEvent) {
-		e.preventDefault();
-
-		dragover = true;
-	}
-
-	function ondragleave(e: DragEvent) {
-		e.preventDefault();
-
-		dragover = false;
-	}
-	onMount(() => {
-		console.log('Drag and drop file uploading may not work');
-	});
-</script>
-
-<label
-	class:dragover
-	class:for-modal={variant === InputVariant.Modal}
-	{ondrop}
-	{ondragover}
-	{ondragleave}
->
-	<!-- HACK removed label for modals for now because I couldn't think of a decent style that doesn't interfere with scrolling -->
-	{#if labelTop && variant !== InputVariant.Modal}
-		<!-- <span class="top-label" class:invalid={isInvalid}>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span> -->
-		<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}
-	<!-- style="--background-colour: {leftIcon?.backgroundColour ?? rightIcon?.backgroundColour};" -->
-	<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="0.75rem"
-				top="50%"
-				anchorX="0"
-				anchorY="-50%"
-				clickable={!!onLeftIconClick}
-				onclick={onLeftIconClick}
-			/>
-		{/if}
-		<input
-			hidden
-			class:noresize
-			class:uppercase
-			class:select-none={selectNone}
-			class:left-pad={leftIcon != undefined}
-			class:right-pad={rightIcon != undefined}
-			class:for-modal={variant == InputVariant.Modal}
-			bind:files={_files}
-			{onblur}
-			{accept}
-			{onfocus}
-			type="file"
-			bind:this={inputRef}
-			{placeholder}
-			{required}
-			{disabled}
-			{multiple}
-			{onchange}
-		/>
-
-		<div class="file-list">
-			{#if files.length}
-				{#each files as file, index (file)}
-					<FileCard
-						{file}
-						ondelete={() => {
-							files.splice(index, 1);
-						}}
-					/>
-				{/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="transparent"
-				icon={{ name: 'upload' }}
-				label="Upload"
-				size={Size.Medium}
-				onclick={() => {
-					a();
-				}}
-			/>
-		</div>
-		<!-- </div> -->
-		{#if rightIcon}
-			<Icon
-				name={rightIcon.name}
-				size={rightIcon.size ?? Size.Medium}
-				colour={rightIcon.colour}
-				float
-				right={variant == InputVariant.Modal ? '1rem' : '0.5rem'}
-				top="50%"
-				anchorX="0"
-				anchorY="-50%"
-				clickable={!!onRightIconClick}
-				onclick={onRightIconClick}
-			/>
-		{/if}
-		{#if labelRight}
-			<span
-				class="right-label"
-				class:for-modal={variant == InputVariant.Modal}>{labelRight}</span
-			>
-		{/if}
-	</div>
-</label>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { ColourSet } from '../scss/colours.js';
+	import { InputVariant } from '../Types/Internal/InputVariant.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import { onMount } from 'svelte';
+	import Action from './Action.svelte';
+	import FileCard from './FileCard.svelte';
+	import type { FileUploadProps } from './FileUploadProps.js';
+	import Icon from './Icon.svelte';
+
+	let _files: FileList | null | undefined = $state();
+
+	let {
+		accept,
+		files = $bindable([]),
+		multiple = false,
+		labelTop,
+		labelRight,
+		placeholder,
+		required = false,
+		variant = InputVariant.Default,
+		selectNone = false,
+		noresize = false,
+		uppercase = false,
+		disabled,
+		optional = false,
+		leftIcon,
+		rightIcon,
+		onLeftIconClick,
+		onRightIconClick,
+
+		inputRef = $bindable(),
+		onblur,
+		onfocus,
+	}: FileUploadProps = $props();
+
+	function onchange(e: Event & { currentTarget: EventTarget & HTMLInputElement }) {
+		const markedFiles = (e.target as HTMLInputElement).files ?? [];
+		for (let i = 0; i < markedFiles.length; i++) {
+			files.push(markedFiles[i]);
+		}
+	}
+
+	function a() {
+		inputRef?.showPicker();
+	}
+
+	let dragover = $state(false);
+
+	function ondrop(e: DragEvent) {
+		e.stopPropagation();
+		e.preventDefault();
+		dragover = false;
+
+		if (!e.dataTransfer?.files) {
+			return;
+		}
+
+		const len = e.dataTransfer.files.length;
+		for (let i = 0; i < len; i++) {
+			files.push(e.dataTransfer.files[i]);
+		}
+	}
+
+	function ondragover(e: DragEvent) {
+		e.preventDefault();
+
+		dragover = true;
+	}
+
+	function ondragleave(e: DragEvent) {
+		e.preventDefault();
+
+		dragover = false;
+	}
+	onMount(() => {
+		console.log('Drag and drop file uploading may not work');
+	});
+</script>
+
+<label
+	class:dragover
+	class:for-modal={variant === InputVariant.Modal}
+	{ondrop}
+	{ondragover}
+	{ondragleave}
+>
+	<!-- HACK removed label for modals for now because I couldn't think of a decent style that doesn't interfere with scrolling -->
+	{#if labelTop && variant !== InputVariant.Modal}
+		<!-- <span class="top-label" class:invalid={isInvalid}>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span> -->
+		<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}
+	<!-- style="--background-colour: {leftIcon?.backgroundColour ?? rightIcon?.backgroundColour};" -->
+	<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="0.75rem"
+				top="50%"
+				anchorX="0"
+				anchorY="-50%"
+				clickable={!!onLeftIconClick}
+				onclick={onLeftIconClick}
+			/>
+		{/if}
+		<input
+			hidden
+			class:noresize
+			class:uppercase
+			class:select-none={selectNone}
+			class:left-pad={leftIcon != undefined}
+			class:right-pad={rightIcon != undefined}
+			class:for-modal={variant == InputVariant.Modal}
+			bind:files={_files}
+			{onblur}
+			{accept}
+			{onfocus}
+			type="file"
+			bind:this={inputRef}
+			{placeholder}
+			{required}
+			{disabled}
+			{multiple}
+			{onchange}
+		/>
+
+		<div class="file-list">
+			{#if files.length}
+				{#each files as file, index (file)}
+					<FileCard
+						{file}
+						ondelete={() => {
+							files.splice(index, 1);
+						}}
+					/>
+				{/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="transparent"
+				icon={{ name: 'upload' }}
+				label="Upload"
+				size={Size.Medium}
+				onclick={() => {
+					a();
+				}}
+			/>
+		</div>
+		<!-- </div> -->
+		{#if rightIcon}
+			<Icon
+				name={rightIcon.name}
+				size={rightIcon.size ?? Size.Medium}
+				colour={rightIcon.colour}
+				float
+				right={variant == InputVariant.Modal ? '1rem' : '0.5rem'}
+				top="50%"
+				anchorX="0"
+				anchorY="-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%;
@@ -398,4 +398,4 @@ label {
 
 .dragover {
   background-color: rgba(31, 129, 160, 0.4);
-}</style>
+}</style>