Fix for issue #558 and issue #555

Author: David-Desmaisons

example/components/simple.vue

@@ -30,7 +30,7 @@
         :list="list"
         :disabled="!enabled"
         class="list-group"
-        ghostClass="ghost"
+        ghost-class="ghost"
         @start="dragging = true"
         @end="dragging = false"
       >

example/components/two-list-headerslots.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="row">
+    <div class="col-4">
+      <h3>First draggable with header</h3>
+
+      <draggable :list="list" class="list-group" draggable=".item" group="a">
+        <div
+          class="list-group-item item"
+          v-for="element in list"
+          :key="element.name"
+        >
+          {{ element.name }}
+        </div>
+
+        <div
+          slot="footer"
+          class="btn-group list-group-item"
+          role="group"
+          aria-label="Basic example"
+        >
+          <button class="btn btn-secondary" @click="add">Add</button>
+          <button class="btn btn-secondary" @click="replace">Replace</button>
+        </div>
+      </draggable>
+    </div>
+
+    <div class="col-4">
+      <h3>Second draggable with header</h3>
+
+      <draggable :list="list2" class="list-group" draggable=".item" group="a">
+        <div
+          class="list-group-item item"
+          v-for="element in list2"
+          :key="element.name"
+        >
+          {{ element.name }}
+        </div>
+
+        <div
+          slot="footer"
+          class="btn-group list-group-item"
+          role="group"
+          aria-label="Basic example"
+        >
+          <button class="btn btn-secondary" @click="add">Add</button>
+          <button class="btn btn-secondary" @click="replace">Replace</button>
+        </div>
+      </draggable>
+    </div>
+
+    <rawDisplayer class="col-2" :value="list" title="List" />
+
+    <rawDisplayer class="col-2" :value="list2" title="List2" />
+  </div>
+</template>
+
+<script>
+import draggable from "@/vuedraggable";
+let id = 1;
+export default {
+  name: "headerslots",
+  display: "Two list header slot",
+  order: 13,
+  components: {
+    draggable
+  },
+  data() {
+    return {
+      list: [
+        { name: "John 1", id: 0 },
+        { name: "Joao 2", id: 1 },
+        { name: "Jean 3", id: 2 }
+      ],
+      list2: [{ name: "Jonny 4", id: 3 }, { name: "Guisepe 5", id: 4 }]
+    };
+  },
+  methods: {
+    add: function() {
+      this.list.push({ name: "Juan " + id, id: id++ });
+    },
+    replace: function() {
+      this.list = [{ name: "Edgard", id: id++ }];
+    }
+  }
+};
+</script>
+<style scoped></style>

package.json

@@ -97,7 +97,8 @@
     ],
     "testURL": "http://localhost/",
     "collectCoverageFrom": [
-      "<rootDir>/src/vuedraggable.js"
+      "<rootDir>/src/vuedraggable.js",
+      "<rootDir>/src/util/helper.js"
     ]
   },
   "files": [

src/util/helper.js

@@ -0,0 +1,22 @@
+function getConsole() {
+  if (typeof window !== "undefined") {
+    return window.console;
+  }
+  return global.console;
+}
+const console = getConsole();
+
+function cached(fn) {
+  const cache = Object.create(null);
+  return function cachedFn(str) {
+    const hit = cache[str];
+    return hit || (cache[str] = fn(str));
+  };
+}
+
+const regex = /-(\w)/g;
+const camelize = cached(str =>
+  str.replace(regex, (_, c) => (c ? c.toUpperCase() : ""))
+);
+
+export { console, camelize };

src/vuedraggable.js

@@ -1,13 +1,5 @@
-const Sortable = require("sortablejs");
-
-function getConsole() {
-  if (typeof window !== "undefined") {
-    return window.console;
-  }
-  return global.console;
-}
-
-const console = getConsole();
+import Sortable from "sortablejs";
+import { console, camelize } from "./util/helper";
 
 function buildAttribute(object, propName, value) {
   if (value == undefined) {
@@ -207,7 +199,12 @@ const draggableComponent = {
       optionsAdded["on" + elt] = emit.bind(this, elt);
     });
 
-    const options = Object.assign({}, this.options, this.$attrs, optionsAdded, {
+    const attributes = Object.keys(this.$attrs).reduce((res, key) => {
+      res[camelize(key)] = this.$attrs[key];
+      return res;
+    }, {});
+
+    const options = Object.assign({}, this.options, attributes, optionsAdded, {
       onMove: (evt, originalEvent) => {
         return this.onDragMove(evt, originalEvent);
       }
@@ -272,8 +269,9 @@ const draggableComponent = {
 
     updateOptions(newOptionValue) {
       for (var property in newOptionValue) {
-        if (readonlyProperties.indexOf(property) == -1) {
-          this._sortable.option(property, newOptionValue[property]);
+        const value = camelize(property);
+        if (readonlyProperties.indexOf(value) == -1) {
+          this._sortable.option(value, newOptionValue[property]);
         }
       }
     },

tests/unit/vuedraggable.spec.js

@@ -33,7 +33,8 @@ describe("draggable.vue when initialized with list", () => {
         list: items
       },
       attrs: {
-        sortableOption: "value"
+        sortableOption: "value",
+        "to-be-camelized": true
       },
       slots: {
         default: items.map(item => `<div>${item}</div>`),
@@ -187,7 +188,8 @@ describe("draggable.vue when initialized with list", () => {
     expect(parameters[0]).toBe(element);
     expect(parameters[1]).toMatchObject({
       draggable: ">*",
-      sortableOption: "value"
+      sortableOption: "value",
+      toBeCamelized: true
     });
   })