diff options
-rw-r--r-- | viewer/src/views/layout/left/LayoutTagInput.vue | 16 |
1 files changed, 14 insertions, 2 deletions
diff --git a/viewer/src/views/layout/left/LayoutTagInput.vue b/viewer/src/views/layout/left/LayoutTagInput.vue index a37c546..9ee6f8a 100644 --- a/viewer/src/views/layout/left/LayoutTagInput.vue +++ b/viewer/src/views/layout/left/LayoutTagInput.vue | |||
@@ -23,7 +23,7 @@ | |||
23 | v-model="search" | 23 | v-model="search" |
24 | :placeholder="t('tagInput.placeholder')" | 24 | :placeholder="t('tagInput.placeholder')" |
25 | :tabindex="50" | 25 | :tabindex="50" |
26 | @focus="e => (e.target as HTMLInputElement).select()" | 26 | @focus="(e: FocusEvent) => (e.target as HTMLInputElement).select()" |
27 | @keypress.enter="inputEnter" | 27 | @keypress.enter="inputEnter" |
28 | @keydown.backspace="inputBackspace" | 28 | @keydown.backspace="inputBackspace" |
29 | /> | 29 | /> |
@@ -58,7 +58,8 @@ import LdDropdown from '@/components/LdDropdown.vue'; | |||
58 | import LdInput from '@/components/LdInput.vue'; | 58 | import LdInput from '@/components/LdInput.vue'; |
59 | import { useIndexFactory } from '@/services/indexFactory'; | 59 | import { useIndexFactory } from '@/services/indexFactory'; |
60 | import { useGalleryStore } from '@/store/galleryStore'; | 60 | import { useGalleryStore } from '@/store/galleryStore'; |
61 | import { computedEager, useElementBounding, useFocus, useVModel } from '@vueuse/core'; | 61 | import { useUiStore } from '@/store/uiStore'; |
62 | import { computedEager, onKeyStroke, useElementBounding, useFocus, useKeyModifier, useVModel } from '@vueuse/core'; | ||
62 | import { computed, ref, StyleValue, watchEffect } from 'vue'; | 63 | import { computed, ref, StyleValue, watchEffect } from 'vue'; |
63 | import { useI18n } from 'vue-i18n'; | 64 | import { useI18n } from 'vue-i18n'; |
64 | 65 | ||
@@ -69,6 +70,7 @@ const emit = defineEmits(['update:modelValue', 'search', 'opening', 'closing']); | |||
69 | const model = useVModel(props, 'modelValue', emit); | 70 | const model = useVModel(props, 'modelValue', emit); |
70 | 71 | ||
71 | const { t } = useI18n(); | 72 | const { t } = useI18n(); |
73 | const uiStore = useUiStore(); | ||
72 | const galeryStore = useGalleryStore(); | 74 | const galeryStore = useGalleryStore(); |
73 | const indexFactory = useIndexFactory(); | 75 | const indexFactory = useIndexFactory(); |
74 | 76 | ||
@@ -88,6 +90,16 @@ const { focused } = useFocus(input); | |||
88 | 90 | ||
89 | // --- | 91 | // --- |
90 | 92 | ||
93 | const controlState = useKeyModifier('Control'); | ||
94 | onKeyStroke('k', e => { | ||
95 | if (!controlState.value || focused.value) return; | ||
96 | e.preventDefault(); | ||
97 | uiStore.toggleFullWidth(false); | ||
98 | focused.value = true; | ||
99 | }); | ||
100 | |||
101 | // --- | ||
102 | |||
91 | const filteredTags = computed(() => indexFactory.searchTags(galeryStore.tagsIndex, search.value, false) | 103 | const filteredTags = computed(() => indexFactory.searchTags(galeryStore.tagsIndex, search.value, false) |
92 | .filter(filterAlreadyPresent) | 104 | .filter(filterAlreadyPresent) |
93 | .sort((a, b) => b.items.length - a.items.length)); | 105 | .sort((a, b) => b.items.length - a.items.length)); |