Use same convention as vue for componentdata

Author: David-Desmaisons

README.md

@@ -11,7 +11,7 @@
 [![MIT License](https://img.shields.io/github/license/SortableJS/Vue.Draggable.svg)](https://github.com/SortableJS/Vue.Draggable/blob/master/LICENSE)
 
 
-Vue component (Vue.js 2.0) or directive (Vue.js 1.0) allowing drag-and-drop and synchronization with view model array.
+Vue component (Vue.js 2.0 and vue 3) or directive (Vue.js 1.0) allowing drag-and-drop and synchronization with view model array.
 
 Based on and offering all features of [Sortable.js](https://github.com/RubaXa/Sortable)
 
@@ -121,7 +121,9 @@ Draggable component should directly wrap the draggable elements, or a `transitio
     <div v-for="element in myArray" :key="element.id" class="item">
         {{element.name}}
     </div>
-    <button slot="footer" @click="addPeople">Add</button>
+    <template slot="footer">
+      <button @click="addPeople">Add</button>
+    </template>
 </draggable>
 ```
 ### With header slot:
@@ -130,7 +132,9 @@ Draggable component should directly wrap the draggable elements, or a `transitio
     <div v-for="element in myArray" :key="element.id" class="item">
         {{element.name}}
     </div>
-    <button slot="header" @click="addPeople">Add</button>
+    <template slot="header">
+      <button @click="addPeople">Add</button>
+    </template>
 </draggable>
 ```
 
@@ -155,7 +159,7 @@ computed: {
 
 
 ### Props
-#### value
+#### modelValue
 Type: `Array`<br>
 Required: `false`<br>
 Default: `null`
@@ -172,9 +176,9 @@ Type: `Array`<br>
 Required: `false`<br>
 Default: `null`
 
-Alternative to the `value` prop, list is an array to be synchronized with drag-and-drop.<br>
-The main difference is that `list` prop is updated by draggable component using splice method, whereas `value` is immutable.<br>
-**Do not use in conjunction with value prop.**
+Alternative to the `modelValue` prop, list is an array to be synchronized with drag-and-drop.<br>
+The main difference is that `list` prop is updated by draggable component using splice method, whereas `modelValue` is immutable.<br>
+**Do not use in conjunction with modelValue prop.**
 
 #### All sortable options
 New in version 2.19
@@ -258,10 +262,7 @@ Required: `false`<br>
 Default: `null`<br>
 
 This props is used to pass additional information to child component declared by [tag props](#tag).<br>
-Value:
-* `props`: props to be passed to the child component
-* `attrs`: attrs to be passed to the child component
-* `on`: events to be subscribe in the child component
+Value: an object corresponding to the attributes, props and events we would pass to the component.
 
 Example (using [element UI library](http://element.eleme.io/#/en-US)):
 ```HTML
@@ -281,16 +282,10 @@ methods: {
     },
     getComponentData() {
       return {
-        on: {
-          change: this.handleChange,
-          input: this.inputChanged
-        },
-        attrs:{
-          wrap: true
-        },
-        props: {
-          value: this.activeNames
-        }
+        onChange: this.handleChange,
+        onInput: this.inputChanged,
+        wrap: true,
+        value: this.activeNames
       };
     }
   }
@@ -341,7 +336,9 @@ Ex:
     <div v-for="element in myArray" :key="element.id" class="item">
         {{element.name}}
     </div>
-    <button slot="header" @click="addPeople">Add</button>
+    <template slot="header">
+      <button @click="addPeople">Add</button>
+    </template>
 </draggable>
 ```
 
@@ -356,15 +353,17 @@ Ex:
     <div v-for="element in myArray" :key="element.id" class="item">
         {{element.name}}
     </div>
-    <button slot="footer" @click="addPeople">Add</button>
+    <template slot="footer">
+      <button @click="addPeople">Add</button>
+    </template>
 </draggable>
 ```
  ### Gotchas
  
- - Vue.draggable children should always map the list or value prop using a v-for directive
+ - Vue.draggable children should always map the list or modelValue prop using a v-for directive
    * You may use [header](https://github.com/SortableJS/Vue.Draggable#header) and [footer](https://github.com/SortableJS/Vue.Draggable#footer) slot to by-pass this limitation.
  
- - Children elements inside v-for should be keyed as any element in Vue.js. Be carefull to provide revelant key values in particular:
+ - Children elements inside v-for should be keyed as any element in Vue.js. Be careful to provide relevant key values in particular:
     * typically providing array index as keys won't work as key should be linked to the items content
     * cloned elements should provide updated keys, it is doable using the [clone props](#clone) for example
 

example/components/third-party.vue

@@ -80,12 +80,8 @@ export default {
       ],
       activeNames,
       collapseComponentData: {
-        on: {
-          "update:modelValue": this.inputChanged
-        },
-        props: {
-          modelValue: activeNames
-        }
+        "onUpdate:modelValue": this.inputChanged,
+        modelValue: activeNames
       }
     };
   },

src/core/componentBuilderHelper.js

@@ -9,21 +9,13 @@ function project(entries) {
   }, {});
 }
 
-function getComponentAttributes({ $attrs, componentData }) {
+function getComponentAttributes({ $attrs, componentData = {} }) {
   const attributes = project(
     Object.entries($attrs).filter(([key, _]) => isHtmlAttribute(key))
   );
-  if (!componentData) {
-    return attributes;
-  }
-  const { on, props, attrs } = componentData;
-  Object.entries(on || {}).forEach(([key, value]) => {
-    attributes[`on${capitalize(key)}`] = value;
-  });
   return {
     ...attributes,
-    ...attrs,
-    ...props
+    ...componentData
   };
 }
 

tests/unit/core/componentBuilderHelper.spec.js

@@ -12,42 +12,36 @@ describe("getComponentAttributes", () => {
       {
         $attrs: {},
         componentData: {
-          attrs: {
-            value: 89,
-          },
-        },
+          value: 89
+        }
       },
       {
-        value: 89,
-      },
+        value: 89
+      }
     ],
     [
       {
         $attrs: {},
         componentData: {
-          props: {
-            prop1: "value",
-          },
-          attrs: {
-            value: 89,
-          },
-        },
+          prop1: "value",
+          value: 89
+        }
       },
       {
         value: 89,
-        prop1: "value",
-      },
+        prop1: "value"
+      }
     ],
     [
       {
         $attrs: {
           id: "value",
-          value: 89,
+          value: 89
         }
       },
       {
-        id: "value",
-      },
+        id: "value"
+      }
     ],
     [
       {
@@ -56,37 +50,19 @@ describe("getComponentAttributes", () => {
           id: 68,
           "data-application": "app",
           class: "my-class",
-          other: "will be filtered",
+          other: "will be filtered"
         },
         componentData: {
-          attrs: {
-            value: 89,
-          },
-        },
+          value: 89
+        }
       },
       {
         id: 68,
         class: "my-class",
         "data-application": "app",
-        value: 89,
-      },
-    ],
-    [
-      {
-        $attrs: {
-        },
-        componentData: {
-          on: {
-            value: 89,
-            input: 66
-          },
-        },
-      },
-      {
-        onValue: 89,
-        onInput: 66
-      },
-    ],
+        value: 89
+      }
+    ]
   ])("for %o returns %o", (value, expected) => {
     const actual = getComponentAttributes(value);
     expect(actual).toEqual(expected);
@@ -101,41 +77,41 @@ describe("createSortableOption", () => {
     [
       {
         $attrs: { id: "id", class: "class", "data-app": "app" },
-        callBackBuilder: {},
+        callBackBuilder: {}
       },
-      { draggable: ">*" },
+      { draggable: ">*" }
     ],
     [
       {
         $attrs: { value: "43" },
-        callBackBuilder: {},
+        callBackBuilder: {}
       },
-      { value: "43", draggable: ">*" },
+      { value: "43", draggable: ">*" }
     ],
     [
       {
         $attrs: {
           value: "43",
           "ghost-class": "phantom",
-          draggable: ".draggable",
+          draggable: ".draggable"
         },
-        callBackBuilder: {},
+        callBackBuilder: {}
       },
       {
         value: "43",
         ghostClass: "phantom",
-        draggable: ".draggable",
-      },
+        draggable: ".draggable"
+      }
     ],
     [
       {
         $attrs: {
           value: "7",
-          draggable: ".draggable",
+          draggable: ".draggable"
         },
         callBackBuilder: {
           emit: eventName => eventName
-        },
+        }
       },
       {
         value: "7",
@@ -144,19 +120,19 @@ describe("createSortableOption", () => {
         onClone: "Clone",
         onFilter: "Filter",
         onSort: "Sort",
-        onUnchoose: "Unchoose",
-      },
+        onUnchoose: "Unchoose"
+      }
     ],
     [
       {
         $attrs: {
-          property: "property",
+          property: "property"
         },
         callBackBuilder: {
           emit: eventName => `emit-${eventName}`,
           manage: eventName => `manage-${eventName}`,
           manageAndEmit: eventName => `manageAndEmit-${eventName}`
-        },
+        }
       },
       {
         property: "property",
@@ -171,25 +147,24 @@ describe("createSortableOption", () => {
         onEnd: "manageAndEmit-End",
         onStart: "manageAndEmit-Start",
         onRemove: "manageAndEmit-Remove",
-        onUpdate: "manageAndEmit-Update",
-      },
-    ],
+        onUpdate: "manageAndEmit-Update"
+      }
+    ]
   ])("for %o returns %o", (value, expected) => {
     const actual = createSortableOption(value);
     expect(actual).toEqual(expected);
   });
 });
 
-describe("getValidSortableEntries", () =>{
+describe("getValidSortableEntries", () => {
   test.each([
-    [{newValue: 1}, [["newValue", 1]]],
-    [{onStart: 1}, []],
-    [{onStart: 1, newValue: 11}, [["newValue", 11]]],
-    [{onStart: 1, id: "newId", attribute: "yes"}, [["attribute",  "yes"]]],
-    [{onStart: 1, "data-bind": "value", boolean: true}, [["boolean", true]]]
-  ])
-  ("for %o returns %o", (value, expected) => {
+    [{ newValue: 1 }, [["newValue", 1]]],
+    [{ onStart: 1 }, []],
+    [{ onStart: 1, newValue: 11 }, [["newValue", 11]]],
+    [{ onStart: 1, id: "newId", attribute: "yes" }, [["attribute", "yes"]]],
+    [{ onStart: 1, "data-bind": "value", boolean: true }, [["boolean", true]]]
+  ])("for %o returns %o", (value, expected) => {
     const actual = getValidSortableEntries(value);
     expect(actual).toEqual(expected);
   });
-})
+});

tests/unit/helper/DraggableWithComponent.vue

@@ -1,9 +1,5 @@
 <template>
-  <draggable
-    :list="array"
-    tag="fake"
-    :component-data="{ props: { prop1: 'my-id' } }"
-  >
+  <draggable :list="array" tag="fake" :component-data="{ prop1: 'my-id' }">
     <div v-for="item in array" :key="item">{{ item }}</div>
   </draggable>
 </template>