Code refactor, replace v-hotkey plugin

app/javascript/vue/tasks/extracts/new_extract/components/Navbar.vue

@@ -1,5 +1,5 @@
 <template>
-  <navbar-component v-hotkey="shortcuts">
+  <navbar-component>
     <div class="flex-separate middle">
       <div
         class="horizontal-left-content gap-small"

app/javascript/vue/tasks/nomenclature/new_combination/components/saveCombination.vue

@@ -1,113 +1,118 @@
 <template>
   <button
     type="button"
-    ref="saveButton"
+    ref="saveButtonRef"
     class="button normal-input button-submit create-new-combination"
-    v-hotkey="shortcuts"
     :disabled="!validateCreate()"
     @click="save()"
   >
     {{ newCombination.hasOwnProperty('id') ? 'Update' : 'Create' }}
   </button>
 </template>
-<script>
+
+<script setup>
+import { ref } from 'vue'
 import { Combination } from '@/routes/endpoints'
 import { EXTEND_PARAMS } from '../constants/extend.js'
 import platformKey from '@/helpers/getPlatformKey'
+import useHotkey from 'vue3-hotkey'
+
+const props = defineProps({
+  newCombination: {
+    type: Object,
+    required: true
+  }
+})
 
-export default {
-  props: {
-    newCombination: {
-      type: Object,
-      required: true
+const emit = defineEmits(['processing', 'save', 'success'])
+
+const saveButtonRef = ref()
+const shortcuts = ref([
+  {
+    keys: [platformKey(), 's'],
+    handler() {
+      save()
     }
-  },
+  }
+])
 
-  emits: ['processing', 'save', 'success'],
+useHotkey(shortcuts.value)
 
-  computed: {
-    shortcuts() {
-      const keys = {}
-      keys[`${platformKey()}+s`] = this.save
+function validateCreate() {
+  return props.newCombination.protonyms.genus
+}
 
-      return keys
-    }
-  },
+function setFocus() {
+  if (validateCreate()) {
+    saveButtonRef.value.focus()
+  }
+}
 
-  methods: {
-    validateCreate() {
-      return this.newCombination.protonyms.genus
-    },
+function save() {
+  if (validateCreate()) {
+    props.newCombination?.id ? update(props.newCombination.id) : create()
+  }
+}
 
-    setFocus() {
-      if (this.validateCreate()) {
-        this.$refs.saveButton.focus()
-      }
-    },
+function createRecordCombination() {
+  const keys = Object.keys(props.newCombination.protonyms)
+  const combination = {
+    verbatim_name: props.newCombination.verbatim_name,
+    origin_citation_attributes: props.newCombination?.origin_citation_attributes
+  }
 
-    save() {
-      if (this.validateCreate()) {
-        this.newCombination.hasOwnProperty('id')
-          ? this.update(this.newCombination.id)
-          : this.create()
-      }
-    },
+  keys.forEach((rank) => {
+    if (props.newCombination.protonyms[rank]) {
+      combination[`${rank}_id`] = props.newCombination.protonyms[rank].id
+    }
+  })
 
-    createRecordCombination() {
-      const keys = Object.keys(this.newCombination.protonyms)
-      const combination = {
-        verbatim_name: this.newCombination.verbatim_name,
-        origin_citation_attributes:
-          this.newCombination?.origin_citation_attributes
-      }
+  return combination
+}
 
-      keys.forEach((rank) => {
-        if (this.newCombination.protonyms[rank]) {
-          combination[`${rank}_id`] = this.newCombination.protonyms[rank].id
-        }
-      })
+function create() {
+  emit('processing', true)
 
-      return combination
-    },
-    create() {
-      this.$emit('processing', true)
-      Combination.create({
-        combination: this.createRecordCombination(),
-        ...EXTEND_PARAMS
-      }).then(
-        (response) => {
-          this.$emit('save', response.body)
-          this.$emit('processing', false)
-          this.$emit('success', true)
-          TW.workbench.alert.create(
-            'New combination was successfully created.',
-            'notice'
-          )
-        },
-        (response) => {
-          this.$emit('processing', false)
-          TW.workbench.alert.create(
-            `Something went wrong: ${JSON.stringify(response.body)}`,
-            'error'
-          )
-        }
+  Combination.create({
+    combination: createRecordCombination(),
+    ...EXTEND_PARAMS
+  }).then(
+    ({ body }) => {
+      emit('save', body)
+      emit('processing', false)
+      emit('success', true)
+      TW.workbench.alert.create(
+        'New combination was successfully created.',
+        'notice'
       )
     },
-    update(id) {
-      this.$emit('processing', true)
-      Combination.update(id, {
-        combination: this.createRecordCombination(),
-        ...EXTEND_PARAMS
-      }).then((response) => {
-        this.$emit('save', response.body)
-        this.$emit('processing', false)
-        this.$emit('success', true)
-        TW.workbench.alert.create(
-          'New combination was successfully updated.',
-          'notice'
-        )
-      })
+    ({ body }) => {
+      emit('processing', false)
+      TW.workbench.alert.create(
+        `Something went wrong: ${JSON.stringify(body)}`,
+        'error'
+      )
     }
-  }
+  )
 }
+
+function update(id) {
+  emit('processing', true)
+  Combination.update(id, {
+    combination: createRecordCombination(),
+    ...EXTEND_PARAMS
+  }).then(({ body }) => {
+    emit('save', body)
+    emit('processing', false)
+    emit('success', true)
+    TW.workbench.alert.create(
+      'New combination was successfully updated.',
+      'notice'
+    )
+  })
+}
+
+defineExpose({
+  setFocus
+})
 </script>

app/javascript/vue/tasks/nomenclature/new_combination/main.js

@@ -1,12 +1,11 @@
 import { createApp } from 'vue'
 import HelpSystem from '@/plugins/help/help'
 import en from './lang/help/en'
-import hotkey from '@/plugins/v-hotkey'
 import App from './app.vue'
 
 function init() {
   const app = createApp(App)
-  app.directive('hotkey', hotkey)
+
   app.use(HelpSystem, {
     languages: {
       en: en