new events emited by GridLayout, release 2.3.4

CHANGELOG.md

@@ -1,12 +1,13 @@
 # Changelog
 
-## 2.3.4 (UNRELEASED)
+## 2.3.4 (Mar 5, 2019)
 
 * Support for static items (thanks [panjiangyi](https://github.com/panjiangyi)).
 * RTL bugfix (thanks [irvingwa](https://github.com/irvingwa)).
 * Memory leak fixes (thanks [aiankile](https://github.com/aiankile)).
 * Fixed exception on grid layout mount (thanks [BenoitZugmeyer](https://github.com/BenoitZugmeyer)).
 * Fixed overlapping and resizing bugs on responsive mode (thanks [shpfive](https://github.com/shpfive)).
+* Added new events emited by GridLayout (layout-created, layout-before-mount, layout-mounted, layout-ready) (thanks [samuelmolinski](https://github.com/samuelmolinski)).
 
 ## 2.3.3 (Dec 26, 2018)
 

README.md

@@ -6,7 +6,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.3.3 (Supports Vue 2.2+)
+### **Current version:** 2.3.4 (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.3](https://github.com/jbaysolutions/vue-grid-layout/tree/1.0.3)** 
@@ -451,6 +451,10 @@ Working example [here](https://jbaysolutions.github.io/vue-grid-layout/examples/
             :vertical-compact="true"
             :margin="[10, 10]"
             :use-css-transforms="true"
+            @layout-created="layoutCreatedEvent"
+            @layout-before-mount="layoutBeforeMountEvent"
+            @layout-mounted="layoutMountedEvent"
+            @layout-ready="layoutReadyEvent"
             @layout-updated="layoutUpdatedEvent"
     >
 
@@ -469,6 +473,54 @@ Working example [here](https://jbaysolutions.github.io/vue-grid-layout/examples/
     </grid-layout>
 ```` 
 
+* **layoutCreatedEvent**
+
+    Layout created event
+
+    Emited on the component created lifecycle hook
+
+```javascript
+    layoutCreatedEvent: function(newLayout){
+      console.log("Created layout: ", newLayout)
+    }
+```
+
+* **layoutBeforeMountEvent**
+
+    Layout beforeMount event
+
+    Emited on the component beforeMount lifecycle hook
+
+```javascript
+    layoutBeforeMountEvent: function(newLayout){
+      console.log("beforeMount layout: ", newLayout)
+    }
+```
+
+* **layoutMountedEvent**
+
+    Layout mounted event
+
+    Emited on the component mounted lifecycle hook
+
+```javascript
+    layoutMountedEvent: function(newLayout){
+      console.log("Mounted layout: ", newLayout)
+    }
+```
+
+* **layoutReadyEvent**
+
+    Layout ready event
+
+    Emited when all the operations on the mount hook finish
+
+```javascript
+    layoutReadyEvent: function(newLayout){
+      console.log("Ready layout: ", newLayout)
+    }
+```
+
 * **layoutUpdatedEvent**
 
     Layout updated event

examples/02-events.html

@@ -45,6 +45,11 @@ <h1>Vue Grid Layout Example 2 - Move and resize events</h1>
                          :is-resizable="true"
                          :vertical-compact="true"
                          :use-css-transforms="true"
+                         @layout-created="layoutCreatedEvent"
+                         @layout-before-mount="layoutBeforeMountEvent"
+                         @layout-mounted="layoutMountedEvent"
+                         @layout-ready="layoutReadyEvent"
+                         @layout-updated="layoutUpdatedEvent"
             >
                 <grid-item v-for="item in layout"
                            :x="item.x"
@@ -68,4 +73,4 @@ <h1>Vue Grid Layout Example 2 - Move and resize events</h1>
     <script src="../dist/vue-grid-layout.umd.min.js"></script>
     <script src="02-events.js"></script>
 </body>
-</html>
+</html>

examples/02-events.js

@@ -72,6 +72,27 @@ new Vue({
             this.eventLog.push(msg);
             console.log(msg);
         },
+
+        layoutCreatedEvent: function(newLayout){
+            this.eventLog.push("Created layout");
+            console.log("Created layout: ", newLayout)
+        },
+        layoutBeforeMountEvent: function(newLayout){
+            this.eventLog.push("beforeMount layout");
+            console.log("beforeMount layout: ", newLayout)
+        },
+        layoutMountedEvent: function(newLayout){
+            this.eventLog.push("Mounted layout");
+            console.log("Mounted layout: ", newLayout)
+        },
+        layoutReadyEvent: function(newLayout){
+            this.eventLog.push("Ready layout");
+            console.log("Ready layout: ", newLayout)
+        },
+        layoutUpdatedEvent: function(newLayout){
+            this.eventLog.push("Updated layout");
+            console.log("Updated layout: ", newLayout)
+        },
     }
 });
 

src/App.vue

@@ -43,6 +43,11 @@
                     :vertical-compact="true"
                     :use-css-transforms="true"
                     :responsive="responsive"
+                    @layout-created="layoutCreatedEvent"
+                    @layout-before-mount="layoutBeforeMountEvent"
+                    @layout-mounted="layoutMountedEvent"
+                    @layout-ready="layoutReadyEvent"
+                    @layout-updated="layoutUpdatedEvent"
             >
                 <grid-item v-for="item in layout" :key="item.i"
                            :static="item.static"
@@ -196,7 +201,24 @@
                 }
                 setDocumentDir(toggle);
                 //eventBus.$emit('directionchange');
-            }
+            },
+
+            layoutCreatedEvent: function(newLayout){
+                console.log("Created layout: ", newLayout)
+            },
+            layoutBeforeMountEvent: function(newLayout){
+                console.log("beforeMount layout: ", newLayout)
+            },
+            layoutMountedEvent: function(newLayout){
+                console.log("Mounted layout: ", newLayout)
+            },
+            layoutReadyEvent: function(newLayout){
+                console.log("Ready layout: ", newLayout)
+            },
+            layoutUpdatedEvent: function(newLayout){
+                console.log("Updated layout: ", newLayout)
+            },
+
         },
     }
 </script>