From 642e61c48e4431f689eb0deb514a7bc2e6c6c974 Mon Sep 17 00:00:00 2001
From: Jeff <jeff.sagal@briteweb.com>
Date: Wed, 30 Oct 2019 16:44:58 -0700
Subject: [PATCH] move slot up one level

---
 src/components/Select.vue | 50 +++++++++++++++++++++++++++++----------
 1 file changed, 37 insertions(+), 13 deletions(-)

diff --git a/src/components/Select.vue b/src/components/Select.vue
index f2aba4e..2a15cfe 100644
--- a/src/components/Select.vue
+++ b/src/components/Select.vue
@@ -52,19 +52,13 @@
 
     <transition :name="transition">
       <ul ref="dropdownMenu" v-if="dropdownOpen" class="vs__dropdown-menu" role="listbox" @mousedown.prevent="onMousedown" @mouseup="onMouseUp">
-        <li
-          role="option"
-          v-for="(option, index) in filteredOptions"
-          :key="getOptionKey(option)"
-          class="vs__dropdown-option"
-          :class="{ 'vs__dropdown-option--selected': isOptionSelected(option), 'vs__dropdown-option--highlight': index === typeAheadPointer, 'vs__dropdown-option--disabled': !selectable(option) }"
-          @mouseover="selectable(option) ? typeAheadPointer = index : null"
-          @mousedown.prevent.stop="selectable(option) ? select(option) : null"
-        >
-          <slot name="option" v-bind="normalizeOptionForSlot(option)">
-            {{ getOptionLabel(option) }}
-          </slot>
-        </li>
+        <slot name="option" v-for="(option, index) in normalizedFilteredOptions">
+            <li
+              role="option"
+              v-bind="getDropdownOptionScope(option, index).attributes"
+              v-on="getDropdownOptionScope(option, index).events"
+            >{{ getOptionLabel(option) }}</li>
+        </slot>
         <li v-if="!filteredOptions.length" class="vs__no-options" @mousedown.stop="">
           <slot name="no-options">Sorry, no matching options.</slot>
         </li>
@@ -299,6 +293,32 @@
           }
         }
       },
+      
+      getDropdownOptionScope: {
+        type: Function,
+        default(option, index) {
+          return {
+            option,
+            attributes: {
+              key: this.getOptionKey(option),
+              class: {
+                'vs__dropdown-option': true,
+                'vs__dropdown-option--selected': this.isOptionSelected(option),
+                'vs__dropdown-option--highlight': index === this.typeAheadPointer,
+                'vs__dropdown-option--disabled': !this.selectable(option),
+              },
+            },
+            events: {
+              'mouseover': () => this.selectable(option) ? this.typeAheadPointer = index : null,
+              'mousedown': e => {
+                e.preventDefault();
+                e.stopPropagation();
+                return this.selectable(option) ? this.select(option) : null;
+              }
+            },
+          };
+        },
+      },
 
       /**
        * Select the current value if selectOnTab is enabled
@@ -1052,6 +1072,10 @@
         return options
       },
 
+      normalizedFilteredOptions() {
+        return this.filteredOptions.map(option => this.normalizeOptionForSlot(option));
+      },
+
       /**
        * Check if there aren't any options selected.
        * @return {Boolean}