Initiated Tree Component

pull/41/head
cagataycivici 2019-07-31 18:35:23 +03:00
parent 0335e99a9a
commit b9c040d723
10 changed files with 876 additions and 2 deletions

View File

@ -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" }]
}]
}
]
}

View File

@ -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"
}
}
]
}
]
}

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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);

View File

@ -356,6 +356,11 @@ export default new Router({
name: 'toolbar',
component: () => import('./views/toolbar/ToolbarDemo.vue')
},
{
path: '/tree',
name: 'tree',
component: () => import('./views/tree/TreeDemo.vue')
},
{
path: '/tristatecheckbox',
name: 'tristatecheckbox',

View File

@ -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);
}
}

View File

@ -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>

150
src/views/tree/TreeDoc.vue Normal file
View File

@ -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>