@lavalogic/scoria 0.35.0 → 0.37.0

package/dist/Components/Table/Body/QuickSearchCell.svelte.d.ts

@@ -1,25 +1,26 @@
+import type { Primitive } from '../Types/Context/TableInitOptions.js';
 import type { QuickSearchCellProps } from './QuickSearchCellProps.js';
-declare function $$render<T extends object, FilterValueType>(): {
+declare function $$render<T extends object, IdType extends Primitive, FilterValueType>(): {
     props: QuickSearchCellProps<T, FilterValueType>;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends object, FilterValueType> {
-    props(): ReturnType<typeof $$render<T, FilterValueType>>['props'];
-    events(): ReturnType<typeof $$render<T, FilterValueType>>['events'];
-    slots(): ReturnType<typeof $$render<T, FilterValueType>>['slots'];
+declare class __sveltets_Render<T extends object, IdType extends Primitive, FilterValueType> {
+    props(): ReturnType<typeof $$render<T, IdType, FilterValueType>>['props'];
+    events(): ReturnType<typeof $$render<T, IdType, FilterValueType>>['events'];
+    slots(): ReturnType<typeof $$render<T, IdType, FilterValueType>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends object, FilterValueType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, FilterValueType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, FilterValueType>['props']>, ReturnType<__sveltets_Render<T, FilterValueType>['events']>, ReturnType<__sveltets_Render<T, FilterValueType>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T, FilterValueType>['bindings']>;
-    } & ReturnType<__sveltets_Render<T, FilterValueType>['exports']>;
-    <T extends object, FilterValueType>(internal: unknown, props: ReturnType<__sveltets_Render<T, FilterValueType>['props']> & {}): ReturnType<__sveltets_Render<T, FilterValueType>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+    new <T extends object, IdType extends Primitive, FilterValueType>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, IdType, FilterValueType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, IdType, FilterValueType>['props']>, ReturnType<__sveltets_Render<T, IdType, FilterValueType>['events']>, ReturnType<__sveltets_Render<T, IdType, FilterValueType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, IdType, FilterValueType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, IdType, FilterValueType>['exports']>;
+    <T extends object, IdType extends Primitive, FilterValueType>(internal: unknown, props: ReturnType<__sveltets_Render<T, IdType, FilterValueType>['props']> & {}): ReturnType<__sveltets_Render<T, IdType, FilterValueType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
 }
 declare const QuickSearchCell: $$IsomorphicComponent;
-type QuickSearchCell<T extends object, FilterValueType> = InstanceType<typeof QuickSearchCell<T, FilterValueType>>;
+type QuickSearchCell<T extends object, IdType extends Primitive, FilterValueType> = InstanceType<typeof QuickSearchCell<T, IdType, FilterValueType>>;
 export default QuickSearchCell;

package/dist/Components/Table/Body/QuickSearchCellProps.d.ts

@@ -1,6 +1,12 @@
 import type { Column } from '../Types/Columns/Column.js';
 import type { CustomRemoteFilters } from '../Types/Filtering/CustomRemoteFilters.js';
 export interface QuickSearchCellProps<T extends object, in FilterValueType> {
+    /** The column this cell renders an inline quick-filter input for. */
     column: Column<T, FilterValueType>;
+    /**
+     * Optional registry of remote-filter configurations (custom select / query
+     * filters) keyed by column id. Typed as `unknown` value because each
+     * configuration narrows its own filter value internally.
+     */
     customFilters?: CustomRemoteFilters<unknown> | undefined;
 }

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

@@ -1,33 +1,58 @@
-<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 {
+<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>
+
+<style>.focusable,
+.checkbox-cell,
+.input-cell,
+.select-cell,
+.datepicker-cell {
   transition: line-height 0.2s ease, height 0.2s ease;
   --input-border: none;
   --input-height: var(--height);
@@ -37,13 +62,22 @@
   position: relative;
   padding-left: 0.75rem;
   padding-right: 0.75rem;
-  border: solid 1px #cbd4da;
-  border-left: none;
+  border-right: solid 1px #cbd4da;
+  border-bottom: solid 1px #cbd4da;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--height);
 }
 
-td {
+.highlight-content {
   position: relative;
   padding: 0;
+  width: 100%;
+  height: 100%;
+  min-height: var(--height, 3rem);
+  box-sizing: border-box;
+  border-right: solid 1px #cbd4da;
+  border-bottom: solid 1px #cbd4da;
 }
 
 div.wrapper {
@@ -59,4 +93,4 @@ div.wrapper {
 
 .wrapper {
   overflow: hidden;
-}</style>
+}</style>

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

@@ -1,4 +1,26 @@
+import type { Primitive } from '../../Types/Context/TableInitOptions.js';
 import type { ColumnHighlightProps } from './ColumnHighlightProps.js';
-declare const ColumnHighlight: import("svelte").Component<ColumnHighlightProps, {}, "">;
-type ColumnHighlight = ReturnType<typeof ColumnHighlight>;
+declare function $$render<T extends object, IdType extends Primitive>(): {
+    props: ColumnHighlightProps;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends object, IdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, IdType>>['props'];
+    events(): ReturnType<typeof $$render<T, IdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, IdType>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends object, IdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, IdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, IdType>['props']>, ReturnType<__sveltets_Render<T, IdType>['events']>, ReturnType<__sveltets_Render<T, IdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, IdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    <T extends object, IdType extends Primitive>(internal: unknown, props: ReturnType<__sveltets_Render<T, IdType>['props']> & {}): ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
+}
+declare const ColumnHighlight: $$IsomorphicComponent;
+type ColumnHighlight<T extends object, IdType extends Primitive> = InstanceType<typeof ColumnHighlight<T, IdType>>;
 export default ColumnHighlight;

package/dist/Components/Table/Body/Rows/ColumnHighlightProps.d.ts

@@ -1,5 +1,8 @@
 export interface ColumnHighlightProps {
+    /** Visible position of the row this cell belongs to (zero-based). */
     rowIndex: number;
+    /** True when the row is currently marked as highlighted. */
     highlighted: boolean;
+    /** Caller-supplied toggle; wraps `tableContext.toggleHighlightedRow`. */
     toggleHighlightedRow: () => void;
 }

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

@@ -1,58 +1,61 @@
-<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, 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);
+		}
+	}
+</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;
@@ -65,4 +68,11 @@
   padding: 0.5rem;
   margin: 0;
   overflow: auto;
-}</style>
+}
+
+.empty-state {
+  padding: 0.5rem;
+  text-align: center;
+  color: #8096a5;
+  font-style: italic;
+}</style>

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

@@ -1,25 +1,26 @@
+import type { Primitive } from '../../Types/Context/TableInitOptions.js';
 import type { ColumnListProps } from './ColumnListProps.js';
-declare function $$render<T extends object>(): {
+declare function $$render<T extends object, IdType extends Primitive>(): {
     props: ColumnListProps;
     exports: {};
     bindings: "";
     slots: {};
     events: {};
 };
-declare class __sveltets_Render<T extends object> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
+declare class __sveltets_Render<T extends object, IdType extends Primitive> {
+    props(): ReturnType<typeof $$render<T, IdType>>['props'];
+    events(): ReturnType<typeof $$render<T, IdType>>['events'];
+    slots(): ReturnType<typeof $$render<T, IdType>>['slots'];
     bindings(): "";
     exports(): {};
 }
 interface $$IsomorphicComponent {
-    new <T extends object>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends object>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+    new <T extends object, IdType extends Primitive>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T, IdType>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T, IdType>['props']>, ReturnType<__sveltets_Render<T, IdType>['events']>, ReturnType<__sveltets_Render<T, IdType>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T, IdType>['bindings']>;
+    } & ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    <T extends object, IdType extends Primitive>(internal: unknown, props: ReturnType<__sveltets_Render<T, IdType>['props']> & {}): ReturnType<__sveltets_Render<T, IdType>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any>['bindings']>;
 }
 declare const ColumnList: $$IsomorphicComponent;
-type ColumnList<T extends object> = InstanceType<typeof ColumnList<T>>;
+type ColumnList<T extends object, IdType extends Primitive> = InstanceType<typeof ColumnList<T, IdType>>;
 export default ColumnList;

package/dist/Components/Table/Body/Rows/ColumnListProps.d.ts

@@ -1,3 +1,4 @@
 export interface ColumnListProps {
+    /** Lowercased substring filter applied to column id / header text. */
     searchValue: string;
 }