From 990e07c12def783c93b72e8dea2b62f8e0d27209 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Fri, 11 Jun 2021 15:38:06 +0300
Subject: [PATCH] Fixed #1341 - Chip templating support for AutoComplete and
 MultiSelec

---
 api-generator/components/autocomplete.js      | 4 ++++
 api-generator/components/multiselect.js       | 4 ++++
 src/components/autocomplete/AutoComplete.d.ts | 6 +++++-
 src/components/autocomplete/AutoComplete.vue  | 4 +++-
 src/components/multiselect/MultiSelect.d.ts   | 6 ++++++
 src/components/multiselect/MultiSelect.vue    | 4 +++-
 src/views/autocomplete/AutoCompleteDoc.vue    | 6 +++++-
 src/views/multiselect/MultiSelectDoc.vue      | 6 +++++-
 8 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/api-generator/components/autocomplete.js b/api-generator/components/autocomplete.js
index db40675bc..a145ac724 100644
--- a/api-generator/components/autocomplete.js
+++ b/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."
     }
 ];
 
diff --git a/api-generator/components/multiselect.js b/api-generator/components/multiselect.js
index 92dfa8efd..874296e69 100644
--- a/api-generator/components/multiselect.js
+++ b/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."
     }
 ];
 
diff --git a/src/components/autocomplete/AutoComplete.d.ts b/src/components/autocomplete/AutoComplete.d.ts
index ab55c1058..a529b8939 100755
--- a/src/components/autocomplete/AutoComplete.d.ts
+++ b/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[];
     };
 }
 
diff --git a/src/components/autocomplete/AutoComplete.vue b/src/components/autocomplete/AutoComplete.vue
index b0ef6aa91..3420af0c4 100755
--- a/src/components/autocomplete/AutoComplete.vue
+++ b/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">
diff --git a/src/components/multiselect/MultiSelect.d.ts b/src/components/multiselect/MultiSelect.d.ts
index 58420e1c0..c738a2ff1 100755
--- a/src/components/multiselect/MultiSelect.d.ts
+++ b/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[];
     }
 }
 
diff --git a/src/components/multiselect/MultiSelect.vue b/src/components/multiselect/MultiSelect.vue
index 606277c09..982e4d696 100755
--- a/src/components/multiselect/MultiSelect.vue
+++ b/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>
diff --git a/src/views/autocomplete/AutoCompleteDoc.vue b/src/views/autocomplete/AutoCompleteDoc.vue
index ace3f3f42..b2544efcd 100755
--- a/src/views/autocomplete/AutoCompleteDoc.vue
+++ b/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>
diff --git a/src/views/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue
index b132e8f76..cdc7eff4e 100755
--- a/src/views/multiselect/MultiSelectDoc.vue
+++ b/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>