feat: integration search bar

web/src/components/ApiSearchPalette.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { useMediaQuery } from '@vueuse/core'
+import { computed } from 'vue'
+import ApiSearchPanel from '@/components/ApiSearchPanel.vue'
+import type { SearchEntry, SearchIndex } from '@/lib/apiSearch'
+
+defineProps<{
+	index: SearchIndex
+}>()
+
+const emit = defineEmits<{ select: [entry: SearchEntry] }>()
+
+const DESKTOP_QUERY = '(min-width: 64rem)'
+
+const open = defineModel<boolean>('open', { required: true })
+const isDesktop = useMediaQuery(DESKTOP_QUERY)
+
+const contentClass = computed(() =>
+	isDesktop.value
+		? 'divide-y-0 rounded-none border border-default shadow-(--shadow-modal) ring-0 sm:top-24 sm:max-w-180 sm:translate-y-0'
+		: 'divide-y-0 rounded-none',
+)
+
+function keepFocusWithCaller(event: Event) {
+	event.preventDefault()
+}
+
+function onSelect(entry: SearchEntry) {
+	open.value = false
+	emit('select', entry)
+}
+</script>
+
+<template>
+	<UModal
+		v-model:open="open"
+		:title="t('Search the API reference')"
+		:description="t('Search the API reference…')"
+		:fullscreen="!isDesktop"
+		:close="false"
+		:content="{ onCloseAutoFocus: keepFocusWithCaller }"
+		:ui="{ content: contentClass }"
+	>
+		<template #content>
+			<ApiSearchPanel
+				:index="index"
+				:mobile="!isDesktop"
+				@select="onSelect"
+				@close="open = false"
+			/>
+		</template>
+	</UModal>
+</template>