diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/components/SearchBar.vue | 57 | ||||
| -rw-r--r-- | src/layouts/base.layout.vue | 4 |
2 files changed, 60 insertions, 1 deletions
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue new file mode 100644 index 0000000..78e18cf --- /dev/null +++ b/src/components/SearchBar.vue @@ -0,0 +1,57 @@ +<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> + <n-auto-complete + placeholder="Search a tool..." + :options="options" + v-model:value="queryString" + :input-props="{ autocomplete: 'disabled' }" + :on-select="onSelect" + > + <template #prefix> + <n-icon> + <search-round /> + </n-icon> + </template> + </n-auto-complete> + </div> +</template> + + +<style lang="less" scoped> +// ::v-deep(.n-input__border) { +// border: none; +// } +</style>
\ No newline at end of file diff --git a/src/layouts/base.layout.vue b/src/layouts/base.layout.vue index f2c601b..d7b0a90 100644 --- a/src/layouts/base.layout.vue +++ b/src/layouts/base.layout.vue @@ -4,6 +4,7 @@ import { h, ref, type Component } from 'vue'; import { RouterLink, useRoute } from 'vue-router'; import { User } from '@vicons/tabler' import { tools } from '@/tools'; +import SearchBar from '../components/SearchBar.vue'; const collapsed = ref(false) const activeKey = ref(null) @@ -50,7 +51,8 @@ const menuOptions = tools.map(({ name, path, icon }) => ({ </n-layout-sider> <n-layout class="content"> <div class="bar-wrapper"> - <n-input /> + <search-bar /> + <n-button secondary circle> <n-icon size="large"> <user /> |