@lavalogic/scoria 0.40.14 → 0.40.16

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

@@ -1,53 +1,44 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
->
-	import Action from '../../../Action.svelte';
-	import { Colour } from '../../../../scss/colours.js';
-	import { Size } from '../../../../Types/Internal/Size.js';
-	import { getContext } from 'svelte';
-	import { TableContext } from '../../Types/Context/TableContext.svelte.js';
-	import type { Primitive } from '../../Types/Context/TableInitOptions.js';
-	import type { ColumnHighlightProps } from './ColumnHighlightProps.js';
-
-	const { rowIndex, highlighted, toggleHighlightedRow }: ColumnHighlightProps = $props();
-
-	const tableContext = getContext<TableContext<T, IdType>>(TableContext.identifier);
-
-	const backgroundColour = $derived(highlighted ? Colour['$brand-primary'] : Colour['$ui-white']);
-
-	// Cell id is prefixed with the owning table name to avoid duplicate `id`
-	// attributes when multiple tables share the page (workorder P2).
-	const cellId = $derived(`${tableContext.tableName}-tagger-row-${rowIndex}`);
-	const label = $derived(
-		`${highlighted ? 'Unhighlight' : 'Highlight'} row ${(rowIndex + 1).toString()}`
-	);
-</script>
-
-<!-- Toggle semantics: `aria-pressed` is communicated through the Action's label
-which reads either "Highlight row N" or "Unhighlight row N" depending on state. -->
-<div
-	id={cellId}
-	class="highlight-content"
->
-	<div class="wrapper">
-		<Action
-			{backgroundColour}
-			hoverBackgroundColour={Colour['$brand-dark']}
-			size={Size.FillWidth}
-			{label}
-			icon={{
-				name: 'nothing',
-			}}
-			onclick={() => {
-				toggleHighlightedRow();
-			}}
-		/>
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>import Action from "../../../Action.svelte";
+import { Colour } from "../../../../scss/colours.js";
+import { Size } from "../../../../Types/Internal/Size.js";
+import { getContext } from "svelte";
+import { TableContext } from "../../Types/Context/TableContext.svelte.js";
+const { rowIndex, highlighted, toggleHighlightedRow } = $props();
+const tableContext = getContext(TableContext.identifier);
+const backgroundColour = $derived(highlighted ? Colour["$brand-primary"] : Colour["$ui-white"]);
+// Cell id is prefixed with the owning table name to avoid duplicate `id`
+// attributes when multiple tables share the page (workorder P2).
+const cellId = $derived(`${tableContext.tableName}-tagger-row-${rowIndex}`);
+const label = $derived(`${highlighted ? "Unhighlight" : "Highlight"} row ${(rowIndex + 1).toString()}`);
+</script>
+
+<!-- Toggle semantics: `aria-pressed` is communicated through the Action's label
+which reads either "Highlight row N" or "Unhighlight row N" depending on state. -->
+<div
+	id={cellId}
+	class="highlight-content"
+>
+	<div class="wrapper">
+		<Action
+			{backgroundColour}
+			hoverBackgroundColour={Colour['$brand-dark']}
+			size={Size.FillWidth}
+			{label}
+			icon={{
+				name: 'nothing',
+			}}
+			onclick={() => {
+				toggleHighlightedRow();
+			}}
+		/>
+	</div>
+</div>
+
 <style>.focusable,
 .checkbox-cell,
 .input-cell,
@@ -94,4 +85,4 @@ div.wrapper {
 
 .wrapper {
   overflow: hidden;
-}</style>
+}</style>

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

@@ -1,61 +1,45 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	generics="T extends object, IdType extends Primitive"
->
-	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 type { Primitive } from '../../Types/Context/TableInitOptions.js';
-	import { getContext } from 'svelte';
-	import type { ColumnListProps } from './ColumnListProps.js';
-	import ColumnListRow from './ColumnListRow.svelte';
-
-	const tableContext = getContext<TableContext<T, IdType>>(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);
-		}
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="T extends object, IdType extends Primitive"
+>import { ColumnType } from "../../Types/Columns/ColumnType.js";
+import { TableContext } from "../../Types/Context/TableContext.svelte.js";
+import { getContext } from "svelte";
+import ColumnListRow from "./ColumnListRow.svelte";
+const tableContext = getContext(TableContext.identifier);
+const { searchValue } = $props();
+const visibleColumns = $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) {
+	if (!tableContext.dragTarget) {
+		return;
 	}
-</script>
-
-<ul
-	class="column-list"
-	ondrop={onDrop}
->
-	<!-- HACK this is used as an anchor for dragging rows to the top -->
-	<ColumnListRow columnDef={null} />
-
-	{#each visibleColumns as columnDef (columnDef.id)}
-		<ColumnListRow {columnDef} />
-	{:else}
-		{#if searchValue.length > 0}
-			<li class="empty-state">No columns match &ldquo;{searchValue}&rdquo;</li>
-		{/if}
-	{/each}
-</ul>
-
+	const dropTarget = e.target?.closest("li");
+	if (dropTarget) {
+		tableContext.reorderColumn(dropTarget);
+	}
+}
+</script>
+
+<ul
+	class="column-list"
+	ondrop={onDrop}
+>
+	<!-- HACK this is used as an anchor for dragging rows to the top -->
+	<ColumnListRow columnDef={null} />
+
+	{#each visibleColumns as columnDef (columnDef.id)}
+		<ColumnListRow {columnDef} />
+	{:else}
+		{#if searchValue.length > 0}
+			<li class="empty-state">No columns match &ldquo;{searchValue}&rdquo;</li>
+		{/if}
+	{/each}
+</ul>
+
 <style>ul {
   list-style: none;
   background-color: #ffffff;
@@ -75,4 +59,4 @@
   text-align: center;
   color: #8096a5;
   font-style: italic;
-}</style>
+}</style>