Vue Autocomplete Component

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

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,
		"filterOptions": true,
		"hasMore": false
	});
</script>

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

<script setup>
import '@getdom/studio/style.css';
import { DomAutocomplete } from '@getdom/studio';
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-canvas-fg">{{ text || '—' }}</code></p>
		<p class="text-xs text-muted-fg">Selected item: <code class="text-canvas-fg">{{ selected?.email || '—' }}</code></p>
	</div>
</template>

<script setup>
import '@getdom/studio/style.css';
import { ref } from 'vue';
import { DomAutocomplete } from '@getdom/studio';
import { usePagedLookup } from '../../_shared/usePagedLookup.js';
import LookupStatus from '../../_shared/LookupStatus.vue';

const value = ref('');
const { options, loading, hasMore, error, total, search, loadMore } = usePagedLookup('people');
</script>

<template>
	<div class="grid w-full max-w-md gap-3">
		<DomAutocomplete
			v-model="value"
			:options="options"
			:loading="loading"
			:has-more="hasMore"
			:filter-options="false"
			label="Search people"
			description="Browse paginated suggestions or commit your own text."
			placeholder="Search or browse people"
			@query="search"
			@load-more="loadMore"
		>
			<template #item="{ item }">
				<span class="block truncate font-medium">{{ item.label }}</span>
				<span class="block truncate text-xs text-muted-fg">{{ item.email }} · {{ item.role }}</span>
			</template>
		</DomAutocomplete>
		<LookupStatus :error="error" :count="options.length" :total="total" @retry="loadMore" />
		<p class="text-xs text-muted-fg">Value: <code>{{ value || 'None' }}</code></p>
	</div>
</template>