Skip to content

Commit 62a280b

Browse files
gmsagmsa
committed
2.3.12-legacy release for older browsers
1 parent 2bc042f commit 62a280b

10 files changed

+616
-13733
lines changed

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

Lines changed: 225 additions & 6858 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: 225 additions & 6858 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.

‎package.json

Lines changed: 2 additions & 6 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": "2.3.12-legacy",
44
"description": "A draggable and resizable grid layout, as a Vue component.",
55
"keywords": [
66
"grid",
@@ -28,11 +28,7 @@
2828
},
2929
"dependencies": {
3030
"element-resize-detector": "^1.2.1",
31-
"@interactjs/interactjs": "^1.10.2",
32-
"@interactjs/auto-start": "^1.10.2",
33-
"@interactjs/actions": "^1.10.2",
34-
"@interactjs/modifiers": "^1.10.2",
35-
"@interactjs/dev-tools": "^1.10.2"
31+
"interactjs": "^1.10.2"
3632
},
3733
"devDependencies": {
3834
"@vue/cli-plugin-babel": "^3.4.1",

‎src/components/GridItem.vue

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -92,12 +92,7 @@
9292
import {getDocumentDir} from "@/helpers/DOM";
9393
// var eventBus = require('./eventBus');
9494
95-
import '@interactjs/auto-start'
96-
import '@interactjs/actions/drag'
97-
import '@interactjs/actions/resize'
98-
import '@interactjs/modifiers'
99-
import '@interactjs/dev-tools'
100-
import interact from '@interactjs/interact'
95+
import interact from 'interactjs'
10196
10297
export default {
10398
name: "GridItem",

‎test/01-basic.html

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

‎test/01-basic.js

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
var testLayout = [
2+
{"x":0,"y":0,"w":2,"h":2,"i":"0", static: false},
3+
{"x":2,"y":0,"w":2,"h":4,"i":"1", static: true},
4+
{"x":4,"y":0,"w":2,"h":5,"i":"2", static: false},
5+
{"x":6,"y":0,"w":2,"h":3,"i":"3", static: false},
6+
{"x":8,"y":0,"w":2,"h":3,"i":"4", static: false},
7+
{"x":10,"y":0,"w":2,"h":3,"i":"5", static: false},
8+
{"x":0,"y":5,"w":2,"h":5,"i":"6", static: false},
9+
{"x":2,"y":5,"w":2,"h":5,"i":"7", static: false},
10+
{"x":4,"y":5,"w":2,"h":5,"i":"8", static: false},
11+
{"x":6,"y":3,"w":2,"h":4,"i":"9", static: true},
12+
{"x":8,"y":4,"w":2,"h":4,"i":"10", static: false},
13+
{"x":10,"y":4,"w":2,"h":4,"i":"11", static: false},
14+
{"x":0,"y":10,"w":2,"h":5,"i":"12", static: false},
15+
{"x":2,"y":10,"w":2,"h":5,"i":"13", static: false},
16+
{"x":4,"y":8,"w":2,"h":4,"i":"14", static: false},
17+
{"x":6,"y":8,"w":2,"h":4,"i":"15", static: false},
18+
{"x":8,"y":10,"w":2,"h":5,"i":"16", static: false},
19+
{"x":10,"y":4,"w":2,"h":2,"i":"17", static: false},
20+
{"x":0,"y":9,"w":2,"h":3,"i":"18", static: false},
21+
{"x":2,"y":6,"w":2,"h":2,"i":"19", static: false}
22+
];
23+
24+
// var GridLayout = VueGridLayout.GridLayout;
25+
// var GridItem = VueGridLayout.GridItem;
26+
27+
new Vue({
28+
el: '#app',
29+
// components: {
30+
// "GridLayout": GridLayout,
31+
// "GridItem": GridItem
32+
// },
33+
data: {
34+
layout: testLayout,
35+
draggable: true,
36+
resizable: true,
37+
index: 0
38+
},
39+
40+
/*
41+
mounted: function () {
42+
this.index = this.layout.length;
43+
},
44+
*/
45+
methods: {
46+
itemTitle: function(item) {
47+
var result = item.i;
48+
if (item.static) {
49+
result += " - Static";
50+
}
51+
return result;
52+
}
53+
/*
54+
increaseWidth: function(item) {
55+
var width = document.getElementById("content").offsetWidth;
56+
width += 20;
57+
document.getElementById("content").style.width = width+"px";
58+
},
59+
decreaseWidth: function(item) {
60+
61+
var width = document.getElementById("content").offsetWidth;
62+
width -= 20;
63+
document.getElementById("content").style.width = width+"px";
64+
},
65+
removeItem: function(item) {
66+
//console.log("### REMOVE " + item.i);
67+
this.layout.splice(this.layout.indexOf(item), 1);
68+
},
69+
addItem: function() {
70+
var self = this;
71+
//console.log("### LENGTH: " + this.layout.length);
72+
var item = {"x":0,"y":0,"w":2,"h":2,"i":this.index+"", whatever: "bbb"};
73+
this.index++;
74+
this.layout.push(item);
75+
}
76+
*/
77+
}
78+
});
79+
80+
/*
81+
function generateLayout() {
82+
return _.map(_.range(0, 25), function (item, i) {
83+
var y = Math.ceil(Math.random() * 4) + 1;
84+
return {
85+
x: _.random(0, 5) * 2 % 12,
86+
y: Math.floor(i / 6) * y,
87+
w: 2,
88+
h: y,
89+
i: i.toString(),
90+
static: Math.random() < 0.05
91+
};
92+
});
93+
}*/
94+
95+
96+

0 commit comments

Comments
 (0)