Skip to content

Commit 1fc82eb

Browse files
gmsagmsa
committed
1 parent ca6c890 commit 1fc82eb

File tree

9 files changed

+210
-143
lines changed

9 files changed

+210
-143
lines changed

‎index.html

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,7 @@
99
<body>
1010
<h1>Vue Grid Layout</h1>
1111
<div id="app" style="width: 100%;">
12-
<!--<pre>{{ $data | json }}</pre>-->
13-
<!--<pre>{{ layouts | json }}</pre>-->
12+
<!--<pre>{{ layout | json }}</pre>-->
1413
<div>
1514
<div class="layoutJSON">
1615
Displayed as <code>[x, y, w, h]</code>:
@@ -27,15 +26,15 @@ <h1>Vue Grid Layout</h1>
2726
<button @click="addItem">Add an item</button>
2827
<br/>
2928
<grid-layout
30-
:layout.sync="layout"
29+
:layout="layout"
3130
:col-num="12"
3231
:row-height="30"
3332
:is-draggable="true"
3433
:is-resizable="true"
3534
:vertical-compact="true"
36-
:margin="[5, 5]"
3735
:use-css-transforms="true"
3836
>
37+
<!--
3938
<grid-item v-for="item in layout"
4039
:x.sync="item.x"
4140
:y.sync="item.y"
@@ -46,9 +45,9 @@ <h1>Vue Grid Layout</h1>
4645
:i="item.i">
4746
<test-element :text="item.i"></test-element>
4847
</grid-item>
48+
-->
4949
</grid-layout>
5050
</div>
51-
5251
</div>
5352
<script src="node_modules/vue/dist/vue.js"></script>
5453
<script src="build/bundle.js"></script>

‎package.json

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-grid-layout",
3-
"version": "1.0.0",
3+
"version": "2.0.0",
44
"description": "A draggable and resizable grid layout, as a Vue component.",
55
"keywords": [
66
"grid",
@@ -40,13 +40,13 @@
4040
"babel-preset-es2015": "^6.5.0",
4141
"babel-preset-es2015-loose": "^7.0.0",
4242
"babel-preset-stage-1": "^6.5.0",
43-
"css-loader": "^0.23.1",
43+
"css-loader": "^0.25.0",
4444
"style-loader": "^0.13.1",
4545
"stylus-loader": "^1.2.1",
46-
"vue-html-loader": "^1.0.0",
4746
"vue-style-loader": "^1.0.0",
48-
"vue-loader": "^8.5.2",
49-
"vue": "^1.0.26",
47+
"vue-loader": "^10.0.0",
48+
"vue-template-compiler": "^2.1.8",
49+
"vue": "^2.1.8",
5050
"webpack": "^1.13.1",
5151
"webpack-dev-server": "^1.14.1",
5252
"extract-text-webpack-plugin": "^1.0.1",

‎src/GridItem.vue

Lines changed: 55 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,11 @@
11
<template>
2-
<div v-el:item
2+
<div ref="item"
33
class="vue-grid-item"
44
:class="{ 'vue-resizable' : isResizable, 'resizing' : isResizing, 'vue-draggable-dragging' : isDragging, 'cssTransforms' : useCssTransforms }"
55
:style="style"
66
>
77
<slot></slot>
8-
<!--<pre>
9-
x: {{ x | json}}
10-
y: {{ y | json}}
11-
w: {{ w | json}}
12-
h: {{ h | json}}
13-
</pre>-->
14-
<span v-if="isResizable" v-el:handle class="vue-resizable-handle"></span>
8+
<span v-if="isResizable" ref="handle" class="vue-resizable-handle"></span>
159
</div>
1610
</template>
1711
<style>
@@ -62,6 +56,7 @@
6256
<script>
6357
import {setTopLeft, setTransform, createMarkup, getLayoutItem} from './utils';
6458
import {getControlPosition, offsetXYFromParentOf, createCoreData} from './draggableUtils';
59+
import eventBus from './eventBus';
6560
6661
var interact = require("interact.js");
6762
@@ -169,41 +164,51 @@
169164
style: {}
170165
}
171166
},
172-
ready: function() {
173-
this.cols = this.$parent.colNum;
174-
this.rowHeight = this.$parent.rowHeight;
175-
this.margin = this.$parent.margin;
176-
this.maxRows = this.$parent.maxRows;
177-
this.isDraggable = this.$parent.isDraggable;
178-
this.isResizable = this.$parent.isResizable;
179-
this.useCssTransforms = this.$parent.useCssTransforms;
180-
this.createStyle();
181-
182-
var self = this;
183-
if (this.isDraggable) {
184-
if (this.interactObj == null) {
185-
this.interactObj = interact(this.$els.item);
186-
}
187-
this.interactObj
167+
created () {
168+
eventBus.$on('updateWidth', function(width) {
169+
this.updateWidth(width);
170+
});
171+
eventBus.$on('compact', function(layout) {
172+
this.compact(layout);
173+
});
174+
},
175+
mounted: function() {
176+
//this.$nextTick(function () {
177+
this.cols = this.$parent.colNum;
178+
this.rowHeight = this.$parent.rowHeight;
179+
this.margin = this.$parent.margin !== undefined ? this.$parent.margin : [10, 10];
180+
this.maxRows = this.$parent.maxRows;
181+
this.isDraggable = this.$parent.isDraggable;
182+
this.isResizable = this.$parent.isResizable;
183+
this.useCssTransforms = this.$parent.useCssTransforms;
184+
this.createStyle();
185+
186+
var self = this;
187+
if (this.isDraggable) {
188+
if (this.interactObj == null) {
189+
this.interactObj = interact(this.$refs.item);
190+
}
191+
this.interactObj
188192
.draggable({
189193
})
190194
.on('dragstart dragmove dragend', function(event) {
191195
self.handleDrag(event);
192196
});
193-
}
194-
if (this.isResizable) {
195-
if (this.interactObj == null) {
196-
this.interactObj = interact(this.$els.item);
197197
}
198-
this.interactObj
198+
if (this.isResizable) {
199+
if (this.interactObj == null) {
200+
this.interactObj = interact(this.$refs.item);
201+
}
202+
this.interactObj
199203
.resizable({
200204
preserveAspectRatio: false,
201205
edges: {left: false, right: true, bottom: true, top: false}
202206
})
203207
.on('resizestart resizemove resizeend', function (event) {
204208
self.handleResize(event);
205209
});
206-
}
210+
}
211+
//});
207212
},
208213
watch: {
209214
cols: function() {
@@ -331,7 +336,7 @@
331336
this.lastW = x;
332337
this.lastH = y;
333338
334-
this.$dispatch("resizeEvent", event.type, this.i, this.x, this.y, this.h, this.w);
339+
this.$parent.resizeEvent(event.type, this.i, this.x, this.y, this.h, this.w);
335340
},
336341
handleDrag(event) {
337342
if (this.isResizing) return;
@@ -385,7 +390,7 @@
385390
this.lastX = x;
386391
this.lastY = y;
387392
388-
this.$dispatch("dragEvent", event.type, this.i, this.x, this.y, this.w, this.h);
393+
this.$parent.dragEvent(event.type, this.i, this.x, this.y, this.w, this.h);
389394
},
390395
calcPosition: function(x, y, w, h) {
391396
const colWidth = this.calcColWidth();
@@ -453,9 +458,25 @@
453458
w = Math.max(Math.min(w, this.cols - this.x), 0);
454459
h = Math.max(Math.min(h, this.maxRows - this.y), 0);
455460
return {w, h};
461+
},
462+
updateWidth: function(width, colNum) {
463+
this.containerWidth = width;
464+
if (colNum !== undefined && colNum !== null) {
465+
this.cols = colNum;
466+
}
467+
},
468+
compact: function(layout) {
469+
var l = getLayoutItem(layout, this.i);
470+
if (l !== undefined && l !== null) {
471+
this.x = l.x;
472+
this.y = l.y;
473+
this.h = l.h;
474+
this.w = l.w;
475+
}
476+
this.createStyle();
456477
}
457478
},
458-
events: {
479+
/*events: {
459480
updateWidth: function(width, colNum) {
460481
this.containerWidth = width;
461482
if (colNum !== undefined && colNum !== null) {
@@ -472,6 +493,6 @@
472493
}
473494
this.createStyle();
474495
}
475-
}
496+
}*/
476497
}
477498
</script>

0 commit comments

Comments
 (0)