@lavalogic/scoria 0.33.0 → 0.35.0

package/dist/Components/MultiSelect.svelte

@@ -1,199 +1,199 @@
-<svelte:options runes />
-
-<script lang="ts" generics="V extends object, VP extends ValueProp<V>">
-	import { autoPluralise, generateShortUUID, vowels } from '../Helpers/Helpers.svelte.js';
-	import { Colour, ColourSet } from '../scss/colours.js';
-	import type { ValueProp } from '../Types/Internal/Misc.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import Svelecte from 'svelecte';
-	import { onMount } from 'svelte';
-	import Action from './Action.svelte';
-	import Icon from './Icon.svelte';
-	import type { MultiSelectProps } from './MultiSelectProps.js';
-
-	// HACK selectedValues is mutated by svelecte without asking, so we sometimes have to reverse it without a callback (side effects)
-	let {
-		label,
-		inputId = generateShortUUID(),
-		options,
-		labelProp,
-		valueProp,
-		width,
-		valueAsObject = true,
-		height,
-		selectedValues,
-		onchange,
-		collapseSelection = false,
-		name = 'Item',
-		disabled,
-		required,
-		invalid
-	}: MultiSelectProps<V, VP> = $props();
-
-	const an = $derived(name && vowels.has(name.at(0)?.toLocaleLowerCase() ?? '') ? 'an' : 'a');
-
-	const hidden = $state(false);
-
-	onMount(() => {
-		const input = document.getElementById(inputId);
-		// input?.addEventListener('focus', () => {
-		// 	hidden = true;
-		// });
-		// input?.addEventListener('blur', () => {
-		// 	hidden = false;
-		// });
-
-		// HACK callback for is-open on/off
-		const dropdownRef = input?.closest('div.svelecte')?.querySelector('.sv_dropdown') ?? undefined;
-		const observer = new MutationObserver((mutations: Array<MutationRecord>) => {
-			for (let i = mutations.length - 1; i > -1; i--) {
-				const mutation = mutations[i];
-				if (mutation.attributeName === 'class') {
-					isExpanded = dropdownRef?.classList.contains('is-open') ?? false;
-				}
-			}
-		});
-
-		if (dropdownRef) {
-			observer.observe(dropdownRef, { attributes: true });
-		}
-
-		return () => {
-			observer.disconnect();
-		};
-	});
-
-	let isExpanded = $state(false);
-
-	const isInvalid = $derived((required && !selectedValues.length) || invalid);
-
-	function usesValuesAsObjects(_values: Array<V> | Array<V[VP]>): _values is Array<V> {
-		return valueAsObject;
-	}
-
-	function usesValuesAsPrimitives(_values: Array<V> | Array<V[VP]>): _values is Array<V[VP]> {
-		return !valueAsObject;
-	}
-</script>
-
-<div
-	class:invalid={isInvalid}
-	class="select-wrapper"
-	style={`${width ? `--input-width: ${width};` : ''}${height ? `--input-height: ${height};` : ''}`}
->
-	{#if label}
-		<label for={inputId}>
-			<span>{label}</span>
-			<span class="border">{label}</span>
-		</label>
-	{/if}
-
-	<Svelecte
-		multiple
-		{valueAsObject}
-		{disabled}
-		{inputId}
-		valueField={valueProp}
-		labelField={labelProp}
-		{options}
-		searchable
-		value={selectedValues}
-		onChange={(e: Array<V>) => {
-			onchange(e);
-		}}
-		{name}
-		selectOnTab
-		keepSelectionInList
-		searchProps={{ keepSelectionInList: true }}
-		creatable={false}
-		collapseSelection={collapseSelection ? 'always' : null}
-		deselectMode="toggle"
-		highlightFirstItem={false}
-		placeholder="Please Select {name ? `${an} ${name}` : ''}"
-		selection={collapseSelection ? selection : undefined}
-	>
-		{#snippet option(opt)}
-			{@const option = opt as V}
-			<span class="dropdown-item">
-				<div
-					class="toggle-icon"
-					class:yes={usesValuesAsObjects(selectedValues)
-						? selectedValues.findIndex((v) => v[valueProp] === option[valueProp]) > -1
-						: usesValuesAsPrimitives(selectedValues)
-							? (selectedValues as Array<V[VP]>).findIndex((v: V[VP]) => v === option[valueProp]) >
-								-1
-							: false}
-				>
-					<Icon name="tick" size={Size.MediumSmall} />
-				</div>
-				{option[labelProp]}</span
-			>
-		{/snippet}
-
-		{#snippet collapsedSelection(selectedOptions: Array<object> /*_i18n*/)}
-			<span class="selection" class:hidden
-				>{#if selectedOptions.length}{selectedOptions.length}
-					{#if name}{autoPluralise(name, selectedOptions.length)}{/if} Selected
-				{:else}Please Select {#if name}
-						{an} {name}{/if}
-				{/if}</span
-			>
-		{/snippet}
-
-		{#snippet append()}
-			<div class="icons">
-				<Action
-					{disabled}
-					size={Size.Small}
-					noTabIndex
-					colourSet={ColourSet.Auxiliary}
-					onclick={(e: MouseEvent) => {
-						if (isExpanded) {
-							e.stopPropagation();
-						}
-
-						if (selectedValues.length) {
-							onchange([]);
-						} else {
-							onchange(options.concat());
-						}
-					}}
-					icon={{
-						name: selectedValues.length ? 'close-menu-cross' : 'manage-product-group',
-						colour: Colour['$ui-blue-10']
-					}}
-				/>
-
-				<Action
-					{disabled}
-					size={Size.Small}
-					noTabIndex
-					colourSet={ColourSet.Auxiliary}
-					icon={{
-						name: isExpanded ? 'chevron-up' : 'chevron-down',
-						colour: Colour['$ui-blue-10']
-					}}
-				/>
-			</div>
-		{/snippet}
-		{#snippet toggleIcon()}
-			<div class="nothing"></div>
-			<!-- <div class="icon-bg">
-				<Icon name="chevron-down" size={Size.MediumSmall} />
-			</div> -->
-		{/snippet}
-	</Svelecte>
-
-	{#snippet selection(/*_selectedOptions: Array<unknown>*/)}
-		<!-- {#if selectedOptions.length === 0}
-			<span class="selection" class:hidden
-				>Please Select {#if objectName}
-					{an} {objectName}{/if}</span
-			>
-		{/if} -->
-	{/snippet}
-</div>
-
+<svelte:options runes />
+
+<script lang="ts" generics="V extends object, VP extends ValueProp<V>">
+	import { autoPluralise, generateShortUUID, vowels } from '../Helpers/Helpers.svelte.js';
+	import { Colour, ColourSet } from '../scss/colours.js';
+	import type { ValueProp } from '../Types/Internal/Misc.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import Svelecte from 'svelecte';
+	import { onMount } from 'svelte';
+	import Action from './Action.svelte';
+	import Icon from './Icon.svelte';
+	import type { MultiSelectProps } from './MultiSelectProps.js';
+
+	// HACK selectedValues is mutated by svelecte without asking, so we sometimes have to reverse it without a callback (side effects)
+	let {
+		label,
+		inputId = generateShortUUID(),
+		options,
+		labelProp,
+		valueProp,
+		width,
+		valueAsObject = true,
+		height,
+		selectedValues,
+		onchange,
+		collapseSelection = false,
+		name = 'Item',
+		disabled,
+		required,
+		invalid
+	}: MultiSelectProps<V, VP> = $props();
+
+	const an = $derived(name && vowels.has(name.at(0)?.toLocaleLowerCase() ?? '') ? 'an' : 'a');
+
+	const hidden = $state(false);
+
+	onMount(() => {
+		const input = document.getElementById(inputId);
+		// input?.addEventListener('focus', () => {
+		// 	hidden = true;
+		// });
+		// input?.addEventListener('blur', () => {
+		// 	hidden = false;
+		// });
+
+		// HACK callback for is-open on/off
+		const dropdownRef = input?.closest('div.svelecte')?.querySelector('.sv_dropdown') ?? undefined;
+		const observer = new MutationObserver((mutations: Array<MutationRecord>) => {
+			for (let i = mutations.length - 1; i > -1; i--) {
+				const mutation = mutations[i];
+				if (mutation.attributeName === 'class') {
+					isExpanded = dropdownRef?.classList.contains('is-open') ?? false;
+				}
+			}
+		});
+
+		if (dropdownRef) {
+			observer.observe(dropdownRef, { attributes: true });
+		}
+
+		return () => {
+			observer.disconnect();
+		};
+	});
+
+	let isExpanded = $state(false);
+
+	const isInvalid = $derived((required && !selectedValues.length) || invalid);
+
+	function usesValuesAsObjects(_values: Array<V> | Array<V[VP]>): _values is Array<V> {
+		return valueAsObject;
+	}
+
+	function usesValuesAsPrimitives(_values: Array<V> | Array<V[VP]>): _values is Array<V[VP]> {
+		return !valueAsObject;
+	}
+</script>
+
+<div
+	class:invalid={isInvalid}
+	class="select-wrapper"
+	style={`${width ? `--input-width: ${width};` : ''}${height ? `--input-height: ${height};` : ''}`}
+>
+	{#if label}
+		<label for={inputId}>
+			<span>{label}</span>
+			<span class="border">{label}</span>
+		</label>
+	{/if}
+
+	<Svelecte
+		multiple
+		{valueAsObject}
+		{disabled}
+		{inputId}
+		valueField={valueProp}
+		labelField={labelProp}
+		{options}
+		searchable
+		value={selectedValues}
+		onChange={(e: Array<V>) => {
+			onchange(e);
+		}}
+		{name}
+		selectOnTab
+		keepSelectionInList
+		searchProps={{ keepSelectionInList: true }}
+		creatable={false}
+		collapseSelection={collapseSelection ? 'always' : null}
+		deselectMode="toggle"
+		highlightFirstItem={false}
+		placeholder="Please Select {name ? `${an} ${name}` : ''}"
+		selection={collapseSelection ? selection : undefined}
+	>
+		{#snippet option(opt)}
+			{@const option = opt as V}
+			<span class="dropdown-item">
+				<div
+					class="toggle-icon"
+					class:yes={usesValuesAsObjects(selectedValues)
+						? selectedValues.findIndex((v) => v[valueProp] === option[valueProp]) > -1
+						: usesValuesAsPrimitives(selectedValues)
+							? (selectedValues as Array<V[VP]>).findIndex((v: V[VP]) => v === option[valueProp]) >
+								-1
+							: false}
+				>
+					<Icon name="tick" size={Size.MediumSmall} />
+				</div>
+				{option[labelProp]}</span
+			>
+		{/snippet}
+
+		{#snippet collapsedSelection(selectedOptions: Array<object> /*_i18n*/)}
+			<span class="selection" class:hidden
+				>{#if selectedOptions.length}{selectedOptions.length}
+					{#if name}{autoPluralise(name, selectedOptions.length)}{/if} Selected
+				{:else}Please Select {#if name}
+						{an} {name}{/if}
+				{/if}</span
+			>
+		{/snippet}
+
+		{#snippet append()}
+			<div class="icons">
+				<Action
+					{disabled}
+					size={Size.Small}
+					noTabIndex
+					colourSet={ColourSet.Auxiliary}
+					onclick={(e: MouseEvent) => {
+						if (isExpanded) {
+							e.stopPropagation();
+						}
+
+						if (selectedValues.length) {
+							onchange([]);
+						} else {
+							onchange(options.concat());
+						}
+					}}
+					icon={{
+						name: selectedValues.length ? 'close-menu-cross' : 'manage-product-group',
+						colour: Colour['$ui-blue-10']
+					}}
+				/>
+
+				<Action
+					{disabled}
+					size={Size.Small}
+					noTabIndex
+					colourSet={ColourSet.Auxiliary}
+					icon={{
+						name: isExpanded ? 'chevron-up' : 'chevron-down',
+						colour: Colour['$ui-blue-10']
+					}}
+				/>
+			</div>
+		{/snippet}
+		{#snippet toggleIcon()}
+			<div class="nothing"></div>
+			<!-- <div class="icon-bg">
+				<Icon name="chevron-down" size={Size.MediumSmall} />
+			</div> -->
+		{/snippet}
+	</Svelecte>
+
+	{#snippet selection(/*_selectedOptions: Array<unknown>*/)}
+		<!-- {#if selectedOptions.length === 0}
+			<span class="selection" class:hidden
+				>Please Select {#if objectName}
+					{an} {objectName}{/if}</span
+			>
+		{/if} -->
+	{/snippet}
+</div>
+
 <style>.select-wrapper {
   min-width: var(--input-min-width, 12rem);
   width: var(--input-width, 100%);
@@ -367,4 +367,4 @@ div.icons {
 }
 .dropdown-item .toggle-icon.yes {
   opacity: 1;
-}</style>
+}</style>

package/dist/Components/Nav/Nav.svelte

@@ -1,99 +1,99 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { Size } from '../../Types/Internal/Size.js';
-	import Icon from '../Icon.svelte';
-	import type { NavProps } from './NavProps.js';
-	import ServicesNav from './ServicesNav.svelte';
-
-	const { userName, extras, userDialog, serviceTabs, selectedServiceTab }: NavProps = $props();
-
-	const userIcon = $derived.by(() => {
-		const names = userName.split(' ');
-
-		const initials = names.map((it) => it.charAt(0)).slice(0, 2);
-		return initials;
-	});
-
-	const singleLetter = $derived(userIcon.length === 1);
-	const hasLetters = $derived(userIcon.length > 0);
-
-	let showServicesDialog = $state(false);
-	let showUserDialog = $state(false);
-</script>
-
-<nav class="main-navigation">
-	<span class="nav-link hoverable"> FloWMS </span>
-	<!-- HACK swap above for below when a decent landing page has been added -->
-	<!-- <a
-		href={resolve(Locations.Home)}
-		class="nav-link hoverable"
-	>
-		FloWMS
-	</a> -->
-
-	<div class="nav-link">
-		<button
-			onclick={() => {
-				showServicesDialog = !showServicesDialog;
-			}}
-		>
-			<div class="delimited">
-				<Icon
-					name="block-menu"
-					size={Size.Medium}
-				/>
-				<span>Services</span>
-			</div>
-		</button>
-
-		{#if showServicesDialog}
-			<ServicesNav
-				onclose={() => {
-					showServicesDialog = false;
-				}}
-				{serviceTabs}
-				{selectedServiceTab}
-			/>
-		{/if}
-	</div>
-
-	<div class="nav-search-container">
-		<!-- <TextInput
-			bind:value={searchParam}
-			placeholder="Search for anything"
-			leftIcon={{ name: 'search-1' }}
-		/> -->
-	</div>
-	{#if extras}
-		<div class="nav-link spaced selects">
-			{@render extras()}
-		</div>
-	{/if}
-
-	<div>
-		<button
-			onclick={() => {
-				showUserDialog = !showUserDialog;
-			}}
-		>
-			<span class="nav-link padded">
-				<span
-					class="user-icon"
-					class:visible={hasLetters}
-					class:single-letter={singleLetter}>{userIcon}</span
-				>
-				<span class="user-name">{userName}</span>
-			</span>
-		</button>
-		{#if showUserDialog}
-			{@render userDialog(() => {
-				showUserDialog = false;
-			})}
-		{/if}
-	</div>
-</nav>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { Size } from '../../Types/Internal/Size.js';
+	import Icon from '../Icon.svelte';
+	import type { NavProps } from './NavProps.js';
+	import ServicesNav from './ServicesNav.svelte';
+
+	const { userName, extras, userDialog, serviceTabs, selectedServiceTab }: NavProps = $props();
+
+	const userIcon = $derived.by(() => {
+		const names = userName.split(' ');
+
+		const initials = names.map((it) => it.charAt(0)).slice(0, 2);
+		return initials;
+	});
+
+	const singleLetter = $derived(userIcon.length === 1);
+	const hasLetters = $derived(userIcon.length > 0);
+
+	let showServicesDialog = $state(false);
+	let showUserDialog = $state(false);
+</script>
+
+<nav class="main-navigation">
+	<span class="nav-link hoverable"> FloWMS </span>
+	<!-- HACK swap above for below when a decent landing page has been added -->
+	<!-- <a
+		href={resolve(Locations.Home)}
+		class="nav-link hoverable"
+	>
+		FloWMS
+	</a> -->
+
+	<div class="nav-link">
+		<button
+			onclick={() => {
+				showServicesDialog = !showServicesDialog;
+			}}
+		>
+			<div class="delimited">
+				<Icon
+					name="block-menu"
+					size={Size.Medium}
+				/>
+				<span>Services</span>
+			</div>
+		</button>
+
+		{#if showServicesDialog}
+			<ServicesNav
+				onclose={() => {
+					showServicesDialog = false;
+				}}
+				{serviceTabs}
+				{selectedServiceTab}
+			/>
+		{/if}
+	</div>
+
+	<div class="nav-search-container">
+		<!-- <TextInput
+			bind:value={searchParam}
+			placeholder="Search for anything"
+			leftIcon={{ name: 'search-1' }}
+		/> -->
+	</div>
+	{#if extras}
+		<div class="nav-link spaced selects">
+			{@render extras()}
+		</div>
+	{/if}
+
+	<div>
+		<button
+			onclick={() => {
+				showUserDialog = !showUserDialog;
+			}}
+		>
+			<span class="nav-link padded">
+				<span
+					class="user-icon"
+					class:visible={hasLetters}
+					class:single-letter={singleLetter}>{userIcon}</span
+				>
+				<span class="user-name">{userName}</span>
+			</span>
+		</button>
+		{#if showUserDialog}
+			{@render userDialog(() => {
+				showUserDialog = false;
+			})}
+		{/if}
+	</div>
+</nav>
+
 <style>div.overlay {
   position: fixed;
   top: calc(3.25rem + var(--env-border-height, 0));
@@ -214,4 +214,4 @@ div.delimited {
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
-}</style>
+}</style>

package/dist/Components/Nav/NavServiceMenuList.svelte

@@ -1,36 +1,36 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { Colour } from '../../scss/colours.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import Icon from '../Icon.svelte';
-	import type { NavServiceMenuListProps } from './NavServiceMenuListProps.js';
-	import ServiceMenuItem from './ServiceMenuItem.svelte';
-
-	const { title, items, icon }: NavServiceMenuListProps = $props();
-</script>
-
-<div class="wrapper">
-	<h3>
-		<div class="icon">
-			{#if icon}
-				<Icon
-					size={Size.Large}
-					colour={Colour['$font-primary']}
-					{...icon}
-				/>
-			{/if}
-		</div>
-		{title}
-	</h3>
-
-	<div class="items">
-		{#each items as { item } (item.label)}
-			<ServiceMenuItem {item} />
-		{/each}
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { Colour } from '../../scss/colours.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import Icon from '../Icon.svelte';
+	import type { NavServiceMenuListProps } from './NavServiceMenuListProps.js';
+	import ServiceMenuItem from './ServiceMenuItem.svelte';
+
+	const { title, items, icon }: NavServiceMenuListProps = $props();
+</script>
+
+<div class="wrapper">
+	<h3>
+		<div class="icon">
+			{#if icon}
+				<Icon
+					size={Size.Large}
+					colour={Colour['$font-primary']}
+					{...icon}
+				/>
+			{/if}
+		</div>
+		{title}
+	</h3>
+
+	<div class="items">
+		{#each items as { item } (item.label)}
+			<ServiceMenuItem {item} />
+		{/each}
+	</div>
+</div>
+
 <style>h3 {
   font-size: 1.5rem;
   display: flex;
@@ -54,4 +54,4 @@ h3 .icon {
 .wrapper .items {
   flex-shrink: 1;
   overflow: auto;
-}</style>
+}</style>