vuedraggable - npm Package Compare versions

Comparing version 2.8.5 to 2.8.6

dist/vuedraggable.js

@@ -43,3 +43,3 @@ 'use strict';
       return function (evtData) {
-        if (_this.list !== null) {
+        if (_this.realList !== null) {
           _this['onDrag' + evtName](evtData);
@@ -65,2 +65,7 @@ }
       },
+      value: {
+        type: Array,
+        required: false,
+        default: null
+      },
       clone: {
@@ -128,2 +133,5 @@ type: Function,
           return !!this.options && this.options.group !== null && this.options.group.pull === 'clone';
+        },
+        realList: function realList() {
+          return !!this.list ? this.list : this.value;
         }
@@ -140,3 +148,3 @@ },
         },
-        list: function list() {
+        realList: function realList() {
           this.computeIndexes();
@@ -160,3 +168,3 @@ }
           var index = computeVmIndex(this.getChildrenNodes(), htmlElt);
-          var element = this.list[index];
+          var element = this.realList[index];
           return { index: index, element: element };
@@ -179,13 +187,28 @@ },
         },
+        alterList: function alterList(onList) {
+          if (!!this.list) {
+            onList(this.list);
+          } else {
+            var newList = [].concat(_toConsumableArray(this.value));
+            onList(newList);
+            this.$emit('input', newList);
+          }
+        },
         spliceList: function spliceList() {
-          var _list;
+          var _arguments = arguments;
 
-          (_list = this.list).splice.apply(_list, arguments);
+          var spliceList = function spliceList(list) {
+            return list.splice.apply(list, _arguments);
+          };
+          this.alterList(spliceList);
         },
         updatePosition: function updatePosition(oldIndex, newIndex) {
-          this.list.splice(newIndex, 0, this.list.splice(oldIndex, 1)[0]);
+          var updatePosition = function updatePosition(list) {
+            return list.splice(newIndex, 0, list.splice(oldIndex, 1)[0]);
+          };
+          this.alterList(updatePosition);
         },
         getRelatedContextFromMoveEvent: function getRelatedContextFromMoveEvent(_ref2) {
-          var to = _ref2.to,
-              related = _ref2.related;
+          var to = _ref2.to;
+          var related = _ref2.related;
 
@@ -196,3 +219,3 @@ var component = this.getUnderlyingPotencialDraggableComponent(to);
           }
-          var list = component.list;
+          var list = component.realList;
           var context = { list: list, component: component };
@@ -260,3 +283,3 @@ if (to !== related && list && component.getUnderlyingVm) {
           var onMove = this.move;
-          if (!onMove || !this.list) {
+          if (!onMove || !this.realList) {
             return true;
@@ -263,0 +286,0 @@ }

package.json

 {
   "name": "vuedraggable",
-  "version": "2.8.5",
+  "version": "2.8.6",
   "description": "draggable component for vue",
@@ -21,3 +21,3 @@ "main": "dist/vuedraggable.js",
   "dependencies": {
-    "sortablejs": "^1.5.0"
+    "sortablejs": "^1.5.1"
   },
@@ -24,0 +24,0 @@ "devDependencies": {

README.md

@@ -39,19 +39,8 @@ <p align="center"><img width="100"src="https://raw.githubusercontent.com/SortableJS/Vue.Draggable/master/logo.png"></p>
 
-Typical use:
+### Typical use:
 ``` html
-<draggable :list="list" :options="{group:'people'}" @start="drag=true" @end="drag=false">
-   <div v-for="element in list">{{element.name}}</div>
+<draggable v-model="myArray" :options="{group:'people'}" @start="drag=true" @end="drag=false">
+   <div v-for="element in myArray">{{element.name}}</div>
 </draggable>
 ```
-
-With `transition-group`:
-``` html
-<draggable :list="list">
-    <transition-group>
-        <div v-for="element in list" :key="element.id">
-            {{element.name}}
-        </div>
-    </transition-group>
-</draggable>
-```
 .vue file:
@@ -68,5 +57,49 @@ ``` js
 
+### With `transition-group`:
+``` html
+<draggable v-model="myArray">
+    <transition-group>
+        <div v-for="element in myArray" :key="element.id">
+            {{element.name}}
+        </div>
+    </transition-group>
+</draggable>
+```
+
+
 Draggable component should directly wrap the draggable elements, or a `transition-component` containing the draggable elements.
 
+
+### With Vuex:
+
+```html
+<draggable v-model='myList'>
+``` 
+
+```javascript
+computed: {
+    myList: {
+        get() {
+            return this.$store.state.myList
+        },
+        set(value) {
+            this.$store.commit('updateList', value)
+        }
+    }
+}
+```
+
+
 ### Props
+#### value
+Type: `Array`<br>
+Required: `false`<br>
+Default: `null`
+
+Input array to draggable component. Typically same array as referenced by inner element v-for directive.<br>
+Should not used directly but used only though the `v-model` directive:
+```html
+<draggable v-model="myArray">
+```
+
 #### list
@@ -77,4 +110,5 @@ Type: `Array`<br>
 
-Array to be synchronized with drag-and-drop. Typically same array as referenced by inner element v-for directive.<br>
-When using children elements not linked to a "v-for" directive, use null.
+Altenative to the `value` prop, list is an array to be synchronized with drag-and-drop.<br>
+The main diference is that `list` prop is updated by draggable component using splice method, whereas `value` is immutable.<br>
+Using `v-model` and `value` is the compatible with Vuex and thus is the preferred way of using draggable.
 
@@ -189,2 +223,6 @@ #### options
 
+### Full demo example
+
+[draggable-example](https://github.com/David-Desmaisons/draggable-example)
+
 ## For Vue.js 1.0
@@ -191,0 +229,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

21859

increased by6.42%

Lines of code

277

increased by9.06%

Number of lines in readme file

258

increased by17.27%

Dependency changes

• Updatedsortablejs@^1.5.1