fix the bugs of multi-layer-slot in renderHelper add examples of mult…

example/components/multi-layer-slot-example.vue

@@ -0,0 +1,70 @@
+<template>
+  <div>
+    <button class="btn btn-secondary" @click="onClick">LevelChange</button>
+    <component :is="slotName" :list="list"> </component>
+  </div>
+</template>
+
+<script>
+import DefaultSlot from "./multi-layer-slot/default-slot.vue";
+import LevelOneSlot from "./multi-layer-slot/level-one.vue";
+import LevelTwoSlot from "./multi-layer-slot/level-two.vue";
+import LevelThreeSlot from "./multi-layer-slot/level-three.vue";
+export default {
+  name: "multi-layer-slot-example",
+  display: "Multi layer slot",
+  order: 16,
+  components: {
+    DefaultSlot,
+    LevelOneSlot,
+    LevelTwoSlot,
+    LevelThreeSlot
+  },
+  computed: {
+    slotName() {
+      const num = this.levelNum % 4;
+      switch (num) {
+        case 0:
+          return "DefaultSlot";
+        case 1:
+          return "LevelOneSlot";
+        case 2:
+          return "LevelTwoSlot";
+        case 3:
+          return "LevelThreeSlot";
+      }
+      return "DefaultSlot";
+    }
+  },
+  data() {
+    return {
+      list: [
+        { name: "John", id: 0 },
+        { name: "Joao", id: 1 },
+        { name: "Jean", id: 2 }
+      ],
+      dragging: false,
+      levelNum: 0
+    };
+  },
+  methods: {
+    onClick() {
+      this.levelNum++;
+    }
+  }
+};
+</script>
+<style scoped>
+.btn {
+  margin-bottom: 35px;
+}
+
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+
+.not-draggable {
+  cursor: no-drop;
+}
+</style>

example/components/multi-layer-slot/default-slot.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="row">
+    <div class="col-6">
+      <draggable
+        :list="list"
+        item-key="name"
+        class="list-group"
+        ghost-class="ghost"
+        @start="dragging = true"
+        @end="dragging = false"
+      >
+        <template #item="{ element }">
+          <div class="list-group-item">{{ name }} - {{ element.name }}</div>
+        </template>
+      </draggable>
+    </div>
+    <rawDisplayer class="col-6" :value="list" title="List" />
+  </div>
+</template>
+
+<script>
+import draggable from "@/vuedraggable";
+const levelName = "levelZero";
+export default {
+  name: levelName,
+  components: {
+    draggable
+  },
+  data() {
+    return {
+      name: levelName,
+      dragging: false
+    };
+  },
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {}
+};
+</script>
+<style scoped>
+.buttons {
+  margin-top: 35px;
+}
+
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+
+.not-draggable {
+  cursor: no-drop;
+}
+</style>

example/components/multi-layer-slot/level-one.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="row">
+    <div class="col-6">
+      <draggable
+        :list="list"
+        item-key="name"
+        class="list-group"
+        ghost-class="ghost"
+        @start="dragging = true"
+        @end="dragging = false"
+      >
+        <!-- <template #item="{ element }">
+        <div class="list-group-item">
+          {{ element.name }}
+        </div>
+      </template> -->
+        <template #item="{element}">
+          <slot name="item" :element="element">
+            <div class="list-group-item">{{ name }} - {{ element.name }}</div>
+          </slot>
+        </template>
+      </draggable>
+    </div>
+    <rawDisplayer class="col-3" :value="list" title="List" />
+  </div>
+</template>
+
+<script>
+import draggable from "@/vuedraggable";
+const levelName = "levelOne";
+export default {
+  name: levelName,
+  components: {
+    draggable
+  },
+  data() {
+    return {
+      name: levelName,
+      dragging: false
+    };
+  },
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {}
+};
+</script>
+<style scoped>
+.buttons {
+  margin-top: 35px;
+}
+
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+
+.not-draggable {
+  cursor: no-drop;
+}
+</style>

example/components/multi-layer-slot/level-three.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <LevelTwo :list="list">
+      <template #item="{ element }">
+        <slot name="item" :element="element">
+          <div class="list-group-item">{{ name }} - {{ element.name }}</div>
+        </slot>
+      </template>
+    </LevelTwo>
+  </div>
+</template>
+
+<script>
+import LevelTwo from "./level-two.vue";
+const levelName = "levelThree";
+export default {
+  name: levelName,
+  components: {
+    LevelTwo
+  },
+  data() {
+    return {
+      name: levelName
+    };
+  },
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {}
+};
+</script>
+<style scoped>
+.buttons {
+  margin-top: 35px;
+}
+
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+
+.not-draggable {
+  cursor: no-drop;
+}
+</style>

example/components/multi-layer-slot/level-two.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <LevelOne :list="list">
+      <template #item="{ element }">
+        <slot name="item" :element="element">
+          <div class="list-group-item">{{ name }} - {{ element.name }}</div>
+        </slot>
+      </template>
+    </LevelOne>
+  </div>
+</template>
+
+<script>
+import LevelOne from "./level-one.vue";
+const levelName = "levelTwo";
+export default {
+  name: levelName,
+  components: {
+    LevelOne
+  },
+  data() {
+    return {
+      name: levelName
+    };
+  },
+  props: {
+    list: {
+      type: Array,
+      default: () => []
+    }
+  },
+  methods: {}
+};
+</script>
+<style scoped>
+.buttons {
+  margin-top: 35px;
+}
+
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+
+.not-draggable {
+  cursor: no-drop;
+}
+</style>

src/core/renderHelper.js

@@ -1,12 +1,26 @@
-import { ComponentStructure } from "./componentStructure";
-import { isHtmlTag, isTransition } from "../util/tags";
 import { resolveComponent, TransitionGroup } from "vue";
+import { isHtmlTag, isTransition } from "../util/tags";
+import { ComponentStructure } from "./componentStructure";
 
 function getSlot(slots, key) {
   const slotValue = slots[key];
   return slotValue ? slotValue() : [];
 }
 
+function getRealNode(rawNode) {
+  let node = rawNode;
+  let failed = false;
+  while (!failed && node && !node.el) {
+    const children = node.children;
+    if (children && typeof children !== "string" && children.length === 1) {
+      node = children[0];
+    } else {
+      failed = true;
+    }
+  }
+  return node;
+}
+
 function computeNodes({ $slots, realList, getKey }) {
   const normalizedList = realList || [];
   const [header, footer] = ["header", "footer"].map(name =>
@@ -17,9 +31,12 @@ function computeNodes({ $slots, realList, getKey }) {
     throw new Error("draggable element must have an item slot");
   }
   const defaultNodes = normalizedList.flatMap((element, index) =>
-    item({ element, index }).map(node => {
-      node.key = getKey(element);
-      node.props = { ...(node.props || {}), "data-draggable": true };
+    item({ element, index }).map(rawNode => {
+      const node = getRealNode(rawNode);
+      if (node) {
+        node.key = getKey(element);
+        node.props = { ...(node.props || {}), "data-draggable": true };
+      }
       return node;
     })
   );