@lavalogic/scoria 0.40.13 → 0.40.15

package/dist/Components/Table/Misc/TableFooter.svelte

@@ -1,342 +1,336 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import Action from '../../Action.svelte';
-	import Button from '../../Button.svelte';
-	import Icon from '../../Icon.svelte';
-	import NumberInput from '../../NumberInput.svelte';
-	import SingleSelect from '../../SingleSelect.svelte';
-	import { AlertContext } from '../../../Contexts/AlertContext.svelte.js';
-	import { autoPluralise, devCatch } from '../../../Helpers/Helpers.svelte.js';
-	import { Colour, ColourSet } from '../../../scss/colours.js';
-	import type { SelectOption } from '../../../Types/Internal/SelectOption.js';
-	import { Side } from '../../../Types/Internal/Side.js';
-	import { Size } from '../../../Types/Internal/Size.js';
-	import { Variant } from '../../../Types/Internal/Variant.js';
-	import { getContext, tick } from 'svelte';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import type { Primitive } from '../Types/Context/TableInitOptions.js';
-	import { FilterType } from '../Types/Filtering/FilterType.js';
-	import type { TableFooterProps } from './TableFooterProps.js';
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
->
-	let { onkeydown }: TableFooterProps = $props();
-
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-	const alertContext = getContext<AlertContext>(AlertContext.identifier);
-
-	const pageSizes: Array<SelectOption<number>> = $state([
-		{ label: '20', value: 20 },
-		{ label: '40', value: 40 },
-		{ label: '60', value: 60 },
-		{ label: '80', value: 80 },
-		{ label: '100', value: 100 },
-	]);
-
-	// eslint-disable-next-line svelte/prefer-writable-derived
-	let pageValue = $state((tableContext.paginationRepo?.paginationState.pageIndex ?? 0) + 1);
-	let currentSize: SelectOption<number> | null = $state(null);
-
-	function createOption(newSize: SelectOption<number>) {
-		pageSizes.push({ ...newSize, value: parseInt(newSize.value.toString()) });
-		pageSizes.sort((a, b) => a.value - b.value);
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>import Action from "../../Action.svelte";
+import Button from "../../Button.svelte";
+import Icon from "../../Icon.svelte";
+import NumberInput from "../../NumberInput.svelte";
+import SingleSelect from "../../SingleSelect.svelte";
+import { AlertContext } from "../../../Contexts/AlertContext.svelte.js";
+import { autoPluralise, devCatch } from "../../../Helpers/Helpers.svelte.js";
+import { Colour, ColourSet } 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 { getContext, tick } from "svelte";
+import { TableContext } from "../Types/Context/TableContext.svelte.js";
+import { FilterType } from "../Types/Filtering/FilterType.js";
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>let { onkeydown } = $props();
+const tableContext = getContext(TableContext.identifier);
+const alertContext = getContext(AlertContext.identifier);
+const pageSizes = $state([
+	{
+		label: "20",
+		value: 20
+	},
+	{
+		label: "40",
+		value: 40
+	},
+	{
+		label: "60",
+		value: 60
+	},
+	{
+		label: "80",
+		value: 80
+	},
+	{
+		label: "100",
+		value: 100
 	}
-
-	$effect.pre(() => {
-		if (tableContext.paginationRepo) {
-			const found = pageSizes.find(
-				(size) => size.value === tableContext.paginationRepo?.paginationState.pageSize
-			);
-
-			if (found) {
-				currentSize = found;
-			} else {
-				const newValue = {
-					label: tableContext.paginationRepo.paginationState.pageSize.toString(),
-					value: tableContext.paginationRepo.paginationState.pageSize,
-				};
-				createOption(newValue);
-				currentSize = newValue;
-			}
+]);
+// eslint-disable-next-line svelte/prefer-writable-derived
+let pageValue = $state((tableContext.paginationRepo?.paginationState.pageIndex ?? 0) + 1);
+let currentSize = $state(null);
+function createOption(newSize) {
+	pageSizes.push({
+		...newSize,
+		value: parseInt(newSize.value.toString())
+	});
+	pageSizes.sort((a, b) => a.value - b.value);
+}
+$effect.pre(() => {
+	if (tableContext.paginationRepo) {
+		const found = pageSizes.find((size) => size.value === tableContext.paginationRepo?.paginationState.pageSize);
+		if (found) {
+			currentSize = found;
 		} else {
-			currentSize = null;
+			const newValue = {
+				label: tableContext.paginationRepo.paginationState.pageSize.toString(),
+				value: tableContext.paginationRepo.paginationState.pageSize
+			};
+			createOption(newValue);
+			currentSize = newValue;
 		}
-	});
-
-	let debounceTimeout: ReturnType<typeof setTimeout> | undefined;
-	function onNumberInput(e: Event) {
-		const page = parseInt((e.target as HTMLInputElement).value);
-
+	} else {
+		currentSize = null;
+	}
+});
+let debounceTimeout;
+function onNumberInput(e) {
+	const page = parseInt(e.target.value);
+	if (debounceTimeout !== undefined) {
+		clearTimeout(debounceTimeout);
+	}
+	if (!isNaN(page)) {
+		debounceTimeout = setTimeout(() => {
+			tableContext.paginationRepo?.setPage(page);
+			tick().then(() => {
+				//force rerender
+				if (pageValue == (tableContext.paginationRepo?.paginationState.pageIndex ?? 0) + 1) {
+					pageValue = 0;
+					pageValue = (tableContext.paginationRepo?.paginationState.pageIndex ?? 0) + 1;
+				}
+			}).catch(devCatch);
+		}, 400);
+	}
+}
+$effect(() => {
+	return () => {
 		if (debounceTimeout !== undefined) {
 			clearTimeout(debounceTimeout);
+			debounceTimeout = undefined;
 		}
-		if (!isNaN(page)) {
-			debounceTimeout = setTimeout(() => {
-				tableContext.paginationRepo?.setPage(page);
-				tick()
-					.then(() => {
-						//force rerender
-						if (pageValue == (tableContext.paginationRepo?.paginationState.pageIndex ?? 0) + 1) {
-							pageValue = 0;
-							pageValue = (tableContext.paginationRepo?.paginationState.pageIndex ?? 0) + 1;
-						}
-					})
-					.catch(devCatch);
-			}, 400);
-		}
+	};
+});
+$effect(() => {
+	pageValue = (tableContext.paginationRepo?.paginationState.pageIndex ?? 0) + 1;
+});
+let pageButtons = $state([]);
+$effect(() => {
+	if (tableContext.paginationRepo?.paginationState.pageIndex == null) {
+		pageButtons = [1];
+		return;
 	}
-
-	$effect(() => {
-		return () => {
-			if (debounceTimeout !== undefined) {
-				clearTimeout(debounceTimeout);
-				debounceTimeout = undefined;
-			}
-		};
-	});
-
-	$effect(() => {
-		pageValue = (tableContext.paginationRepo?.paginationState.pageIndex ?? 0) + 1;
-	});
-
-	let pageButtons: Array<number> = $state([]);
-
-	$effect(() => {
-		if (tableContext.paginationRepo?.paginationState.pageIndex == null) {
-			pageButtons = [1];
-			return;
-		}
-		const current = tableContext.paginationRepo.paginationState.pageIndex + 1;
-		const last = tableContext.lastPage;
-		// Empty / no-results case: render a single "1" button rather than
-		// a "0" button. `lastPage` is a 1-indexed count, never 0; a
-		// misbehaving data repo that returns 0 would otherwise leak
-		// through to a "Previous 0 1 Next" strip (see the page-0
-		// regression captured in image 2 of the bug report).
-		if (last < 1) {
-			pageButtons = [1];
-			return;
-		}
-		// `pages` accumulates the dedup'd, sorted button set. The minimum
-		// the user always sees between the Previous and Next arrows is the
-		// current page, the next page (when one exists), and the last
-		// page. On top of that we still surface a small window around the
-		// current page for visual context. Every value pushed is clamped
-		// to `[1, last]` defensively so an out-of-range current page (e.g.
-		// a stale `pageIndex` waiting for the next remote reload to
-		// settle) cannot resurface a page-0 button.
-		// eslint-disable-next-line svelte/prefer-svelte-reactivity
-		const pages = new Set<number>();
-		const windowStart = Math.max(1, Math.min(current - 2, last - 4));
-		for (let i = windowStart; i < windowStart + 5 && i <= last; i++) {
-			pages.add(i);
-		}
-		if (current >= 1 && current <= last) {
-			pages.add(current);
-			if (current + 1 <= last) {
-				pages.add(current + 1);
-			}
+	const current = tableContext.paginationRepo.paginationState.pageIndex + 1;
+	const last = tableContext.lastPage;
+	// Empty / no-results case: render a single "1" button rather than
+	// a "0" button. `lastPage` is a 1-indexed count, never 0; a
+	// misbehaving data repo that returns 0 would otherwise leak
+	// through to a "Previous 0 1 Next" strip (see the page-0
+	// regression captured in image 2 of the bug report).
+	if (last < 1) {
+		pageButtons = [1];
+		return;
+	}
+	// `pages` accumulates the dedup'd, sorted button set. The minimum
+	// the user always sees between the Previous and Next arrows is the
+	// current page, the next page (when one exists), and the last
+	// page. On top of that we still surface a small window around the
+	// current page for visual context. Every value pushed is clamped
+	// to `[1, last]` defensively so an out-of-range current page (e.g.
+	// a stale `pageIndex` waiting for the next remote reload to
+	// settle) cannot resurface a page-0 button.
+	// eslint-disable-next-line svelte/prefer-svelte-reactivity
+	const pages = new Set();
+	const windowStart = Math.max(1, Math.min(current - 2, last - 4));
+	for (let i = windowStart; i < windowStart + 5 && i <= last; i++) {
+		pages.add(i);
+	}
+	if (current >= 1 && current <= last) {
+		pages.add(current);
+		if (current + 1 <= last) {
+			pages.add(current + 1);
 		}
-		pages.add(last);
-		pageButtons = [...pages].sort((a, b) => a - b);
-	});
-
-	let hasNoSelectedItems = $derived(tableContext.selectedItems.size == 0);
-	let selectedItemIconColour = $derived(
-		hasNoSelectedItems ? Colour['$ui-blue-4'] : Colour['$ui-blue-10']
-	);
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class="spread_row bottom_row"
-	class:limited={tableContext.limitFooter}
-	onkeydown={(e) => {
-		e.stopPropagation();
-		onkeydown?.(e);
-	}}
->
-	<div class="block">
-		<span
-			>Actioning: {tableContext.dataRepo.filterType === FilterType.Real ? 'Loaded' : 'All'} Records</span
-		>
-	</div>
-
-	<div class="block">
-		<span>{tableContext.selectedItems.size} Records Selected</span>
-		<Action
-			size={Size.FillHeight}
-			disabled={hasNoSelectedItems}
-			colourSet={ColourSet.Auxiliary}
-			icon={{
-				name: 'assessment',
-				size: Size.Medium,
-				colour: tableContext.showSelectedOnly ? Colour['$brand-primary'] : selectedItemIconColour,
-			}}
-			onclick={() => {
-				tableContext.showSelectedOnly = !tableContext.showSelectedOnly;
-			}}
-		/>
-		<Action
-			size={Size.FillHeight}
-			disabled={hasNoSelectedItems}
-			colourSet={ColourSet.Auxiliary}
-			icon={{
-				name: 'eraser',
-				size: Size.Medium,
-				colour: selectedItemIconColour,
-			}}
-			onclick={() => {
-				alertContext.prompt('Are you sure you want to clear your selection?', {
-					onYes: () => {
-						tableContext.showSelectedOnly = false;
-						tableContext.resetSelectedItems();
-					},
-				});
-			}}
-		/>
-	</div>
-
-	<div class="block">
-		<span>{tableContext.paginationRepo?.totalRows ?? 0} Rows</span>
-	</div>
-
-	{#if tableContext.paginationRepo}
-		<!-- forceUpwards={!nested} -->
-		<div class="block records-per-page">
-			<span>Records per Page:</span>
-			<!-- label="Records per Page:" -->
-			<SingleSelect
-				lazyDropdown
-				name="Page Size"
-				borderless
-				creatable
-				createFilter={(value: string) => {
-					const parsed = parseInt(value);
-					return !(parsed >= 1 && parsed <= 500);
-				}}
-				onCreateOption={(newSize: SelectOption<number>) => {
-					newSize.value = Math.max(Math.min(newSize.value, 500), 1);
-
-					const found = pageSizes.find((size) => size.value === newSize.value);
-
-					if (found) {
-						currentSize = found;
-					} else {
-						createOption(newSize);
-					}
-
-					tableContext.paginationRepo?.setPageSize(newSize.value);
-				}}
-				value={currentSize}
-				options={pageSizes}
-				labelProp="label"
-				valueProp="value"
-				valueAsObject
-				onchange={(newSelection: SelectOption<number> | null) => {
-					if (newSelection?.value) {
-						tableContext.paginationRepo?.setPageSize(newSelection.value);
-					}
-				}}
-			/>
-		</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>{tableContext.lastPage} {autoPluralise('Page', tableContext.lastPage)}</span>
-			</div>
-
-			<div class="block">
-				<label for="{tableContext.tableName}-jump-to-page"
-					><Icon
-						name="arrow-move-horizontal"
-						colour={Colour['$ui-blue-6']}
-					/></label
-				>
-
-				<label for="{tableContext.tableName}-jump-to-page">Jump to page:</label>
-
-				<NumberInput
-					id="{tableContext.tableName}-jump-to-page"
-					value={pageValue}
-					oninput={onNumberInput}
-					onfocus={(e) => {
-						// Select the existing value so typing replaces it, instead of
-						// appending to it (typing "5" on a "4" otherwise yields "45").
-						(e.target as HTMLInputElement).select();
-					}}
-					disabled={tableContext.showSelectedOnly}
-				/>
-			</div>
-
-			<div class="block nopad page-arrow">
-				<Button
-					variant={Variant.Toolbar}
-					disabled={tableContext.showSelectedOnly ||
-						tableContext.paginationRepo.paginationState.pageIndex === 0}
-					side={Side.Bottom}
-					onclick={() => {
-						tableContext.paginationRepo?.prevPage();
-					}}
-					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}
-							disabled={tableContext.showSelectedOnly}
-							side={Side.Bottom}
-							size={Size.FillHeight}
-							toggled={tableContext.paginationRepo.paginationState.pageIndex === pageNumber - 1}
-							onclick={() => {
-								tableContext.paginationRepo?.setPage(pageNumber);
-							}}>{pageNumber}</Button
-						>
-					</div>
-				{/each}
-			{/key}
-
-			<div class="block nopad page-arrow">
-				<Button
-					variant={Variant.Toolbar}
-					side={Side.Bottom}
-					size={Size.FillHeight}
-					onclick={() => {
-						tableContext.paginationRepo?.nextPage();
-					}}
-					disabled={tableContext.showSelectedOnly ||
-						tableContext.paginationRepo.paginationState.pageIndex + 1 >= tableContext.lastPage}
-					iconRight={{
-						name: 'right-close',
-						size: Size.FillHeight,
-					}}>Next Page</Button
-				>
-			</div>
-		</div>
-	{/if}
-</div>
-
+	}
+	pages.add(last);
+	pageButtons = [...pages].sort((a, b) => a - b);
+});
+let hasNoSelectedItems = $derived(tableContext.selectedItems.size == 0);
+let selectedItemIconColour = $derived(hasNoSelectedItems ? Colour["$ui-blue-4"] : Colour["$ui-blue-10"]);
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="spread_row bottom_row"
+	class:limited={tableContext.limitFooter}
+	onkeydown={(e) => {
+		e.stopPropagation();
+		onkeydown?.(e);
+	}}
+>
+	<div class="block">
+		<span
+			>Actioning: {tableContext.dataRepo.filterType === FilterType.Real ? 'Loaded' : 'All'} Records</span
+		>
+	</div>
+
+	<div class="block">
+		<span>{tableContext.selectedItems.size} Records Selected</span>
+		<Action
+			size={Size.FillHeight}
+			disabled={hasNoSelectedItems}
+			colourSet={ColourSet.Auxiliary}
+			icon={{
+				name: 'assessment',
+				size: Size.Medium,
+				colour: tableContext.showSelectedOnly ? Colour['$brand-primary'] : selectedItemIconColour,
+			}}
+			onclick={() => {
+				tableContext.showSelectedOnly = !tableContext.showSelectedOnly;
+			}}
+		/>
+		<Action
+			size={Size.FillHeight}
+			disabled={hasNoSelectedItems}
+			colourSet={ColourSet.Auxiliary}
+			icon={{
+				name: 'eraser',
+				size: Size.Medium,
+				colour: selectedItemIconColour,
+			}}
+			onclick={() => {
+				alertContext.prompt('Are you sure you want to clear your selection?', {
+					onYes: () => {
+						tableContext.showSelectedOnly = false;
+						tableContext.resetSelectedItems();
+					},
+				});
+			}}
+		/>
+	</div>
+
+	<div class="block">
+		<span>{tableContext.paginationRepo?.totalRows ?? 0} Rows</span>
+	</div>
+
+	{#if tableContext.paginationRepo}
+		<!-- forceUpwards={!nested} -->
+		<div class="block records-per-page">
+			<span>Records per Page:</span>
+			<!-- label="Records per Page:" -->
+			<SingleSelect
+				lazyDropdown
+				name="Page Size"
+				borderless
+				creatable
+				createFilter={(value: string) => {
+					const parsed = parseInt(value);
+					return !(parsed >= 1 && parsed <= 500);
+				}}
+				onCreateOption={(newSize: SelectOption<number>) => {
+					newSize.value = Math.max(Math.min(newSize.value, 500), 1);
+
+					const found = pageSizes.find((size) => size.value === newSize.value);
+
+					if (found) {
+						currentSize = found;
+					} else {
+						createOption(newSize);
+					}
+
+					tableContext.paginationRepo?.setPageSize(newSize.value);
+				}}
+				value={currentSize}
+				options={pageSizes}
+				labelProp="label"
+				valueProp="value"
+				valueAsObject
+				onchange={(newSelection: SelectOption<number> | null) => {
+					if (newSelection?.value) {
+						tableContext.paginationRepo?.setPageSize(newSelection.value);
+					}
+				}}
+			/>
+		</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>{tableContext.lastPage} {autoPluralise('Page', tableContext.lastPage)}</span>
+			</div>
+
+			<div class="block">
+				<label for="{tableContext.tableName}-jump-to-page"
+					><Icon
+						name="arrow-move-horizontal"
+						colour={Colour['$ui-blue-6']}
+					/></label
+				>
+
+				<label for="{tableContext.tableName}-jump-to-page">Jump to page:</label>
+
+				<NumberInput
+					id="{tableContext.tableName}-jump-to-page"
+					value={pageValue}
+					oninput={onNumberInput}
+					onfocus={(e) => {
+						// Select the existing value so typing replaces it, instead of
+						// appending to it (typing "5" on a "4" otherwise yields "45").
+						(e.target as HTMLInputElement).select();
+					}}
+					disabled={tableContext.showSelectedOnly}
+				/>
+			</div>
+
+			<div class="block nopad page-arrow">
+				<Button
+					variant={Variant.Toolbar}
+					disabled={tableContext.showSelectedOnly ||
+						tableContext.paginationRepo.paginationState.pageIndex === 0}
+					side={Side.Bottom}
+					onclick={() => {
+						tableContext.paginationRepo?.prevPage();
+					}}
+					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}
+							disabled={tableContext.showSelectedOnly}
+							side={Side.Bottom}
+							size={Size.FillHeight}
+							toggled={tableContext.paginationRepo.paginationState.pageIndex === pageNumber - 1}
+							onclick={() => {
+								tableContext.paginationRepo?.setPage(pageNumber);
+							}}>{pageNumber}</Button
+						>
+					</div>
+				{/each}
+			{/key}
+
+			<div class="block nopad page-arrow">
+				<Button
+					variant={Variant.Toolbar}
+					side={Side.Bottom}
+					size={Size.FillHeight}
+					onclick={() => {
+						tableContext.paginationRepo?.nextPage();
+					}}
+					disabled={tableContext.showSelectedOnly ||
+						tableContext.paginationRepo.paginationState.pageIndex + 1 >= tableContext.lastPage}
+					iconRight={{
+						name: 'right-close',
+						size: Size.FillHeight,
+					}}>Next Page</Button
+				>
+			</div>
+		</div>
+	{/if}
+</div>
+
 <style>.spread_row {
   border-top: solid 1px #cbd4da;
   overflow: visible;
@@ -409,4 +403,4 @@
 }
 .spread_row .spacer {
   flex-grow: 2;
-}</style>
+}</style>