@lavalogic/scoria 0.40.3 → 0.40.5

package/dist/Components/Contexts/Tooltip.svelte

@@ -49,6 +49,8 @@ set it up at the app root.
   border-radius: 4px;
   font-weight: 500;
   white-space: pre-wrap;
+  max-width: min(28rem, 90vw);
+  overflow-wrap: anywhere;
 }
 .tooltip-wrapper.top-arrow {
   left: var(--x, 0);

package/dist/Components/HorizontalTabGroup.svelte

@@ -9,7 +9,7 @@
 	import HorizontalTabGroupButton from './HorizontalTabGroupButton.svelte';
 	import type { HorizontalTabGroupProps } from './HorizontalTabGroupProps.js';
 	import TextInput from './TextInput.svelte';
-	const {
+	let {
 		tabComponent,
 		tabs,
 		selected,
@@ -18,10 +18,11 @@
 		dense = false,
 		filterable = false,
 		filterFn,
+		searchValue = $bindable(''),
+		searchInfo,
+		searchPlaceholder,
 	}: HorizontalTabGroupProps<CommonDenominator> = $props();
 
-	let searchValue = $state('');
-
 	// Debounce only the search value, not the tabs array. This way a parent
 	// rebuilding `tabs` shows the new list immediately, while typing still
 	// pays the 300ms cost.
@@ -51,9 +52,15 @@
 				<div class="searchbar">
 					<TextInput
 						bind:value={searchValue}
-						placeholder="Search any keyword to find matches{ellipses}"
+						placeholder={searchPlaceholder ?? `Search any keyword to find matches${ellipses}`}
 						rightIcon={{ name: 'search-1', colour: Colour['$ui-blue-4'] }}
 					/>
+					{#if searchInfo}
+						<span class="search-info">
+							<!-- eslint-disable-next-line @typescript-eslint/no-confusing-void-expression -->
+							{@render searchInfo()}
+						</span>
+					{/if}
 				</div>
 			{/if}
 		</div>
@@ -81,11 +88,24 @@
 
 <style>.searchbar {
   display: flex;
+  flex-flow: row nowrap;
+  align-items: center;
+  gap: 0.5rem;
   width: 100%;
   padding: 0.5rem;
   background-color: #ffffff;
   min-width: 20.625rem;
 }
+.searchbar :global(> *:first-child) {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.search-info {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+}
 
 .wrapper {
   box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.1333333333);

package/dist/Components/HorizontalTabGroup.svelte.d.ts

@@ -2,7 +2,7 @@ import type { HorizontalTabGroupProps } from './HorizontalTabGroupProps.js';
 declare function $$render<CommonDenominator>(): {
     props: HorizontalTabGroupProps<CommonDenominator>;
     exports: {};
-    bindings: "";
+    bindings: "searchValue";
     slots: {};
     events: {};
 };
@@ -10,7 +10,7 @@ declare class __sveltets_Render<CommonDenominator> {
     props(): ReturnType<typeof $$render<CommonDenominator>>['props'];
     events(): ReturnType<typeof $$render<CommonDenominator>>['events'];
     slots(): ReturnType<typeof $$render<CommonDenominator>>['slots'];
-    bindings(): "";
+    bindings(): "searchValue";
     exports(): {};
 }
 interface $$IsomorphicComponent {

package/dist/Components/HorizontalTabGroupProps.d.ts

@@ -35,6 +35,14 @@ interface HorizontalTabGroupPropsBase<CommonDenominator> {
     filterable?: boolean;
     /** Predicate used to filter tabs on each keystroke (debounced by 300ms). */
     filterFn?: (item: TabOption<CommonDenominator>, filterValue: string) => boolean;
+    /** Bindable current value of the search box. Lets the parent read/drive
+     *  the search term (e.g. to highlight matches elsewhere). */
+    searchValue?: string;
+    /** Optional content rendered beside the search input (e.g. an info icon
+     *  with a tooltip). Only shown when `filterable`. */
+    searchInfo?: Snippet;
+    /** Override the search box placeholder. */
+    searchPlaceholder?: string;
 }
 export interface HorizontalTabGroupPropsWithoutSearch<CommonDenominator> extends HorizontalTabGroupPropsBase<CommonDenominator> {
     filterable?: false;

package/dist/Components/Nav/NavServiceMenuList.svelte

@@ -1,6 +1,7 @@
 <svelte:options runes />
 
 <script lang="ts">
+	import { page } from '$app/state';
 	import { Colour } from '../../scss/colours.js';
 	import { Size } from '../../Types/Internal/Size.js';
 	import Icon from '../Icon.svelte';
@@ -9,6 +10,21 @@
 	import ServiceMenuItem from './ServiceMenuItem.svelte';
 
 	const { title, items, icon }: NavServiceMenuListProps = $props();
+
+	// Only the single most-specific item is active: the longest item path that
+	// the current URL matches. Without this a nested route (e.g.
+	// /reports/manage-reports) would also light up its parent item (/reports).
+	const activePath = $derived.by(() => {
+		const pathname = page.url.pathname;
+		let best: string | null = null;
+		for (const { item } of items) {
+			const path = item.path;
+			if (path && pathname.includes(path) && (best === null || path.length > best.length)) {
+				best = path;
+			}
+		}
+		return best;
+	});
 </script>
 
 <div
@@ -35,7 +51,10 @@
 		role="list"
 	>
 		{#each items as { item } (item.label)}
-			<ServiceMenuItem {item} />
+			<ServiceMenuItem
+				{item}
+				selected={item.path != null && item.path === activePath}
+			/>
 		{/each}
 	</div>
 </div>

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

@@ -85,7 +85,12 @@
 	const firstCell = $derived(leftCells.at(0) ?? centreCells.at(0) ?? rightCells.at(0));
 	const rowIndex = $derived(firstCell?.row.visibleIndex);
 	let id = $state<RowIdType | undefined>();
-	const highlighted = $derived(id != undefined && tableContext.highlightedItems.has(id));
+	// Transient click/copy highlight OR the declarative, persistent
+	// `highlightRow` predicate (reactive; survives data/pagination resets).
+	const highlighted = $derived(
+		(id != undefined && tableContext.highlightedItems.has(id)) ||
+			(tableContext.highlightRow ? tableContext.highlightRow(row.original, rowIndex ?? 0) : false)
+	);
 
 	$effect(() => {
 		void row.original;

package/dist/Components/Table/Types/Context/TableContext.svelte.d.ts

@@ -60,6 +60,8 @@ export declare class TableContext<T extends object, RowIdType extends Primitive>
     allowAdvancedFiltering: boolean;
     toolbarPosition: ToolbarPosition;
     displayFooter: boolean;
+    /** Declarative persistent row-highlight predicate (see CreateTableOptions). */
+    readonly highlightRow: TableInitOptions<T, RowIdType>['highlightRow'];
     selectionExtractor: TableInitOptions<T, RowIdType>['selectionExtractor'];
     getUserId: () => string | undefined;
     private _onEditCell;
@@ -86,7 +88,9 @@ export declare class TableContext<T extends object, RowIdType extends Primitive>
      * `init`.
      */
     static init<T extends object, RowIdType extends Primitive>(defaultColumnDefs: DefsWrapper<T>, tableName: string, dataRepo: IDataRepository<T>, options: TableInitOptions<T, RowIdType>): TableContext<T, RowIdType>;
-    protected constructor(INTERNAL_ONLY: symbol, defaultColumnDefs: DefsWrapper<T>, tableName: string, dataRepo: IDataRepository<T>, allowCopy: boolean, enableResize: boolean, allowColumnReordering: boolean, allowQuickFiltering: boolean, showQuickFilterByDefault: boolean, allowAdvancedFiltering: boolean, toolbarPosition: ToolbarPosition, displayFooter: boolean, selectionExtractor: TableInitOptions<T, RowIdType>['selectionExtractor'], getUserId: () => string | undefined, _onEditCell: TableInitOptions<T, RowIdType>['onEditCell'], 
+    protected constructor(INTERNAL_ONLY: symbol, defaultColumnDefs: DefsWrapper<T>, tableName: string, dataRepo: IDataRepository<T>, allowCopy: boolean, enableResize: boolean, allowColumnReordering: boolean, allowQuickFiltering: boolean, showQuickFilterByDefault: boolean, allowAdvancedFiltering: boolean, toolbarPosition: ToolbarPosition, displayFooter: boolean, 
+    /** Declarative persistent row-highlight predicate (see CreateTableOptions). */
+    highlightRow: TableInitOptions<T, RowIdType>['highlightRow'], selectionExtractor: TableInitOptions<T, RowIdType>['selectionExtractor'], getUserId: () => string | undefined, _onEditCell: TableInitOptions<T, RowIdType>['onEditCell'], 
     /**
      * Stable per-table identifier supplied by the host app, or
      * `undefined` when remote saved views are disabled. Stored only;

package/dist/Components/Table/Types/Context/TableContext.svelte.js

@@ -107,6 +107,7 @@ export class TableContext {
     allowAdvancedFiltering;
     toolbarPosition;
     displayFooter;
+    highlightRow;
     selectionExtractor;
     getUserId;
     _onEditCell;
@@ -123,7 +124,7 @@ export class TableContext {
      * `init`.
      */
     static init(defaultColumnDefs, tableName, dataRepo, options) {
-        const context = new this(InternalSymbol, defaultColumnDefs, tableName, dataRepo, options.allowCopy ?? DEFAULT_TABLE_INIT_OPTIONS.allowCopy, options.enableResize ?? DEFAULT_TABLE_INIT_OPTIONS.enableResize, options.allowColumnReordering ?? DEFAULT_TABLE_INIT_OPTIONS.allowColumnReordering, options.allowQuickFiltering ?? DEFAULT_TABLE_INIT_OPTIONS.allowQuickFiltering, options.showQuickFilterByDefault ?? DEFAULT_TABLE_INIT_OPTIONS.showQuickFilterByDefault, options.allowAdvancedFiltering ?? DEFAULT_TABLE_INIT_OPTIONS.allowAdvancedFiltering, options.toolbar ?? DEFAULT_TABLE_INIT_OPTIONS.toolbar, options.displayFooter ?? DEFAULT_TABLE_INIT_OPTIONS.displayFooter, 
+        const context = new this(InternalSymbol, defaultColumnDefs, tableName, dataRepo, options.allowCopy ?? DEFAULT_TABLE_INIT_OPTIONS.allowCopy, options.enableResize ?? DEFAULT_TABLE_INIT_OPTIONS.enableResize, options.allowColumnReordering ?? DEFAULT_TABLE_INIT_OPTIONS.allowColumnReordering, options.allowQuickFiltering ?? DEFAULT_TABLE_INIT_OPTIONS.allowQuickFiltering, options.showQuickFilterByDefault ?? DEFAULT_TABLE_INIT_OPTIONS.showQuickFilterByDefault, options.allowAdvancedFiltering ?? DEFAULT_TABLE_INIT_OPTIONS.allowAdvancedFiltering, options.toolbar ?? DEFAULT_TABLE_INIT_OPTIONS.toolbar, options.displayFooter ?? DEFAULT_TABLE_INIT_OPTIONS.displayFooter, options.highlightRow, 
         // Fallback identity extractor when no `selectionExtractor` is
         // supplied (some consumers build an options object directly
         // without one). Returning the row object preserves identity
@@ -134,7 +135,9 @@ export class TableContext {
         return context;
     }
     // #region constructor
-    constructor(INTERNAL_ONLY, defaultColumnDefs, tableName, dataRepo, allowCopy, enableResize, allowColumnReordering, allowQuickFiltering, showQuickFilterByDefault, allowAdvancedFiltering, toolbarPosition, displayFooter, selectionExtractor, getUserId, _onEditCell = () => {
+    constructor(INTERNAL_ONLY, defaultColumnDefs, tableName, dataRepo, allowCopy, enableResize, allowColumnReordering, allowQuickFiltering, showQuickFilterByDefault, allowAdvancedFiltering, toolbarPosition, displayFooter, 
+    /** Declarative persistent row-highlight predicate (see CreateTableOptions). */
+    highlightRow, selectionExtractor, getUserId, _onEditCell = () => {
         console.warn('Cannot edit immutable table');
     }, 
     /**
@@ -159,6 +162,7 @@ export class TableContext {
         this.allowAdvancedFiltering = allowAdvancedFiltering;
         this.toolbarPosition = toolbarPosition;
         this.displayFooter = displayFooter;
+        this.highlightRow = highlightRow;
         this.selectionExtractor = selectionExtractor;
         this.getUserId = getUserId;
         this._onEditCell = _onEditCell;

package/dist/Components/Table/Types/Context/TableInitOptions.d.ts

@@ -28,6 +28,8 @@ export interface TableInitOptions<T extends object, Identifier extends Primitive
     allowAdvancedFiltering?: boolean;
     toolbar?: ToolbarPosition;
     displayFooter?: boolean;
+    /** Declarative persistent row-highlight predicate. See CreateTableOptions. */
+    highlightRow?: (item: T, index: number) => boolean;
     onEditCell?: (item: T, coords: CellCoordinates, value: unknown) => void | Promise<void>;
     getUserId: () => string | undefined;
     /** Stable per-table identifier supplied by the host app. Identifies

package/dist/Components/Table/Types/Public/CreateTableOptions.d.ts

@@ -59,6 +59,15 @@ export interface CreateTableOptions<TRow extends object, TRowId extends Primitiv
     toolbar?: 'top' | 'right' | 'left' | 'none';
     /** Whether to render the footer. Defaults to true. */
     showFooter?: boolean;
+    /**
+     * Declarative, persistent row highlight. When provided, every row for
+     * which this returns true is rendered highlighted — reactively and
+     * independently of the transient click/copy highlight, so it survives
+     * data/pagination changes (the latter clears the interaction highlight).
+     * Read reactive state inside the predicate (e.g. a search term) to drive
+     * the highlight from outside the table. Synchronous. Defaults to none.
+     */
+    highlightRow?: (row: TRow, index: number) => boolean;
     /** Whether copy operations are enabled. Defaults to true. */
     allowCopy?: boolean;
     /** Whether columns may be user-resized. Defaults to true. */

package/dist/Components/Table/createTable.svelte.js

@@ -76,6 +76,7 @@ export function createTable(options) {
         allowAdvancedFiltering: options.allowAdvancedFilter,
         toolbar: translateToolbar(options.toolbar),
         displayFooter: options.showFooter,
+        highlightRow: options.highlightRow,
         onEditCell,
         datatableUuid: options.datatableUuid,
         remoteLayouts: options.remoteLayouts,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@lavalogic/scoria",
   "description": "Svelte components used for the FloWMS Web Frontend",
-  "version": "0.40.3",
+  "version": "0.40.5",
   "publishConfig": {
     "access": "restricted"
   },