@lavalogic/scoria 0.33.0 → 0.35.0

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

@@ -1,41 +1,41 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	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<T, never>>(TableContext.identifier);
-
-	const backgroundColour = $derived.by(() => {
-		return tableContext.sortedData.length > 0 && tableContext.allHighlighted
-			? Colour['$brand-primary']
-			: Colour['$ui-white'];
-	});
-</script>
-
-<div class="checkbox-cell">
-	<div class="wrapper">
-		<Action
-			{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"
+>
+	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<T, never>>(TableContext.identifier);
+
+	const backgroundColour = $derived.by(() => {
+		return tableContext.sortedData.length > 0 && tableContext.allHighlighted
+			? Colour['$brand-primary']
+			: Colour['$ui-white'];
+	});
+</script>
+
+<div class="checkbox-cell">
+	<div class="wrapper">
+		<Action
+			{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;
@@ -45,4 +45,4 @@
   display: flex;
   align-items: stretch;
   justify-content: stretch;
-}</style>
+}</style>

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

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

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

@@ -1,262 +1,262 @@
-<svelte:options runes />
-
-<script
-	module
-	lang="ts"
->
-	import Icon from '../../Icon.svelte';
-	import { TooltipContext } from '../../../Contexts/TooltipContext.svelte.js';
-	import { Delay } from '../../../Delay/Delay.js';
-	import { devCatch } from '../../../Helpers/Helpers.svelte.js';
-	import { Colour } 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 } from 'svelte';
-	import type { ColumnDef } from '../Types/Columns/Definitions/ColumnDef.svelte.js';
-	import { ExpandDef } from '../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
-	import { RowSelectionDef } from '../Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import type { HeaderGroup } from '../Types/HeaderGroup.js';
-	import HighlightAllHeader from './HighlightAllHeader.svelte';
-	import SelectAllHeader from './SelectAllHeader.svelte';
-
-	export interface TableHeadProps {
-		showHighlight: boolean;
-		side: 'left' | 'centre' | 'right';
-		oncontextmenu?: (e: MouseEvent) => void;
-	}
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	const { showHighlight, side = 'centre', oncontextmenu }: TableHeadProps = $props();
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
-
-	const groups: Array<HeaderGroup<T>> = $derived.by(() => {
-		void tableContext.table.columnVisibility;
-		void Object.keys(tableContext.table.columnVisibility);
-		void tableContext.table.columnPinning.left?.size;
-		void tableContext.table.columnPinning.right?.size;
-
-		return side === 'left'
-			? tableContext.table.getLeftHeaderGroups()
-			: side === 'right'
-				? tableContext.table.getRightHeaderGroups()
-				: tableContext.table.getCenterHeaderGroups();
-	});
-
-	const iconNames = {
-		asc: 'sort-asc',
-		desc: 'sort-desc',
-		none: 'sort-none',
-	} as const;
-
-	let currentDropTarget: HTMLTableCellElement | null = $state(null);
-
-	function setCurrentDropTarget(target: EventTarget | null) {
-		currentDropTarget = target as HTMLTableCellElement | null;
-	}
-
-	function showtooltip(e: MouseEvent, columnDef: ColumnDef<T>): void {
-		if (columnDef instanceof ExpandDef) {
-			const rect = (e.target as HTMLElement).closest('th')?.getBoundingClientRect();
-
-			if (!rect) {
-				console.warn('could not find closest TH');
-
-				return;
-			}
-
-			tooltipContext.showTooltip({
-				text: `Show ${typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}`,
-				arrow: Side.Bottom,
-				delay: Delay.Default,
-				rect,
-			});
-		}
-	}
-
-	function hideTooltip(columnDef: ColumnDef<T>): void {
-		if (columnDef instanceof ExpandDef) {
-			tooltipContext.hideTooltip(
-				`Show ${typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}`
-			);
-		}
-	}
-
-	function onDrop() {
-		if (!tableContext.dragTarget) {
-			return;
-		}
-
-		// const dropTarget = (e.target as HTMLElement)?.closest('th');
-		const dropTarget = currentDropTarget?.closest('th');
-
-		if (dropTarget) {
-			tableContext.reorderColumn(dropTarget);
-		}
-
-		currentDropTarget = null;
-	}
-
-	function setDragTarget(def: ColumnDef<T>) {
-		tableContext.dragTarget = def;
-	}
-
-	const currentDropTargetId = $derived(
-		(currentDropTarget as HTMLElement | null | undefined)?.closest('th')?.id
-	);
-</script>
-
-<thead
-	oncontextmenu={(e) => {
-		e.stopPropagation();
-		oncontextmenu?.(e);
-	}}
->
-	{#each groups as group (group)}
-		<tr>
-			{#if showHighlight && group.headers.length}
-				<th
-					id="highlight-header"
-					draggable={false}
-					colspan="1"
-					class="highlight-column"
-				>
-					<div class="th">
-						<HighlightAllHeader />
-					</div>
-				</th>
-			{/if}
-
-			{#each group.headers as header (header)}
-				{@const headerId = `${tableContext.tableName}-header-${header.id}`}
-				<!-- {@const computedSize = tableContext.measureHeaderWidth(header.column.columnDef)} -->
-				<th
-					id={headerId}
-					draggable={tableContext.allowColumnReordering}
-					colSpan={header.colSpan}
-					style="width: {Math.max(
-						// computedSize,
-						// header.column.columnDef.minSize ?? 0,
-						// tableContext.columnSizing[header.id] ??
-						header.getSize()
-					)}px"
-					class:action-column={!header.column.getCanSort()}
-					class:targeted={currentDropTargetId === headerId}
-					ondragstart={() => {
-						setDragTarget(header.column.columnDef);
-					}}
-					ondragover={(e) => {
-						e.preventDefault();
-						if (tableContext.dragTarget?.id !== header.id) {
-							setCurrentDropTarget(e.target);
-						} else {
-							setCurrentDropTarget(null);
-						}
-					}}
-					ondrop={onDrop}
-				>
-					{#if !header.isPlaceholder}
-						<div class="margin-right">
-							{#if header.column.getCanSort()}
-								<button
-									onmouseenter={(e) => {
-										showtooltip(e, header.column.columnDef);
-									}}
-									onmouseleave={() => {
-										hideTooltip(header.column.columnDef);
-									}}
-									class="contents"
-									onclick={header.column.getToggleSortingHandler()}
-								>
-									<div class="th cursor-pointer select-none">
-										<div class="header-text-wrapper">
-											{#if header.column.columnDef instanceof RowSelectionDef}
-												<SelectAllHeader />
-											{:else}
-												{#if header.column.columnDef instanceof ExpandDef}
-													<Icon
-														name={header.column.columnDef.headerIcon}
-														colour={Colour['$font-primary']}
-													/>
-												{:else if typeof header.column.columnDef.header == 'string'}
-													{header.column.columnDef.header}
-												{:else}
-													{@render header.column.columnDef.header()}
-												{/if}
-												<Icon
-													variant={Variant.HeaderIcon}
-													size={Size.Medium}
-													name={iconNames[header.column.getIsSorted()]}
-												/>
-											{/if}
-										</div>
-									</div>
-								</button>
-							{:else}
-								{@const isRowSelect = header.column.columnDef instanceof RowSelectionDef}
-								<!-- svelte-ignore a11y_no_static_element_interactions -->
-								<div
-									onmouseenter={(e) => {
-										showtooltip(e, header.column.columnDef);
-									}}
-									onmouseleave={() => {
-										hideTooltip(header.column.columnDef);
-									}}
-									class="contents"
-								>
-									<div
-										class="th"
-										class:nopadding={isRowSelect}
-									>
-										<div class="header-text-wrapper no-sort cursor-pointer select-none">
-											{#if isRowSelect}
-												<SelectAllHeader />
-											{:else if header.column.columnDef instanceof ExpandDef}
-												<Icon
-													name={header.column.columnDef.headerIcon}
-													colour={Colour['$font-primary']}
-												/>
-											{:else if typeof header.column.columnDef.header == 'string'}
-												{header.column.columnDef.header}
-											{:else}
-												{@render header.column.columnDef.header()}
-											{/if}
-										</div>
-									</div>
-								</div>
-							{/if}
-
-							{#if tableContext.enableResize}
-								<!-- svelte-ignore a11y_no_static_element_interactions -->
-								<div
-									onmousedown={(e) => {
-										e.preventDefault();
-										e.stopImmediatePropagation();
-										const handler = header.getResizeHandler();
-										handler(e);
-									}}
-									ondblclick={() => {
-										tableContext.autoResize(header.column.columnDef).catch(devCatch);
-									}}
-									class="resizer right"
-									class:isResizing={header.column.getIsResizing()}
-								></div>
-							{/if}
-						</div>
-					{/if}
-				</th>
-			{/each}
-		</tr>
-	{/each}
-</thead>
-
+<svelte:options runes />
+
+<script
+	module
+	lang="ts"
+>
+	import Icon from '../../Icon.svelte';
+	import { TooltipContext } from '../../../Contexts/TooltipContext.svelte.js';
+	import { Delay } from '../../../Delay/Delay.js';
+	import { devCatch } from '../../../Helpers/Helpers.svelte.js';
+	import { Colour } 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 } from 'svelte';
+	import type { ColumnDef } from '../Types/Columns/Definitions/ColumnDef.svelte.js';
+	import { ExpandDef } from '../Types/Columns/Definitions/Expand/ExpandDef.svelte.js';
+	import { RowSelectionDef } from '../Types/Columns/Definitions/RowSelection/RowSelectionDef.svelte.js';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { HeaderGroup } from '../Types/HeaderGroup.js';
+	import HighlightAllHeader from './HighlightAllHeader.svelte';
+	import SelectAllHeader from './SelectAllHeader.svelte';
+
+	export interface TableHeadProps {
+		showHighlight: boolean;
+		side: 'left' | 'centre' | 'right';
+		oncontextmenu?: (e: MouseEvent) => void;
+	}
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object"
+>
+	const { showHighlight, side = 'centre', oncontextmenu }: TableHeadProps = $props();
+
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+	const tooltipContext = getContext<TooltipContext>(TooltipContext.identifier);
+
+	const groups: Array<HeaderGroup<T>> = $derived.by(() => {
+		void tableContext.table.columnVisibility;
+		void Object.keys(tableContext.table.columnVisibility);
+		void tableContext.table.columnPinning.left?.size;
+		void tableContext.table.columnPinning.right?.size;
+
+		return side === 'left'
+			? tableContext.table.getLeftHeaderGroups()
+			: side === 'right'
+				? tableContext.table.getRightHeaderGroups()
+				: tableContext.table.getCenterHeaderGroups();
+	});
+
+	const iconNames = {
+		asc: 'sort-asc',
+		desc: 'sort-desc',
+		none: 'sort-none',
+	} as const;
+
+	let currentDropTarget: HTMLTableCellElement | null = $state(null);
+
+	function setCurrentDropTarget(target: EventTarget | null) {
+		currentDropTarget = target as HTMLTableCellElement | null;
+	}
+
+	function showtooltip(e: MouseEvent, columnDef: ColumnDef<T>): void {
+		if (columnDef instanceof ExpandDef) {
+			const rect = (e.target as HTMLElement).closest('th')?.getBoundingClientRect();
+
+			if (!rect) {
+				console.warn('could not find closest TH');
+
+				return;
+			}
+
+			tooltipContext.showTooltip({
+				text: `Show ${typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}`,
+				arrow: Side.Bottom,
+				delay: Delay.Default,
+				rect,
+			});
+		}
+	}
+
+	function hideTooltip(columnDef: ColumnDef<T>): void {
+		if (columnDef instanceof ExpandDef) {
+			tooltipContext.hideTooltip(
+				`Show ${typeof columnDef.header === 'string' ? columnDef.header : columnDef.id}`
+			);
+		}
+	}
+
+	function onDrop() {
+		if (!tableContext.dragTarget) {
+			return;
+		}
+
+		// const dropTarget = (e.target as HTMLElement)?.closest('th');
+		const dropTarget = currentDropTarget?.closest('th');
+
+		if (dropTarget) {
+			tableContext.reorderColumn(dropTarget);
+		}
+
+		currentDropTarget = null;
+	}
+
+	function setDragTarget(def: ColumnDef<T>) {
+		tableContext.dragTarget = def;
+	}
+
+	const currentDropTargetId = $derived(
+		(currentDropTarget as HTMLElement | null | undefined)?.closest('th')?.id
+	);
+</script>
+
+<thead
+	oncontextmenu={(e) => {
+		e.stopPropagation();
+		oncontextmenu?.(e);
+	}}
+>
+	{#each groups as group (group)}
+		<tr>
+			{#if showHighlight && group.headers.length}
+				<th
+					id="highlight-header"
+					draggable={false}
+					colspan="1"
+					class="highlight-column"
+				>
+					<div class="th">
+						<HighlightAllHeader />
+					</div>
+				</th>
+			{/if}
+
+			{#each group.headers as header (header)}
+				{@const headerId = `${tableContext.tableName}-header-${header.id}`}
+				<!-- {@const computedSize = tableContext.measureHeaderWidth(header.column.columnDef)} -->
+				<th
+					id={headerId}
+					draggable={tableContext.allowColumnReordering}
+					colSpan={header.colSpan}
+					style="width: {Math.max(
+						// computedSize,
+						// header.column.columnDef.minSize ?? 0,
+						// tableContext.columnSizing[header.id] ??
+						header.getSize()
+					)}px"
+					class:action-column={!header.column.getCanSort()}
+					class:targeted={currentDropTargetId === headerId}
+					ondragstart={() => {
+						setDragTarget(header.column.columnDef);
+					}}
+					ondragover={(e) => {
+						e.preventDefault();
+						if (tableContext.dragTarget?.id !== header.id) {
+							setCurrentDropTarget(e.target);
+						} else {
+							setCurrentDropTarget(null);
+						}
+					}}
+					ondrop={onDrop}
+				>
+					{#if !header.isPlaceholder}
+						<div class="margin-right">
+							{#if header.column.getCanSort()}
+								<button
+									onmouseenter={(e) => {
+										showtooltip(e, header.column.columnDef);
+									}}
+									onmouseleave={() => {
+										hideTooltip(header.column.columnDef);
+									}}
+									class="contents"
+									onclick={header.column.getToggleSortingHandler()}
+								>
+									<div class="th cursor-pointer select-none">
+										<div class="header-text-wrapper">
+											{#if header.column.columnDef instanceof RowSelectionDef}
+												<SelectAllHeader />
+											{:else}
+												{#if header.column.columnDef instanceof ExpandDef}
+													<Icon
+														name={header.column.columnDef.headerIcon}
+														colour={Colour['$font-primary']}
+													/>
+												{:else if typeof header.column.columnDef.header == 'string'}
+													{header.column.columnDef.header}
+												{:else}
+													{@render header.column.columnDef.header()}
+												{/if}
+												<Icon
+													variant={Variant.HeaderIcon}
+													size={Size.Medium}
+													name={iconNames[header.column.getIsSorted()]}
+												/>
+											{/if}
+										</div>
+									</div>
+								</button>
+							{:else}
+								{@const isRowSelect = header.column.columnDef instanceof RowSelectionDef}
+								<!-- svelte-ignore a11y_no_static_element_interactions -->
+								<div
+									onmouseenter={(e) => {
+										showtooltip(e, header.column.columnDef);
+									}}
+									onmouseleave={() => {
+										hideTooltip(header.column.columnDef);
+									}}
+									class="contents"
+								>
+									<div
+										class="th"
+										class:nopadding={isRowSelect}
+									>
+										<div class="header-text-wrapper no-sort cursor-pointer select-none">
+											{#if isRowSelect}
+												<SelectAllHeader />
+											{:else if header.column.columnDef instanceof ExpandDef}
+												<Icon
+													name={header.column.columnDef.headerIcon}
+													colour={Colour['$font-primary']}
+												/>
+											{:else if typeof header.column.columnDef.header == 'string'}
+												{header.column.columnDef.header}
+											{:else}
+												{@render header.column.columnDef.header()}
+											{/if}
+										</div>
+									</div>
+								</div>
+							{/if}
+
+							{#if tableContext.enableResize}
+								<!-- svelte-ignore a11y_no_static_element_interactions -->
+								<div
+									onmousedown={(e) => {
+										e.preventDefault();
+										e.stopImmediatePropagation();
+										const handler = header.getResizeHandler();
+										handler(e);
+									}}
+									ondblclick={() => {
+										tableContext.autoResize(header.column.columnDef).catch(devCatch);
+									}}
+									class="resizer right"
+									class:isResizing={header.column.getIsResizing()}
+								></div>
+							{/if}
+						</div>
+					{/if}
+				</th>
+			{/each}
+		</tr>
+	{/each}
+</thead>
+
 <style>th {
   position: relative;
   min-width: fit-content;
@@ -381,4 +381,4 @@ tr th:first-of-type {
 }
 tr th:last-of-type {
   border-right: none;
-}</style>
+}</style>