Skip to content

Commit f3c28af

Browse files
pbabeypbabey
authored
Merge pull request jbaysolutions#1 from jbaysolutions/master
Merge
2 parents ac6728c + 3493be5 commit f3c28af

16 files changed

+3939
-3008
lines changed

‎CHANGELOG.md

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,26 @@
11
# Changelog
22

3+
## 2.1.5 (Mar 24, 2017)
4+
5+
* Really fixed #22 #32, multiple grid instances were not working properly in 2.1.4
6+
* resizedEvent now also returns item width and height in pixels (implements #34)
7+
8+
9+
## 2.1.4 (Mar 20, 2017)
10+
11+
* Implemented #32, support for multiple grid instances on the same page
12+
13+
## 2.1.3 (Mar 9, 2017)
14+
15+
* Fixed #27, props mutation warnings
16+
17+
18+
## 2.1.2 (Fev 16, 2017)
19+
20+
* Implemented #12, buttons on GridItems would trigger drag on mobile
21+
* Implemented #24, listeners removal beforeDestroy (thanks [pbabey](https://github.com/pbabey))
22+
23+
324
## 2.1.1 (Fev 9, 2017)
425

526
* Implemented #13, dynamic row height update support

‎README.md

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,9 @@
22

33
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)**
44

5-
### **Current version:** 2.1.1 (Supports Vue 2.0+)
5+
### **Current version:** 2.1.5 (Supports Vue 2.2+)
66

7+
### **For Vue 2.1.10 and below use version [2.1.3](https://github.com/jbaysolutions/vue-grid-layout/tree/2.1.3)**
78
### **For Vue 1 use version [1.0.0](https://github.com/jbaysolutions/vue-grid-layout/tree/1.0.0)**
89

910
<br/>
@@ -24,8 +25,6 @@ vue-grid-layout is a grid layout system, like [Gridster](http://dsmorse.github.i
2425
2526
2627
TODO UPDATE DOCS
27-
TODO UPDATE CHANGELOG
28-
2928
-->
3029

3130
#### Projects using vue-grid-layout
@@ -126,6 +125,9 @@ or include the script in your html (download from [releases](https://github.com/
126125
</grid-layout>
127126
````
128127

128+
<!-- TODO DOCUMENTAR PROPS DE GridLayout E GridItem -->
129+
130+
129131
### Events
130132

131133
Move and resize event listeners can be added to each grid-item, so that the parent Vue can be notified when a grid element is being moved or resized.
@@ -188,8 +190,17 @@ Working example [here](https://jbaysolutions.github.io/vue-grid-layout/examples/
188190
* Resized event: every time an item is finished being resized and changes size
189191

190192
```javascript
191-
resizedEvent: function(i, newH, newW){
192-
console.log("RESIZED i=" + i + ", H=" + newH + ", W=" + newW);
193+
/**
194+
*
195+
* @param i the item id/index
196+
* @param newH new height in grid rows
197+
* @param newW new width in grid columns
198+
* @param newHPx new height in pixels
199+
* @param newWPx new width in pixels
200+
*
201+
*/
202+
resizedEvent: function(i, newH, newW, newHPx, newWPx){
203+
console.log("RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx);
193204
},
194205
```
195206

‎dist/vue-grid-layout.js

Lines changed: 139 additions & 134 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 6 additions & 6 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

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

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎examples/01-basic.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ var GridItem = VueGridLayout.GridItem;
3232
new Vue({
3333
el: '#app',
3434
components: {
35-
GridLayout,
36-
GridItem,
35+
"GridLayout": GridLayout,
36+
"GridItem": GridItem
3737
},
3838
data: {
3939
layout: testLayout,

‎examples/02-events.js

Lines changed: 13 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,8 @@ var GridItem = VueGridLayout.GridItem;
3232
new Vue({
3333
el: '#app',
3434
components: {
35-
GridLayout,
36-
GridItem,
35+
"GridLayout": GridLayout,
36+
"GridItem": GridItem
3737
},
3838
data: {
3939
layout: testLayout,
@@ -64,8 +64,17 @@ new Vue({
6464
console.log(msg);
6565

6666
},
67-
resizedEvent: function(i, newH, newW){
68-
var msg = "RESIZED i=" + i + ", H=" + newH + ", W=" + newW;
67+
/**
68+
*
69+
* @param i the item id/index
70+
* @param newH new height in grid rows
71+
* @param newW new width in grid columns
72+
* @param newHPx new height in pixels
73+
* @param newWPx new width in pixels
74+
*
75+
*/
76+
resizedEvent: function(i, newH, newW, newHPx, newWPx){
77+
var msg = "RESIZED i=" + i + ", H=" + newH + ", W=" + newW + ", H(px)=" + newHPx + ", W(px)=" + newWPx;
6978
this.eventLog.push(msg);
7079
console.log(msg);
7180
},

‎examples/03-multiple-grids.html

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<title>Vue Grid Layout Example 3 - Multiple instances</title>
6+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
7+
<link rel="stylesheet" href="app.css">
8+
</head>
9+
<body>
10+
<div id="app1" style="width: 100%;">
11+
<h3> app1 </h3>
12+
<grid-layout :layout="layout"
13+
:col-num="12"
14+
:row-height="30"
15+
:is-draggable="true"
16+
:is-resizable="true"
17+
:vertical-compact="true"
18+
:use-css-transforms="true"
19+
>
20+
<grid-item v-for="item in layout"
21+
:x="item.x"
22+
:y="item.y"
23+
:w="item.w"
24+
:h="item.h"
25+
:i="item.i"
26+
>
27+
<span class="text">{{item.i}}</span>
28+
</grid-item>
29+
</grid-layout>
30+
</div>
31+
<hr/>
32+
<div id="app2" style="width: 100%;">
33+
<h3> app2 </h3>
34+
<grid-layout :layout="layout"
35+
:col-num="12"
36+
:row-height="30"
37+
:is-draggable="true"
38+
:is-resizable="true"
39+
:vertical-compact="true"
40+
:use-css-transforms="true"
41+
>
42+
<grid-item v-for="item in layout"
43+
:x="item.x"
44+
:y="item.y"
45+
:w="item.w"
46+
:h="item.h"
47+
:i="item.i"
48+
>
49+
<span class="text">{{item.i}}</span>
50+
</grid-item>
51+
</grid-layout>
52+
</div>
53+
54+
<script src="vue.min.js"></script>
55+
<script src="../dist/vue-grid-layout.js"></script>
56+
<script type="text/javascript">
57+
Vue.config.debug = true;
58+
Vue.config.devtools = true;
59+
60+
var GridLayout = VueGridLayout.GridLayout;
61+
var GridItem = VueGridLayout.GridItem;
62+
63+
64+
new Vue({
65+
el: '#app1',
66+
components: {
67+
GridLayout,
68+
GridItem,
69+
},
70+
data: {
71+
layout: [
72+
{"x":0,"y":0,"w":2,"h":2,"i":"0"},
73+
{"x":2,"y":0,"w":2,"h":4,"i":"1"},
74+
],
75+
index: 0
76+
},
77+
});
78+
79+
new Vue({
80+
el: '#app2',
81+
components: {
82+
GridLayout,
83+
GridItem,
84+
},
85+
data: {
86+
layout: [
87+
{"x":0,"y":0,"w":2,"h":2,"i":"0"},
88+
{"x":2,"y":0,"w":2,"h":4,"i":"1"},
89+
{"x":4,"y":0,"w":2,"h":2,"i":"2"},
90+
],
91+
index: 0
92+
},
93+
});
94+
95+
96+
97+
</script>
98+
</body>
99+
</html>

0 commit comments

Comments
 (0)