Templating support for ListBox

src/assets/styles/app.scss

@@ -741,7 +741,7 @@ body {
     /* Introduction */
     .introduction {
         background-color: #1976d2;
-        background: url('./assets/images/primevue-introduction.jpg');
+        background: url('./assets/images/home/primevue-introduction.jpg');
         background-repeat: no-repeat;
         background-size: cover;
         color: #222222;

src/components/listbox/ListBox.vue

@@ -1,10 +1,12 @@
 <template>
     <div class="p-listbox p-inputtext p-component">
-        <div class="p-listbox-list-wrapper">
+        <div class="p-listbox-list-wrapper" :style="listStyle">
             <ul class="p-listbox-list">
-                <li v-for="option of options" tabindex="0" :class="['p-listbox-item', {'p-highlight': isSelected(option)}]" 
+                <li v-for="(option, i) of options" tabindex="0" :class="['p-listbox-item', {'p-highlight': isSelected(option)}]" 
                     :key="getOptionLabel(option)" @click="onOptionClick($event, option)" @touchend="onOptionTouchEnd()">
-                    {{getOptionLabel(option)}}
+                    <slot :option="option" :index="i">  
+                        {{getOptionLabel(option)}}
+                    </slot>
                 </li>
             </ul>
         </div>
@@ -20,6 +22,7 @@ export default {
         options: Array,
         disabled: Boolean,
         dataKey: null,
+        listStyle: name,
         multiple: Boolean,
         metaKeySelection: Boolean,
         filter: Boolean,

src/views/listbox/ListBoxDemo.vue

@@ -13,6 +13,16 @@
 
             <h3>Multiple</h3>
             <p-listBox :multiple="true" v-model="selectedCities" :options="cities" optionLabel="name" />
+
+            <h3>Advanced with Templating and Filtering</h3>
+            <p-listBox v-model="selectedCar" :options="cars" listStyle="max-height:250px" style="width:15em">
+                <template slot-scope="{option, index}">
+                    <div className="p-clearfix">
+                        <img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
+                        <span style="float:right;margin:1.25em .5em 0 0">{{option.brand}}</span>
+                    </div>
+                </template>
+            </p-listBox>
         </div>
     </div>
 </template>
@@ -23,12 +33,24 @@ export default {
         return {
             selectedCity: null,
             selectedCities: null,
+            selectedCar: null,
             cities: [
                 {name: 'New York', code: 'NY'},
                 {name: 'Rome', code: 'RM'},
                 {name: 'London', code: 'LDN'},
                 {name: 'Istanbul', code: 'IST'},
                 {name: 'Paris', code: 'PRS'}
+            ],
+            cars: [
+                {brand: 'Audi', value: 'Audi'},
+                {brand: 'Bmw', value: 'Bmw'},
+                {brand: 'Fiat', value: 'Fiat'},
+                {brand: 'Honda', value: 'Honda'},
+                {brand: 'Jaguar', value: 'Jaguar'},
+                {brand: 'Mercedes', value: 'Mercedes'},
+                {brand: 'Renault', value: 'Renault'},
+                {brand: 'Volkswagen', value: 'Volkswagen'},
+                {brand: 'Volvo', value: 'Volvo'}
             ]
         }
     }