@getdom/studio 0.1.0

package/src/pages/forms/_shared/DomFieldLoadingSpinner.vue

@@ -0,0 +1,12 @@
+<template>
+	<span
+		class="inline-flex size-7 shrink-0 items-center justify-center rounded-full text-muted-fg"
+		role="status"
+		aria-label="Loading options"
+	>
+		<svg viewBox="0 0 20 20" class="size-4 animate-spin" fill="none" aria-hidden="true">
+			<circle cx="10" cy="10" r="7" stroke="currentColor" stroke-width="2" opacity="0.25" />
+			<path d="M17 10a7 7 0 0 0-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
+		</svg>
+	</span>
+</template>

package/src/pages/forms/_shared/options.js

@@ -0,0 +1,61 @@
+export function booleanProp(value, defaultValue = false) {
+	if (value === undefined || value === null) return defaultValue;
+	if (value === '' || value === true) return true;
+	if (value === false) return false;
+	return !['false', '0', 'no', 'off'].includes(String(value).toLowerCase());
+}
+
+export function normalizeOption(option, options = {}) {
+	const { stringifyValue = false, allowEmptyValue = false } = options;
+	if (option == null) return null;
+	if (typeof option === 'string' || typeof option === 'number') {
+		const value = stringifyValue ? String(option) : option;
+		return { value, label: String(option) };
+	}
+	const rawValue = option.value ?? option.label;
+	if (rawValue == null || (!allowEmptyValue && rawValue === '')) return null;
+	const value = stringifyValue ? String(rawValue) : rawValue;
+	return {
+		...option,
+		value,
+		label: option.label ?? String(value),
+	};
+}
+
+export function optionKey(value) {
+	return String(value ?? '').toLowerCase();
+}
+
+export function searchableText(option, keys = ['label', 'value', 'description', 'group']) {
+	return keys
+		.map((key) => option?.[key])
+		.filter(Boolean)
+		.join(' ')
+		.toLowerCase();
+}
+
+export function uniqueValues(values, options = {}) {
+	const { transform = (value) => value, key = optionKey } = options;
+	const seen = new Set();
+	const out = [];
+	for (const value of values || []) {
+		const nextValue = transform(value);
+		if (nextValue == null || nextValue === '') continue;
+		const nextKey = key(nextValue);
+		if (seen.has(nextKey)) continue;
+		seen.add(nextKey);
+		out.push(nextValue);
+	}
+	return out;
+}
+
+export function splitTokens(value, separators = [' ', ',']) {
+	const activeSeparators = separators.length ? separators : [' ', ','];
+	const escaped = activeSeparators
+		.map((separator) => String(separator).replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+		.join('');
+	return String(value || '')
+		.split(new RegExp(`[${escaped}\\n\\r\\t]+`))
+		.map((token) => token.trim())
+		.filter(Boolean);
+}

package/src/pages/forms/_shared/useOptionMenu.js

@@ -0,0 +1,59 @@
+import { computed, ref, watch } from 'vue';
+
+export function useOptionMenu(items, options = {}) {
+	const {
+		emitQuery,
+		openOnQuery = true,
+		closeDelay = 120,
+		query: queryRef,
+	} = options;
+	const query = queryRef || ref('');
+	const isOpen = ref(false);
+	const activeIndex = ref(0);
+	const trimmedQuery = computed(() => query.value.trim());
+
+	watch(query, (value) => {
+		emitQuery?.(value);
+		activeIndex.value = 0;
+		if (openOnQuery && value) isOpen.value = true;
+	});
+
+	watch(items, () => {
+		if (activeIndex.value >= items.value.length) {
+			activeIndex.value = Math.max(0, items.value.length - 1);
+		}
+	});
+
+	function wrapIndex(index) {
+		if (!items.value.length) return 0;
+		return (index + items.value.length) % items.value.length;
+	}
+
+	function move(delta) {
+		isOpen.value = true;
+		activeIndex.value = wrapIndex(activeIndex.value + delta);
+	}
+
+	function reset() {
+		query.value = '';
+		isOpen.value = false;
+		activeIndex.value = 0;
+	}
+
+	function closeSoon() {
+		window.setTimeout(() => {
+			isOpen.value = false;
+		}, closeDelay);
+	}
+
+	return {
+		query,
+		isOpen,
+		activeIndex,
+		trimmedQuery,
+		wrapIndex,
+		move,
+		reset,
+		closeSoon,
+	};
+}

package/src/pages/forms/autocomplete/DomAutocomplete.vue

@@ -0,0 +1,180 @@
+<script setup>
+import { computed, onMounted, ref, shallowRef, useId, watch } from 'vue';
+import { resolveFloatingTeleportTarget } from '../../lib/vue/floatingTeleportTarget.js';
+import DomFieldLoadingSpinner from '../_shared/DomFieldLoadingSpinner.vue';
+import { booleanProp, normalizeOption } from '../_shared/options.js';
+import DomField from '../field/DomField.vue';
+import { fieldProps } from '../field/fieldProps.js';
+import { useField } from '../field/useField.js';
+
+const listId = `dom-autocomplete-${useId()}`;
+
+defineOptions({
+	__doc: {
+		name: 'Autocomplete',
+		tag: '<DomAutocomplete>',
+		description: 'Free-text autocomplete with optional suggestions, floating positioning, keyboard navigation, and query events for async lookups.',
+		slots: [
+			{ name: 'item', payload: '{ item, index }', description: 'Replaces the rendering of each suggestion.' },
+		],
+		events: [
+			{ name: 'query', payload: '(query: string)', description: 'Fired as the user types. Use it to fetch or replace suggestions.' },
+			{ name: 'select', payload: '({ item, value, label, text, query })', description: 'Fired when a suggestion is chosen. item is the original option object.' },
+			{ name: 'commit', payload: '({ value, label, custom })', description: 'Fired when the current text is committed with Enter.' },
+		],
+	},
+});
+
+const props = defineProps({
+	...fieldProps,
+	modelValue: {
+		type: String,
+		default: '',
+		_edit: { group: 'Control props', description: 'Current text value.' },
+	},
+	options: {
+		type: Array,
+		default: () => [],
+		_edit: {
+			component: 'DomJsonListInput',
+			description: 'Suggestions. May be replaced by async lookup results.',
+			props: {
+				compact: true,
+				addLabel: '+ Add suggestion',
+				schema: [
+					{ key: 'label', label: 'Label', placeholder: 'Suggestion label', default: (index) => `Suggestion ${index + 1}` },
+					{ key: 'value', label: 'Value', placeholder: 'suggestion-value', default: (index) => `suggestion-${index + 1}` },
+				],
+			},
+		},
+	},
+	placeholder: {
+		type: String,
+		default: 'Search...',
+		_edit: { group: 'Control props', description: 'Placeholder shown when the input is empty.' },
+	},
+	placement: {
+		type: String,
+		default: 'bottom',
+		_edit: { group: 'Control props', options: ['bottom', 'top', 'right', 'left'], description: 'Preferred side before collision handling.' },
+	},
+	floatingMode: {
+		type: String,
+		default: 'viewport',
+		_edit: { group: 'Control props', options: ['viewport', 'anchor'], description: 'viewport keeps suggestions inside the browser; anchor keeps them attached while scrolling.' },
+	},
+	loading: {
+		type: [Boolean, String],
+		default: false,
+		_edit: { group: 'Control props', description: 'Show an inline spinner while async suggestions are being fetched.' },
+	},
+});
+const emit = defineEmits(['update:modelValue', 'query', 'select', 'commit', 'focus', 'blur']);
+
+const root = ref(null);
+const inputEl = ref(null);
+const isMounted = ref(false);
+const teleportTarget = shallowRef(null);
+const currentText = ref('');
+const field = useField(props, emit, { idPrefix: 'dom-autocomplete' });
+const isLoading = computed(() => booleanProp(props.loading, false));
+
+const items = computed(() => props.options.map((option) => normalizeOption(option)).filter(Boolean));
+
+/**
+ * Synchronize the free-text input from the Vue model value.
+ *
+ * @returns {void}
+ */
+function syncInputFromModel() {
+	currentText.value = field.value.value ?? '';
+	if (inputEl.value) inputEl.value.value = field.value.value ?? '';
+}
+
+onMounted(async () => {
+	teleportTarget.value = resolveFloatingTeleportTarget(root.value);
+	isMounted.value = true;
+	await import('../../lib/headless/autocomplete.js');
+	syncInputFromModel();
+	root.value?.addEventListener('dom:input', (event) => {
+		currentText.value = event.detail.value;
+		field.onInput(event.detail.value);
+	});
+	root.value?.addEventListener('dom:query', (event) => emit('query', event.detail.query));
+	root.value?.addEventListener('dom:select', (event) => {
+		const index = Number(event.detail.option?.dataset.index);
+		const item = Number.isFinite(index) ? items.value[index] : null;
+		const text = event.detail.label ?? event.detail.value ?? '';
+		field.onInput(text);
+		emit('select', {
+			item,
+			value: event.detail.value,
+			label: event.detail.label,
+			text,
+			query: currentText.value,
+			option: event.detail.option,
+		});
+		currentText.value = text;
+	});
+	root.value?.addEventListener('dom:change', (event) => emit('commit', event.detail));
+});
+
+watch(field.value, syncInputFromModel);
+
+</script>
+
+<template>
+	<DomField v-bind="field.fieldAttrs.value" :chrome="chrome">
+		<dom-autocomplete
+			ref="root"
+			:data-menu-id="listId"
+			:value="field.value.value ?? null"
+			:placement="placement"
+			:floating-mode="floatingMode"
+			class="relative block"
+		>
+			<input
+				v-bind="field.inputAttrs.value"
+				ref="inputEl"
+				slot="input"
+				type="text"
+				class="skin-input h-10 pr-10"
+				:class="isLoading ? 'pr-20' : ''"
+				@focus="field.onFocus"
+				@blur="field.onBlur"
+			/>
+			<DomFieldLoadingSpinner
+				v-if="isLoading"
+				class="absolute right-9 top-1"
+			/>
+			<button
+				slot="toggle"
+				type="button"
+				class="absolute right-1 top-1 inline-flex size-8 items-center justify-center rounded-md text-muted-fg transition hover:text-canvas-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/60 disabled:cursor-not-allowed disabled:opacity-50"
+				aria-label="Show suggestions"
+				:disabled="props.disabled || props.readOnly || undefined"
+			>
+				<svg viewBox="0 0 20 20" class="size-4" fill="none" aria-hidden="true">
+					<path d="M6 8l4 4 4-4" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" />
+				</svg>
+			</button>
+			<Teleport :to="teleportTarget || 'body'" :disabled="!isMounted || !teleportTarget">
+				<ul
+					:id="listId"
+					class="dom-floating-transition skin-popover z-50 max-h-[min(15rem,var(--dom-floating-available-height))] overflow-auto rounded-2xl p-1"
+				>
+					<li
+						v-for="(option, index) in items"
+						:key="option.value ?? index"
+						:data-value="option.value"
+						:data-label="option.label"
+						:data-index="index"
+						class="cursor-pointer rounded-xl px-3 py-2 text-sm text-canvas-fg transition hover:bg-accent hover:text-accent-fg data-[active]:bg-accent data-[active]:text-accent-fg aria-selected:bg-accent aria-selected:text-accent-fg"
+					>
+						<slot name="item" :item="option" :index="index">{{ option.label }}</slot>
+					</li>
+				</ul>
+			</Teleport>
+		</dom-autocomplete>
+	</DomField>
+</template>