style: selected option highlight in menu and add --vs-dropdown-options-gap

Author: howard-tzw

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue3-select",
-  "version": "0.0.5",
+  "version": "0.0.5-beta.1",
   "description": "A maintained fork of vue-select for Vue 3",
   "author": "Jeff Sagal <sagalbot@gmail.com>, Howard Chen <howard.tzw@gmail.com>",
   "homepage": "https://vue-select.org",

src/components/Select.vue

@@ -107,7 +107,8 @@
             'vs__dropdown-option--deselect':
               isOptionDeselectable(option) && index === typeAheadPointer,
             'vs__dropdown-option--selected': isOptionSelected(option),
-            'vs__dropdown-option--highlight': index === typeAheadPointer,
+            'vs__dropdown-option--highlight':
+              index === typeAheadPointer || isOptionSelected(option),
             'vs__dropdown-option--disabled': !selectable(option),
           }"
           :aria-selected="index === typeAheadPointer ? true : null"

src/css/global/variables.css

@@ -49,6 +49,7 @@
   --vs-dropdown-overflow-x: auto;
   --vs-dropdown-overflow-y: auto;
   --vs-dropdown-border-radius: 4px;
+  --vs-dropdown-options-gap: 5px;
 
   /* Dropdown Options */
   --vs-dropdown-option-color: var(--vs-dropdown-color);

src/css/modules/dropdown-menu.css

@@ -5,7 +5,9 @@
   max-height: var(--vs-dropdown-max-height);
   min-width: var(--vs-dropdown-min-width);
 
-  display: block;
+  display: flex;
+  flex-direction: column;
+  gap: var(--vs-dropdown-options-gap);
   box-sizing: border-box;
   position: absolute;
   /* calc to ensure the left and right borders of the dropdown appear flush with the toggle. */