diff options
| -rw-r--r-- | package-lock.json | 1 | ||||
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | src/components/SearchBar.vue | 57 | ||||
| -rw-r--r-- | src/layouts/base.layout.vue | 4 |
4 files changed, 62 insertions, 1 deletions
diff --git a/package-lock.json b/package-lock.json index e2c0a45..c3f3350 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@vueuse/core": "^8.2.1", "@vueuse/head": "^0.7.5", "crypto-js": "^4.1.1", + "lodash": "^4.17.21", "naive-ui": "^2.27.0", "pinia": "^2.0.11", "randombytes": "^2.1.0", diff --git a/package.json b/package.json index 1bd4d52..33038de 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "@vueuse/core": "^8.2.1", "@vueuse/head": "^0.7.5", "crypto-js": "^4.1.1", + "lodash": "^4.17.21", "naive-ui": "^2.27.0", "pinia": "^2.0.11", "randombytes": "^2.1.0", 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 /> |