WIP: using item slot

Author: David-Desmaisons

example/components/headerslot.vue

@@ -6,17 +6,19 @@
       <draggable
         :list="list"
         class="list-group"
-        draggable=".item"
         @start="dragging = true"
         @end="dragging = false"
+        item-key="name"
       >
-        <div
-          class="list-group-item item"
-          v-for="element in list"
-          :key="element.name"
-        >
-          {{ element.name }}
-        </div>
+        <template v-slot:footer>
+          <div
+            class="btn-group list-group-item"
+            role="group"
+            aria-label="Basic example"
+          >
+            <button class="btn btn-secondary" @click="replace">Replace</button>
+          </div>
+        </template>
 
         <template v-slot:header>
           <div
@@ -25,7 +27,12 @@
             aria-label="Basic example"
           >
             <button class="btn btn-secondary" @click="add">Add</button>
-            <button class="btn btn-secondary" @click="replace">Replace</button>
+          </div>
+        </template>
+
+        <template v-slot:item="{ element }">
+          <div class="list-group-item item">
+            {{ element.name }}
           </div>
         </template>
       </draggable>

example/components/simple.vue

@@ -29,20 +29,18 @@
       <draggable
         :list="list"
         :disabled="!enabled"
+        item-key="name"
         class="list-group"
         ghost-class="ghost"
         :move="checkMove"
         @start="dragging = true"
         @end="dragging = false"
       >
-        <div
-          class="list-group-item"
-          :class="{ 'not-draggable': !enabled }"
-          v-for="element in list"
-          :key="element.name"
-        >
-          {{ element.name }}
-        </div>
+        <template v-slot:item="{ element }">
+          <div class="list-group-item" :class="{ 'not-draggable': !enabled }">
+            {{ element.name }}
+          </div>
+        </template>
       </draggable>
     </div>
 

example/components/third-party.vue

@@ -14,15 +14,13 @@
         tag="el-collapse"
         :list="list"
         :component-data="collapseComponentData"
+        item-key="id"
       >
-        <el-collapse-item
-          v-for="item in list"
-          :key="item.id"
-          :title="item.title"
-          :name="item.id"
-        >
-          <div v-for="(lign, idx) in item.text" :key="idx">{{ lign }}</div>
-        </el-collapse-item>
+        <template v-slot:item="{ element }">
+          <el-collapse-item :title="element.title" :name="element.id">
+            <div v-for="(lign, idx) in element.text" :key="idx">{{ lign }}</div>
+          </el-collapse-item>
+        </template>
       </draggable>
     </div>
     <rawDisplayer class="col-3" :value="list" title="List" />

example/components/transition-example-2.vue

@@ -10,18 +10,20 @@
       <h3>Transition</h3>
       <draggable
         class="list-group"
-        tag="ul"
+        tag="transition-group"
+        :component-data="{
+          tag: 'ul',
+          type: 'transition-group',
+          name: !drag ? 'flip-list' : null
+        }"
         v-model="list"
         v-bind="dragOptions"
         @start="drag = true"
         @end="drag = false"
+        item-key="order"
       >
-        <transition-group type="transition" :name="!drag ? 'flip-list' : null">
-          <li
-            class="list-group-item"
-            v-for="element in list"
-            :key="element.order"
-          >
+        <template v-slot:item="{ element }">
+          <li class="list-group-item">
             <i
               :class="
                 element.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'
@@ -31,7 +33,7 @@
             ></i>
             {{ element.name }}
           </li>
-        </transition-group>
+        </template>
       </draggable>
     </div>
 

example/components/transition-example.vue

@@ -4,24 +4,26 @@
       <button class="btn btn-secondary button" @click="sort">
         To original order
       </button>
+
+      <button class="btn btn-secondary button" @click="add">
+        Add \
+      </button>
     </div>
 
     <div class="col-6">
       <h3>Transition</h3>
       <draggable
         class="list-group"
-        tag="ul"
+        item-key="order"
+        tag="transition-group"
+        :component-data="{ tag: 'ul', name: 'flip-list', type: 'transition' }"
         v-model="list"
         v-bind="dragOptions"
         @start="isDragging = true"
         @end="isDragging = false"
       >
-        <transition-group type="transition" name="flip-list">
-          <li
-            class="list-group-item"
-            v-for="element in list"
-            :key="element.order"
-          >
+        <template v-slot:item="{ element }">
+          <li class="list-group-item">
             <i
               :class="
                 element.fixed ? 'fa fa-anchor' : 'glyphicon glyphicon-pushpin'
@@ -31,7 +33,7 @@
             ></i>
             {{ element.name }}
           </li>
-        </transition-group>
+        </template>
       </draggable>
     </div>
 
@@ -51,6 +53,7 @@ const message = [
   "on",
   "Sortablejs"
 ];
+let order = message.length;
 
 export default {
   name: "transition-example",
@@ -69,6 +72,9 @@ export default {
   methods: {
     sort() {
       this.list = this.list.sort((a, b) => a.order - b.order);
+    },
+    add() {
+      this.list.push({ name: "nanannana", order: ++order });
     }
   },
   computed: {

src/core/componentStructure.js

@@ -1,28 +1,6 @@
 import { nextTick } from "vue";
-import { isTransition as isTransitionName } from "../util/tags";
 
 const getHtmlElementFromNode = ({ el }) => el;
-const getNodeFromHtmlElement = ({ __vnode: node }) => node;
-
-function isTransition(nodes) {
-  if (nodes.length !== 1) {
-    return false;
-  }
-  const [{ type }] = nodes;
-  return !!type && (isTransitionName(type) || isTransitionName(type.name));
-}
-
-function getRootContainer({ $el, transitionMode }) {
-  if (!transitionMode) {
-    return $el;
-  }
-  const { children } = $el;
-  if (children.length !== 1) {
-    return $el;
-  }
-  const firstChild = children.item(0);
-  return !getNodeFromHtmlElement(firstChild).transition ? firstChild : $el;
-}
 
 class ComponentStructure {
   constructor({ nodes: { header, default: defaultNodes, footer }, root, $el }) {
@@ -32,15 +10,14 @@ class ComponentStructure {
       header: header.length,
       footer: footer.length
     };
-    this.transitionMode = isTransition(defaultNodes);
     this.externalComponent = root.externalComponent;
     this.rootTransition = root.transition;
     this.tag = root.tag;
     this.setHtmlRoot($el);
   }
 
   get _domChildrenFromNodes() {
-    return this._getChildrenNodes().map(getHtmlElementFromNode);
+    return this.nodes.default.map(getHtmlElementFromNode);
   }
 
   get _isRootComponent() {
@@ -58,49 +35,26 @@ class ComponentStructure {
       return;
     }
     this.$el = $el;
-    this.rootContainer = getRootContainer(this);
     nextTick(() => {
       this.visibleIndexes = this._computeIndexes();
     });
     return this;
   }
 
-  _getChildrenNodes() {
-    const {
-      transitionMode,
-      nodes: { default: defaultNodes }
-    } = this;
-
-    if (!transitionMode) {
-      return defaultNodes.length === 1 && defaultNodes[0].el.nodeType === 3
-        ? defaultNodes[0].children
-        : defaultNodes;
-    }
-
-    const [{ children }] = defaultNodes;
-    if (Array.isArray(children)) {
-      return children;
-    }
-    return [...this.rootContainer.children]
-      .map(getNodeFromHtmlElement)
-      .filter(node => !!node.transition);
-  }
-
   _computeIndexes() {
     const {
       _domChildrenFromNodes,
-      transitionMode,
       offsets: { footer: footerOffset }
     } = this;
 
-    const domChildren = this.rootContainer.children;
+    const domChildren = this.$el.children;
     const footerIndex = domChildren.length - footerOffset;
     const rawIndexes = [...domChildren].map((elt, idx) =>
       idx >= footerIndex
         ? _domChildrenFromNodes.length
         : _domChildrenFromNodes.indexOf(elt)
     );
-    return transitionMode ? rawIndexes.filter(ind => ind !== -1) : rawIndexes;
+    return rawIndexes;
   }
 
   computeVmIndex(domElement) {

src/core/renderHelper.js

@@ -1,18 +1,29 @@
 import { ComponentStructure } from "./componentStructure";
 import { isHtmlTag, isTransition } from "../util/tags";
-import { resolveComponent } from "vue";
+import { resolveComponent, TransitionGroup } from "vue";
 
 function getSlot(slots, key) {
   const slotValue = slots[key];
   return slotValue ? slotValue() : [];
 }
 
-function computeNodes(slots) {
-  const [header, defaultNodes, footer] = [
-    "header",
-    "default",
-    "footer"
-  ].map(name => getSlot(slots, name));
+function computeNodes({ $slots, realList, itemKey }) {
+  const [header, footer] = ["header", "footer"].map(name =>
+    getSlot($slots, name)
+  );
+  const { item } = $slots;
+  if (!item) {
+    throw new Error("draggable element must have an item slot");
+  }
+  const defaultNodes = realList.flatMap((element, index) =>
+    item({ element, index }).map(node => {
+      node.key = element[itemKey];
+      return node;
+    })
+  );
+  if (defaultNodes.length !== realList.length) {
+    throw new Error("Item slot must have only one child");
+  }
   return {
     header,
     footer,
@@ -26,12 +37,16 @@ function getRootInformation(tag) {
   return {
     transition,
     externalComponent,
-    tag: externalComponent ? resolveComponent(tag) : tag
+    tag: externalComponent
+      ? resolveComponent(tag)
+      : transition
+      ? TransitionGroup
+      : tag
   };
 }
 
-function computeComponentStructure({ $slots, tag, $el }) {
-  const nodes = computeNodes($slots);
+function computeComponentStructure({ $slots, tag, $el, realList, itemKey }) {
+  const nodes = computeNodes({ $slots, realList, itemKey });
   const root = getRootInformation(tag);
   return new ComponentStructure({ nodes, root, $el });
 }

src/vuedraggable.js

@@ -42,6 +42,10 @@ const props = {
     required: false,
     default: null
   },
+  itemKey: {
+    type: [String, Function],
+    required: true
+  },
   clone: {
     type: Function,
     default: original => {
@@ -71,8 +75,14 @@ const draggableComponent = defineComponent({
   props,
 
   render() {
-    const { $slots, $attrs, tag, componentData, $el } = this;
-    const componentStructure = computeComponentStructure({ $slots, tag, $el });
+    const { $slots, $attrs, tag, componentData, $el, realList, itemKey } = this;
+    const componentStructure = computeComponentStructure({
+      $slots,
+      tag,
+      $el,
+      realList,
+      itemKey
+    });
     this.componentStructure = componentStructure;
     const attributes = getComponentAttributes({ $attrs, componentData });
     return componentStructure.render(h, attributes);
@@ -98,9 +108,8 @@ const draggableComponent = defineComponent({
         manage: event => manage.call(this, event)
       }
     });
-    const { rootContainer } = componentStructure;
-    this._sortable = new Sortable(rootContainer, sortableOptions);
-    rootContainer.__draggable_component__ = this;
+    this._sortable = new Sortable($el, sortableOptions);
+    $el.__draggable_component__ = this;
   },
 
   beforeUnmount() {