refactor: lint

components/smart/AutoComplete.vue

@@ -1,29 +1,29 @@
 <template>
   <div class="autocomplete-wrapper">
     <input
+      ref="acInput"
+      v-model="text"
       type="text"
       :placeholder="placeholder"
-      v-model="text"
-      @input="updateSuggestions"
-      @keyup="updateSuggestions"
-      @click="updateSuggestions"
-      @keydown="handleKeystroke"
-      ref="acInput"
       :spellcheck="spellcheck"
       :autocapitalize="autocapitalize"
       :autocorrect="spellcheck"
       :class="styles"
+      @input="updateSuggestions"
+      @keyup="updateSuggestions"
+      @click="updateSuggestions"
+      @keydown="handleKeystroke"
     />
     <ul
-      class="suggestions"
       v-if="suggestions.length > 0 && suggestionsVisible"
+      class="suggestions"
       :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }"
     >
       <li
         v-for="(suggestion, index) in suggestions"
-        @click.prevent="forceSuggestion(suggestion)"
-        :class="{ active: currentSuggestionIndex === index }"
         :key="index"
+        :class="{ active: currentSuggestionIndex === index }"
+        @click.prevent="forceSuggestion(suggestion)"
       >
         {{ suggestion }}
       </li>
@@ -31,6 +31,155 @@
   </div>
 </template>
 
+<script>
+export default {
+  props: {
+    spellcheck: {
+      type: Boolean,
+      default: true,
+      required: false,
+    },
+
+    autocapitalize: {
+      type: String,
+      default: "off",
+      required: false,
+    },
+
+    placeholder: {
+      type: String,
+      default: "",
+      required: false,
+    },
+
+    source: {
+      type: Array,
+      required: true,
+    },
+
+    value: {
+      type: String,
+      default: "",
+      required: false,
+    },
+
+    styles: {
+      type: String,
+      default: "",
+    },
+  },
+
+  data() {
+    return {
+      text: this.value,
+      selectionStart: 0,
+      suggestionsOffsetLeft: 0,
+      currentSuggestionIndex: -1,
+      suggestionsVisible: false,
+    }
+  },
+
+  computed: {
+    /**
+     * Gets the suggestions list to be displayed under the input box.
+     *
+     * @returns {default.props.source|{type, required}}
+     */
+    suggestions() {
+      const input = this.text.substring(0, this.selectionStart)
+
+      return (
+        this.source
+          .filter(
+            (entry) =>
+              entry.toLowerCase().startsWith(input.toLowerCase()) &&
+              input.toLowerCase() !== entry.toLowerCase()
+          )
+          // Cut off the part that's already been typed.
+          .map((entry) => entry.substring(this.selectionStart))
+          // We only want the top 6 suggestions.
+          .slice(0, 6)
+      )
+    },
+  },
+
+  watch: {
+    text() {
+      this.$emit("input", this.text)
+    },
+  },
+
+  mounted() {
+    this.updateSuggestions({
+      target: this.$refs.acInput,
+    })
+  },
+
+  methods: {
+    updateSuggestions(event) {
+      // Hide suggestions if ESC pressed.
+      if (event.code && event.code === "Escape") {
+        event.preventDefault()
+        this.suggestionsVisible = false
+        this.currentSuggestionIndex = -1
+        return
+      }
+
+      // As suggestions is a reactive property, this implicitly
+      // causes suggestions to update.
+      this.selectionStart = this.$refs.acInput.selectionStart
+      this.suggestionsOffsetLeft = 12 * this.selectionStart
+      this.suggestionsVisible = true
+    },
+
+    forceSuggestion(text) {
+      const input = this.text.substring(0, this.selectionStart)
+      this.text = input + text
+
+      this.selectionStart = this.text.length
+      this.suggestionsVisible = true
+      this.currentSuggestionIndex = -1
+    },
+
+    handleKeystroke(event) {
+      switch (event.code) {
+        case "ArrowUp":
+          event.preventDefault()
+          this.currentSuggestionIndex =
+            this.currentSuggestionIndex - 1 >= 0
+              ? this.currentSuggestionIndex - 1
+              : 0
+          break
+
+        case "ArrowDown":
+          event.preventDefault()
+          this.currentSuggestionIndex =
+            this.currentSuggestionIndex < this.suggestions.length - 1
+              ? this.currentSuggestionIndex + 1
+              : this.suggestions.length - 1
+          break
+
+        case "Tab": {
+          const activeSuggestion =
+            this.suggestions[
+              this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0
+            ]
+
+          if (!activeSuggestion) {
+            return
+          }
+
+          event.preventDefault()
+          const input = this.text.substring(0, this.selectionStart)
+          this.text = input + activeSuggestion
+          break
+        }
+      }
+    },
+  },
+}
+</script>
+
 <style scoped lang="scss">
 .autocomplete-wrapper {
   @apply relative;
@@ -78,147 +227,3 @@
   }
 }
 </style>
-
-<script>
-export default {
-  props: {
-    spellcheck: {
-      type: Boolean,
-      default: true,
-      required: false,
-    },
-
-    autocapitalize: {
-      type: String,
-      default: "off",
-      required: false,
-    },
-
-    placeholder: {
-      type: String,
-      default: "",
-      required: false,
-    },
-
-    source: {
-      type: Array,
-      required: true,
-    },
-
-    value: {
-      type: String,
-      default: "",
-      required: false,
-    },
-
-    styles: {
-      type: String,
-      default: "",
-    },
-  },
-
-  watch: {
-    text() {
-      this.$emit("input", this.text)
-    },
-  },
-
-  data() {
-    return {
-      text: this.value,
-      selectionStart: 0,
-      suggestionsOffsetLeft: 0,
-      currentSuggestionIndex: -1,
-      suggestionsVisible: false,
-    }
-  },
-
-  methods: {
-    updateSuggestions(event) {
-      // Hide suggestions if ESC pressed.
-      if (event.code && event.code === "Escape") {
-        event.preventDefault()
-        this.suggestionsVisible = false
-        this.currentSuggestionIndex = -1
-        return
-      }
-
-      // As suggestions is a reactive property, this implicitly
-      // causes suggestions to update.
-      this.selectionStart = this.$refs.acInput.selectionStart
-      this.suggestionsOffsetLeft = 12 * this.selectionStart
-      this.suggestionsVisible = true
-    },
-
-    forceSuggestion(text) {
-      let input = this.text.substring(0, this.selectionStart)
-      this.text = input + text
-
-      this.selectionStart = this.text.length
-      this.suggestionsVisible = true
-      this.currentSuggestionIndex = -1
-    },
-
-    handleKeystroke(event) {
-      switch (event.code) {
-        case "ArrowUp":
-          event.preventDefault()
-          this.currentSuggestionIndex =
-            this.currentSuggestionIndex - 1 >= 0 ? this.currentSuggestionIndex - 1 : 0
-          break
-
-        case "ArrowDown":
-          event.preventDefault()
-          this.currentSuggestionIndex =
-            this.currentSuggestionIndex < this.suggestions.length - 1
-              ? this.currentSuggestionIndex + 1
-              : this.suggestions.length - 1
-          break
-
-        case "Tab":
-          let activeSuggestion =
-            this.suggestions[this.currentSuggestionIndex >= 0 ? this.currentSuggestionIndex : 0]
-
-          if (!activeSuggestion) {
-            return
-          }
-
-          event.preventDefault()
-          let input = this.text.substring(0, this.selectionStart)
-          this.text = input + activeSuggestion
-          break
-      }
-    },
-  },
-
-  computed: {
-    /**
-     * Gets the suggestions list to be displayed under the input box.
-     *
-     * @returns {default.props.source|{type, required}}
-     */
-    suggestions() {
-      let input = this.text.substring(0, this.selectionStart)
-
-      return (
-        this.source
-          .filter(
-            (entry) =>
-              entry.toLowerCase().startsWith(input.toLowerCase()) &&
-              input.toLowerCase() !== entry.toLowerCase()
-          )
-          // Cut off the part that's already been typed.
-          .map((entry) => entry.substring(this.selectionStart))
-          // We only want the top 6 suggestions.
-          .slice(0, 6)
-      )
-    },
-  },
-
-  mounted() {
-    this.updateSuggestions({
-      target: this.$refs.acInput,
-    })
-  },
-}
-</script>