Initiated Organization Chart

src/AppMenu.vue

@@ -59,6 +59,7 @@
                         <router-link to="/dataview">&#9679; DataView</router-link>
                         <router-link to="/fullcalendar">&#9679; FullCalendar</router-link>
                         <router-link to="/orderlist">&#9679; OrderList</router-link>
+                        <router-link to="/organizationchart">&#9679; Org Chart</router-link>
                         <router-link to="/paginator">&#9679; Paginator</router-link>
                         <router-link to="/picklist">&#9679; PickList</router-link>
                     </div>

src/components/organizationchart/OrganizationChart.vue

@@ -0,0 +1,74 @@
+<template>
+    <div class="p-organizationchart p-component">
+        <OrganizationChartNode :node="value" />
+    </div>
+</template>
+
+<script>
+import OrganizationChartNode from './OrganizationChartNode';
+
+export default {
+    props: {
+        value: {
+            type: null,
+            default: null
+        }
+    },
+    components: {
+        'OrganizationChartNode': OrganizationChartNode
+    }
+}
+</script>
+
+<style>
+.p-organizationchart .p-organizationchart-table {
+    border-spacing: 0;
+    border-collapse: separate;
+    margin: 0 auto;
+}
+
+.p-organizationchart .p-organizationchart-table > tbody > tr > td {
+    text-align: center;
+    vertical-align: top;
+    padding: 0;
+    padding: 0 .75em;
+}
+
+.p-organizationchart .p-organizationchart-node-content {
+    padding: .5em .75em;
+    display: inline-block;
+    position: relative;
+}
+
+.p-organizationchart .p-organizationchart-node-content .p-node-toggler {
+    position: absolute;
+    bottom: -9px;
+    margin-left: -8px;
+    z-index: 2;
+    left: 50%;
+    user-select: none;
+    -moz-user-select: none;
+    -webkit-user-select: none;
+}
+
+.p-organizationchart .p-organizationchart-line-down {
+    margin: 0 auto;
+    height: 20px;
+    width: 1px;
+    float: none;
+}
+
+.p-organizationchart .p-organizationchart-line-right {
+    float: none;
+    border-radius: 0px;
+}
+
+.p-organizationchart .p-organizationchart-line-left {
+    float: none;
+    border-radius: 0;
+}
+
+.p-organizationchart .p-organizationchart-node-content.p-organizationchart-selectable-node {
+    cursor: pointer;
+}
+</style>

src/components/organizationchart/OrganizationChartNode.vue

@@ -0,0 +1,83 @@
+<template>
+    <table class="p-organizationchart-table">
+        <tbody>
+            <tr v-if="node">
+                <td :colspan="colspan">
+                    <div :class="nodeContentClass" @click="onNodeClick">
+                        {{node.label}}
+                        <a v-if="!leaf" tabindex="0" class="p-node-toggler" @click="toggleNode" @keydown.enter="toggleNode">
+                            <i class="p-node-toggler-icon pi" :class="{'pi-chevron-down': node.expanded, 'pi-chevron-up': !node.expanded}"></i>
+                        </a>
+                    </div>
+                </td>
+            </tr>
+            <tr :style="childStyle" class="p-organizationchart-lines">
+                <td :colspan="colspan">
+                    <div class="p-organizationchart-line-down"></div>
+                </td>
+            </tr>
+            <tr :style="childStyle" class="p-organizationchart-lines">
+                <template v-if="node.children && node.children.length === 1">
+                    <td :colspan="colspan">
+                        <div class="p-organizationchart-line-down"></div>
+                    </td>
+                </template>
+                <template v-if="node.children && node.children.length > 1">
+                    <template v-for="(child,i) of node.children">
+                        <td :key="(child.key || child.label) + '_left'" class="p-organizationchart-line-left" :class="{'p-organizationchart-line-top': !(i === 0)}">&nbsp;</td>
+                        <td :key="(child.key || child.label) + '_right'" class="p-organizationchart-line-right" :class="{'p-organizationchart-line-top': !(i === (node.children.length - 1))}">&nbsp;</td>
+                    </template>
+                </template>
+            </tr>
+            <tr :style="childStyle" class="p-organizationchart-nodes">
+                <td v-for="child of node.children" :key="child.key || child.label" colspan="2">
+                    <sub-node :node="child" />
+                </td>
+            </tr>
+        </tbody>
+    </table>
+</template>
+
+<script>
+export default {
+    name: 'sub-node',
+    props: {
+        node: {
+            type: null,
+            default: null
+        },
+        selected: {
+            type: Boolean,
+            default: false
+        },
+        selectable: {
+            type: Boolean,
+            default: false
+        }
+    },
+    methods: {
+        onNodeClick() {
+
+        },
+        toggleNode() {
+
+        }
+    },
+    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);
+        },
+        colspan() {
+            return (this.node.children && this.node.children.length) ? this.node.children.length * 2: null;
+        },
+        childStyle() {
+            return {
+                visibility: !this.leaf && this.node.expanded ? 'inherit' : 'hidden'
+            }
+        }
+    }
+}
+</script>

src/main.js

@@ -29,6 +29,7 @@ import Menu from './components/menu/Menu';
 import Message from './components/message/Message';
 import MultiSelect from './components/multiselect/MultiSelect';
 import OrderList from './components/orderlist/OrderList';
+import OrganizationChart from './components/organizationchart/OrganizationChart';
 import OverlayPanel from './components/overlaypanel/OverlayPanel';
 import Paginator from './components/paginator/Paginator';
 import Panel from './components/panel/Panel';
@@ -95,6 +96,7 @@ Vue.component('Menu', Menu);
 Vue.component('Message', Message);
 Vue.component('MultiSelect', MultiSelect);
 Vue.component('OrderList', OrderList);
+Vue.component('OrganizationChart', OrganizationChart);
 Vue.component('OverlayPanel', OverlayPanel);
 Vue.component('Paginator', Paginator);
 Vue.component('Panel', Panel);

src/router.js

@@ -255,6 +255,11 @@ export default new Router({
 			path: '/orderlist',
 			name: 'orderlist',
 			component: () => import('./views/orderlist/OrderListDemo.vue')
+        },
+        {
+			path: '/organizationchart',
+			name: 'organizationchart',
+			component: () => import('./views/organizationchart/OrganizationChartDemo.vue')
 		},
 		{
 			path: '/overlaypanel',

src/views/organizationchart/OrganizationChartDemo.vue

@@ -0,0 +1,128 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>OrganizationChart</h1>
+                <p>OrganizationChart visualizes hierarchical organization data.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <h3 class="first">Advanced</h3>
+            <OrganizationChart :value="data1" />
+        </div>
+
+        <OrganizationChartDoc />
+    </div>
+</template>
+<script>
+import OrganizationChartDoc from './OrganizationChartDoc';
+
+export default {
+    data() {
+        return {
+            data1: {
+                label: 'CEO',
+                type: 'person',
+                className: 'p-person',
+                expanded: true,
+                data: {name:'Walter White', 'avatar': 'walter.jpg'},
+                children: [
+                    {
+                        label: 'CFO',
+                        type: 'person',
+                        className: 'p-person',
+                        expanded: true,
+                        data: {name:'Saul Goodman', 'avatar': 'saul.jpg'},
+                        children:[{
+                            label: 'Tax',
+                            className: 'department-cfo'
+                        },
+                        {
+                            label: 'Legal',
+                            className: 'department-cfo'
+                        }],
+                    },
+                    {
+                        label: 'COO',
+                        type: 'person',
+                        className: 'p-person',
+                        expanded: true,
+                        data: {name:'Mike E.', 'avatar': 'mike.jpg'},
+                        children:[{
+                            label: 'Operations',
+                            className: 'department-coo'
+                        }]
+                    },
+                    {
+                        label: 'CTO',
+                        type: 'person',
+                        className: 'p-person',
+                        expanded: true,
+                        data: {name:'Jesse Pinkman', 'avatar': 'jesse.jpg'},
+                        children:[{
+                            label: 'Development',
+                            className: 'department-cto',
+                            expanded: true,
+                            children:[{
+                                label: 'Analysis',
+                                className: 'department-cto'
+                            },
+                            {
+                                label: 'Front End',
+                                className: 'department-cto'
+                            },
+                            {
+                                label: 'Back End',
+                                className: 'department-cto'
+                            }]
+                        },
+                        {
+                            label: 'QA',
+                            className: 'department-cto'
+                        },
+                        {
+                            label: 'R&D',
+                            className: 'department-cto'
+                        }]
+                    }
+                ]
+            },
+            data2 : [{
+                label: 'F.C Barcelona',
+                expanded: true,
+                children: [
+                    {
+                        label: 'F.C Barcelona',
+                        expanded: true,
+                        children: [
+                            {
+                                label: 'Chelsea FC'
+                            },
+                            {
+                                label: 'F.C. Barcelona'
+                            }
+                        ]
+                    },
+                    {
+                        label: 'Real Madrid',
+                        expanded: true,
+                        children: [
+                            {
+                                label: 'Bayern Munich'
+                            },
+                            {
+                                label: 'Real Madrid'
+                            }
+                        ]
+                    }
+                ]
+            }],
+            selection: []
+        }
+    },
+    components: {
+        'OrganizationChartDoc': OrganizationChartDoc
+    }
+}
+</script>

src/views/organizationchart/OrganizationChartDoc.vue

@@ -0,0 +1,194 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Import</h3>
+<CodeHighlight lang="javascript">
+import Panel from 'primevue/panel';
+</CodeHighlight>
+
+				<h3>Getting Started</h3>
+				<p>Panel is a container component that accepts content as its children.</p>
+<CodeHighlight>
+&lt;Panel header="Godfather I"&gt;
+	The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+	His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+	Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+	kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
+&lt;/Panel&gt;
+</CodeHighlight>
+
+                <h3>Custom Header</h3>
+                <p>Header of the panel is either defined with the <i>header</i> property or the header template.</p>
+<CodeHighlight>
+&lt;Panel&gt;
+    &lt;template #header&gt;
+        Header Content
+    &lt;/template&gt;
+	Content
+&lt;/Panel&gt;
+</CodeHighlight>
+
+				<h3>Toggleable</h3>
+				<p>Content of the panel can be expanded and collapsed using <i>toggleable</i> option.</p>
+<CodeHighlight>
+&lt;Panel header="Godfather I" :toggleable="true"&gt;
+	The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+	His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+	Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+	kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
+&lt;/Panel&gt;
+</CodeHighlight>
+
+                <p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p>
+<CodeHighlight>
+&lt;Panel header="Header Text" :toggleable="true" :collapsed="true"&gt;
+	Content
+&lt;/Panel&gt;
+</CodeHighlight>
+
+                <p>Use the sync operator to enable two-way binding.</p>
+
+<CodeHighlight>
+&lt;button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically&lt;/button&gt;
+&lt;Panel header="Header Text" :toggleable="true" :collapsed.sync="isCollapsed"&gt;
+	Content
+&lt;/Panel&gt;
+</CodeHighlight>
+
+				<h3>Properties</h3>
+                <p>Any attribute such as style and class are passed to the main container element. Following are the additional properties to configure the component.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>header</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Header text of the panel.</td>
+                            </tr>
+                            <tr>
+                                <td>toggleable</td>
+                                <td>boolean</td>
+                                <td>null</td>
+                                <td>Defines if content of panel can be expanded and collapsed.</td>
+                            </tr>
+                            <tr>
+                                <td>collapsed</td>
+                                <td>boolean</td>
+                                <td>null</td>
+                                <td>Defines the initial state of panel content.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Events</h3>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Parameters</th>
+                                <th>Description</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>toggle</td>
+                                <td>event.originalEvent: browser event <br />
+                                    event.value: collapsed state as a boolean
+                                </td>
+                                <td>Callback to invoke when a tab toggle.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Styling</h3>
+				<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
+				<div class="doc-tablewrapper">
+					<table class="doc-table">
+						<thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Element</th>
+                            </tr>
+						</thead>
+						<tbody>
+                            <tr>
+                                <td>p-panel</td>
+                                <td>Container element.</td>
+                            </tr>
+                            <tr>
+                                <td>p-panel-titlebar</td>
+                                <td>Header section.</td>
+                            </tr>
+                            <tr>
+                                <td>p-panel-title</td>
+                                <td>Title text of panel.</td>
+                            </tr>
+                            <tr>
+                                <td>p-panel-titlebar-toggler</td>
+                                <td>Toggle icon.</td>
+                            </tr>
+                            <tr>
+                                <td>p-panel-content</td>
+                                <td>Content of panel.</td>
+                            </tr>
+						</tbody>
+					</table>
+				</div>
+
+				<h3>Dependencies</h3>
+				<p>None.</p>
+			</TabPanel>
+
+			<TabPanel header="Source">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/panel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+					<span>View on GitHub</span>
+				</a>
+<CodeHighlight>
+<template v-pre>
+&lt;template&gt;
+	&lt;div&gt;
+		&lt;div class="content-section introduction"&gt;
+			&lt;div class="feature-intro"&gt;
+				&lt;h1&gt;Panel&lt;/h1&gt;
+				&lt;p&gt;Panel is a grouping component with the optional content toggle feature.&lt;/p&gt;
+			&lt;/div&gt;
+		&lt;/div&gt;
+
+		&lt;div class="content-section implementation"&gt;
+			&lt;h3 class="first"&gt;Regular&lt;/h3&gt;
+			&lt;Panel header="Godfather I"&gt;
+				The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+				His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+				Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+				kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
+			&lt;/Panel&gt;
+
+			&lt;h3&gt;Toggleable&lt;/h3&gt;
+			&lt;Panel header="Godfather I" :toggleable="true"&gt;
+				The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
+				His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
+				Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
+				kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
+			&lt;/Panel&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;
+&lt;/template&gt;
+</template>
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>