Autocomplete

<script setup>
import { reactive } from 'vue';
import { DomAutocomplete } from '@getdom/studio/vue';

const data = reactive({
	  "modelValue": "",
	  "id": "",
	  "name": "",
	  "label": "",
	  "description": "",
	  "placeholder": "Search people",
	  "required": false,
	  "disabled": false,
	  "readOnly": false,
	  "invalid": false,
	  "errors": {},
	  "visible": true,
	  "validators": [],
	  "validateOnBlur": true,
	  "chrome": "field",
	  "options": [
	    {
	      "value": "1",
	      "label": "Ada Lovelace",
	      "email": "ada@example.com"
	    },
	    {
	      "value": "2",
	      "label": "Grace Hopper",
	      "email": "grace@example.com"
	    },
	    {
	      "value": "3",
	      "label": "Katherine Johnson",
	      "email": "katherine@example.com"
	    }
	  ],
	  "placement": "bottom",
	  "floatingMode": "viewport",
	  "loading": false
	});
</script>

<template>
	<DomAutocomplete
		v-bind="data"
		@update:modelValue="data.modelValue = $event"
	/>
</template>

<script setup>
import { DomAutocomplete } from '@getdom/studio/vue';
import { ref } from 'vue';

const text = ref('');
const selected = ref(null);
const people = [
	{ value: '1', label: 'Ada Lovelace', email: 'ada@example.com' },
	{ value: '2', label: 'Grace Hopper', email: 'grace@example.com' },
	{ value: '3', label: 'Katherine Johnson', email: 'katherine@example.com' },
];

function onSelect(event) {
	selected.value = event.item;
}
</script>

<template>
	<div class="flex w-full max-w-sm flex-col gap-2">
		<DomAutocomplete
			v-model="text"
			:options="people"
			placeholder="Search people"
			class="w-full"
			@select="onSelect"
		/>
		<p class="text-xs text-muted-fg">Typed text: <code class="text-fg">{{ text || '—' }}</code></p>
		<p class="text-xs text-muted-fg">Selected item: <code class="text-fg">{{ selected?.email || '—' }}</code></p>
	</div>
</template>

<script setup>
import { ref } from 'vue';
import { DomAutocomplete } from '@getdom/studio/vue';
import { searchPeople } from '../../_shared/serverLookup.js';

const value = ref('');
const options = ref([]);
const loading = ref(false);
let requestId = 0;

async function queryPeople(query) {
	const currentRequest = ++requestId;
	if (!query.trim()) {
		options.value = [];
		loading.value = false;
		return;
	}

	loading.value = true;
	const results = await searchPeople(query);
	if (currentRequest !== requestId) return;
	options.value = results.map((person) => ({
		...person,
		value: person.label,
		description: person.email,
	}));
	loading.value = false;
}
</script>

<template>
	<div class="grid w-full max-w-md gap-3">
		<DomAutocomplete
			v-model="value"
			:options="options"
			:loading="loading"
			label="Search people"
			description="Suggestions are fetched by the parent in response to @query."
			placeholder="Type a name"
			class="w-full"
			@query="queryPeople"
		>
			<template #item="{ item }">
				<span class="block min-w-0">
					<span class="block truncate font-medium">{{ item.label }}</span>
					<span class="block truncate text-xs text-muted-fg">{{ item.description }}</span>
				</span>
			</template>
		</DomAutocomplete>
		<p class="rounded-2xl border border-border bg-secondary/40 p-3 text-xs text-muted-fg">
			Text value: <code class="font-mono text-fg">{{ value || 'Empty' }}</code>
		</p>
	</div>
</template>