Skip to content

Commit 4ddd815

Browse files
gmsagmsa
committed
3.0.0-beta1 release
1 parent 60f1fa5 commit 4ddd815

14 files changed

+469
-999
lines changed

‎.github/workflows/vuepress-deploy.yml

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,3 +15,9 @@ jobs:
1515
TARGET_BRANCH: gh-pages
1616
BUILD_SCRIPT: cd website && yarn && yarn build
1717
BUILD_DIR: public
18+
19+
- name: test:unit
20+
run: |
21+
yarn
22+
yarn test:unit
23+
yarn test:cover

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

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

‎dist/vue-grid-layout.common.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.

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

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

‎dist/vue-grid-layout.umd.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.

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

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

‎dist/vue-grid-layout.umd.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/08-responsive-predefined-layouts.html

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Vue Grid Layout Example 8 - Responsive with predefined layouts</title>
7+
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
8+
<link rel="stylesheet" href="../public/app.css">
9+
<!--<link rel="stylesheet" href="../dist/vue-grid-layout.css">-->
10+
</head>
11+
12+
<body>
13+
<h1>Vue Grid Layout Example 8 - Responsive with predefined layouts</h1>
14+
15+
<a href="https://github.com/jbaysolutions/vue-grid-layout">View project on Github</a>
16+
<!-- <br />
17+
<a href="07-prevent-collision.html">Previous example: Prevent collision</a>
18+
<br />
19+
<a href="09-dynamic-add-remove.html">Next example: Dynamic Add/Remove</a>-->
20+
21+
<div id="app" style="width: 100%;">
22+
<!--<pre>{{ $data | json }}</pre>-->
23+
<div>
24+
<div class="layoutJSON">
25+
Displayed as <code>[x, y, w, h]</code>:
26+
<div class="columns">
27+
<div class="layoutItem" v-for="item in layout">
28+
<b>{{item.i}}</b>: [{{item.x}}, {{item.y}}, {{item.w}}, {{item.h}}]
29+
</div>
30+
</div>
31+
</div>
32+
</div>
33+
<div id="content">
34+
<!--<button @click="decreaseWidth">Decrease Width</button>
35+
<button @click="increaseWidth">Increase Width</button>
36+
<button @click="addItem">Add an item</button>-->
37+
<input type="checkbox" v-model="draggable" /> Draggable
38+
<input type="checkbox" v-model="resizable" /> Resizable
39+
<input type="checkbox" v-model="responsive" /> Responsive
40+
<br />
41+
<grid-layout :layout.sync="layout"
42+
:responsive-layouts="layouts"
43+
:col-num="12"
44+
:row-height="30"
45+
:is-draggable="draggable"
46+
:is-resizable="resizable"
47+
:vertical-compact="true"
48+
:use-css-transforms="true"
49+
:responsive="responsive"
50+
@breakpoint-changed="breakpointChangedEvent"
51+
>
52+
<grid-item v-for="item in layout"
53+
:x="item.x"
54+
:y="item.y"
55+
:w="item.w"
56+
:h="item.h"
57+
:i="item.i"
58+
>
59+
<span class="text">{{item.i}}</span>
60+
</grid-item>
61+
</grid-layout>
62+
</div>
63+
64+
</div>
65+
<script src="https://unpkg.com/vue@next"></script>
66+
<script src="../dist/vue-grid-layout.umd.min.js"></script>
67+
<script src="08-responsive-predefined-layouts.js"></script>
68+
</body>
69+
70+
</html>

‎examples/08-responsive-predefined-layouts.js

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
var testLayouts = {
2+
md: [
3+
{"x":0, "y":0, "w":2, "h":2, "i":"0"},
4+
{"x":2, "y":0, "w":2, "h":4, "i":"1"},
5+
{"x":4, "y":0, "w":2, "h":5, "i":"2"},
6+
{"x":6, "y":0, "w":2, "h":3, "i":"3"},
7+
{"x":2, "y":4, "w":2, "h":3, "i":"4"},
8+
{"x":4, "y":5, "w":2, "h":3, "i":"5"},
9+
{"x":0, "y":2, "w":2, "h":5, "i":"6"},
10+
{"x":2, "y":7, "w":2, "h":5, "i":"7"},
11+
{"x":4, "y":8, "w":2, "h":5, "i":"8"},
12+
{"x":6, "y":3, "w":2, "h":4, "i":"9"},
13+
{"x":0, "y":7, "w":2, "h":4, "i":"10"},
14+
{"x":2, "y":19, "w":2, "h":4, "i":"11"},
15+
{"x":0, "y":14, "w":2, "h":5, "i":"12"},
16+
{"x":2, "y":14, "w":2, "h":5, "i":"13"},
17+
{"x":4, "y":13, "w":2, "h":4, "i":"14"},
18+
{"x":6, "y":7, "w":2, "h":4, "i":"15"},
19+
{"x":0, "y":19, "w":2, "h":5, "i":"16"},
20+
{"x":8, "y":0, "w":2, "h":2, "i":"17"},
21+
{"x":0, "y":11, "w":2, "h":3, "i":"18"},
22+
{"x":2, "y":12, "w":2, "h":2, "i":"19"}
23+
],
24+
lg: [
25+
{"x":0,"y":0,"w":2,"h":2,"i":"0"},
26+
{"x":2,"y":0,"w":2,"h":4,"i":"1"},
27+
{"x":4,"y":0,"w":2,"h":5,"i":"2"},
28+
{"x":6,"y":0,"w":2,"h":3,"i":"3"},
29+
{"x":8,"y":0,"w":2,"h":3,"i":"4"},
30+
{"x":10,"y":0,"w":2,"h":3,"i":"5"},
31+
{"x":0,"y":5,"w":2,"h":5,"i":"6"},
32+
{"x":2,"y":5,"w":2,"h":5,"i":"7"},
33+
{"x":4,"y":5,"w":2,"h":5,"i":"8"},
34+
{"x":6,"y":4,"w":2,"h":4,"i":"9"},
35+
{"x":8,"y":4,"w":2,"h":4,"i":"10"},
36+
{"x":10,"y":4,"w":2,"h":4,"i":"11"},
37+
{"x":0,"y":10,"w":2,"h":5,"i":"12"},
38+
{"x":2,"y":10,"w":2,"h":5,"i":"13"},
39+
{"x":4,"y":8,"w":2,"h":4,"i":"14"},
40+
{"x":6,"y":8,"w":2,"h":4,"i":"15"},
41+
{"x":8,"y":10,"w":2,"h":5,"i":"16"},
42+
{"x":10,"y":4,"w":2,"h":2,"i":"17"},
43+
{"x":0,"y":9,"w":2,"h":3,"i":"18"},
44+
{"x":2,"y":6,"w":2,"h":2,"i":"19"}
45+
],
46+
};
47+
48+
var app = Vue.createApp({
49+
data() {
50+
return {
51+
layouts: testLayouts,
52+
layout: testLayouts["lg"],
53+
draggable: true,
54+
resizable: true,
55+
responsive: true,
56+
index: 0
57+
}
58+
},
59+
mounted: function () {
60+
// this.index = this.layout.length;
61+
},
62+
methods: {
63+
breakpointChangedEvent: function(newBreakpoint, newLayout){
64+
console.log("BREAKPOINT CHANGED breakpoint=", newBreakpoint, ", layout: ", newLayout );
65+
}
66+
}
67+
}).use(VueGridLayout);
68+
69+
// app.component("grid-item", VueGridLayout.GridItem);
70+
// app.component("grid-layout", VueGridLayout.GridLayout);
71+
72+
app.mount("#app");
73+
74+
75+
76+
77+

‎package.json

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-grid-layout",
3-
"version": "2.3.12",
3+
"version": "3.0.0-beta1",
44
"description": "A draggable and resizable grid layout, as a Vue component.",
55
"keywords": [
66
"grid",
@@ -24,7 +24,9 @@
2424
"serve": "vue-cli-service serve",
2525
"build": "rimraf dist && vue-cli-service build",
2626
"build-lib": "rimraf dist && vue-cli-service build --target lib ./src/components/index.js",
27-
"lint": "vue-cli-service lint"
27+
"lint": "vue-cli-service lint",
28+
"test:unit": "vue-cli-service test:unit",
29+
"test:cover": "vue-cli-service test:unit --coverage"
2830
},
2931
"dependencies": {
3032
"@interactjs/actions": "^1.10.2",
@@ -38,14 +40,16 @@
3840
"devDependencies": {
3941
"@vue/cli-plugin-babel": "^3.4.1",
4042
"@vue/cli-plugin-eslint": "^3.4.1",
43+
"@vue/cli-plugin-unit-jest": "^4.5.11",
4144
"@vue/cli-service": "^4.5.10",
4245
"@vue/compiler-sfc": "^3.0.5",
43-
"babel-plugin-transform-flow-comments": "^6.7.0",
44-
"eslint-plugin-vue": "^7.4.1",
46+
"babel-plugin-transform-flow-comments": "^6.22.0",
47+
"eslint-plugin-vue": "^7.5.0",
4548
"node-sass": "^4.13.0",
4649
"rimraf": "^2.6.2",
47-
"sass-loader": "^7.0.1",
50+
"sass-loader": "^10.1.1",
4851
"vue": "^3.0.0",
52+
"vue-jest": "^3.0.7",
4953
"webpack-bundle-analyzer": "^3.9.0"
5054
}
5155
}

0 commit comments

Comments
 (0)