Merge branch 'master' into master

Author: gmsa

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 2.3.8 (July 31, 2020)
+
+* Make margins reactive (thanks [yfwz100](https://github.com/yfwz100))
+* Added missing 'layout-updated' events (thanks [ben-lau](https://github.com/ben-lau))
+* Support for initial responsive layouts and breakpoint change event (thanks [ftylitak](https://github.com/ftylitak))
+* Bugfix for possible error when layout items get removed and interactObj is not set (thanks [Tofandel](https://github.com/Tofandel))
+* Fix wrong grid item sorting in responsive mode (thanks [pieterbeulque](https://github.com/pieterbeulque))
+
 ## 2.3.7 (Oct 31, 2019)
 
 * renamed 'resized' event emitted when the container changes size (browser window or other), introduced in #337, fixes #358 

README-zh_CN.md

@@ -6,7 +6,7 @@
 
 vue-grid-layout是一个类似于[Gridster](http://dsmorse.github.io/gridster.js/)的栅格布局系统, 适用于Vue.js。 **灵感源自于 [React-Grid-Layout](https://github.com/STRML/react-grid-layout)**
 
-### **当前版本:** 2.3.7 (支持 Vue 2.2+)
+### **当前版本:** 2.3.8 (支持 Vue 2.2+)
 
 ### **Vue 2.1.10 及以下请使用 [2.1.3](https://github.com/jbaysolutions/vue-grid-layout/tree/2.1.3)**
 ### **Vue 1 请使用 [1.0.3](https://github.com/jbaysolutions/vue-grid-layout/tree/1.0.3)** 

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 by [React-Grid-Layout](https://github.com/STRML/react-grid-layout)**
 
-### **Current version:** 2.3.7 (Supports Vue 2.2+)
+### **Current version:** 2.3.8 (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)** 
@@ -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 keys of the `Object` are breakpoint names and each value is an `Array` of `Object` items as defined by `layout` prop. eg:{ lg:[layout items], md:[layout items] }.
+    Setting the prop after the creation of the GridLayout has no effect.
+
 * **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,24 @@ Working example [here](https://jbaysolutions.github.io/vue-grid-layout/examples/
     },
 ``` 
 
+* **breakpointChangedEvent**
+
+    Breakpoint Changed event
+
+    Every time the breakpoint value changes due to window resize
+ 
+```javascript
+    /**
+     * 
+     * @param newBreakpoint the breakpoint name
+     * @param newLayout the chosen layout for the breakpoint
+     * 
+     */
+    breakpointChangedEvent: function(newBreakpoint, newLayout){
+        console.log("BREAKPOINT CHANGED breakpoint=", newBreakpoint, ", layout: ", newLayout );
+    },
+``` 
+
 
 ## Contribute