Using atttrs for options

David-Desmaisons · David-Desmaisons · commit 69cf8c4d3350 · 2019-02-26T18:52:10.000-03:00
diff --git a/example/components/clone.vue b/example/components/clone.vue
@@ -5,7 +5,7 @@
       <draggable
         class="dragArea list-group"
         :list="list1"
-        :options="{ group: { name: 'people', pull: 'clone', put: false } }"
+        :group="{ name: 'people', pull: 'clone', put: false }"
         @change="log"
       >
         <div
@@ -23,7 +23,7 @@
       <draggable
         class="dragArea list-group"
         :list="list2"
-        :options="{ group: 'people' }"
+        group="people"
         @change="log"
       >
         <div
diff --git a/example/components/custom-clone.vue b/example/components/custom-clone.vue
@@ -5,7 +5,7 @@
       <draggable
         class="dragArea list-group"
         :list="list1"
-        :options="{ group: { name: 'people', pull: 'clone', put: false } }"
+        :group="{ name: 'people', pull: 'clone', put: false }"
         :clone="cloneDog"
         @change="log"
       >
@@ -20,7 +20,7 @@
       <draggable
         class="dragArea list-group"
         :list="list2"
-        :options="{ group: 'people' }"
+        group="people"
         @change="log"
       >
         <div class="list-group-item" v-for="element in list2" :key="element.id">
diff --git a/example/components/footerslot.vue b/example/components/footerslot.vue
@@ -6,7 +6,7 @@
       <draggable
         :list="list"
         class="list-group"
-        :options="{ draggable: '.item' }"
+        draggable=".item"
         @start="dragging = true"
         @end="dragging = false"
       >
diff --git a/example/components/handle.vue b/example/components/handle.vue
@@ -11,7 +11,7 @@
         element="ul"
         :list="list"
         class="list-group"
-        :options="{ handle: '.handle' }"
+        handle=".handle"
       >
         <li
           class="list-group-item"
diff --git a/example/components/headerslot.vue b/example/components/headerslot.vue
@@ -6,7 +6,7 @@
       <draggable
         :list="list"
         class="list-group"
-        :options="{ draggable: '.item' }"
+        draggable=".item"
         @start="dragging = true"
         @end="dragging = false"
       >
diff --git a/example/components/infra/nested.vue b/example/components/infra/nested.vue
@@ -1,13 +1,8 @@
 <template>
-  <draggable
-    class="dragArea"
-    :element="'ul'"
-    :list="tasks"
-    :options="{ group: { name: 'g1' } }"
-  >
+  <draggable class="dragArea" :element="'ul'" :list="tasks" :group="{ name: 'g1' }">
     <li v-for="el in tasks" :key="el.name">
       <p>{{ el.name }}</p>
-      <nested-draggable :tasks="el.tasks" />
+      <nested-draggable :tasks="el.tasks"/>
     </li>
   </draggable>
 </template>
diff --git a/example/components/simple.vue b/example/components/simple.vue
@@ -1,13 +1,25 @@
 <template>
   <div class="row">
     <div class="col-2">
-      <div
-        class="btn-group-vertical buttons"
-        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 class="form-group">
+        <div
+          class="btn-group-vertical buttons"
+          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>
+
+        <div class="form-check">
+          <input
+            id="disabled"
+            type="checkbox"
+            v-model="disabled"
+            class="form-check-input"
+          />
+          <label class="form-check-label" for="disabled">Disable DnD</label>
+        </div>
       </div>
     </div>
 
@@ -16,6 +28,7 @@
 
       <draggable
         :list="list"
+        :disabled="disabled"
         class="list-group"
         @start="dragging = true"
         @end="dragging = false"
@@ -46,6 +59,7 @@ export default {
   },
   data() {
     return {
+      disabled: false,
       list: [
         { name: "John", id: 0 },
         { name: "Joao", id: 1 },
diff --git a/example/components/table-column-example..vue b/example/components/table-column-example..vue
@@ -6,20 +6,20 @@
       <table class="table table-striped">
         <thead class="thead-dark">
           <draggable v-model="headers" element="tr">
-            <th v-for="header in headers" :key="header" scope="col">
-              {{ header }}
-            </th>
+            <th v-for="header in headers" :key="header" scope="col">{{ header }}</th>
           </draggable>
         </thead>
-        <tr v-for="item in list" :key="item.name">
-          <td v-for="header in headers" :key="header">{{ item[header] }}</td>
-        </tr>
+        <tbody>
+          <tr v-for="item in list" :key="item.name">
+            <td v-for="header in headers" :key="header">{{ item[header] }}</td>
+          </tr>
+        </tbody>
       </table>
     </div>
 
-    <rawDisplayer class="col-2" :value="list" title="List" />
+    <rawDisplayer class="col-2" :value="list" title="List"/>
 
-    <rawDisplayer class="col-2" :value="headers" title="Headers" />
+    <rawDisplayer class="col-2" :value="headers" title="Headers"/>
   </div>
 </template>
 
diff --git a/example/components/transition-example-2.vue b/example/components/transition-example-2.vue
@@ -12,7 +12,7 @@
         class="list-group"
         element="ul"
         v-model="list"
-        :options="dragOptions"
+        v-bind="dragOptions"
         @start="drag = true"
         @end="drag = false"
       >
diff --git a/example/components/transition-example.vue b/example/components/transition-example.vue
@@ -12,7 +12,7 @@
         class="list-group"
         element="ul"
         v-model="list"
-        :options="dragOptions"
+        v-bind="dragOptions"
         @start="isDragging = true"
         @end="isDragging = false"
       >
diff --git a/example/components/two-lists.vue b/example/components/two-lists.vue
@@ -2,12 +2,7 @@
   <div class="row">
     <div class="col-3">
       <h3>Draggable 1</h3>
-      <draggable
-        class="list-group"
-        :list="list1"
-        :options="{ group: 'people' }"
-        @change="log"
-      >
+      <draggable class="list-group" :list="list1" group="people" @change="log">
         <div
           class="list-group-item"
           v-for="(element, index) in list1"
@@ -20,12 +15,7 @@
 
     <div class="col-3">
       <h3>Draggable 2</h3>
-      <draggable
-        class="list-group"
-        :list="list2"
-        :options="{ group: 'people' }"
-        @change="log"
-      >
+      <draggable class="list-group" :list="list2" group="people" @change="log">
         <div
           class="list-group-item"
           v-for="(element, index) in list2"
diff --git a/src/vuedraggable.js b/src/vuedraggable.js
@@ -1,5 +1,14 @@
 const Sortable = require("sortablejs");
 
+function getConsole() {
+  if (typeof window !== "undefined") {
+    return window.console;
+  }
+  return global.console;
+}
+
+const console = getConsole();
+
 function buildAttribute(object, propName, value) {
   if (value == undefined) {
     return object;
@@ -51,6 +60,9 @@ function delegateAndEmit(evtName) {
 }
 
 function groupIsClone(group) {
+  if (!group) {
+    return false;
+  }
   const { pull } = group;
   if (typeof pull === "function") {
     return pull() === "clone";
@@ -105,6 +117,8 @@ const props = {
 const draggableComponent = {
   name: "draggable",
 
+  inheritAttrs: true,
+
   props,
 
   data() {
@@ -144,7 +158,6 @@ const draggableComponent = {
     const update = (name, value) => {
       attributes = buildAttribute(attributes, name, value);
     };
-    update("attrs", this.$attrs);
     if (this.componentData) {
       const { on, props } = this.componentData;
       update("on", on);
@@ -153,6 +166,20 @@ const draggableComponent = {
     return h(this.element, attributes, children);
   },
 
+  created() {
+    if (this.list !== null && this.value !== null) {
+      console.error(
+        "Value and list props are mutually exclusive! Please set one or another"
+      );
+    }
+
+    if (this.options !== undefined) {
+      console.warn(
+        "Options props is deprecated, add sortable options directly as vue.draggable item, or use v-bind."
+      );
+    }
+  },
+
   mounted() {
     this.noneFunctionalComponentMode =
       this.element.toLowerCase() !== this.$el.nodeName.toLowerCase();
@@ -172,11 +199,17 @@ const draggableComponent = {
       optionsAdded["on" + elt] = emit.bind(this, elt);
     });
 
-    const options = Object.assign({}, this.options, optionsAdded, {
-      onMove: (evt, originalEvent) => {
-        return this.onDragMove(evt, originalEvent);
+    const options = Object.assign(
+      {},
+      this.options,
+      this.$attrs,
+      optionsAdded,
+      {
+        onMove: (evt, originalEvent) => {
+          return this.onDragMove(evt, originalEvent);
+        }
       }
-    });
+    );
     !("draggable" in options) && (options.draggable = ">*");
     this._sortable = new Sortable(this.rootContainer, options);
     this.computeIndexes();
@@ -199,11 +232,14 @@ const draggableComponent = {
   watch: {
     options: {
       handler(newOptionValue) {
-        for (var property in newOptionValue) {
-          if (readonlyProperties.indexOf(property) == -1) {
-            this._sortable.option(property, newOptionValue[property]);
-          }
-        }
+        this.updateOptions(newOptionValue);
+      },
+      deep: true
+    },
+
+    $attrs: {
+      handler(newOptionValue) {
+        this.updateOptions(newOptionValue);
       },
       deep: true
     },
@@ -215,11 +251,25 @@ const draggableComponent = {
 
   methods: {
     getIsCloning() {
-      return (
-        !!this.options &&
-        !!this.options.group &&
-        groupIsClone(this.options.group)
-      );
+      const { group } = this.$attrs;
+      const groupConsideringOption = group || this.getOptionGroup();
+      return groupIsClone(groupConsideringOption);
+    },
+
+    getOptionGroup() {
+      const { options } = this;
+      if (!options) {
+        return undefined;
+      }
+      return options.group;
+    },
+
+    updateOptions(newOptionValue) {
+      for (var property in newOptionValue) {
+        if (readonlyProperties.indexOf(property) == -1) {
+          this._sortable.option(property, newOptionValue[property]);
+        }
+      }
     },
 
     getChildrenNodes() {

Original file line number	Diff line number	Diff line change
`@@ -6,7 +6,7 @@`
`6`	`6`	`<draggable`
`7`	`7`	`:list="list"`
`8`	`8`	`class="list-group"`
`9`		`- :options="{ draggable: '.item' }"`
	`9`	`+ draggable=".item"`
`10`	`10`	`@start="dragging = true"`
`11`	`11`	`@end="dragging = false"`
`12`	`12`	`>`
Original file line number	Diff line number	Diff line change
`@@ -11,7 +11,7 @@`
`11`	`11`	`element="ul"`
`12`	`12`	`:list="list"`
`13`	`13`	`class="list-group"`
`14`		`- :options="{ handle: '.handle' }"`
	`14`	`+ handle=".handle"`
`15`	`15`	`>`
`16`	`16`	`<li`
`17`	`17`	`class="list-group-item"`
Original file line number	Diff line number	Diff line change
`@@ -12,7 +12,7 @@`
`12`	`12`	`class="list-group"`
`13`	`13`	`element="ul"`
`14`	`14`	`v-model="list"`
`15`		`- :options="dragOptions"`
	`15`	`+ v-bind="dragOptions"`
`16`	`16`	`@start="drag = true"`
`17`	`17`	`@end="drag = false"`
`18`	`18`	`>`