Refactor #3832 Refactor #3833 - For Chips

api-generator/components/chips.js

@@ -106,6 +106,10 @@ const ChipsSlots = [
     {
         name: 'chips',
         description: 'Custom content for the chips'
+    },
+    {
+        name: 'removetokenicon',
+        description: 'Custom remove token icon template.'
     }
 ];
 

components/lib/chips/Chips.d.ts

@@ -76,7 +76,6 @@ export interface ChipsProps {
     inputProps?: InputHTMLAttributes | undefined;
     /**
      * Icon to display in chip remove action.
-     * @defaultValue pi pi-times-circle
      */
     removeTokenIcon?: string | undefined;
     /**
@@ -110,6 +109,10 @@ export interface ChipsSlots {
          */
         value: any;
     }): VNode[];
+    /**
+     * Custom remove token icon template.
+     */
+    removetokenicon(): VNode[];
 }
 /**
  * Defines valid emits in Chips component.

components/lib/chips/Chips.vue

@@ -28,7 +28,9 @@
                 <slot name="chip" :value="val">
                     <span class="p-chips-token-label">{{ val }}</span>
                 </slot>
-                <span :class="['p-chips-token-icon', removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true"></span>
+                <slot name="removetokenicon">
+                    <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="['p-chips-token-icon', removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" />
+                </slot>
             </li>
             <li class="p-chips-input-token" role="option">
                 <input
@@ -52,6 +54,7 @@
 </template>
 
 <script>
+import TimesCircleIcon from 'primevue/icon/timescircle';
 import { UniqueComponentId } from 'primevue/utils';
 
 export default {
@@ -104,7 +107,7 @@ export default {
         },
         removeTokenIcon: {
             type: String,
-            default: 'pi pi-times-circle'
+            default: undefined
         },
         'aria-labelledby': {
             type: String,
@@ -309,6 +312,9 @@ export default {
         focusedOptionId() {
             return this.focusedIndex !== null ? `${this.id}_chips_item_${this.focusedIndex}` : null;
         }
+    },
+    components: {
+        TimesCircleIcon: TimesCircleIcon
     }
 };
 </script>