@lavalogic/scoria 0.40.14 → 0.40.16

package/dist/Components/Table/Body/TableBody.svelte

@@ -1,157 +1,144 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
->
-	import { getContext } from 'svelte';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import type { Primitive } from '../Types/Context/TableInitOptions.js';
-	import QuickSearchCell from './QuickSearchCell.svelte';
-	import TableRow from './Rows/TableRow.svelte';
-	import type { TableBodyProps } from './TableBodyProps.js';
-
-	const { oncontextmenu }: TableBodyProps = $props();
-
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-
-	// Visible columns split by pinning side, matching the cell-side
-	// arrays used by `TableRow`. Each side is reactive on column
-	// visibility and pinning state.
-	const leftColumns = $derived(tableContext.table.getLeftVisibleLeafColumns());
-	const centreColumns = $derived(tableContext.table.getCenterVisibleLeafColumns());
-	const rightColumns = $derived(tableContext.table.getRightVisibleLeafColumns());
-
-	const showHighlightColumn = $derived(
-		leftColumns.length + centreColumns.length + rightColumns.length > 0
-	);
-
-	// Cumulative pinning offsets for the quick-filter row's sticky
-	// cells. Reads rendered widths from `_columnRenderedWidths`
-	// (populated by the ResizeObserver in TableHead) so filter inputs
-	// for pinned columns stay aligned with their column even when the
-	// column flexes wider than `columnDef.width`.
-	function renderedColumnWidth(columnId: string, declared: number): number {
-		return tableContext._columnRenderedWidths.get(columnId) ?? declared;
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>import { getContext } from "svelte";
+import { TableContext } from "../Types/Context/TableContext.svelte.js";
+import QuickSearchCell from "./QuickSearchCell.svelte";
+import TableRow from "./Rows/TableRow.svelte";
+const { oncontextmenu } = $props();
+const tableContext = getContext(TableContext.identifier);
+// Visible columns split by pinning side, matching the cell-side
+// arrays used by `TableRow`. Each side is reactive on column
+// visibility and pinning state.
+const leftColumns = $derived(tableContext.table.getLeftVisibleLeafColumns());
+const centreColumns = $derived(tableContext.table.getCenterVisibleLeafColumns());
+const rightColumns = $derived(tableContext.table.getRightVisibleLeafColumns());
+const showHighlightColumn = $derived(leftColumns.length + centreColumns.length + rightColumns.length > 0);
+// Cumulative pinning offsets for the quick-filter row's sticky
+// cells. Reads rendered widths from `_columnRenderedWidths`
+// (populated by the ResizeObserver in TableHead) so filter inputs
+// for pinned columns stay aligned with their column even when the
+// column flexes wider than `columnDef.width`.
+function renderedColumnWidth(columnId, declared) {
+	return tableContext._columnRenderedWidths.get(columnId) ?? declared;
+}
+const leftOffsets = $derived.by(() => {
+	void tableContext._columnRenderedWidths.size;
+	const offsets = [];
+	let cumulative = showHighlightColumn ? 20 : 0;
+	for (const col of leftColumns) {
+		offsets.push(cumulative);
+		cumulative += renderedColumnWidth(col.id, col.columnDef.width);
 	}
-
-	const leftOffsets: Array<number> = $derived.by(() => {
-		void tableContext._columnRenderedWidths.size;
-		const offsets: Array<number> = [];
-		let cumulative = showHighlightColumn ? 20 : 0;
-		for (const col of leftColumns) {
-			offsets.push(cumulative);
-			cumulative += renderedColumnWidth(col.id, col.columnDef.width);
-		}
-		return offsets;
-	});
-
-	const rightOffsets: Array<number> = $derived.by(() => {
-		void tableContext._columnRenderedWidths.size;
-		const offsets = new Array<number>(rightColumns.length).fill(0);
-		let cumulative = 0;
-		for (let i = rightColumns.length - 1; i >= 0; i--) {
-			offsets[i] = cumulative;
-			cumulative += renderedColumnWidth(rightColumns[i].id, rightColumns[i].columnDef.width);
-		}
-		return offsets;
-	});
-
-	// Row virtualisation. When the current row count is above the
-	// `_virtualisation` threshold (100 rows by default), only rows in the
-	// viewport plus an overscan band are rendered. Two spacer rows (top
-	// and bottom) reserve the rest of the body height so the scrollbar
-	// matches the un-virtualised length.
-	const virtualisation = $derived(tableContext._virtualisation);
-	const visibleRows = $derived(virtualisation.visibleRows);
-	const topSpacerHeight = $derived(virtualisation.topSpacerHeight);
-	const bottomSpacerHeight = $derived(virtualisation.bottomSpacerHeight);
-</script>
-
-<div
-	role="rowgroup"
-	class="datatable-body"
-	{oncontextmenu}
->
-	{#if tableContext.allowQuickFiltering && tableContext.showQuickFiltering && showHighlightColumn}
-		<div
-			role="row"
-			class="datatable-row quick-filter-row"
-		>
-			{#if showHighlightColumn}
-				<div
-					role="cell"
-					class="cell highlight-dud pinned-left"
-					style="left: 0px"
-					aria-hidden="true"
-				>
-					&nbsp;
-				</div>
-			{/if}
-			{#each leftColumns as column, index (column.id)}
-				<div
-					role="cell"
-					class="cell pinned-left"
-					style="left: {leftOffsets[index]}px"
-				>
-					<QuickSearchCell
-						{column}
-						customFilters={tableContext.remoteFilters}
-					/>
-				</div>
-			{/each}
-			{#each centreColumns as column (column.id)}
-				<div
-					role="cell"
-					class="cell"
-				>
-					<QuickSearchCell
-						{column}
-						customFilters={tableContext.remoteFilters}
-					/>
-				</div>
-			{/each}
-			{#each rightColumns as column, index (column.id)}
-				<div
-					role="cell"
-					class="cell pinned-right"
-					style="right: {rightOffsets[index]}px"
-				>
-					<QuickSearchCell
-						{column}
-						customFilters={tableContext.remoteFilters}
-					/>
-				</div>
-			{/each}
-		</div>
-	{/if}
-
-	{#if topSpacerHeight > 0}
-		<div
-			role="presentation"
-			class="virtual-spacer"
-			style="height: {topSpacerHeight}px;"
-		></div>
-	{/if}
-
-	{#each visibleRows as { row } (row.id)}
-		{@const originalIndex = row.visibleIndex}
-		<TableRow
-			{row}
-			odd={originalIndex % 2 == 1}
-			includeHighlight={showHighlightColumn}
-		/>
-	{/each}
-
-	{#if bottomSpacerHeight > 0}
-		<div
-			role="presentation"
-			class="virtual-spacer"
-			style="height: {bottomSpacerHeight}px;"
-		></div>
-	{/if}
-</div>
-
+	return offsets;
+});
+const rightOffsets = $derived.by(() => {
+	void tableContext._columnRenderedWidths.size;
+	const offsets = new Array(rightColumns.length).fill(0);
+	let cumulative = 0;
+	for (let i = rightColumns.length - 1; i >= 0; i--) {
+		offsets[i] = cumulative;
+		cumulative += renderedColumnWidth(rightColumns[i].id, rightColumns[i].columnDef.width);
+	}
+	return offsets;
+});
+// Row virtualisation. When the current row count is above the
+// `_virtualisation` threshold (100 rows by default), only rows in the
+// viewport plus an overscan band are rendered. Two spacer rows (top
+// and bottom) reserve the rest of the body height so the scrollbar
+// matches the un-virtualised length.
+const virtualisation = $derived(tableContext._virtualisation);
+const visibleRows = $derived(virtualisation.visibleRows);
+const topSpacerHeight = $derived(virtualisation.topSpacerHeight);
+const bottomSpacerHeight = $derived(virtualisation.bottomSpacerHeight);
+</script>
+
+<div
+	role="rowgroup"
+	class="datatable-body"
+	{oncontextmenu}
+>
+	{#if tableContext.allowQuickFiltering && tableContext.showQuickFiltering && showHighlightColumn}
+		<div
+			role="row"
+			class="datatable-row quick-filter-row"
+		>
+			{#if showHighlightColumn}
+				<div
+					role="cell"
+					class="cell highlight-dud pinned-left"
+					style="left: 0px"
+					aria-hidden="true"
+				>
+					&nbsp;
+				</div>
+			{/if}
+			{#each leftColumns as column, index (column.id)}
+				<div
+					role="cell"
+					class="cell pinned-left"
+					style="left: {leftOffsets[index]}px"
+				>
+					<QuickSearchCell
+						{column}
+						customFilters={tableContext.remoteFilters}
+					/>
+				</div>
+			{/each}
+			{#each centreColumns as column (column.id)}
+				<div
+					role="cell"
+					class="cell"
+				>
+					<QuickSearchCell
+						{column}
+						customFilters={tableContext.remoteFilters}
+					/>
+				</div>
+			{/each}
+			{#each rightColumns as column, index (column.id)}
+				<div
+					role="cell"
+					class="cell pinned-right"
+					style="right: {rightOffsets[index]}px"
+				>
+					<QuickSearchCell
+						{column}
+						customFilters={tableContext.remoteFilters}
+					/>
+				</div>
+			{/each}
+		</div>
+	{/if}
+
+	{#if topSpacerHeight > 0}
+		<div
+			role="presentation"
+			class="virtual-spacer"
+			style="height: {topSpacerHeight}px;"
+		></div>
+	{/if}
+
+	{#each visibleRows as { row } (row.id)}
+		{@const originalIndex = row.visibleIndex}
+		<TableRow
+			{row}
+			odd={originalIndex % 2 == 1}
+			includeHighlight={showHighlightColumn}
+		/>
+	{/each}
+
+	{#if bottomSpacerHeight > 0}
+		<div
+			role="presentation"
+			class="virtual-spacer"
+			style="height: {bottomSpacerHeight}px;"
+		></div>
+	{/if}
+</div>
+
 <style>.cell {
   display: block;
   position: relative;
@@ -213,4 +200,4 @@
   pointer-events: none;
   --row-stripe-height: var(--height, 3rem);
   background-image: repeating-linear-gradient(to bottom, #ffffff 0, #ffffff var(--row-stripe-height), #f4f7f9 var(--row-stripe-height), #f4f7f9 calc(2 * var(--row-stripe-height)));
-}</style>
+}</style>

package/dist/Components/Table/ColumnFactory.svelte.js

@@ -484,6 +484,7 @@ export function createColumnFactory() {
                 actions: wrapped,
                 isEnabled: isEnabledFn ? (item) => isEnabledFn(item) : undefined,
                 id: mintId('actions'),
+                header: opts.header,
             });
             // Actions has no public width option — apply the per-kind default.
             def.width = KIND_DEFAULT_WIDTHS.actions;

package/dist/Components/Table/Headers/HighlightAllHeader.svelte

@@ -1,43 +1,37 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
->
-	import { devCatch } from '../../../Helpers/Helpers.svelte.js';
-	import { Colour } from '../../../scss/colours.js';
-	import { Size } from '../../../Types/Internal/Size.js';
-	import { getContext } from 'svelte';
-	import Action from '../../Action.svelte';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import type { Primitive } from '../Types/Context/TableInitOptions.js';
-
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-
-	const backgroundColour = $derived.by(() => {
-		return tableContext.sortedData.length > 0 && tableContext.allHighlighted
-			? Colour['$brand-primary']
-			: Colour['$ui-white'];
-	});
-</script>
-
-<div class="highlight-header">
-	<div class="wrapper">
-		<Action
-			label="Highlight all rows"
-			{backgroundColour}
-			hoverBackgroundColour={Colour['$brand-dark']}
-			size={Size.FillWidth}
-			icon={{
-				name: 'nothing',
-			}}
-			onclick={() => {
-				tableContext.onHighlightAll()?.catch(devCatch);
-			}}
-		/>
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>import { devCatch } from "../../../Helpers/Helpers.svelte.js";
+import { Colour } from "../../../scss/colours.js";
+import { Size } from "../../../Types/Internal/Size.js";
+import { getContext } from "svelte";
+import Action from "../../Action.svelte";
+import { TableContext } from "../Types/Context/TableContext.svelte.js";
+const tableContext = getContext(TableContext.identifier);
+const backgroundColour = $derived.by(() => {
+	return tableContext.sortedData.length > 0 && tableContext.allHighlighted ? Colour["$brand-primary"] : Colour["$ui-white"];
+});
+</script>
+
+<div class="highlight-header">
+	<div class="wrapper">
+		<Action
+			label="Highlight all rows"
+			{backgroundColour}
+			hoverBackgroundColour={Colour['$brand-dark']}
+			size={Size.FillWidth}
+			icon={{
+				name: 'nothing',
+			}}
+			onclick={() => {
+				tableContext.onHighlightAll()?.catch(devCatch);
+			}}
+		/>
+	</div>
+</div>
+
 <style>div.wrapper {
   position: absolute;
   top: 0;
@@ -47,4 +41,4 @@
   display: flex;
   align-items: stretch;
   justify-content: stretch;
-}</style>
+}</style>

package/dist/Components/Table/Headers/SelectAllHeader.svelte

@@ -1,32 +1,26 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
->
-	import { getContext } from 'svelte';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import type { Primitive } from '../Types/Context/TableInitOptions.js';
-
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-
-	const checked: boolean = $derived(
-		tableContext.dataRepo.data.length > 0 ? tableContext.allSelectedInCurrentPage : false
-	);
-</script>
-
-<div class="checkbox-cell">
-	<label aria-label="Select all rows on this page">
-		<input
-			aria-label="Select all rows on this page"
-			onchange={tableContext.selectAllInCurrentPage}
-			type="checkbox"
-			{checked}
-			disabled={tableContext.showSelectedOnly}
-		/>
-	</label>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>import { getContext } from "svelte";
+import { TableContext } from "../Types/Context/TableContext.svelte.js";
+const tableContext = getContext(TableContext.identifier);
+const checked = $derived(tableContext.dataRepo.data.length > 0 ? tableContext.allSelectedInCurrentPage : false);
+</script>
+
+<div class="checkbox-cell">
+	<label aria-label="Select all rows on this page">
+		<input
+			aria-label="Select all rows on this page"
+			onchange={tableContext.selectAllInCurrentPage}
+			type="checkbox"
+			{checked}
+			disabled={tableContext.showSelectedOnly}
+		/>
+	</label>
+</div>
+
 <style>input[type=checkbox] {
   height: var(--checkbox-height);
   padding: 1rem;
@@ -54,4 +48,4 @@ label {
 
 label {
   cursor: pointer;
-}</style>
+}</style>