Merge pull request SortableJS#660 from SortableJS/correct_functional_bug

Correct functional bug

Author: David-Desmaisons

example/components/functional.vue

@@ -0,0 +1,104 @@
+<template>
+  <div class="row">
+    <div class="col-8">
+      <h3>Draggable</h3>
+      <draggable
+        v-model="rows"
+        tag="v-layout"
+        class="row wrap fill-height align-center sortable-list"
+        style="background: grey;"
+      >
+        <v-flex
+          v-for="row in rows"
+          :key="row.index"
+          class="sortable"
+          xs12
+          my-2
+          style="background: red"
+        >
+          <draggable
+            :list="row.items"
+            tag="v-layout"
+            :group="{ name: 'row' }"
+            class="row wrap justify-space-around"
+          >
+            <v-flex
+              v-for="item in row.items"
+              :key="item.title"
+              xs4
+              pa-3
+              class="row-v"
+            >
+              <v-card style="height: 100px;">{{ item.title }}</v-card>
+            </v-flex>
+          </draggable>
+        </v-flex>
+      </draggable>
+    </div>
+
+    <rawDisplayer
+      class="col-3"
+      :value="rows"
+      title="List"
+    />
+  </div>
+</template>
+
+<script>
+import draggable from "@/vuedraggable";
+import Vue from "vue";
+import Vuetify from "vuetify";
+import "vuetify/dist/vuetify.min.css";
+
+Vue.use(Vuetify);
+
+export default {
+  name: "functional",
+  display: "Functional third party",
+  order: 17,
+  components: {
+    draggable
+  },
+  data() {
+    return {
+      enabled: true,
+      rows: [
+        {
+          index: 1,
+          items: [
+            {
+              title: "item 1"
+            }
+          ]
+        },
+        {
+          index: 2,
+          items: [
+            {
+              title: "item 2"
+            },
+            {
+              title: "item 3"
+            }
+          ]
+        }
+      ]
+    };
+  }
+};
+</script>
+<style scoped>
+.buttons {
+  margin-top: 35px;
+}
+
+.row-v {
+  height: 150px;
+  width: 200px;
+}
+
+.ghost {
+  opacity: 0.5;
+  background: #c8ebfb;
+}
+</style>

package-lock.json

@@ -51,6 +51,7 @@
     "vue-router": "^3.0.2",
     "vue-server-renderer": "^2.6.8",
     "vue-template-compiler": "^2.6.8",
+    "vuetify": "^1.5.16",
     "vuex": "^3.1.1"
   },
   "eslintConfig": {

package.json

@@ -146,8 +146,7 @@ const draggableComponent = {
   data() {
     return {
       transitionMode: false,
-      noneFunctionalComponentMode: false,
-      init: false
+      noneFunctionalComponentMode: false
     };
   },
 
@@ -186,7 +185,8 @@ const draggableComponent = {
 
   mounted() {
     this.noneFunctionalComponentMode =
-      this.getTag().toLowerCase() !== this.$el.nodeName.toLowerCase();
+      this.getTag().toLowerCase() !== this.$el.nodeName.toLowerCase() &&
+      !this.getIsFunctional();
     if (this.noneFunctionalComponentMode && this.transitionMode) {
       throw new Error(
         `Transition-group inside component is not supported. Please alter tag value or remove transition-group. Current tag value: ${this.getTag()}`
@@ -251,6 +251,11 @@ const draggableComponent = {
   },
 
   methods: {
+    getIsFunctional() {
+      const { fnOptions } = this._vnode;
+      return fnOptions && fnOptions.functional;
+    },
+
     getTag() {
       return this.tag || this.element;
     },
@@ -265,12 +270,6 @@ const draggableComponent = {
     },
 
     getChildrenNodes() {
-      if (!this.init) {
-        this.noneFunctionalComponentMode =
-          this.noneFunctionalComponentMode && this.$children.length === 1;
-        this.init = true;
-      }
-
       if (this.noneFunctionalComponentMode) {
         return this.$children[0].$slots.default;
       }

src/vuedraggable.js

@@ -0,0 +1,13 @@
+export default {
+  name: "FakeFunctional",
+  functional:true,
+  props: {
+    prop1: {
+      type: String,
+      default: "string"
+    }
+  },
+  render(createElement, context) {
+    return createElement('button', 'Click me');
+  }
+}

tests/unit/helper/FakeFunctionalComponent.js

@@ -10,6 +10,8 @@ Sortable.mockImplementation(() => SortableFake);
 import draggable from "@/vuedraggable";
 import Vue from "vue";
 import Fake from "./helper/FakeComponent.js"
+import FakeFunctional from "./helper/FakeFunctionalComponent.js"
+
 
 let wrapper;
 let vm;
@@ -190,18 +192,28 @@ describe("draggable.vue when initialized with list", () => {
     expect(wrapper.html()).toEqual(initialRender);
   })
 
-  test.each([
+  describe.each([
     "ul",
     "span",
     "div"
   ])(
-    "renders tag %s as root element",
+    "considering a tag %s",
     (tag) => {
-      wrapper = shallowMount(draggable, {
-        propsData: { tag }
+      beforeEach(() => {
+        wrapper = shallowMount(draggable, {
+          propsData: { tag }
+        });
       });
-      const expectedRegex = new RegExp(`^<${tag}>.*<\/${tag}>$`);
-      expect(wrapper.html()).toMatch(expectedRegex);
+
+      it("renders tag as root element", () => {
+        const expectedRegex = new RegExp(`^<${tag}>.*<\/${tag}>$`);
+        expect(wrapper.html()).toMatch(expectedRegex);
+      })
+
+      it("set noneFunctionalComponentMode to false ", () => {
+        const { noneFunctionalComponentMode } = vm;
+        expect(noneFunctionalComponentMode).toBe(false);
+      })
     }
   )
 
@@ -271,6 +283,26 @@ describe("draggable.vue when initialized with list", () => {
     })
   });
 
+  test.each([
+    [Fake, true],
+    [FakeFunctional, false]
+  ])(
+    "when using component as tag",
+    (component, expectedNoneFunctionalComponentMode) => {
+      wrapper = mount(draggable, {
+        propsData: {
+          tag: "child",
+        },
+        stubs: {
+          child: component
+        }
+      });
+      const { vm: { noneFunctionalComponentMode } } = wrapper;
+      expect(noneFunctionalComponentMode).toBe(expectedNoneFunctionalComponentMode);
+    }
+  )
+
+
   it("keeps a reference to Sortable instance", () => {
     expect(vm._sortable).toBe(SortableFake);
   })