Merge pull request #663 from SortableJS/scope-slot-new-syntax

Fix for issue #633

Author: David-Desmaisons

example/debug-components/slot-example.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="row">
+    <div class="col-2">
+      <div class="form-group">
+        <div
+          class="btn-group-vertical buttons"
+          role="group"
+          aria-label="Basic example"
+        >
+          <button
+            class="btn btn-secondary"
+            @click="add"
+          >Add</button>
+          <button
+            class="btn btn-secondary"
+            @click="remove"
+          >Remove</button>
+          <button
+            class="btn btn-secondary"
+            @click="clear"
+          >Clear</button>
+        </div>
+      </div>
+    </div>
+
+    <div class="col-6">
+      <h3>Draggable</h3>
+
+      <draggable
+        :list="list"
+        :disabled="!enabled"
+        class="list-group"
+        ghost-class="ghost"
+      >
+        <div
+          class="list-group-item"
+          v-for="element in list"
+          :key="element.name"
+        >
+          {{ element.name }}
+        </div>
+
+        <template v-slot:header>
+          <div>
+            header slot
+          </div>
+        </template>
+
+         <template v-slot:footer>
+          <div>
+            footer slot
+          </div>
+        </template>
+      </draggable>
+    </div>
+
+    <rawDisplayer
+      class="col-3"
+      :value="list"
+      title="List"
+    />
+  </div>
+</template>
+
+<script>
+import draggable from "@/vuedraggable";
+
+let id = 1;
+export default {
+  name: "slot-example",
+  display: "Slot example",
+  order: 1,
+  debug: true,
+  components: {
+    draggable
+  },
+  data() {
+    return {
+      enabled: true,
+      list: [
+        { name: "John", id: 0 },
+        { name: "Joao", id: 1 },
+        { name: "Jean", id: 2 }
+      ]
+    };
+  },
+  methods: {
+    clear: function() {
+      this.list = [];
+    },
+    add: function() {
+      this.list.push({ name: "Juan " + id, id: id++ });
+    },
+    remove: function() {
+      this.list.pop();
+    }
+  }
+};
+</script>
+<style scoped>
+.buttons {
+  margin-top: 35px;
+}
+
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+</style>

src/vuedraggable.js

@@ -55,13 +55,19 @@ function isTransition(slots) {
   return isTransitionName(componentOptions.tag);
 }
 
-function computeChildrenAndOffsets(children, { header, footer }) {
+function getSlot(slot, scopedSlot, key) {
+  return slot[key] || (scopedSlot[key] ? scopedSlot[key]() : undefined);
+}
+
+function computeChildrenAndOffsets(children, slot, scopedSlot) {
   let headerOffset = 0;
   let footerOffset = 0;
+  const header = getSlot(slot, scopedSlot, "header");
   if (header) {
     headerOffset = header.length;
     children = children ? [...header, ...children] : [...header];
   }
+  const footer = getSlot(slot, scopedSlot, "footer");
   if (footer) {
     footerOffset = footer.length;
     children = children ? [...children, ...footer] : [...footer];
@@ -159,7 +165,8 @@ const draggableComponent = {
     this.transitionMode = isTransition(slots);
     const { children, headerOffset, footerOffset } = computeChildrenAndOffsets(
       slots,
-      this.$slots
+      this.$slots,
+      this.$scopedSlots
     );
     this.headerOffset = headerOffset;
     this.footerOffset = footerOffset;

tests/unit/vuedraggable.spec.js

@@ -1209,4 +1209,35 @@ describe("draggable.vue when initialized with a transition group", () => {
       })
     })
   });
+
+  describe("draggable.vue when initialized with header and footer scoped slots", () => {
+    beforeEach(() => {
+      resetMocks();
+      items = ["a", "b", "c"];
+      wrapper = shallowMount(draggable, {
+        attachToDocument: true,
+        propsData: {
+          list: items
+        },
+        attrs: {
+          sortableOption: "value",
+          "to-be-camelized": true
+        },
+        slots: {
+          default: items.map(item => `<div>${item}</div>`),
+        },
+        scopedSlots: {
+          header: "<header/>",
+          footer: "<footer/>"
+        },
+      });
+      vm = wrapper.vm;
+      props = vm.$options.props;
+      element = wrapper.element;
+    });
+
+    it("renders correctly", () => {
+      expect(wrapper.html()).toEqual(initialRender);
+    })
+  });
 });