Merge branch 'master' of https://github.com/primefaces/primevue

src/components/chips/Chips.vue

@@ -2,7 +2,7 @@
     <div class="p-chips p-component">
         <ul :class="['p-inputtext', {'p-disabled': disabled, 'p-focus': focused}]" @click="onWrapperClick()">
             <li v-for="(val,i) of value" :key="val" class="p-chips-token p-highlight">
-                <slot :value="val">  
+                <slot name="chip" :value="val">  
                     <span class="p-chips-token-icon pi pi-fw pi-times" @click="removeItem($event, i)"></span>
                     <span class="p-chips-token-label">{{val}}</span>
                 </slot>

src/components/listbox/Listbox.vue

@@ -10,7 +10,7 @@
             <ul class="p-listbox-list">
                 <li v-for="(option, i) of visibleOptions" :tabindex="isOptionDisabled(option) ? null : '0'" :class="['p-listbox-item', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option)}]" 
                     :aria-label="getOptionLabel(option)" :key="getOptionLabel(option)" @click="onOptionSelect($event, option)" @touchend="onOptionTouchEnd()" @keydown="onOptionKeyDown($event, option)">
-                    <slot :option="option" :index="i">  
+                    <slot name="option" :option="option" :index="i">  
                         {{getOptionLabel(option)}}
                     </slot>
                 </li>

src/components/selectbutton/SelectButton.vue

@@ -4,7 +4,7 @@
             @click="onOptionSelect($event, option, i)" @keydown.enter.prevent="onOptionSelect($event, option, i)" @keydown.space.prevent="onOptionSelect($event, option, i)"
             :tabindex="isOptionDisabled(option) ? null : '0'" @focus="onFocus($event, i)" @blur="onBlur($event)"
             :class="['p-button p-component p-button-text-only', {'p-highlight': isSelected(option), 'p-disabled': isOptionDisabled(option), 'p-focus': (i === focusedIndex)}]">
-            <slot :option="option" :index="i">
+            <slot name="option" :option="option" :index="i">
                 <span class="p-button-text p-c">{{getOptionLabel(option)}}</span>
             </slot>
         </div>

src/views/autocomplete/AutoCompleteDemo.vue

@@ -14,10 +14,10 @@
 
             <h3>Dropdown and Templating</h3>
             <AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true">
-                <template slot="item" slot-scope="{item}">
+                <template #item="slotProps">
                     <div class="p-clearfix p-autocomplete-brand-item">
-                        <img :alt="item" :src="'/demo/images/car/' + item + '.png'" />
+                        <img :alt="slotProps.item" :src="'/demo/images/car/' + slotProps.item + '.png'" />
-                        <div>{{item}}</div>
+                        <div>{{slotProps.item}}</div>
                     </div>
                 </template>
             </AutoComplete>

src/views/chips/ChipsDemo.vue

@@ -13,9 +13,9 @@
 
             <h3>Template</h3>
             <Chips v-model="value2">
-                <template slot-scope="{value}">
+                <template #chip="slotProps">
                     <div>
-                        <span>{{value}} - (active) </span>
+                        <span>{{slotProps.value}} - (active) </span>
                         <i class="pi pi-user-plus" style="font-size: 14px"></i>
                     </div>
                 </template>

src/views/dropdown/DropdownDemo.vue

@@ -22,10 +22,10 @@
                         <span>{{props.option.brand}}</span>
                     </div>
                 </template>
-                <template slot="option" slot-scope="{option}">
+                <template #option="slotProps">
                     <div class="p-clearfix p-dropdown-car-option">
-                        <img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" />
+                        <img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
-                        <span>{{option.brand}}</span>
+                        <span>{{slotProps.option.brand}}</span>
                     </div>
                 </template>
             </Dropdown>

src/views/listbox/ListboxDemo.vue

@@ -13,10 +13,10 @@
 
             <h3>Advanced with Templating, Filtering and Multiple Selection</h3>
             <Listbox v-model="selectedCars" :options="cars" :multiple="true" :filter="true" optionLabel="brand" listStyle="max-height:250px" style="width:15em">
-                <template slot-scope="{option}">
+                <template #option="slotProps">
                     <div class="p-clearfix">
-                        <img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" style="display:inline-block;margin:5px 0 0 5px;width:48px" />
+                        <img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.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>
+                        <span style="float:right;margin:1.25em .5em 0 0">{{slotProps.option.brand}}</span>
                     </div>
                 </template>
             </Listbox>

src/views/multiselect/MultiSelectDemo.vue

@@ -13,19 +13,19 @@
 
             <h3>Advanced with Templating and Filtering</h3>
             <MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car" :filter="true">
-                <template slot="value" slot-scope="{value}">
+                <template #value="slotProps">
-                    <div class="p-multiselect-car-token" v-for="option of value" :key="option.brand">
+                    <div class="p-multiselect-car-token" v-for="option of slotProps.value" :key="option.brand">
                         <img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" />
                         <span>{{option.brand}}</span>
                     </div>
-                    <div class="p-multiselect-empty-car-token" v-if="!value || value.length === 0">
+                    <div class="p-multiselect-empty-car-token" v-if="!slotProps.value || slotProps.value.length === 0">
                         Select Brands
                     </div>
                 </template>
-                <template slot="option" slot-scope="{option}">
+                <template #option="slotProps">
                     <div class="p-multiselect-car-option">
-                        <img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" />
+                        <img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" />
-                        <span>{{option.brand}}</span>
+                        <span>{{slotProps.option.brand}}</span>
                     </div>
                 </template>
             </MultiSelect>

src/views/selectbutton/SelectButtonDemo.vue

@@ -18,10 +18,10 @@
 
             <h3>Custom Content</h3>
             <SelectButton v-model="selectedCar" :options="cars" optionLabel="brand">
-                <template slot-scope="{option}">
+                <template #option="slotProps">
                     <div style="text-align: center; padding: 1em; width: 125px">
-                        <img :alt="option.brand" :src="'/demo/images/car/' + option.brand + '.png'" style="width:48px" />
+                        <img :alt="slotProps.option.brand" :src="'/demo/images/car/' + slotProps.option.brand + '.png'" style="width:48px" />
-                        <div style="margin-top: 1em">{{option.brand}}</div>
+                        <div style="margin-top: 1em">{{slotProps.option.brand}}</div>
                     </div>
                 </template>
             </SelectButton>