@lavalogic/scoria 0.39.2 → 0.40.0

package/dist/Components/Checkbox.svelte

@@ -1,88 +1,88 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import { generateWeakId } from '../Helpers/Helpers.svelte.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import type { CheckboxProps } from './CheckboxProps.js';
-	import Icon from './Icon.svelte';
-</script>
-
-<script lang="ts">
-	let {
-		value = false,
-		id = generateWeakId(),
-		icon,
-		size,
-		label,
-		disabled,
-		onchange,
-	}: CheckboxProps = $props();
-</script>
-
-{#if icon}
-	<div
-		class="outer-checkbox-container"
-		class:fill-width={size === Size.FillWidth}
-		class:fill-height={size === Size.FillHeight}
-	>
-		<div
-			class="inner-checkbox-container with-icon"
-			class:disabled
-		>
-			<input
-				{id}
-				name={id}
-				class="with-icon"
-				{onchange}
-				type="checkbox"
-				{disabled}
-				checked={value}
-			/>
-			<label
-				class="icon-label"
-				for={id}
-				class:disabled
-			>
-				<Icon
-					{...icon}
-					size={icon.size ?? size ?? Size.DoubleXLarge}
-				/>
-			</label>
-		</div>
-		{#if label}
-			<label
-				class="text-label"
-				for={id}>{label}</label
-			>
-		{/if}
-	</div>
-{:else}
-	<div
-		class="checkbox-container"
-		class:compact={size === Size.Tiny ||
-			size === Size.Small ||
-			size === Size.MediumSmall ||
-			size === Size.Medium}
-	>
-		<input
-			{id}
-			{onchange}
-			type="checkbox"
-			checked={value}
-			{disabled}
-		/>
-		{#if label}
-			<label
-				class="text-label"
-				for={id}>{label}</label
-			>
-		{/if}
-	</div>
-{/if}
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import { generateWeakId } from '../Helpers/Helpers.svelte.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import type { CheckboxProps } from './CheckboxProps.js';
+	import Icon from './Icon.svelte';
+</script>
+
+<script lang="ts">
+	let {
+		value = false,
+		id = generateWeakId(),
+		icon,
+		size,
+		label,
+		disabled,
+		onchange,
+	}: CheckboxProps = $props();
+</script>
+
+{#if icon}
+	<div
+		class="outer-checkbox-container"
+		class:fill-width={size === Size.FillWidth}
+		class:fill-height={size === Size.FillHeight}
+	>
+		<div
+			class="inner-checkbox-container with-icon"
+			class:disabled
+		>
+			<input
+				{id}
+				name={id}
+				class="with-icon"
+				{onchange}
+				type="checkbox"
+				{disabled}
+				checked={value}
+			/>
+			<label
+				class="icon-label"
+				for={id}
+				class:disabled
+			>
+				<Icon
+					{...icon}
+					size={icon.size ?? size ?? Size.DoubleXLarge}
+				/>
+			</label>
+		</div>
+		{#if label}
+			<label
+				class="text-label"
+				for={id}>{label}</label
+			>
+		{/if}
+	</div>
+{:else}
+	<div
+		class="checkbox-container"
+		class:compact={size === Size.Tiny ||
+			size === Size.Small ||
+			size === Size.MediumSmall ||
+			size === Size.Medium}
+	>
+		<input
+			{id}
+			{onchange}
+			type="checkbox"
+			checked={value}
+			{disabled}
+		/>
+		{#if label}
+			<label
+				class="text-label"
+				for={id}>{label}</label
+			>
+		{/if}
+	</div>
+{/if}
+
 <style>.outer-checkbox-container {
   box-sizing: border-box;
   display: flex;
@@ -176,4 +176,4 @@ label {
   display: block;
   cursor: pointer;
   position: relative;
-}</style>
+}</style>

package/dist/Components/CollapsibleCard.svelte

@@ -1,80 +1,80 @@
-<svelte:options runes />
-
-<script
-	lang="ts"
-	module
->
-	import { generateWeakId } from '../Helpers/Helpers.svelte.js';
-</script>
-
-<script lang="ts">
-	import { loadingText } from '../Helpers/Helpers.svelte.js';
-	import { Size } from '../Types/Internal/Size.js';
-	import { Colour } from '../scss/colours.js';
-	import Action from './Action.svelte';
-	import type { CollapsibleCardProps } from './CollapsibleCardProps.js';
-
-	let {
-		title,
-		subtitle,
-		maxHeight,
-		children,
-		grow,
-		isCollapsed = $bindable(false),
-	}: CollapsibleCardProps = $props();
-
-	const contentId = `collapsible-card-${generateWeakId()}`;
-
-	const cardMaxHeight = $derived(maxHeight != null && maxHeight > 0 ? `${maxHeight}px` : undefined);
-</script>
-
-<div
-	class="collapsible-card"
-	style={cardMaxHeight != null ? `--card-max-height: ${cardMaxHeight};` : undefined}
-	class:is-collapsed={isCollapsed}
-	class:grow
->
-	<div class="heading">
-		<div class="left">
-			<h3>{title}</h3>
-			{#if subtitle}
-				{#await subtitle}
-					<span>{loadingText}</span>
-				{:then resolvedSubtitle}
-					<span>{resolvedSubtitle}</span>
-				{/await}
-			{/if}
-		</div>
-		<div class="right">
-			<Action
-				label={isCollapsed ? 'Expand' : 'Collapse'}
-				aria-expanded={!isCollapsed}
-				aria-controls={contentId}
-				onclick={() => {
-					isCollapsed = !isCollapsed;
-				}}
-				size={Size.TripleXLarge}
-				icon={{
-					name: isCollapsed ? 'circle-plus' : 'circle-minus',
-					colour: Colour['$ui-blue-5'],
-					size: Size.Medium,
-				}}
-			/>
-		</div>
-	</div>
-
-	<div
-		id={contentId}
-		class="content"
-		class:is-collapsed={isCollapsed}
-		aria-hidden={isCollapsed}
-	>
-		{#if children}
-			{@render children()}
-		{/if}
-	</div>
-</div>
-
+<svelte:options runes />
+
+<script
+	lang="ts"
+	module
+>
+	import { generateWeakId } from '../Helpers/Helpers.svelte.js';
+</script>
+
+<script lang="ts">
+	import { loadingText } from '../Helpers/Helpers.svelte.js';
+	import { Size } from '../Types/Internal/Size.js';
+	import { Colour } from '../scss/colours.js';
+	import Action from './Action.svelte';
+	import type { CollapsibleCardProps } from './CollapsibleCardProps.js';
+
+	let {
+		title,
+		subtitle,
+		maxHeight,
+		children,
+		grow,
+		isCollapsed = $bindable(false),
+	}: CollapsibleCardProps = $props();
+
+	const contentId = `collapsible-card-${generateWeakId()}`;
+
+	const cardMaxHeight = $derived(maxHeight != null && maxHeight > 0 ? `${maxHeight}px` : undefined);
+</script>
+
+<div
+	class="collapsible-card"
+	style={cardMaxHeight != null ? `--card-max-height: ${cardMaxHeight};` : undefined}
+	class:is-collapsed={isCollapsed}
+	class:grow
+>
+	<div class="heading">
+		<div class="left">
+			<h3>{title}</h3>
+			{#if subtitle}
+				{#await subtitle}
+					<span>{loadingText}</span>
+				{:then resolvedSubtitle}
+					<span>{resolvedSubtitle}</span>
+				{/await}
+			{/if}
+		</div>
+		<div class="right">
+			<Action
+				label={isCollapsed ? 'Expand' : 'Collapse'}
+				aria-expanded={!isCollapsed}
+				aria-controls={contentId}
+				onclick={() => {
+					isCollapsed = !isCollapsed;
+				}}
+				size={Size.TripleXLarge}
+				icon={{
+					name: isCollapsed ? 'circle-plus' : 'circle-minus',
+					colour: Colour['$ui-blue-5'],
+					size: Size.Medium,
+				}}
+			/>
+		</div>
+	</div>
+
+	<div
+		id={contentId}
+		class="content"
+		class:is-collapsed={isCollapsed}
+		aria-hidden={isCollapsed}
+	>
+		{#if children}
+			{@render children()}
+		{/if}
+	</div>
+</div>
+
 <style>.collapsible-card {
   background-color: #ffffff;
   display: flex;
@@ -170,4 +170,4 @@ div.content.is-collapsed {
     animation-duration: 0.001ms !important;
     transition-duration: 0.001ms !important;
   }
-}</style>
+}</style>

package/dist/Components/ConditionBuilder/ConditionBuilder.svelte

@@ -0,0 +1,212 @@
+<svelte:options runes />
+
+<script
+	lang="ts"
+	generics="F extends string | number, O extends string | number, V"
+>
+	import SingleSelect from '../SingleSelect.svelte';
+	import Button from '../Button.svelte';
+	import type { ConditionBuilderProps } from './ConditionBuilderProps.js';
+	import { makeGroup, makeLeaf, type ConditionLeaf, type ConditionNode } from './ConditionTree.js';
+	import Self from './ConditionBuilder.svelte';
+
+	const {
+		root,
+		onChange,
+		fields,
+		operatorsFor,
+		valueEditor,
+		defaultValueFor,
+		allowGroups = true,
+		maxDepth = 5,
+		addConditionLabel = 'Add Condition',
+		addGroupLabel = 'Add Group',
+		andLabel = 'AND',
+		orLabel = 'OR',
+		depth = 0,
+	}: ConditionBuilderProps<F, O, V> = $props();
+
+	function seedValue(field: F | null, operator: O | null): V {
+		return defaultValueFor ? defaultValueFor(field, operator) : (null as V);
+	}
+
+	function setCombinator(combinator: 'and' | 'or') {
+		root.combinator = combinator;
+		onChange(root);
+	}
+
+	function addLeaf() {
+		root.children.push(makeLeaf<F, O, V>(seedValue(null, null)));
+		onChange(root);
+	}
+
+	function addGroup() {
+		root.children.push(makeGroup<F, O, V>());
+		onChange(root);
+	}
+
+	function removeChild(node: ConditionNode<F, O, V>) {
+		root.children = root.children.filter((child) => child.id !== node.id);
+		onChange(root);
+	}
+
+	function setField(leaf: ConditionLeaf<F, O, V>, field: F | null) {
+		leaf.field = field;
+		leaf.operator = null;
+		leaf.value = seedValue(field, null);
+		onChange(root);
+	}
+
+	function setOperator(leaf: ConditionLeaf<F, O, V>, operator: O | null) {
+		leaf.operator = operator;
+		leaf.value = seedValue(leaf.field, operator);
+		onChange(root);
+	}
+
+	function setValue(leaf: ConditionLeaf<F, O, V>, value: V) {
+		leaf.value = value;
+		onChange(root);
+	}
+</script>
+
+<div
+	class="group"
+	class:nested={depth > 0}
+>
+	<div class="combinator">
+		<Button
+			label={andLabel}
+			toggled={root.combinator === 'and'}
+			onclick={() => setCombinator('and')}>{andLabel}</Button
+		>
+		<Button
+			label={orLabel}
+			toggled={root.combinator === 'or'}
+			onclick={() => setCombinator('or')}>{orLabel}</Button
+		>
+	</div>
+
+	<div class="children">
+		{#each root.children as child (child.id)}
+			{#if child.kind === 'leaf'}
+				<div class="leaf">
+					<SingleSelect
+						label="Field"
+						options={[...fields]}
+						labelProp="label"
+						valueProp="value"
+						valueAsObject={false}
+						clearable
+						value={child.field}
+						onchange={(value) => setField(child, value)}
+					/>
+					<SingleSelect
+						label="Operator"
+						options={[...operatorsFor(child.field)]}
+						labelProp="label"
+						valueProp="value"
+						valueAsObject={false}
+						clearable
+						value={child.operator}
+						onchange={(value) => setOperator(child, value)}
+					/>
+					<div class="value-editor">
+						{@render valueEditor(child, (value) => setValue(child, value))}
+					</div>
+					<Button
+						label="Remove condition"
+						iconLeft={{ name: 'circle-cross' }}
+						onclick={() => removeChild(child)}
+					/>
+				</div>
+			{:else}
+				<div class="subgroup">
+					<Self
+						root={child}
+						{onChange}
+						{fields}
+						{operatorsFor}
+						{valueEditor}
+						{defaultValueFor}
+						{allowGroups}
+						{maxDepth}
+						{addConditionLabel}
+						{addGroupLabel}
+						{andLabel}
+						{orLabel}
+						depth={depth + 1}
+					/>
+					<Button
+						label="Remove group"
+						iconLeft={{ name: 'circle-cross' }}
+						onclick={() => removeChild(child)}
+					/>
+				</div>
+			{/if}
+		{/each}
+	</div>
+
+	<div class="actions">
+		<Button
+			label={addConditionLabel}
+			iconLeft={{ name: 'circle-plus' }}
+			onclick={addLeaf}>{addConditionLabel}</Button
+		>
+		{#if allowGroups && depth < maxDepth}
+			<Button
+				label={addGroupLabel}
+				iconLeft={{ name: 'circle-plus' }}
+				onclick={addGroup}>{addGroupLabel}</Button
+			>
+		{/if}
+	</div>
+</div>
+
+<style>.group {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.5rem;
+}
+
+.group.nested {
+  border: solid 1px #cbd4da;
+  padding: 0.5rem;
+}
+
+.combinator {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 0.5rem;
+}
+
+.children {
+  display: flex;
+  flex-flow: column nowrap;
+  gap: 0.5rem;
+}
+
+.leaf {
+  display: flex;
+  flex-flow: row wrap;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.subgroup {
+  display: flex;
+  flex-flow: row nowrap;
+  align-items: flex-start;
+  gap: 0.5rem;
+}
+
+.value-editor {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 0.5rem;
+}
+
+.actions {
+  display: flex;
+  flex-flow: row nowrap;
+  gap: 0.5rem;
+}</style>

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

@@ -0,0 +1,25 @@
+import type { ConditionBuilderProps } from './ConditionBuilderProps.js';
+declare function $$render<F extends string | number, O extends string | number, V>(): {
+    props: ConditionBuilderProps<F, O, V>;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<F extends string | number, O extends string | number, V> {
+    props(): ReturnType<typeof $$render<F, O, V>>['props'];
+    events(): ReturnType<typeof $$render<F, O, V>>['events'];
+    slots(): ReturnType<typeof $$render<F, O, V>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <F extends string | number, O extends string | number, V>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<F, O, V>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<F, O, V>['props']>, ReturnType<__sveltets_Render<F, O, V>['events']>, ReturnType<__sveltets_Render<F, O, V>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<F, O, V>['bindings']>;
+    } & ReturnType<__sveltets_Render<F, O, V>['exports']>;
+    <F extends string | number, O extends string | number, V>(internal: unknown, props: ReturnType<__sveltets_Render<F, O, V>['props']> & {}): ReturnType<__sveltets_Render<F, O, V>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any, any, any>['bindings']>;
+}
+declare const ConditionBuilder: $$IsomorphicComponent;
+type ConditionBuilder<F extends string | number, O extends string | number, V> = InstanceType<typeof ConditionBuilder<F, O, V>>;
+export default ConditionBuilder;

package/dist/Components/ConditionBuilder/ConditionBuilderProps.d.ts

@@ -0,0 +1,45 @@
+import type { Snippet } from 'svelte';
+import type { SelectOption } from '../../Types/Internal/SelectOption.js';
+import type { ConditionGroup, ConditionLeaf } from './ConditionTree.js';
+/**
+ * Props for {@link ConditionBuilder} — a generic, domain-free recursive
+ * AND/OR condition tree editor. The component owns only the tree shape and
+ * the combinator toggles; fields, operators and value editing are injected by
+ * the consumer so no SQL / query semantics leak into the library.
+ *
+ * `F`/`O` are the field-key and operator types (primitives so the internal
+ * dropdowns can use them as option values). `V` is the opaque value type,
+ * written exclusively through {@link ConditionBuilderProps.valueEditor}.
+ */
+export interface ConditionBuilderProps<F extends string | number, O extends string | number, V> {
+    /** The root group. Mutated in place; pair with `$state` in the consumer. */
+    root: ConditionGroup<F, O, V>;
+    /** Called after any structural or value change to the tree. */
+    onChange: (root: ConditionGroup<F, O, V>) => void;
+    /** Selectable fields for each leaf's field dropdown. */
+    fields: ReadonlyArray<SelectOption<F>>;
+    /** Operators valid for the chosen field (may vary by field/data type). */
+    operatorsFor: (field: F | null) => ReadonlyArray<SelectOption<O>>;
+    /**
+     * Renders the value input(s) for one leaf. Receives the leaf and a setter
+     * to write the new value back. This is how a consumer renders one input
+     * for "contains", two for "between", a multi-select for "in", etc.
+     */
+    valueEditor: Snippet<[ConditionLeaf<F, O, V>, (value: V) => void]>;
+    /** Produces the value to seed when a leaf's field/operator changes. */
+    defaultValueFor?: (field: F | null, operator: O | null) => V;
+    /** Allow nested sub-groups. Defaults to true. */
+    allowGroups?: boolean;
+    /** Maximum nesting depth for sub-groups. Defaults to 5. */
+    maxDepth?: number;
+    /** Label for the add-condition button. Defaults to "Add Condition". */
+    addConditionLabel?: string;
+    /** Label for the add-group button. Defaults to "Add Group". */
+    addGroupLabel?: string;
+    /** Label for the AND toggle. Defaults to "AND". */
+    andLabel?: string;
+    /** Label for the OR toggle. Defaults to "OR". */
+    orLabel?: string;
+    /** Internal: current nesting depth. Consumers should not set this. */
+    depth?: number;
+}

package/dist/Components/ConditionBuilder/ConditionBuilderProps.js

@@ -0,0 +1 @@
+export {};

package/dist/Components/ConditionBuilder/ConditionTree.d.ts

@@ -0,0 +1,27 @@
+/** How a group combines its children. */
+export type Combinator = 'and' | 'or';
+/**
+ * A single condition: a (field, operator, value) triple. Generic over the
+ * field key `F`, operator `O` and value `V`. `value` is opaque to the
+ * builder — the consumer renders and writes it through the `valueEditor`
+ * snippet, so it can be a string, a tuple (e.g. for "between"), an array, etc.
+ */
+export interface ConditionLeaf<F, O, V> {
+    id: string;
+    kind: 'leaf';
+    field: F | null;
+    operator: O | null;
+    value: V;
+}
+/** A group of conditions combined with AND or OR. Groups may nest. */
+export interface ConditionGroup<F, O, V> {
+    id: string;
+    kind: 'group';
+    combinator: Combinator;
+    children: Array<ConditionNode<F, O, V>>;
+}
+export type ConditionNode<F, O, V> = ConditionLeaf<F, O, V> | ConditionGroup<F, O, V>;
+/** Construct a fresh leaf with a stable id. */
+export declare function makeLeaf<F, O, V>(value: V, field?: F | null, operator?: O | null): ConditionLeaf<F, O, V>;
+/** Construct a fresh group with a stable id. */
+export declare function makeGroup<F, O, V>(combinator?: Combinator, children?: Array<ConditionNode<F, O, V>>): ConditionGroup<F, O, V>;

package/dist/Components/ConditionBuilder/ConditionTree.js

@@ -0,0 +1,9 @@
+import { generateWeakId } from '../../Helpers/Helpers.svelte.js';
+/** Construct a fresh leaf with a stable id. */
+export function makeLeaf(value, field = null, operator = null) {
+    return { id: generateWeakId(), kind: 'leaf', field, operator, value };
+}
+/** Construct a fresh group with a stable id. */
+export function makeGroup(combinator = 'and', children = []) {
+    return { id: generateWeakId(), kind: 'group', combinator, children };
+}