@lavalogic/scoria 0.40.33 → 0.40.34

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

@@ -1,8 +1,8 @@
-<svelte:options runes />
-
-<script
-	module
-	lang="ts"
+<svelte:options runes />
+
+<script
+	module
+	lang="ts"
 >import Icon from "../../Icon.svelte";
 import { m as i18n } from "../../../paraglide/messages.js";
 import { TooltipContext } from "../../../Contexts/TooltipContext.svelte.js";
@@ -50,11 +50,11 @@ function debouncedSortToggle(columnRef, handler) {
 		}
 	}, SORT_DEBOUNCE_MS);
 }
-</script>
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
+</script>
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
 >const { oncontextmenu } = $props();
 const tableContext = getContext(TableContext.identifier);
 const tooltipContext = getContext(TooltipContext.identifier);
@@ -195,170 +195,170 @@ function setDragTarget(def) {
 	tableContext.dragTarget = def;
 }
 const currentDropTargetId = $derived(currentDropTarget?.closest("[role=\"columnheader\"]")?.id);
-</script>
-
-<div
-	role="rowgroup"
-	class="datatable-header"
-	{oncontextmenu}
->
-	<div
-		role="row"
-		class="datatable-row header-row"
-	>
-		{#if showHighlightColumn}
-			<div
-				role="columnheader"
-				id="highlight-header"
-				class="cell header highlight-column pinned-left"
-				style="left: 0px"
-			>
-				<div class="th">
-					<HighlightAllHeader />
-				</div>
-			</div>
-		{/if}
-
-		{#each leftHeaders as header, index (header.id)}
-			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-			{@render headerCell(header, 'left', leftOffsets[index])}
-		{/each}
-		{#each centreHeaders as header (header.id)}
-			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-			{@render headerCell(header, undefined, 0)}
-		{/each}
-		{#each rightHeaders as header, index (header.id)}
-			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
-			{@render headerCell(header, 'right', rightOffsets[index])}
-		{/each}
-	</div>
-</div>
-
-{#snippet headerCell(header: AnyHeader<T>, side: 'left' | 'right' | undefined, offset: number)}
-	{@const headerId = `${tableContext.tableName}-header-${header.id}`}
-	<!-- svelte-ignore a11y_interactive_supports_focus -->
-	<div
-		role="columnheader"
-		id={headerId}
-		{@attach (node: HTMLElement) => observeHeader(node, header.column.id)}
-		draggable={tableContext.allowColumnReordering}
-		class="cell header"
-		class:pinned-left={side === 'left'}
-		class:pinned-right={side === 'right'}
-		class:action-column={!header.column.getCanSort()}
-		class:targeted={currentDropTargetId === headerId}
-		style:left={side === 'left' ? `${offset}px` : null}
-		style:right={side === 'right' ? `${offset}px` : null}
-		aria-sort={header.column.getCanSort() ? ariaSort(header.column.getIsSorted()) : undefined}
-		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-inline-end">
-				{#if header.column.getCanSort()}
-					<button
-						onmouseenter={(e) => {
-							showtooltip(e, header.column.columnDef);
-						}}
-						onmouseleave={() => {
-							hideTooltip(header.column.columnDef);
-						}}
-						class="contents"
-						onclick={() => debouncedSortToggle(header.column, 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={() => {
-							// Reset the column to its factory-default width and
-							// clear the user-resized flag so the grid track
-							// returns to its original `minmax(W, 1fr)` or
-							// fixed-`${W}px` branch.
-							header.column.columnDef.resetWidth();
-						}}
-						class="resizer right"
-						class:isResizing={header.column.getIsResizing()}
-					></div>
-				{/if}
-			</div>
-		{/if}
-	</div>
-{/snippet}
-
+</script>
+
+<div
+	role="rowgroup"
+	class="datatable-header"
+	{oncontextmenu}
+>
+	<div
+		role="row"
+		class="datatable-row header-row"
+	>
+		{#if showHighlightColumn}
+			<div
+				role="columnheader"
+				id="highlight-header"
+				class="cell header highlight-column pinned-left"
+				style="left: 0px"
+			>
+				<div class="th">
+					<HighlightAllHeader />
+				</div>
+			</div>
+		{/if}
+
+		{#each leftHeaders as header, index (header.id)}
+			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+			{@render headerCell(header, 'left', leftOffsets[index])}
+		{/each}
+		{#each centreHeaders as header (header.id)}
+			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+			{@render headerCell(header, undefined, 0)}
+		{/each}
+		{#each rightHeaders as header, index (header.id)}
+			<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+			{@render headerCell(header, 'right', rightOffsets[index])}
+		{/each}
+	</div>
+</div>
+
+{#snippet headerCell(header: AnyHeader<T>, side: 'left' | 'right' | undefined, offset: number)}
+	{@const headerId = `${tableContext.tableName}-header-${header.id}`}
+	<!-- svelte-ignore a11y_interactive_supports_focus -->
+	<div
+		role="columnheader"
+		id={headerId}
+		{@attach (node: HTMLElement) => observeHeader(node, header.column.id)}
+		draggable={tableContext.allowColumnReordering}
+		class="cell header"
+		class:pinned-left={side === 'left'}
+		class:pinned-right={side === 'right'}
+		class:action-column={!header.column.getCanSort()}
+		class:targeted={currentDropTargetId === headerId}
+		style:left={side === 'left' ? `${offset}px` : null}
+		style:right={side === 'right' ? `${offset}px` : null}
+		aria-sort={header.column.getCanSort() ? ariaSort(header.column.getIsSorted()) : undefined}
+		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-inline-end">
+				{#if header.column.getCanSort()}
+					<button
+						onmouseenter={(e) => {
+							showtooltip(e, header.column.columnDef);
+						}}
+						onmouseleave={() => {
+							hideTooltip(header.column.columnDef);
+						}}
+						class="contents"
+						onclick={() => debouncedSortToggle(header.column, 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={() => {
+							// Reset the column to its factory-default width and
+							// clear the user-resized flag so the grid track
+							// returns to its original `minmax(W, 1fr)` or
+							// fixed-`${W}px` branch.
+							header.column.columnDef.resetWidth();
+						}}
+						class="resizer right"
+						class:isResizing={header.column.getIsResizing()}
+					></div>
+				{/if}
+			</div>
+		{/if}
+	</div>
+{/snippet}
+
 <style>.cell.header {
   position: relative;
   min-width: 0;
@@ -509,4 +509,4 @@ div.th::after {
   width: 20px;
   overflow: hidden;
   border-inline-end: solid 1px #cbd4da;
-}</style>
+}</style>

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

@@ -1,40 +1,40 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { m as i18n } from "../../../paraglide/messages.js";
 import ColumnList from "../Body/Rows/ColumnList.svelte";
 import TextInput from "../../TextInput.svelte";
 import { Size } from "../../../Types/Internal/Size.js";
 import TableViewDropdown from "./TableViewDropdown.svelte";
 let searchValue = $state("");
-</script>
-
-<section class="side-panel-section">
-	<header class="side-panel-header">
-		<h2>{i18n['scoria.action.modify_columns']()}</h2>
-	</header>
-
-	<div class="toolbar">
-		<!-- Quick-switch dropdown for saved column layouts. Sits above the
-		     search box; saving a layout is done from the Table
-		     Configuration modal's "Save a new Layout" tab. -->
-		<TableViewDropdown kind="layout" />
-		<TextInput
-			bind:value={searchValue}
-			leftIcon={{ name: 'search', size: Size.Medium }}
-			placeholder={i18n['scoria.label.search_columns']()}
-			onkeydown={() => {
-				// Override the TextInput default `passthrough` keydown so the
-				// input does not blur on every alphanumeric keystroke (which
-				// is the barcode-scanner default; see `Helpers.svelte.ts`).
-			}}
-		/>
-	</div>
-
-	<div class="column-list-wrapper">
-		<ColumnList {searchValue} />
-	</div>
-</section>
-
+</script>
+
+<section class="side-panel-section">
+	<header class="side-panel-header">
+		<h2>{i18n['scoria.action.modify_columns']()}</h2>
+	</header>
+
+	<div class="toolbar">
+		<!-- Quick-switch dropdown for saved column layouts. Sits above the
+		     search box; saving a layout is done from the Table
+		     Configuration modal's "Save a new Layout" tab. -->
+		<TableViewDropdown kind="layout" />
+		<TextInput
+			bind:value={searchValue}
+			leftIcon={{ name: 'search', size: Size.Medium }}
+			placeholder={i18n['scoria.label.search_columns']()}
+			onkeydown={() => {
+				// Override the TextInput default `passthrough` keydown so the
+				// input does not blur on every alphanumeric keystroke (which
+				// is the barcode-scanner default; see `Helpers.svelte.ts`).
+			}}
+		/>
+	</div>
+
+	<div class="column-list-wrapper">
+		<ColumnList {searchValue} />
+	</div>
+</section>
+
 <style>.side-panel-section {
   display: flex;
   flex-flow: column nowrap;
@@ -117,4 +117,4 @@ let searchValue = $state("");
      the toolbar above and the footer below). */
   padding: 0 1.25rem;
   box-sizing: border-box;
-}</style>
+}</style>

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

@@ -1,5 +1,5 @@
-<svelte:options runes />
-
+<svelte:options runes />
+
 <script lang="ts">import { m as i18n } from "../../../paraglide/messages.js";
 import DesktopModal from "../../DesktopModal.svelte";
 import ColumnList from "../Body/Rows/ColumnList.svelte";
@@ -7,32 +7,32 @@ import TextInput from "../../TextInput.svelte";
 import { Size } from "../../../Types/Internal/Size.js";
 const { onclose } = $props();
 let searchValue = $state("");
-</script>
-
-<DesktopModal
-	headerLabel={i18n['scoria.action.modify_columns']()}
-	onclose={() => onclose?.()}
-	buttons={[{ label: i18n['scoria.action.close'](), callback: () => onclose?.() }]}
->
-	<div class="flex">
-		<div class="column-panel top">
-			<TextInput
-				bind:value={searchValue}
-				leftIcon={{ name: 'search', size: Size.Medium }}
-				placeholder={i18n['scoria.label.search_columns']()}
-				onkeydown={() => {
-					// Override the TextInput default `passthrough` keydown so
-					// the input does not blur on every alphanumeric keystroke
-					// (the barcode-scanner default; see `Helpers.svelte.ts`).
-				}}
-			/>
-		</div>
-		<div class="scrollable">
-			<ColumnList {searchValue} />
-		</div>
-	</div>
-</DesktopModal>
-
+</script>
+
+<DesktopModal
+	headerLabel={i18n['scoria.action.modify_columns']()}
+	onclose={() => onclose?.()}
+	buttons={[{ label: i18n['scoria.action.close'](), callback: () => onclose?.() }]}
+>
+	<div class="flex">
+		<div class="column-panel top">
+			<TextInput
+				bind:value={searchValue}
+				leftIcon={{ name: 'search', size: Size.Medium }}
+				placeholder={i18n['scoria.label.search_columns']()}
+				onkeydown={() => {
+					// Override the TextInput default `passthrough` keydown so
+					// the input does not blur on every alphanumeric keystroke
+					// (the barcode-scanner default; see `Helpers.svelte.ts`).
+				}}
+			/>
+		</div>
+		<div class="scrollable">
+			<ColumnList {searchValue} />
+		</div>
+	</div>
+</DesktopModal>
+
 <style>.flex {
   display: flex;
   flex-flow: column nowrap;
@@ -57,4 +57,4 @@ let searchValue = $state("");
   row-gap: 0.5rem;
   padding: 0.5rem;
   flex-basis: min-content;
-}</style>
+}</style>