From 1a6be3235d8b969a5c639e38086700f255c1efa3 Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Mon, 8 Apr 2024 15:21:07 +0300
Subject: [PATCH] Refactor #5548 - For TreeSelect

---
 components/lib/treeselect/TreeSelect.d.ts | 6 ++++--
 components/lib/treeselect/TreeSelect.vue  | 4 +++-
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/components/lib/treeselect/TreeSelect.d.ts b/components/lib/treeselect/TreeSelect.d.ts
index 407b1c09e..c52cc101c 100644
--- a/components/lib/treeselect/TreeSelect.d.ts
+++ b/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.
      */
diff --git a/components/lib/treeselect/TreeSelect.vue b/components/lib/treeselect/TreeSelect.vue
index ffe72d09e..6127c3527 100644
--- a/components/lib/treeselect/TreeSelect.vue
+++ b/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
     },