@lavalogic/scoria 0.35.0 → 0.37.0

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

@@ -1,311 +1,321 @@
-<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 { FilterType } from '../Types/Filtering/FilterType.js';
-
-	export interface TableFooterProps {
-		onkeydown?: (e: KeyboardEvent) => void;
-	}
-</script>
-
-<script lang="ts" generics="T extends object">
-	let { onkeydown }: TableFooterProps = $props();
-
-	const tableContext = getContext<TableContext<T, never>>(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);
-	}
-
-	$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;
-			}
-		} else {
-			currentSize = null;
-		}
-	});
-
-	let debounceTimeout = -1;
-	function onNumberInput(e: Event) {
-		const page = parseInt((e.target as HTMLInputElement).value);
-
-		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) as unknown as number;
-		}
-	}
-
-	$effect(() => {
-		pageValue = (tableContext.paginationRepo?.paginationState.pageIndex ?? 0) + 1;
-	});
-
-	let pageButtons: Array<number> = $state([]);
-
-	$effect(() => {
-		if (tableContext.paginationRepo?.paginationState.pageIndex == null) {
-			pageButtons = [1];
-		} else {
-			const startingPage = Math.min(
-				tableContext.lastPage - 2,
-				tableContext.paginationRepo.paginationState.pageIndex - 1
-			);
-			const pageToStartWith = Math.max(1, Math.min(startingPage, tableContext.lastPage - 4));
-
-			pageButtons = new Array<number>(Math.min(tableContext.lastPage, 5))
-				.fill(pageToStartWith)
-				.map((item, index) => item + index);
-		}
-	});
-
-	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();
-					}
-				});
-			}}
-		/>
-
-		<!-- <Button
-			variant={Variant.Toolbar}
-			disabled={tableContext.selectedItems.size == 0}
-			side={Side.Bottom}
-			size={Size.Tiny}
-			iconLeft={{
-				name: 'left-close',
-				size: Size.Medium,
-				colour: tableContext.showSelected ? Colour['$brand-primary'] : Colour['$font-secondary']
-			}}>Previous Page</Button
-		> -->
-	</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}
-					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
-				>
-				<!-- 
-					// colour: Colour['$dark-blue'] -->
-			</div>
-		</div>
-	{/if}
-</div>
-
+<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);
+	}
+
+	$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;
+			}
+		} else {
+			currentSize = null;
+		}
+	});
+
+	let debounceTimeout: ReturnType<typeof setTimeout> | undefined;
+	function onNumberInput(e: Event) {
+		const page = parseInt((e.target as HTMLInputElement).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;
+			}
+		};
+	});
+
+	$effect(() => {
+		pageValue = (tableContext.paginationRepo?.paginationState.pageIndex ?? 0) + 1;
+	});
+
+	let pageButtons: Array<number> = $state([]);
+
+	$effect(() => {
+		if (tableContext.paginationRepo?.paginationState.pageIndex == null) {
+			pageButtons = [1];
+		} else {
+			const startingPage = Math.min(
+				tableContext.lastPage - 2,
+				tableContext.paginationRepo.paginationState.pageIndex - 1
+			);
+			const pageToStartWith = Math.max(1, Math.min(startingPage, tableContext.lastPage - 4));
+
+			pageButtons = new Array<number>(Math.min(tableContext.lastPage, 5))
+				.fill(pageToStartWith)
+				.map((item, index) => item + index);
+		}
+	});
+
+	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}
+					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;
   width: 100%;
-  z-index: 1;
+  position: sticky;
+  bottom: 0;
+  z-index: 10;
+  box-shadow: 0 -2px 4px rgba(0, 0, 0, calc(0.08 * var(--show-bottom-shadow, 0)));
   display: flex;
   flex-flow: row nowrap;
   background-color: #cbd4da;
@@ -313,7 +323,6 @@
   justify-content: flex-start;
   align-items: stretch;
   line-height: 1;
-  bottom: 0;
 }
 .spread_row.limited {
   overflow: hidden;
@@ -367,4 +376,4 @@
 }
 .spread_row .spacer {
   flex-grow: 2;
-}</style>
+}</style>