@ruckc/truss-ui 0.0.0-stage → 1.0.0

package/dist/components/Combobox.svelte

@@ -0,0 +1,131 @@
+<script lang="ts">
+	import { SvelteMap } from 'svelte/reactivity';
+	import Button from './Button.svelte';
+	import Popover from './Popover.svelte';
+	import OptionList from './OptionList.svelte';
+	import type { Option } from '../types.js';
+
+	let {
+		options = [],
+		loadOptions,
+		value = $bindable(),
+		label,
+		ariaLabel,
+		placeholder = 'Type to search…',
+		allowCustom = false,
+		disabled = false,
+		error,
+		debounce = 200
+	}: {
+		options?: Option[];
+		/** Async source (server search). Receives the query and an AbortSignal for stale requests. */
+		loadOptions?: (query: string, signal: AbortSignal) => Promise<Option[]>;
+		value?: string;
+		label?: string;
+		/** Accessible name when no visible `label` is shown. */
+		ariaLabel?: string;
+		placeholder?: string;
+		/** Accept free text as the value when nothing is picked. */
+		allowCustom?: boolean;
+		disabled?: boolean;
+		error?: string;
+		debounce?: number;
+	} = $props();
+
+	const id = $props.id();
+	let open = $state(false);
+	let text = $state('');
+	let dirty = $state(false);
+	let active = $state(0);
+	let items = $state<Option[]>([]);
+	let loading = $state(false);
+	let input: HTMLInputElement;
+	const known = new SvelteMap<string, string>();
+
+	const labelOf = (v: string) => known.get(v) ?? v;
+	$effect(() => { for (const o of options) known.set(String(o.value), o.label); });
+	$effect(() => { if (!dirty) text = value ? labelOf(value) : ''; });
+
+	const shown = $derived(
+		loadOptions ? items : dirty ? options.filter((o) => o.label.toLowerCase().includes(text.trim().toLowerCase())) : options
+	);
+
+	let timer: ReturnType<typeof setTimeout>;
+	let ctrl: AbortController | undefined;
+	/** A typed query has not produced results yet (debouncing or in flight): the list on screen is stale. */
+	let pending = $state(false);
+	$effect(() => () => { clearTimeout(timer); ctrl?.abort(); });
+
+	async function run(q: string) {
+		ctrl?.abort();
+		const c = (ctrl = new AbortController());
+		loading = true;
+		try {
+			const r = await loadOptions!(q, c.signal);
+			if (c.signal.aborted) return;
+			items = r;
+			for (const o of r) known.set(String(o.value), o.label);
+		} catch {
+			if (!c.signal.aborted) items = [];
+		} finally {
+			if (!c.signal.aborted) { loading = false; pending = false; }
+		}
+	}
+
+	function onInput() {
+		dirty = true; open = true; active = 0;
+		if (loadOptions) { pending = true; ctrl?.abort(); clearTimeout(timer); timer = setTimeout(() => run(text.trim()), debounce); }
+	}
+	function openList() {
+		if (disabled) return;
+		open = true;
+		if (loadOptions && !dirty) run('');
+	}
+	function choose(o: Option) {
+		value = String(o.value); known.set(value, o.label);
+		text = o.label; dirty = false; open = false;
+		if (loadOptions) { ctrl?.abort(); pending = false; items = []; } // the next open starts from the full list
+	}
+	function settle() {
+		if (dirty) {
+			const t = text.trim();
+			if (!t) value = undefined;
+			else if (allowCustom) value = t;
+		}
+		dirty = false;
+		text = value ? labelOf(value) : '';
+	}
+	function onKey(e: KeyboardEvent) {
+		const n = shown.length;
+		if (e.key === 'ArrowDown') { e.preventDefault(); if (!open) openList(); else active = (active + 1) % Math.max(n, 1); }
+		else if (e.key === 'ArrowUp') { e.preventDefault(); if (!open) openList(); else active = (active - 1 + n) % Math.max(n, 1); }
+		else if (e.key === 'Enter') {
+			if (pending) { e.preventDefault(); if (allowCustom) settle(); return; } // don't pick from the previous query's list
+			if (open && shown[active]) { e.preventDefault(); choose(shown[active]); }
+			else if (allowCustom) settle();
+		} else if (e.key === 'Escape' && (open || dirty)) { open = false; dirty = false; text = value ? labelOf(value) : ''; }
+	}
+</script>
+
+<div class="tr-field">
+	{#if label}<label class="tr-label" for={id}>{label}</label>{/if}
+	<div class="tr-anchor">
+		<div class="tr-control" data-trail={!!value && !disabled} data-invalid={!!error} data-disabled={disabled}>
+			<input
+				class="tr-bare" {id} aria-label={label ? undefined : ariaLabel} bind:this={input} bind:value={text} {placeholder} {disabled} autocomplete="off"
+				role="combobox" aria-autocomplete="list" aria-expanded={open} aria-controls="{id}-list"
+				aria-activedescendant={open && shown.length ? `${id}-list-opt-${active}` : undefined}
+				onclick={openList} oninput={onInput} onkeydown={onKey} onblur={settle}
+			/>
+			{#if value && !disabled}
+				<Button variant="minimal" intent="neutral" size="sm" icon="cross" aria-label="Clear" tabindex={-1}
+					onclick={() => { value = undefined; text = ''; dirty = false; input.focus(); }} />
+			{/if}
+		</div>
+		<Popover bind:open>
+			<OptionList id="{id}-list" options={shown} {active} selected={value ? [value] : []} query={dirty ? text.trim() : ''} {loading}
+				emptyText={allowCustom ? 'Press Enter to use this text' : 'No matches'} onchoose={choose} onhover={(i) => (active = i)} />
+		</Popover>
+	</div>
+	{#if error}<div class="tr-hint" data-error="true">{error}</div>{/if}
+</div>

package/dist/components/Combobox.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Option } from '../types.js';
+type $$ComponentProps = {
+    options?: Option[];
+    /** Async source (server search). Receives the query and an AbortSignal for stale requests. */
+    loadOptions?: (query: string, signal: AbortSignal) => Promise<Option[]>;
+    value?: string;
+    label?: string;
+    /** Accessible name when no visible `label` is shown. */
+    ariaLabel?: string;
+    placeholder?: string;
+    /** Accept free text as the value when nothing is picked. */
+    allowCustom?: boolean;
+    disabled?: boolean;
+    error?: string;
+    debounce?: number;
+};
+declare const Combobox: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Combobox = ReturnType<typeof Combobox>;
+export default Combobox;

package/dist/components/ContextMenu.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import Menu from './Menu.svelte';
+	import type { MenuEntry } from '../types.js';
+
+	let { items, children, label = 'Context menu' }: { items: MenuEntry[]; children: Snippet; label?: string } = $props();
+
+	let at = $state<{ x: number; y: number } | null>(null);
+	let box = $state<HTMLDivElement>();
+	let host: HTMLDivElement;
+	let opener: HTMLElement | null = null;
+
+	function openAt(x: number, y: number) { opener = document.activeElement as HTMLElement | null; at = { x, y }; }
+	function onContext(e: MouseEvent) { e.preventDefault(); openAt(e.clientX, e.clientY); }
+	function onKey(e: KeyboardEvent) {
+		if (e.key === 'ContextMenu' || (e.shiftKey && e.key === 'F10')) {
+			e.preventDefault();
+			const r = ((e.target as HTMLElement | null) ?? host).getBoundingClientRect();
+			openAt(r.left + 16, r.top + 16);
+		}
+	}
+	function close() { at = null; opener?.focus(); }
+
+	// Keep the menu inside the viewport once measured
+	$effect(() => {
+		if (!at || !box) return;
+		const r = box.getBoundingClientRect();
+		if (r.right > innerWidth - 4) box.style.left = `${Math.max(4, innerWidth - r.width - 4)}px`;
+		if (r.bottom > innerHeight - 4) box.style.top = `${Math.max(4, innerHeight - r.height - 4)}px`;
+	});
+</script>
+
+<svelte:window
+	onpointerdown={(e) => at && !box?.contains(e.target as Node) && (at = null)}
+	onkeydown={(e) => e.key === 'Escape' && at && close()}
+	onblur={() => (at = null)}
+	onscroll={() => (at = null)}
+/>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
+<div class="cm" bind:this={host} tabindex="-1" role="presentation" oncontextmenu={onContext} onkeydown={onKey}>{@render children()}</div>
+{#if at}
+	<div class="pop" bind:this={box} style:left="{at.x}px" style:top="{at.y}px">
+		<Menu {items} {label} autofocus onclose={close} />
+	</div>
+{/if}
+
+<style>
+	.cm { display: contents; }
+	.pop { position: fixed; z-index: 300; background: var(--tr-surface-container-low); border: 1px solid var(--tr-outline-variant); border-radius: var(--tr-radius-md); box-shadow: var(--tr-elevation-3); }
+</style>

package/dist/components/ContextMenu.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import type { MenuEntry } from '../types.js';
+type $$ComponentProps = {
+    items: MenuEntry[];
+    children: Snippet;
+    label?: string;
+};
+declare const ContextMenu: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContextMenu = ReturnType<typeof ContextMenu>;
+export default ContextMenu;