From d6d58557efc397714f03a4e311a472456ffbcb8f Mon Sep 17 00:00:00 2001
From: Isabelle Glasmacher <i.glasmacher@onoffice.de>
Date: Mon, 26 Feb 2024 12:52:36 +0100
Subject: [PATCH] feat: Tree - add slot for nodeIcon

closes #4833
---
 components/lib/tree/Tree.d.ts    | 10 ++++++++++
 components/lib/tree/Tree.spec.js | 27 +++++++++++++++++++++++++++
 components/lib/tree/TreeNode.vue |  7 ++++++-
 3 files changed, 43 insertions(+), 1 deletion(-)

diff --git a/components/lib/tree/Tree.d.ts b/components/lib/tree/Tree.d.ts
index ea9a390f3..6a8afc5f1 100755
--- a/components/lib/tree/Tree.d.ts
+++ b/components/lib/tree/Tree.d.ts
@@ -352,6 +352,16 @@ export interface TreeSlots {
          */
         expanded: boolean;
     }): VNode[];
+    /**
+     * Custom node icon template.
+     * @param {Object} scope - togglericon slot's params.
+     */
+    nodeIcon(scope: {
+        /**
+         * Tree node instance
+         */
+        node: TreeNode;
+    }): VNode[];
     /**
      * Custom checkbox icon
      * @param {Object} scope - checkboxicon slot's params.
diff --git a/components/lib/tree/Tree.spec.js b/components/lib/tree/Tree.spec.js
index 702ecd6ad..2e685e9fe 100644
--- a/components/lib/tree/Tree.spec.js
+++ b/components/lib/tree/Tree.spec.js
@@ -54,4 +54,31 @@ describe('Tree.vue', () => {
 
         expect(wrapper.emitted('filter')).toBeTruthy();
     });
+
+    it('should render icon', ({expect})=>{
+        expect(wrapper.find('span.pi-inbox').exists()).toBeTruthy();
+        expect(wrapper.find('span.pi-inbox').classes('p-treenode-icon')).toBeTruthy()
+    })
+
+    it('should render icon slot', ({expect})=>{
+        let wrapper = mount(Tree, {
+            slots: {
+                nodeIcon: `<i data-node-icon/>`
+            },
+            props: {
+                value: [
+                    {
+                        key: '0',
+                        label: 'Documents',
+                        data: 'Documents Folder',
+                        children: []
+                    }
+                ]
+            }
+        });
+
+        const nodeIcon = wrapper.find('i[data-node-icon]');
+
+        expect(nodeIcon.exists()).toBeTruthy();
+    })
 });
diff --git a/components/lib/tree/TreeNode.vue b/components/lib/tree/TreeNode.vue
index 524ef3aeb..11bacc5e0 100755
--- a/components/lib/tree/TreeNode.vue
+++ b/components/lib/tree/TreeNode.vue
@@ -32,7 +32,12 @@
                     <component v-else :is="checked ? 'CheckIcon' : partialChecked ? 'MinusIcon' : null" :class="slotProps.class" v-bind="getPTOptions('nodeCheckbox.icon')" />
                 </template>
             </Checkbox>
-            <span :class="[cx('nodeIcon'), node.icon]" v-bind="getPTOptions('nodeIcon')"></span>
+            <template v-if="templates['nodeIcon']">
+              <component :is="templates['nodeIcon']" v-bind="getPTOptions('nodeIcon')" :class="cx('nodeIcon')" :node="node"></component>
+            </template>
+            <template v-else>
+              <span :class="[cx('nodeIcon'), node.icon]" v-bind="getPTOptions('nodeIcon')"></span>
+            </template>
             <span :class="cx('label')" v-bind="getPTOptions('label')" @keydown.stop>
                 <component v-if="templates[node.type] || templates['default']" :is="templates[node.type] || templates['default']" :node="node" />
                 <template v-else>{{ label(node) }}</template>