feat: add mouse support with keyboard continuity

Author: mlbrgl

src/components/App.vue

@@ -6,17 +6,19 @@
     <div class="flags-dropdown-arrow" />
     <RegionInput
       :value="value"
-      @input="onInput($event)"
+      @input="onInput"
       @up="onUp"
       @down="onDown"
-      @enter="onEnter"
+      @enter="onSelectRegion"
       @reset="onReset"
     />
     <RegionsList
       :regions="filteredRegions"
       :filter="value"
       :highlighted-index="highlightedIndex"
-      :selected-region="selectedRegion"
+      :selected="selectedRegion"
+      @highlight="onHighlightRegion"
+      @select="onSelectRegion"
     />
     <a
       :href="moreParameters.href"
@@ -72,11 +74,14 @@ export default {
         this.highlightedIndex += 1;
       }
     },
-    onInput(event) {
-      this.value = event;
+    onHighlightRegion(region) {
+      this.highlightedIndex = this.filteredRegions.findIndex(reg => reg.name === region.name);
+    },
+    onInput(value) {
+      this.value = value;
       this.highlightedIndex = 0;
     },
-    onEnter() {
+    onSelectRegion() {
       const updatedCookieString = this.cookieString
         .split(':')
         .map((paramString) => {

src/components/RegionItem.vue

@@ -2,6 +2,8 @@
   <li
     :data-selected="region.locale"
     :class="{ [$style.highlighted]: highlighted }"
+    @mouseenter="$emit('highlight', region)"
+    @click="$emit('select')"
   >
     <span :class="`flag ${country}`" />
     {{ region.name }}

src/components/RegionsList.vue

@@ -1,15 +1,17 @@
 <template>
   <div class="flags-dropdown-body">
     <p class="flags-dropdown-chosen js-select-chosen">
-      <span :class="selectedRegion.class" />
-      <strong class="js-selected-text">{{ selectedRegion.name }}</strong>
+      <span :class="selected.class" />
+      <strong class="js-selected-text">{{ selected.name }}</strong>
     </p>
     <ul class="flags-dropdown-list">
       <RegionItem
         v-for="(region, index) in regions"
         :key="region.id"
         :region="region"
         :highlighted="index === highlightedIndex"
+        @highlight="highlight"
+        @select="$emit('select')"
       />
     </ul>
   </div>
@@ -27,7 +29,12 @@ export default {
     regions: { type: Object, required: true },
     filter: { type: String, required: true },
     highlightedIndex: { type: Number, required: true },
-    selectedRegion: { type: Object, default: () => ({}) },
+    selected: { type: Object, default: () => ({}) },
+  },
+  methods: {
+    highlight(region) {
+      this.$emit('highlight', region);
+    },
   },
 };
 </script>