Merge pull request #5339 from ig-onoffice-de/add-icon-slot-to-tree

feat(Tree): Add slot for nodeIcon

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.

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();
+    })
 });

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>