@lavalogic/scoria 0.40.33 → 0.40.34

package/dist/Components/Table/Misc/UpdateViewOptionsModal.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 DesktopModal from "../../DesktopModal.svelte";
 import Icon from "../../Icon.svelte";
 import InfoAlert from "../../InfoAlert.svelte";
@@ -76,101 +76,101 @@ async function save() {
 		saving = false;
 	}
 }
-</script>
-
-<DesktopModal
-	headerLabel={i18n['scoria.label.update_options_header']({ name: view.name })}
-	headerSubtitle={view.kind === 'filter'
-		? i18n['scoria.text.update_filter_subtitle']()
-		: i18n['scoria.text.update_layout_subtitle']()}
-	onclose={() => {
-		if (!saving) {
-			onclose();
-		}
-	}}
-	width={cssLength('40vw')}
-	minWidth={cssLength('32rem')}
-	buttons={[
-		{
-			label: i18n['scoria.action.cancel'](),
-			callback: () => {
-				if (!saving) {
-					onclose();
-				}
-			},
-			disabled: saving,
-		},
-		{
-			label: saving ? i18n['scoria.action.saving']() : i18n['scoria.action.save'](),
-			callback: () => {
-				void save();
-			},
-			colourSet: ColourSet.Primary,
-			disabled: saving || !dirty || !isValidName,
-		},
-	]}
->
-	<div class="options-body">
-		{#if errorMessage}
-			<div
-				class="error-banner"
-				role="alert"
-			>
-				<Icon
-					name="circle-exclamation"
-					size={Size.Small}
-				/>
-				<span>{errorMessage}</span>
-			</div>
-		{/if}
-
-		<InfoAlert>
-			{view.kind === 'filter'
-				? i18n['scoria.text.changes_apply_filter']()
-				: i18n['scoria.text.changes_apply_layout']()}
-		</InfoAlert>
-
-		<div class="field">
-			<label
-				class="field-label"
-				for="update-view-name">{i18n['scoria.label.name']()}</label
-			>
-			<TextInput
-				id="update-view-name"
-				bind:value={name}
-				placeholder={view.kind === 'filter'
-					? i18n['scoria.label.filter_name_placeholder']()
-					: i18n['scoria.label.layout_name_placeholder']()}
-				required
-				invalid={!isValidName}
-			/>
-		</div>
-
-		<div class="field">
-			<label
-				class="field-label"
-				for="update-view-visibility">{i18n['scoria.label.visibility']()}</label
-			>
-			<SingleSelect
-				inputId="update-view-visibility"
-				name="Visibility"
-				placeholder={i18n['scoria.label.select_visibility']()}
-				options={visibilityOptions}
-				labelProp="label"
-				valueProp="value"
-				value={selectedVisibility}
-				valueAsObject
-				searchable={false}
-				onchange={(option: SelectOption<DatatableViewVisibility> | null) => {
-					if (option) {
-						visibility = option.value;
-					}
-				}}
-			/>
-		</div>
-	</div>
-</DesktopModal>
-
+</script>
+
+<DesktopModal
+	headerLabel={i18n['scoria.label.update_options_header']({ name: view.name })}
+	headerSubtitle={view.kind === 'filter'
+		? i18n['scoria.text.update_filter_subtitle']()
+		: i18n['scoria.text.update_layout_subtitle']()}
+	onclose={() => {
+		if (!saving) {
+			onclose();
+		}
+	}}
+	width={cssLength('40vw')}
+	minWidth={cssLength('32rem')}
+	buttons={[
+		{
+			label: i18n['scoria.action.cancel'](),
+			callback: () => {
+				if (!saving) {
+					onclose();
+				}
+			},
+			disabled: saving,
+		},
+		{
+			label: saving ? i18n['scoria.action.saving']() : i18n['scoria.action.save'](),
+			callback: () => {
+				void save();
+			},
+			colourSet: ColourSet.Primary,
+			disabled: saving || !dirty || !isValidName,
+		},
+	]}
+>
+	<div class="options-body">
+		{#if errorMessage}
+			<div
+				class="error-banner"
+				role="alert"
+			>
+				<Icon
+					name="circle-exclamation"
+					size={Size.Small}
+				/>
+				<span>{errorMessage}</span>
+			</div>
+		{/if}
+
+		<InfoAlert>
+			{view.kind === 'filter'
+				? i18n['scoria.text.changes_apply_filter']()
+				: i18n['scoria.text.changes_apply_layout']()}
+		</InfoAlert>
+
+		<div class="field">
+			<label
+				class="field-label"
+				for="update-view-name">{i18n['scoria.label.name']()}</label
+			>
+			<TextInput
+				id="update-view-name"
+				bind:value={name}
+				placeholder={view.kind === 'filter'
+					? i18n['scoria.label.filter_name_placeholder']()
+					: i18n['scoria.label.layout_name_placeholder']()}
+				required
+				invalid={!isValidName}
+			/>
+		</div>
+
+		<div class="field">
+			<label
+				class="field-label"
+				for="update-view-visibility">{i18n['scoria.label.visibility']()}</label
+			>
+			<SingleSelect
+				inputId="update-view-visibility"
+				name="Visibility"
+				placeholder={i18n['scoria.label.select_visibility']()}
+				options={visibilityOptions}
+				labelProp="label"
+				valueProp="value"
+				value={selectedVisibility}
+				valueAsObject
+				searchable={false}
+				onchange={(option: SelectOption<DatatableViewVisibility> | null) => {
+					if (option) {
+						visibility = option.value;
+					}
+				}}
+			/>
+		</div>
+	</div>
+</DesktopModal>
+
 <style>.options-body {
   display: flex;
   flex-flow: column nowrap;
@@ -204,4 +204,4 @@ async function save() {
   font-size: 1.125rem;
   font-weight: 600;
   color: #3a4952;
-}</style>
+}</style>

package/dist/Components/Table/NestedTable.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
 >import Table from "./Table.svelte";
 import { TableContext } from "./Types/Context/TableContext.svelte.js";
 import { LocalTableDataRepository } from "./Types/DataRepository/LocalTableDataRepository.svelte.js";
@@ -31,11 +31,11 @@ const DEFAULT_NESTED_TABLE_OPTIONS = Object.freeze({
 	toolbar: ToolbarPosition.None,
 	displayFooter: false
 });
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object,IdType extends Primitive"
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object,IdType extends Primitive"
 >const { tableName, data, columnDefWrapper, options, oncontextmenu, getUserId } = $props();
 // Reactive wrapper exposing the `data` prop as `.value` so the
 // underlying LocalTableDataRepository can read it through its
@@ -87,24 +87,24 @@ const tableContext = TableContext.init(columnDefWrapper, tableName, dataRepo, {
 	...options,
 	getUserId: () => getUserId()
 });
-</script>
-
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<div
-	class="limit-height"
-	bind:this={root}
-	style:width={maxWidth != null ? `${maxWidth}px` : null}
-	oncontextmenu={(e) => {
-		e.stopPropagation();
-		oncontextmenu?.(e);
-	}}
->
-	<Table
-		nested
-		{tableContext}
-	/>
-</div>
-
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div
+	class="limit-height"
+	bind:this={root}
+	style:width={maxWidth != null ? `${maxWidth}px` : null}
+	oncontextmenu={(e) => {
+		e.stopPropagation();
+		oncontextmenu?.(e);
+	}}
+>
+	<Table
+		nested
+		{tableContext}
+	/>
+</div>
+
 <style>.limit-height {
   position: sticky;
   left: 0;
@@ -113,4 +113,4 @@ const tableContext = TableContext.init(columnDefWrapper, tableName, dataRepo, {
   box-sizing: border-box;
   background-color: #f4f7f9;
   box-shadow: inset 0px 7px 5px -6px #cbd4da, inset 0px -7px 5px -6px #cbd4da;
-}</style>
+}</style>

package/dist/Components/Table/Table.svelte

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
 >import { m as i18n } from "../../paraglide/messages.js";
 import { ContextMenuContext } from "../../Contexts/ContextMenuContext.svelte";
 import { cssLength, devCatch, refWrapper } from "../../Helpers/Helpers.svelte";
@@ -24,11 +24,11 @@ import { ToolbarPosition } from "./Types/Toolbar/ToolbarPosition.js";
 */
 export const quickFilterContextIdentifier = Symbol();
 const openedQuickFilterSelect = refWrapper(null);
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object,IdType extends Primitive"
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object,IdType extends Primitive"
 >const { nested = false, table, tableContext: tableContextProp } = $props();
 // Resolve the underlying TableContext from whichever prop was passed:
 // consumers pass `table`; internal `NestedTable` passes `tableContext`
@@ -429,135 +429,135 @@ $effect(() => {
 		stickyRo?.disconnect();
 	};
 });
-</script>
-
-<svelte:window
-	onmouseup={(e: MouseEvent) => {
-		if (
-			// if it's not a click on an item in the context menu
-			!(e.target as HTMLElement | undefined)?.classList.contains('context-menu-item') &&
-			// if it's outside the table or inside the empty space of the table
-			(e.target === unfocusRef ||
-				((e.target as HTMLElement | undefined)?.closest('.table-wrapper') == null &&
-					mousedDownEmptySpace))
-		) {
-			tableContext.unfocus();
-		}
-		mousedDownEmptySpace = false;
-
-		if (tableContext.isMousingDown) {
-			tableContext.isMousingDown = false;
-		}
-
-		removeOverrideResizeHandler();
-	}}
-	onclick={(e: MouseEvent) => {
-		handleClickOutside(e);
-	}}
-	onmousedown={(e: MouseEvent) => {
-		mousedDownEmptySpace =
-			e.target === unfocusRef || (e.target as HTMLElement).closest('.table-wrapper') == null;
-	}}
-/>
-
-<div
-	class="grid"
-	class:nested
-	style="--show-top-shadow: {hasScrolledPastHeader
-		? 1
-		: 0}; --show-bottom-shadow: {hasContentBelowFooter ? 1 : 0};"
->
-	{#if tableContext.dataRepo.isLoading}
-		<LoadingOverlay
-			absolute
-			borderRadius={cssLength('4px')}
-			message={tableContext.dataRepo.loadingMessage}
-		/>
-	{/if}
-
-	<div
-		class="horizontal-bar"
-		class:border={tableContext.toolbarPosition === ToolbarPosition.Top}
-	>
-		{#if tableContext.toolbarPosition === ToolbarPosition.Top}
-			<TableHorizontalBar />
-		{/if}
-	</div>
-
-	<div
-		class="sidebar-wrapper sidebar-wrapper-left"
-		class:nested
-		style="--nested-height: {nestedHeight}px;"
-	>
-		{#if tableContext.toolbarPosition === ToolbarPosition.Left}
-			<div class="sidebar toolbar-left">
-				<TableSidebar />
-			</div>
-		{/if}
-	</div>
-	<div
-		class="sidebar-wrapper sidebar-wrapper-right"
-		class:nested
-		style="--nested-height: {nestedHeight}px;"
-	>
-		{#if tableContext.toolbarPosition === ToolbarPosition.Right}
-			<div class="sidebar toolbar-right">
-				<TableSidebar />
-			</div>
-		{/if}
-	</div>
-
-	<div class="footer">
-		{#if tableContext.displayFooter}
-			<TableFooter />
-		{/if}
-	</div>
-
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div
-		bind:this={tableRef}
-		class="datatable"
-		class:nested
-		class:compact={tableContext.isCompact}
-		class:quick-filtering={tableContext.showQuickFiltering}
-		onkeydown={tableContext.handleTdKeydown}
-		style="--pinned-start: {totalPinnedLeftWidth}px; --pinned-end: {totalPinnedRightWidth}px; --sticky-top-height: {stickyTopHeight}px;"
-	>
-		<div
-			class="flex_table"
-			bind:this={ref}
-			class:nested
-		>
-			<div
-				bind:this={unfocusRef}
-				class="table-wrapper"
-				oncontextmenu={openContextMenu}
-			>
-				<div
-					role="table"
-					class="datatable-grid"
-					style="--cols: {colsTemplate};"
-				>
-					<TableHead />
-					<TableBody />
-				</div>
-			</div>
-		</div>
-
-		{#if nested}
-			<!-- svelte-ignore a11y_no_static_element_interactions -->
-			<div
-				class:isResizing
-				class="resizer"
-				onmousedown={(e) => {
-					e.preventDefault();
-					addOverrideResizeHandler();
-				}}
-			></div>
-		{/if}
-	</div>
-</div>
-
+</script>
+
+<svelte:window
+	onmouseup={(e: MouseEvent) => {
+		if (
+			// if it's not a click on an item in the context menu
+			!(e.target as HTMLElement | undefined)?.classList.contains('context-menu-item') &&
+			// if it's outside the table or inside the empty space of the table
+			(e.target === unfocusRef ||
+				((e.target as HTMLElement | undefined)?.closest('.table-wrapper') == null &&
+					mousedDownEmptySpace))
+		) {
+			tableContext.unfocus();
+		}
+		mousedDownEmptySpace = false;
+
+		if (tableContext.isMousingDown) {
+			tableContext.isMousingDown = false;
+		}
+
+		removeOverrideResizeHandler();
+	}}
+	onclick={(e: MouseEvent) => {
+		handleClickOutside(e);
+	}}
+	onmousedown={(e: MouseEvent) => {
+		mousedDownEmptySpace =
+			e.target === unfocusRef || (e.target as HTMLElement).closest('.table-wrapper') == null;
+	}}
+/>
+
+<div
+	class="grid"
+	class:nested
+	style="--show-top-shadow: {hasScrolledPastHeader
+		? 1
+		: 0}; --show-bottom-shadow: {hasContentBelowFooter ? 1 : 0};"
+>
+	{#if tableContext.dataRepo.isLoading}
+		<LoadingOverlay
+			absolute
+			borderRadius={cssLength('4px')}
+			message={tableContext.dataRepo.loadingMessage}
+		/>
+	{/if}
+
+	<div
+		class="horizontal-bar"
+		class:border={tableContext.toolbarPosition === ToolbarPosition.Top}
+	>
+		{#if tableContext.toolbarPosition === ToolbarPosition.Top}
+			<TableHorizontalBar />
+		{/if}
+	</div>
+
+	<div
+		class="sidebar-wrapper sidebar-wrapper-left"
+		class:nested
+		style="--nested-height: {nestedHeight}px;"
+	>
+		{#if tableContext.toolbarPosition === ToolbarPosition.Left}
+			<div class="sidebar toolbar-left">
+				<TableSidebar />
+			</div>
+		{/if}
+	</div>
+	<div
+		class="sidebar-wrapper sidebar-wrapper-right"
+		class:nested
+		style="--nested-height: {nestedHeight}px;"
+	>
+		{#if tableContext.toolbarPosition === ToolbarPosition.Right}
+			<div class="sidebar toolbar-right">
+				<TableSidebar />
+			</div>
+		{/if}
+	</div>
+
+	<div class="footer">
+		{#if tableContext.displayFooter}
+			<TableFooter />
+		{/if}
+	</div>
+
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<div
+		bind:this={tableRef}
+		class="datatable"
+		class:nested
+		class:compact={tableContext.isCompact}
+		class:quick-filtering={tableContext.showQuickFiltering}
+		onkeydown={tableContext.handleTdKeydown}
+		style="--pinned-start: {totalPinnedLeftWidth}px; --pinned-end: {totalPinnedRightWidth}px; --sticky-top-height: {stickyTopHeight}px;"
+	>
+		<div
+			class="flex_table"
+			bind:this={ref}
+			class:nested
+		>
+			<div
+				bind:this={unfocusRef}
+				class="table-wrapper"
+				oncontextmenu={openContextMenu}
+			>
+				<div
+					role="table"
+					class="datatable-grid"
+					style="--cols: {colsTemplate};"
+				>
+					<TableHead />
+					<TableBody />
+				</div>
+			</div>
+		</div>
+
+		{#if nested}
+			<!-- svelte-ignore a11y_no_static_element_interactions -->
+			<div
+				class:isResizing
+				class="resizer"
+				onmousedown={(e) => {
+					e.preventDefault();
+					addOverrideResizeHandler();
+				}}
+			></div>
+		{/if}
+	</div>
+</div>
+
 <style>div.grid {
   border-radius: 4px;
   display: grid;
@@ -709,4 +709,4 @@ div.sidebar-wrapper .sidebar.toolbar-right {
   text-align: start;
   min-width: max-content;
   isolation: isolate;
-}</style>
+}</style>

package/dist/Components/Test/TestContextConsumer.svelte

@@ -1,11 +1,11 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { TestContext } from "../../Contexts/TestContext.svelte.js";
 import { getContext } from "svelte";
 const testContext = getContext(TestContext.identifier);
-</script>
-
-<h1>counter 1: {testContext.value1.value}</h1>
-<p>Ref wrapper 1 is incremented every time you click the button</p>
-<h2>counter 2: {testContext.value2.value}</h2>
-<p>ref wrapper 2 adds ref wrapper 1's value every time ref wrapper 1's value is divisible by 3</p>
+</script>
+
+<h1>counter 1: {testContext.value1.value}</h1>
+<p>Ref wrapper 1 is incremented every time you click the button</p>
+<h2>counter 2: {testContext.value2.value}</h2>
+<p>ref wrapper 2 adds ref wrapper 1's value every time ref wrapper 1's value is divisible by 3</p>