Refactor #5548 - For Chips

components/lib/chips/Chips.d.ts

@@ -9,6 +9,7 @@
  */
 import { InputHTMLAttributes, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
+import { ChipPassThroughOptions } from '../chip';
 import { PassThroughOptions } from '../passthrough';
 import { ClassComponent, DesignToken, GlobalComponentConstructor, PassThrough } from '../ts-helpers';
 
@@ -44,6 +45,20 @@ export interface ChipsPassThroughMethodOptions {
     global: object | undefined;
 }
 
+/**
+ * Custom shared passthrough(pt) option method.
+ */
+export interface ChipsSharedPassThroughMethodOptions {
+    /**
+     * Defines valid properties.
+     */
+    props: ChipsProps;
+    /**
+     * Defines current inline state.
+     */
+    state: ChipsState;
+}
+
 /**
  * Custom add event.
  * @see {@link ChipsEmits.add}
@@ -84,9 +99,10 @@ export interface ChipsPassThroughOptions {
      */
     token?: ChipsPassThroughOptionType;
     /**
-     * Used to pass attributes to the label's DOM element.
+     * Used to pass attributes to the Chip component.
+     * @see {@link ChipPassThroughOptions}
      */
-    label?: ChipsPassThroughOptionType;
+    label?: ChipPassThroughOptions<ChipsSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the remove token icon's DOM element.
      */

components/lib/chips/Chips.vue

@@ -28,11 +28,12 @@
                 v-bind="ptm('token')"
                 :data-p-focused="focusedIndex === i"
             >
-                <slot name="chip" :class="cx('label')" :value="val">
+                <slot name="chip" :class="cx('label')" :index="i" :value="val" :removeCallback="(event) => removeOption(event, i)">
-                    <span :class="cx('label')" v-bind="ptm('label')">{{ val }}</span>
+                    <Chip :class="cx('label')" :label="val" :removeIcon="removeTokenIcon" removable @remove="removeItem($event, i)" :pt="ptm('label')">
-                </slot>
+                        <template #removeicon>
-                <slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :onClick="(event) => removeItem(event, i)" :removeCallback="(event) => removeItem(event, i)">
+                            <slot name="removetokenicon" :class="cx('removeTokenIcon')" :index="i" :removeCallback="(event) => removeItem(event, i)" />
-                    <component :is="removeTokenIcon ? 'span' : 'TimesCircleIcon'" :class="[cx('removeTokenIcon'), removeTokenIcon]" @click="removeItem($event, i)" aria-hidden="true" v-bind="ptm('removeTokenIcon')" />
+                        </template>
+                    </Chip>
                 </slot>
             </li>
             <li :class="cx('inputToken')" role="option" v-bind="ptm('inputToken')">
@@ -58,7 +59,7 @@
 </template>
 
 <script>
-import TimesCircleIcon from 'primevue/icons/timescircle';
+import Chip from 'primevue/chip';
 import { UniqueComponentId } from 'primevue/utils';
 import BaseChips from './BaseChips.vue';
 
@@ -262,7 +263,7 @@ export default {
         }
     },
     components: {
-        TimesCircleIcon: TimesCircleIcon
+        Chip
     }
 };
 </script>