renamed 'resized' event emitted when the container changes size (browser window or other), introduced in #337, fixes #358

Author: gmsa

examples/02-events.html

@@ -60,6 +60,7 @@ <h1>Vue Grid Layout Example 2 - Move and resize events</h1>
                            @resize="resizeEvent"
                            @move="moveEvent"
                            @resized="resizedEvent"
+                           @container-resized="containerResizedEvent"
                            @moved="movedEvent"
                 >
                     <span class="text">{{item.i}}</span>

examples/02-events.js

@@ -58,6 +58,9 @@ new Vue({
             console.log(msg);
 
         },
+        containerResized: function(i, newH, newW, newHPx, newWPx){
+            console.log("### CONTAINER RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
+        },
         /**
          *
          * @param i the item id/index

src/App.vue

@@ -61,6 +61,7 @@
                            @resize="resize"
                            @move="move"
                            @resized="resized"
+                           @container-resized="containerResized"
                            @moved="moved"
                 >
                     <!--<custom-drag-element :text="item.i"></custom-drag-element>-->
@@ -191,6 +192,9 @@
             resized: function(i, newH, newW, newHPx, newWPx){
                 console.log("### RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
             },
+            containerResized: function(i, newH, newW, newHPx, newWPx){
+                console.log("### CONTAINER RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
+            },
             /**
              * Add change direction button
              */

src/components/GridItem.vue

@@ -331,17 +331,17 @@
             },
             rowHeight: function () {
                 this.createStyle();
-                this.emitResized();
+                this.emitContainerResized();
             },
             cols: function () {
                 this.tryMakeResizable();
                 this.createStyle();
-                this.emitResized();
+                this.emitContainerResized();
             },
             containerWidth: function () {
                 this.tryMakeResizable();
                 this.createStyle();
-                this.emitResized();
+                this.emitContainerResized();
             },
             x: function (newVal) {
                 this.innerX = newVal;
@@ -354,12 +354,12 @@
             h: function (newVal) {
                 this.innerH = newVal
                 this.createStyle();
-                this.emitResized();
+                // this.emitContainerResized();
             },
             w: function (newVal) {
                 this.innerW = newVal;
                 this.createStyle();
-                this.emitResized();
+                // this.emitContainerResized();
             },
             renderRtl: function () {
                 // console.log("### renderRtl");
@@ -458,7 +458,7 @@
                 }
                 this.style = style;
             },
-            emitResized() {
+            emitContainerResized() {
                 // this.style has width and height with trailing 'px'. The
                 // resized event is without them
                 let styleProps = {};
@@ -469,7 +469,7 @@
                         return;
                     styleProps[prop] = matches[1];
                 }
-                this.$emit("resized", this.i, this.h, this.w, styleProps.height, styleProps.width);
+                this.$emit("container-resized", this.i, this.h, this.w, styleProps.height, styleProps.width);
             },
             handleResize: function (event) {
                 if (this.static) return;