@lavalogic/scoria 0.33.0 → 0.35.0

package/dist/Components/Base/Pagination.svelte

@@ -1,192 +1,192 @@
-<svelte:options runes />
-
-<!-- @component
-	Allows for automated pagination of local content in cases where a collection may become a performance concern
-
-	### Usage
-	```svelte
-		<Pagination snippet={itemSnippet} pageSize={20} items={dataWrapper.value} key="id" />
-	```
- -->
-<script
-	lang="ts"
-	generics="T extends object"
->
-	import { autoPluralise, generateShortUUID } from '../../Helpers/Helpers.svelte.js';
-	import { Colour } from '../../scss/colours.js';
-	import { Side } from '../../Types/Internal/Side.js';
-	import { Size } from '../../Types/Internal/Size.js';
-	import { Variant } from '../../Types/Internal/Variant.js';
-	import Button from '../Button.svelte';
-	import Icon from '../Icon.svelte';
-	import NumberInput from '../NumberInput.svelte';
-	import type { PaginationProps } from './PaginationProps.js';
-
-	const {
-		items,
-		key,
-		pageSize = 20,
-		snippet,
-		itemName = 'Item',
-		border = false,
-		padding = '1.5rem', //sizing.$regular-padding
-		gap = '1.5rem', // sizing.$regular-gap
-		height,
-	}: PaginationProps<T> = $props();
-
-	const _uuid = generateShortUUID();
-	let pageIndex = $state(0);
-	let pageValue = $derived(pageIndex + 1);
-	const startIndex = $derived(pageIndex * pageSize);
-	const pageItems = $derived(items.slice(startIndex, startIndex + pageSize));
-
-	const lastPage = $derived(Math.ceil(items.length / pageSize));
-	const lastPageIndex = $derived(lastPage - 1);
-
-	let debounceTimeout = -1;
-	function onNumberInput(e: Event) {
-		const page = parseInt((e.target as HTMLInputElement).value);
-
-		clearTimeout(debounceTimeout);
-		if (!isNaN(page)) {
-			debounceTimeout = setTimeout(() => {
-				pageIndex = Math.max(page - 1, 0);
-			}, 400) as unknown as number;
-		}
-	}
-
-	let pageButtons: Array<number> = $state([]);
-
-	$effect(() => {
-		const startingPage = Math.min(lastPage - 2, pageIndex - 1);
-		const pageToStartWith = Math.max(1, Math.min(startingPage, lastPage - 4));
-
-		pageButtons = new Array<number>(Math.min(lastPage, 5))
-			.fill(pageToStartWith)
-			.map((item, index) => item + index);
-	});
-</script>
-
-<!-- PROPER -->
-<!-- 
-
-	<div class="pagination">
-		<div>page {pageIndex}</div>
-		<button
-			onclick={() => {
-				pageIndex = Math.max(pageIndex - 1, 0);
-			}}>Previous</button
-		>
-		<button
-			onclick={() => {
-				pageIndex = Math.min(pageIndex + 1, lastPageIndex);
-			}}>Next</button
-		>
-	</div>
-</div> -->
-
-<!-- 	style={`${padding ? `padding: ${padding};` : ''}` +
-		`${gap ? `gap: ${gap};` : ''}` +
-		`${height ? `height: ${height};` : ''}`} -->
-<div
-	class="wrapper"
-	class:border
-	style={(padding ? `padding: ${padding};` : '') +
-		(gap ? `gap: ${gap};` : '') +
-		(height ? `height: ${height};` : '')}
->
-	{#each pageItems as item, index (item[key])}
-		{@render snippet(item, index)}
-	{/each}
-	<div class="spread_row bottom_row">
-		<div class="block">
-			<span>{items.length} {autoPluralise(itemName, items.length)}</span>
-		</div>
-
-		<div class="block records-per-page">
-			<span>Records per Page: {pageSize}</span>
-		</div>
-
-		<div class="spacer"></div>
-		<!-- {/* TODO switch to a lib element for this */} -->
-
-		<div class="scrollable">
-			<div class="block">
-				<Icon
-					name="paper"
-					colour={Colour['$ui-blue-6']}
-				/>
-				<span>{lastPage} {autoPluralise('Page', lastPage)}</span>
-			</div>
-
-			<div class="block">
-				<label for="{_uuid}-jump-to-page"
-					><Icon
-						name="arrow-move-horizontal"
-						colour={Colour['$ui-blue-6']}
-					/></label
-				>
-
-				<label for="{_uuid}-jump-to-page">Jump to page:</label>
-
-				<NumberInput
-					id="{_uuid}-jump-to-page"
-					value={pageValue}
-					oninput={onNumberInput}
-				/>
-			</div>
-
-			<div class="block nopad page-arrow">
-				<Button
-					variant={Variant.Toolbar}
-					disabled={pageIndex === 0}
-					side={Side.Bottom}
-					onclick={() => {
-						pageIndex = Math.max(pageIndex - 1, 0);
-					}}
-					size={Size.FillHeight}
-					iconLeft={{
-						name: 'left-close',
-						size: Size.FillHeight,
-					}}>Previous Page</Button
-				>
-			</div>
-
-			{#key pageButtons}
-				{#each pageButtons as pageNumber (pageNumber)}
-					<div class="block nopad">
-						<Button
-							variant={Variant.Toolbar}
-							side={Side.Bottom}
-							size={Size.FillHeight}
-							toggled={pageIndex + 1 === pageNumber}
-							onclick={() => {
-								pageIndex = pageNumber - 1;
-							}}>{pageNumber}</Button
-						>
-					</div>
-				{/each}
-			{/key}
-
-			<div class="block nopad page-arrow">
-				<Button
-					variant={Variant.Toolbar}
-					side={Side.Bottom}
-					size={Size.FillHeight}
-					onclick={() => {
-						pageIndex = Math.min(pageIndex + 1, lastPageIndex);
-					}}
-					disabled={pageIndex == lastPageIndex}
-					iconRight={{
-						name: 'right-close',
-						size: Size.FillHeight,
-					}}>Next Page</Button
-				>
-			</div>
-		</div>
-	</div>
-</div>
-
+<svelte:options runes />
+
+<!-- @component
+	Allows for automated pagination of local content in cases where a collection may become a performance concern
+
+	### Usage
+	```svelte
+		<Pagination snippet={itemSnippet} pageSize={20} items={dataWrapper.value} key="id" />
+	```
+ -->
+<script
+	lang="ts"
+	generics="T extends object"
+>
+	import { autoPluralise, generateShortUUID } from '../../Helpers/Helpers.svelte.js';
+	import { Colour } from '../../scss/colours.js';
+	import { Side } from '../../Types/Internal/Side.js';
+	import { Size } from '../../Types/Internal/Size.js';
+	import { Variant } from '../../Types/Internal/Variant.js';
+	import Button from '../Button.svelte';
+	import Icon from '../Icon.svelte';
+	import NumberInput from '../NumberInput.svelte';
+	import type { PaginationProps } from './PaginationProps.js';
+
+	const {
+		items,
+		key,
+		pageSize = 20,
+		snippet,
+		itemName = 'Item',
+		border = false,
+		padding = '1.5rem', //sizing.$regular-padding
+		gap = '1.5rem', // sizing.$regular-gap
+		height,
+	}: PaginationProps<T> = $props();
+
+	const _uuid = generateShortUUID();
+	let pageIndex = $state(0);
+	let pageValue = $derived(pageIndex + 1);
+	const startIndex = $derived(pageIndex * pageSize);
+	const pageItems = $derived(items.slice(startIndex, startIndex + pageSize));
+
+	const lastPage = $derived(Math.ceil(items.length / pageSize));
+	const lastPageIndex = $derived(lastPage - 1);
+
+	let debounceTimeout = -1;
+	function onNumberInput(e: Event) {
+		const page = parseInt((e.target as HTMLInputElement).value);
+
+		clearTimeout(debounceTimeout);
+		if (!isNaN(page)) {
+			debounceTimeout = setTimeout(() => {
+				pageIndex = Math.max(page - 1, 0);
+			}, 400) as unknown as number;
+		}
+	}
+
+	let pageButtons: Array<number> = $state([]);
+
+	$effect(() => {
+		const startingPage = Math.min(lastPage - 2, pageIndex - 1);
+		const pageToStartWith = Math.max(1, Math.min(startingPage, lastPage - 4));
+
+		pageButtons = new Array<number>(Math.min(lastPage, 5))
+			.fill(pageToStartWith)
+			.map((item, index) => item + index);
+	});
+</script>
+
+<!-- PROPER -->
+<!-- 
+
+	<div class="pagination">
+		<div>page {pageIndex}</div>
+		<button
+			onclick={() => {
+				pageIndex = Math.max(pageIndex - 1, 0);
+			}}>Previous</button
+		>
+		<button
+			onclick={() => {
+				pageIndex = Math.min(pageIndex + 1, lastPageIndex);
+			}}>Next</button
+		>
+	</div>
+</div> -->
+
+<!-- 	style={`${padding ? `padding: ${padding};` : ''}` +
+		`${gap ? `gap: ${gap};` : ''}` +
+		`${height ? `height: ${height};` : ''}`} -->
+<div
+	class="wrapper"
+	class:border
+	style={(padding ? `padding: ${padding};` : '') +
+		(gap ? `gap: ${gap};` : '') +
+		(height ? `height: ${height};` : '')}
+>
+	{#each pageItems as item, index (item[key])}
+		{@render snippet(item, index)}
+	{/each}
+	<div class="spread_row bottom_row">
+		<div class="block">
+			<span>{items.length} {autoPluralise(itemName, items.length)}</span>
+		</div>
+
+		<div class="block records-per-page">
+			<span>Records per Page: {pageSize}</span>
+		</div>
+
+		<div class="spacer"></div>
+		<!-- {/* TODO switch to a lib element for this */} -->
+
+		<div class="scrollable">
+			<div class="block">
+				<Icon
+					name="paper"
+					colour={Colour['$ui-blue-6']}
+				/>
+				<span>{lastPage} {autoPluralise('Page', lastPage)}</span>
+			</div>
+
+			<div class="block">
+				<label for="{_uuid}-jump-to-page"
+					><Icon
+						name="arrow-move-horizontal"
+						colour={Colour['$ui-blue-6']}
+					/></label
+				>
+
+				<label for="{_uuid}-jump-to-page">Jump to page:</label>
+
+				<NumberInput
+					id="{_uuid}-jump-to-page"
+					value={pageValue}
+					oninput={onNumberInput}
+				/>
+			</div>
+
+			<div class="block nopad page-arrow">
+				<Button
+					variant={Variant.Toolbar}
+					disabled={pageIndex === 0}
+					side={Side.Bottom}
+					onclick={() => {
+						pageIndex = Math.max(pageIndex - 1, 0);
+					}}
+					size={Size.FillHeight}
+					iconLeft={{
+						name: 'left-close',
+						size: Size.FillHeight,
+					}}>Previous Page</Button
+				>
+			</div>
+
+			{#key pageButtons}
+				{#each pageButtons as pageNumber (pageNumber)}
+					<div class="block nopad">
+						<Button
+							variant={Variant.Toolbar}
+							side={Side.Bottom}
+							size={Size.FillHeight}
+							toggled={pageIndex + 1 === pageNumber}
+							onclick={() => {
+								pageIndex = pageNumber - 1;
+							}}>{pageNumber}</Button
+						>
+					</div>
+				{/each}
+			{/key}
+
+			<div class="block nopad page-arrow">
+				<Button
+					variant={Variant.Toolbar}
+					side={Side.Bottom}
+					size={Size.FillHeight}
+					onclick={() => {
+						pageIndex = Math.min(pageIndex + 1, lastPageIndex);
+					}}
+					disabled={pageIndex == lastPageIndex}
+					iconRight={{
+						name: 'right-close',
+						size: Size.FillHeight,
+					}}>Next Page</Button
+				>
+			</div>
+		</div>
+	</div>
+</div>
+
 <style>.wrapper {
   display: flex;
   flex: 1;
@@ -261,4 +261,4 @@
 }
 .spread_row .spacer {
   flex-grow: 2;
-}</style>
+}</style>

package/dist/Components/Base/Snippets.svelte

@@ -1,29 +1,29 @@
-<svelte:options runes />
-
-<!-- @component
-An empty component that only exists to export common snippets
- -->
-<script
-	lang="ts"
-	module
->
-	import { getErrorMessage, loadingText } from '../../Helpers/Helpers.svelte.js';
-	import Button from '../Button.svelte';
-
-	export const pending = _pending;
-	export const failed = _failed;
-</script>
-
-{#snippet _pending()}
-	{loadingText}
-{/snippet}
-{#snippet _failed(e: unknown, retry?: () => void)}
-	Error: {getErrorMessage(e)}
-	{#if retry}
-		<Button
-			onclick={() => {
-				retry();
-			}}>Retry</Button
-		>
-	{/if}
-{/snippet}
+<svelte:options runes />
+
+<!-- @component
+An empty component that only exists to export common snippets
+ -->
+<script
+	lang="ts"
+	module
+>
+	import { getErrorMessage, loadingText } from '../../Helpers/Helpers.svelte.js';
+	import Button from '../Button.svelte';
+
+	export const pending = _pending;
+	export const failed = _failed;
+</script>
+
+{#snippet _pending()}
+	{loadingText}
+{/snippet}
+{#snippet _failed(e: unknown, retry?: () => void)}
+	Error: {getErrorMessage(e)}
+	{#if retry}
+		<Button
+			onclick={() => {
+				retry();
+			}}>Retry</Button
+		>
+	{/if}
+{/snippet}

package/dist/Components/BigRadioSet.svelte

@@ -1,31 +1,31 @@
-<svelte:options runes />
-
-<script lang="ts" generics="T">
-	import type { BigRadioOption } from '../Types/Internal/BigRadioOption.js';
-	import type { BigRadioSetProps } from './BigRadioSetProps.js';
-	let { name, options, selected = $bindable() }: BigRadioSetProps<T> = $props();
-
-	// let selected: T | undefined = $state();
-</script>
-
-<div class="wrapper">
-	{#each options as option (option)}
-		<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-		{@render radio(option)}
-	{/each}
-</div>
-
-{#snippet radio(option: BigRadioOption<T>)}
-	<!-- {@debug selected} -->
-	<label class:selected={selected === option.value}>
-		<input type="radio" {name} bind:group={selected} value={option.value} />
-		<div class="text">
-			<h5 class="title">{option.label}</h5>
-			<p class="note">{option.info}</p>
-		</div>
-	</label>
-{/snippet}
-
+<svelte:options runes />
+
+<script lang="ts" generics="T">
+	import type { BigRadioOption } from '../Types/Internal/BigRadioOption.js';
+	import type { BigRadioSetProps } from './BigRadioSetProps.js';
+	let { name, options, selected = $bindable() }: BigRadioSetProps<T> = $props();
+
+	// let selected: T | undefined = $state();
+</script>
+
+<div class="wrapper">
+	{#each options as option (option)}
+		<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+		{@render radio(option)}
+	{/each}
+</div>
+
+{#snippet radio(option: BigRadioOption<T>)}
+	<!-- {@debug selected} -->
+	<label class:selected={selected === option.value}>
+		<input type="radio" {name} bind:group={selected} value={option.value} />
+		<div class="text">
+			<h5 class="title">{option.label}</h5>
+			<p class="note">{option.info}</p>
+		</div>
+	</label>
+{/snippet}
+
 <style>.wrapper {
   display: flex;
   flex-flow: row wrap;
@@ -78,4 +78,4 @@ label.selected {
 }
 label.selected h5 {
   color: #ffffff;
-}</style>
+}</style>

package/dist/Components/Bubble.svelte

@@ -1,79 +1,79 @@
-<svelte:options runes />
-
-<script lang="ts" module>
-	import { Size } from '../Types/Internal/Size.js';
-	import type { BubbleProps } from './BubbleProps.js';
-	import Icon from './Icon.svelte';
-
-	const horizontalWithValue: Partial<Record<Size, string>> = {
-		[Size.Large]: '1rem'
-	};
-
-	const horizontalWithoutValue: Partial<Record<Size, string>> = {
-		[Size.Large]: '1.25rem'
-	};
-
-	const vertical: Partial<Record<Size, string>> = {
-		[Size.Large]: '0.5rem'
-	};
-
-	const fontSizes: Partial<Record<Size, string>> = {
-		[Size.Large]: '1.12rem'
-	};
-
-	const borderRadii: Partial<Record<Size, string>> = {
-		[Size.Large]: '1.75rem'
-	};
-</script>
-
-<script lang="ts">
-	const {
-		options,
-		value,
-		colours,
-		label,
-		size = Size.Medium,
-		bold,
-		icon,
-		onclick
-	}: BubbleProps = $props();
-
-	const verticalPadding = $derived(vertical[size] ?? '0.18rem');
-	const horizontalPadding = $derived.by(() => {
-		if (value.length === 1) {
-			return horizontalWithValue[size] ?? '0.5rem';
-		}
-
-		return horizontalWithoutValue[size] ?? '0.75rem';
-	});
-	const fontSize = $derived(fontSizes[size] ?? '1rem');
-	const borderRadius = $derived(borderRadii[size] ?? '12px');
-</script>
-
-{#if onclick}
-	<button class="contents" {onclick}>
-		<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-		{@render bubble()}
-	</button>
-{:else}
-	<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-	{@render bubble()}
-{/if}
-
-{#snippet bubble()}
-	<span
-		class="bubble"
-		class:bold
-		class:hoverable={!!onclick}
-		style="{colours
-			? `background-color: ${colours.backgroundColour}; color: ${colours.colour};`
-			: ''} padding: var(--bubble-padding, {verticalPadding} {horizontalPadding}); font-size: {fontSize}; border-radius: {borderRadius}"
-		>{#if label}{label}:&nbsp;{/if}{options?.length
-			? options.find((it) => it.value === value)?.label
-			: value}{#if icon}<div class="icon"><Icon {...icon} /></div>{/if}</span
-	>
-{/snippet}
-
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { Size } from '../Types/Internal/Size.js';
+	import type { BubbleProps } from './BubbleProps.js';
+	import Icon from './Icon.svelte';
+
+	const horizontalWithValue: Partial<Record<Size, string>> = {
+		[Size.Large]: '1rem'
+	};
+
+	const horizontalWithoutValue: Partial<Record<Size, string>> = {
+		[Size.Large]: '1.25rem'
+	};
+
+	const vertical: Partial<Record<Size, string>> = {
+		[Size.Large]: '0.5rem'
+	};
+
+	const fontSizes: Partial<Record<Size, string>> = {
+		[Size.Large]: '1.12rem'
+	};
+
+	const borderRadii: Partial<Record<Size, string>> = {
+		[Size.Large]: '1.75rem'
+	};
+</script>
+
+<script lang="ts">
+	const {
+		options,
+		value,
+		colours,
+		label,
+		size = Size.Medium,
+		bold,
+		icon,
+		onclick
+	}: BubbleProps = $props();
+
+	const verticalPadding = $derived(vertical[size] ?? '0.18rem');
+	const horizontalPadding = $derived.by(() => {
+		if (value.length === 1) {
+			return horizontalWithValue[size] ?? '0.5rem';
+		}
+
+		return horizontalWithoutValue[size] ?? '0.75rem';
+	});
+	const fontSize = $derived(fontSizes[size] ?? '1rem');
+	const borderRadius = $derived(borderRadii[size] ?? '12px');
+</script>
+
+{#if onclick}
+	<button class="contents" {onclick}>
+		<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+		{@render bubble()}
+	</button>
+{:else}
+	<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+	{@render bubble()}
+{/if}
+
+{#snippet bubble()}
+	<span
+		class="bubble"
+		class:bold
+		class:hoverable={!!onclick}
+		style="{colours
+			? `background-color: ${colours.backgroundColour}; color: ${colours.colour};`
+			: ''} padding: var(--bubble-padding, {verticalPadding} {horizontalPadding}); font-size: {fontSize}; border-radius: {borderRadius}"
+		>{#if label}{label}:&nbsp;{/if}{options?.length
+			? options.find((it) => it.value === value)?.label
+			: value}{#if icon}<div class="icon"><Icon {...icon} /></div>{/if}</span
+	>
+{/snippet}
+
 <style>button.contents {
   display: contents;
   cursor: pointer;
@@ -95,4 +95,4 @@
 }
 .bubble.bold {
   font-weight: 700;
-}</style>
+}</style>