Cutlery/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-11-03 18:37:00 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(search): focus the search bar using Ctrl+K

Browse Source
This commit is contained in:
Corentin Thomasset 2022-07-23 18:49:10 +02:00
parent c3a302bc38
commit ab53048d5f
No known key found for this signature in database
GPG Key ID: DBD997E935996158
1 changed files with 21 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/SearchBar.vue
View File

@ -1,8 +1,9 @@
<script lang="ts" setup>
import { SearchRound } from '@vicons/material';
import { computed, ref } from 'vue';
import { deburr } from 'lodash';
import { tools } from '@/tools';
import { SearchRound } from '@vicons/material';
import { useMagicKeys, whenever } from '@vueuse/core';
import { deburr } from 'lodash';
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"