Adding footer slot+ Fix for issue #164 (computing visible index with animation)

David-Desmaisons · David-Desmaisons · commit 60a6ed43c9a4 · 2017-06-24T10:25:27.000-03:00
diff --git a/examples/footerslot.html b/examples/footerslot.html
@@ -0,0 +1,46 @@
+<!doctype html>
+<html class="no-js" lang="">
+    <head>
+        <meta charset="utf-8">
+        <meta http-equiv="x-ua-compatible" content="ie=edge">
+        <title>Basic example</title>
+        <meta name="description" content="">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <link rel="stylesheet" href="css/main.css">
+    </head>
+    <body>
+     
+     <div id="main">
+        <h1>Vue Draggable</h1>
+
+        <div :class="dragging? 'list-dragging' : 'drag'">
+            <h2>Draggable</h2>
+            <draggable  :list="list" @start="dragging=true" @end="dragging=false" :options="{draggable:'.itemd'}">
+                <div v-for="element in list" class="itemd" :key="element.id">{{element.name}}</div>
+                <button slot="footer" @click="add">Add People</button>
+             </draggable>
+         </div>
+
+         <div class="normal">
+            <h2>Normal v-for</h2>
+            <div >
+                <div v-for="element in list">{{element.name}}</div>
+             </div>
+         </div>
+
+        <button @click="replace">Replace</button>
+        <br>
+
+        <a href="Two_Lists.html">See 2 lists example</a>
+        <a href="Two_Lists_Clone.html">See clone element example</a>
+        <a href="Two_Lists_Clone_If.html">See clone v-if element example</a>
+
+    </div>
+
+        <script type="text/javascript" src="libs\vue\dist\vue.js"></script>
+        <script type="text/javascript" src="libs\Sortable\Sortable.js"></script>
+        <script type="text/javascript" src="src\vuedraggable.js"></script>
+        <script type="text/javascript" src="script\main.js"></script>
+    </body>
+</html>
diff --git a/examples/script/main.js b/examples/script/main.js
@@ -1,17 +1,19 @@
+var id=2;
+
 var vm = new Vue({
 	el: "#main",
 	data: {
-		list: [ {name: "John"}, 
-				{name: "Joao"}, 
-				{name: "Jean"} ],
+		list: [ {name: "John", id:0}, 
+				{name: "Joao", id:1}, 
+				{name: "Jean", id:2} ],
 		dragging: false
 	},
 	methods:{
 			add: function(){
-				this.list.push({name:'Juan'});
+				this.list.push({name:'Juan '+id, id: id++});
 			},
 			replace: function(){
-				this.list=[{name:'Edgard'}]
+				this.list=[{name:'Edgard', id: id++}]
 			}
 		}
 	});
diff --git a/src/vuedraggable.js b/src/vuedraggable.js
@@ -13,11 +13,8 @@
     }
 
     function insertNodeAt(fatherNode, node, position) {
-      if (position < fatherNode.children.length) {
-        fatherNode.insertBefore(node, fatherNode.children[position])
-      } else {
-        fatherNode.appendChild(node)
-      }
+      const refNode = (position ===0) ? fatherNode.children[0] : fatherNode.children[position-1].nextSibling
+      fatherNode.insertBefore(node, refNode)
     }
 
     function computeVmIndex(vnodes, element) {
@@ -95,13 +92,19 @@
       },
 
       render(h) {
-        if (this.$slots.default && this.$slots.default.length === 1) {
-          const child = this.$slots.default[0]
+        const slots = this.$slots.default
+        if (slots && slots.length === 1) {
+          const child = slots[0]
           if (child.componentOptions && child.componentOptions.tag === "transition-group") {
             this.transitionMode = true
           }
         }
-        return h(this.element, null, this.$slots.default);
+        let children = [...slots]
+        const {footer} = this.$slots
+        if (footer){
+          children = [...slots, ...footer]
+        }
+        return h(this.element, null, children);
       },
 
       mounted() {
