Skip to content
This repository was archived by the owner on Jan 5, 2023. It is now read-only.

Commit 2e10f73

Browse files
author
bensladden
committed
fixed resizable prop bug
1 parent 3cef580 commit 2e10f73

9 files changed

+342
-337
lines changed

‎dist/vue-responsive-dash.common.js‎

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

‎dist/vue-responsive-dash.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-responsive-dash.umd.js‎

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

‎dist/vue-responsive-dash.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-responsive-dash.umd.min.js‎

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-responsive-dash.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: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "vue-responsive-dash",
3-
"version": "0.3.23",
3+
"version": "0.3.24",
44
"keywords": [
55
"vuejs",
66
"vue",

‎src/App.vue‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,13 +15,19 @@
1515
v-for="item in layout.items"
1616
v-bind.sync="item"
1717
:key="item.id"
18+
:resizable="resizable"
19+
:draggable="draggable"
1820
>
1921
<div class="content">{{ JSON.stringify(item, null, 2) }}</div>
2022
</Dash-Item>
2123
</Dash-Layout>
2224
</dashboard>
2325
<button @click="compact = !compact">toggle compact</button> {{ compact }}
24-
<button @click="addItem">Add Item</button> Current Breakpoint:
26+
<button @click="resizable = !resizable">toggle resizable</button>
27+
{{ resizable }}
28+
<button @click="draggable = !draggable">toggle draggable</button>
29+
{{ draggable }} <button @click="addItem">Add Item</button> Current
30+
Breakpoint:
2531
{{ currentBreakpoint }}
2632
</div>
2733
</template>
@@ -41,6 +47,8 @@ export default {
4147
data() {
4248
return {
4349
compact: true,
50+
draggable: true,
51+
resizable: true,
4452
margin: { x: 20, y: 20 },
4553
layouts: [
4654
{

‎src/components/DashItem.vue‎

Lines changed: 162 additions & 163 deletions
Original file line numberDiff line numberDiff line change
@@ -26,166 +26,165 @@
2626
v-displace="{ customMove: onMove, ignoreFn: ignoreMove }"
2727
@onMouseDown="onMoveStart"
2828
@onMouseUp="onMoveEnd"
29+
></div>
30+
<div
31+
draggable
32+
:id="id + '-resizeTop'"
33+
:ref="id + '-resizeTop'"
34+
:style="{
35+
height: resizeHandleSize + 'px',
36+
left: 0,
37+
right: 0,
38+
cursor: 'ns-resize',
39+
position: 'absolute',
40+
zIndex: resizableZIndex,
41+
}"
42+
v-if="resizeTop && !dragging"
43+
v-displace="{ customMove: onResize }"
44+
@onMouseDown="onResizeStart($event, 'top')"
45+
@onMouseUp="onResizeEnd($event)"
46+
>
47+
<slot name="resizeTop"></slot>
48+
</div>
49+
<div
50+
draggable
51+
:id="id + '-resizeBottom'"
52+
:ref="id + '-resizeBottom'"
53+
:style="{
54+
height: resizeHandleSize + 'px',
55+
left: 0 + 'px',
56+
right: 0 + 'px',
57+
bottom: 0 + 'px',
58+
cursor: 'ns-resize',
59+
position: 'absolute',
60+
zIndex: resizableZIndex,
61+
}"
62+
v-if="resizeBottom && !dragging"
63+
v-displace="{ customMove: onResize }"
64+
@onMouseDown="onResizeStart($event, 'bottom')"
65+
@onMouseUp="onResizeEnd($event)"
66+
>
67+
<slot name="resizeBottom"></slot>
68+
</div>
69+
<div
70+
draggable
71+
:id="id + '-resizeLeft'"
72+
:ref="id + '-resizeLeft'"
73+
:style="{
74+
width: resizeHandleSize + 'px',
75+
top: 0 + 'px',
76+
bottom: 0 + 'px',
77+
left: 0 + 'px',
78+
cursor: 'ew-resize',
79+
position: 'absolute',
80+
zIndex: resizableZIndex,
81+
}"
82+
v-if="resizeLeft && !dragging"
83+
v-displace="{ customMove: onResize }"
84+
@onMouseDown="onResizeStart($event, 'left')"
85+
@onMouseUp="onResizeEnd($event)"
86+
>
87+
<slot name="resizeLeft"></slot>
88+
</div>
89+
<div
90+
draggable
91+
:id="id + '-resizeRight'"
92+
:ref="id + '-resizeRight'"
93+
:style="{
94+
width: resizeHandleSize + 'px',
95+
top: 0 + 'px',
96+
bottom: 0 + 'px',
97+
right: 0 + 'px',
98+
cursor: 'ew-resize',
99+
position: 'absolute',
100+
zIndex: resizableZIndex,
101+
}"
102+
v-if="resizeRight && !dragging"
103+
v-displace="{ customMove: onResize }"
104+
@onMouseDown="onResizeStart($event, 'right')"
105+
@onMouseUp="onResizeEnd($event)"
106+
>
107+
<slot name="resizeRight"></slot>
108+
</div>
109+
<div
110+
draggable
111+
:id="id + '-resizeTopLeft'"
112+
:ref="id + '-resizeTopLeft'"
113+
:style="{
114+
width: resizeHandleSize * 2 + 'px',
115+
height: resizeHandleSize * 2 + 'px',
116+
top: resizeHandleSize / -2 + 'px',
117+
left: resizeHandleSize / -2 + 'px',
118+
cursor: 'nw-resize',
119+
position: 'absolute',
120+
zIndex: resizableZIndex,
121+
}"
122+
v-if="resizeTopLeft && !dragging"
123+
v-displace="{ customMove: onResize }"
124+
@onMouseDown="onResizeStart($event, 'top left')"
125+
@onMouseUp="onResizeEnd($event)"
126+
>
127+
<slot name="resizeTopLeft"></slot>
128+
</div>
129+
<div
130+
draggable
131+
:id="id + '-resizeTopRight'"
132+
:ref="id + '-resizeTopRight'"
133+
:style="{
134+
width: resizeHandleSize * 2 + 'px',
135+
height: resizeHandleSize * 2 + 'px',
136+
top: resizeHandleSize / -2 + 'px',
137+
right: resizeHandleSize / -2 + 'px',
138+
cursor: 'ne-resize',
139+
position: 'absolute',
140+
zIndex: resizableZIndex,
141+
}"
142+
v-if="resizeTopRight && !dragging"
143+
v-displace="{ customMove: onResize }"
144+
@onMouseDown="onResizeStart($event, 'top right')"
145+
@onMouseUp="onResizeEnd($event)"
146+
>
147+
<slot name="resizeTopRight"></slot>
148+
</div>
149+
<div
150+
draggable
151+
:id="id + '-resizeBottomLeft'"
152+
:ref="id + '-resizeBottomLeft'"
153+
:style="{
154+
width: resizeHandleSize * 2 + 'px',
155+
height: resizeHandleSize * 2 + 'px',
156+
bottom: resizeHandleSize / -2 + 'px',
157+
left: resizeHandleSize / -2 + 'px',
158+
cursor: 'ne-resize',
159+
position: 'absolute',
160+
zIndex: resizableZIndex,
161+
}"
162+
v-if="resizeBottomLeft && !dragging"
163+
v-displace="{ customMove: onResize }"
164+
@onMouseDown="onResizeStart($event, 'bottom left')"
165+
@onMouseUp="onResizeEnd($event)"
166+
>
167+
<slot name="resizeBottomLeft"></slot>
168+
</div>
169+
<div
170+
draggable
171+
:id="id + '-resizeBottomRight'"
172+
:ref="id + '-resizeBottomRight'"
173+
:style="{
174+
width: resizeHandleSize * 2 + 'px',
175+
height: resizeHandleSize * 2 + 'px',
176+
bottom: resizeHandleSize / -2 + 'px',
177+
right: resizeHandleSize / -2 + 'px',
178+
cursor: 'nw-resize',
179+
position: 'absolute',
180+
zIndex: resizableZIndex,
181+
}"
182+
v-if="resizeBottomRight && !dragging"
183+
v-displace="{ customMove: onResize }"
184+
@onMouseDown="onResizeStart($event, 'bottom right')"
185+
@onMouseUp="onResizeEnd($event)"
29186
>
30-
<div
31-
draggable
32-
:id="id + '-resizeTop'"
33-
:ref="id + '-resizeTop'"
34-
:style="{
35-
height: resizeHandleSize + 'px',
36-
left: 0,
37-
right: 0,
38-
cursor: 'ns-resize',
39-
position: 'absolute',
40-
zIndex: resizableZIndex,
41-
}"
42-
v-if="resizeTop && !dragging"
43-
v-displace="{ customMove: onResize }"
44-
@onMouseDown="onResizeStart($event, 'top')"
45-
@onMouseUp="onResizeEnd($event)"
46-
>
47-
<slot name="resizeTop"></slot>
48-
</div>
49-
<div
50-
draggable
51-
:id="id + '-resizeBottom'"
52-
:ref="id + '-resizeBottom'"
53-
:style="{
54-
height: resizeHandleSize + 'px',
55-
left: 0 + 'px',
56-
right: 0 + 'px',
57-
bottom: 0 + 'px',
58-
cursor: 'ns-resize',
59-
position: 'absolute',
60-
zIndex: resizableZIndex,
61-
}"
62-
v-if="resizeBottom && !dragging"
63-
v-displace="{ customMove: onResize }"
64-
@onMouseDown="onResizeStart($event, 'bottom')"
65-
@onMouseUp="onResizeEnd($event)"
66-
>
67-
<slot name="resizeBottom"></slot>
68-
</div>
69-
<div
70-
draggable
71-
:id="id + '-resizeLeft'"
72-
:ref="id + '-resizeLeft'"
73-
:style="{
74-
width: resizeHandleSize + 'px',
75-
top: 0 + 'px',
76-
bottom: 0 + 'px',
77-
left: 0 + 'px',
78-
cursor: 'ew-resize',
79-
position: 'absolute',
80-
zIndex: resizableZIndex,
81-
}"
82-
v-if="resizeLeft && !dragging"
83-
v-displace="{ customMove: onResize }"
84-
@onMouseDown="onResizeStart($event, 'left')"
85-
@onMouseUp="onResizeEnd($event)"
86-
>
87-
<slot name="resizeLeft"></slot>
88-
</div>
89-
<div
90-
draggable
91-
:id="id + '-resizeRight'"
92-
:ref="id + '-resizeRight'"
93-
:style="{
94-
width: resizeHandleSize + 'px',
95-
top: 0 + 'px',
96-
bottom: 0 + 'px',
97-
right: 0 + 'px',
98-
cursor: 'ew-resize',
99-
position: 'absolute',
100-
zIndex: resizableZIndex,
101-
}"
102-
v-if="resizeRight && !dragging"
103-
v-displace="{ customMove: onResize }"
104-
@onMouseDown="onResizeStart($event, 'right')"
105-
@onMouseUp="onResizeEnd($event)"
106-
>
107-
<slot name="resizeRight"></slot>
108-
</div>
109-
<div
110-
draggable
111-
:id="id + '-resizeTopLeft'"
112-
:ref="id + '-resizeTopLeft'"
113-
:style="{
114-
width: resizeHandleSize * 2 + 'px',
115-
height: resizeHandleSize * 2 + 'px',
116-
top: resizeHandleSize / -2 + 'px',
117-
left: resizeHandleSize / -2 + 'px',
118-
cursor: 'nw-resize',
119-
position: 'absolute',
120-
zIndex: resizableZIndex,
121-
}"
122-
v-if="resizeTopLeft && !dragging"
123-
v-displace="{ customMove: onResize }"
124-
@onMouseDown="onResizeStart($event, 'top left')"
125-
@onMouseUp="onResizeEnd($event)"
126-
>
127-
<slot name="resizeTopLeft"></slot>
128-
</div>
129-
<div
130-
draggable
131-
:id="id + '-resizeTopRight'"
132-
:ref="id + '-resizeTopRight'"
133-
:style="{
134-
width: resizeHandleSize * 2 + 'px',
135-
height: resizeHandleSize * 2 + 'px',
136-
top: resizeHandleSize / -2 + 'px',
137-
right: resizeHandleSize / -2 + 'px',
138-
cursor: 'ne-resize',
139-
position: 'absolute',
140-
zIndex: resizableZIndex,
141-
}"
142-
v-if="resizeTopRight && !dragging"
143-
v-displace="{ customMove: onResize }"
144-
@onMouseDown="onResizeStart($event, 'top right')"
145-
@onMouseUp="onResizeEnd($event)"
146-
>
147-
<slot name="resizeTopRight"></slot>
148-
</div>
149-
<div
150-
draggable
151-
:id="id + '-resizeBottomLeft'"
152-
:ref="id + '-resizeBottomLeft'"
153-
:style="{
154-
width: resizeHandleSize * 2 + 'px',
155-
height: resizeHandleSize * 2 + 'px',
156-
bottom: resizeHandleSize / -2 + 'px',
157-
left: resizeHandleSize / -2 + 'px',
158-
cursor: 'ne-resize',
159-
position: 'absolute',
160-
zIndex: resizableZIndex,
161-
}"
162-
v-if="resizeBottomLeft && !dragging"
163-
v-displace="{ customMove: onResize }"
164-
@onMouseDown="onResizeStart($event, 'bottom left')"
165-
@onMouseUp="onResizeEnd($event)"
166-
>
167-
<slot name="resizeBottomLeft"></slot>
168-
</div>
169-
<div
170-
draggable
171-
:id="id + '-resizeBottomRight'"
172-
:ref="id + '-resizeBottomRight'"
173-
:style="{
174-
width: resizeHandleSize * 2 + 'px',
175-
height: resizeHandleSize * 2 + 'px',
176-
bottom: resizeHandleSize / -2 + 'px',
177-
right: resizeHandleSize / -2 + 'px',
178-
cursor: 'nw-resize',
179-
position: 'absolute',
180-
zIndex: resizableZIndex,
181-
}"
182-
v-if="resizeBottomRight && !dragging"
183-
v-displace="{ customMove: onResize }"
184-
@onMouseDown="onResizeStart($event, 'bottom right')"
185-
@onMouseUp="onResizeEnd($event)"
186-
>
187-
<slot name="resizeBottomRight"></slot>
188-
</div>
187+
<slot name="resizeBottomRight"></slot>
189188
</div>
190189
<slot></slot>
191190
</div>
@@ -307,16 +306,16 @@ export default {
307306
}
308307
},
309308
resizeTop() {
310-
return this.resizeEdges.includes("top");
309+
return this.resizable && this.resizeEdges.includes("top");
311310
},
312311
resizeBottom() {
313-
return this.resizeEdges.includes("bottom");
312+
return this.resizable && this.resizeEdges.includes("bottom");
314313
},
315314
resizeLeft() {
316-
return this.resizeEdges.includes("left");
315+
return this.resizable && this.resizeEdges.includes("left");
317316
},
318317
resizeRight() {
319-
return this.resizeEdges.includes("right");
318+
return this.resizable && this.resizeEdges.includes("right");
320319
},
321320
resizeTopLeft() {
322321
return this.resizeTop && this.resizeLeft;

0 commit comments

Comments
 (0)