Refactor #5548 - For TreeSelect

components/lib/treeselect/TreeSelect.d.ts

@@ -9,6 +9,7 @@
  */
 import { InputHTMLAttributes, TransitionProps, VNode } from 'vue';
 import { ComponentHooks } from '../basecomponent';
+import { ChipPassThroughOptions } from '../chip';
 import { PassThroughOptions } from '../passthrough';
 import { TreeExpandedKeys, TreePassThroughOptions } from '../tree';
 import { TreeNode } from '../treenode';
@@ -84,9 +85,10 @@ export interface TreeSelectPassThroughOptions {
      */
     token?: TreeSelectPassThroughOptionType;
     /**
-     * Used to pass attributes to the token label's DOM element.
+     * Used to pass attributes to the Chip.
+     * @see {@link ChipPassThroughOptions}
      */
-    tokenLabel?: TreeSelectPassThroughOptionType;
+    tokenLabel?: ChipPassThroughOptions<TreeSelectSharedPassThroughMethodOptions>;
     /**
      * Used to pass attributes to the trigger's DOM element.
      */

components/lib/treeselect/TreeSelect.vue

@@ -30,7 +30,7 @@
                     </template>
                     <template v-else-if="display === 'chip'">
                         <div v-for="node of selectedNodes" :key="node.key" :class="cx('token')" v-bind="ptm('token')">
-                            <span :class="cx('tokenLabel')" v-bind="ptm('tokenLabel')">{{ node.label }}</span>
+                            <Chip :class="cx('tokenLabel')" :label="node.label" :pt="ptm('tokenLabel')" />
                         </div>
                         <template v-if="emptyValue">{{ placeholder || 'empty' }}</template>
                     </template>
@@ -106,6 +106,7 @@
 </template>
 
 <script>
+import Chip from 'primevue/chip';
 import ChevronDownIcon from 'primevue/icons/chevrondown';
 import OverlayEventBus from 'primevue/overlayeventbus';
 import Portal from 'primevue/portal';
@@ -500,6 +501,7 @@ export default {
     },
     components: {
         TSTree: Tree,
+        Chip,
         Portal: Portal,
         ChevronDownIcon: ChevronDownIcon
     },