From af8be4350757929555a79dcda6f9f7f0f974aa87 Mon Sep 17 00:00:00 2001
From: Nick Coutsos <nick@coutsos.com>
Date: Sat, 16 Oct 2021 20:55:10 -0400
Subject: Rename search component and properties

---
 application/components/key.vue          |  11 +-
 application/components/search.vue       | 190 --------------------------------
 application/components/value-picker.vue | 190 ++++++++++++++++++++++++++++++++
 3 files changed, 196 insertions(+), 195 deletions(-)
 delete mode 100644 application/components/search.vue
 create mode 100644 application/components/value-picker.vue

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/search.vue
deleted file mode 100644
index a5ecdf5..0000000
--- a/application/components/search.vue
+++ /dev/null
@@ -1,190 +0,0 @@
-<script>
-import fuzzysort from 'fuzzysort'
-
-const cycle = (array, index, step=1) => {
-  const next = (index + step) % array.length
-  return next < 0 ? array.length + next : next
-}
-
-export default {
-  name: 'search',
-  emits: ['cancel', 'select'],
-  props: {
-    target: Object,
-    targets: Array,
-    param: [String, Object],
-    code: String,
-    prompt: String,
-    searchKey: String
-  },
-  data() {
-    return {
-      query: null,
-      highlighted: null
-    }
-  },
-  mounted() {
-    document.body.addEventListener('click', this.handleClickOutside, true)
-  },
-  unmounted() {
-    document.body.removeEventListener('click', this.handleClickOutside, true)
-  },
-  computed: {
-    results() {
-      const { query, targets } = this
-      const options = { key: 'code', limit: 30 }
-      const filtered = fuzzysort.go(query, targets, options)
-
-      return targets.length <= 10 ? targets : filtered.map(result => ({
-        ...result.obj,
-        search: result
-      }))
-    },
-    style() {
-      const rect = this.target.getBoundingClientRect()
-      return  {
-        display: 'block',
-        top: `${window.scrollY + (rect.top + rect.bottom) / 2}px`,
-        left: `${window.scrollX + (rect.left + rect.right) / 2}px`
-      }
-    }
-  },
-  methods: {
-    highlight(result) {
-      return fuzzysort.highlight(result)
-    },
-    handleClickResult(result) {
-      this.$emit('select', result)
-    },
-    handleKeyPress(event) {
-      setTimeout(() => {
-        this.query = event.target.value
-      })
-    },
-    handleSelectActive() {
-      if (this.results.length > 0 && this.highlighted !== null) {
-        this.handleClickResult(this.results[this.highlighted])
-      }
-    },
-    handleHighlightNext() {
-      this.setHighlight(0, 1)
-    },
-    handleHighlightPrev() {
-      this.setHighlight(this.results.length - 1, -1)
-    },
-    setHighlight(initial, offset) {
-      if (this.results.length === 0) {
-        this.highlighted = null
-        return
-      }
-      if (offset === undefined) {
-        this.highlighted = initial
-        return
-      }
-
-      this.highlighted = this.highlighted === null ? initial : cycle(this.results, this.highlighted, offset)
-      this.scrollIntoViewIfNeeded(this.$el.querySelector(`.results li[data-result-index="${this.highlighted}`), false)
-    },
-    handleClickOutside(event) {
-      if (!this.$el.contains(event.target)) {
-        this.cancel()
-      }
-    },
-    cancel() {
-      this.$emit('cancel', 'select')
-    },
-    scrollIntoViewIfNeeded (element, alignToTop) {
-      const scroll = element.offsetParent.scrollTop
-      const height = element.offsetParent.offsetHeight
-      const top = element.offsetTop
-      const bottom = top + element.scrollHeight
-
-      if (top < scroll || bottom > scroll + height) {
-        element.scrollIntoView(alignToTop)
-      }
-    }
-
-  }
-}
-</script>
-
-<template>
-  <div
-    class="dialog"
-    :style="style"
-    @keydown.down.prevent="handleHighlightNext"
-    @keydown.up.prevent="handleHighlightPrev"
-    @keydown.enter.prevent="handleSelectActive"
-    @keydown.esc.prevent="cancel"
-  >
-    <p>{{prompt}}</p>
-    <input
-      v-if="targets.length > 10"
-      type="text"
-      :value="query !== null ? query : code"
-      @keypress="handleKeyPress"
-    />
-    <ul class="results">
-      <li
-        :key="`result-${i}`"
-        :class="{ highlighted: highlighted === i }"
-        :title="result.description"
-        :data-result-index="i"
-        v-for="(result, i) in results"
-        @click="handleClickResult(result)"
-        @mouseover="setHighlight(i)"
-      >
-        <span v-if="result.search" v-html="highlight(result.search)" />
-        <span v-else v-text="result.code" />
-      </li>
-    </ul>
-  </div>
-</template>
-
-<style>
-
-.dialog {
-	position: absolute;
-	transform: translate(-60px, -30px);
-	z-index: 2;
-}
-.dialog p {
-	margin: 0;
-	font-size: 90%;
-	font-weight: bold;
-}
-.dialog input {
-	display: block;
-	padding: 0;
-	margin: 0;
-	width: 120px;
-	height: 60px;
-	font-size: 120%;
-	border: 2px solid steelblue;
-	border-radius: 4px;
-
-	text-align: center;
-	line-height: 60px;
-}
-ul.results {
-	font-family: monospace;
-	list-style-position: inside;
-	list-style-type: none;
-	max-height: 200px;
-	overflow: scroll;
-	padding: 4px;
-	background: rgba(0, 0, 0, 0.8);
-	border-radius: 4px;
-}
-.results li {
-	cursor: pointer;
-	color: white;
-	padding: 5px;
-}
-.results li:hover, .results li.highlighted {
-	background: white;
-	color: black;
-}
-.results li b { color: red; }
-
-</style>
\ No newline at end of file
diff --git a/application/components/value-picker.vue b/application/components/value-picker.vue
new file mode 100644
index 0000000..fca91f7
--- /dev/null
+++ b/application/components/value-picker.vue
@@ -0,0 +1,190 @@
+<script>
+import fuzzysort from 'fuzzysort'
+
+const cycle = (array, index, step=1) => {
+  const next = (index + step) % array.length
+  return next < 0 ? array.length + next : next
+}
+
+export default {
+  name: 'value-picker',
+  emits: ['cancel', 'select'],
+  props: {
+    target: Object,
+    choices: Array,
+    param: [String, Object],
+    value: String,
+    prompt: String,
+    searchKey: String
+  },
+  data() {
+    return {
+      query: null,
+      highlighted: null
+    }
+  },
+  mounted() {
+    document.body.addEventListener('click', this.handleClickOutside, true)
+  },
+  unmounted() {
+    document.body.removeEventListener('click', this.handleClickOutside, true)
+  },
+  computed: {
+    results() {
+      const { query, choices } = this
+      const options = { key: this.searchKey, limit: 30 }
+      const filtered = fuzzysort.go(query, choices, options)
+
+      return choices.length <= 10 ? choices : filtered.map(result => ({
+        ...result.obj,
+        search: result
+      }))
+    },
+    style() {
+      const rect = this.target.getBoundingClientRect()
+      return  {
+        display: 'block',
+        top: `${window.scrollY + (rect.top + rect.bottom) / 2}px`,
+        left: `${window.scrollX + (rect.left + rect.right) / 2}px`
+      }
+    }
+  },
+  methods: {
+    highlight(result) {
+      return fuzzysort.highlight(result)
+    },
+    handleClickResult(result) {
+      this.$emit('select', result)
+    },
+    handleKeyPress(event) {
+      setTimeout(() => {
+        this.query = event.target.value
+      })
+    },
+    handleSelectActive() {
+      if (this.results.length > 0 && this.highlighted !== null) {
+        this.handleClickResult(this.results[this.highlighted])
+      }
+    },
+    handleHighlightNext() {
+      this.setHighlight(0, 1)
+    },
+    handleHighlightPrev() {
+      this.setHighlight(this.results.length - 1, -1)
+    },
+    setHighlight(initial, offset) {
+      if (this.results.length === 0) {
+        this.highlighted = null
+        return
+      }
+      if (offset === undefined) {
+        this.highlighted = initial
+        return
+      }
+
+      this.highlighted = this.highlighted === null ? initial : cycle(this.results, this.highlighted, offset)
+      this.scrollIntoViewIfNeeded(this.$el.querySelector(`.results li[data-result-index="${this.highlighted}`), false)
+    },
+    handleClickOutside(event) {
+      if (!this.$el.contains(event.target)) {
+        this.cancel()
+      }
+    },
+    cancel() {
+      this.$emit('cancel', 'select')
+    },
+    scrollIntoViewIfNeeded (element, alignToTop) {
+      const scroll = element.offsetParent.scrollTop
+      const height = element.offsetParent.offsetHeight
+      const top = element.offsetTop
+      const bottom = top + element.scrollHeight
+
+      if (top < scroll || bottom > scroll + height) {
+        element.scrollIntoView(alignToTop)
+      }
+    }
+
+  }
+}
+</script>
+
+<template>
+  <div
+    class="dialog"
+    :style="style"
+    @keydown.down.prevent="handleHighlightNext"
+    @keydown.up.prevent="handleHighlightPrev"
+    @keydown.enter.prevent="handleSelectActive"
+    @keydown.esc.prevent="cancel"
+  >
+    <p>{{prompt}}</p>
+    <input
+      v-if="choices.length > 10"
+      type="text"
+      :value="query !== null ? query : value"
+      @keypress="handleKeyPress"
+    />
+    <ul class="results">
+      <li
+        :key="`result-${i}`"
+        :class="{ highlighted: highlighted === i }"
+        :title="result.description"
+        :data-result-index="i"
+        v-for="(result, i) in results"
+        @click="handleClickResult(result)"
+        @mouseover="setHighlight(i)"
+      >
+        <span v-if="result.search" v-html="highlight(result.search)" />
+        <span v-else v-text="result[searchKey]" />
+      </li>
+    </ul>
+  </div>
+</template>
+
+<style>
+
+.dialog {
+	position: absolute;
+	transform: translate(-60px, -30px);
+	z-index: 2;
+}
+.dialog p {
+	margin: 0;
+	font-size: 90%;
+	font-weight: bold;
+}
+.dialog input {
+	display: block;
+	padding: 0;
+	margin: 0;
+	width: 120px;
+	height: 60px;
+	font-size: 120%;
+	border: 2px solid steelblue;
+	border-radius: 4px;
+
+	text-align: center;
+	line-height: 60px;
+}
+ul.results {
+	font-family: monospace;
+	list-style-position: inside;
+	list-style-type: none;
+	max-height: 200px;
+	overflow: scroll;
+	padding: 4px;
+	background: rgba(0, 0, 0, 0.8);
+	border-radius: 4px;
+}
+.results li {
+	cursor: pointer;
+	color: white;
+	padding: 5px;
+}
+.results li:hover, .results li.highlighted {
+	background: white;
+	color: black;
+}
+.results li b { color: red; }
+
+</style>
\ No newline at end of file
-- 
cgit v1.2.3