Move search prompt logic out of component

3 files changed, 34 insertions, 17 deletions

diff --git a/application/components/key.vue b/application/components/key.vue
index 315a2e9..b44fb1e 100644
--- a/application/components/key.vue
+++ b/application/components/key.vue
@@ -31,6 +31,7 @@
         :code="editing.code"
         :param="editing.param"
         :targets="editing.targets"
+        :prompt="createPromptMessage(editing.param)"
         @select="handleSelectValue"
         @cancel="editing = null"
       />
@@ -153,6 +154,21 @@ export default {
     }
   },
   methods: {
+    createPromptMessage(param) {
+      const promptMapping = {
+        layer: 'Select layer',
+        mod: 'Select modifier',
+        behaviour: 'Select behaviour',
+        command: 'Select command',
+        keycode: 'Select key code'
+      }
+
+      if (param.name) {
+        return `Select ${param.name}`
+      }
+
+      return promptMapping[param] || promptMapping.keycode
+    },
     onMouseOver(event) {
       const old = document.querySelector('.highlight')
       old && old.classList.remove('highlight')
@@ -163,12 +179,12 @@ export default {
     },
     handleSelectCode(event) {
       this.editing = pick(event, ['target', 'codeIndex', 'code', 'param'])
-      this.editing.targets = this.getSearchTargets(this.editing.param)
+      this.editing.targets = this.getSearchTargets(this.editing.param, this.value)
     },
     handleSelectBehaviour(event) {
       this.editing = {
         target: event.target,
-        targets: this.getSearchTargets('behaviour'),
+        targets: this.getSearchTargets('behaviour', this.value),
         codeIndex: 0,
         code: this.value,
         param: 'behaviour'
diff --git a/application/components/keymap.vue b/application/components/keymap.vue
index e6ec245..a370a79 100644
--- a/application/components/keymap.vue
+++ b/application/components/keymap.vue
@@ -65,23 +65,26 @@ export default {
         get(this.keymap, 'layers.length', 0) > 0
       )
     },
-    getSearchTargets(param, key) {
-      const { keycodes } = this
+    getSearchTargets(param, behaviour) {
+      // Special case for behaviour commands which can dynamically add another
+      // parameter that isn't defined at the root level of the behaviour.
+      // Currently this is just `&bt BT_SEL` and is only represented as an enum.
       if (param.enum) {
         return param.enum.map(v => ({ code: v }))
       }
+
       switch (param) {
         case 'behaviour':
           return this.behaviours
         case 'layer':
           return this.availableLayers
         case 'mod':
-          return filter(keycodes, 'isModifier')
+          return filter(this.keycodes, 'isModifier')
         case 'command':
-          get(this.sources, ['behaviours', key.parsed.value, 'commands'], [])
+          get(this.sources, ['behaviours', behaviour, 'commands'], [])
         case 'kc':
         default:
-          return keycodes
+          return this.keycodes
       }
     },
     boundingBox() {
diff --git a/application/components/search.vue b/application/components/search.vue
index c0f667a..a5ecdf5 100644
--- a/application/components/search.vue
+++ b/application/components/search.vue
@@ -9,7 +9,14 @@ const cycle = (array, index, step=1) => {
 export default {
   name: 'search',
   emits: ['cancel', 'select'],
-  props: ['target', 'targets', 'param', 'code'],
+  props: {
+    target: Object,
+    targets: Array,
+    param: [String, Object],
+    code: String,
+    prompt: String,
+    searchKey: String
+  },
   data() {
     return {
       query: null,
@@ -23,15 +30,6 @@ export default {
     document.body.removeEventListener('click', this.handleClickOutside, true)
   },
   computed: {
-    prompt() {
-      if (this.param === 'layer') {
-        return 'Select layer...'
-      } else if (this.param === 'mod') {
-        return 'Select modifier...'
-      } else {
-        return 'Select key code...'
-      }
-    },
     results() {
       const { query, targets } = this
       const options = { key: 'code', limit: 30 }