Skip to content

Commit 6848f21

Browse files
gmsagmsa
committed
basic working version
1 parent e551007 commit 6848f21

19 files changed

+6428
-1233
lines changed

‎README.md

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,7 @@ vue-grid-layout is a grid layout system, like [Gridster](http://gridster.net), f
66

77
**Heavily inspired in [React-Grid-Layout](https://github.com/STRML/react-grid-layout)**
88

9-
It's responsive and supports breakpoints. Breakpoint layouts can be provided by the user
10-
or autogenerated.
11-
12-
13-
[**[Demo](https://jbaysolutions.github.io/vue-grid-layout/examples/0-basic-responsive.html) | [Changelog](/CHANGELOG.md)**]
9+
[**[Demo](https://jbaysolutions.github.io/vue-grid-layout/examples/1-basic.html) | [Changelog](/CHANGELOG.md)**]
1410

1511
<!--
1612
## Table of Contents
@@ -27,7 +23,6 @@ or autogenerated.
2723
2824
## Demos
2925
30-
1. [Showcase](https://strml.github.io/react-grid-layout/examples/0-showcase.html)
3126
3227
-->
3328

@@ -39,10 +34,8 @@ or autogenerated.
3934

4035
## Features
4136

42-
* 100% Vue.js - no jQuery
4337
* Draggable widgets
4438
* Resizable widgets
45-
* Static widgets
4639
* Bounds checking for dragging and resizing
4740
* Widgets may be added or removed without rebuilding grid
4841
* Layout can be serialized and restored
@@ -63,6 +56,7 @@ If you have a feature request, please add it as an issue or make a pull request.
6356
## TODO List
6457

6558
- [x] Basic grid layout
59+
- [ ] Responsive
6660
- [x] Draggable grid items
6761
- [x] Resizable grid items
6862
- [ ] Static elements

‎dist/vue-grid-layout.js

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

‎dist/vue-grid-layout.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.min.js

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

‎examples/01-basic-responsive.html

Lines changed: 0 additions & 46 deletions
This file was deleted.

‎examples/01-basic-responsive.js

Lines changed: 0 additions & 63 deletions
This file was deleted.

‎examples/02-basic.html renamed to ‎examples/01-basic.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
<link rel="stylesheet" href="app.css">
88
</head>
99
<body>
10-
<h1>Vue Grid Layout Example 2 - Basic</h1>
10+
<h1>Vue Grid Layout Example 1 - Basic</h1>
1111
<div id="app" style="width: 100%;">
1212
<!--<pre>{{ $data | json }}</pre>-->
1313
<div>
@@ -37,6 +37,6 @@ <h1>Vue Grid Layout Example 2 - Basic</h1>
3737
</div>
3838
<script src="vue.js"></script>
3939
<script src="../dist/vue-grid-layout.js"></script>
40-
<script src="02-basic.js"></script>
40+
<script src="01-basic.js"></script>
4141
</body>
4242
</html>

‎examples/02-basic.js renamed to ‎examples/01-basic.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,6 @@ new Vue({
3737
},
3838
data: {
3939
layout: testLayout,
40-
layouts: {lg: testLayout}
4140
},
4241
});
4342

‎examples/app.css

Lines changed: 41 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -21,68 +21,51 @@
2121

2222

2323

24-
/******* DRAG AND DROP *******/
25-
26-
/*
27-
.gu-mirror {
28-
position: fixed !important;
29-
margin: 0 !important;
30-
z-index: 9999 !important;
31-
opacity: 0.8;
32-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
33-
filter: alpha(opacity=80);
34-
}
35-
.gu-hide {
36-
display: none !important;
37-
}
38-
.gu-unselectable {
39-
-webkit-user-select: none !important;
40-
-moz-user-select: none !important;
41-
-ms-user-select: none !important;
42-
user-select: none !important;
24+
.vue-resizable-handle {
25+
z-index: 5000;
26+
position: absolute;
27+
width: 20px;
28+
height: 20px;
29+
bottom: 0;
30+
right: 0;
31+
background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/Pg08IS0tIEdlbmVyYXRvcjogQWRvYmUgRmlyZXdvcmtzIENTNiwgRXhwb3J0IFNWRyBFeHRlbnNpb24gYnkgQWFyb24gQmVhbGwgKGh0dHA6Ly9maXJld29ya3MuYWJlYWxsLmNvbSkgLiBWZXJzaW9uOiAwLjYuMSAgLS0+DTwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DTxzdmcgaWQ9IlVudGl0bGVkLVBhZ2UlMjAxIiB2aWV3Qm94PSIwIDAgNiA2IiBzdHlsZT0iYmFja2dyb3VuZC1jb2xvcjojZmZmZmZmMDAiIHZlcnNpb249IjEuMSINCXhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiDQl4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjZweCIgaGVpZ2h0PSI2cHgiDT4NCTxnIG9wYWNpdHk9IjAuMzAyIj4NCQk8cGF0aCBkPSJNIDYgNiBMIDAgNiBMIDAgNC4yIEwgNCA0LjIgTCA0LjIgNC4yIEwgNC4yIDAgTCA2IDAgTCA2IDYgTCA2IDYgWiIgZmlsbD0iIzAwMDAwMCIvPg0JPC9nPg08L3N2Zz4=');
32+
background-position: bottom right;
33+
padding: 0 3px 3px 0;
34+
background-repeat: no-repeat;
35+
background-origin: content-box;
36+
box-sizing: border-box;
37+
cursor: se-resize;
4338
}
44-
.gu-transit {
45-
opacity: 0.2;
46-
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
47-
filter: alpha(opacity=20);
48-
}
49-
*/
50-
/*
51-
* note that styling gu-mirror directly is a bad practice because it's too generic.
52-
* you're better off giving the draggable elements a unique class and styling that directly!
53-
*/
54-
/*
55-
.container div,
56-
.gu-mirror {
57-
!*padding: 10px;*!
58-
background-color: rgba(0, 0, 0, 0.2);
59-
transition: opacity 0.4s ease-in-out;
60-
}
61-
.container div {
62-
cursor: move;
63-
cursor: grab;
64-
cursor: -moz-grab;
65-
cursor: -webkit-grab;
66-
!*margin-bottom: 10px;*!
39+
40+
.vue-grid-item:not(.vue-grid-placeholder) {
41+
background: #ccc;
42+
border: 1px solid black;
6743
}
68-
.container div:last-child {
69-
!*margin-bottom: 0;*!
44+
45+
.vue-grid-item.resizing {
46+
opacity: 0.9;
7047
}
71-
.gu-mirror {
72-
cursor: grabbing;
73-
cursor: -moz-grabbing;
74-
cursor: -webkit-grabbing;
48+
49+
.vue-grid-item.static {
50+
background: #cce;
7551
}
76-
.container .ex-moved {
77-
background-color: #e74c3c;
52+
53+
.vue-grid-item .text {
54+
font-size: 24px;
55+
text-align: center;
56+
position: absolute;
57+
top: 0;
58+
bottom: 0;
59+
left: 0;
60+
right: 0;
61+
margin: auto;
62+
height: 24px;
7863
}
79-
.container.ex-over {
80-
background-color: rgba(255, 255, 255, 0.3);
64+
65+
.vue-grid-item .minMax {
66+
font-size: 12px;
8167
}
82-
.handle {
83-
!*padding: 0 5px;*!
84-
!*margin-right: 5px;*!
85-
background-color: rgba(0, 0, 0, 0.4);
86-
cursor: move;
68+
69+
.vue-grid-item .add {
70+
cursor: pointer;
8771
}
88-
*/

‎index.html

Lines changed: 2 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -26,34 +26,15 @@ <h1>Vue Grid Layout</h1>
2626
<button @click="increaseWidth">Increase Width</button>
2727
<button @click="addItem">Add an item</button>
2828
<br/>
29-
Current Breakpoint: {{breakpoint}} ({{colNum}} columns)
30-
<!--<responsive-grid-layout :layouts.sync="layouts"
31-
:layout.sync="layout"
32-
:col-num.sync="colNum"
33-
:breakpoint.sync="breakpoint"
34-
:row-height="30"
35-
:is-draggable="true"
36-
:vertical-compact="true">
37-
<grid-item v-for="item in layout"
38-
:x.sync="item.x"
39-
:y.sync="item.y"
40-
:w.sync="item.w"
41-
:h.sync="item.h"
42-
:i="item.i"
43-
>
44-
<span class="text">{{item.i}}</span>
45-
<button @click="removeItem(item)">REMOVE {{item.i}}</button>
46-
</grid-item>
47-
</responsive-grid-layout>-->
48-
<grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="true" :vertical-compact="true">
29+
<grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="true" :is-resizable="true" :vertical-compact="true">
4930
<grid-item v-for="item in layout"
5031
:x.sync="item.x"
5132
:y.sync="item.y"
5233
:w.sync="item.w"
5334
:h.sync="item.h"
5435
:i="item.i"
5536
>
56-
<span class="text">{{item.i}}</span>
37+
<test-element :text="item.i"></test-element>
5738
</grid-item>
5839
</grid-layout>
5940
</div>

0 commit comments

Comments
 (0)