Added responseiveLauouts to explicitly set all layouts per breakpoint

Added 'breakpoint-changed' event to notify in case of value change in breakpoint.

Author: ftylitak

README.md

@@ -175,6 +175,16 @@ Include the browser-ready bundle (download from [releases](https://github.com/jb
 
     The value must be an `Array` of `Object` items. Each item must have `i`, `x`, `y`, `w` and `h` properties. Please refer to the documentation for `GridItem` below for more information.
 
+* **responsiveLayouts**
+
+    * type: `Object`
+    * required: `false`
+    * default : `{}`
+
+    This is the initial layouts of the grid per breakpoint if `responsive` is set to `true`.
+    The `Object` keys are breakpoint names and each values is an `Array` of `Object` items as defined by `layout` prop. eg:{ lg:[layout items], md:[layout items] }.
+    If it is set after the layout creation, it replaces the layout configuration in all breakpoints
+
 * **colNum**
 
     * type: `Number`
@@ -469,6 +479,7 @@ Working example [here](https://jbaysolutions.github.io/vue-grid-layout/examples/
             @layout-mounted="layoutMountedEvent"
             @layout-ready="layoutReadyEvent"
             @layout-updated="layoutUpdatedEvent"
+            @breakpoint-changed="breakpointChangedEvent"
     >
 
         <grid-item v-for="item in layout"
@@ -626,6 +637,23 @@ Working example [here](https://jbaysolutions.github.io/vue-grid-layout/examples/
     },
 ``` 
 
+* **breakpointChangedEvent**
+
+    Breakpoint Changed event
+
+    Every time the breakpoint value changed due to window resize
+ 
+```javascript
+    /**
+     * 
+     * @param newBreakpoint the breakpoint name
+     * 
+     */
+    breakpointChangedEvent: function(newBreakpoint){
+        console.log("BREAKPOINT CHANGED B=" + newBreakpoint);
+    },
+``` 
+
 
 ## Contribute
 

src/components/GridLayout.vue

@@ -89,6 +89,12 @@
                 type: Boolean,
                 default: false
             },
+            responsiveLayouts: {
+                type: Object,
+                default: function() {
+                    return {};
+                }
+            },
             breakpoints:{
                 type: Object,
                 default: function(){return{ lg: 1200, md: 996, sm: 768, xs: 480, xxs: 0 }}
@@ -217,6 +223,9 @@
             layout: function () {
                 this.layoutUpdate();
             },
+            responsiveLayouts: function() {
+                this.layoutUpdate();
+            },
             colNum: function (val) {
                 this.eventBus.$emit("setColNum", val);
             },
@@ -403,6 +412,11 @@
                 // Store the new layout.
                 this.layouts[newBreakpoint] = layout;
 
+                if (this.lastBreakpoint !== newBreakpoint) {
+                    this.$emit('update:')
+                    this.$emit('breakpoint-changed', newBreakpoint)
+                }
+
                 // new prop sync
                 this.$emit('update:layout', layout);
 
@@ -413,7 +427,7 @@
             // clear all responsive layouts
             initResponsiveFeatures(){
                 // clear layouts
-                this.layouts = {};
+                this.layouts = Object.assign({}, this.responsiveLayouts);
             },
 
             // find difference in layouts