Refactor #3832 Refactor #3833 - For OrganizationChart

api-generator/components/organizationchart.js

@@ -78,11 +78,19 @@ const OrganizationChartEvents = [
     }
 ];
 
+const OrganizationChartSlots = [
+    {
+        name: 'togglericon',
+        description: 'Custom toggler icon template.'
+    }
+];
+
 module.exports = {
     organizationchart: {
         name: 'OrganizationChart',
         description: 'OrganizationChart visualizes hierarchical organization data.',
         props: OrganizationChartProps,
-        events: OrganizationChartEvents
+        events: OrganizationChartEvents,
+        slots: OrganizationChartSlots
     }
 };

components/lib/organizationchart/OrganizationChart.d.ts

@@ -104,6 +104,16 @@ export interface OrganizationChartSlots {
      * @todo
      */
     [key: string]: (node: any) => VNode[];
+    /**
+     * Custom toggler icon template.
+     * @param {Object} scope - togglericon slot's params.
+     */
+    togglericon(scope: {
+        /**
+         * Curent state of the node
+         */
+        expanded: boolean;
+    }): VNode[];
 }
 
 /**

components/lib/organizationchart/OrganizationChart.spec.js

@@ -124,20 +124,17 @@ describe('OrganizationChart.vue', () => {
         expect(wrapper.find('.p-organizationchart.p-component').exists()).toBe(true);
         expect(wrapper.find('table.p-organizationchart-table').exists()).toBe(true);
         expect(wrapper.findAll('.p-node-toggler-icon').length).toBe(5);
-        expect(wrapper.find('.p-node-toggler-icon').classes()).toContain('pi-chevron-down');
     });
 
     it('should collapsed and expand', async () => {
         await wrapper.vm.onNodeToggle(wrapper.vm.value);
 
-        expect(wrapper.find('.p-node-toggler-icon').classes()).toContain('pi-chevron-up');
         expect(wrapper.emitted()['node-collapse'][0]).toEqual([wrapper.vm.value]);
         expect(wrapper.emitted()['update:collapsedKeys'][0]).toEqual([{ 0: true }]);
         expect(wrapper.vm.d_collapsedKeys).toEqual({ 0: true });
 
         await wrapper.vm.onNodeToggle(wrapper.vm.value);
 
-        expect(wrapper.find('.p-node-toggler-icon').classes()).toContain('pi-chevron-down');
         expect(wrapper.emitted()['node-expand'][0]).toEqual([wrapper.vm.value]);
         expect(wrapper.emitted()['update:collapsedKeys'][0]).toEqual([{}]);
         expect(wrapper.vm.d_collapsedKeys).toEqual({});

components/lib/organizationchart/OrganizationChartNode.vue

@@ -6,7 +6,7 @@
                     <div :class="nodeContentClass" @click="onNodeClick">
                         <component :is="templates[node.type] || templates['default']" :node="node" />
                         <a v-if="toggleable" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown="onKeydown">
-                            <i class="p-node-toggler-icon pi" :class="{ 'pi-chevron-down': expanded, 'pi-chevron-up': !expanded }"></i>
+                            <component :is="templates.togglericon || (expanded ? 'ChevronDownIcon' : 'ChevronUpIcon')" :expanded="expanded" class="p-node-toggler-icon" />
                         </a>
                     </div>
                 </td>
@@ -48,6 +48,8 @@
 </template>
 
 <script>
+import ChevronDownIcon from 'primevue/icon/chevrondown';
+import ChevronUpIcon from 'primevue/icon/chevronup';
 import { DomHandler } from 'primevue/utils';
 
 export default {
@@ -132,6 +134,10 @@ export default {
         toggleable() {
             return this.collapsible && this.node.collapsible !== false && !this.leaf;
         }
+    },
+    components: {
+        ChevronDownIcon: ChevronDownIcon,
+        ChevronUpIcon: ChevronUpIcon
     }
 };
 </script>