Support functional component as draggable element

SortableJS · Dec 29, 2017 · fe73e01 · fe73e01
1 parent 3ea7d72
commit fe73e01
Show file tree

Hide file tree

Showing 7 changed files with 17,110 additions and 21 deletions.
diff --git a/dist/vuedraggable.js b/dist/vuedraggable.js
@@ -110,7 +110,8 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
       data: function data() {
         return {
           transitionMode: false,
-          componentMode: false
+          noneFunctionalComponentMode: false,
+          init: false
         };
       },
       render: function render(h) {
@@ -132,8 +133,8 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
       mounted: function mounted() {
         var _this3 = this;
 
-        this.componentMode = this.element.toLowerCase() !== this.$el.nodeName.toLowerCase();
-        if (this.componentMode && this.transitionMode) {
+        this.noneFunctionalComponentMode = this.element.toLowerCase() !== this.$el.nodeName.toLowerCase();
+        if (this.noneFunctionalComponentMode && this.transitionMode) {
           throw new Error('Transition-group inside component is not supported. Please alter element value or remove transition-group. Current element value: ' + this.element);
         }
         var optionsAdded = {};
@@ -189,7 +190,12 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
 
       methods: {
         getChildrenNodes: function getChildrenNodes() {
-          if (this.componentMode) {
+          if (!this.init) {
+            this.noneFunctionalComponentMode = this.noneFunctionalComponentMode && this.$children.length == 1;
+            this.init = true;
+          }
+
+          if (this.noneFunctionalComponentMode) {
             return this.$children[0].$slots.default;
           }
           var rawNodes = this.$slots.default;
@@ -359,7 +365,7 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
     return draggableComponent;
   }
 
-  if (typeof exports == "object") {
+ if (typeof exports == "object") {
     var Sortable = require("sortablejs");
     module.exports = buildDraggable(Sortable);
   } else if (typeof define == "function" && define.amd) {
@@ -376,6 +382,6 @@ function _toConsumableArray(arr) { if (Array.isArray(arr)) { for (var i = 0, arr
 
     if(typeof window.Sortable == "undefined") {
       throw 'Sortable.js not found!';
-    }
+    }  
   }
-})();
+})();
diff --git a/dist/vuedraggable.min.js b/dist/vuedraggable.min.js
diff --git a/examples/Component2.html b/examples/Component2.html
@@ -0,0 +1,40 @@
+<!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="">
+
+    <link href="vuetify/vuetify.css" rel="stylesheet">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
+
+</head>
+
+<body>
+    <div id="app">
+        <v-app>
+            <main>
+                <v-container>
+                    Hello world
+
+                    <draggable element="v-layout" :list="listA" :options="sortOptions">
+                        <v-flex v-for="(element, index) in listA" :key="element.name">
+                            <span>{{ element.name }}</span>
+                        </v-flex>
+                    </draggable>
+
+                </v-container>
+            </main>
+        </v-app>
+    </div>
+
+    <script type="text/javascript" src="libs\vue\dist\vue.2.5.13.js"></script>
+    <script type="text/javascript" src="vuetify\vuetify.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\component2.js"></script>
+</body>
+
+</html>
diff --git a/examples/script/component2.js b/examples/script/component2.js
@@ -0,0 +1,23 @@
+Vue.config.devtools = true
+
+
+var App = new Vue({
+  el: '#app',
+  data() {
+    return {
+      sortOptions: {
+        group: 'sample',
+        animation: 150,
+      },
+      listA: [
+        { id: 1, name: 'some'},
+        { id: 2, name: 'more'},
+        { id: 2, name: 'samples'},
+      ],
+      listB: [
+        { id: 3, name: 'other'},
+        { id: 4, name: 'examples'},
+      ],
+    };
+  }
+})
diff --git a/examples/vuetify/vuetify.css b/examples/vuetify/vuetify.css