Improved tree view

app/imports/ui/StoryBook.vue

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

app/imports/ui/components/tree/TreeNode.Story.vue

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

app/imports/ui/components/tree/TreeNode.vue

@@ -13,23 +13,11 @@
 		</div>
 		<v-expand-transition>
 			<div v-if="showExpanded">
-				<draggable
+				<tree-node-list
-					:list="children"
+					:children="children"
-					class="drag-area layout column"
 					:group="group"
-					:animation="200"
+					:show-empty="showEmpty"
-					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>
 			</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;

app/imports/ui/components/tree/TreeNodeList.Story.vue

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

app/imports/ui/components/tree/TreeNodeList.vue

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