listen windows's keydown/keyup event

src/components/ImageList.vue

@@ -99,10 +99,14 @@ const resizeObserver = new ResizeObserver((event) => {
 onMounted(() => {
   resizeObserver.observe(panel.value as HTMLElement)
   updateOverlayPanelSize()
+  window.addEventListener("keydown", onKeyDown)
+  window.addEventListener("keyup", onKeyUp)
 })
 
 onUnmounted(() => {
   resizeObserver.unobserve(panel.value as HTMLElement)
+  window.removeEventListener("keydown", onKeyDown)
+  window.removeEventListener("keyup", onKeyUp)
 })
 
 function updateOverlayPanelSize() {
@@ -120,9 +124,8 @@ function updateOverlayPanelSize() {
 </script>
 
 <template>
-  <div ref="panel" class="image-list"
-       v-on:mouseenter="onMouseEnter" v-on:mouseleave="onMouseLeave"
-       :tabindex="-1" v-on:keydown="onKeyDown" v-on:keyup="onKeyUp">
+  <div ref="panel" class="image-list" :tabindex="-1"
+       v-on:mouseenter="onMouseEnter" v-on:mouseleave="onMouseLeave">
     <div v-for="(data, index) in props.dataset" :style="itemStyle"
          :class="['item', selectedSet.has(index) ? 'selected' : undefined]"
          v-on:mouseover="previewSrc = data.url" v-on:click="onClick(index)">

src/components/TagList.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {ref, shallowRef, watch, onUnmounted} from 'vue'
+import {ref, shallowRef, watch, onUnmounted, onMounted} from 'vue'
 import draggable from 'vuedraggable';
 import Tag from './Tag.vue'
 import ContextMenu from 'primevue/contextmenu'
@@ -149,10 +149,20 @@ function onKeyUp(event: KeyboardEvent) {
   if (event.key == 'Shift')
     pressShift = false
 }
+
+onMounted(() => {
+  window.addEventListener("keydown", onKeyDown)
+  window.addEventListener("keyup", onKeyUp)
+})
+
+onUnmounted(() => {
+  window.removeEventListener("keydown", onKeyDown)
+  window.removeEventListener("keyup", onKeyUp)
+})
 </script>
 
 <template>
-  <div class="frame" :tabindex="-1" v-on:keydown="onKeyDown" v-on:keyup="onKeyUp">
+  <div class="frame" :tabindex="-1">
     <draggable class="tag-list"
                v-model="tags"
                :disabled="props.nodrag"