@lavalogic/scoria 0.40.33 → 0.40.34

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

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
 >import Action from "../../Action.svelte";
 import Button from "../../Button.svelte";
 import Icon from "../../Icon.svelte";
@@ -18,11 +18,11 @@ 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"
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
 >let { onkeydown } = $props();
 const tableContext = getContext(TableContext.identifier);
 const alertContext = getContext(AlertContext.identifier);
@@ -147,196 +147,196 @@ $effect(() => {
 });
 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
-			>{tableContext.dataRepo.filterType === FilterType.Real
-				? i18n['scoria.text.actioning_loaded']()
-				: i18n['scoria.text.actioning_all']()}</span
-		>
-	</div>
-
-	<div class="block">
-		<span
-			>{i18n['scoria.text.records_selected']({ count: tableContext.selectedItems.size })}</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(i18n['scoria.prompt.clear_selection'](), {
-					onYes: () => {
-						tableContext.showSelectedOnly = false;
-						tableContext.resetSelectedItems();
-					},
-				});
-			}}
-		/>
-	</div>
-
-	<div class="block">
-		<span>{i18n['scoria.text.row_count']({ count: tableContext.paginationRepo?.totalRows ?? 0 })}</span>
-	</div>
-
-	{#if tableContext.paginationRepo}
-		<!-- forceUpwards={!nested} -->
-		<div class="block records-per-page">
-			<span>{i18n['scoria.label.records_per_page']()}</span>
-			<!-- label="Records per Page:" -->
-			<SingleSelect
-				lazyDropdown
-				name="Page Size"
-				placeholder={i18n['scoria.label.select_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>{i18n['scoria.text.page_count']({ count: 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">{i18n['scoria.label.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,
-					}}>{i18n['scoria.action.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,
-					}}>{i18n['scoria.action.next_page']()}</Button
-				>
-			</div>
-		</div>
-	{/if}
-</div>
-
+</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
+			>{tableContext.dataRepo.filterType === FilterType.Real
+				? i18n['scoria.text.actioning_loaded']()
+				: i18n['scoria.text.actioning_all']()}</span
+		>
+	</div>
+
+	<div class="block">
+		<span
+			>{i18n['scoria.text.records_selected']({ count: tableContext.selectedItems.size })}</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(i18n['scoria.prompt.clear_selection'](), {
+					onYes: () => {
+						tableContext.showSelectedOnly = false;
+						tableContext.resetSelectedItems();
+					},
+				});
+			}}
+		/>
+	</div>
+
+	<div class="block">
+		<span>{i18n['scoria.text.row_count']({ count: tableContext.paginationRepo?.totalRows ?? 0 })}</span>
+	</div>
+
+	{#if tableContext.paginationRepo}
+		<!-- forceUpwards={!nested} -->
+		<div class="block records-per-page">
+			<span>{i18n['scoria.label.records_per_page']()}</span>
+			<!-- label="Records per Page:" -->
+			<SingleSelect
+				lazyDropdown
+				name="Page Size"
+				placeholder={i18n['scoria.label.select_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>{i18n['scoria.text.page_count']({ count: 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">{i18n['scoria.label.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,
+					}}>{i18n['scoria.action.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,
+					}}>{i18n['scoria.action.next_page']()}</Button
+				>
+			</div>
+		</div>
+	{/if}
+</div>
+
 <style>.spread_row {
   border-top: solid 1px #cbd4da;
   overflow: visible;
@@ -409,4 +409,4 @@ let selectedItemIconColour = $derived(hasNoSelectedItems ? Colour["$ui-blue-4"]
 }
 .spread_row .spacer {
   flex-grow: 2;
-}</style>
+}</style>

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

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
 >import Button from "../../Button.svelte";
 import { devCatch } from "../../../Helpers/Helpers.svelte.js";
 import { m as i18n } from "../../../paraglide/messages.js";
@@ -26,112 +26,112 @@ const panels = {
 };
 let expandedPanel = $state(null);
 let ExpandedPanelElement = $derived(expandedPanel ? panels[expandedPanel] : null);
-</script>
-
-{#if ExpandedPanelElement != null}
-	<ExpandedPanelElement
-		onclose={() => {
-			expandedPanel = null;
-		}}
-	/>
-{/if}
-<div class="sidebar">
-	<Button
-		side={Side.Bottom}
-		onclick={() => {
-			tableContext.toggleQuickFiltering();
-		}}
-		toggled={tableContext.showQuickFiltering}
-		size={Size.Small}
-		disabled={!tableContext.allowQuickFiltering}
-		variant={Variant.Toolbar}
-		iconTop={{
-			name: 'assessment',
-		}}>{i18n['scoria.action.quick_filter']()}</Button
-	>
-	<Button
-		side={Side.Bottom}
-		disabled={!tableContext.allowAdvancedFiltering}
-		toggled={expandedPanel === ExpandedPanel.Filter}
-		onclick={() => {
-			expandedPanel = expandedPanel === ExpandedPanel.Filter ? null : ExpandedPanel.Filter;
-		}}
-		size={Size.Small}
-		variant={Variant.Toolbar}
-		iconTop={{
-			name: 'filter-bars',
-		}}>{i18n['scoria.action.advanced_filter']()}</Button
-	>
-	<Button
-		side={Side.Bottom}
-		onclick={() => {
-			expandedPanel = expandedPanel === ExpandedPanel.Column ? null : ExpandedPanel.Column;
-		}}
-		size={Size.Small}
-		variant={Variant.Toolbar}
-		toggled={expandedPanel === ExpandedPanel.Column}
-		iconTop={{
-			name: 'columns',
-		}}>{i18n['scoria.action.modify_columns']()}</Button
-	>
-	<Button
-		size={Size.Small}
-		side={Side.Bottom}
-		toggled={expandedPanel === ExpandedPanel.Toolbox}
-		onclick={() => {
-			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
-		}}
-		variant={Variant.Toolbar}
-		iconTop={{
-			name: 'category',
-		}}>{i18n['scoria.action.toolbox']()}</Button
-	>
-	<Button
-		size={Size.Small}
-		side={Side.Bottom}
-		toggled={expandedPanel === ExpandedPanel.Configuration}
-		onclick={() => {
-			expandedPanel =
-				expandedPanel === ExpandedPanel.Configuration ? null : ExpandedPanel.Configuration;
-		}}
-		variant={Variant.Toolbar}
-		iconTop={{
-			name: 'setting-cog',
-		}}>{i18n['scoria.action.table_configuration']()}</Button
-	>
-	{#if tableContext.dataRepo.addEmptyRow}
-		<Button
-			size={Size.Small}
-			side={Side.Bottom}
-			onclick={() => {
-				tableContext.dataRepo.addEmptyRow?.();
-			}}
-			variant={Variant.Toolbar}
-			iconTop={{
-				name: 'plus',
-			}}>{i18n['scoria.action.add_row']()}</Button
-		>
-	{/if}
-
-	{#if tableContext.paginationRepo?.reload}
-		<Button
-			side={Side.Bottom}
-			onclick={() => {
-				tableContext.paginationRepo?.reload?.().catch(devCatch);
-			}}
-			toggled={tableContext.dataRepo.isLoading}
-			size={Size.Small}
-			disabled={!tableContext.allowQuickFiltering}
-			variant={Variant.Toolbar}
-			iconTop={{
-				name: 'refresh',
-			}}>{i18n['scoria.action.refresh']()}</Button
-		>
-	{/if}
-
-	<div class="filler"></div>
-</div>
-
+</script>
+
+{#if ExpandedPanelElement != null}
+	<ExpandedPanelElement
+		onclose={() => {
+			expandedPanel = null;
+		}}
+	/>
+{/if}
+<div class="sidebar">
+	<Button
+		side={Side.Bottom}
+		onclick={() => {
+			tableContext.toggleQuickFiltering();
+		}}
+		toggled={tableContext.showQuickFiltering}
+		size={Size.Small}
+		disabled={!tableContext.allowQuickFiltering}
+		variant={Variant.Toolbar}
+		iconTop={{
+			name: 'assessment',
+		}}>{i18n['scoria.action.quick_filter']()}</Button
+	>
+	<Button
+		side={Side.Bottom}
+		disabled={!tableContext.allowAdvancedFiltering}
+		toggled={expandedPanel === ExpandedPanel.Filter}
+		onclick={() => {
+			expandedPanel = expandedPanel === ExpandedPanel.Filter ? null : ExpandedPanel.Filter;
+		}}
+		size={Size.Small}
+		variant={Variant.Toolbar}
+		iconTop={{
+			name: 'filter-bars',
+		}}>{i18n['scoria.action.advanced_filter']()}</Button
+	>
+	<Button
+		side={Side.Bottom}
+		onclick={() => {
+			expandedPanel = expandedPanel === ExpandedPanel.Column ? null : ExpandedPanel.Column;
+		}}
+		size={Size.Small}
+		variant={Variant.Toolbar}
+		toggled={expandedPanel === ExpandedPanel.Column}
+		iconTop={{
+			name: 'columns',
+		}}>{i18n['scoria.action.modify_columns']()}</Button
+	>
+	<Button
+		size={Size.Small}
+		side={Side.Bottom}
+		toggled={expandedPanel === ExpandedPanel.Toolbox}
+		onclick={() => {
+			expandedPanel = expandedPanel === ExpandedPanel.Toolbox ? null : ExpandedPanel.Toolbox;
+		}}
+		variant={Variant.Toolbar}
+		iconTop={{
+			name: 'category',
+		}}>{i18n['scoria.action.toolbox']()}</Button
+	>
+	<Button
+		size={Size.Small}
+		side={Side.Bottom}
+		toggled={expandedPanel === ExpandedPanel.Configuration}
+		onclick={() => {
+			expandedPanel =
+				expandedPanel === ExpandedPanel.Configuration ? null : ExpandedPanel.Configuration;
+		}}
+		variant={Variant.Toolbar}
+		iconTop={{
+			name: 'setting-cog',
+		}}>{i18n['scoria.action.table_configuration']()}</Button
+	>
+	{#if tableContext.dataRepo.addEmptyRow}
+		<Button
+			size={Size.Small}
+			side={Side.Bottom}
+			onclick={() => {
+				tableContext.dataRepo.addEmptyRow?.();
+			}}
+			variant={Variant.Toolbar}
+			iconTop={{
+				name: 'plus',
+			}}>{i18n['scoria.action.add_row']()}</Button
+		>
+	{/if}
+
+	{#if tableContext.paginationRepo?.reload}
+		<Button
+			side={Side.Bottom}
+			onclick={() => {
+				tableContext.paginationRepo?.reload?.().catch(devCatch);
+			}}
+			toggled={tableContext.dataRepo.isLoading}
+			size={Size.Small}
+			disabled={!tableContext.allowQuickFiltering}
+			variant={Variant.Toolbar}
+			iconTop={{
+				name: 'refresh',
+			}}>{i18n['scoria.action.refresh']()}</Button
+		>
+	{/if}
+
+	<div class="filler"></div>
+</div>
+
 <style>.sidebar {
   flex-flow: row nowrap;
   text-orientation: sideways;
@@ -150,4 +150,4 @@ let ExpandedPanelElement = $derived(expandedPanel ? panels[expandedPanel] : null
 .sidebar .filler {
   flex-grow: 2;
   background-color: #ffffff;
-}</style>
+}</style>