Fixed #1341 - Chip templating support for AutoComplete and MultiSelec

api-generator/components/autocomplete.js

@@ -190,6 +190,10 @@ const AutoCompleteSlots = [
     {
         name: "footer",
         description: "Custom content for the component footer."
+    },
+    {
+        name: "chip",
+        description: "Custom content for the chip display."
     }
 ];
 

api-generator/components/multiselect.js

@@ -242,6 +242,10 @@ const MultiSelectSlots = [
     {
         name: "empty",
         description: "Custom content when there is no data to display"
+    },
+    {
+        name: "chip",
+        description: "Custom content for the chip display."
     }
 ];
 

src/components/autocomplete/AutoComplete.d.ts

@@ -28,7 +28,11 @@ declare class AutoComplete {
     $emit(eventName: 'complete', e: {originalEvent: Event, query: string}): this;
     $emit(eventName: 'clear'): this;
     $slots: {
-        list: VNode[];
+        item: VNode[];
+        optiongroup: VNode[];
+        header: VNode[];
+        footer: VNode[];
+        chip: VNode[];
     };
 }
 

src/components/autocomplete/AutoComplete.vue

@@ -4,7 +4,9 @@
             type="text" autoComplete="off" v-if="!multiple" role="searchbox" aria-autocomplete="list" :aria-controls="listId">
         <ul ref="multiContainer" :class="multiContainerClass" v-if="multiple" @click="onMultiContainerClick">
             <li v-for="(item, i) of modelValue" :key="i" class="p-autocomplete-token">
-                <span class="p-autocomplete-token-label">{{getItemContent(item)}}</span>
+                <slot name="chip" :value="item">
+                    <span class="p-autocomplete-token-label">{{getItemContent(item)}}</span>
+                </slot>
                 <span class="p-autocomplete-token-icon pi pi-times-circle" @click="removeItem($event, i)"></span>
             </li>
             <li class="p-autocomplete-input-token">

src/components/multiselect/MultiSelect.d.ts

@@ -42,7 +42,13 @@ declare class MultiSelect {
     $emit(eventName: 'filter', e: { originalEvent: Event, value: string }): this;
     $slots: {
         value: VNode[];
+        header: VNode[];
+        footer: VNode[];
+        emptyfilter: VNode[];
+        empty: VNode[];
         option: VNode[];
+        optiongroup: VNode[];
+        chip: VNode[];
     }
 }
 

src/components/multiselect/MultiSelect.vue

@@ -12,7 +12,9 @@
                     </template>
                     <template v-else-if="display === 'chip'">
                         <div v-for="item of modelValue" class="p-multiselect-token" :key="getLabelByValue(item)">
-                            <span class="p-multiselect-token-label">{{getLabelByValue(item)}}</span>
+                             <slot name="chip" :value="item">
+                                <span class="p-multiselect-token-label">{{getLabelByValue(item)}}</span>
+                             </slot>
                             <span v-if="!disabled" class="p-multiselect-token-icon pi pi-times-circle" @click="removeChip(item)"></span>
                         </div>
                         <template v-if="!modelValue || modelValue.length === 0">{{placeholder || 'empty'}}</template>

src/views/autocomplete/AutoCompleteDoc.vue

@@ -115,7 +115,7 @@ export default {
 
 		<h5>Templating</h5>
 		<p>Item template allows displaying custom content inside the suggestions panel. The slotProps variable passed to the template provides an item property to represent an item in the suggestions collection. 
-            In addition <i>optiongroup</i>, <i>header</i> and <i>footer</i> slots are provided for further customization</p>
+            In addition <i>optiongroup</i>, <i>chip</i>, <i>header</i> and <i>footer</i> slots are provided for further customization</p>
 <pre v-code><code><template v-pre>
 &lt;AutoComplete v-model="brand" :suggestions="filteredBrands" @complete="searchBrand($event)" placeholder="Hint: type 'v' or 'f'" :dropdown="true"&gt;
     &lt;template #item="slotProps"&gt;
@@ -325,6 +325,10 @@ export default {
                         <td>footer</td>
                         <td>value: Value of the component <br />
                             suggestions: Displayed options</td>
+                    </tr>
+                    <tr>
+                        <td>chip</td>
+                        <td>value: A value in the selection</td>
                     </tr>
 				</tbody>
 			</table>

src/views/multiselect/MultiSelectDoc.vue

@@ -98,7 +98,7 @@ export default {
 
 		<h5>Templating</h5>
 		<p>Label of an option is used as the display text of an item by default, for custom content support define an <i>option</i> template that gets the option instance as a parameter.
-        In addition <i>value</i>, <i>optiongroup</i>, <i>header</i>, <i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.</p>
+        In addition <i>value</i>, <i>optiongroup</i>, <i>chip</i>, <i>header</i>, <i>footer</i>, <i>emptyfilter</i> and <i>empty</i> slots are provided for further customization.</p>
 <pre v-code><code><template v-pre>
 &lt;MultiSelect v-model="selectedCars2" :options="cars" optionLabel="brand" placeholder="Select a Car"&gt;
 	&lt;template #value="slotProps"&gt;
@@ -420,6 +420,10 @@ export default {
                     <tr>
                         <td>empty</td>
                         <td>-</td>
+                    </tr>
+                    <tr>
+                        <td>chip</td>
+                        <td>value: A value in the selection</td>
                     </tr>
 				</tbody>
 			</table>