jschaufuss/DiceCloud
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improved tree view

Browse Source
This commit is contained in:
Stefan Zermatten
2019-04-24 13:22:31 +02:00
parent fc24cf4a5b
commit e71bfb2691
5 changed files with 106 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
app/imports/ui/StoryBook.vue
View File

@@ -56,7 +56,7 @@
import SmartInput from '/imports/ui/components/global/SmartInput.Story.vue';
import SpellSlotListTile from '/imports/ui/creature/properties/attributes/SpellSlotListTile.Story.vue';
import ToolbarLayout from '/imports/ui/layouts/ToolbarLayout.vue';
import TreeNode from '/imports/ui/components/tree/TreeNode.Story.vue';
import TreeNode from '/imports/ui/components/tree/TreeNodeList.Story.vue';
export default {
components: {

44
app/imports/ui/components/tree/TreeNode.Story.vue
View File

@@ -1,44 +0,0 @@
<template lang="html">
<div>
<tree-node v-bind="node" group="cheese"/>
<samp>
{{dataString}}
</samp>
<div style="height: 200px" @drop="e => log(e.dataTransfer.getData('cow'))" @dragover.prevent></div>
</div>
</template>
<script>
import TreeNode from '/imports/ui/components/tree/TreeNode.vue';
export default {
components: {
TreeNode,
},
data(){ return {
node: {
name: 'parent',
children: [
{name: 'child 1', children:[]},
{name: 'child 2', children: [
{name: 'grandchild 1', children:[]},
{name: 'grandchild 2', children:[]},
]},
{name: 'child 3', children:[]},
],
},
drag: false,
}},
computed: {
dataString(){
return JSON.stringify(this.node, null, 2);
}
},
methods: {
log: console.log,
},
};
</script>
<style lang="css" scoped>
</style>

32
app/imports/ui/components/tree/TreeNode.vue
View File

@@ -13,23 +13,11 @@
</div>
<v-expand-transition>
<div v-if="showExpanded">
<draggable
:list="children"
class="drag-area layout column"
<tree-node-list
:children="children"
:group="group"
:animation="200"
ghost-class="ghost"
draggable=".item"
>
<tree-node
v-for="child in children"
v-bind="child"
:group="group"
:key="child.name"
class="item"
@dragstart.native="e => e.dataTransfer.setData('cow', 'moooooo')"
/>
</draggable>
:show-empty="showEmpty"
/>
</div>
</v-expand-transition>
</div>
@@ -48,6 +36,9 @@
components: {
draggable,
},
beforeCreate() {
this.$options.components.TreeNodeList = require('./TreeNodeList.vue').default
},
data(){ return {
expanded: false,
}},
@@ -68,11 +59,6 @@
return this.expanded && (this.showEmpty || this.hasChildren)
},
},
methods: {
dragstart(){
console.log(arguments);
},
}
};
</script>
@@ -82,11 +68,11 @@
}
.drag-area {
min-height: 40px;
box-shadow: -2px 0px 0px 0px #808080, 2px 0px 0px 0px #808080;
box-shadow: -2px 0px 0px 0px #808080;
margin-left: 23px;
}
.empty .drag-area {
box-shadow: -2px 0px 0px 0px rgb(128, 128, 128, 0.4), 2px 0px 0px 0px rgb(128, 128, 128, 0.4);
box-shadow: -2px 0px 0px 0px rgb(128, 128, 128, 0.4);
}
.empty .v-btn {
opacity: 0.4;

43
app/imports/ui/components/tree/TreeNodeList.Story.vue Normal file
View File

@@ -0,0 +1,43 @@
<template lang="html">
<div>
<tree-node-list :children="children" group="example-group" :show-empty="true"/>
<samp>
{{dataString}}
</samp>
<div style="height: 200px" @drop="e => log(e.dataTransfer.getData('cow'))" @dragover.prevent></div>
<tree-node-list :children="otherChildren" group="example-group" :show-empty="true"/>
</div>
</template>
<script>
import TreeNodeList from '/imports/ui/components/tree/TreeNodeList.vue';
export default {
components: {
TreeNodeList,
},
data(){ return {
children: [
{name: 'child 1', children:[]},
{name: 'child 2', children: [
{name: 'grandchild 1', children:[]},
{name: 'grandchild 2', children:[]},
]},
{name: 'child 3', children:[]},
],
otherChildren: [],
drag: false,
}},
computed: {
dataString(){
return JSON.stringify(this.children, null, 2);
}
},
methods: {
log: console.log,
},
};
</script>
<style lang="css" scoped>
</style>

53
app/imports/ui/components/tree/TreeNodeList.vue Normal file
View File

@@ -0,0 +1,53 @@
<template lang="html">
<draggable
:list="children"
class="drag-area layout column"
:group="group"
:animation="200"
ghost-class="ghost"
draggable=".item"
>
<tree-node
v-for="child in children"
v-bind="child"
:group="group"
:key="child.name"
:showEmpty="showEmpty"
class="item"
@dragstart.native="e => e.dataTransfer.setData('cow', child.name)"
/>
</draggable>
</template>
<script>
import draggable from 'vuedraggable';
import TreeNode from '/imports/ui/components/tree/TreeNode.vue';
export default {
components: {
draggable,
TreeNode,
},
data(){ return {
expanded: false,
}},
props: {
group: String,
showEmpty: Boolean,
children: {
type: Array,
required: true,
},
},
computed: {
hasChildren(){
return this.children && this.children.length;
},
showExpanded(){
return this.expanded && (this.showEmpty || this.hasChildren)
},
},
};
</script>
<style lang="css" scoped>
</style>