@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/GridInput.svelte

@@ -1,198 +1,161 @@
-<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 Record<string, unknown>,VP extends ValueProp<V>"
->
-	const { item, first, last }: GridInputProps<V, VP> = $props();
-
-	let value = $derived(isText(item) ? (item.value ?? '') : '');
-
-	function isText<V extends Record<string, unknown>, 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 Record<string, unknown>, B extends ValueProp<A>>(
-		item: GridSelectItem<A, B>
-	): item is GridMultiSelectItem<A, B> {
-		return 'multi' in item && item.multi === true;
-	}
-
-	function isMultiSelectPrimitive<A extends Record<string, unknown>, B extends ValueProp<A>>(
-		item: GridMultiSelectItem<A, B>
-	): item is GridMultiSelectItemAsPrimitive<A, B> {
-		return 'valueAsObject' in item && !item.valueAsObject;
-	}
-
-	function isMultiSelectObject<A extends Record<string, unknown>, B extends ValueProp<A>>(
-		item: GridMultiSelectItem<A, B>
-	): item is GridMultiSelectItemAsObject<A, B> {
-		return 'valueAsObject' in item && item.valueAsObject;
-	}
-
-	function isSingleSelect<A extends Record<string, unknown>, B extends ValueProp<A>>(
-		item: GridSelectItem<A, B>
-	): item is GridSingleSelectItem<A, B> {
-		return !('multi' in item) || item.multi === false;
-	}
-
-	function isSingleSelectPrimitive<A extends Record<string, unknown>, B extends ValueProp<A>>(
-		item: GridSingleSelectItem<A, B>
-	): item is GridSingleSelectItemAsPrimitive<A, B> {
-		return 'valueAsObject' in item && !item.valueAsObject;
-	}
-
-	function isSingleSelectObject<A extends Record<string, unknown>, 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[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>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>import { dev } from "$app/environment";
+import { loadingText } from "../Helpers/Helpers.svelte.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 Record<string, unknown>,VP extends ValueProp<V>"
+>const { item, first, last } = $props();
+let value = $derived(isText(item) ? item.value ?? "" : "");
+function isText(item) {
+	return item.type == null || textTypes.has(item.type);
+}
+function isSelect(item) {
+	return item.type == "select";
+}
+function isMultiSelect(item) {
+	return "multi" in item && item.multi === true;
+}
+function isMultiSelectPrimitive(item) {
+	return "valueAsObject" in item && !item.valueAsObject;
+}
+function isMultiSelectObject(item) {
+	return "valueAsObject" in item && item.valueAsObject;
+}
+function isSingleSelect(item) {
+	return !("multi" in item) || item.multi === false;
+}
+function isSingleSelectPrimitive(item) {
+	return "valueAsObject" in item && !item.valueAsObject;
+}
+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>
+
 <style>label {
   display: contents;
   --input-border-radius: 0;
@@ -211,4 +174,4 @@ label.first {
 }
 label.last {
   border-radius: 0 0 4px 4px;
-}</style>
+}</style>

package/dist/Components/GridInputSet.svelte

@@ -1,31 +1,26 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="V extends Record<string, unknown>,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.label)}
-		<GridInput
-			{item}
-			first={index == 0}
-			last={index == lastIndex}
-		/>
-	{/each}
-</div>
-
+<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>
+
 <style>.grid {
   display: grid;
   grid-template-columns: [label] 16rem [value] 1fr;
@@ -33,4 +28,4 @@
   border: solid 1px #dae0e5;
   border-radius: 4px;
   background-color: #dae0e5;
-}</style>
+}</style>

package/dist/Components/HorizontalTabGroup.svelte

@@ -1,91 +1,75 @@
-<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 {
-		tabComponent,
-		tabs,
-		selected,
-		noRadius = false,
-		grow = false,
-		dense = false,
-		filterable = false,
-		filterFn,
-		searchValue = $bindable(''),
-		searchInfo,
-		searchPlaceholder,
-	}: HorizontalTabGroupProps<CommonDenominator> = $props();
-
-	// Debounce only the search value, not the tabs array. This way a parent
-	// rebuilding `tabs` shows the new list immediately, while typing still
-	// pays the 300ms cost.
-	let debouncedSearch = $state('');
-	$effect(() => {
-		const term = searchValue;
-		const id = setTimeout(() => {
-			debouncedSearch = term;
-		}, 300);
-		return () => {
-			clearTimeout(id);
-		};
-	});
-
-	const filteredTabs = $derived(filterFn ? tabs.filter((t) => filterFn(t, debouncedSearch)) : tabs);
-</script>
-
-<div
-	class="wrapper"
-	class:no-radius={noRadius}
-	class:grow
-	class:dense
->
-	<div class="tabs">
-		<div class="sticky">
-			{#if filterable}
-				<div class="searchbar">
-					<TextInput
-						bind:value={searchValue}
-						placeholder={searchPlaceholder ?? `Search any keyword to find matches${ellipses}`}
-						rightIcon={{ name: 'search-1', colour: Colour['$ui-blue-4'] }}
-					/>
-					{#if searchInfo}
-						<span class="search-info">
-							<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-							{@render searchInfo()}
-						</span>
-					{/if}
-				</div>
-			{/if}
-		</div>
-		{#if tabComponent}
-			{#each filteredTabs as option (option.label)}
-				{@render tabComponent(option, selected?.label === option.label)}
-			{/each}
-		{:else}
-			{#each filteredTabs as option (option.label)}
-				<HorizontalTabGroupButton
-					{option}
-					noRadius={noRadius || filterable}
-					selected={selected?.label === option.label}
-				/>
-			{/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 TextInput from "./TextInput.svelte";
+let { tabComponent, tabs, selected, noRadius = false, grow = false, dense = false, filterable = false, filterFn, searchValue = $bindable(""), searchInfo, searchPlaceholder } = $props();
+// Debounce only the search value, not the tabs array. This way a parent
+// rebuilding `tabs` shows the new list immediately, while typing still
+// pays the 300ms cost.
+let debouncedSearch = $state("");
+$effect(() => {
+	const term = searchValue;
+	const id = setTimeout(() => {
+		debouncedSearch = term;
+	}, 300);
+	return () => {
+		clearTimeout(id);
+	};
+});
+const filteredTabs = $derived(filterFn ? tabs.filter((t) => filterFn(t, debouncedSearch)) : tabs);
+</script>
+
+<div
+	class="wrapper"
+	class:no-radius={noRadius}
+	class:grow
+	class:dense
+>
+	<div class="tabs">
+		<div class="sticky">
+			{#if filterable}
+				<div class="searchbar">
+					<TextInput
+						bind:value={searchValue}
+						placeholder={searchPlaceholder ?? `Search any keyword to find matches${ellipses}`}
+						rightIcon={{ name: 'search-1', colour: Colour['$ui-blue-4'] }}
+					/>
+					{#if searchInfo}
+						<span class="search-info">
+							<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+							{@render searchInfo()}
+						</span>
+					{/if}
+				</div>
+			{/if}
+		</div>
+		{#if tabComponent}
+			{#each filteredTabs as option (option.label)}
+				{@render tabComponent(option, selected?.label === option.label)}
+			{/each}
+		{:else}
+			{#each filteredTabs as option (option.label)}
+				<HorizontalTabGroupButton
+					{option}
+					noRadius={noRadius || filterable}
+					selected={selected?.label === option.label}
+				/>
+			{/each}
+		{/if}
+	</div>
+
+	<div class="content">
+		{#if selected}
+			{@render selected.content(selected.args)}
+		{/if}
+	</div>
+</div>
+
 <style>.searchbar {
   display: flex;
   flex-flow: row nowrap;
@@ -152,4 +136,4 @@
   flex-grow: 1;
   overflow: visible;
   border-radius: 0 4px 0 4px;
-}</style>
+}</style>