diff options
author | Nick Coutsos <[email protected]> | 2021-10-16 20:55:10 -0400 |
---|---|---|
committer | Nick Coutsos <[email protected]> | 2021-10-16 20:55:10 -0400 |
commit | af8be4350757929555a79dcda6f9f7f0f974aa87 (patch) | |
tree | c8ef17844d612f3801917764618dfcfc3ea8298a | |
parent | ef127142c01ac9540199a16884c02d753b04c497 (diff) | |
download | keymap-editor-af8be4350757929555a79dcda6f9f7f0f974aa87.tar.gz keymap-editor-af8be4350757929555a79dcda6f9f7f0f974aa87.zip |
Rename search component and properties
-rw-r--r-- | application/components/key.vue | 11 | ||||
-rw-r--r-- | application/components/value-picker.vue (renamed from application/components/search.vue) | 20 |
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> |