From c0a4677f90bedd01bc5ca48d02b698a6df02d2f4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Mon, 17 Apr 2023 10:59:20 +0300
Subject: [PATCH] Refactor #3832 Refactor #3833 - For TreeSelect: Tree icon
 support

---
 api-generator/components/treeselect.js    | 16 ++++++++++
 components/lib/treeselect/TreeSelect.d.ts | 36 +++++++++++++++++++++++
 components/lib/treeselect/TreeSelect.vue  | 15 +++++++++-
 3 files changed, 66 insertions(+), 1 deletion(-)

diff --git a/api-generator/components/treeselect.js b/api-generator/components/treeselect.js
index d11b2a2c2..4833df6b7 100644
--- a/api-generator/components/treeselect.js
+++ b/api-generator/components/treeselect.js
@@ -198,6 +198,22 @@ const TreeSelectSlots = [
     {
         name: 'indicator',
         description: 'Custom content for the dropdown indicator'
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    },
+    {
+        name: 'searchicon',
+        description: 'Custom search icon template.'
+    },
+    {
+        name: 'itemtogglericon',
+        description: 'Custom item toggler icon template.'
+    },
+    {
+        name: 'itemcheckboxicon',
+        description: 'Custom item checkbox icon template.'
     }
 ];
 
diff --git a/components/lib/treeselect/TreeSelect.d.ts b/components/lib/treeselect/TreeSelect.d.ts
index 80ae9655f..b770b0c3c 100644
--- a/components/lib/treeselect/TreeSelect.d.ts
+++ b/components/lib/treeselect/TreeSelect.d.ts
@@ -150,6 +150,42 @@ export interface TreeSelectSlots {
      * Custom indicator template.
      */
     indicator(): VNode[];
+    /**
+     * Custom loading icon template.
+     */
+    loadingicon(): VNode[];
+    /**
+     * Custom search icon template.
+     */
+    searchicon(): VNode[];
+    /**
+     * Custom item toggler icon template.
+     * @param {Object} scope - item toggler icon slot's params.
+     */
+    itemtogglericon(scope: {
+        /**
+         * Node instance
+         */
+        node: TreeNode | any;
+        /**
+         * Expanded state of the node
+         */
+        expanded: TreeNode[];
+    }): VNode[];
+    /**
+     * Custom item checkbox icon template.
+     * @param {Object} scope - item checkbox icon slot's params.
+     */
+    itemcheckboxicon(scope: {
+        /**
+         * Check state of the node
+         */
+        checked: boolean;
+        /**
+         * Partial check state of the node
+         */
+        partialChecked: boolean;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/treeselect/TreeSelect.vue b/components/lib/treeselect/TreeSelect.vue
index 5f1479734..a91e4afb5 100644
--- a/components/lib/treeselect/TreeSelect.vue
+++ b/components/lib/treeselect/TreeSelect.vue
@@ -62,7 +62,20 @@
                             @node-select="onNodeSelect"
                             @node-unselect="onNodeUnselect"
                             :level="0"
-                        />
+                        >
+                            <template v-if="$slots.itemtogglericon" #togglericon="iconProps">
+                                <slot name="itemtogglericon" :node="iconProps.node" :expanded="iconProps.expanded" :class="iconProps.class" />
+                            </template>
+                            <template v-if="$slots.itemcheckboxicon" #checkboxicon="iconProps">
+                                <slot name="itemcheckboxicon" :checked="iconProps.checked" :partialChecked="iconProps.partialChecked" :class="iconProps.class" />
+                            </template>
+                            <template v-if="$slots.loadingicon" #loadingicon>
+                                <slot name="loadingicon" />
+                            </template>
+                            <template v-if="$slots.searchicon" #searchicon>
+                                <slot name="searchicon" />
+                            </template>
+                        </TSTree>
                         <div v-if="emptyOptions" class="p-treeselect-empty-message">
                             <slot name="empty">{{ emptyMessageText }}</slot>
                         </div>