Refactor #3965 - Refactor on OrganizationChart

components/lib/organizationchart/BaseOrganizationChart.vue

@@ -0,0 +1,111 @@
+<script>
+import BaseComponent from 'primevue/basecomponent';
+import { useStyle } from 'primevue/usestyle';
+
+const styles = `
+.p-organizationchart-table {
+    border-spacing: 0;
+    border-collapse: separate;
+    margin: 0 auto;
+}
+
+.p-organizationchart-table > tbody > tr > td {
+    text-align: center;
+    vertical-align: top;
+    padding: 0 0.75rem;
+}
+
+.p-organizationchart-node-content {
+    display: inline-block;
+    position: relative;
+}
+
+.p-organizationchart-node-content .p-node-toggler {
+    position: absolute;
+    bottom: -0.75rem;
+    margin-left: -0.75rem;
+    z-index: 2;
+    left: 50%;
+    user-select: none;
+    cursor: pointer;
+    width: 1.5rem;
+    height: 1.5rem;
+    text-decoration: none;
+}
+
+.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {
+    position: relative;
+    top: 0.25rem;
+}
+
+.p-organizationchart-line-down {
+    margin: 0 auto;
+    height: 20px;
+    width: 1px;
+}
+
+.p-organizationchart-line-right {
+    border-radius: 0px;
+}
+
+.p-organizationchart-line-left {
+    border-radius: 0;
+}
+
+.p-organizationchart-selectable-node {
+    cursor: pointer;
+}
+`;
+
+const classes = {
+    root: 'p-organizationchart p-component',
+    table: 'p-organizationchart-table',
+    node: ({ props, instance }) => ['p-organizationchart-node-content', props.node.styleClass, { 'p-organizationchart-selectable-node': instance.selectable, 'p-highlight': instance.selected }],
+    nodeToggler: 'p-node-toggler',
+    nodeTogglerIcon: 'p-node-toggler-icon',
+    lines: 'p-organizationchart-lines',
+    lineDown: 'p-organizationchart-line-down',
+    lines: 'p-organizationchart-lines',
+    lineLeft: ({ context }) => ['p-organizationchart-line-left', { 'p-organizationchart-line-top': !(context.i === 0) }],
+    lineRight: ({ context, props }) => ['p-organizationchart-line-right', { 'p-organizationchart-line-top': !(context.i === props.node.children.length - 1) }],
+    nodes: 'p-organizationchart-nodes'
+};
+
+const { load: loadStyle } = useStyle(styles, { id: 'primevue_organizationchart_style', manual: true });
+
+export default {
+    name: 'BaseOrganizationChart',
+    extends: BaseComponent,
+    props: {
+        value: {
+            type: null,
+            default: null
+        },
+        selectionKeys: {
+            type: null,
+            default: null
+        },
+        selectionMode: {
+            type: String,
+            default: null
+        },
+        collapsible: {
+            type: Boolean,
+            default: false
+        },
+        collapsedKeys: {
+            type: null,
+            default: null
+        }
+    },
+    css: {
+        classes,
+        loadStyle
+    },
+    provide() {
+        return {
+            $parentInstance: this
+        };
+    }
+};
+</script>

components/lib/organizationchart/OrganizationChart.d.ts

@@ -218,6 +218,11 @@ export interface OrganizationChartProps {
      * @type {OrganizationChartPassThroughOptions}
      */
     pt?: OrganizationChartPassThroughOptions;
+    /**
+     * When enabled, it removes component related styles in the core.
+     * @defaultValue false
+     */
+    unstyled?: boolean;
 }
 
 /**

components/lib/organizationchart/OrganizationChart.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="p-organizationchart p-component" v-bind="ptm('root')">
+    <div :class="cx('root')" v-bind="ptm('root')">
         <OrganizationChartNode
             :node="value"
             :templates="$slots"
@@ -10,40 +10,19 @@
             :selectionMode="selectionMode"
             :selectionKeys="selectionKeys"
             :pt="pt"
+            :unstyled="unstyled"
         />
     </div>
 </template>
 
 <script>
-import BaseComponent from 'primevue/basecomponent';
+import BaseOrganizationChart from './BaseOrganizationChart.vue';
 import OrganizationChartNode from './OrganizationChartNode.vue';
 
 export default {
     name: 'OrganizationChart',
-    extends: BaseComponent,
+    extends: BaseOrganizationChart,
     emits: ['node-unselect', 'node-select', 'update:selectionKeys', 'node-expand', 'node-collapse', 'update:collapsedKeys'],
-    props: {
-        value: {
-            type: null,
-            default: null
-        },
-        selectionKeys: {
-            type: null,
-            default: null
-        },
-        selectionMode: {
-            type: String,
-            default: null
-        },
-        collapsible: {
-            type: Boolean,
-            default: false
-        },
-        collapsedKeys: {
-            type: null,
-            default: null
-        }
-    },
     data() {
         return {
             d_collapsedKeys: this.collapsedKeys || {}
@@ -96,58 +75,3 @@ export default {
     }
 };
 </script>
-
-<style>
-.p-organizationchart-table {
-    border-spacing: 0;
-    border-collapse: separate;
-    margin: 0 auto;
-}
-
-.p-organizationchart-table > tbody > tr > td {
-    text-align: center;
-    vertical-align: top;
-    padding: 0 0.75rem;
-}
-
-.p-organizationchart-node-content {
-    display: inline-block;
-    position: relative;
-}
-
-.p-organizationchart-node-content .p-node-toggler {
-    position: absolute;
-    bottom: -0.75rem;
-    margin-left: -0.75rem;
-    z-index: 2;
-    left: 50%;
-    user-select: none;
-    cursor: pointer;
-    width: 1.5rem;
-    height: 1.5rem;
-    text-decoration: none;
-}
-
-.p-organizationchart-node-content .p-node-toggler .p-node-toggler-icon {
-    position: relative;
-    top: 0.25rem;
-}
-
-.p-organizationchart-line-down {
-    margin: 0 auto;
-    height: 20px;
-    width: 1px;
-}
-
-.p-organizationchart-line-right {
-    border-radius: 0px;
-}
-
-.p-organizationchart-line-left {
-    border-radius: 0;
-}
-
-.p-organizationchart-selectable-node {
-    cursor: pointer;
-}
-</style>

components/lib/organizationchart/OrganizationChartNode.vue

@@ -1,36 +1,58 @@
 <template>
-    <table class="p-organizationchart-table" v-bind="ptm('table')">
+    <table :class="cx('table')" v-bind="ptm('table')">
         <tbody v-bind="ptm('body')">
             <tr v-if="node" v-bind="ptm('row')">
                 <td :colspan="colspan" v-bind="ptm('cell')">
-                    <div :class="nodeContentClass" @click="onNodeClick" v-bind="getPTOptions('node')">
+                    <div :class="cx('node')" @click="onNodeClick" v-bind="getPTOptions('node')">
                         <component :is="templates[node.type] || templates['default']" :node="node" />
-                        <a v-if="toggleable" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown="onKeydown" v-bind="getPTOptions('nodeToggler')">
+                        <a v-if="toggleable" tabindex="0" :class="cx('nodeToggler')" @click="toggleNode" @keydown="onKeydown" v-bind="getPTOptions('nodeToggler')">
                             <component v-if="templates.togglericon" :is="templates.togglericon" :expanded="expanded" class="p-node-toggler-icon" />
-                            <component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" class="p-node-toggler-icon" v-bind="getPTOptions('nodeTogglerIcon')" />
+                            <component v-else :is="expanded ? 'ChevronDownIcon' : 'ChevronUpIcon'" :class="cx('nodeTogglerIcon')" v-bind="getPTOptions('nodeTogglerIcon')" />
                         </a>
                     </div>
                 </td>
             </tr>
-            <tr :style="childStyle" class="p-organizationchart-lines" v-bind="ptm('lines')">
+            <tr :style="childStyle" :class="cx('lines')" v-bind="ptm('lines')">
                 <td :colspan="colspan">
-                    <div class="p-organizationchart-line-down" v-bind="ptm('lineDown')"></div>
+                    <div :class="cx('lineDown')" v-bind="ptm('lineDown')"></div>
                 </td>
             </tr>
-            <tr :style="childStyle" class="p-organizationchart-lines" v-bind="ptm('lines')">
+            <tr :style="childStyle" :class="cx('lines')" v-bind="ptm('lines')">
                 <template v-if="node.children && node.children.length === 1">
                     <td :colspan="colspan" v-bind="ptm('lineCell')">
-                        <div class="p-organizationchart-line-down" v-bind="ptm('lineDown')"></div>
+                        <div :class="cx('lineDown')" v-bind="ptm('lineDown')"></div>
                     </td>
                 </template>
                 <template v-if="node.children && node.children.length > 1">
                     <template v-for="(child, i) of node.children" :key="child.key">
-                        <td class="p-organizationchart-line-left" :class="{ 'p-organizationchart-line-top': !(i === 0) }" v-bind="getNodeOptions(!(i === 0), 'lineLeft')">&nbsp;</td>
+                        <td
-                        <td class="p-organizationchart-line-right" :class="{ 'p-organizationchart-line-top': !(i === node.children.length - 1) }" v-bind="getNodeOptions(!(i === node.children.length - 1), 'lineRight')">&nbsp;</td>
+                            :class="
+                                cx('lineLeft', {
+                                    context: {
+                                        i
+                                    }
+                                })
+                            "
+                            v-bind="getNodeOptions(!(i === 0), 'lineLeft')"
+                        >
+                            &nbsp;
+                        </td>
+                        <td
+                            :class="
+                                cx('lineRight', {
+                                    context: {
+                                        i
+                                    }
+                                })
+                            "
+                            v-bind="getNodeOptions(!(i === node.children.length - 1), 'lineRight')"
+                        >
+                            &nbsp;
+                        </td>
                     </template>
                 </template>
             </tr>
-            <tr :style="childStyle" class="p-organizationchart-nodes" v-bind="ptm('nodes')">
+            <tr :style="childStyle" :class="cx('nodes')" v-bind="ptm('nodes')">
                 <td v-for="child of node.children" :key="child.key" colspan="2" v-bind="ptm('nodeCell')">
                     <OrganizationChartNode
                         :node="child"
@@ -42,6 +64,7 @@
                         :selectionKeys="selectionKeys"
                         @node-click="onChildNodeClick"
                         :pt="pt"
+                        :unstyled="unstyled"
                     />
                 </td>
             </tr>
@@ -105,7 +128,7 @@ export default {
             });
         },
         onNodeClick(event) {
-            if (DomHandler.hasClass(event.target, 'p-node-toggler') || DomHandler.hasClass(event.target, 'p-node-toggler-icon')) {
+            if (DomHandler.getAttribute(event.target, 'nodeToggler') || DomHandler.getAttribute(event.target, 'nodeTogglerIcon')) {
                 return;
             }
 
@@ -130,9 +153,6 @@ export default {
         }
     },
     computed: {
-        nodeContentClass() {
-            return ['p-organizationchart-node-content', this.node.styleClass, { 'p-organizationchart-selectable-node': this.selectable, 'p-highlight': this.selected }];
-        },
         leaf() {
             return this.node.leaf === false ? false : !(this.node.children && this.node.children.length);
         },