Add suggestion scoped slot

Author: Owumaro

src/components/VueBootstrapTypeahead.vue

@@ -34,7 +34,16 @@
       :text-variant="textVariant"
       :minMatchingChars="minMatchingChars"
       @hit="handleHit"
-    />
+    >
+      <!-- pass down all scoped slots -->
+      <template v-for="(slot, slotName) in $scopedSlots" :slot="slotName" slot-scope="{ data, htmlText }">
+        <slot :name="slotName" v-bind="{ data, htmlText }"></slot>
+      </template>
+      <!-- below is the right solution, however if the user does not provide a scoped slot, vue will still set $scopedSlots.suggestion to a blank scope
+      <template v-if="$scopedSlots.suggestion" slot="suggestion" slot-scope="{ data, htmlText }">
+        <slot name="suggestion" v-bind="{ data, htmlText }" />
+      </template>-->
+    </vue-bootstrap-typeahead-list>
   </div>
 </template>
 

src/components/VueBootstrapTypeaheadList.vue

@@ -2,11 +2,16 @@
   <div class="list-group shadow">
     <vue-bootstrap-typeahead-list-item
       v-for="(item, id) in matchedItems" :key="id"
-      v-html="highlight(item.text)"
+      :data="item.data"
+      :html-text="highlight(item.text)"
       :background-variant="backgroundVariant"
       :text-variant="textVariant"
       @click.native="handleHit(item, $event)"
-    />
+    >
+      <template v-if="$scopedSlots.suggestion" slot="suggestion" slot-scope="{ data, htmlText }">
+        <slot name="suggestion" v-bind="{ data, htmlText }" />
+      </template>
+    </vue-bootstrap-typeahead-list-item>
   </div>
 </template>
 

src/components/VueBootstrapTypeaheadListItem.vue

@@ -5,7 +5,9 @@
     @mouseover="active = true"
     @mouseout="active = false"
   >
-    <slot></slot>
+    <slot name="suggestion" v-bind="{ data: data, htmlText: htmlText }">
+      <span v-html="htmlText"></span>
+    </slot>
   </a>
 </template>
 
@@ -14,6 +16,10 @@ export default {
   name: 'VueBootstrapTypeaheadListItem',
 
   props: {
+    data: {},
+    htmlText: {
+      type: String
+    },
     backgroundVariant: {
       type: String
     },

src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <div class="row">
+    <div class="row mb-5">
       <div class="col-md-6">
         <h2>A simple typeahead for Vue 2 using Bootstrap 4</h2>
         <ul>
@@ -21,7 +21,11 @@
             :serializer="s => s.name"
             placeholder="Canada, United States, etc..."
             @hit="selectedCountry = $event"
-          />
+          >
+            <template slot="suggestion" slot-scope="{ data, htmlText }">
+              <span v-html="htmlText"></span>&nbsp;<small>{{ data.code }}</small>
+            </template>
+          </vue-bootstrap-typeahead>
         </b-card>
       </div>
     </div>
@@ -46,7 +50,7 @@
         </vue-bootstrap-typeahead>
       </div>
     </div>
-    <div class="row">
+    <div class="row mb-5">
       <div class="col">
         <b-card title="Selected Address">
           <p class="card-text">