Rename search component and properties

2 files changed, 16 insertions, 15 deletions

diff --git a/application/components/key.vue b/application/components/key.vue
index b44fb1e..f958c88 100644
--- a/application/components/key.vue
+++ b/application/components/key.vue
@@ -25,13 +25,14 @@
       :onSelect="handleSelectCode"
     />
     <teleport to="body">
-      <search
+      <value-picker
         v-if="editing"
         :target="editing.target"
-        :code="editing.code"
+        :value="editing.code"
         :param="editing.param"
-        :targets="editing.targets"
+        :choices="editing.targets"
         :prompt="createPromptMessage(editing.param)"
+        searchKey="code"
         @select="handleSelectValue"
         @cancel="editing = null"
       />
@@ -50,7 +51,7 @@ import { getKeyStyles } from '../key-units'
 
 import KeyValue from './key-value.vue'
 import KeyParamlist from './key-paramlist.vue'
-import Search from './search.vue'
+import ValuePicker from './value-picker.vue'
 
 function makeIndex (tree) {
   const index = []
@@ -76,7 +77,7 @@ export default {
   components: {
     'key-value': KeyValue,
     'key-paramlist': KeyParamlist,
-    'search': Search
+    ValuePicker
   },
   data () {
     return {
diff --git a/application/components/search.vue b/application/components/value-picker.vue
index a5ecdf5..fca91f7 100644
--- a/application/components/search.vue
+++ b/application/components/value-picker.vue
@@ -7,13 +7,13 @@ const cycle = (array, index, step=1) => {
 }
 
 export default {
-  name: 'search',
+  name: 'value-picker',
   emits: ['cancel', 'select'],
   props: {
     target: Object,
-    targets: Array,
+    choices: Array,
     param: [String, Object],
-    code: String,
+    value: String,
     prompt: String,
     searchKey: String
   },
@@ -31,11 +31,11 @@ export default {
   },
   computed: {
     results() {
-      const { query, targets } = this
-      const options = { key: 'code', limit: 30 }
-      const filtered = fuzzysort.go(query, targets, options)
+      const { query, choices } = this
+      const options = { key: this.searchKey, limit: 30 }
+      const filtered = fuzzysort.go(query, choices, options)
 
-      return targets.length <= 10 ? targets : filtered.map(result => ({
+      return choices.length <= 10 ? choices : filtered.map(result => ({
         ...result.obj,
         search: result
       }))
@@ -119,9 +119,9 @@ export default {
   >
     <p>{{prompt}}</p>
     <input
-      v-if="targets.length > 10"
+      v-if="choices.length > 10"
       type="text"
-      :value="query !== null ? query : code"
+      :value="query !== null ? query : value"
       @keypress="handleKeyPress"
     />
     <ul class="results">
@@ -135,7 +135,7 @@ export default {
         @mouseover="setHighlight(i)"
       >
         <span v-if="result.search" v-html="highlight(result.search)" />
-        <span v-else v-text="result.code" />
+        <span v-else v-text="result[searchKey]" />
       </li>
     </ul>
   </div>