Migrate custom option templates to scoped slots

Damian Dulisz · Damian Dulisz · commit 4995a16836fd · 2016-12-18T01:21:08.000+01:00
diff --git a/docs/MultiselectExample.vue b/docs/MultiselectExample.vue
@@ -9,9 +9,11 @@ div
     :multiple="true",
     :show-labels="false",
     :limit="3",
-    :option-function="customRender",
     @tag="onTagging"
   )
+    template(slot="option", scope="props")
+      span.badge__name {{ props.option.name }}
+      img.badge__img(:src="props.option.img", :alt="props.option.name")
     span(slot="noResult").
       Badge not found. Suggest a badge <a class="typo__link" href="https://github.com/monterail/vue-multiselect/issues" target="_blank">here</a>.
 </template>
@@ -39,12 +41,6 @@ export default {
     onTagging (newTag) {
       this.source.push({ name: newTag, language: newTag })
       this.value.push({ name: newTag, language: newTag })
-    },
-    customRender (h, option) {
-      return <div>
-        <span class="badge__name">{ option.name }</span>
-        <img class="badge__img" src={ option.img } alt={ option.name }/>
-      </div>
     }
   }
 }
diff --git a/docs/docs.scss b/docs/docs.scss
@@ -129,9 +129,10 @@ section {
   margin-bottom: rem(20px)
 }
 
-#examples {  
+#examples {
   .grid__column {
-    & > a {
+    & > p > a {
+      font-weight: $global-font-weight-bold;
       color: $primary-color;
       text-decoration: none;
     }
diff --git a/docs/main.js b/docs/main.js
@@ -81,7 +81,6 @@ new Vue({
       for (let i = sections.length - 1; i >= 0; i--) {
         if (window.scrollY > sections[i].offset) {
           this.currentPosition = sections[i].id
-          console.log(i)
           break
         }
       }
diff --git a/docs/partials/api/_slots.pug b/docs/partials/api/_slots.pug
@@ -8,20 +8,28 @@ h2.typo__h2#sub-slots(data-section) Slots
           th.table__th Description
       tbody
         tr.table__tr
-          td.table__td: strong MaxElements
+          td.table__td: strong option
+          td.table__td
+            | Slot for custom option template. See <a class="typo__link" href="#sub-custom-option-template">example.</a>
+            br
+            strong  Default: Shows option label
+        tr.table__tr
+          td.table__td: strong maxElements
           td.table__td
             | Shows when the maximum options have been selected. Defaults to string:
-            strong  Maximum of &lt;max&gt; options selected. First remove a selected option to select another.
+            br
+            strong  Default: Maximum of &lt;max&gt; options selected. First remove a selected option to select another.
         tr.table__tr
-          td.table__td: strong NoResult
+          td.table__td: strong noResult
           td.table__td
             | Shows when no elements match the search query. Defaults to string:
-            strong  No elements found. Consider changing the search query.
+            br
+            strong  Default: No elements found. Consider changing the search query.
         tr.table__tr
-          td.table__td: strong BeforeList
+          td.table__td: strong beforeList
           td.table__td
             | Shows before the list, when dropdown is open.
         tr.table__tr
-          td.table__td: strong AfterList
+          td.table__td: strong afterList
           td.table__td
             | Shows after the list, when dropdown is open.
diff --git a/docs/partials/examples/CustomOption.vue b/docs/partials/examples/CustomOption.vue
@@ -9,11 +9,13 @@ div
     :options="options",
     :option-height="104",
     :custom-label="customLabel",
-    :show-labels="false",
-    :option-function="customRender"
+    :show-labels="false"
   )
-    span(slot="noResult").
-      Oops! No elements found. Consider changing the search query.
+    template(slot="option", scope="props")
+      img.option__image(:src="props.option.img", alt="No Man’s Sky")
+      .option__desc
+        span.option__title {{ props.option.title }}
+        span.option__small {{ props.option.desc }}
   pre.language-json
     code.
       {{ value  }}
@@ -40,15 +42,6 @@ export default {
   methods: {
     customLabel ({ title, desc }) {
       return `${title} – ${desc}`
-    },
-    customRender (h, option) {
-      return <div>
-        <img class="option__image" src={ option.img } alt="No Man’s Sky" />
-        <div class="option__desc">
-          <span class="option__title">{ option.title }</span>
-          <span class="option__small">{ option.desc }</span>
-        </div>
-      </div>
     }
   }
 }
diff --git a/docs/partials/examples/_examples.pug b/docs/partials/examples/_examples.pug
@@ -66,9 +66,7 @@
     +example('Tagging')
   +subsection('Custom option template')
     :markdown-it
-      Vue-Multiselect can use custom render functions for option elements. This makes it possible to render different kind of data inside like images or even other components! For this to happen, pass a custom render function to the `:option-function` prop.
-
-      The `option-function` always receives the following `h`, `option`, `label` params. Please look at the `customRender` method for an example with JSX.
+      You can use `option` [scoped slot](https://vuejs.org/v2/guide/components.html#Scoped-Slots) to provide a custom option template. The available `props` include `props.option` and `props.search`. Look at the provided example for more details.
 
       To ensure the keyboard navigation works properly, remember to set the `:option-height` so it equals the height of the option template. By default, the component assumes an option height of 40px.
 
diff --git a/src/Multiselect.vue b/src/Multiselect.vue
@@ -77,11 +77,9 @@
                 :data-selected="selectedLabelText"
                 :data-deselect="deselectLabelText"
                 class="multiselect__option">
-                  <multiselect-option
-                    :option-function="optionFunction"
-                    :label="getOptionLabel(option)"
-                    :option="option">
-                  </multiselect-option>
+                  <slot name="option" :option="option" :search="search">
+                    <span>{{ getOptionLabel(option) }}</span>
+                  </slot>
               </span>
               <span
                 v-if="option.$isLabel"
@@ -105,13 +103,9 @@
 <script>
   import multiselectMixin from './multiselectMixin'
   import pointerMixin from './pointerMixin'
-  import MultiselectOption from './MultiselectOption'
 
   export default {
     name: 'vue-multiselect',
-    components: {
-      MultiselectOption
-    },
     mixins: [multiselectMixin, pointerMixin],
     props: {
       /**
@@ -196,12 +190,6 @@
       disabled: {
         type: Boolean,
         default: false
-      },
-      optionFunction: {
-        type: Function,
-        default (h, option, label) {
-          return h('span', {}, label)
-        }
       }
     },
     computed: {
diff --git a/src/MultiselectOption.js b/src/MultiselectOption.js

Original file line number	Diff line number	Diff line change
`@@ -129,9 +129,10 @@ section {`
`129`	`129`	`margin-bottom: rem(20px)`
`130`	`130`	`}`
`131`	`131`
`132`		`-#examples {`
	`132`	`+#examples {`
`133`	`133`	`.grid__column {`
`134`		`- & > a {`
	`134`	`+ & > p > a {`
	`135`	`+ font-weight: $global-font-weight-bold;`
`135`	`136`	`color: $primary-color;`
`136`	`137`	`text-decoration: none;`
`137`	`138`	`}`
Original file line number	Diff line number	Diff line change
`@@ -81,7 +81,6 @@ new Vue({`
`81`	`81`	`for (let i = sections.length - 1; i >= 0; i--) {`
`82`	`82`	`if (window.scrollY > sections[i].offset) {`
`83`	`83`	`this.currentPosition = sections[i].id`
`84`		`- console.log(i)`
`85`	`84`	`break`
`86`	`85`	`}`
`87`	`86`	`}`