Add some keyboard shortcuts

Signed-off-by: Knut Ahlers <knut@ahlers.me>

frontend/components/accountOverview.vue

@@ -35,8 +35,10 @@
         <div class="col d-flex align-items-center justify-content-end">
           <div class="btn-group btn-group-sm">
             <button
+              v-shortkey.once="['ctrl', 'alt', 'n']"
               class="btn btn-primary"
               @click="showAddTransaction = !showAddTransaction"
+              @shortkey="showAddTransaction = !showAddTransaction"
             >
               <i class="fas fa-fw fa-plus-circle mr-1" />
               Add Transaction
@@ -79,9 +81,11 @@
               </li>
               <li>
                 <button
+                  v-shortkey="['del']"
                   class="dropdown-item text-danger"
                   :disabled="selectedTx.length < 1"
                   @click="deleteSelected"
+                  @shortkey="deleteSelected"
                 >
                   <i class="fas fa-fw fa-trash mr-1" />
                   Delete Selected

frontend/main.js

@@ -1,5 +1,6 @@
 /* eslint-disable sort-imports */
 import { createApp, h } from 'vue'
+import VueShortkey from 'vue3-shortkey'
 
 import './style.scss'
 
@@ -17,4 +18,5 @@ const app = createApp({
 })
 
 app.use(router)
+app.use(VueShortkey)
 app.mount('#app')

package-lock.json

@@ -9,7 +9,8 @@
         "@fortawesome/fontawesome-free": "^6.4.2",
         "bootstrap": "^5.3.2",
         "vue": "^3.4.14",
-        "vue-router": "^4.2.5"
+        "vue-router": "^4.2.5",
+        "vue3-shortkey": "^4.0.0"
       },
       "devDependencies": {
         "@babel/eslint-parser": "^7.23.3",
@@ -1384,6 +1385,11 @@
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/custom-event-polyfill": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
+      "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -1426,6 +1432,11 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/element-matches": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/element-matches/-/element-matches-0.1.2.tgz",
+      "integrity": "sha512-yWh1otcs3OKUWDvu/IxyI36ZI3WNaRZlI0uG/DK6fu0pap0VYZ0J5pEGTk1zakme+hT0OKHwhlHc0N5TJhY6yQ=="
+    },
     "node_modules/entities": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
@@ -3419,6 +3430,15 @@
         "vue": "^3.2.0"
       }
     },
+    "node_modules/vue3-shortkey": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/vue3-shortkey/-/vue3-shortkey-4.0.0.tgz",
+      "integrity": "sha512-pXb/K7aw3ViqzWL9jz/IL4wOk7M7FQ87ekYxk5J7uKTNEfOVBYtILGjvCBJD3/zEUipcLQJEg7TjE1xYnVYV/w==",
+      "dependencies": {
+        "custom-event-polyfill": "^1.0.7",
+        "element-matches": "^0.1.2"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",

package.json

@@ -13,6 +13,7 @@
     "@fortawesome/fontawesome-free": "^6.4.2",
     "bootstrap": "^5.3.2",
     "vue": "^3.4.14",
-    "vue-router": "^4.2.5"
+    "vue-router": "^4.2.5",
+    "vue3-shortkey": "^4.0.0"
   }
 }