From b9c040d72340aac1f017f291e40388232e5bcd77 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 31 Jul 2019 18:35:23 +0300
Subject: [PATCH] Initiated Tree Component

---
 public/demo/data/treenodes.json      |  54 ++++
 public/demo/data/treetablenodes.json | 353 +++++++++++++++++++++++++++
 src/AppMenu.vue                      |   1 +
 src/components/tree/Tree.vue         | 194 +++++++++++++++
 src/components/tree/TreeNode.vue     |  62 +++++
 src/main.js                          |   6 +-
 src/router.js                        |   5 +
 src/service/NodeService.js           |  15 ++
 src/views/tree/TreeDemo.vue          |  38 +++
 src/views/tree/TreeDoc.vue           | 150 ++++++++++++
 10 files changed, 876 insertions(+), 2 deletions(-)
 create mode 100644 public/demo/data/treenodes.json
 create mode 100644 public/demo/data/treetablenodes.json
 create mode 100644 src/components/tree/Tree.vue
 create mode 100644 src/components/tree/TreeNode.vue
 create mode 100644 src/service/NodeService.js
 create mode 100644 src/views/tree/TreeDemo.vue
 create mode 100644 src/views/tree/TreeDoc.vue

diff --git a/public/demo/data/treenodes.json b/public/demo/data/treenodes.json
new file mode 100644
index 000000000..1648fefd8
--- /dev/null
+++ b/public/demo/data/treenodes.json
@@ -0,0 +1,54 @@
+{
+    "root": [
+        {
+            "key": "0",
+            "label": "Documents",
+            "data": "Documents Folder",
+            "icon": "pi pi-fw pi-inbox",
+            "children": [{
+                "key": "0-0",
+                "label": "Work",
+                "data": "Work Folder",
+                "icon": "pi pi-fw pi-cog",
+                "children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }]
+            },
+            {
+                "key": "0-1",
+                "label": "Home",
+                "data": "Home Folder",
+                "icon": "pi pi-fw pi-home",
+                "children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }]
+            }]
+        },
+        {
+            "key": "1",
+            "label": "Events",
+            "data": "Events Folder",
+            "icon": "pi pi-fw pi-calendar",
+            "children": [
+                { "key": "1-0", "label": "Meeting", "icon": "pi pi-fw pi-calendar-plus", "data": "Meeting" },
+                { "key": "1-1", "label": "Product Launch", "icon": "pi pi-fw pi-calendar-plus", "data": "Product Launch" },
+                { "key": "1-2", "label": "Report Review", "icon": "pi pi-fw pi-calendar-plus", "data": "Report Review" }]
+        },
+        {
+            "key": "2",
+            "label": "Movies",
+            "data": "Movies Folder",
+            "icon": "pi pi-fw pi-star",
+            "children": [{
+                "key": "2-0",
+                "icon": "pi pi-fw pi-star",
+                "label": "Al Pacino",
+                "data": "Pacino Movies",
+                "children": [{ "key": "2-0-0", "label": "Scarface", "icon": "pi pi-fw pi-video", "data": "Scarface Movie" }, { "key": "2-0-1", "label": "Serpico", "icon": "pi pi-fw pi-video", "data": "Serpico Movie" }]
+            },
+            {
+                "key": "2-1",
+                "label": "Robert De Niro",
+                "icon": "pi pi-fw pi-star",
+                "data": "De Niro Movies",
+                "children": [{ "key": "2-1-0", "label": "Goodfellas", "icon": "pi pi-fw pi-video", "data": "Goodfellas Movie" }, { "key": "2-1-1", "label": "Untouchables", "icon": "pi pi-fw pi-video", "data": "Untouchables Movie" }]
+            }]
+        }
+    ]
+}
diff --git a/public/demo/data/treetablenodes.json b/public/demo/data/treetablenodes.json
new file mode 100644
index 000000000..be13bfa5b
--- /dev/null
+++ b/public/demo/data/treetablenodes.json
@@ -0,0 +1,353 @@
+{
+    "root":
+    [  
+        {
+            "key": "0",
+            "data":{  
+                "name":"Applications",
+                "size":"100kb",
+                "type":"Folder"
+            },
+            "children":[  
+                {  
+                    "key": "0-0",
+                    "data":{
+                        "name":"React",
+                        "size":"25kb",
+                        "type":"Folder"
+                    },
+                    "children":[  
+                        {  
+                            "key": "0-0-0",
+                            "data":{  
+                                "name":"react.app",
+                                "size":"10kb",
+                                "type":"Application"
+                            }
+                        },
+                        {  
+                            "key": "0-0-1",
+                            "data":{  
+                                "name":"native.app",
+                                "size":"10kb",
+                                "type":"Application"
+                            }
+                        },
+                        {  
+                            "key": "0-0-2",
+                            "data":{  
+                                "name":"mobile.app",
+                                "size":"5kb",
+                                "type":"Application"
+                            }
+                        }
+                    ]
+                },
+                {  
+                    "key": "0-1",
+                    "data":{  
+                        "name":"editor.app",
+                        "size":"25kb",
+                        "type":"Application"
+                    }
+                },
+                {  
+                    "key": "0-2",
+                    "data":{  
+                        "name":"settings.app",
+                        "size":"50kb",
+                        "type":"Application"
+                    }
+                }
+            ]
+        },
+        {  
+            "key": "1",
+            "data":{  
+                "name":"Cloud",
+                "size":"20kb",
+                "type":"Folder"
+            },
+            "children":[  
+                {  
+                    "key": "1-0",
+                    "data":{  
+                        "name":"backup-1.zip",
+                        "size":"10kb",
+                        "type":"Zip"
+                    }
+                },
+                {  
+                    "key": "1-1",
+                    "data":{  
+                        "name":"backup-2.zip",
+                        "size":"10kb",
+                        "type":"Zip"
+                    }
+                }
+            ]
+        },
+        {  
+            "key": "2",
+            "data": {  
+                "name":"Desktop",
+                "size":"150kb",
+                "type":"Folder"
+            },
+            "children":[  
+                {  
+                    "key": "2-0",
+                    "data":{  
+                        "name":"note-meeting.txt",
+                        "size":"50kb",
+                        "type":"Text"
+                    }
+                },
+                {  
+                    "key": "2-1",
+                    "data":{  
+                        "name":"note-todo.txt",
+                        "size":"100kb",
+                        "type":"Text"
+                    }
+                }
+            ]
+        },
+        {  
+            "key": "3",
+            "data":{  
+                "name":"Documents",
+                "size":"75kb",
+                "type":"Folder"
+            },
+            "children":[
+                {  
+                    "key": "3-0",
+                    "data":{  
+                        "name":"Work",
+                        "size":"55kb",
+                        "type":"Folder"
+                    },
+                    "children":[  
+                        {  
+                            "key": "3-0-0",
+                            "data":{  
+                                "name":"Expenses.doc",
+                                "size":"30kb",
+                                "type":"Document"
+                            }
+                        },
+                        {  
+                            "key": "3-0-1",
+                            "data":{  
+                                "name":"Resume.doc",
+                                "size":"25kb",
+                                "type":"Resume"
+                            }
+                        }
+                    ]
+                },
+                {  
+                    "key": "3-1",
+                    "data":{  
+                        "name":"Home",
+                        "size":"20kb",
+                        "type":"Folder"
+                    },
+                    "children":[  
+                        {  
+                            "key": "3-1-0",
+                            "data":{  
+                                "name":"Invoices",
+                                "size":"20kb",
+                                "type":"Text"
+                            }
+                        }
+                    ]
+                }
+            ]
+        },
+        {  
+            "key": "4",
+            "data": {  
+                "name":"Downloads",
+                "size":"25kb",
+                "type":"Folder"
+            },
+            "children":[  
+                {  
+                    "key": "4-0",
+                    "data": {  
+                        "name":"Spanish",
+                        "size":"10kb",
+                        "type":"Folder"
+                    },
+                    "children":[  
+                        {  
+                            "key": "4-0-0",
+                            "data":{  
+                                "name":"tutorial-a1.txt",
+                                "size":"5kb",
+                                "type":"Text"
+                            }
+                        },
+                        {  
+                            "key": "4-0-1",
+                            "data":{  
+                                "name":"tutorial-a2.txt",
+                                "size":"5kb",
+                                "type":"Text"
+                            }
+                        }
+                    ]
+                },
+                {  
+                    "key": "4-1",
+                    "data":{  
+                        "name":"Travel",
+                        "size":"15kb",
+                        "type":"Text"
+                    },
+                    "children":[  
+                        {  
+                            "key": "4-1-0",
+                            "data":{  
+                                "name":"Hotel.pdf",
+                                "size":"10kb",
+                                "type":"PDF"
+                            }
+                        },
+                        {  
+                            "key": "4-1-1",
+                            "data":{  
+                                "name":"Flight.pdf",
+                                "size":"5kb",
+                                "type":"PDF"
+                            }
+                        }
+                    ]
+                }
+            ]
+        },
+        {  
+            "key": "5",
+            "data": {  
+                "name":"Main",
+                "size":"50kb",
+                "type":"Folder"
+            },
+            "children":[  
+                {  
+                    "key": "5-0",
+                    "data":{  
+                        "name":"bin",
+                        "size":"50kb",
+                        "type":"Link"
+                    }
+                },
+                { 
+                    "key": "5-1", 
+                    "data":{  
+                        "name":"etc",
+                        "size":"100kb",
+                        "type":"Link"
+                    }
+                },
+                {  
+                    "key": "5-2",
+                    "data":{  
+                        "name":"var",
+                        "size":"100kb",
+                        "type":"Link"
+                    }
+                }
+            ]
+        },
+        {  
+            "key": "6",
+            "data":{  
+                "name":"Other",
+                "size":"5kb",
+                "type":"Folder"
+            },
+            "children":[  
+                {  
+                    "key": "6-0",
+                    "data":{  
+                        "name":"todo.txt",
+                        "size":"3kb",
+                        "type":"Text"
+                    }
+                },
+                {  
+                    "key": "6-1",
+                    "data":{  
+                        "name":"logo.png",
+                        "size":"2kb",
+                        "type":"Picture"
+                    }
+                }
+            ]
+        },
+        {  
+            "key": "7",
+            "data":{  
+                "name":"Pictures",
+                "size":"150kb",
+                "type":"Folder"
+            },
+            "children":[  
+                {  
+                    "key": "7-0",
+                    "data":{  
+                        "name":"barcelona.jpg",
+                        "size":"90kb",
+                        "type":"Picture"
+                    }
+                },
+                {  
+                    "key": "7-1",
+                    "data":{  
+                        "name":"primeng.png",
+                        "size":"30kb",
+                        "type":"Picture"
+                    }
+                },
+                {  
+                    "key": "7-2",
+                    "data":{  
+                        "name":"prime.jpg",
+                        "size":"30kb",
+                        "type":"Picture"
+                    }
+                }
+            ]
+        },
+        {  
+            "key": "8",
+            "data":{  
+                "name":"Videos",
+                "size":"1500kb",
+                "type":"Folder"
+            },
+            "children":[  
+                {  
+                    "key": "8-0",
+                    "data":{  
+                        "name":"primefaces.mkv",
+                        "size":"1000kb",
+                        "type":"Video"
+                    }
+                },
+                {  
+                    "key": "8-1",
+                    "data":{  
+                        "name":"intro.avi",
+                        "size":"500kb",
+                        "type":"Video"
+                    }
+                }
+            ]
+        }
+    ]
+}
\ No newline at end of file
diff --git a/src/AppMenu.vue b/src/AppMenu.vue
index bec339394..4b72e633e 100644
--- a/src/AppMenu.vue
+++ b/src/AppMenu.vue
@@ -62,6 +62,7 @@
                         <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>
+                        <router-link to="/tree">&#9679; Tree</router-link>
                     </div>
                 </div>
             </transition>
diff --git a/src/components/tree/Tree.vue b/src/components/tree/Tree.vue
new file mode 100644
index 000000000..263d2f088
--- /dev/null
+++ b/src/components/tree/Tree.vue
@@ -0,0 +1,194 @@
+<template>
+    <div :class="containerClass">
+        <ul class="p-tree-container" role="tree">
+            <TreeNode v-for="node of value" :key="node.key" :node="node"
+                :expandedKeys="d_expandedKeys" @toggle="onNodeToggle"></TreeNode>
+        </ul>
+    </div>
+</template>
+
+<script>
+import TreeNode from './TreeNode';
+
+export default {
+    props: {
+        value: {
+            type: null,
+            default: null
+        },
+        expandedKeys: {
+            type: null,
+            default: null
+        }
+    },
+    data() {
+        return {
+            d_expandedKeys: this.expandedKeys || {}
+        }
+    },
+    watch: {
+        expandedKeys(newValue) {
+            this.d_expandedKeys = newValue;
+        }
+    },
+    methods: {
+        onNodeToggle(node) {
+            const key = node.key;
+
+            if (this.d_expandedKeys[key]) {
+                delete this.d_expandedKeys[key];
+                this.$emit('node-collapse', node);
+            }
+            else {
+                this.d_expandedKeys[key] = true;
+                this.$emit('node-expand', node);
+            }                
+
+            this.d_expandedKeys = {...this.d_expandedKeys};
+            this.$emit('update:expandedKeys', this.d_expandedKeys);
+        }
+    },
+    computed: {
+        containerClass() {
+            return 'p-tree p-component';
+        }
+    },
+    components: {
+        'TreeNode': TreeNode
+    }
+}
+</script>
+
+<style>
+.p-tree {
+    width: 24em;
+}
+
+.p-tree .p-treenode-selectable.p-treenode-content {
+    cursor: pointer;
+}
+
+.p-tree .p-tree-container {
+    height: 100%;
+    margin: 0;
+    overflow: auto;
+    padding: .25em;
+    white-space: nowrap;
+}
+
+.p-tree .p-treenode-children {
+    margin: 0;
+    padding: 0 0 0 1em;
+}
+
+.p-tree .p-treenode {
+    background-attachment: scroll;
+    background-color: transparent;
+    background-image: none;
+    background-position: 0 0;
+    background-repeat: repeat-y;
+    list-style: none outside none;
+    margin: 0;
+    padding: .125em 0 0 0;
+}
+
+.p-tree .p-treenode-droppoint {
+    height: 4px;
+    list-style-type: none;
+}
+
+.p-tree .p-treenode-droppoint-active {
+    border: 0 none;
+}
+
+.p-tree .p-tree-toggler {
+    cursor: pointer;
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.p-tree .p-tree-toggler .p-tree-toggler-icon {
+    vertical-align: middle;
+}
+
+.p-tree .p-treenode-icon {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.p-tree .p-treenode-label {
+    display: inline-block;
+    padding: 0 .25em;
+    vertical-align: middle;
+}
+
+.p-tree .p-treenode.p-treenode-leaf > .p-treenode-content > .p-tree-toggler {
+    visibility: hidden;
+}
+
+.p-tree .p-checkbox-box {
+    cursor: pointer;
+}
+
+.p-tree .p-checkbox {
+    display: inline-block;
+    vertical-align: middle;
+}
+
+.p-tree .p-checkbox .p-checkbox-icon {
+    margin-left: 1px;
+}
+
+.p-tree .p-tree-filter {
+    width: 100%;
+    box-sizing: border-box;
+    padding-right: 1.5em;
+}
+
+.p-tree .p-tree-filter-container {
+    position: relative;
+    margin: 0;
+    padding: 0.4em;
+    display: inline-block;
+    width: 100%;
+}
+
+.p-tree .p-tree-filter-container .p-tree-filter-icon {
+    position: absolute;
+    top: .8em;
+    right: 1em;
+}
+
+/** Fluid **/
+.p-fluid .p-tree {
+    width: 100%;
+}
+
+/** Loading **/
+.p-tree.p-tree-loading {
+    position: relative;
+    min-height: 4em;
+}
+
+.p-tree .p-tree-loading-mask {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
+    opacity: 0.1;
+    z-index: 1;
+}
+
+.p-tree .p-tree-loading-content {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    z-index: 2;
+    margin-top: -1em;
+    margin-left: -1em;
+}
+
+.p-tree .p-tree-loading-content .p-tree-loading-icon {
+    font-size: 2em;
+} 
+</style>
\ No newline at end of file
diff --git a/src/components/tree/TreeNode.vue b/src/components/tree/TreeNode.vue
new file mode 100644
index 000000000..cdaee12ab
--- /dev/null
+++ b/src/components/tree/TreeNode.vue
@@ -0,0 +1,62 @@
+<template>
+    <li :class="containerClass">
+        <div class="p-treenode-content" tabindex="0" role="treeitem">
+            <span class="p-tree-toggler p-unselectable-text p-link" @click="toggle">
+                <span :class="toggleIcon"></span>
+            </span>
+            <span :class="icon"></span>
+            <span class="p-treenode-label">{{node.label}}</span>
+        </div>
+        <ul class="p-treenode-children" role="group" v-if="hasChildren && expanded">
+            <sub-treenode v-for="childNode of node.children" :key="childNode.key" :node="childNode"
+                :expandedKeys="expandedKeys" @toggle="onChildNodeToggle"></sub-treenode>
+        </ul>
+    </li>
+</template>
+
+<script>
+export default {
+    name: 'sub-treenode',
+    props: {
+        node: {
+            type: null,
+            default: null
+        },
+        expandedKeys: {
+            type: null,
+            default: null
+        }
+    },
+    methods: {
+        toggle() {
+            this.$emit('toggle', this.node);
+        },
+        onChildNodeToggle(node) {
+            this.$emit('toggle', node);
+        }
+    },
+    computed: {
+        hasChildren() {
+            return this.node.children && this.node.children.length > 0;
+        },
+        expanded() {
+            return this.expandedKeys && this.expandedKeys[this.node.key] === true;
+        },
+        leaf() {
+            return this.node.leaf === false ? false : !(this.node.children && this.node.children.length);
+        },
+        containerClass() {
+            return ['p-treenode', {'p-treenode-leaf': this.leaf}];
+        },
+        icon() {
+            return ['p-treenode-icon', this.node.icon];
+        },
+        toggleIcon() {
+            return ['p-tree-toggler-icon pi pi-fw', {
+                'pi-caret-down': this.expanded,
+                'pi-caret-right': !this.expanded
+            }];
+        }
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/main.js b/src/main.js
index 7930727f6..e558784cf 100644
--- a/src/main.js
+++ b/src/main.js
@@ -44,12 +44,13 @@ import Slider from './components/slider/Slider';
 import Sidebar from './components/sidebar/Sidebar';
 import SplitButton from './components/splitbutton/SplitButton';
 import Spinner from './components/spinner/Spinner';
+import TabView from './components/tabview/TabView';
+import TabPanel from './components/tabpanel/TabPanel';
 import Textarea from './components/textarea/Textarea';
+import Tree from './components/tree/Tree';
 import Toast from './components/toast/Toast';
 import ToastService from './components/toast/ToastService';
 import Toolbar from './components/toolbar/Toolbar';
-import TabView from './components/tabview/TabView';
-import TabPanel from './components/tabpanel/TabPanel';
 import ToggleButton from './components/togglebutton/ToggleButton';
 import TriStateCheckbox from './components/tristatecheckbox/TriStateCheckbox';
 import ValidationMessage from './components/validationmessage/ValidationMessage';
@@ -117,6 +118,7 @@ Vue.component('Textarea', Textarea);
 Vue.component('Toast', Toast);
 Vue.component('Toolbar', Toolbar);
 Vue.component('ToggleButton', ToggleButton);
+Vue.component('Tree', Tree);
 Vue.component('TriStateCheckbox', TriStateCheckbox);
 Vue.component('ValidationMessage', ValidationMessage);
 
diff --git a/src/router.js b/src/router.js
index 7c5d6d3d2..fa8680d94 100644
--- a/src/router.js
+++ b/src/router.js
@@ -355,6 +355,11 @@ export default new Router({
 			path: '/toolbar',
 			name: 'toolbar',
 			component: () => import('./views/toolbar/ToolbarDemo.vue')
+        },
+        {
+			path: '/tree',
+			name: 'tree',
+			component: () => import('./views/tree/TreeDemo.vue')
 		},
 		{
 			path: '/tristatecheckbox',
diff --git a/src/service/NodeService.js b/src/service/NodeService.js
new file mode 100644
index 000000000..091b0482f
--- /dev/null
+++ b/src/service/NodeService.js
@@ -0,0 +1,15 @@
+import axios from 'axios';
+
+export default class NodeService {
+    
+    getTreeTableNodes() {
+        return axios.get('demo/data/treetablenodes.json')
+                .then(res => res.data.root);
+    }
+
+    getTreeNodes() {
+        return axios.get('demo/data/treenodes.json')
+                .then(res => res.data.root);
+    }
+    
+}
\ No newline at end of file
diff --git a/src/views/tree/TreeDemo.vue b/src/views/tree/TreeDemo.vue
new file mode 100644
index 000000000..f86bc62e2
--- /dev/null
+++ b/src/views/tree/TreeDemo.vue
@@ -0,0 +1,38 @@
+<template>
+    <div>
+        <div class="content-section introduction">
+            <div class="feature-intro">
+                <h1>Tree</h1>
+                <p>Tree is used to display hierarchical data.</p>
+            </div>
+        </div>
+
+        <div class="content-section implementation">
+            <Tree :value="nodes"></Tree>
+        </div>
+
+        <TreeDoc />
+    </div>
+</template>
+<script>
+import NodeService from '../../service/NodeService';
+import TreeDoc from './TreeDoc';
+
+export default {
+    data() {
+        return {
+            nodes: null
+        }
+    },
+    nodeService: null,
+    created() {
+        this.nodeService = new NodeService();
+    },
+    mounted() {
+        this.nodeService.getTreeNodes().then(data => this.nodes = data);
+    },
+    components: {
+        'TreeDoc': TreeDoc
+    }
+}
+</script>
\ No newline at end of file
diff --git a/src/views/tree/TreeDoc.vue b/src/views/tree/TreeDoc.vue
new file mode 100644
index 000000000..97b1811c7
--- /dev/null
+++ b/src/views/tree/TreeDoc.vue
@@ -0,0 +1,150 @@
+<template>
+	<div class="content-section documentation">
+		<TabView>
+			<TabPanel header="Documentation">
+				<h3>Import</h3>
+<CodeHighlight lang="javascript">
+import Tree from 'primevue/tree';
+</CodeHighlight>
+
+				<h3>Getting Started</h3>
+				<p>A model can be bound using the standard v-model directive.</p>
+<CodeHighlight>
+&lt;TriStateCheckbox v-model="value" /&gt;
+</CodeHighlight>
+
+				<h3>Properties</h3>
+                <p>Any valid attribute such as name and autofocus are passed to the underlying input element. Following is the additional property 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>value</td>
+                                <td>boolean</td>
+                                <td>null</td>
+                                <td>Value of the component.</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>change</td>
+                                <td>event: Browser event</td>
+                                <td>Callback to invoke on value change.</td>
+                            </tr>
+                            <tr>
+                                <td>input</td>
+                                <td>event: Value of checkbox</td>
+                                <td>Callback to invoke on click.</td>
+                            </tr>
+                            <tr>
+                                <td>click</td>
+                                <td>event: Browser event</td>
+                                <td>Callback to invoke click.</td>
+                            </tr>
+                            <tr>
+                                <td>focus</td>
+                                <td>event: Browser event</td>
+                                <td>Callback to invoke on focus.</td>
+                            </tr>
+                            <tr>
+                                <td>blur</td>
+                                <td>event: Browser event</td>
+                                <td>Callback to invoke on blur.</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-chkbox</td>
+                                <td>Container element</td>
+                            </tr>
+                            <tr>
+                                <td>p-tristatechkbox</td>
+                                <td>Container element</td>
+                            </tr>
+                            <tr>
+                                <td>p-chkbox-box</td>
+                                <td>Container of icon.</td>
+                            </tr>
+                            <tr>
+                                <td>p-chkbox-icon</td>
+                                <td>Icon element.</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/tristatecheckbox" 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;TriStateCheckbox&lt;/h1&gt;
+				&lt;p&gt;TriStateCheckbox is used to select either "true", "false" or "null" as the value.&lt;/p&gt;
+			&lt;/div&gt;
+		&lt;/div&gt;
+
+		&lt;div class="content-section implementation"&gt;
+			&lt;TriStateCheckbox v-model="value" /&gt;
+			&lt;p&gt;Value: &lt;span style="font-weight: bold"&gt;{{value == null ? 'null' : value}}&lt;/span&gt;&lt;/p&gt;
+		&lt;/div&gt;
+	&lt;/div&gt;
+&lt;/template&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+export default {
+	data() {
+		return {
+			value: null
+		}
+	}
+}
+</CodeHighlight>
+			</TabPanel>
+		</TabView>
+	</div>
+</template>
\ No newline at end of file