@lavalogic/scoria 0.40.33 → 0.40.34

package/dist/Components/FileCard.svelte

@@ -1,28 +1,28 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { m as i18n } from "../paraglide/messages.js";
 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={i18n['scoria.action.delete']()}
-		onclick={ondelete}
-	/>
-</div>
-
+</script>
+
+<div
+	role="listitem"
+	aria-label={file.name}
+>
+	<span>{file.name}</span>
+	<Action
+		icon={{ name: 'circle-cross' }}
+		backgroundColour={Colour['$transparent-0']}
+		label={i18n['scoria.action.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,5 +1,5 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { m as i18n } from "../paraglide/messages.js";
 import { cssLength } from "../Helpers/Helpers.svelte.js";
 import { Colour, ColourSet } from "../scss/colours.js";
@@ -87,118 +87,118 @@ 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;- {i18n['scoria.label.optional']()}</i>{/if}</span
-		>
-		{#if variant === InputVariant.Default}
-			<span class="border"
-				>{labelTop}{#if optional}<i>&nbsp;- {i18n['scoria.label.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={i18n['scoria.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>
-					{#if multiple}{i18n['scoria.text.dropzone_multiple']()}{:else}{i18n['scoria.text.dropzone_single']()}{/if}
-				</p>
-			{/if}
-		</div>
-		<div class="side">
-			<Action
-				colourSet={ColourSet.Secondary}
-				backgroundColour={Colour['$transparent-0']}
-				icon={{ name: 'upload' }}
-				label={i18n['scoria.action.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>
-
+</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;- {i18n['scoria.label.optional']()}</i>{/if}</span
+		>
+		{#if variant === InputVariant.Default}
+			<span class="border"
+				>{labelTop}{#if optional}<i>&nbsp;- {i18n['scoria.label.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={i18n['scoria.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>
+					{#if multiple}{i18n['scoria.text.dropzone_multiple']()}{:else}{i18n['scoria.text.dropzone_single']()}{/if}
+				</p>
+			{/if}
+		</div>
+		<div class="side">
+			<Action
+				colourSet={ColourSet.Secondary}
+				backgroundColour={Colour['$transparent-0']}
+				icon={{ name: 'upload' }}
+				label={i18n['scoria.action.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%;
@@ -402,4 +402,4 @@ label {
 
 .dragover {
   background-color: rgba(31, 129, 160, 0.4);
-}</style>
+}</style>

package/dist/Components/GridInput.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
 >import { dev } from "$app/environment";
 import { loadingText } from "../Helpers/Helpers.svelte.js";
 import MultiSelect from "./MultiSelect.svelte";
@@ -13,11 +13,11 @@ const textTypes = new Set([
 	"email",
 	"tel"
 ]);
-</script>
-
-<script
-	lang="ts"
-	generics="V extends Record<string, unknown>,VP extends ValueProp<V>"
+</script>
+
+<script
+	lang="ts"
+	generics="V extends Record<string, unknown>,VP extends ValueProp<V>"
 >const { item, first, last } = $props();
 let value = $derived(isText(item) ? item.value ?? "" : "");
 function isText(item) {
@@ -44,118 +44,118 @@ function isSingleSelectPrimitive(item) {
 function isSingleSelectObject(item) {
 	return "valueAsObject" in item && item.valueAsObject;
 }
-</script>
-
-<label
-	class:first
-	class:last
->
-	<div class="left">
-		<span
-			class:first
-			class:last>{item.label}</span
-		>
-	</div>
-	{#if isText(item)}
-		<TextInput
-			disabled={item.disabled}
-			bind:value
-			oninput={() => {
-				item.updater(value);
-			}}
-			required={item.required}
-			invalid={item.invalid}
-		/>
-	{:else if isSelect(item)}
-		{#if isMultiSelect(item)}
-			{#await item.options}
-				{loadingText()}
-			{:then options}
-				{#if isMultiSelectObject<V, VP>(item)}
-					<MultiSelect
-						name={item.name}
-						{options}
-						valueAsObject={true}
-						labelProp={item.labelProp}
-						valueProp={item.valueProp}
-						selectedValues={item.value}
-						invalid={item.invalid}
-						onchange={(v: Array<V>) => {
-							item.updater(v);
-						}}
-					/>
-				{:else if isMultiSelectPrimitive(item)}
-					<MultiSelect
-						name={item.name}
-						{options}
-						valueAsObject={false}
-						labelProp={item.labelProp}
-						valueProp={item.valueProp}
-						selectedValues={item.value}
-						invalid={item.invalid}
-						onchange={(v: Array<V[VP]>) => {
-							// `valueAsObject={false}` → primitives, not SelectOption objects.
-							item.updater(v);
-						}}
-					/>
-				{/if}
-			{/await}
-		{:else if isSingleSelect(item)}
-			{#await item.options}
-				{loadingText()}
-			{:then options}
-				{#if isSingleSelectObject(item)}
-					<SingleSelect
-						{options}
-						name={item.name}
-						valueAsObject={true}
-						labelProp={item.labelProp}
-						valueProp={item.valueProp}
-						value={item.value}
-						required={item.required}
-						clearable={!item.required}
-						disabled={item.disabled}
-						invalid={item.invalid}
-						onchange={(v: V | null) => {
-							item.updater(v);
-						}}
-					/>
-				{:else if isSingleSelectPrimitive(item)}
-					<SingleSelect
-						{options}
-						name={item.name}
-						valueAsObject={false}
-						labelProp={item.labelProp}
-						valueProp={item.valueProp}
-						value={item.value}
-						required={item.required}
-						clearable={!item.required}
-						disabled={item.disabled}
-						invalid={item.invalid}
-						onchange={(
-							// `valueAsObject={false}` → primitive value, not a
-							// SelectOption. `clearable` is on (since the field is
-							// not required) so the callback must accept null.
-							// The annotation collapses to `unknown | null` because
-							// `V extends Record<string, unknown>` makes `V[VP]`
-							// itself `unknown`.
-							// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
-							v: V[VP] | null
-						) => {
-							item.updater(v);
-						}}
-					/>
-				{/if}
-			{/await}
-		{/if}
-	{:else if dev}
-		{@const type = item.type}
-		unknown type: {type}
-		<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
-		{@debug type}
-	{/if}
-</label>
-
+</script>
+
+<label
+	class:first
+	class:last
+>
+	<div class="left">
+		<span
+			class:first
+			class:last>{item.label}</span
+		>
+	</div>
+	{#if isText(item)}
+		<TextInput
+			disabled={item.disabled}
+			bind:value
+			oninput={() => {
+				item.updater(value);
+			}}
+			required={item.required}
+			invalid={item.invalid}
+		/>
+	{:else if isSelect(item)}
+		{#if isMultiSelect(item)}
+			{#await item.options}
+				{loadingText()}
+			{:then options}
+				{#if isMultiSelectObject<V, VP>(item)}
+					<MultiSelect
+						name={item.name}
+						{options}
+						valueAsObject={true}
+						labelProp={item.labelProp}
+						valueProp={item.valueProp}
+						selectedValues={item.value}
+						invalid={item.invalid}
+						onchange={(v: Array<V>) => {
+							item.updater(v);
+						}}
+					/>
+				{:else if isMultiSelectPrimitive(item)}
+					<MultiSelect
+						name={item.name}
+						{options}
+						valueAsObject={false}
+						labelProp={item.labelProp}
+						valueProp={item.valueProp}
+						selectedValues={item.value}
+						invalid={item.invalid}
+						onchange={(v: Array<V[VP]>) => {
+							// `valueAsObject={false}` → primitives, not SelectOption objects.
+							item.updater(v);
+						}}
+					/>
+				{/if}
+			{/await}
+		{:else if isSingleSelect(item)}
+			{#await item.options}
+				{loadingText()}
+			{:then options}
+				{#if isSingleSelectObject(item)}
+					<SingleSelect
+						{options}
+						name={item.name}
+						valueAsObject={true}
+						labelProp={item.labelProp}
+						valueProp={item.valueProp}
+						value={item.value}
+						required={item.required}
+						clearable={!item.required}
+						disabled={item.disabled}
+						invalid={item.invalid}
+						onchange={(v: V | null) => {
+							item.updater(v);
+						}}
+					/>
+				{:else if isSingleSelectPrimitive(item)}
+					<SingleSelect
+						{options}
+						name={item.name}
+						valueAsObject={false}
+						labelProp={item.labelProp}
+						valueProp={item.valueProp}
+						value={item.value}
+						required={item.required}
+						clearable={!item.required}
+						disabled={item.disabled}
+						invalid={item.invalid}
+						onchange={(
+							// `valueAsObject={false}` → primitive value, not a
+							// SelectOption. `clearable` is on (since the field is
+							// not required) so the callback must accept null.
+							// The annotation collapses to `unknown | null` because
+							// `V extends Record<string, unknown>` makes `V[VP]`
+							// itself `unknown`.
+							// eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+							v: V[VP] | null
+						) => {
+							item.updater(v);
+						}}
+					/>
+				{/if}
+			{/await}
+		{/if}
+	{:else if dev}
+		{@const type = item.type}
+		unknown type: {type}
+		<!-- eslint-disable-next-line svelte/no-at-debug-tags -->
+		{@debug type}
+	{/if}
+</label>
+
 <style>label {
   display: contents;
   --input-border-radius: 0;
@@ -174,4 +174,4 @@ label.first {
 }
 label.last {
   border-radius: 0 0 4px 4px;
-}</style>
+}</style>

package/dist/Components/GridInputSet.svelte

@@ -1,26 +1,26 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="V extends Record<string, unknown>,VP extends ValueProp<V>"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="V extends Record<string, unknown>,VP extends ValueProp<V>"
 >import GridInput from "./GridInput.svelte";
 const { items, header } = $props();
 const lastIndex = $derived(items.length - 1);
-</script>
-
-<div class="grid">
-	{#if header}
-		{@render header()}
-	{/if}
-	{#each items as item, index (item.label)}
-		<GridInput
-			{item}
-			first={index == 0}
-			last={index == lastIndex}
-		/>
-	{/each}
-</div>
-
+</script>
+
+<div class="grid">
+	{#if header}
+		{@render header()}
+	{/if}
+	{#each items as item, index (item.label)}
+		<GridInput
+			{item}
+			first={index == 0}
+			last={index == lastIndex}
+		/>
+	{/each}
+</div>
+
 <style>.grid {
   display: grid;
   grid-template-columns: [label] 16rem [value] 1fr;
@@ -28,4 +28,4 @@ const lastIndex = $derived(items.length - 1);
   border: solid 1px #dae0e5;
   border-radius: 4px;
   background-color: #dae0e5;
-}</style>
+}</style>