@lavalogic/scoria 0.40.1 → 0.40.3

package/dist/Components/Table/Types/Columns/Definitions/Expand/ExpandDef.svelte.d.ts

@@ -13,6 +13,8 @@ import { ColumnDef, type ColumnDefProps } from '../ColumnDef.svelte.js';
 export interface ExpandDefProps<T extends object, R extends object, InnerIdType extends Primitive = Primitive, in FilterValueType = unknown> extends ColumnDefProps<T, FilterValueType> {
     /** Per-row enable predicate for the expansion affordance. */
     isEnabled: (item: T, index: number) => boolean | Promise<boolean>;
+    /** Per-row predicate for whether the toggle renders at all. */
+    isVisible?: (item: T, index: number) => boolean | Promise<boolean>;
     /** Builds the inner table's column defs. Invoked per expansion. */
     getInnerColumnDefs: (item: T, index: number) => DefsWrapper<R>;
     /** Header icon name on the expand-toggle button. */
@@ -23,6 +25,9 @@ export interface ExpandDefProps<T extends object, R extends object, InnerIdType
     innerTableOptions: TableInitOptions<R, InnerIdType>;
     /** Accessor returning the inner-row array for a given outer row. */
     accessorFn: (item: T, index: number) => ReadonlyArray<R> | Promise<ReadonlyArray<R>>;
+    /** Navigate-instead-of-expand callback. When set, the toggle invokes
+     *  this rather than mounting the inner table. */
+    onActivate?: (item: T) => void | Promise<void>;
 }
 /**
  * `ExpandDef<T, R, InnerIdType, FilterValueType>` is a column whose
@@ -46,6 +51,10 @@ export declare class ExpandDef<T extends object, R extends object, InnerIdType e
     readonly headerIcon: IconProps['name'];
     /** Per-row enable predicate for the expansion affordance. */
     readonly isEnabled: (item: T, index: number) => boolean | Promise<boolean>;
+    /** Per-row predicate for whether the toggle renders at all. */
+    readonly isVisible?: (item: T, index: number) => boolean | Promise<boolean>;
     /** Init options for the inner table. */
     readonly innerTableOptions: TableInitOptions<R, InnerIdType>;
+    /** Navigate-instead-of-expand callback; undefined for normal expand. */
+    readonly onActivate?: (item: T) => void | Promise<void>;
 }

package/dist/Components/Table/Types/Columns/Definitions/Expand/ExpandDef.svelte.js

@@ -16,6 +16,8 @@ export class ExpandDef extends ColumnDef {
         this.getInnerColumnDefs = $derived(props.getInnerColumnDefs);
         this.innerTableName = $derived(props.innerTableName);
         this.innerTableOptions = $derived(props.innerTableOptions);
+        this.onActivate = $derived(props.onActivate);
+        this.isVisible = $derived(props.isVisible);
     }
     /** Expand columns are never filtered. */
     filterFn = undefined;
@@ -27,6 +29,10 @@ export class ExpandDef extends ColumnDef {
     headerIcon;
     /** Per-row enable predicate for the expansion affordance. */
     isEnabled;
+    /** Per-row predicate for whether the toggle renders at all. */
+    isVisible;
     /** Init options for the inner table. */
     innerTableOptions;
+    /** Navigate-instead-of-expand callback; undefined for normal expand. */
+    onActivate;
 }

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

@@ -377,6 +377,15 @@ export interface ExpandColumnOptions<TRow extends object, TInner extends object,
      * inner content. Async supported. Defaults to `() => true`.
      */
     isEnabled?: (row: TRow, index: number) => boolean | Promise<boolean>;
+    /**
+     * Per-row predicate for whether the expand affordance renders at all.
+     * When it resolves to `false` the toggle is omitted entirely (not just
+     * disabled), so rows that can never expand show no icon. Use to surface
+     * only the rows that are actually expandable (vs `isEnabled`, which keeps
+     * the toggle visible but greyed). Async supported. Defaults to always
+     * visible.
+     */
+    isVisible?: (row: TRow, index: number) => boolean | Promise<boolean>;
     /**
      * Inner-table configuration. Each field maps 1:1 onto the equivalent
      * `CreateTableOptions` field that configures an outer Table; supply
@@ -384,6 +393,16 @@ export interface ExpandColumnOptions<TRow extends object, TInner extends object,
      * See {@link ExpandInnerTableOptions}.
      */
     inner?: ExpandInnerTableOptions;
+    /**
+     * Navigate instead of expand. When provided, clicking the per-row
+     * toggle invokes this callback rather than mounting the inner table —
+     * the consumer drives a drill-down navigation (e.g. replacing the
+     * current view with a related table and pushing a breadcrumb). The
+     * inner-table fields (`childRows` / `childColumns` / `childRowId`) are
+     * not used in this mode; pass trivial stubs. Useful when nesting could
+     * recurse arbitrarily deep and inline panels would starve the layout.
+     */
+    onActivate?: (row: TRow) => void | Promise<void>;
 }
 /**
  * Options for `col.filterOnly({ id, header, ... })`. Renders in the filter

package/dist/Components/Test/TestContextConsumer.svelte

@@ -1,13 +1,13 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { TestContext } from '../../Contexts/TestContext.svelte.js';
-	import { getContext } from 'svelte';
-
-	const testContext = getContext<TestContext>(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>
+<svelte:options runes />
+
+<script lang="ts">
+	import { TestContext } from '../../Contexts/TestContext.svelte.js';
+	import { getContext } from 'svelte';
+
+	const testContext = getContext<TestContext>(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>

package/dist/Components/TextArea.svelte

@@ -1,132 +1,132 @@
-<svelte:options runes />
-
-<script lang="ts">
-	import { cssLength } from '../Helpers/Helpers.svelte.js';
-	import { InputVariant } from '../Types/Internal/InputVariant.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import Icon from './Icon.svelte';
-	import type { TextAreaProps } from './TextAreaProps.js';
-
-	let {
-		value = $bindable(''),
-		labelTop,
-		labelRight,
-		placeholder,
-		maxWidth = false,
-		required = false,
-		variant = InputVariant.Default,
-		selectNone = false,
-		noresize = false,
-		uppercase = false,
-		disabled,
-		invalid = false,
-		showErrorColours = true,
-		optional = false,
-		leftIcon,
-		rightIcon,
-		onLeftIconClick,
-		onRightIconClick,
-		rows = 4,
-
-		textAreaRef = $bindable(),
-		autocomplete,
-		spellcheck,
-		onblur,
-		onfocus,
-		// No default `onkeydown` - see TextInput.svelte for the rationale.
-		// The legacy default (`passthrough`) blurred the textarea on every
-		// alphanumeric keystroke and made the field unusable.
-		onkeydown,
-		oninput,
-	}: TextAreaProps = $props();
-
-	const isInvalid = $derived(showErrorColours && ((required && value.trim() === '') || invalid));
-</script>
-
-<label
-	class:for-modal={variant === InputVariant.Modal}
-	class:max-width={maxWidth}
->
-	{#if labelTop && variant !== InputVariant.Modal}
-		<span
-			class="top-label"
-			class:for-default={variant === InputVariant.Default}
-			class:invalid={isInvalid}
-			>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
-		>
-		{#if variant === InputVariant.Default}
-			<span
-				aria-hidden="true"
-				class="border"
-				class:invalid={isInvalid}
-				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
-			>
-		{/if}
-	{/if}
-	<div
-		class="icon-container"
-		class:for-modal={variant == InputVariant.Modal}
-	>
-		{#if leftIcon}
-			<Icon
-				name={leftIcon.name}
-				size={leftIcon.size ?? Size.Medium}
-				colour={leftIcon.colour}
-				float
-				left={cssLength('0.75rem')}
-				top={cssLength('50%')}
-				anchorX={cssLength('0')}
-				anchorY={cssLength('-50%')}
-				clickable={!!onLeftIconClick}
-				onclick={onLeftIconClick}
-			/>
-		{/if}
-		<textarea
-			class:noresize
-			class:uppercase
-			class:invalid={isInvalid}
-			class:select-none={selectNone}
-			class:left-pad={leftIcon != undefined}
-			class:right-pad={rightIcon != undefined}
-			class:for-modal={variant == InputVariant.Modal}
-			class:max-width={maxWidth}
-			autocomplete={autocomplete ?? 'off'}
-			spellcheck={spellcheck ?? true}
-			aria-invalid={isInvalid || undefined}
-			bind:value
-			{onblur}
-			{onfocus}
-			{onkeydown}
-			{oninput}
-			{rows}
-			bind:this={textAreaRef}
-			{placeholder}
-			{required}
-			{disabled}
-		></textarea>
-		{#if rightIcon}
-			<Icon
-				name={rightIcon.name}
-				size={rightIcon.size ?? Size.Medium}
-				colour={rightIcon.colour}
-				float
-				right={cssLength(variant == InputVariant.Modal ? '1rem' : '0.5rem')}
-				top={cssLength('50%')}
-				anchorX={cssLength('0')}
-				anchorY={cssLength('-50%')}
-				clickable={!!onRightIconClick}
-				onclick={onRightIconClick}
-			/>
-		{/if}
-		{#if labelRight}
-			<span
-				class="right-label"
-				class:for-modal={variant == InputVariant.Modal}>{labelRight}</span
-			>
-		{/if}
-	</div>
-</label>
-
+<svelte:options runes />
+
+<script lang="ts">
+	import { cssLength } from '../Helpers/Helpers.svelte.js';
+	import { InputVariant } from '../Types/Internal/InputVariant.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import Icon from './Icon.svelte';
+	import type { TextAreaProps } from './TextAreaProps.js';
+
+	let {
+		value = $bindable(''),
+		labelTop,
+		labelRight,
+		placeholder,
+		maxWidth = false,
+		required = false,
+		variant = InputVariant.Default,
+		selectNone = false,
+		noresize = false,
+		uppercase = false,
+		disabled,
+		invalid = false,
+		showErrorColours = true,
+		optional = false,
+		leftIcon,
+		rightIcon,
+		onLeftIconClick,
+		onRightIconClick,
+		rows = 4,
+
+		textAreaRef = $bindable(),
+		autocomplete,
+		spellcheck,
+		onblur,
+		onfocus,
+		// No default `onkeydown` - see TextInput.svelte for the rationale.
+		// The legacy default (`passthrough`) blurred the textarea on every
+		// alphanumeric keystroke and made the field unusable.
+		onkeydown,
+		oninput,
+	}: TextAreaProps = $props();
+
+	const isInvalid = $derived(showErrorColours && ((required && value.trim() === '') || invalid));
+</script>
+
+<label
+	class:for-modal={variant === InputVariant.Modal}
+	class:max-width={maxWidth}
+>
+	{#if labelTop && variant !== InputVariant.Modal}
+		<span
+			class="top-label"
+			class:for-default={variant === InputVariant.Default}
+			class:invalid={isInvalid}
+			>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+		>
+		{#if variant === InputVariant.Default}
+			<span
+				aria-hidden="true"
+				class="border"
+				class:invalid={isInvalid}
+				>{labelTop}{#if optional}<i>&nbsp;- optional</i>{/if}</span
+			>
+		{/if}
+	{/if}
+	<div
+		class="icon-container"
+		class:for-modal={variant == InputVariant.Modal}
+	>
+		{#if leftIcon}
+			<Icon
+				name={leftIcon.name}
+				size={leftIcon.size ?? Size.Medium}
+				colour={leftIcon.colour}
+				float
+				left={cssLength('0.75rem')}
+				top={cssLength('50%')}
+				anchorX={cssLength('0')}
+				anchorY={cssLength('-50%')}
+				clickable={!!onLeftIconClick}
+				onclick={onLeftIconClick}
+			/>
+		{/if}
+		<textarea
+			class:noresize
+			class:uppercase
+			class:invalid={isInvalid}
+			class:select-none={selectNone}
+			class:left-pad={leftIcon != undefined}
+			class:right-pad={rightIcon != undefined}
+			class:for-modal={variant == InputVariant.Modal}
+			class:max-width={maxWidth}
+			autocomplete={autocomplete ?? 'off'}
+			spellcheck={spellcheck ?? true}
+			aria-invalid={isInvalid || undefined}
+			bind:value
+			{onblur}
+			{onfocus}
+			{onkeydown}
+			{oninput}
+			{rows}
+			bind:this={textAreaRef}
+			{placeholder}
+			{required}
+			{disabled}
+		></textarea>
+		{#if rightIcon}
+			<Icon
+				name={rightIcon.name}
+				size={rightIcon.size ?? Size.Medium}
+				colour={rightIcon.colour}
+				float
+				right={cssLength(variant == InputVariant.Modal ? '1rem' : '0.5rem')}
+				top={cssLength('50%')}
+				anchorX={cssLength('0')}
+				anchorY={cssLength('-50%')}
+				clickable={!!onRightIconClick}
+				onclick={onRightIconClick}
+			/>
+		{/if}
+		{#if labelRight}
+			<span
+				class="right-label"
+				class:for-modal={variant == InputVariant.Modal}>{labelRight}</span
+			>
+		{/if}
+	</div>
+</label>
+
 <style>textarea {
   box-sizing: border-box;
   height: 100%;
@@ -340,4 +340,4 @@ span.border.invalid {
 .textarea-error-wrapper.for-modal {
   position: relative;
   height: 100%;
-}</style>
+}</style>