data browser wip

2026-10-24 02:42:31 +00:00
parent c8205e474e
commit 941a9f16e1
22 changed files with 2141 additions and 6 deletions
--- a/src/lib/components/data/FieldInput.svelte
+++ b/src/lib/components/data/FieldInput.svelte
@@ -0,0 +1,146 @@
+<script lang="ts">
+	import type { Col } from './data-format.js';
+
+	let {
+		column,
+		value = $bindable(null),
+		lookupUrl,
+		autofocus = false,
+		compact = false,
+		onsave,
+		oncancel
+	}: {
+		column: Col;
+		value: string | null;
+		lookupUrl?: string;
+		autofocus?: boolean;
+		compact?: boolean;
+		onsave?: (move?: 'next' | 'prev') => void;
+		oncancel?: () => void;
+	} = $props();
+
+	const kind = $derived(column.kind);
+	const long = $derived(
+		kind === 'json' || column.uiType === 'longtext' || (kind === 'text' && (value?.length ?? 0) > 80)
+	);
+	const listId = `fk-${Math.random().toString(36).slice(2)}`;
+	let options = $state.raw<{ value: string; label: string }[]>([]);
+	let timer: ReturnType<typeof setTimeout> | undefined;
+
+	async function lookup(q: string) {
+		if (!column.fk || !lookupUrl) return;
+		const url = `${lookupUrl}?column=${encodeURIComponent(column.name)}&q=${encodeURIComponent(q)}`;
+		const res = await fetch(url).catch(() => null);
+		if (res?.ok) options = (await res.json()).options;
+	}
+	function queueLookup(q: string) {
+		clearTimeout(timer);
+		timer = setTimeout(() => lookup(q), 200);
+	}
+
+	function focusOnMount(node: HTMLElement) {
+		if (!autofocus) return;
+		node.focus();
+		if (node instanceof HTMLInputElement && node.type === 'text') node.select();
+		if (column.fk) lookup('');
+	}
+
+	function keydown(e: KeyboardEvent) {
+		if (e.key === 'Escape') {
+			e.preventDefault();
+			e.stopPropagation();
+			oncancel?.();
+		} else if (e.key === 'Enter' && (!long || e.ctrlKey || e.metaKey)) {
+			e.preventDefault();
+			e.stopPropagation();
+			onsave?.();
+		} else if (e.key === 'Tab' && onsave) {
+			e.preventDefault();
+			e.stopPropagation();
+			onsave(e.shiftKey ? 'prev' : 'next');
+		}
+	}
+
+	const base =
+		'w-full rounded border border-[var(--site-border)] bg-[var(--site-bg)] px-2 py-1 text-sm focus:outline-2 focus:outline-[var(--site-text)]';
+	const placeholder = $derived(
+		value === null ? (column.hasDefault ? `default${column.defaultExpr ? `: ${column.defaultExpr}` : ''}` : 'null') : ''
+	);
+</script>
+
+<div class={['flex items-start gap-1', compact ? '' : 'w-full']}>
+	{#if kind === 'bool'}
+		<select
+			class={base}
+			value={value ?? ''}
+			onchange={(e) => (value = e.currentTarget.value === '' ? null : e.currentTarget.value)}
+			onkeydown={keydown}
+			{@attach focusOnMount}
+			aria-label={column.label}
+		>
+			{#if column.nullable || column.hasDefault}<option value="">{column.hasDefault ? '(default)' : 'null'}</option>{/if}
+			<option value="true">true</option>
+			<option value="false">false</option>
+		</select>
+	{:else if kind === 'enum' || (column.uiType === 'select' && column.enumValues.length)}
+		<select
+			class={base}
+			value={value ?? ''}
+			onchange={(e) => (value = e.currentTarget.value === '' ? null : e.currentTarget.value)}
+			onkeydown={keydown}
+			{@attach focusOnMount}
+			aria-label={column.label}
+		>
+			{#if column.nullable || column.hasDefault}<option value="">{column.hasDefault ? '(default)' : 'null'}</option>{/if}
+			{#each column.enumValues as v (v)}<option value={v}>{v}</option>{/each}
+		</select>
+	{:else if long}
+		<textarea
+			class={[base, 'min-h-24 font-mono']}
+			rows={kind === 'json' ? 6 : 3}
+			value={value ?? ''}
+			{placeholder}
+			oninput={(e) => (value = e.currentTarget.value)}
+			onkeydown={keydown}
+			{@attach focusOnMount}
+			aria-label={column.label}
+		></textarea>
+	{:else}
+		<input
+			class={base}
+			type={kind === 'date'
+				? 'date'
+				: kind === 'datetime'
+					? 'datetime-local'
+					: kind === 'time'
+						? 'time'
+						: kind === 'number'
+							? 'number'
+							: 'text'}
+			step={kind === 'number' ? 'any' : kind === 'datetime' || kind === 'time' ? 1 : undefined}
+			list={column.fk ? listId : undefined}
+			value={value ?? ''}
+			{placeholder}
+			oninput={(e) => {
+				value = e.currentTarget.value;
+				if (column.fk) queueLookup(e.currentTarget.value);
+			}}
+			onkeydown={keydown}
+			{@attach focusOnMount}
+			aria-label={column.label}
+		/>
+		{#if column.fk}
+			<datalist id={listId}>
+				{#each options as o (o.value)}<option value={o.value}>{o.label}</option>{/each}
+			</datalist>
+		{/if}
+	{/if}
+	{#if column.nullable && value !== null}
+		<button
+			type="button"
+			class="shrink-0 rounded px-1.5 py-1 text-xs text-[var(--site-muted)] hover:bg-[var(--site-hover)]"
+			title="Set to NULL"
+			onclick={() => (value = null)}>null</button
+		>
+	{/if}
+</div>