implemented jbaysolutions#34, 2.1.5 release

Author: gmsa

CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 2.1.5 (Mar 24, 2017)
+
+* Really fixed #22 #32, multiple grid instances were not working properly in 2.1.4
+* resizedEvent now also returns item width and height in pixels (implements #34)
+
+
 ## 2.1.4 (Mar 20, 2017)
 
 * Implemented #32, support for multiple grid instances on the same page

README.md

@@ -2,7 +2,7 @@
 
 vue-grid-layout is a grid layout system, like [Gridster](http://dsmorse.github.io/gridster.js/), for Vue.js. **Heavily inspired in [React-Grid-Layout](https://github.com/STRML/react-grid-layout)**
 
-### **Current version:** 2.1.4 (Supports Vue 2.2+)
+### **Current version:** 2.1.5 (Supports Vue 2.2+)
 
 ### **For Vue 2.1.10 and below use version [2.1.3](https://github.com/jbaysolutions/vue-grid-layout/tree/2.1.3)**
 ### **For Vue 1 use version [1.0.0](https://github.com/jbaysolutions/vue-grid-layout/tree/1.0.0)** 
@@ -190,8 +190,17 @@ Working example [here](https://jbaysolutions.github.io/vue-grid-layout/examples/
 * Resized event: every time an item is finished being resized and changes size
 
 ```javascript
-    resizedEvent: function(i, newH, newW){
-        console.log("RESIZED i=" + i + ", H=" + newH + ", W=" + newW);
+    /**
+     * 
+     * @param i the item id/index
+     * @param newH new height in grid rows 
+     * @param newW new width in grid columns
+     * @param newHPx new height in pixels
+     * @param newWPx new width in pixels
+     * 
+     */
+    resizedEvent: function(i, newH, newW, newHPx, newWPx){
+        console.log("RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
     },
 ``` 
 

dist/vue-grid-layout.js

@@ -64,8 +64,17 @@ new Vue({
             console.log(msg);
 
         },
-        resizedEvent: function(i, newH, newW){
-            var msg = "RESIZED i=" + i + ", H=" + newH + ", W=" + newW;
+        /**
+         *
+         * @param i the item id/index
+         * @param newH new height in grid rows
+         * @param newW new width in grid columns
+         * @param newHPx new height in pixels
+         * @param newWPx new width in pixels
+         *
+         */
+        resizedEvent: function(i, newH, newW, newHPx, newWPx){
+            var msg = "RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx;
             this.eventLog.push(msg);
             console.log(msg);
         },

dist/vue-grid-layout.min.js

@@ -1,6 +1,6 @@
 {
   "name": "vue-grid-layout",
-  "version": "2.1.4",
+  "version": "2.1.5",
   "description": "A draggable and resizable grid layout, as a Vue component.",
   "keywords": [
     "grid",

dist/vue-grid-layout.min.js.map

@@ -172,8 +172,8 @@
             moved: function(i, newX, newY){
                 console.log("### MOVED i=" + i + ", X=" + newX + ", Y=" + newY);
             },
-            resized: function(i, newH, newW){
-                console.log("### RESIZED i=" + i + ", H=" + newH + ", W=" + newW);
+            resized: function(i, newH, newW, newHPx, newWPx){
+                console.log("### RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
             },
             /**
              * Add change direction button

examples/02-events.js

@@ -465,7 +465,7 @@
                     this.$emit("resize", this.i, pos.h, pos.w);
                 }
                 if (event.type === "resizeend" && (this.previousW !== this.w || this.previousH !== this.h)) {
-                    this.$emit("resized", this.i, pos.h, pos.w);
+                    this.$emit("resized", this.i, pos.h, pos.w, newSize.width, newSize.height);
                 }
                 this.eventBus.$emit("resizeEvent", event.type, this.i, this.x, this.y, pos.h, pos.w);
             },