diff options
| -rw-r--r-- | src/components/SearchBar.vue | 23 |
1 files changed, 20 insertions, 3 deletions
diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue index da5bede..7305239 100644 --- a/src/components/SearchBar.vue +++ b/src/components/SearchBar.vue @@ -1,8 +1,9 @@ <script lang="ts" setup> +import { tools } from '@/tools'; import { SearchRound } from '@vicons/material'; -import { computed, ref } from 'vue'; +import { useMagicKeys, whenever } from '@vueuse/core'; import { deburr } from 'lodash'; -import { tools } from '@/tools'; +import { computed, ref } from 'vue'; import { useRouter } from 'vue-router'; const router = useRouter(); @@ -28,6 +29,21 @@ function onSelect(path: string) { router.push(path); queryString.value = ''; } + +const focusTarget = ref(); + +const keys = useMagicKeys({ + passive: false, + onEventFired(e) { + if (e.ctrlKey && e.key === 'k' && e.type === 'keydown') { + e.preventDefault(); + } + }, +}); + +whenever(keys.ctrl_k, () => { + focusTarget.value.focus(); +}); </script> <template> @@ -40,9 +56,10 @@ function onSelect(path: string) { > <template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }"> <n-input + ref="focusTarget" round clearable - placeholder="Search a tool..." + placeholder="Search a tool... [Ctrl + K]" :value="slotValue" @input="handleInput" @focus="handleFocus" |