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>