Fixing range inconsistency when using footer

Author: David-Desmaisons

example/components/two-list-headerslots.vue

@@ -42,8 +42,8 @@
           role="group"
           aria-label="Basic example"
         >
-          <button class="btn btn-secondary" @click="add">Add</button>
-          <button class="btn btn-secondary" @click="replace">Replace</button>
+          <button class="btn btn-secondary" @click="add2">Add</button>
+          <button class="btn btn-secondary" @click="replace2">Replace</button>
         </div>
       </draggable>
     </div>
@@ -58,7 +58,7 @@
 import draggable from "@/vuedraggable";
 let id = 1;
 export default {
-  name: "headerslots",
+  name: "two-list-headerslots",
   display: "Two list header slot",
   order: 13,
   components: {
@@ -80,8 +80,15 @@ export default {
     },
     replace: function() {
       this.list = [{ name: "Edgard", id: id++ }];
+    },
+    add2: function() {
+      this.list2.push({ name: "Juan " + id, id: id++ });
+    },
+    replace2: function() {
+      this.list2 = [{ name: "Edgard", id: id++ }];
     }
   }
 };
 </script>
-<style scoped></style>
+<style scoped>
+</style>

src/vuedraggable.js

@@ -28,13 +28,16 @@ function computeVmIndex(vnodes, element) {
   return vnodes.map(elt => elt.elm).indexOf(element);
 }
 
-function computeIndexes(slots, children, isTransition) {
+function computeIndexes(slots, children, isTransition, footerOffset) {
   if (!slots) {
     return [];
   }
 
   const elmFromNodes = slots.map(elt => elt.elm);
-  const rawIndexes = [...children].map(elt => elmFromNodes.indexOf(elt));
+  const footerIndex = children.length - footerOffset;
+  const rawIndexes = [...children].map((elt, idx) =>
+    idx >= footerIndex ? elmFromNodes.length : elmFromNodes.indexOf(elt)
+  );
   return isTransition ? rawIndexes.filter(ind => ind !== -1) : rawIndexes;
 }
 
@@ -140,16 +143,19 @@ const draggableComponent = {
       }
     }
     let headerOffset = 0;
+    let footerOffset = 0;
     let children = slots;
     const { header, footer } = this.$slots;
     if (header) {
       headerOffset = header.length;
       children = children ? [...header, ...children] : [...header];
     }
     if (footer) {
+      footerOffset = footer.length;
       children = children ? [...children, ...footer] : [...footer];
     }
     this.headerOffset = headerOffset;
+    this.footerOffset = footerOffset;
     var attributes = null;
     const update = (name, value) => {
       attributes = buildAttribute(attributes, name, value);
@@ -295,7 +301,8 @@ const draggableComponent = {
         this.visibleIndexes = computeIndexes(
           this.getChildrenNodes(),
           this.rootContainer.children,
-          this.transitionMode
+          this.transitionMode,
+          this.footerOffset
         );
       });
     },

tests/unit/vuedraggable.spec.js

@@ -207,8 +207,7 @@ describe("draggable.vue when initialized with list", () => {
 
   it("computes indexes", async () => {
     await Vue.nextTick();
-    //To be altered
-    expect(vm.visibleIndexes).toEqual([-1, 0, 1, 2, -1]);
+    expect(vm.visibleIndexes).toEqual([-1, 0, 1, 2, 3]);
   });
 
   it("update indexes", async () => {