68 lines
1.4 KiB
Vue
68 lines
1.4 KiB
Vue
<template lang="html">
|
|
<draggable
|
|
:value="children"
|
|
class="drag-area layout column"
|
|
@change="change"
|
|
:group="group"
|
|
:animation="200"
|
|
ghost-class="ghost"
|
|
draggable=".item"
|
|
handle=".handle"
|
|
>
|
|
<tree-node
|
|
v-for="child in children"
|
|
:node="child.node"
|
|
:children="child.children"
|
|
:group="group"
|
|
:key="child.node && (child.node._id || child.node.name)"
|
|
:organize="organize"
|
|
:lazy="lazy"
|
|
class="item"
|
|
@moved="e => $emit('moved', e)"
|
|
@dragstart.native="e => e.dataTransfer.setData('cow', child.node && child.node.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: {
|
|
node: Object,
|
|
group: String,
|
|
organize: Boolean,
|
|
lazy: Boolean,
|
|
children: {
|
|
type: Array,
|
|
required: true,
|
|
},
|
|
},
|
|
computed: {
|
|
hasChildren(){
|
|
return this.children && this.children.length;
|
|
},
|
|
showExpanded(){
|
|
return this.expanded && (this.organize || this.hasChildren)
|
|
},
|
|
},
|
|
methods: {
|
|
change({added, removed, moved}){
|
|
if (removed) return;
|
|
let newIndex = (added || moved).newIndex;
|
|
this.$emit('moved', {parent: this.node, newIndex});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="css" scoped>
|
|
</style>
|