@lavalogic/scoria 0.35.0 → 0.36.0

package/dist/Components/Table/Body/Rows/ColumnHighlight.svelte

@@ -1,32 +1,32 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import Action from '../../../Action.svelte';
-	import { Colour } from '../../../../scss/colours.js';
-	import { Size } from '../../../../Types/Internal/Size.js';
-	import type { ColumnHighlightProps } from './ColumnHighlightProps.js';
-
-	const { rowIndex, highlighted, toggleHighlightedRow }: ColumnHighlightProps = $props();
-
-	const backgroundColour = $derived(highlighted ? Colour['$brand-primary'] : Colour['$ui-white']);
-</script>
-
-<td id="tagger-row-{rowIndex}">
-	<div class="wrapper">
-		<Action
-			{backgroundColour}
-			hoverBackgroundColour={Colour['$brand-dark']}
-			size={Size.FillWidth}
-			icon={{
-				name: 'nothing'
-			}}
-			onclick={() => {
-				toggleHighlightedRow();
-			}}
-		/>
-	</div></td
->
-
+<svelte:options runes />
+
+<script lang="ts">
+	import Action from '../../../Action.svelte';
+	import { Colour } from '../../../../scss/colours.js';
+	import { Size } from '../../../../Types/Internal/Size.js';
+	import type { ColumnHighlightProps } from './ColumnHighlightProps.js';
+
+	const { rowIndex, highlighted, toggleHighlightedRow }: ColumnHighlightProps = $props();
+
+	const backgroundColour = $derived(highlighted ? Colour['$brand-primary'] : Colour['$ui-white']);
+</script>
+
+<td id="tagger-row-{rowIndex}">
+	<div class="wrapper">
+		<Action
+			{backgroundColour}
+			hoverBackgroundColour={Colour['$brand-dark']}
+			size={Size.FillWidth}
+			icon={{
+				name: 'nothing'
+			}}
+			onclick={() => {
+				toggleHighlightedRow();
+			}}
+		/>
+	</div></td
+>
+
 <style>td {
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
@@ -59,4 +59,4 @@ div.wrapper {
 
 .wrapper {
   overflow: hidden;
-}</style>
+}</style>

package/dist/Components/Table/Body/Rows/ColumnList.svelte

@@ -1,58 +1,58 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	import { ColumnType } from '../../Types/Columns/ColumnType.js';
-	import type { ColumnDef } from '../../Types/Columns/Definitions/ColumnDef.svelte.js';
-	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
-	import { getContext } from 'svelte';
-	import type { ColumnListProps } from './ColumnListProps.js';
-	import ColumnListRow from './ColumnListRow.svelte';
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const { searchValue }: ColumnListProps = $props();
-
-	const visibleColumns: Array<ColumnDef<T>> = $derived.by(() => {
-		const lowercasedSearchValue = searchValue.toLocaleLowerCase();
-		return tableContext.columnDefs.filter(
-			(it) =>
-				it.columnType !== ColumnType.FilterOnly &&
-				(it.id.toLowerCase().includes(lowercasedSearchValue) ||
-					(typeof it.header === 'string' &&
-						it.header.toLowerCase().includes(lowercasedSearchValue)))
-		);
-	});
-
-	function onDrop(e: DragEvent) {
-		if (!tableContext.dragTarget) {
-			return;
-		}
-
-		const dropTarget = (e.target as HTMLElement | undefined)?.closest('li');
-
-		if (dropTarget) {
-			tableContext.reorderColumn(dropTarget);
-		}
-	}
-</script>
-
-<ul
-	class="column-list"
-	ondrop={onDrop}
->
-	<!-- key={"top-anchor"} -->
-	<!-- HACK this is used as an anchor for dragging rows to the top -->
-	<ColumnListRow columnDef={null} />
-
-	<!-- TODO try to find a key for these -->
-	{#each visibleColumns as columnDef (columnDef)}
-		<ColumnListRow {columnDef} />
-	{/each}
-</ul>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object"
+>
+	import { ColumnType } from '../../Types/Columns/ColumnType.js';
+	import type { ColumnDef } from '../../Types/Columns/Definitions/ColumnDef.svelte.js';
+	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
+	import { getContext } from 'svelte';
+	import type { ColumnListProps } from './ColumnListProps.js';
+	import ColumnListRow from './ColumnListRow.svelte';
+
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+
+	const { searchValue }: ColumnListProps = $props();
+
+	const visibleColumns: Array<ColumnDef<T>> = $derived.by(() => {
+		const lowercasedSearchValue = searchValue.toLocaleLowerCase();
+		return tableContext.columnDefs.filter(
+			(it) =>
+				it.columnType !== ColumnType.FilterOnly &&
+				(it.id.toLowerCase().includes(lowercasedSearchValue) ||
+					(typeof it.header === 'string' &&
+						it.header.toLowerCase().includes(lowercasedSearchValue)))
+		);
+	});
+
+	function onDrop(e: DragEvent) {
+		if (!tableContext.dragTarget) {
+			return;
+		}
+
+		const dropTarget = (e.target as HTMLElement | undefined)?.closest('li');
+
+		if (dropTarget) {
+			tableContext.reorderColumn(dropTarget);
+		}
+	}
+</script>
+
+<ul
+	class="column-list"
+	ondrop={onDrop}
+>
+	<!-- key={"top-anchor"} -->
+	<!-- HACK this is used as an anchor for dragging rows to the top -->
+	<ColumnListRow columnDef={null} />
+
+	<!-- TODO try to find a key for these -->
+	{#each visibleColumns as columnDef (columnDef)}
+		<ColumnListRow {columnDef} />
+	{/each}
+</ul>
+
 <style>ul {
   list-style: none;
   background-color: #ffffff;
@@ -65,4 +65,4 @@
   padding: 0.5rem;
   margin: 0;
   overflow: auto;
-}</style>
+}</style>

package/dist/Components/Table/Body/Rows/ColumnListRow.svelte

@@ -1,181 +1,181 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	import Checkbox from '../../../Checkbox.svelte';
-	import Icon from '../../../Icon.svelte';
-	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
-	import { Size } from '../../../../Types/Internal/Size.js';
-	import { getContext } from 'svelte';
-	import type { ColumnListRowProps } from './ColumnListRowProps.js';
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const { columnDef }: ColumnListRowProps<T> = $props();
-
-	const isExpandColumn = $derived(columnDef?.columnType === 'Expand');
-
-	let isBeingTargeted = $state(false);
-
-	function disableDragVisual() {
-		isBeingTargeted = false;
-	}
-
-	function makeKVPairs(item: string, index: number): readonly [string, number] {
-		return [item, index];
-	}
-	function togglePinLeft() {
-		if (columnDef == null) {
-			return;
-		}
-
-		tableContext.setColumnPinning((pinning) => {
-			const leftPinIndex = pinning.left?.get(columnDef.id) ?? -1;
-			const left = [...(pinning.left?.keys() ?? [])];
-			if (leftPinIndex !== -1) {
-				left.splice(leftPinIndex, 1);
-			} else {
-				left.push(columnDef.id);
-			}
-
-			const rightPinIndex = pinning.right?.get(columnDef.id) ?? -1;
-			const right = [...(pinning.right?.keys() ?? [])];
-			if (rightPinIndex !== -1) {
-				right.splice(rightPinIndex, 1);
-			}
-			return {
-				...pinning,
-				left: new Map(left.map(makeKVPairs)),
-				right: new Map(right.map(makeKVPairs)),
-			};
-		});
-	}
-
-	function togglePinRight() {
-		if (columnDef == null) {
-			return;
-		}
-
-		tableContext.setColumnPinning((pinning) => {
-			const rightPinIndex = pinning.right?.get(columnDef.id) ?? -1;
-			const right = [...(pinning.right?.keys() ?? [])];
-
-			if (rightPinIndex !== -1) {
-				right.splice(rightPinIndex, 1);
-			} else {
-				right.push(columnDef.id);
-			}
-
-			const leftPinIndex = pinning.left?.get(columnDef.id) ?? -1;
-			const left = [...(pinning.left?.keys() ?? [])];
-			if (leftPinIndex !== -1) {
-				left.splice(leftPinIndex, 1);
-			}
-
-			return {
-				...pinning,
-				left: new Map(left.map(makeKVPairs)),
-				right: new Map(right.map(makeKVPairs)),
-			};
-		});
-	}
-
-	const onVisibilityChange = (e: Event) => {
-		if (!columnDef) {
-			console.warn('no def found', e);
-
-			return;
-		}
-		tableContext.updateVisibility((defs) => {
-			defs[columnDef.id] = (e.target as HTMLInputElement).checked;
-			return defs;
-		});
-	};
-</script>
-
-{#if columnDef}
-	<li
-		class="single-column"
-		class:targeted={isBeingTargeted}
-		id="{tableContext.tableName}-column-settings-{columnDef.id}"
-		draggable={tableContext.allowColumnReordering}
-		ondragstart={() => {
-			tableContext.dragTarget = columnDef;
-		}}
-		ondragend={disableDragVisual}
-		ondragover={(e) => {
-			e.preventDefault();
-			if (tableContext.dragTarget?.id !== columnDef.id) {
-				isBeingTargeted = true;
-			}
-		}}
-		ondragleave={disableDragVisual}
-		ondrop={disableDragVisual}
-	>
-		<Checkbox
-			icon={{ name: 'assessment' }}
-			id={`is-visible-${tableContext.tableName}-${columnDef.id}`}
-			value={tableContext.columnVisibility[columnDef.id] !== false}
-			onchange={onVisibilityChange}
-		/>
-
-		{#if tableContext.allowColumnReordering}
-			<!-- value={tableContext.columnPinning.left?.has(columnDef.id) ?? false} -->
-			<Checkbox
-				disabled={isExpandColumn}
-				icon={{ name: 'pin-left' }}
-				id={`is-pinned-left-${tableContext.tableName}-${columnDef.id}`}
-				value={tableContext.columnPinning.left?.has(columnDef.id) || false}
-				onchange={() => {
-					togglePinLeft();
-				}}
-			/>
-			<!-- value={tableContext.columnPinning.right?.has(columnDef.id) ?? false} -->
-			<Checkbox
-				disabled={isExpandColumn}
-				icon={{ name: 'pin-right' }}
-				id={`is-pinned-right-${tableContext.tableName}-${columnDef.id}`}
-				value={tableContext.columnPinning.right?.has(columnDef.id) || false}
-				onchange={() => {
-					togglePinRight();
-				}}
-			/>
-			<div
-				id={`drag-handle-${tableContext.tableName}-${columnDef.id}`}
-				style="display: flex; cursor: move;"
-			>
-				<Icon
-					name="handle"
-					size={Size.Large}
-				/>
-			</div>
-		{/if}
-		{#if typeof columnDef.header === 'function'}
-			<!-- FIXME this needs testing -->
-			{@render columnDef.header()}
-			<!-- <span>{columnDef.id}</span> -->
-		{:else}
-			<span>{columnDef.header}</span>
-		{/if}
-	</li>
-{:else}
-	<li
-		id="{tableContext.tableName}-column-settings-top-anchor"
-		class="single-column anchor"
-		class:targeted={isBeingTargeted}
-		ondragover={(e) => {
-			e.preventDefault();
-
-			if (tableContext.dragTarget?.id !== undefined) {
-				isBeingTargeted = true;
-			}
-		}}
-		ondragleave={disableDragVisual}
-		ondrop={disableDragVisual}
-	></li>
-{/if}
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object"
+>
+	import Checkbox from '../../../Checkbox.svelte';
+	import Icon from '../../../Icon.svelte';
+	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
+	import { Size } from '../../../../Types/Internal/Size.js';
+	import { getContext } from 'svelte';
+	import type { ColumnListRowProps } from './ColumnListRowProps.js';
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+
+	const { columnDef }: ColumnListRowProps<T> = $props();
+
+	const isExpandColumn = $derived(columnDef?.columnType === 'Expand');
+
+	let isBeingTargeted = $state(false);
+
+	function disableDragVisual() {
+		isBeingTargeted = false;
+	}
+
+	function makeKVPairs(item: string, index: number): readonly [string, number] {
+		return [item, index];
+	}
+	function togglePinLeft() {
+		if (columnDef == null) {
+			return;
+		}
+
+		tableContext.setColumnPinning((pinning) => {
+			const leftPinIndex = pinning.left?.get(columnDef.id) ?? -1;
+			const left = [...(pinning.left?.keys() ?? [])];
+			if (leftPinIndex !== -1) {
+				left.splice(leftPinIndex, 1);
+			} else {
+				left.push(columnDef.id);
+			}
+
+			const rightPinIndex = pinning.right?.get(columnDef.id) ?? -1;
+			const right = [...(pinning.right?.keys() ?? [])];
+			if (rightPinIndex !== -1) {
+				right.splice(rightPinIndex, 1);
+			}
+			return {
+				...pinning,
+				left: new Map(left.map(makeKVPairs)),
+				right: new Map(right.map(makeKVPairs)),
+			};
+		});
+	}
+
+	function togglePinRight() {
+		if (columnDef == null) {
+			return;
+		}
+
+		tableContext.setColumnPinning((pinning) => {
+			const rightPinIndex = pinning.right?.get(columnDef.id) ?? -1;
+			const right = [...(pinning.right?.keys() ?? [])];
+
+			if (rightPinIndex !== -1) {
+				right.splice(rightPinIndex, 1);
+			} else {
+				right.push(columnDef.id);
+			}
+
+			const leftPinIndex = pinning.left?.get(columnDef.id) ?? -1;
+			const left = [...(pinning.left?.keys() ?? [])];
+			if (leftPinIndex !== -1) {
+				left.splice(leftPinIndex, 1);
+			}
+
+			return {
+				...pinning,
+				left: new Map(left.map(makeKVPairs)),
+				right: new Map(right.map(makeKVPairs)),
+			};
+		});
+	}
+
+	const onVisibilityChange = (e: Event) => {
+		if (!columnDef) {
+			console.warn('no def found', e);
+
+			return;
+		}
+		tableContext.updateVisibility((defs) => {
+			defs[columnDef.id] = (e.target as HTMLInputElement).checked;
+			return defs;
+		});
+	};
+</script>
+
+{#if columnDef}
+	<li
+		class="single-column"
+		class:targeted={isBeingTargeted}
+		id="{tableContext.tableName}-column-settings-{columnDef.id}"
+		draggable={tableContext.allowColumnReordering}
+		ondragstart={() => {
+			tableContext.dragTarget = columnDef;
+		}}
+		ondragend={disableDragVisual}
+		ondragover={(e) => {
+			e.preventDefault();
+			if (tableContext.dragTarget?.id !== columnDef.id) {
+				isBeingTargeted = true;
+			}
+		}}
+		ondragleave={disableDragVisual}
+		ondrop={disableDragVisual}
+	>
+		<Checkbox
+			icon={{ name: 'assessment' }}
+			id={`is-visible-${tableContext.tableName}-${columnDef.id}`}
+			value={tableContext.columnVisibility[columnDef.id] !== false}
+			onchange={onVisibilityChange}
+		/>
+
+		{#if tableContext.allowColumnReordering}
+			<!-- value={tableContext.columnPinning.left?.has(columnDef.id) ?? false} -->
+			<Checkbox
+				disabled={isExpandColumn}
+				icon={{ name: 'pin-left' }}
+				id={`is-pinned-left-${tableContext.tableName}-${columnDef.id}`}
+				value={tableContext.columnPinning.left?.has(columnDef.id) || false}
+				onchange={() => {
+					togglePinLeft();
+				}}
+			/>
+			<!-- value={tableContext.columnPinning.right?.has(columnDef.id) ?? false} -->
+			<Checkbox
+				disabled={isExpandColumn}
+				icon={{ name: 'pin-right' }}
+				id={`is-pinned-right-${tableContext.tableName}-${columnDef.id}`}
+				value={tableContext.columnPinning.right?.has(columnDef.id) || false}
+				onchange={() => {
+					togglePinRight();
+				}}
+			/>
+			<div
+				id={`drag-handle-${tableContext.tableName}-${columnDef.id}`}
+				style="display: flex; cursor: move;"
+			>
+				<Icon
+					name="handle"
+					size={Size.Large}
+				/>
+			</div>
+		{/if}
+		{#if typeof columnDef.header === 'function'}
+			<!-- FIXME this needs testing -->
+			{@render columnDef.header()}
+			<!-- <span>{columnDef.id}</span> -->
+		{:else}
+			<span>{columnDef.header}</span>
+		{/if}
+	</li>
+{:else}
+	<li
+		id="{tableContext.tableName}-column-settings-top-anchor"
+		class="single-column anchor"
+		class:targeted={isBeingTargeted}
+		ondragover={(e) => {
+			e.preventDefault();
+
+			if (tableContext.dragTarget?.id !== undefined) {
+				isBeingTargeted = true;
+			}
+		}}
+		ondragleave={disableDragVisual}
+		ondrop={disableDragVisual}
+	></li>
+{/if}
+
 <style>li {
   box-sizing: border-box;
 }
@@ -191,4 +191,4 @@ li.single-column {
   gap: 1rem;
   padding: 0.5rem 0.5rem;
   align-items: center;
-}</style>
+}</style>

package/dist/Components/Table/Body/Rows/Columns/AccessorComponent.svelte

@@ -1,49 +1,49 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import { AccessorDef } from '../../../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js';
-	import type { ColumnDef } from '../../../Types/Columns/Definitions/ColumnDef.svelte.js';
-	import type { Component } from 'svelte';
-	import type { AccessorComponentProps } from './AccessorComponentProps.js';
-	import FocusableImmutableCell from './FocusableImmutableCell.svelte';
-	import TableCheckbox from './TableCheckbox.svelte';
-	import TableDatePicker from './TableDatePicker.svelte';
-	import TableNumberInput from './TableNumberInput.svelte';
-	import TableQuerySelect from './TableQuerySelect.svelte';
-	import TableSelect from './TableSelect.svelte';
-	import TableTextInput from './TableTextInput.svelte';
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	const { cell }: AccessorComponentProps<T> = $props();
-
-	const cellTypes: Record<
-		'Number' | 'Date' | 'Select' | 'Checkbox' | 'Query' | 'Text',
-		object & Component<any>
-	> = {
-		Number: TableNumberInput,
-		Date: TableDatePicker,
-		Select: TableSelect,
-		Query: TableQuerySelect,
-		Checkbox: TableCheckbox,
-		Text: TableTextInput,
-	} as const;
-
-	const CurrentComponent = $derived(getAppropriateAccessorDef(cell.column.columnDef));
-
-	function getAppropriateAccessorDef(columnDef: ColumnDef<T>): Component<any> {
-		if (columnDef instanceof AccessorDef) {
-			return cellTypes[columnDef.accessorType];
-		}
-
-		return FocusableImmutableCell;
-	}
-</script>
-
-<CurrentComponent {cell} />
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import { AccessorDef } from '../../../Types/Columns/Definitions/Accessors/AccessorDef.svelte.js';
+	import type { ColumnDef } from '../../../Types/Columns/Definitions/ColumnDef.svelte.js';
+	import type { Component } from 'svelte';
+	import type { AccessorComponentProps } from './AccessorComponentProps.js';
+	import FocusableImmutableCell from './FocusableImmutableCell.svelte';
+	import TableCheckbox from './TableCheckbox.svelte';
+	import TableDatePicker from './TableDatePicker.svelte';
+	import TableNumberInput from './TableNumberInput.svelte';
+	import TableQuerySelect from './TableQuerySelect.svelte';
+	import TableSelect from './TableSelect.svelte';
+	import TableTextInput from './TableTextInput.svelte';
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object"
+>
+	const { cell }: AccessorComponentProps<T> = $props();
+
+	const cellTypes: Record<
+		'Number' | 'Date' | 'Select' | 'Checkbox' | 'Query' | 'Text',
+		object & Component<any>
+	> = {
+		Number: TableNumberInput,
+		Date: TableDatePicker,
+		Select: TableSelect,
+		Query: TableQuerySelect,
+		Checkbox: TableCheckbox,
+		Text: TableTextInput,
+	} as const;
+
+	const CurrentComponent = $derived(getAppropriateAccessorDef(cell.column.columnDef));
+
+	function getAppropriateAccessorDef(columnDef: ColumnDef<T>): Component<any> {
+		if (columnDef instanceof AccessorDef) {
+			return cellTypes[columnDef.accessorType];
+		}
+
+		return FocusableImmutableCell;
+	}
+</script>
+
+<CurrentComponent {cell} />