runeforge 0.0.61 → 0.0.63

package/dist/components/crud/fields/FileField.svelte

@@ -1,70 +1,70 @@
-<script lang="ts" generics="T extends object = Record<string, unknown>">
-	import type { Snippet } from 'svelte';
-	import Avatar from '../../Avatar.svelte';
-	import { fieldLabel, initials } from '../utils/misc.js';
-	import type { FieldDefinition } from '../../../types/crud/fields.js';
-
-	let {
-		field,
-		record = $bindable({} as Record<string, unknown>),
-		parentRecord = undefined,
-		error = '',
-		readonly = false,
-		labelRow,
-		errorRow
-	}: {
-		field: FieldDefinition<T>;
-		record?: Record<string, unknown>;
-		parentRecord?: Record<string, unknown>;
-		error?: string;
-		readonly?: boolean;
-		labelRow: Snippet;
-		errorRow: Snippet;
-	} = $props();
-
-	const name = $derived(readonly ? undefined : field.attribute);
-	const saved = $derived(record[field.attribute]);
-	const labelText = $derived(fieldLabel(field));
-	const avatarInitials = $derived(initials(record.firstName as string, record.lastName as string));
-	const fieldDisabled = $derived(field.disabled ? field.disabled(record, parentRecord) : false);
-
-	let filePreview = $state<string | null>(null);
-	const preview = $derived(filePreview ?? (typeof saved === 'string' && saved ? saved : null));
-
-	function onFileChange(e: Event & { currentTarget: HTMLInputElement }) {
-		const file = e.currentTarget.files?.[0];
-		if (filePreview) URL.revokeObjectURL(filePreview);
-		filePreview = file && file.type.startsWith('image/') ? URL.createObjectURL(file) : null;
-	}
-
-	$effect(() => () => {
-		if (filePreview) URL.revokeObjectURL(filePreview);
-	});
-</script>
-
-<div class="flex justify-center">
-	<Avatar
-		src={preview}
-		text={avatarInitials}
-		alt={labelText}
-		class="w-20 rounded-full"
-		textClass="text-xl"
-	/>
-</div>
-
-{@render labelRow()}
-
-{#if !readonly}
-	<input
-		type="file"
-		id={field.attribute}
-		{name}
-		class="file-input file-input-bordered w-full"
-		class:file-input-error={!!error}
-		disabled={fieldDisabled}
-		onchange={onFileChange}
-	/>
-{/if}
-<!-- read-only file value is shown as the avatar above -->
-
-{@render errorRow()}
+<script lang="ts" generics="T extends object = Record<string, unknown>">
+	import type { Snippet } from 'svelte';
+	import Avatar from '../../Avatar.svelte';
+	import { fieldLabel, initials } from '../utils/misc.js';
+	import type { FieldDefinition } from '../../../types/crud/fields.js';
+
+	let {
+		field,
+		record = $bindable({} as Record<string, unknown>),
+		parentRecord = undefined,
+		error = '',
+		readonly = false,
+		labelRow,
+		errorRow
+	}: {
+		field: FieldDefinition<T>;
+		record?: Record<string, unknown>;
+		parentRecord?: Record<string, unknown>;
+		error?: string;
+		readonly?: boolean;
+		labelRow: Snippet;
+		errorRow: Snippet;
+	} = $props();
+
+	const name = $derived(readonly ? undefined : field.attribute);
+	const saved = $derived(record[field.attribute]);
+	const labelText = $derived(fieldLabel(field));
+	const avatarInitials = $derived(initials(record.firstName as string, record.lastName as string));
+	const fieldDisabled = $derived(field.disabled ? field.disabled(record, parentRecord) : false);
+
+	let filePreview = $state<string | null>(null);
+	const preview = $derived(filePreview ?? (typeof saved === 'string' && saved ? saved : null));
+
+	function onFileChange(e: Event & { currentTarget: HTMLInputElement }) {
+		const file = e.currentTarget.files?.[0];
+		if (filePreview) URL.revokeObjectURL(filePreview);
+		filePreview = file && file.type.startsWith('image/') ? URL.createObjectURL(file) : null;
+	}
+
+	$effect(() => () => {
+		if (filePreview) URL.revokeObjectURL(filePreview);
+	});
+</script>
+
+<div class="flex justify-center">
+	<Avatar
+		src={preview}
+		text={avatarInitials}
+		alt={labelText}
+		class="w-20 rounded-full"
+		textClass="text-xl"
+	/>
+</div>
+
+{@render labelRow()}
+
+{#if !readonly}
+	<input
+		type="file"
+		id={field.attribute}
+		{name}
+		class="file-input file-input-bordered w-full"
+		class:file-input-error={!!error}
+		disabled={fieldDisabled}
+		onchange={onFileChange}
+	/>
+{/if}
+<!-- read-only file value is shown as the avatar above -->
+
+{@render errorRow()}

package/dist/components/crud/fields/MultiSelectField.svelte

@@ -1,70 +1,70 @@
-<script lang="ts" generics="T extends object = Record<string, unknown>">
-	import type { Snippet } from 'svelte';
-	import MultiSelect from '../../form/MultiSelect.svelte';
-	import type { FieldDefinition } from '../../../types/crud/fields.js';
-
-	let {
-		field,
-		record = $bindable({} as Record<string, unknown>),
-		parentRecord = undefined,
-		error = '',
-		readonly = false,
-		labelRow,
-		errorRow
-	}: {
-		field: FieldDefinition<T>;
-		record?: Record<string, unknown>;
-		parentRecord?: Record<string, unknown>;
-		error?: string;
-		readonly?: boolean;
-		labelRow: Snippet;
-		errorRow: Snippet;
-	} = $props();
-
-	const saved = $derived(record[field.attribute]);
-	const selectOptions = $derived(
-		field.dependentOptions ? field.dependentOptions(record, parentRecord) : (field.options ?? [])
-	);
-	const fieldDisabled = $derived(field.disabled ? field.disabled(record, parentRecord) : false);
-
-	// See SelectField's equivalent effect — same idea, but pruning the array
-	// down to values still present in the (possibly just-changed) options
-	// instead of clearing a single scalar value outright.
-	$effect(() => {
-		if (!field.dependentOptions) return;
-		const current = record[field.attribute];
-		if (!Array.isArray(current)) return;
-		const validValues = new Set(selectOptions.map((o) => o.value));
-		const pruned = current.filter((v) => validValues.has(String(v)));
-		if (pruned.length !== current.length) {
-			record[field.attribute] = pruned;
-		}
-	});
-</script>
-
-{@render labelRow()}
-
-{#if readonly}
-	<input
-		type="text"
-		id={field.attribute}
-		class="input input-bordered w-full"
-		value={(Array.isArray(saved) ? saved : [])
-			.map((v) => selectOptions.find((o) => o.value === String(v))?.label ?? String(v))
-			.join(', ')}
-		disabled
-	/>
-{:else}
-	<MultiSelect
-		id={field.attribute}
-		name={field.attribute}
-		bind:value={record[field.attribute] as string[]}
-		options={selectOptions}
-		search={field.search}
-		placeholder={field.placeholder}
-		disabled={fieldDisabled}
-		{error}
-	/>
-{/if}
-
-{@render errorRow()}
+<script lang="ts" generics="T extends object = Record<string, unknown>">
+	import type { Snippet } from 'svelte';
+	import MultiSelect from '../../form/MultiSelect.svelte';
+	import type { FieldDefinition } from '../../../types/crud/fields.js';
+
+	let {
+		field,
+		record = $bindable({} as Record<string, unknown>),
+		parentRecord = undefined,
+		error = '',
+		readonly = false,
+		labelRow,
+		errorRow
+	}: {
+		field: FieldDefinition<T>;
+		record?: Record<string, unknown>;
+		parentRecord?: Record<string, unknown>;
+		error?: string;
+		readonly?: boolean;
+		labelRow: Snippet;
+		errorRow: Snippet;
+	} = $props();
+
+	const saved = $derived(record[field.attribute]);
+	const selectOptions = $derived(
+		field.dependentOptions ? field.dependentOptions(record, parentRecord) : (field.options ?? [])
+	);
+	const fieldDisabled = $derived(field.disabled ? field.disabled(record, parentRecord) : false);
+
+	// See SelectField's equivalent effect — same idea, but pruning the array
+	// down to values still present in the (possibly just-changed) options
+	// instead of clearing a single scalar value outright.
+	$effect(() => {
+		if (!field.dependentOptions) return;
+		const current = record[field.attribute];
+		if (!Array.isArray(current)) return;
+		const validValues = new Set(selectOptions.map((o) => o.value));
+		const pruned = current.filter((v) => validValues.has(String(v)));
+		if (pruned.length !== current.length) {
+			record[field.attribute] = pruned;
+		}
+	});
+</script>
+
+{@render labelRow()}
+
+{#if readonly}
+	<input
+		type="text"
+		id={field.attribute}
+		class="input input-bordered w-full"
+		value={(Array.isArray(saved) ? saved : [])
+			.map((v) => selectOptions.find((o) => o.value === String(v))?.label ?? String(v))
+			.join(', ')}
+		disabled
+	/>
+{:else}
+	<MultiSelect
+		id={field.attribute}
+		name={field.attribute}
+		bind:value={record[field.attribute] as string[]}
+		options={selectOptions}
+		search={field.search}
+		placeholder={field.placeholder}
+		disabled={fieldDisabled}
+		{error}
+	/>
+{/if}
+
+{@render errorRow()}

package/dist/components/crud/fields/SelectField.svelte

@@ -1,67 +1,67 @@
-<script lang="ts" generics="T extends object = Record<string, unknown>">
-	import type { Snippet } from 'svelte';
-	import Select from '../../form/Select.svelte';
-	import type { FieldDefinition } from '../../../types/crud/fields.js';
-
-	let {
-		field,
-		record = $bindable({} as Record<string, unknown>),
-		parentRecord = undefined,
-		error = '',
-		readonly = false,
-		labelRow,
-		errorRow
-	}: {
-		field: FieldDefinition<T>;
-		record?: Record<string, unknown>;
-		parentRecord?: Record<string, unknown>;
-		error?: string;
-		readonly?: boolean;
-		labelRow: Snippet;
-		errorRow: Snippet;
-	} = $props();
-
-	const saved = $derived(record[field.attribute]);
-	const displayValue = $derived(saved == null ? '' : String(saved));
-	const selectOptions = $derived(
-		field.dependentOptions ? field.dependentOptions(record, parentRecord) : (field.options ?? [])
-	);
-	const fieldDisabled = $derived(field.disabled ? field.disabled(record, parentRecord) : false);
-
-	// A previously-valid selection can fall outside a dependentOptions list
-	// that just changed (e.g. its options depend on a sibling/parent field) —
-	// clears it instead of silently keeping a value the user can no longer see
-	// or re-pick from the dropdown.
-	$effect(() => {
-		if (!field.dependentOptions) return;
-		const current = record[field.attribute];
-		if (current && !selectOptions.some((o) => o.value === String(current))) {
-			record[field.attribute] = '';
-		}
-	});
-</script>
-
-{@render labelRow()}
-
-{#if readonly}
-	<input
-		type="text"
-		id={field.attribute}
-		class="input input-bordered w-full"
-		value={selectOptions.find((o) => o.value === String(saved))?.label ?? displayValue}
-		disabled
-	/>
-{:else}
-	<Select
-		id={field.attribute}
-		name={field.attribute}
-		bind:value={record[field.attribute] as string}
-		options={selectOptions}
-		search={field.search}
-		placeholder={field.placeholder}
-		disabled={fieldDisabled}
-		{error}
-	/>
-{/if}
-
-{@render errorRow()}
+<script lang="ts" generics="T extends object = Record<string, unknown>">
+	import type { Snippet } from 'svelte';
+	import Select from '../../form/Select.svelte';
+	import type { FieldDefinition } from '../../../types/crud/fields.js';
+
+	let {
+		field,
+		record = $bindable({} as Record<string, unknown>),
+		parentRecord = undefined,
+		error = '',
+		readonly = false,
+		labelRow,
+		errorRow
+	}: {
+		field: FieldDefinition<T>;
+		record?: Record<string, unknown>;
+		parentRecord?: Record<string, unknown>;
+		error?: string;
+		readonly?: boolean;
+		labelRow: Snippet;
+		errorRow: Snippet;
+	} = $props();
+
+	const saved = $derived(record[field.attribute]);
+	const displayValue = $derived(saved == null ? '' : String(saved));
+	const selectOptions = $derived(
+		field.dependentOptions ? field.dependentOptions(record, parentRecord) : (field.options ?? [])
+	);
+	const fieldDisabled = $derived(field.disabled ? field.disabled(record, parentRecord) : false);
+
+	// A previously-valid selection can fall outside a dependentOptions list
+	// that just changed (e.g. its options depend on a sibling/parent field) —
+	// clears it instead of silently keeping a value the user can no longer see
+	// or re-pick from the dropdown.
+	$effect(() => {
+		if (!field.dependentOptions) return;
+		const current = record[field.attribute];
+		if (current && !selectOptions.some((o) => o.value === String(current))) {
+			record[field.attribute] = '';
+		}
+	});
+</script>
+
+{@render labelRow()}
+
+{#if readonly}
+	<input
+		type="text"
+		id={field.attribute}
+		class="input input-bordered w-full"
+		value={selectOptions.find((o) => o.value === String(saved))?.label ?? displayValue}
+		disabled
+	/>
+{:else}
+	<Select
+		id={field.attribute}
+		name={field.attribute}
+		bind:value={record[field.attribute] as string}
+		options={selectOptions}
+		search={field.search}
+		placeholder={field.placeholder}
+		disabled={fieldDisabled}
+		{error}
+	/>
+{/if}
+
+{@render errorRow()}

package/dist/components/crud/fields/TextareaField.svelte

@@ -1,55 +1,55 @@
-<script lang="ts" generics="T extends object = Record<string, unknown>">
-	import type { Snippet } from 'svelte';
-	import type { FieldDefinition } from '../../../types/crud/fields.js';
-
-	let {
-		field,
-		record = $bindable({} as Record<string, unknown>),
-		parentRecord = undefined,
-		error = '',
-		readonly = false,
-		labelRow,
-		errorRow
-	}: {
-		field: FieldDefinition<T>;
-		record?: Record<string, unknown>;
-		parentRecord?: Record<string, unknown>;
-		error?: string;
-		readonly?: boolean;
-		labelRow: Snippet;
-		errorRow: Snippet;
-	} = $props();
-
-	const name = $derived(readonly ? undefined : field.attribute);
-	const saved = $derived(record[field.attribute]);
-	const displayValue = $derived(saved == null ? '' : String(saved));
-	const formattedValue = $derived(
-		readonly && field.formatter ? field.formatter(saved, record) : displayValue
-	);
-	const fieldDisabled = $derived(field.disabled ? field.disabled(record, parentRecord) : false);
-</script>
-
-{@render labelRow()}
-
-{#if readonly}
-	<textarea
-		id={field.attribute}
-		rows={field.rows}
-		class="textarea textarea-bordered bg-base-100 w-full"
-		value={formattedValue}
-		disabled
-	></textarea>
-{:else}
-	<textarea
-		id={field.attribute}
-		{name}
-		rows={field.rows}
-		placeholder={field.placeholder ?? ''}
-		bind:value={record[field.attribute]}
-		class="textarea textarea-bordered bg-base-100 w-full"
-		class:textarea-error={!!error}
-		disabled={fieldDisabled}
-	></textarea>
-{/if}
-
-{@render errorRow()}
+<script lang="ts" generics="T extends object = Record<string, unknown>">
+	import type { Snippet } from 'svelte';
+	import type { FieldDefinition } from '../../../types/crud/fields.js';
+
+	let {
+		field,
+		record = $bindable({} as Record<string, unknown>),
+		parentRecord = undefined,
+		error = '',
+		readonly = false,
+		labelRow,
+		errorRow
+	}: {
+		field: FieldDefinition<T>;
+		record?: Record<string, unknown>;
+		parentRecord?: Record<string, unknown>;
+		error?: string;
+		readonly?: boolean;
+		labelRow: Snippet;
+		errorRow: Snippet;
+	} = $props();
+
+	const name = $derived(readonly ? undefined : field.attribute);
+	const saved = $derived(record[field.attribute]);
+	const displayValue = $derived(saved == null ? '' : String(saved));
+	const formattedValue = $derived(
+		readonly && field.formatter ? field.formatter(saved, record) : displayValue
+	);
+	const fieldDisabled = $derived(field.disabled ? field.disabled(record, parentRecord) : false);
+</script>
+
+{@render labelRow()}
+
+{#if readonly}
+	<textarea
+		id={field.attribute}
+		rows={field.rows}
+		class="textarea textarea-bordered bg-base-100 w-full"
+		value={formattedValue}
+		disabled
+	></textarea>
+{:else}
+	<textarea
+		id={field.attribute}
+		{name}
+		rows={field.rows}
+		placeholder={field.placeholder ?? ''}
+		bind:value={record[field.attribute]}
+		class="textarea textarea-bordered bg-base-100 w-full"
+		class:textarea-error={!!error}
+		disabled={fieldDisabled}
+	></textarea>
+{/if}
+
+{@render errorRow()}

package/dist/components/crud/fields/TreeField.svelte

@@ -57,6 +57,7 @@
 		options={selectOptions}
 		disabled={fieldDisabled}
 		defaultExpanded={field.defaultExpanded ?? true}
+		searchable={field.searchable ?? true}
 	/>
 {/if}
 

package/dist/components/crud/utils/resolution.js

@@ -75,6 +75,7 @@ export function buildFieldDefinitions(meta, data, excludedFlag, excluded) {
         revalidate: m.revalidate,
         dependsOn: m.dependsOn,
         defaultExpanded: m.defaultExpanded,
+        searchable: m.searchable,
         row: m.row,
         actions: m.actions
     }));

package/dist/components/crud/utils/tree.d.ts

@@ -1,3 +1,8 @@
 import type { SelectOption } from '../../../types/attribute.js';
 export declare function buildChildrenByParent(options: SelectOption[]): Map<string | null, SelectOption[]>;
 export declare function collectDescendantIds(value: string, childrenByParent: Map<string | null, SelectOption[]>): string[];
+export interface TreeSearchState {
+    visible: Set<string>;
+    forceExpanded: Set<string>;
+}
+export declare function buildTreeSearchState(query: string, childrenByParent: Map<string | null, SelectOption[]>): TreeSearchState | null;

package/dist/components/crud/utils/tree.js

@@ -25,3 +25,32 @@ export function collectDescendantIds(value, childrenByParent) {
     visit(value);
     return ids;
 }
+// Shared by Tree.svelte: narrows the tree to whatever matches the typed
+// query, by label, case-insensitively. Returns null for a blank query so
+// callers can tell "no filter" apart from "filter matched nothing".
+export function buildTreeSearchState(query, childrenByParent) {
+    const needle = query.trim().toLowerCase();
+    if (!needle)
+        return null;
+    const visible = new Set();
+    const forceExpanded = new Set();
+    function visit(node) {
+        let hasMatchingDescendant = false;
+        for (const child of childrenByParent.get(node.value) ?? []) {
+            if (visit(child))
+                hasMatchingDescendant = true;
+        }
+        const selfMatches = node.label.toLowerCase().includes(needle);
+        if (selfMatches || hasMatchingDescendant) {
+            visible.add(node.value);
+            if (hasMatchingDescendant)
+                forceExpanded.add(node.value);
+            return true;
+        }
+        return false;
+    }
+    for (const root of childrenByParent.get(null) ?? []) {
+        visit(root);
+    }
+    return { visible, forceExpanded };
+}