Skip to content

Commit 8025fa9

Browse files
gmsagmsa
committed
slot tests
1 parent 33822f5 commit 8025fa9

File tree

7 files changed

+125
-47
lines changed

7 files changed

+125
-47
lines changed

‎index.html

Lines changed: 22 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<link rel="stylesheet" href="example/app.css">
88
</head>
99
<body>
10-
<h1>Vue Grid</h1>
10+
<h1>Vue Grid Layout</h1>
1111
<div id="app">
1212
<!--<pre>{{ $data | json }}</pre>-->
1313
<div>
@@ -24,8 +24,27 @@ <h1>Vue Grid</h1>
2424
<!--<responsive-grid-layout :layout.sync="layout" :layouts="layouts" :row-height="30" :is-draggable="true" :vertical-compact="true">
2525
<text-item v-for="item in layout" :text="item.i"></text-item>
2626
</responsive-grid-layout>-->
27-
<grid-layout :layout.sync="layout" :cols="12" :row-height="30" :is-draggable="true" :vertical-compact="true">
28-
<text-item v-for="item in layout" :text="item.i" slot="{{item.i}}"></text-item>
27+
<!--<responsive-grid-layout :layout.sync="layout" :layouts="layouts" :row-height="30" :is-draggable="true" :vertical-compact="true">
28+
<grid-item v-for="item in layout"
29+
:x.sync="item.x"
30+
:y.sync="item.y"
31+
:w.sync="item.w"
32+
:h.sync="item.h"
33+
:id="item.i"
34+
>
35+
<span class="text">{{item.i}}</span>
36+
</grid-item>
37+
</responsive-grid-layout>-->
38+
<grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="true" :vertical-compact="true">
39+
<grid-item v-for="item in layout"
40+
:x.sync="item.x"
41+
:y.sync="item.y"
42+
:w.sync="item.w"
43+
:h.sync="item.h"
44+
:id="item.i"
45+
>
46+
<span class="text">{{item.i}}</span>
47+
</grid-item>
2948
</grid-layout>
3049
</div>
3150

‎package.json

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,12 @@
1515
"main": "src/app.js",
1616
"scripts": {
1717
"dev": "webpack-dev-server --inline --hot ",
18-
"build": "NODE_ENV=production webpack --progress --hide-modules",
19-
"dist": "webpack --progress --hide-modules --config webpack.build.js && NODE_ENV=production webpack --progress --hide-modules --config webpack.build.min.js"
18+
"build": "set NODE_ENV=production && webpack --progress --hide-modules",
19+
"dist": "webpack --progress --hide-modules --config webpack.build.js && set NODE_ENV=production && webpack --progress --hide-modules --config webpack.build.min.js"
2020
},
2121
"repository": {
2222
"type": "git",
23-
"url": "https://github.com/gmsa/vue-grid-layout.git"
23+
"url": "https://github.com/jbaysolutions/vue-grid-layout.git"
2424
},
2525
"author": "Gustavo Santos (JBay Solutions) <[email protected]> (http://www.jbaysolutions.com)",
2626
"devDependencies": {

‎src/GridItem.vue

Lines changed: 76 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22
<div v-el:item
33
class="vue-grid-item"
44
:class="{ 'vue-resizable' : isResizable, 'vue-draggable-dragging' : isDragging, 'cssTransforms' : useCssTransforms }"
5-
style="{{createStyle}}"
5+
style="{{{createStyle}}}"
66
>
7-
<!--<slot name="{{i}}">X</slot>
8-
<component :is="textItem" :text="i"></component>-->
9-
<span class="text">{{i}}</span>
7+
<slot></slot>
8+
<!--span class="text">{{id}}</span-->
109
<!--<span class="text">{{i}}</span>-->
1110
<!--<pre>
1211
x: {{ x | json}}
1312
y: {{ y | json}}
1413
w: {{ w | json}}
1514
h: {{ h | json}}
15+
containerWidth: {{ containerWidth | json}}
1616
</pre>-->
1717
<span v-if="isResizable" v-el:handle class="vue-resizable-handle"></span>
1818
</div>
@@ -93,11 +93,11 @@
9393
export default {
9494
name: "GridItem",
9595
props: {
96-
cols: {
96+
/*cols: {
9797
type: Number,
9898
required: true
99-
},
100-
containerWidth: {
99+
},*/
100+
/*containerWidth: {
101101
type: Number,
102102
required: true
103103
@@ -145,7 +145,7 @@
145145
useCssTransforms: {
146146
type: Boolean,
147147
required: true
148-
},
148+
},*/
149149
x: {
150150
type: Number,
151151
required: true
@@ -162,18 +162,25 @@
162162
type: Number,
163163
required: true
164164
},
165-
i: {
166-
default: ""
165+
id: {
166+
required: true
167167
},
168-
/*comp: {
169-
type: String,
170-
default: "textItem"
171-
}*/
172-
},
173-
watch: {
174168
},
175169
data: function() {
176170
return {
171+
cols: 1,
172+
containerWidth: 100,
173+
rowHeight: 30,
174+
margin: [10, 10],
175+
maxRows: Infinity,
176+
minH: 1,
177+
minW: 1,
178+
maxH: Infinity,
179+
maxW: Infinity,
180+
isDraggable: true,
181+
isResizable: true,
182+
useCssTransforms: true,
183+
177184
isDragging: false,
178185
dragging: null,
179186
isResizing: false,
@@ -182,10 +189,23 @@
182189
lastY: NaN,
183190
lastW: NaN,
184191
lastH: NaN,
185-
className: ""
192+
className: "",
193+
style: ""
186194
}
187195
},
188196
ready: function() {
197+
this.cols = this.$parent.colNum;
198+
this.rowHeight = this.$parent.rowHeight;
199+
this.margin = this.$parent.margin;
200+
this.maxRows = this.$parent.maxRows;
201+
this.minH = this.$parent.minH;
202+
this.minW = this.$parent.minW;
203+
this.maxH = this.$parent.maxH;
204+
this.maxW = this.$parent.maxW;
205+
this.isDraggable = this.$parent.isDraggable;
206+
this.isResizable = this.$parent.isResizable;
207+
this.useCssTransforms = this.$parent.useCssTransforms;
208+
// this.createStyle();
189209
// var self = this;
190210
if (this.isDraggable) {
191211
var element = this.$els.item;
@@ -203,6 +223,11 @@
203223
}
204224
//this.pos = this.calcPosition();
205225
},
226+
/*watch: {
227+
cols: function() {
228+
this.createStyle();
229+
}
230+
},*/
206231
computed: {
207232
createStyle: function() {
208233
var pos = this.calcPosition(this.x, this.y, this.w, this.h);
@@ -213,7 +238,7 @@
213238
if (this.useCssTransforms) {
214239
style = setTransform(pos.top, pos.left, pos.width, pos.height);
215240
}
216-
// top,left (slow)
241+
// top,left (slow)
217242
else {
218243
style = setTopLeft(pos.top, pos.left, pos.width, pos.height);
219244
}
@@ -222,13 +247,30 @@
222247
},
223248
},
224249
methods: {
250+
createStyle: function() {
251+
var pos = this.calcPosition(this.x, this.y, this.w, this.h);
252+
//const {usePercentages, containerWidth, useCssTransforms} = this.props;
253+
254+
let style;
255+
// CSS Transforms support (default)
256+
if (this.useCssTransforms) {
257+
style = setTransform(pos.top, pos.left, pos.width, pos.height);
258+
}
259+
// top,left (slow)
260+
else {
261+
style = setTopLeft(pos.top, pos.left, pos.width, pos.height);
262+
}
263+
264+
this.style = createMarkup(style);
265+
},
225266
handleResize: function(event) {
226267
const position = getControlPosition(event);
227268
// Get the current drag point from the event. This is used as the offset.
228269
if (position == null) return; // not possible but satisfies flow
229270
const {x, y} = position;
230271
231-
if (x < 100 || y < 100) {
272+
if (x < 100 && y < 100) {
273+
// console.log("### NO => x=" + x + ", y=" + y);
232274
return;
233275
}
234276
const newSize = {width: 0, height: 0};
@@ -267,7 +309,11 @@
267309
// Get new WH
268310
var pos = this.calcWH(newSize.height, newSize.width);
269311
this.w = pos.w;
270-
this.h = pos.h;
312+
if (pos.h >= 1) {
313+
this.h = pos.h;
314+
} else {
315+
this.h = 1;
316+
}
271317
272318
var shouldUpdate = false;
273319
if (this.lastW !== x && this.lastH !== y) {
@@ -278,7 +324,7 @@
278324
this.lastH = y;
279325
280326
if (shouldUpdate) {
281-
this.$dispatch("resizeEvent", event.type, this.i, this.h, this.w);
327+
this.$dispatch("resizeEvent", event.type, this.id, this.h, this.w);
282328
}
283329
284330
},
@@ -351,12 +397,9 @@
351397
this.lastY = y;
352398
353399
if (shouldUpdate) {
354-
this.$dispatch("dragEvent", eventName, this.i, this.x, this.y);
400+
this.$dispatch("dragEvent", eventName, this.id, this.x, this.y);
355401
}
356402
},
357-
calcColWidth: function() {
358-
return (this.containerWidth - (this.margin[0] * (this.cols + 1))) / this.cols;
359-
},
360403
calcPosition: function(x, y, w, h) {
361404
const colWidth = this.calcColWidth();
362405
@@ -409,7 +452,9 @@
409452
},
410453
// Helper for generating column width
411454
calcColWidth() {
412-
return (this.containerWidth - (this.margin[0] * (this.cols + 1))) / this.cols;
455+
var colWidth = (this.containerWidth - (this.margin[0] * (this.cols + 1))) / this.cols;
456+
// console.log("### COLS=" + this.cols + " COL WIDTH=" + colWidth);
457+
return colWidth;
413458
},
414459
415460
/**
@@ -432,6 +477,11 @@
432477
h = Math.max(Math.min(h, this.maxRows - this.y), 0);
433478
return {w, h};
434479
}
480+
},
481+
events: {
482+
updateWidth: function(width) {
483+
this.containerWidth = width;
484+
},
435485
}
436486
}
437487
</script>

‎src/GridLayout.vue

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<div class="vue-grid-layout container" :style="mergedStyle">
3-
<grid-item v-for="item in layout"
3+
<slot></slot>
4+
<!--grid-item v-for="item in layout"
45
:cols="cols"
56
:container-width="width"
67
:margin="margin"
@@ -13,9 +14,10 @@
1314
:y.sync="item.y"
1415
:w.sync="item.w"
1516
:h.sync="item.h"
16-
:i="item.i"
17+
:id="item.i"
18+
:component="item.component"
1719
>
18-
</grid-item>
20+
</grid-item-->
1921
</div>
2022
</template>
2123
<style>
@@ -40,7 +42,7 @@
4042
type: Boolean,
4143
default: true
4244
},
43-
cols: {
45+
colNum: {
4446
type: Number,
4547
default: 12
4648
},
@@ -98,9 +100,10 @@
98100
watch: {
99101
width: function() {
100102
this.$nextTick(function() {
103+
this.$broadcast("updateWidth", this.width);
101104
this.updateHeight();
102105
});
103-
}
106+
},
104107
},
105108
methods: {
106109
updateHeight: function() {
@@ -119,34 +122,34 @@
119122
}
120123
},
121124
events: {
122-
dragEvent: function(eventName, i, x, y) {
125+
dragEvent: function(eventName, id, x, y) {
123126
if (eventName === "drag" && x == 0 && y == 0) {
124127
return;
125128
}
126-
// console.log(eventName + " i=" + i + ", x=" + x + ", y=" + y);
127-
var l = getLayoutItem(this.layout, i);
129+
// console.log(eventName + " id=" + id + ", x=" + x + ", y=" + y);
130+
var l = getLayoutItem(this.layout, id);
128131
129132
/*
130133
// Create placeholder (display only)
131134
var placeholder = {
132-
w: l.w, h: l.h, x: l.x, y: l.y, placeholder: true, i: i
135+
w: l.w, h: l.h, x: l.x, y: l.y, placeholder: true, id: id
133136
};
134137
*/
135138
136139
// Move the element to the dragged ___location.
137140
this.layout = moveElement(this.layout, l, x, y, true);
138141
this.layout = compact(this.layout, this.verticalCompact);
139142
},
140-
resizeEvent: function(eventName, i, h, w) {
143+
resizeEvent: function(eventName, id, h, w) {
141144
if (eventName === "drag" && h < -40 && w < -40) {
142145
return;
143146
}
144-
// console.log(eventName + " i=" + i);
147+
// console.log(eventName + " id=" + id);
145148
146149
/*
147150
// Create placeholder (display only)
148151
var placeholder = {
149-
w: l.w, h: l.h, x: l.x, y: l.y, placeholder: true, i: i
152+
w: l.w, h: l.h, x: l.x, y: l.y, placeholder: true, id: id
150153
};
151154
*/
152155

‎src/ResponsiveGridLayout.vue

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -140,6 +140,11 @@
140140
141141
this.layout = layout;
142142
this.colNum = newColNum;
143+
144+
console.log("#### COLS => " + this.colNum);
145+
this.$children.forEach(function(item) {
146+
item.cols = newColNum;
147+
});
143148
// this.lastBreakpoint = this.breakpoint;
144149
compact(this.layout, this.verticalCompact);
145150
}

‎src/TextItem.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<span class="text">=> {{text}}</span>
2+
<span class="text">{{text}}</span>
33
</template>
44
<style>
55
</style>

‎src/app.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,17 +27,18 @@ Vue.config.debug = true;
2727
Vue.config.devtools = true;
2828

2929
import TextItem from './TextItem.vue';
30+
import GridItem from './GridItem.vue';
3031
import GridLayout from './GridLayout.vue';
3132
import ResponsiveGridLayout from './ResponsiveGridLayout.vue';
3233

33-
// import {compact} from './utils';
34+
Vue.component('text-item', TextItem)
3435

3536
new Vue({
3637
el: '#app',
3738
components: {
3839
ResponsiveGridLayout,
3940
GridLayout,
40-
TextItem,
41+
GridItem,
4142
},
4243
data: {
4344
// initialLayout: generateLayout()

0 commit comments

Comments
 (0)