vuedraggable - npm Package Compare versions

Comparing version 2.16.0 to 2.17.0

dist/vuedraggable.js

 'use strict';
 
+var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
+
 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
@@ -140,8 +142,16 @@
         }
+        var headerOffset = 0;
         var children = slots;
-        var footer = this.$slots.footer;
+        var _$slots = this.$slots,
+            header = _$slots.header,
+            footer = _$slots.footer;
 
+        if (header) {
+          headerOffset = header.length;
+          children = children ? [].concat(_toConsumableArray(header), _toConsumableArray(children)) : [].concat(_toConsumableArray(header));
+        }
         if (footer) {
-          children = slots ? [].concat(_toConsumableArray(slots), _toConsumableArray(footer)) : [].concat(_toConsumableArray(footer));
+          children = children ? [].concat(_toConsumableArray(children), _toConsumableArray(footer)) : [].concat(_toConsumableArray(footer));
         }
+        this.headerOffset = headerOffset;
         var attributes = null;
@@ -186,3 +196,3 @@ var update = function update(name, value) {
       beforeDestroy: function beforeDestroy() {
-        this._sortable.destroy();
+        if (this._sortable !== undefined) this._sortable.destroy();
       },
@@ -332,2 +342,3 @@
         onDragAdd: function onDragAdd(evt) {
+          this.updateEvenemt(evt);
           var element = evt.item._underlying_vm_;
@@ -345,2 +356,3 @@ if (element === undefined) {
         onDragRemove: function onDragRemove(evt) {
+          this.updateEvenemt(evt);
           insertNodeAt(this.rootContainer, evt.item, evt.oldIndex);
@@ -358,2 +370,3 @@ if (this.isCloning) {
         onDragUpdate: function onDragUpdate(evt) {
+          this.updateEvenemt(evt);
           removeNode(evt.item);
@@ -367,2 +380,9 @@ insertNodeAt(evt.from, evt.item, evt.oldIndex);
         },
+        updateEvenemt: function updateEvenemt(evt) {
+          this.updateProperty(evt, 'newIndex');
+          this.updateProperty(evt, 'oldIndex');
+        },
+        updateProperty: function updateProperty(evt, propertyName) {
+          evt.hasOwnProperty(propertyName) && (evt[propertyName] += this.headerOffset);
+        },
         computeFutureIndex: function computeFutureIndex(relatedContext, evt) {
@@ -369,0 +389,0 @@ if (!relatedContext.element) {

package.json

 {
   "name": "vuedraggable",
-  "version": "2.16.0",
+  "version": "2.17.0",
   "description": "draggable component for vue",
@@ -30,7 +30,7 @@ "main": "dist/vuedraggable.js",
     "babel-preset-es2015": "^6.16.0",
-    "bower": "^1.7.9",
-    "connect": "^3.4.1",
+    "bower": "^1.8.4",
+    "connect": "^3.6.6",
     "connect-livereload": "^0.5.4",
     "gulp": "^3.9.1",
-    "gulp-babel": "^6.1.2",
+    "gulp-babel": "^6.1.3",
     "gulp-clean": "^0.3.2",
@@ -40,16 +40,16 @@ "gulp-filter": "^4.0.0",
     "gulp-jasmine": "^2.4.0",
-    "gulp-jshint": "^2.0.1",
+    "gulp-jshint": "^2.1.0",
     "gulp-livereload": "^3.8.1",
     "gulp-load-plugins": "^1.2.4",
-    "gulp-main-bower-files": "^1.5.2",
-    "gulp-rename": "^1.2.2",
+    "gulp-main-bower-files": "^1.6.3",
+    "gulp-rename": "^1.4.0",
     "gulp-size": "^2.1.0",
     "gulp-uglify": "^1.5.4",
-    "gulp-useref": "^3.1.0",
+    "gulp-useref": "^3.1.6",
     "jasmine-istanbul-phantom": "^1.1.1",
-    "jshint": "^2.9.2",
+    "jshint": "^2.9.6",
     "jshint-stylish": "^2.2.0",
     "opn": "^4.0.2",
     "serve-index": "^1.8.0",
-    "serve-static": "^1.11.1"
+    "serve-static": "^1.13.2"
   },
@@ -56,0 +56,0 @@ "scripts": {

README.md

@@ -1,2 +0,2 @@
-<p align="center"><img width="100"src="https://raw.githubusercontent.com/SortableJS/Vue.Draggable/master/logo.png"></p>
+<p align="center"><img width="140"src="https://raw.githubusercontent.com/SortableJS/Vue.Draggable/master/logo.png"></p>
 <h1 align="center">Vue.Draggable</h1>
@@ -21,3 +21,6 @@
 
+## Live Demo
 
+https://david-desmaisons.github.io/draggable-example/
+
 ## Features
@@ -35,3 +38,37 @@
 * Events reporting any changes when full control is needed
+* Reuse existing UI library components (such as [vuetify](https://vuetifyjs.com), [element](http://element.eleme.io/), or [vue material](https://vuematerial.io) etc...) and make them draggable using `element` and `componentData` props
 
+## Backers
+
+ <a href="https://flatlogic.com/admin-dashboards">
+ <img width="190" style="margin-top: 10px;" src="https://flatlogic.com/assets/logo-d9e7751df5fddd11c911945a75b56bf72bcfe809a7f6dca0e32d7b407eacedae.svg">
+ </a>
+
+Admin Dashboard Templates made with Vue, React and Angular.
+
+## Installation
+
+### With npm or yarn 
+
+```bash
+yarn add vuedraggable
+
+npm i -S vuedraggable
+```
+
+**Beware it is vuedraggable for Vue 2.0 and not vue-draggable which is for version 1.0**
+
+### with direct link 
+```html
+
+<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
+<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
+<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
+<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
+<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.15.0/vuedraggable.min.js"></script>
+
+```
+
+[cf example section](https://github.com/SortableJS/Vue.Draggable/tree/master/examples)
+
 ## For Vue.js 2.0
@@ -81,4 +118,12 @@
 ```
+### With header slot:
+``` html
+<draggable v-model="myArray" :options="{draggable:'.item'}">
+    <div v-for="element in myArray" :key="element.id" class="item">
+        {{element.name}}
+    </div>
+    <button slot="header" @click="addPeople">Add</button>
+</draggable>
+```
 
-
 ### With Vuex:
@@ -122,4 +167,4 @@
 
-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>
+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.**
@@ -134,2 +179,4 @@
 
+As an example, a drag handle can be added using this binding `:options="{handle:'.handle'}"`. Read the linked documentation for other options available to you.
+
 #### element
@@ -141,3 +188,3 @@ Type: `String`<br>
 It is also possible to pass the name of vue component as element. In this case, draggable attribute will be passed to the create component.<br>
-See also [componentData](#componentData) if you need to set props or event to the created component.
+See also [componentData](#componentdata) if you need to set props or event to the created component.
 
@@ -260,5 +307,22 @@ #### clone
 ### Slots
+
+#### Header
+Use the `header` slot to add none-draggable element inside the vuedraggable component.
+Important: it should be used in conjunction with draggable option to tag draggable element.
+Note that header slot will always be added before the default slot regardless its position in the template.
+Ex:
+
+``` html
+<draggable v-model="myArray" :options="{draggable:'.item'}">
+    <div v-for="element in myArray" :key="element.id" class="item">
+        {{element.name}}
+    </div>
+    <button slot="header" @click="addPeople">Add</button>
+</draggable>
+```
+
+#### Footer
 Use the `footer` slot to add none-draggable element inside the vuedraggable component.
 Important: it should be used in conjunction with draggable option to tag draggable element.
-Note that footer slot will always be added after the default slot.
+Note that footer slot will always be added after the default slot regardless its position in the template.
 Ex:
@@ -297,3 +361,7 @@
 
-### Full demo example
+- Example with remove button
+ on list elements
+ https://jsfiddle.net/dede89/5Leuhh1n/
+ 
+ ### Full demo example
 
@@ -306,42 +374,2 @@ [draggable-example](https://github.com/David-Desmaisons/draggable-example)
 
-## Installation
-- Available through:
-``` js
- npm install vuedraggable
 ```
-``` js
- Bower install vue.draggable
-```
-
-- #### For Modules
-
-  ``` js
-  // ES6
-  //For Vue.js 2.0
-  import draggable from 'vuedraggable'
-  ...
-  export default {
-        components: {
-            draggable,
-            ...
-        }
-        ...
-
-  //For Vue.js 2.0
-  var draggable = require('vuedraggable')
-  ```
-
-- #### For `<script>` Include
-
-```HTML
-
-<!-- CDNJS :: Vue (https://cdnjs.com/) -->
-<script src="//cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.min.js"></script>
-
-<!-- CDNJS :: Sortable (https://cdnjs.com/) -->
-<script src="//cdn.jsdelivr.net/npm/sortablejs@1.7.0/Sortable.min.js"></script>
-
-<!-- CDNJS :: Vue.Draggable (https://cdnjs.com/) -->
-<script src="//cdnjs.cloudflare.com/ajax/libs/Vue.Draggable/2.15.0/vuedraggable.min.js"></script>
-
-```

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

31092

increased by11.1%

Lines of code

386

increased by5.18%

Number of lines in readme file

367

increased by8.26%

No dependency changes