@lavalogic/scoria 0.33.0 → 0.35.0

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

@@ -1,79 +1,79 @@
-<svelte:options runes />
-
-<script lang="ts" generics="T extends object">
-	import Checkbox from '../../Checkbox.svelte';
-	import { getContext } from 'svelte';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const onCompactChange = (e: Event) => {
-		tableContext.setIsCompact((e.target as HTMLInputElement).checked);
-	};
-
-	const onSingleCLickChange = (e: Event) => {
-		tableContext.setSingleClickEditing((e.target as HTMLInputElement).checked);
-	};
-
-	const onAlternateRowColoursChange = (e: Event) => {
-		tableContext.setAlternateRowColours((e.target as HTMLInputElement).checked);
-	};
-
-	const onChangeColourOnHoverChange = (e: Event) => {
-		tableContext.setChangeColourOnHover((e.target as HTMLInputElement).checked);
-	};
-
-	const onCopyWithHeadersChange = (e: Event) => {
-		tableContext.setCopyWithHeaders((e.target as HTMLInputElement).checked);
-	};
-
-	const onCommaSeparatedCopyChange = (e: Event) => {
-		tableContext.setCommaSeparatedCopy((e.target as HTMLInputElement).checked);
-	};
-</script>
-
-<div class="column-panel">
-	<h3>Settings</h3>
-	<Checkbox
-		label="Compact"
-		id={`is-compact-${tableContext.tableName}`}
-		value={tableContext.isCompact}
-		onchange={onCompactChange}
-	/>
-	<Checkbox
-		label="Single Click Editing"
-		id={`single-click-editing-${tableContext.tableName}`}
-		value={tableContext.singleClickEditing}
-		onchange={onSingleCLickChange}
-	/>
-	<Checkbox
-		label="Alternate Row Colours"
-		id={`alternate-row-colours-${tableContext.tableName}`}
-		value={tableContext.alternateRowColours}
-		onchange={onAlternateRowColoursChange}
-	/>
-	<Checkbox
-		label="Change Colour on Hover"
-		id={`change-colour-on-hover-${tableContext.tableName}`}
-		value={tableContext.changeColourOnHover}
-		onchange={onChangeColourOnHoverChange}
-	/>
-	{#if tableContext.allowCopy}
-		<Checkbox
-			label="Include Headers When Copying"
-			id={`copy-with-headers-${tableContext.tableName}`}
-			value={tableContext.copyWithHeaders}
-			onchange={onCopyWithHeadersChange}
-		/>
-		<Checkbox
-			label="Copy as Comma Separated Values"
-			id={`comma-separated-copy-${tableContext.tableName}`}
-			value={tableContext.commaSeparatedCopy}
-			onchange={onCommaSeparatedCopyChange}
-		/>
-	{/if}
-</div>
-
+<svelte:options runes />
+
+<script lang="ts" generics="T extends object">
+	import Checkbox from '../../Checkbox.svelte';
+	import { getContext } from 'svelte';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+
+	const onCompactChange = (e: Event) => {
+		tableContext.setIsCompact((e.target as HTMLInputElement).checked);
+	};
+
+	const onSingleCLickChange = (e: Event) => {
+		tableContext.setSingleClickEditing((e.target as HTMLInputElement).checked);
+	};
+
+	const onAlternateRowColoursChange = (e: Event) => {
+		tableContext.setAlternateRowColours((e.target as HTMLInputElement).checked);
+	};
+
+	const onChangeColourOnHoverChange = (e: Event) => {
+		tableContext.setChangeColourOnHover((e.target as HTMLInputElement).checked);
+	};
+
+	const onCopyWithHeadersChange = (e: Event) => {
+		tableContext.setCopyWithHeaders((e.target as HTMLInputElement).checked);
+	};
+
+	const onCommaSeparatedCopyChange = (e: Event) => {
+		tableContext.setCommaSeparatedCopy((e.target as HTMLInputElement).checked);
+	};
+</script>
+
+<div class="column-panel">
+	<h3>Settings</h3>
+	<Checkbox
+		label="Compact"
+		id={`is-compact-${tableContext.tableName}`}
+		value={tableContext.isCompact}
+		onchange={onCompactChange}
+	/>
+	<Checkbox
+		label="Single Click Editing"
+		id={`single-click-editing-${tableContext.tableName}`}
+		value={tableContext.singleClickEditing}
+		onchange={onSingleCLickChange}
+	/>
+	<Checkbox
+		label="Alternate Row Colours"
+		id={`alternate-row-colours-${tableContext.tableName}`}
+		value={tableContext.alternateRowColours}
+		onchange={onAlternateRowColoursChange}
+	/>
+	<Checkbox
+		label="Change Colour on Hover"
+		id={`change-colour-on-hover-${tableContext.tableName}`}
+		value={tableContext.changeColourOnHover}
+		onchange={onChangeColourOnHoverChange}
+	/>
+	{#if tableContext.allowCopy}
+		<Checkbox
+			label="Include Headers When Copying"
+			id={`copy-with-headers-${tableContext.tableName}`}
+			value={tableContext.copyWithHeaders}
+			onchange={onCopyWithHeadersChange}
+		/>
+		<Checkbox
+			label="Copy as Comma Separated Values"
+			id={`comma-separated-copy-${tableContext.tableName}`}
+			value={tableContext.commaSeparatedCopy}
+			onchange={onCommaSeparatedCopyChange}
+		/>
+	{/if}
+</div>
+
 <style>div.column-panel {
   padding: 0.5rem;
   display: flex;
@@ -81,4 +81,4 @@
   gap: 0.5rem;
   background-color: #ffffff;
   height: 100%;
-}</style>
+}</style>

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

@@ -1,93 +1,93 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object"
->
-	import Checkbox from '../../Checkbox.svelte';
-	import DesktopModal from '../../DesktopModal.svelte';
-	import { getContext } from 'svelte';
-	import { TableContext } from '../Types/Context/TableContext.svelte.js';
-	import type { ToolboxPanelModalProps } from './ToolboxPanelModalProps.js';
-
-	let { onclose }: ToolboxPanelModalProps = $props();
-
-	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
-
-	const onCompactChange = (e: Event) => {
-		tableContext.setIsCompact((e.target as HTMLInputElement).checked);
-	};
-
-	const onSingleCLickChange = (e: Event) => {
-		tableContext.setSingleClickEditing((e.target as HTMLInputElement).checked);
-	};
-
-	const onAlternateRowColoursChange = (e: Event) => {
-		tableContext.setAlternateRowColours((e.target as HTMLInputElement).checked);
-	};
-
-	const onChangeColourOnHoverChange = (e: Event) => {
-		tableContext.setChangeColourOnHover((e.target as HTMLInputElement).checked);
-	};
-
-	const onCopyWithHeadersChange = (e: Event) => {
-		tableContext.setCopyWithHeaders((e.target as HTMLInputElement).checked);
-	};
-
-	const onCommaSeparatedCopyChange = (e: Event) => {
-		tableContext.setCommaSeparatedCopy((e.target as HTMLInputElement).checked);
-	};
-</script>
-
-<DesktopModal
-	headerLabel="Table Settings"
-	onclose={() => onclose?.()}
-	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
->
-	<div class="flex">
-		<div class="column-panel">
-			<Checkbox
-				label="Compact"
-				id={`is-compact-${tableContext.tableName}-modal`}
-				value={tableContext.isCompact}
-				onchange={onCompactChange}
-			/>
-			<Checkbox
-				label="Single Click Editing"
-				id={`single-click-editing-${tableContext.tableName}-modal`}
-				value={tableContext.singleClickEditing}
-				onchange={onSingleCLickChange}
-			/>
-			<Checkbox
-				label="Alternate Row Colours"
-				id={`alternate-row-colours-${tableContext.tableName}-modal`}
-				value={tableContext.alternateRowColours}
-				onchange={onAlternateRowColoursChange}
-			/>
-			<Checkbox
-				label="Change Colour on Hover"
-				id={`change-colour-on-hover-${tableContext.tableName}-modal`}
-				value={tableContext.changeColourOnHover}
-				onchange={onChangeColourOnHoverChange}
-			/>
-			{#if tableContext.allowCopy}
-				<Checkbox
-					label="Include Headers When Copying"
-					id={`copy-with-headers-${tableContext.tableName}-modal`}
-					value={tableContext.copyWithHeaders}
-					onchange={onCopyWithHeadersChange}
-				/>
-				<Checkbox
-					label="Copy as Comma Separated Values"
-					id={`comma-separated-copy-${tableContext.tableName}-modal`}
-					value={tableContext.commaSeparatedCopy}
-					onchange={onCommaSeparatedCopyChange}
-				/>
-			{/if}
-		</div>
-	</div>
-</DesktopModal>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object"
+>
+	import Checkbox from '../../Checkbox.svelte';
+	import DesktopModal from '../../DesktopModal.svelte';
+	import { getContext } from 'svelte';
+	import { TableContext } from '../Types/Context/TableContext.svelte.js';
+	import type { ToolboxPanelModalProps } from './ToolboxPanelModalProps.js';
+
+	let { onclose }: ToolboxPanelModalProps = $props();
+
+	const tableContext = getContext<TableContext<T, never>>(TableContext.identifier);
+
+	const onCompactChange = (e: Event) => {
+		tableContext.setIsCompact((e.target as HTMLInputElement).checked);
+	};
+
+	const onSingleCLickChange = (e: Event) => {
+		tableContext.setSingleClickEditing((e.target as HTMLInputElement).checked);
+	};
+
+	const onAlternateRowColoursChange = (e: Event) => {
+		tableContext.setAlternateRowColours((e.target as HTMLInputElement).checked);
+	};
+
+	const onChangeColourOnHoverChange = (e: Event) => {
+		tableContext.setChangeColourOnHover((e.target as HTMLInputElement).checked);
+	};
+
+	const onCopyWithHeadersChange = (e: Event) => {
+		tableContext.setCopyWithHeaders((e.target as HTMLInputElement).checked);
+	};
+
+	const onCommaSeparatedCopyChange = (e: Event) => {
+		tableContext.setCommaSeparatedCopy((e.target as HTMLInputElement).checked);
+	};
+</script>
+
+<DesktopModal
+	headerLabel="Table Settings"
+	onclose={() => onclose?.()}
+	buttons={[{ label: 'Close', callback: () => onclose?.() }]}
+>
+	<div class="flex">
+		<div class="column-panel">
+			<Checkbox
+				label="Compact"
+				id={`is-compact-${tableContext.tableName}-modal`}
+				value={tableContext.isCompact}
+				onchange={onCompactChange}
+			/>
+			<Checkbox
+				label="Single Click Editing"
+				id={`single-click-editing-${tableContext.tableName}-modal`}
+				value={tableContext.singleClickEditing}
+				onchange={onSingleCLickChange}
+			/>
+			<Checkbox
+				label="Alternate Row Colours"
+				id={`alternate-row-colours-${tableContext.tableName}-modal`}
+				value={tableContext.alternateRowColours}
+				onchange={onAlternateRowColoursChange}
+			/>
+			<Checkbox
+				label="Change Colour on Hover"
+				id={`change-colour-on-hover-${tableContext.tableName}-modal`}
+				value={tableContext.changeColourOnHover}
+				onchange={onChangeColourOnHoverChange}
+			/>
+			{#if tableContext.allowCopy}
+				<Checkbox
+					label="Include Headers When Copying"
+					id={`copy-with-headers-${tableContext.tableName}-modal`}
+					value={tableContext.copyWithHeaders}
+					onchange={onCopyWithHeadersChange}
+				/>
+				<Checkbox
+					label="Copy as Comma Separated Values"
+					id={`comma-separated-copy-${tableContext.tableName}-modal`}
+					value={tableContext.commaSeparatedCopy}
+					onchange={onCommaSeparatedCopyChange}
+				/>
+			{/if}
+		</div>
+	</div>
+</DesktopModal>
+
 <style>.flex {
   display: flex;
   flex-flow: column nowrap;
@@ -103,4 +103,4 @@ div.column-panel {
   gap: 0.5rem;
   background-color: #ffffff;
   height: 100%;
-}</style>
+}</style>

package/dist/Components/Table/NestedTable.svelte

@@ -1,86 +1,86 @@
-<svelte:options runes />
-
-<script lang="ts" module>
-	import Table from './Table.svelte';
-	import type { DefsWrapper } from './Types/Columns/DefsWrapper.js';
-	import { TableContext } from './Types/Context/TableContext.svelte.js';
-	import type { Primitive, TableInitOptions } from './Types/Context/TableInitOptions.js';
-	import { LocalTableDataRepository } from './Types/DataRepository/LocalTableDataRepository.svelte.js';
-	import { ToolbarPosition } from './Types/Toolbar/ToolbarPosition.js';
-
-	const defaultOptions: Omit<
-		TableInitOptions<object, never>,
-		'selectionExtractor' | 'getUserId'
-	> = {
-		allowCopy: false,
-		enableResize: false,
-		allowColumnReordering: false,
-		allowQuickFiltering: true,
-		allowAdvancedFiltering: true,
-		toolbar: ToolbarPosition.None,
-		displayFooter: false
-	};
-
-	export interface NestedTableProps<T extends object, IdType extends Primitive> {
-		tableName: string;
-		data: Array<T>;
-		columnDefWrapper: DefsWrapper<T>;
-		options: Pick<TableInitOptions<T, IdType>, 'selectionExtractor'> &
-			Partial<TableInitOptions<T, IdType>>;
-		oncontextmenu?: (e: MouseEvent) => void;
-		getUserId: () => string | undefined;
-	}
-</script>
-
-<script lang="ts" generics="T extends object,IdType extends Primitive">
-	const {
-		tableName,
-		data,
-		columnDefWrapper,
-		options,
-		oncontextmenu,
-		getUserId
-	}: NestedTableProps<T, IdType> = $props();
-
-	const wrapper = {
-		get value() {
-			return data;
-		}
-	};
-
-	let root: HTMLDivElement | undefined = $state();
-	const maxWidth: number | undefined = $derived(
-		root?.closest('.flex_table')?.getBoundingClientRect().width
-	);
-
-	// NOTE known limitation: These are passed as wrappers, and they should never require reassignment. They are deeply reactive
-	const dataRepo = $state(new LocalTableDataRepository(tableName, wrapper, () => getUserId()));
-
-	// NOTE known limitation: These are passed as wrappers, and they should never require reassignment. They are deeply reactive
-	const tableContext: TableContext<T, IdType> | undefined = $state(
-		TableContext.init<T, IdType>(columnDefWrapper, tableName, dataRepo, {
-			...defaultOptions,
-			...options,
-			getUserId: () => getUserId()
-		})
-	);
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class="limit-height"
-	bind:this={root}
-	style={maxWidth != null ? `max-width: ${maxWidth}px` : ''}
-	oncontextmenu={(e) => {
-		e.stopPropagation();
-		oncontextmenu?.(e);
-	}}
->
-	{#if tableContext}
-		<Table nested {tableContext} />
-	{/if}
-</div>
-
+<svelte:options runes />
+
+<script lang="ts" module>
+	import Table from './Table.svelte';
+	import type { DefsWrapper } from './Types/Columns/DefsWrapper.js';
+	import { TableContext } from './Types/Context/TableContext.svelte.js';
+	import type { Primitive, TableInitOptions } from './Types/Context/TableInitOptions.js';
+	import { LocalTableDataRepository } from './Types/DataRepository/LocalTableDataRepository.svelte.js';
+	import { ToolbarPosition } from './Types/Toolbar/ToolbarPosition.js';
+
+	const defaultOptions: Omit<
+		TableInitOptions<object, never>,
+		'selectionExtractor' | 'getUserId'
+	> = {
+		allowCopy: false,
+		enableResize: false,
+		allowColumnReordering: false,
+		allowQuickFiltering: true,
+		allowAdvancedFiltering: true,
+		toolbar: ToolbarPosition.None,
+		displayFooter: false
+	};
+
+	export interface NestedTableProps<T extends object, IdType extends Primitive> {
+		tableName: string;
+		data: Array<T>;
+		columnDefWrapper: DefsWrapper<T>;
+		options: Pick<TableInitOptions<T, IdType>, 'selectionExtractor'> &
+			Partial<TableInitOptions<T, IdType>>;
+		oncontextmenu?: (e: MouseEvent) => void;
+		getUserId: () => string | undefined;
+	}
+</script>
+
+<script lang="ts" generics="T extends object,IdType extends Primitive">
+	const {
+		tableName,
+		data,
+		columnDefWrapper,
+		options,
+		oncontextmenu,
+		getUserId
+	}: NestedTableProps<T, IdType> = $props();
+
+	const wrapper = {
+		get value() {
+			return data;
+		}
+	};
+
+	let root: HTMLDivElement | undefined = $state();
+	const maxWidth: number | undefined = $derived(
+		root?.closest('.flex_table')?.getBoundingClientRect().width
+	);
+
+	// NOTE known limitation: These are passed as wrappers, and they should never require reassignment. They are deeply reactive
+	const dataRepo = $state(new LocalTableDataRepository(tableName, wrapper, () => getUserId()));
+
+	// NOTE known limitation: These are passed as wrappers, and they should never require reassignment. They are deeply reactive
+	const tableContext: TableContext<T, IdType> | undefined = $state(
+		TableContext.init<T, IdType>(columnDefWrapper, tableName, dataRepo, {
+			...defaultOptions,
+			...options,
+			getUserId: () => getUserId()
+		})
+	);
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="limit-height"
+	bind:this={root}
+	style={maxWidth != null ? `max-width: ${maxWidth}px` : ''}
+	oncontextmenu={(e) => {
+		e.stopPropagation();
+		oncontextmenu?.(e);
+	}}
+>
+	{#if tableContext}
+		<Table nested {tableContext} />
+	{/if}
+</div>
+
 <style>.limit-height {
   box-shadow: inset 0px 7px 5px -6px #cbd4da, inset 0px -7px 5px -6px #cbd4da;
   position: relative;
@@ -89,4 +89,4 @@
   position: sticky;
   left: 0;
   z-index: 3;
-}</style>
+}</style>