runeforge 0.0.62 → 0.0.63

package/dist/components/form/PasswordInput.svelte

@@ -1,68 +1,68 @@
-<script lang="ts">
-  import type { FullAutoFill } from 'svelte/elements';
-  import Label from './Label.svelte';
-  import Button from './Button.svelte';
-  import { getIconSet } from '../../icons/context.js';
-  import { defaultIconSet } from '../../icons/sets/default.js';
-
-  let {
-    name,
-    id,
-    value = $bindable(''),
-    autocomplete,
-    required = true,
-    placeholder = '',
-    invalid = false,
-    labelClass,
-    inputClass,
-    buttonClass,
-  }: {
-    name?: string;
-    id?: string;
-    value?: string;
-    autocomplete?: FullAutoFill;
-    required?: boolean;
-    placeholder?: string;
-    invalid?: boolean;
-    labelClass?: string;
-    inputClass?: string;
-    buttonClass?: string;
-  } = $props();
-
-  const icons = $derived(getIconSet() ?? defaultIconSet);
-  let visible = $state(false);
-</script>
-
-<Label
-  class={[
-    'input input-bordered w-full',
-    { 'input-error': invalid },
-    labelClass
-  ]}
->
-  <input
-    {name}
-    {id}
-    {required}
-    {placeholder}
-    bind:value
-    {autocomplete}
-    type={visible ? 'text' : 'password'}
-    class={['grow', inputClass]}
-  />
-  <Button
-    btn={false}
-    class={['cursor-pointer opacity-60 hover:opacity-100', buttonClass].filter(Boolean).join(' ')}
-    aria-label={visible ? 'Ocultar contraseña' : 'Mostrar contraseña'}
-    aria-pressed={visible}
-    onclick={() => (visible = !visible)}
-  >
-    {#if visible}
-      {@const HideIcon = icons.passwordHide}
-      <HideIcon class="size-4" />
-    {:else}
-      {@const ShowIcon = icons.passwordShow}
-      <ShowIcon class="size-4" />
-    {/if}
-  </Button>
-</Label>
+<script lang="ts">
+  import type { FullAutoFill } from 'svelte/elements';
+  import Label from './Label.svelte';
+  import Button from './Button.svelte';
+  import { getIconSet } from '../../icons/context.js';
+  import { defaultIconSet } from '../../icons/sets/default.js';
+
+  let {
+    name,
+    id,
+    value = $bindable(''),
+    autocomplete,
+    required = true,
+    placeholder = '',
+    invalid = false,
+    labelClass,
+    inputClass,
+    buttonClass,
+  }: {
+    name?: string;
+    id?: string;
+    value?: string;
+    autocomplete?: FullAutoFill;
+    required?: boolean;
+    placeholder?: string;
+    invalid?: boolean;
+    labelClass?: string;
+    inputClass?: string;
+    buttonClass?: string;
+  } = $props();
+
+  const icons = $derived(getIconSet() ?? defaultIconSet);
+  let visible = $state(false);
+</script>
+
+<Label
+  class={[
+    'input input-bordered w-full',
+    { 'input-error': invalid },
+    labelClass
+  ]}
+>
+  <input
+    {name}
+    {id}
+    {required}
+    {placeholder}
+    bind:value
+    {autocomplete}
+    type={visible ? 'text' : 'password'}
+    class={['grow', inputClass]}
+  />
+  <Button
+    btn={false}
+    class={['cursor-pointer opacity-60 hover:opacity-100', buttonClass].filter(Boolean).join(' ')}
+    aria-label={visible ? 'Ocultar contraseña' : 'Mostrar contraseña'}
+    aria-pressed={visible}
+    onclick={() => (visible = !visible)}
+  >
+    {#if visible}
+      {@const HideIcon = icons.passwordHide}
+      <HideIcon class="size-4" />
+    {:else}
+      {@const ShowIcon = icons.passwordShow}
+      <ShowIcon class="size-4" />
+    {/if}
+  </Button>
+</Label>

package/dist/components/form/Required.svelte

@@ -1 +1 @@
-<span class="text-error ml-0.5">*</span>
+<span class="text-error ml-0.5">*</span>

package/dist/components/form/Select.svelte

@@ -1,209 +1,209 @@
-<script lang="ts">
-	import { getStrings } from '../../i18n/context.js';
-	import type { SearchResolver } from '../../types/attribute.js';
-
-	const strings = getStrings();
-
-	let {
-		name,
-		id,
-		value = $bindable(''),
-		options = [],
-		search: searchFn,
-		searchDebounceMs = 300,
-		placeholder = strings.selectPlaceholder,
-		error = '',
-		disabled = false
-	}: {
-		name?: string;
-		id?: string;
-		value?: string;
-		options?: { value: string; label: string }[];
-		search?: SearchResolver;
-		searchDebounceMs?: number;
-		placeholder?: string;
-		error?: string;
-		disabled?: boolean;
-	} = $props();
-
-	const popId = $props.id();
-	const anchorName = `--select-anchor-${popId}`;
-
-	let query = $state('');
-	let open = $state(false);
-	let containerEl: HTMLElement | undefined = $state();
-	let popoverEl: HTMLElement | undefined = $state();
-	let inputEl: HTMLInputElement | undefined = $state();
-
-	// Options resolved by `searchFn` for the current query; null while no
-	// server search has run yet (e.g. box just opened, query still empty).
-	let remoteResults = $state<{ value: string; label: string }[] | null>(null);
-	let searching = $state(false);
-	// Label of whatever was last picked from `remoteResults`, kept around so the
-	// closed-state input can still show it even though it isn't in `options`.
-	let pickedLabel = $state<string | null>(null);
-
-	let searchToken = 0;
-	$effect(() => {
-		if (!searchFn) return;
-		const q = query.trim();
-		if (!q) {
-			remoteResults = null;
-			searching = false;
-			return;
-		}
-		const token = ++searchToken;
-		searching = true;
-		const timer = setTimeout(() => {
-			searchFn(q).then((results) => {
-				if (token !== searchToken) return; // stale response, a newer query took over
-				remoteResults = results;
-				searching = false;
-			});
-		}, searchDebounceMs);
-		return () => clearTimeout(timer);
-	});
-
-	const filtered = $derived(
-		searchFn
-			? (remoteResults ?? options)
-			: query.trim()
-				? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
-				: options
-	);
-
-	const selectedLabel = $derived(
-		value === '' ? '' : (options.find((o) => o.value === value)?.label ?? pickedLabel ?? '')
-	);
-
-	function openPopover() {
-		open = true;
-		query = '';
-		popoverEl?.showPopover();
-	}
-
-	function pick(option: { value: string; label: string }) {
-		value = option.value;
-		pickedLabel = option.label;
-		query = '';
-		popoverEl?.hidePopover();
-		inputEl?.blur();
-	}
-
-	function clear() {
-		value = '';
-		pickedLabel = null;
-		query = '';
-		popoverEl?.hidePopover();
-		inputEl?.blur();
-	}
-
-	// Catches dismissal paths that don't go through pick()/clear() (outside
-	// click, Escape), so a stale search doesn't linger for next time it opens.
-	function onToggle(e: Event) {
-		if ((e as ToggleEvent).newState === 'closed') {
-			open = false;
-			query = '';
-		}
-	}
-
-	// Escape can be pressed while an option button has focus (not just the
-	// text input), so this is wired at the container level rather than on
-	// the input alone — otherwise picking an option and then hitting Escape
-	// would leave the popover open with nothing listening for the key.
-	function onKeydown(e: KeyboardEvent) {
-		if (e.key === 'Enter' && e.target === inputEl) {
-			// The trigger used to be a plain button, so Enter never submitted the
-			// surrounding form. Now that it's a text input, guard against that.
-			e.preventDefault();
-		} else if (e.key === 'Escape') {
-			// Also suppress the browser's native "revert to last value" behavior
-			// for text inputs on Escape, which would otherwise race our own
-			// close-and-restore-label update and blank the field.
-			e.preventDefault();
-			popoverEl?.hidePopover();
-		}
-	}
-
-	// The trigger is a text input now, not a button, so it can't rely on the
-	// native `popovertarget` invoker exclusion to survive its own opening
-	// click (that relationship only applies to button-like elements — for a
-	// text input, the click that focuses it and opens the popover would
-	// immediately light-dismiss it again). `popover="manual"` opts out of
-	// that dismiss behavior entirely; this handler reimplements "close when
-	// focus leaves the widget" instead.
-	function onFocusOut(e: FocusEvent) {
-		const next = e.relatedTarget as Node | null;
-		if (!next || !containerEl?.contains(next)) {
-			popoverEl?.hidePopover();
-		}
-	}
-</script>
-
-<!--
-  The keydown/focusout handlers here are event delegation for the input and
-  popover option buttons below, not interaction with this div itself — every
-  actually-interactive element inside already has correct native semantics.
--->
-<!-- svelte-ignore a11y_no_static_element_interactions -->
-<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
-<div class="relative w-full" bind:this={containerEl} onfocusout={onFocusOut} onkeydown={onKeydown}>
-	{#if name}
-		<input type="hidden" {name} {value} />
-	{/if}
-
-	<input
-		bind:this={inputEl}
-		{id}
-		type="text"
-		class="input input-bordered w-full font-normal"
-		class:input-error={!!error}
-		{disabled}
-		{placeholder}
-		value={open ? query : selectedLabel}
-		oninput={(e) => (query = e.currentTarget.value)}
-		onfocus={openPopover}
-		style="anchor-name:{anchorName}"
-		autocomplete="off"
-	/>
-
-	<div
-		popover="manual"
-		id={popId}
-		bind:this={popoverEl}
-		style="position-anchor:{anchorName}; width:anchor-size(width); position-try-fallbacks:flip-block;"
-		class="dropdown mt-1 rounded-box border border-base-content/10 bg-base-100 shadow-lg"
-		ontoggle={onToggle}
-	>
-		<ul class="max-h-48 overflow-y-auto p-1">
-			<li>
-				<button
-					type="button"
-					class="w-full rounded-btn px-3 py-2 text-left text-sm text-base-content/40 hover:bg-base-200"
-					onclick={clear}
-				>
-					{placeholder}
-				</button>
-			</li>
-			{#if searching}
-				<li class="px-3 py-2 text-sm text-base-content/40">{strings.selectSearching}</li>
-			{/if}
-			{#each filtered as option (option.value)}
-				<li>
-					<button
-						type="button"
-						class="w-full rounded-btn px-3 py-2 text-left text-sm hover:bg-base-200"
-						class:bg-primary={value === option.value}
-						class:text-primary-content={value === option.value}
-						onclick={() => pick(option)}
-					>
-						{option.label}
-					</button>
-				</li>
-			{/each}
-			{#if !searching && filtered.length === 0}
-				<li class="px-3 py-2 text-sm text-base-content/40">{strings.selectNoResults}</li>
-			{/if}
-		</ul>
-	</div>
-</div>
+<script lang="ts">
+	import { getStrings } from '../../i18n/context.js';
+	import type { SearchResolver } from '../../types/attribute.js';
+
+	const strings = getStrings();
+
+	let {
+		name,
+		id,
+		value = $bindable(''),
+		options = [],
+		search: searchFn,
+		searchDebounceMs = 300,
+		placeholder = strings.selectPlaceholder,
+		error = '',
+		disabled = false
+	}: {
+		name?: string;
+		id?: string;
+		value?: string;
+		options?: { value: string; label: string }[];
+		search?: SearchResolver;
+		searchDebounceMs?: number;
+		placeholder?: string;
+		error?: string;
+		disabled?: boolean;
+	} = $props();
+
+	const popId = $props.id();
+	const anchorName = `--select-anchor-${popId}`;
+
+	let query = $state('');
+	let open = $state(false);
+	let containerEl: HTMLElement | undefined = $state();
+	let popoverEl: HTMLElement | undefined = $state();
+	let inputEl: HTMLInputElement | undefined = $state();
+
+	// Options resolved by `searchFn` for the current query; null while no
+	// server search has run yet (e.g. box just opened, query still empty).
+	let remoteResults = $state<{ value: string; label: string }[] | null>(null);
+	let searching = $state(false);
+	// Label of whatever was last picked from `remoteResults`, kept around so the
+	// closed-state input can still show it even though it isn't in `options`.
+	let pickedLabel = $state<string | null>(null);
+
+	let searchToken = 0;
+	$effect(() => {
+		if (!searchFn) return;
+		const q = query.trim();
+		if (!q) {
+			remoteResults = null;
+			searching = false;
+			return;
+		}
+		const token = ++searchToken;
+		searching = true;
+		const timer = setTimeout(() => {
+			searchFn(q).then((results) => {
+				if (token !== searchToken) return; // stale response, a newer query took over
+				remoteResults = results;
+				searching = false;
+			});
+		}, searchDebounceMs);
+		return () => clearTimeout(timer);
+	});
+
+	const filtered = $derived(
+		searchFn
+			? (remoteResults ?? options)
+			: query.trim()
+				? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
+				: options
+	);
+
+	const selectedLabel = $derived(
+		value === '' ? '' : (options.find((o) => o.value === value)?.label ?? pickedLabel ?? '')
+	);
+
+	function openPopover() {
+		open = true;
+		query = '';
+		popoverEl?.showPopover();
+	}
+
+	function pick(option: { value: string; label: string }) {
+		value = option.value;
+		pickedLabel = option.label;
+		query = '';
+		popoverEl?.hidePopover();
+		inputEl?.blur();
+	}
+
+	function clear() {
+		value = '';
+		pickedLabel = null;
+		query = '';
+		popoverEl?.hidePopover();
+		inputEl?.blur();
+	}
+
+	// Catches dismissal paths that don't go through pick()/clear() (outside
+	// click, Escape), so a stale search doesn't linger for next time it opens.
+	function onToggle(e: Event) {
+		if ((e as ToggleEvent).newState === 'closed') {
+			open = false;
+			query = '';
+		}
+	}
+
+	// Escape can be pressed while an option button has focus (not just the
+	// text input), so this is wired at the container level rather than on
+	// the input alone — otherwise picking an option and then hitting Escape
+	// would leave the popover open with nothing listening for the key.
+	function onKeydown(e: KeyboardEvent) {
+		if (e.key === 'Enter' && e.target === inputEl) {
+			// The trigger used to be a plain button, so Enter never submitted the
+			// surrounding form. Now that it's a text input, guard against that.
+			e.preventDefault();
+		} else if (e.key === 'Escape') {
+			// Also suppress the browser's native "revert to last value" behavior
+			// for text inputs on Escape, which would otherwise race our own
+			// close-and-restore-label update and blank the field.
+			e.preventDefault();
+			popoverEl?.hidePopover();
+		}
+	}
+
+	// The trigger is a text input now, not a button, so it can't rely on the
+	// native `popovertarget` invoker exclusion to survive its own opening
+	// click (that relationship only applies to button-like elements — for a
+	// text input, the click that focuses it and opens the popover would
+	// immediately light-dismiss it again). `popover="manual"` opts out of
+	// that dismiss behavior entirely; this handler reimplements "close when
+	// focus leaves the widget" instead.
+	function onFocusOut(e: FocusEvent) {
+		const next = e.relatedTarget as Node | null;
+		if (!next || !containerEl?.contains(next)) {
+			popoverEl?.hidePopover();
+		}
+	}
+</script>
+
+<!--
+  The keydown/focusout handlers here are event delegation for the input and
+  popover option buttons below, not interaction with this div itself — every
+  actually-interactive element inside already has correct native semantics.
+-->
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<!-- svelte-ignore a11y_no_noninteractive_element_interactions -->
+<div class="relative w-full" bind:this={containerEl} onfocusout={onFocusOut} onkeydown={onKeydown}>
+	{#if name}
+		<input type="hidden" {name} {value} />
+	{/if}
+
+	<input
+		bind:this={inputEl}
+		{id}
+		type="text"
+		class="input input-bordered w-full font-normal"
+		class:input-error={!!error}
+		{disabled}
+		{placeholder}
+		value={open ? query : selectedLabel}
+		oninput={(e) => (query = e.currentTarget.value)}
+		onfocus={openPopover}
+		style="anchor-name:{anchorName}"
+		autocomplete="off"
+	/>
+
+	<div
+		popover="manual"
+		id={popId}
+		bind:this={popoverEl}
+		style="position-anchor:{anchorName}; width:anchor-size(width); position-try-fallbacks:flip-block;"
+		class="dropdown mt-1 rounded-box border border-base-content/10 bg-base-100 shadow-lg"
+		ontoggle={onToggle}
+	>
+		<ul class="max-h-48 overflow-y-auto p-1">
+			<li>
+				<button
+					type="button"
+					class="w-full rounded-btn px-3 py-2 text-left text-sm text-base-content/40 hover:bg-base-200"
+					onclick={clear}
+				>
+					{placeholder}
+				</button>
+			</li>
+			{#if searching}
+				<li class="px-3 py-2 text-sm text-base-content/40">{strings.selectSearching}</li>
+			{/if}
+			{#each filtered as option (option.value)}
+				<li>
+					<button
+						type="button"
+						class="w-full rounded-btn px-3 py-2 text-left text-sm hover:bg-base-200"
+						class:bg-primary={value === option.value}
+						class:text-primary-content={value === option.value}
+						onclick={() => pick(option)}
+					>
+						{option.label}
+					</button>
+				</li>
+			{/each}
+			{#if !searching && filtered.length === 0}
+				<li class="px-3 py-2 text-sm text-base-content/40">{strings.selectNoResults}</li>
+			{/if}
+		</ul>
+	</div>
+</div>

package/dist/components/form/Tree.svelte

@@ -1,8 +1,15 @@
 <script lang="ts">
 	import type { SelectOption } from '../../types/attribute.js';
-	import { buildChildrenByParent, collectDescendantIds } from '../crud/utils/tree.js';
+	import {
+		buildChildrenByParent,
+		buildTreeSearchState,
+		collectDescendantIds
+	} from '../crud/utils/tree.js';
+	import { getStrings } from '../../i18n/context.js';
 	import TreeNode from './TreeNode.svelte';
 
+	const strings = getStrings();
+
 	let {
 		name,
 		value = $bindable([]),
@@ -10,6 +17,7 @@
 		disabled = false,
 		columns = 1,
 		defaultExpanded = true,
+		searchable = true
 	}: {
 		name?: string;
 		value?: string[];
@@ -17,11 +25,18 @@
 		disabled?: boolean;
 		columns?: number;
 		defaultExpanded?: boolean;
+		searchable?: boolean;
 	} = $props();
 
+	let query = $state('');
+
 	const childrenByParent = $derived(buildChildrenByParent(options));
 	const selected = $derived(new Set(value));
-	const roots = $derived(childrenByParent.get(null) ?? []);
+	const searchState = $derived(buildTreeSearchState(query, childrenByParent));
+	const allRoots = $derived(childrenByParent.get(null) ?? []);
+	const roots = $derived(
+		searchState ? allRoots.filter((root) => searchState.visible.has(root.value)) : allRoots
+	);
 
 	function toggle(nodeValue: string, checked: boolean) {
 		const affected = [nodeValue, ...collectDescendantIds(nodeValue, childrenByParent)];
@@ -34,6 +49,17 @@
 	}
 </script>
 
+{#if searchable && options.length > 0}
+	<input
+		type="search"
+		class="input input-bordered input-sm mb-2 w-full"
+		placeholder={strings.searchPlaceholder}
+		bind:value={query}
+		{disabled}
+		aria-label={strings.searchPlaceholder}
+	/>
+{/if}
+
 <div
 	class="overflow-y-auto rounded-box border border-base-300 p-2"
 	style="max-height: var(--runeforge-tree-max-height, 24rem)"
@@ -44,11 +70,24 @@
 		<input type="hidden" {name} value={JSON.stringify(value)} />
 	{/if}
 	{#if roots.length === 0}
-		<p class="px-1 py-2 text-sm text-base-content/40">—</p>
+		<p class="px-1 py-2 text-sm text-base-content/40">
+			{searchState ? strings.selectNoResults : '—'}
+		</p>
 	{/if}
 	<div class:leaf-columns={columns > 1} style={`--columns: ${columns}`}>
 		{#each roots as root (root.value)}
-			<TreeNode node={root} {childrenByParent} {selected} onToggle={toggle} {disabled} depth={0} {columns} {defaultExpanded} />
+			<TreeNode
+				node={root}
+				{childrenByParent}
+				{selected}
+				onToggle={toggle}
+				{disabled}
+				depth={0}
+				{columns}
+				{defaultExpanded}
+				visible={searchState?.visible ?? null}
+				forceExpanded={searchState?.forceExpanded ?? null}
+			/>
 		{/each}
 	</div>
 </div>

package/dist/components/form/Tree.svelte.d.ts

@@ -6,6 +6,7 @@ type $$ComponentProps = {
     disabled?: boolean;
     columns?: number;
     defaultExpanded?: boolean;
+    searchable?: boolean;
 };
 declare const Tree: import("svelte").Component<$$ComponentProps, {}, "value">;
 type Tree = ReturnType<typeof Tree>;