50 lines
1.2 KiB
Vue
50 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import Fuse from 'fuse.js'
|
|
|
|
const query = ref('')
|
|
const { data } = await useAsyncData('search-data', () => queryCollectionSearchSections('docs'))
|
|
|
|
const fuse = new Fuse(data.value || [], {
|
|
keys: [
|
|
'title',
|
|
'description'
|
|
]
|
|
})
|
|
|
|
const result = computed<Array<{ item: { id: string, title: string, titles: string[], level: number, content: string } }>>(() =>
|
|
fuse.search(toValue(query)).slice(0, 10)
|
|
)
|
|
</script>
|
|
|
|
<template>
|
|
<UContainer class="p-4">
|
|
<UCard>
|
|
<UInput
|
|
v-model="query"
|
|
placeholder="Search..."
|
|
class="w-full"
|
|
/>
|
|
<ul>
|
|
<li
|
|
v-for="link of result"
|
|
:key="link.item.id"
|
|
class="mt-2"
|
|
>
|
|
<UButton
|
|
variant="ghost"
|
|
class="w-full"
|
|
:to="link.item.id"
|
|
>
|
|
<div class="flex flex-col">
|
|
<span class="text-black dark:text-white font-semibold">{{ link.item.title }}</span>
|
|
<span class="text-gray-500 text-xs truncate">
|
|
{{ link.item.content?.slice(0, 100) }}...
|
|
</span>
|
|
</div>
|
|
</UButton>
|
|
</li>
|
|
</ul>
|
|
</UCard>
|
|
</UContainer>
|
|
</template>
|