Merge pull request sagalbot#420 from sagalbot/feature/customize-tags

sagalbot · web-flow · commit 860e4391b0fe · 2018-01-15T20:06:12.000-08:00
Custom Label Slot
diff --git a/dev.html b/dev.html
@@ -47,6 +47,19 @@
                 {{option.label}} ({{option.value}})
             </template>
         </v-select>
+        <v-select multiple placeholder="custom label template" :options="options">
+            <span
+                    slot="selected-option-container"
+                    slot-scope="props"
+                    class="selected-tag"
+            >
+                {{ props.option.label }} ({{ props.option.value }})
+              <button v-if="props.multiple" @click="props.deselect(props.option)" type="button" class="close" aria-label="Remove option">
+                <span aria-hidden="true">&times;</span>
+              </button>
+            </span>
+        </v-select>
+
         <v-select placeholder="disabled" disabled  value="disabled"></v-select>
         <v-select placeholder="disabled multiple" disabled multiple :value="['disabled', 'multiple']"></v-select>
         <v-select placeholder="filterable=false, @search=searchPeople" label="first_name" :filterable="false" @search="searchPeople" :options="people"></v-select>
diff --git a/src/components/Select.vue b/src/components/Select.vue
@@ -313,7 +313,7 @@
     <div ref="toggle" @mousedown.prevent="toggleDropdown" :class="['dropdown-toggle', 'clearfix']">
 
       <slot v-for="option in valueAsArray" name="selected-option-container"
-            :option="option" :deselect="deselect">
+            :option="option" :deselect="deselect" :multiple="multiple" :disabled="disabled">
         <span class="selected-tag" v-bind:key="option.index">
           <slot name="selected-option" v-bind="option">
             {{ getOptionLabel(option) }}
