vuedraggable - npm Package Compare versions

Comparing version 2.13.1 to 2.14.0

dist/vuedraggable.js

@@ -21,7 +21,4 @@ 'use strict';
     function insertNodeAt(fatherNode, node, position) {
-      if (position < fatherNode.children.length) {
-        fatherNode.insertBefore(node, fatherNode.children[position]);
-      } else {
-        fatherNode.appendChild(node);
-      }
+      var refNode = position === 0 ? fatherNode.children[0] : fatherNode.children[position - 1].nextSibling;
+      fatherNode.insertBefore(node, refNode);
     }
@@ -35,3 +32,3 @@
 
-    function _computeIndexes(slots, children) {
+    function _computeIndexes(slots, children, isTransition) {
       if (!slots) {
@@ -44,5 +41,8 @@ return [];
       });
-      return [].concat(_toConsumableArray(children)).map(function (elt) {
+      var rawIndexes = [].concat(_toConsumableArray(children)).map(function (elt) {
         return elmFromNodes.indexOf(elt);
       });
+      return isTransition ? rawIndexes.filter(function (ind) {
+        return ind !== -1;
+      }) : rawIndexes;
     }
@@ -120,4 +120,5 @@
       render: function render(h) {
-        if (this.$slots.default && this.$slots.default.length === 1) {
-          var child = this.$slots.default[0];
+        var slots = this.$slots.default;
+        if (slots && slots.length === 1) {
+          var child = slots[0];
           if (child.componentOptions && child.componentOptions.tag === "transition-group") {
@@ -127,3 +128,9 @@ this.transitionMode = true;
         }
-        return h(this.element, null, this.$slots.default);
+        var children = [].concat(_toConsumableArray(slots));
+        var footer = this.$slots.footer;
+
+        if (footer) {
+          children = [].concat(_toConsumableArray(slots), _toConsumableArray(footer));
+        }
+        return h(this.element, null, children);
       },
@@ -200,7 +207,12 @@ mounted: function mounted() {
           this.$nextTick(function () {
-            _this4.visibleIndexes = _computeIndexes(_this4.getChildrenNodes(), _this4.rootContainer.children);
+            _this4.visibleIndexes = _computeIndexes(_this4.getChildrenNodes(), _this4.rootContainer.children, _this4.transitionMode);
           });
         },
         getUnderlyingVm: function getUnderlyingVm(htmlElt) {
-          var index = computeVmIndex(this.getChildrenNodes(), htmlElt);
+          var index = computeVmIndex(this.getChildrenNodes() || [], htmlElt);
+          if (index === -1) {
+            //Edge case during move callback: related element might be
+            //an element different from collection
+            return null;
+          }
           var element = this.realList[index];
@@ -259,3 +271,5 @@ return { index: index, element: element };
             var destination = component.getUnderlyingVm(related);
-            return _extends(destination, context);
+            if (destination) {
+              return _extends(destination, context);
+            }
           }
@@ -262,0 +276,0 @@

package.json

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

README.md

@@ -67,6 +67,16 @@ <p align="center"><img width="100"src="https://raw.githubusercontent.com/SortableJS/Vue.Draggable/master/logo.png"></p>
 
-
 Draggable component should directly wrap the draggable elements, or a `transition-component` containing the draggable elements.
 
 
+### With footer 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="footer" @click="addPeople">Add</button>
+</draggable>
+```
+
+
 ### With Vuex:
@@ -203,2 +213,16 @@
 
+### Slots
+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.
+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="footer" @click="addPeople">Add</button>
+</draggable>
+```
+
 ### Gotchas
@@ -205,0 +229,0 @@ - Drag operation with empty list:

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

25577

increased by5.46%

Lines of code

337

increased by4.01%

Number of lines in readme file

297

increased by8.79%

No dependency changes