blob: fe23e03909b7b32835d6ec4a92a2b19edba409f6 (
plain) (
blame)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<script lang="ts" setup>
import { SearchRound } from '@vicons/material'
import { computed, ref } from 'vue';
import { deburr } from 'lodash'
import { tools } from '@/tools';
import { useRouter } from 'vue-router';
const router = useRouter()
const queryString = ref('')
const cleanString = (s: string) => deburr(s.trim().toLowerCase())
const searchableTools = tools.map(({ name, description, keywords, path }) => ({
searchableText: [name, description, ...keywords].map(cleanString).join(' '),
path,
name
}))
const options = computed(() => {
const query = cleanString(queryString.value)
return searchableTools
.filter(({ searchableText }) => searchableText.includes(query))
.map(({ name, path }) => ({ label: name, value: path }))
})
function onSelect(path: string) {
router.push(path)
queryString.value = ''
}
</script>
<template>
<div class="search-bar">
<n-auto-complete :options="options" v-model:value="queryString" :input-props="{ autocomplete: 'disabled' }"
:on-select="onSelect">
<template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }">
<n-input round clearable placeholder="Search a tool..." :value="slotValue" @input="handleInput"
@focus="handleFocus" @blur="handleBlur">
<template #prefix>
<n-icon :component="SearchRound" />
</template>
</n-input>
</template>
</n-auto-complete>
</div>
</template>
<style lang="less" scoped>
// ::v-deep(.n-input__border) {
// border: none;
// }
</style>
|
