56 lines
1.3 KiB
Vue
56 lines
1.3 KiB
Vue
<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>
|