@lavalogic/scoria 0.33.0 → 0.35.0

package/dist/Components/GridInput.svelte

@@ -1,192 +1,192 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import { dev } from '$app/environment';
-	import { loadingText } from '../Helpers/Helpers.svelte.js';
-	import type { GridItem } from '../Types/Internal/GridItem.js';
-	import type {
-		GridMultiSelectItem,
-		GridMultiSelectItemAsObject,
-		GridMultiSelectItemAsPrimitive,
-	} from '../Types/Internal/GridMultiSelectItem.js';
-	import type { GridSelectItem } from '../Types/Internal/GridSelectItem.js';
-	import type {
-		GridSingleSelectItem,
-		GridSingleSelectItemAsObject,
-		GridSingleSelectItemAsPrimitive,
-	} from '../Types/Internal/GridSingleSelectItem.js';
-	import type { GridTextItem } from '../Types/Internal/GridTextItem.js';
-	import type { ValueProp } from '../Types/Internal/Misc.js';
-	import type { GridInputProps } from './GridInputProps.js';
-	import MultiSelect from './MultiSelect.svelte';
-	import SingleSelect from './SingleSelect.svelte';
-	import TextInput from './TextInput.svelte';
-
-	const textTypes = new Set(['text', 'email', 'tel']);
-</script>
-
-<script
-	lang="ts"
-	generics="V extends object,VP extends ValueProp<V>"
->
-	const { item, first, last }: GridInputProps<V, VP> = $props();
-
-	let value = $derived(isText(item) ? (item.value ?? '') : '');
-
-	function isText<V extends object, VP extends ValueProp<V>>(
-		item: GridItem<V, VP>
-	): item is GridTextItem {
-		return item.type == null || textTypes.has(item.type);
-	}
-
-	function isSelect(item: GridItem<V, VP>): item is GridSelectItem<V, VP> {
-		return item.type == 'select';
-	}
-
-	function isMultiSelect<A extends object, B extends ValueProp<A>>(
-		item: GridSelectItem<A, B>
-	): item is GridMultiSelectItem<A, B> {
-		return 'multi' in item && item.multi === true;
-	}
-
-	function isMultiSelectPrimitive<A extends object, B extends ValueProp<A>>(
-		item: GridMultiSelectItem<A, B>
-	): item is GridMultiSelectItemAsPrimitive<A, B> {
-		return 'valueAsObject' in item && !item.valueAsObject;
-	}
-
-	function isMultiSelectObject<A extends object, B extends ValueProp<A>>(
-		item: GridMultiSelectItem<A, B>
-	): item is GridMultiSelectItemAsObject<A, B> {
-		return 'valueAsObject' in item && item.valueAsObject;
-	}
-
-	function isSingleSelect<A extends object, B extends ValueProp<A>>(
-		item: GridSelectItem<A, B>
-	): item is GridSingleSelectItem<A, B> {
-		return !('multi' in item) || item.multi === false;
-	}
-
-	function isSingleSelectPrimitive<A extends object, B extends ValueProp<A>>(
-		item: GridSingleSelectItem<A, B>
-	): item is GridSingleSelectItemAsPrimitive<A, B> {
-		return 'valueAsObject' in item && !item.valueAsObject;
-	}
-
-	function isSingleSelectObject<A extends object, B extends ValueProp<A>>(
-		item: GridSingleSelectItem<A, B>
-	): item is GridSingleSelectItemAsObject<A, B> {
-		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>) => {
-							const values = v.map((it) => it[item.valueProp]);
-
-							item.updater(values);
-						}}
-					/>
-				{/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={(v: V | null) => {
-							const x = v == null ? null : v[item.valueProp];
-
-							item.updater(x);
-						}}
-					/>
-				{/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>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import { dev } from '$app/environment';
+	import { loadingText } from '../Helpers/Helpers.svelte.js';
+	import type { GridItem } from '../Types/Internal/GridItem.js';
+	import type {
+		GridMultiSelectItem,
+		GridMultiSelectItemAsObject,
+		GridMultiSelectItemAsPrimitive,
+	} from '../Types/Internal/GridMultiSelectItem.js';
+	import type { GridSelectItem } from '../Types/Internal/GridSelectItem.js';
+	import type {
+		GridSingleSelectItem,
+		GridSingleSelectItemAsObject,
+		GridSingleSelectItemAsPrimitive,
+	} from '../Types/Internal/GridSingleSelectItem.js';
+	import type { GridTextItem } from '../Types/Internal/GridTextItem.js';
+	import type { ValueProp } from '../Types/Internal/Misc.js';
+	import type { GridInputProps } from './GridInputProps.js';
+	import MultiSelect from './MultiSelect.svelte';
+	import SingleSelect from './SingleSelect.svelte';
+	import TextInput from './TextInput.svelte';
+
+	const textTypes = new Set(['text', 'email', 'tel']);
+</script>
+
+<script
+	lang="ts"
+	generics="V extends object,VP extends ValueProp<V>"
+>
+	const { item, first, last }: GridInputProps<V, VP> = $props();
+
+	let value = $derived(isText(item) ? (item.value ?? '') : '');
+
+	function isText<V extends object, VP extends ValueProp<V>>(
+		item: GridItem<V, VP>
+	): item is GridTextItem {
+		return item.type == null || textTypes.has(item.type);
+	}
+
+	function isSelect(item: GridItem<V, VP>): item is GridSelectItem<V, VP> {
+		return item.type == 'select';
+	}
+
+	function isMultiSelect<A extends object, B extends ValueProp<A>>(
+		item: GridSelectItem<A, B>
+	): item is GridMultiSelectItem<A, B> {
+		return 'multi' in item && item.multi === true;
+	}
+
+	function isMultiSelectPrimitive<A extends object, B extends ValueProp<A>>(
+		item: GridMultiSelectItem<A, B>
+	): item is GridMultiSelectItemAsPrimitive<A, B> {
+		return 'valueAsObject' in item && !item.valueAsObject;
+	}
+
+	function isMultiSelectObject<A extends object, B extends ValueProp<A>>(
+		item: GridMultiSelectItem<A, B>
+	): item is GridMultiSelectItemAsObject<A, B> {
+		return 'valueAsObject' in item && item.valueAsObject;
+	}
+
+	function isSingleSelect<A extends object, B extends ValueProp<A>>(
+		item: GridSelectItem<A, B>
+	): item is GridSingleSelectItem<A, B> {
+		return !('multi' in item) || item.multi === false;
+	}
+
+	function isSingleSelectPrimitive<A extends object, B extends ValueProp<A>>(
+		item: GridSingleSelectItem<A, B>
+	): item is GridSingleSelectItemAsPrimitive<A, B> {
+		return 'valueAsObject' in item && !item.valueAsObject;
+	}
+
+	function isSingleSelectObject<A extends object, B extends ValueProp<A>>(
+		item: GridSingleSelectItem<A, B>
+	): item is GridSingleSelectItemAsObject<A, B> {
+		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>) => {
+							const values = v.map((it) => it[item.valueProp]);
+
+							item.updater(values);
+						}}
+					/>
+				{/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={(v: V | null) => {
+							const x = v == null ? null : v[item.valueProp];
+
+							item.updater(x);
+						}}
+					/>
+				{/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;
@@ -205,4 +205,4 @@ label.first {
 }
 label.last {
   border-radius: 0 0 4px 4px;
-}</style>
+}</style>

package/dist/Components/GridInputSet.svelte

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

package/dist/Components/HorizontalTabGroup.svelte

@@ -1,80 +1,80 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="CommonDenominator"
->
-	import { ellipses } from '../Helpers/Helpers.svelte.js';
-	import { Colour } from '../scss/colours.js';
-	import HorizontalTabGroupButton from './HorizontalTabGroupButton.svelte';
-	import type { HorizontalTabGroupProps } from './HorizontalTabGroupProps.js';
-	import TextInput from './TextInput.svelte';
-	let {
-		// name: _name, //FIXME why is this not implemented?
-		tabComponent,
-		tabs,
-		selected,
-		noRadius = false,
-		grow = false,
-		filterable = false,
-		filterFn,
-	}: HorizontalTabGroupProps<CommonDenominator> = $props();
-
-	// svelte-ignore state_referenced_locally
-	let filteredTabs = $state(tabs);
-
-	$effect(() => {
-		const term = searchValue;
-		const id = setTimeout(() => {
-			filteredTabs = filterFn ? tabs.filter((t) => filterFn(t, term)) : tabs;
-		}, 300);
-		return () => {
-			clearTimeout(id);
-		};
-	});
-
-	let searchValue = $state('');
-</script>
-
-<div
-	class="wrapper"
-	class:no-radius={noRadius}
-	class:grow
->
-	<div class="tabs">
-		<div class="sticky">
-			{#if filterable}
-				<div class="searchbar">
-					<TextInput
-						bind:value={searchValue}
-						placeholder="Search any keyword to find matches{ellipses}"
-						rightIcon={{ name: 'search-1', colour: Colour['$ui-blue-4'] }}
-					/>
-				</div>
-			{/if}
-		</div>
-		{#if tabComponent}
-			{#each filteredTabs as option (option)}
-				{@render tabComponent(option, selected === option)}
-			{/each}
-		{:else}
-			{#each filteredTabs as option (option)}
-				<HorizontalTabGroupButton
-					{option}
-					noRadius={noRadius || filterable}
-					selected={selected === option}
-				/>
-			{/each}
-		{/if}
-	</div>
-
-	<div class="content">
-		{#if selected}
-			{@render selected.content(selected.args)}
-		{/if}
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="CommonDenominator"
+>
+	import { ellipses } from '../Helpers/Helpers.svelte.js';
+	import { Colour } from '../scss/colours.js';
+	import HorizontalTabGroupButton from './HorizontalTabGroupButton.svelte';
+	import type { HorizontalTabGroupProps } from './HorizontalTabGroupProps.js';
+	import TextInput from './TextInput.svelte';
+	let {
+		// name: _name, //FIXME why is this not implemented?
+		tabComponent,
+		tabs,
+		selected,
+		noRadius = false,
+		grow = false,
+		filterable = false,
+		filterFn,
+	}: HorizontalTabGroupProps<CommonDenominator> = $props();
+
+	// svelte-ignore state_referenced_locally
+	let filteredTabs = $state(tabs);
+
+	$effect(() => {
+		const term = searchValue;
+		const id = setTimeout(() => {
+			filteredTabs = filterFn ? tabs.filter((t) => filterFn(t, term)) : tabs;
+		}, 300);
+		return () => {
+			clearTimeout(id);
+		};
+	});
+
+	let searchValue = $state('');
+</script>
+
+<div
+	class="wrapper"
+	class:no-radius={noRadius}
+	class:grow
+>
+	<div class="tabs">
+		<div class="sticky">
+			{#if filterable}
+				<div class="searchbar">
+					<TextInput
+						bind:value={searchValue}
+						placeholder="Search any keyword to find matches{ellipses}"
+						rightIcon={{ name: 'search-1', colour: Colour['$ui-blue-4'] }}
+					/>
+				</div>
+			{/if}
+		</div>
+		{#if tabComponent}
+			{#each filteredTabs as option (option)}
+				{@render tabComponent(option, selected === option)}
+			{/each}
+		{:else}
+			{#each filteredTabs as option (option)}
+				<HorizontalTabGroupButton
+					{option}
+					noRadius={noRadius || filterable}
+					selected={selected === option}
+				/>
+			{/each}
+		{/if}
+	</div>
+
+	<div class="content">
+		{#if selected}
+			{@render selected.content(selected.args)}
+		{/if}
+	</div>
+</div>
+
 <style>.searchbar {
   display: flex;
   width: 100%;
@@ -125,4 +125,4 @@
   flex-grow: 1;
   overflow: visible;
   border-radius: 0 4px 0 4px;
-}</style>
+}</style>