vuedraggable - npm Package Compare versions

Comparing version 2.6.0-rc0 to 2.7.0-rc0

dist/vuedraggable.js

@@ -25,8 +25,2 @@ 'use strict';
 
-    function updatePosition(collection, oldIndex, newIndex) {
-      if (collection) {
-        collection.splice(newIndex, 0, collection.splice(oldIndex, 1)[0]);
-      }
-    }
-
     function _computeIndexes(slots, children) {
@@ -164,5 +158,19 @@ return !slots ? [] : Array.prototype.map.call(children, function (elt) {
           }
-
           return __vue__.$parent;
         },
+        emitChanges: function emitChanges(evt) {
+          var _this4 = this;
+
+          this.$nextTick(function () {
+            _this4.$emit('change', evt);
+          });
+        },
+        spliceList: function spliceList() {
+          var _list;
+
+          (_list = this.list).splice.apply(_list, arguments);
+        },
+        updatePosition: function updatePosition(oldIndex, newIndex) {
+          this.list.splice(newIndex, 0, this.list.splice(oldIndex, 1)[0]);
+        },
         getRelatedContextFromMoveEvent: function getRelatedContextFromMoveEvent(_ref2) {
@@ -199,4 +207,6 @@ var to = _ref2.to;
           var newIndex = domNewIndex > numberIndexes - 1 ? numberIndexes : indexes[domNewIndex];
-          this.list.splice(newIndex, 0, element);
+          this.spliceList(newIndex, 0, element);
           this.computeIndexes();
+          var added = { element: element, newIndex: newIndex };
+          this.emitChanges({ added: added });
         },
@@ -211,3 +221,5 @@ onDragRemove: function onDragRemove(evt) {
           var oldIndex = this.context.index;
-          this.list.splice(oldIndex, 1);
+          this.spliceList(oldIndex, 1);
+          var removed = { element: this.context.element, oldIndex: oldIndex };
+          this.emitChanges({ removed: removed });
         },
@@ -217,5 +229,7 @@ onDragUpdate: function onDragUpdate(evt) {
           insertNodeAt(evt.from, evt.item, evt.oldIndex);
-          var oldIndexVM = this.context.index;
-          var newIndexVM = this.visibleIndexes[evt.newIndex];
-          updatePosition(this.list, oldIndexVM, newIndexVM);
+          var oldIndex = this.context.index;
+          var newIndex = this.visibleIndexes[evt.newIndex];
+          this.updatePosition(oldIndex, newIndex);
+          var moved = { element: this.context.element, oldIndex: oldIndex, newIndex: newIndex };
+          this.emitChanges({ moved: moved });
         },
@@ -222,0 +236,0 @@ onDragMove: function onDragMove(evt) {

package.json

 {
   "name": "vuedraggable",
-  "version": "2.6.0-rc0",
+  "version": "2.7.0-rc0",
   "description": "draggable component for vue",
@@ -5,0 +5,0 @@ "main": "dist/vuedraggable.js",

README.md

@@ -1,10 +0,11 @@
-# Vue.Draggable
+<p align="center"><img width="100"src="https://raw.githubusercontent.com/SortableJS/Vue.Draggable/master/logo.png"></p>
+<h1 align="center">Vue.Draggable</h1>
 
-
-[![GitHub open issues](https://img.shields.io/github/issues/David-Desmaisons/Vue.Draggable.svg?maxAge=2592000)]()
-[![GitHub closed issues](https://img.shields.io/github/issues-closed/David-Desmaisons/Vue.Draggable.svg?maxAge=2592000)]()
+[![GitHub open issues](https://img.shields.io/github/issues/SortableJS/Vue.Draggable.svg?maxAge=2592000)](https://github.com/SortableJS/Vue.Draggable/issues?q=is%3Aopen+is%3Aissue)
+[![GitHub closed issues](https://img.shields.io/github/issues-closed/SortableJS/Vue.Draggable.svg?maxAge=2592000)](https://github.com/SortableJS/Vue.Draggable/issues?q=is%3Aissue+is%3Aclosed)
 [![Npm download](https://img.shields.io/npm/dt/vuedraggable.svg?maxAge=2592000)](https://www.npmjs.com/package/vuedraggable)
 [![Npm version](https://img.shields.io/npm/v/vuedraggable.svg?maxAge=2592000)](https://www.npmjs.com/package/vuedraggable)
 [![Package Quality](http://npm.packagequality.com/shield/vuedragablefor.svg)](http://packagequality.com/#?package=vuedraggable)
-[![MIT License](https://img.shields.io/github/license/David-Desmaisons/Vue.Draggable.svg)](https://github.com/David-Desmaisons/Vue.Draggable/blob/master/LICENSE)
+[![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/)
+[![MIT License](https://img.shields.io/github/license/SortableJS/Vue.Draggable.svg)](https://github.com/SortableJS/Vue.Draggable/blob/master/LICENSE)
 
@@ -16,21 +17,27 @@
 
-##Demo
+## Demo
 
-![demo gif](https://raw.githubusercontent.com/David-Desmaisons/Vue.Dragable.For/master/example.gif)
+![demo gif](https://raw.githubusercontent.com/SortableJS/Vue.Draggable/master/example.gif)
 
 
-##Features
+## Features
 
-* Full support of [Sortable.js](https://github.com/RubaXa/Sortable) features
-* Keeps in sync view model and view
-* No jquery dependency
-* Plays nicely with Vue.js 2.0 transition-group
+* Full support of [Sortable.js](https://github.com/RubaXa/Sortable) features:
+    * Supports touch devices 
+    * Supports drag handles and selectable text
+    * Smart auto-scrolling
+    * Support drag and drop between different lists
+    * No jQuery dependency
+* Keeps in sync HTML and view model list
+* Compatible with Vue.js 2.0 transition-group
+* Cancelation support
+* Events reporting any changes when full control is needed 
 
-##For Vue.js 2.0
+## For Vue.js 2.0
 
 Use draggable component:
 
-Tipical use:
+Typical use:
 ``` html
-<draggable  :list="list" :options="{group:'people'}" @start="dragging=true" @end="dragging=false">
+<draggable :list="list" :options="{group:'people'}" @start="drag=true" @end="drag=false">
    <div v-for="element in list">{{element.name}}</div>
@@ -50,2 +57,12 @@ </draggable>
 ```
+.vue file:
+``` js
+  import draggable from 'vuedraggable'
+  ...
+  export default {
+        components: {
+            draggable,
+        },
+	...
+``` 
 
@@ -61,3 +78,3 @@ Draggable component should directly wrap the draggable elements, or a `transition-component` containing the draggable elements.
 Array to be synchronized with drag-and-drop. Typically same array as referenced by inner element v-for directive.<br>
-Note that this prop is not required and that draggable component can be used without a list prop.
+When using children elements not linked to a "v-for" directive, use null.
 
@@ -85,8 +102,71 @@ #### options
 
+#### move
+Type: `Function`<br>
+Required: `false`<br>
+Default: `null`<br>
+
+If not null this function will be called in a similar way as [Sortable onMove callback](https://github.com/RubaXa/Sortable#move-event-object).
+Returning false will cancel the drag operation.
+
+```javascript
+function onMoveCallback(evt, originalEvent){
+   ...
+    // return false; — for cancel
+}
+```
+evt object has same property as [Sortable onMove event](https://github.com/RubaXa/Sortable#move-event-object), plus two addicional properties:
+`move event` object addicional properties:
+ - `draggedContext`:  context linked to dragged element
+ 	- `index`: dragged element index
+	- `element`: dragged element underlying view model element
+ - `relatedContext`: context linked to current drag position
+ 	- `index`: target element index
+	- `element`: target element view model element
+	- `list`: target list
+	- `component`: target VueComponent
+
+HTML:
+```HTML
+	<draggable :list="list" :move="checkMove"> 
+```
+javascript:
+```javascript
+checkMove: function(evt){
+	return (evt.draggedContext.element.name!=='apple');
+}
+```
+See complete example: [Cancel.html](https://github.com/SortableJS/Vue.Draggable/blob/master/examples/Cancel.html), [cancel.js](https://github.com/SortableJS/Vue.Draggable/blob/master/examples/script/cancel.js)
+
+
 ### Events
-`start`, `add`, `remove`, `update`, `end`, `choose`, `sort`, `filter`, `move`, `clone`<br>
-Called when there equivalent onStart, onAdd, .... are fired by Sortabe.js with the same argument.<br>
-[See here for reference](https://github.com/RubaXa/Sortable#event-object-demo)
 
-###Fiddle
+* Support for Sortable events:
+
+  `start`, `add`, `remove`, `update`, `end`, `choose`, `sort`, `filter`, `clone`<br>
+  events are called when respectivelly onStart, onAdd, onRemove, onUpdate, onEnd, onChoose, onSort, onClone are fired by Sortabe.js with the same argument.<br>
+  [See here for reference](https://github.com/RubaXa/Sortable#event-object-demo)
+
+  Note that SortableJS OnMove callback is mapped with the [move prop](https://github.com/SortableJS/Vue.Draggable/blob/master/README.md#move)
+
+HTML:
+```HTML
+	<draggable :list="list" @end="onEnd"> 
+```
+
+* change event
+
+  `change` event is trigerred when list prop is not null and the corresponding array is altered due to drag-and-drop operation.<br>
+  This event is called with one argument containing one of the following properties:
+  - `added`:  contains information of an element added to the array
+    - `newIndex`: the index of the added element
+    - `element`: the added element
+  - `removed`:  contains information of an element removed from to the array
+    - `oldIndex`: the index of the element before remove
+    - `element`: the removed element
+  - `moved`:  contains information of an element moved within the array
+    - `newIndex`: the current index of the moved element
+    - `oldIndex`: the old index of the moved element
+    - `element`: the moved element
+
+### Fiddle
 Simple:
@@ -104,33 +184,6 @@ https://jsfiddle.net/dede89/sqssmhtz/
 
-##For Vue.js 1.0
+## For Vue.js 1.0
 
-Use it exactly as v-for directive, passing optional parameters using 'options' parameter.
-Options parameter can be json string or a full javascript object.
+[See here](documentation/Vue.draggable.for.ReadME.md)
 
-  ``` html
-  <div v-dragable-for="element in list1" options='{"group":"people"}'>
-    <p>{{element.name}}</p>
-  </div>
-   ```
-   
-###Limitation
-
-* This directive works only when applied to arrays and not to objects.
-* `onStart`, `onUpdate`, `onAdd`, `onRemove` Sortable.js options hooks are used by v-dragable-for to update VM. As such these four options are not usable with v-dragable-for. If you need to listen to re-order events, you can watch the underlying view model collection. For example:
-``` js
-        watch: {
-            'list1': function () {
-                console.log('Collection updated!');
-            },
-```
-###fiddle
-Simple:
-https://jsfiddle.net/dede89/j62g58z7/
-
-Two Lists:
-https://jsfiddle.net/dede89/hqxranrd/
-
-Example with list clone:
-https://jsfiddle.net/dede89/u5ecgtsj/
-
 ## Installation
@@ -145,5 +198,2 @@ - Available through:
 
-Version 1.0.9 is Vue.js 1.0 compatible <br>
-Version 2.0.2 is Vue.js 2.0 compatible 
-
 - #### For Modules
@@ -163,12 +213,2 @@
   
-  //For Vue.js 1.0 only
-  import VueDraggable from 'vuedraggable'
-  import Vue from 'vue'
-  Vue.use(VueDraggable)
-
-  // ES5 
-  //For Vue.js 1.0
-  var Vue = require('vue')
-  Vue.use(require('vuedraggable'))
-  
   //For Vue.js 2.0
@@ -181,2 +221,1 @@ var draggable = require('vuedraggable')
   Just include `vuedraggable.min.js` or 'vue.dragable.for' after Vue.<br>
-  lodash(version >=3) is needed only for Vuejs. 1.0 version of the library.

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

18527

increased by15.64%

Lines of code

233

increased by6.39%

Number of lines in readme file

214

increased by22.29%

No dependency changes