@lavalogic/scoria 0.0.1

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

@@ -0,0 +1,49 @@
+<svelte:options runes />
+
+<script lang="ts" generics="T extends object">
+	import Button from '../../Button.svelte';
+	import { Size } from '../../../Types/Internal/Size.js';
+	import { Variant } from '../../../Types/Internal/Variant.js';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import FilterInput from './FilterInput.svelte';
+	import { getContext } from 'svelte';
+
+	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+
+	function reset() {
+		tableContext.paginationRepo?.resetFilters();
+	}
+</script>
+
+<div class="column-panel">
+	<h3>Filter by</h3>
+
+	{#each tableContext.columnDefs as def (def.id)}
+		<FilterInput {def} customFilters={tableContext.remoteFilters} />
+	{/each}
+
+	<div class="reset-button">
+		<Button
+			onclick={() => {
+				reset();
+			}}
+			variant={Variant.Secondary}
+			nowrap
+			size={Size.MediumSmall}>Reset</Button
+		>
+	</div>
+</div>
+
+<style>div.column-panel {
+  padding: 0.5rem;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.5rem;
+  height: 100%;
+  background-color: #ffffff;
+  overflow: auto;
+}
+
+h3 {
+  font-weight: 600;
+}</style>

package/dist/Components/Table/Misc/FilterPanel.svelte.d.ts

@@ -0,0 +1,24 @@
+declare function $$render<T extends object>(): {
+    props: Record<string, never>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const FilterPanel: $$IsomorphicComponent;
+type FilterPanel<T extends object> = InstanceType<typeof FilterPanel<T>>;
+export default FilterPanel;

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

@@ -0,0 +1,74 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import Button from '../../Button.svelte';
+	import TouchModal from '../../Touch/TouchModal.svelte';
+	import { Size } from '../../../Types/Internal/Size.js';
+	import { Variant } from '../../../Types/Internal/Variant.js';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import FilterInput from './FilterInput.svelte';
+	import { getContext } from 'svelte';
+
+	export interface FilterPanelModalProps {
+		onclose?: () => void;
+	}
+</script>
+
+<script lang="ts" generics="T extends object">
+	const tableContext = getContext<TableContext<T>>(TableContext.identifier);
+
+	const { onclose }: FilterPanelModalProps = $props();
+	const refs: FilterInput<T>[] = $state([]);
+
+	function reset() {
+		tableContext.paginationRepo?.resetFilters();
+		refs.forEach((ref) => {
+			ref.reset();
+		});
+	}
+</script>
+
+<TouchModal
+	width="800px"
+	header="Filter by"
+	onclose={() => onclose?.()}
+	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
+>
+	<div class="flex">
+		<div class="column-panel">
+			{#each tableContext.columnDefs as def, index (def)}
+				<FilterInput bind:this={refs[index]} {def} customFilters={tableContext.remoteFilters} />
+			{/each}
+
+			<div class="reset-button">
+				<Button
+					onclick={() => {
+						reset();
+					}}
+					variant={Variant.Secondary}
+					nowrap
+					size={Size.MediumSmall}>Reset</Button
+				>
+			</div>
+		</div>
+	</div>
+</TouchModal>
+
+<style>div.column-panel {
+  padding: 0.5rem;
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.5rem;
+  height: 100%;
+  background-color: #ffffff;
+  overflow: auto;
+}
+
+.flex {
+  display: flex;
+  flex-flow: column nowrap;
+  height: 100%;
+  width: 100%;
+  flex: 1;
+  overflow: hidden;
+}</style>

package/dist/Components/Table/Misc/FilterPanelModal.svelte.d.ts

@@ -0,0 +1,27 @@
+export interface FilterPanelModalProps {
+    onclose?: () => void;
+}
+declare function $$render<T extends object>(): {
+    props: FilterPanelModalProps;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const FilterPanelModal: $$IsomorphicComponent;
+type FilterPanelModal<T extends object> = InstanceType<typeof FilterPanelModal<T>>;
+export default FilterPanelModal;

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

@@ -0,0 +1,51 @@
+<svelte:options runes />
+
+<script lang="ts" module>
+	import { quintOut } from 'svelte/easing';
+	import { slide } from 'svelte/transition';
+	import type { Snippet } from 'svelte';
+	import { ToolbarPosition } from '../Types/Toolbar/ToolbarPosition.js';
+	export interface SidePanelProps {
+		toolbarPosition: ToolbarPosition;
+		onkeydown?: (e: KeyboardEvent) => void;
+		children?: Snippet;
+	}
+</script>
+
+<script lang="ts">
+	const { toolbarPosition, onkeydown, children }: SidePanelProps = $props();
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="side-panel"
+	class:left={toolbarPosition === ToolbarPosition.Left}
+	class:right={toolbarPosition === ToolbarPosition.Right}
+	{onkeydown}
+	transition:slide={{ duration: 300, easing: quintOut, axis: 'x' }}
+>
+	<div class="side-content">
+		{#if children}{@render children()}{/if}
+	</div>
+</div>
+
+<style>.side-panel {
+  display: flex;
+  flex-shrink: 0;
+  width: 400px;
+  height: 100%;
+  transition: width 0.2s ease-out;
+}
+.side-panel.left {
+  border-left: solid 2px #cbd4da;
+  order: 1;
+}
+.side-panel.right {
+  border-right: solid 2px #cbd4da;
+}
+.side-panel .side-content {
+  display: flex;
+  flex-flow: column nowrap;
+  flex: 1;
+  width: 400px;
+}</style>

package/dist/Components/Table/Misc/SidePanel.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import { ToolbarPosition } from '../Types/Toolbar/ToolbarPosition.js';
+export interface SidePanelProps {
+    toolbarPosition: ToolbarPosition;
+    onkeydown?: (e: KeyboardEvent) => void;
+    children?: Snippet;
+}
+declare const SidePanel: import("svelte").Component<SidePanelProps, {}, "">;
+type SidePanel = ReturnType<typeof SidePanel>;
+export default SidePanel;

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

@@ -0,0 +1,364 @@
+<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 } 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';
+	import type { SelectOption } from '../../../Types/Internal/SelectOption.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>>(TableContext.identifier);
+	const alertContext = getContext<AlertContext>(AlertContext.identifier);
+
+	const pageSizes: 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;
+					}
+				});
+			}, 400) as unknown as number;
+		}
+	}
+
+	$effect(() => {
+		pageValue = (tableContext.paginationRepo?.paginationState.pageIndex ?? 0) + 1;
+	});
+
+	let pageButtons: 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(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) => {
+					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);
+				}}
+				virtual
+				value={currentSize}
+				options={pageSizes as SelectOption<number>[]}
+				labelProp="label"
+				valueProp="value"
+				valueAsObject
+				onchange={(newSelection) => {
+					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>
+
+<style>.spread_row {
+  border-top: solid 1px #cbd4da;
+  overflow: visible;
+  width: 100%;
+  z-index: 1;
+  display: flex;
+  flex-flow: row nowrap;
+  background-color: #cbd4da;
+  gap: 1px;
+  justify-content: flex-start;
+  align-items: stretch;
+  line-height: 1;
+  bottom: 0;
+}
+.spread_row.limited {
+  overflow: hidden;
+}
+.spread_row .scrollable {
+  display: flex;
+  flex-flow: row nowrap;
+  box-sizing: border-box;
+  overflow: auto;
+}
+.spread_row .block {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  justify-content: center;
+  gap: 0.5rem;
+  padding: 0 0.6rem;
+  --input-height: 2rem;
+  --input-width: 4rem;
+  --input-border: none;
+}
+.spread_row .block.nopad {
+  padding: 0;
+  --button-padding-horizontal: 1rem;
+  --button-padding-vertical: 0.56rem;
+}
+.spread_row .block.nopad.page-arrow {
+  --button-padding-horizontal: 0.6rem;
+  --button-padding-vertical: 0.42rem;
+}
+.spread_row span,
+.spread_row label {
+  white-space: nowrap;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #3a4952;
+}
+.spread_row > * {
+  background-color: #ffffff;
+}
+.spread_row > *:first-child {
+  border-bottom-left-radius: 4px;
+}
+.spread_row > *:last-child {
+  border-bottom-right-radius: 4px;
+}
+.spread_row .spacer {
+  flex-grow: 2;
+}</style>

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

@@ -0,0 +1,27 @@
+export interface TableFooterProps {
+    onkeydown?: (e: KeyboardEvent) => void;
+}
+declare function $$render<T extends object>(): {
+    props: TableFooterProps;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const TableFooter: $$IsomorphicComponent;
+type TableFooter<T extends object> = InstanceType<typeof TableFooter<T>>;
+export default TableFooter;