💄 Introducing tabs, minor UI changes

components/autocomplete.vue

@@ -1,11 +1,9 @@
 <template>
   <div class="autocomplete-wrapper">
     <label>
-      <slot />
       <input type="text" :placeholder="placeholder" v-model="value" @input="updateSuggestions" @keyup="updateSuggestions" @click="updateSuggestions" @keydown="handleKeystroke" ref="acInput" :spellcheck="spellcheck" :autocapitalize="spellcheck" :autocorrect="spellcheck">
-
       <ul class="suggestions" v-if="suggestions.length > 0 && suggestionsVisible" :style="{ transform: `translate(${suggestionsOffsetLeft}px, 0)` }">
-        <li v-for="(suggestion, index) in suggestions" @click.prevent="forceSuggestion(suggestion)" :class="{ active: currentSuggestionIndex === index }">{{ suggestion }}</li>
+        <li v-for="(suggestion, index) in suggestions" @click.prevent="forceSuggestion(suggestion)" :class="{ active: currentSuggestionIndex === index }" :key="index">{{ suggestion }}</li>
       </ul>
     </label>
   </div>
@@ -13,7 +11,6 @@
 
 <style lang="scss" scoped>
   .autocomplete-wrapper {
-
     position: relative;
 
     input:focus+ul.suggestions,
@@ -28,7 +25,6 @@
       top: 90%;
       margin: 0 4px;
       left: 0;
-
       padding: 0;
       border-radius: 0 0 4px 4px;
       z-index: 9999;
@@ -55,7 +51,6 @@
         }
       }
     }
-
   }
 
 </style>

components/section.vue

@@ -1,47 +1,45 @@
 <template>
-    <fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': noFrameColors }">
-        <legend @click.prevent="collapse">{{ label }} ↕</legend>
-        <div class="collapsible" :class="{ hidden: collapsed }">
-            <slot />
-        </div>
-    </fieldset>
+  <fieldset :id="label.toLowerCase()" :class="{ 'no-colored-frames': noFrameColors }">
+    <legend @click.prevent="collapse">{{ label }} ↕</legend>
+    <div class="collapsible" :class="{ hidden: collapsed }">
+      <slot />
+    </div>
+  </fieldset>
 </template>
 
 <style>
-    fieldset.no-colored-frames {
-        border-color: #afafaf !important;
-    }
+  fieldset.no-colored-frames {
+    border-color: #afafaf !important;
+  }
 
-    fieldset.no-colored-frames legend {
-        color: var(--ac-color);
-    }
+  fieldset.no-colored-frames legend {
+    color: var(--ac-color);
+  }
 </style>
 
 <script>
-    export default {
-
-        computed: {
-            noFrameColors () {
-                return this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false;
-            }
-        },
-
-        props: {
-            "label": {
-                type: String,
-                default: "Section"
-            },
-            "collapsed": {
-                type: Boolean
-            }
-        },
-
-        methods: {
-            collapse({ target }) {
-                const parent = target.parentNode;
-                parent.querySelector(".collapsible").classList.toggle('hidden');
-            },
-        }
-
+export default {
+  computed: {
+    noFrameColors() {
+      return this.$store.state.postwoman.settings.DISABLE_FRAME_COLORS || false;
     }
+  },
+
+  props: {
+    label: {
+      type: String,
+      default: "Section"
+    },
+    collapsed: {
+      type: Boolean
+    }
+  },
+
+  methods: {
+    collapse({ target }) {
+      const parent = target.parentNode;
+      parent.querySelector(".collapsible").classList.toggle("hidden");
+    }
+  }
+};
 </script>