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
56
57
58
59
60
61
62
63
64
|
<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
v-model:value="queryString"
:options="options"
: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>
|
