Skip to content

Commit b3c0db1

Browse files
adumesnyadumesny
authored
Merge pull request #2142 from adumesny/master
fixed formatting
2 parents 0c735d2 + 20b7082 commit b3c0db1

File tree

1 file changed

+84
-84
lines changed

1 file changed

+84
-84
lines changed

‎demo/vue3js_v-for.html‎

Lines changed: 84 additions & 84 deletions
Original file line numberDiff line numberDiff line change
@@ -1,60 +1,60 @@
11
<!DOCTYPE html>
22
<html lang="en">
3-
<head>
4-
<meta charset="UTF-8" />
5-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6-
<title>Vue3 v-for Gridstack</title>
7-
<link rel="stylesheet" href="demo.css"/>
8-
<script src="../dist/gridstack-all.js"></script>
9-
</head>
10-
<body>
11-
<main id="app">
12-
<h1>How to integrate GridStack.js with Vue.js</h1>
13-
<p>
14-
As with any virtual DOM based framework, you need to check if Vue has
15-
rendered the DOM (or any updates to it) <strong>before</strong> you
16-
initialize GridStack or call its methods. As a basic example, check this
17-
component's <code>mounted</code> hook.
18-
</p>
19-
<p>
20-
If your app requires more complex render logic than the inline template
21-
in `addWidget`, consider
22-
<a
23-
href="https://github.com/gridstack/gridstack.js/tree/master/doc#makewidgetel"
24-
>makeWidget</a
25-
>
26-
to let Vue deal with DOM rendering.
27-
</p>
28-
<button type="button" @click="addNewWidget2()">Add Widget pos [0,0]</button>
29-
<button type="button" @click="removeLastWidget()">Remove Last Widget</button>
30-
<br>
31-
<br>
32-
<button type="button" @click="changeFloat()">Float: {{gridFloat}}</button>
33-
34-
<div>{{ info }}</div>
35-
<br>
36-
<div><b :style="{color: color}">{{ gridInfo }}</b></div>
37-
<br>
38-
39-
<div class="grid-stack">
40-
<div v-for="(w, indexs) in items" class="grid-stack-item" :gs-x="w.x" :gs-y="w.y" :gs-w="w.w" :gs-h="w.h" :gs-id="w.id" :id="w.id">
41-
<div class="grid-stack-item-content">
42-
<button @click="remove(w)">remove</button>
43-
{{w}}
44-
</div>
45-
</div>
3+
4+
<head>
5+
<meta charset="UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vue3 v-for Gridstack</title>
8+
<link rel="stylesheet" href="demo.css" />
9+
<script src="../dist/gridstack-all.js"></script>
10+
</head>
11+
12+
<body>
13+
<main id="app">
14+
<h1>How to integrate GridStack.js with Vue.js</h1>
15+
<p>
16+
As with any virtual DOM based framework, you need to check if Vue has
17+
rendered the DOM (or any updates to it) <strong>before</strong> you
18+
initialize GridStack or call its methods. As a basic example, check this
19+
component's <code>mounted</code> hook.
20+
</p>
21+
<p>
22+
If your app requires more complex render logic than the inline template
23+
in `addWidget`, consider
24+
<a href="https://github.com/gridstack/gridstack.js/tree/master/doc#makewidgetel">makeWidget</a>
25+
to let Vue deal with DOM rendering.
26+
</p>
27+
<button type="button" @click="addNewWidget2()">Add Widget pos [0,0]</button>
28+
<button type="button" @click="removeLastWidget()">Remove Last Widget</button>
29+
<br>
30+
<br>
31+
<button type="button" @click="changeFloat()">Float: {{gridFloat}}</button>
32+
33+
<div>{{ info }}</div>
34+
<br>
35+
<div><b :style="{color: color}">{{ gridInfo }}</b></div>
36+
<br>
37+
38+
<div class="grid-stack">
39+
<div v-for="(w, indexs) in items" class="grid-stack-item" :gs-x="w.x" :gs-y="w.y" :gs-w="w.w" :gs-h="w.h"
40+
:gs-id="w.id" :id="w.id">
41+
<div class="grid-stack-item-content">
42+
<button @click="remove(w)">remove</button>
43+
{{w}}
44+
</div>
4645
</div>
46+
</div>
4747

48-
</main>
49-
<script type="module">
50-
import { createApp, ref, onMounted, nextTick } from "https://cdn.jsdelivr.net/npm/vue@3.0.11/dist/vue.esm-browser.js";
48+
</main>
49+
<script type="module">
50+
import { createApp, ref, onMounted, nextTick } from "https://cdn.jsdelivr.net/npm/vue@3.0.11/dist/vue.esm-browser.js";
5151

5252
createApp({
5353
setup() {
5454
let count = ref(0);
5555
let info = ref("");
56-
let gridFloat = ref(false);
57-
let color = ref("black");
56+
let gridFloat = ref(false);
57+
let color = ref("black");
5858
let gridInfo = ref("");
5959
let grid = null; // DO NOT use ref(NULL) as proxies GS will break all logic when comparing structures... see https://github.com/gridstack/gridstack.js/issues/2115
6060
let items = ref([]);
@@ -65,68 +65,68 @@ <h1>How to integrate GridStack.js with Vue.js</h1>
6565
cellHeight: "70px",
6666
minRow: 1,
6767
});
68+
6869
grid.on("dragstop", function (event, element) {
6970
const node = element.gridstackNode;
7071
info.value = `you just dragged node #${node.id} to ${node.x},${node.y} – good job!`;
7172
});
73+
7274
grid.on('change', onChange);
7375
// gridFloat.value = grid.float();
7476
});
7577

7678
function changeFloat() {
77-
gridFloat.value = !gridFloat.value;
78-
grid.float(gridFloat.value);
79+
gridFloat.value = !gridFloat.value;
80+
grid.float(gridFloat.value);
7981
}
8082

8183
function onChange(event, changeItems) {
82-
updateInfo();
83-
// update item position
84-
changeItems.forEach(item => {
85-
var widget = items.value.find(w => w.id == item.id);
86-
if (!widget) {
87-
alert("Widget not found: " + item.id);
88-
return;
89-
}
90-
widget.x = item.x;
91-
widget.y = item.y;
92-
widget.w = item.w;
93-
widget.h = item.h;
94-
});
84+
updateInfo();
85+
// update item position
86+
changeItems.forEach(item => {
87+
var widget = items.value.find(w => w.id == item.id);
88+
if (!widget) {
89+
alert("Widget not found: " + item.id);
90+
return;
91+
}
92+
widget.x = item.x;
93+
widget.y = item.y;
94+
widget.w = item.w;
95+
widget.h = item.h;
96+
});
9597
}
9698

97-
9899
function addNewWidget2() {
99100
const node = items[count.value] || { x: 0, y: 0, w: 2, h: 2 };
100101
node.id = 'w_'+ (count.value++);
101102
// grid.addWidget(node);
102103
items.value.push(node);
103104
nextTick(()=>{
104-
grid.makeWidget(node.id);
105-
updateInfo();
106-
});
105+
grid.makeWidget(node.id);
106+
updateInfo();
107+
});
107108
}
108109

109110
function removeLastWidget() {
110-
if (count.value == 0) return;
111-
var id = `w_${count.value-1}`;
112-
var index = items.value.findIndex(w => w.id == id);
113-
if (index < 0) return;
114-
var removed = items.value[index];
115-
remove(removed);
111+
if (count.value == 0) return;
112+
var id = `w_${count.value-1}`;
113+
var index = items.value.findIndex(w => w.id == id);
114+
if (index < 0) return;
115+
var removed = items.value[index];
116+
remove(removed);
116117
}
117118

118119
function remove(widget) {
119-
var index = items.value.findIndex(w => w.id == widget.id);
120-
items.value.splice(index, 1);
121-
const selector = `#${widget.id}`;
122-
grid.removeWidget(selector, false);
123-
updateInfo();
120+
var index = items.value.findIndex(w => w.id == widget.id);
121+
items.value.splice(index, 1);
122+
const selector = `#${widget.id}`;
123+
grid.removeWidget(selector, false);
124+
updateInfo();
124125
}
125126

126127
function updateInfo() {
127-
color.value = grid.engine.nodes.length == items.value.length ? "black" : "red";
128-
gridInfo.value = `Grid engine: ${grid.engine.nodes.length}, widgets: ${items.value.length}`;
129-
128+
color.value = grid.engine.nodes.length == items.value.length ? "black" : "red";
129+
gridInfo.value = `Grid engine: ${grid.engine.nodes.length}, widgets: ${items.value.length}`;
130130
}
131131

132132
return {
@@ -150,7 +150,6 @@ <h1>How to integrate GridStack.js with Vue.js</h1>
150150
*/
151151
info: function (newVal) {
152152
if (newVal.length === 0) return;
153-
154153
window.clearTimeout(this.timerId);
155154
this.timerId = window.setTimeout(() => {
156155
this.info = "";
@@ -159,5 +158,6 @@ <h1>How to integrate GridStack.js with Vue.js</h1>
159158
},
160159
}).mount("#app");
161160
</script>
162-
</body>
163-
</html>
161+
</body>
162+
163+
</html>

0 commit comments

Comments
 (0)