Skip to content

Commit cee0421

Browse files
committed
code cleanup, setting up for 2.2.0 release
1 parent 693b891 commit cee0421

19 files changed

+25840
-39
lines changed

.gitignore

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
.DS_Store
22
node_modules
3-
/dist
3+
#/dist
4+
dist/demo.html
45

56
# local env files
67
.env.local

CHANGELOG.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
11
# Changelog
22

3+
## 2.2.0 (Sep X, 2018)
4+
5+
* changed project structure and build using Vue CLI
6+
* TODO
7+
38
## 2.1.13 (May 2, 2018)
49

510
* Resize event now also emits dimensions in pixels (thanks [buremba](https://github.com/buremba))

README.md

Lines changed: 31 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,12 @@
1-
# vue-grid-layout
1+
<h1 align="center">vue-grid-layout</h>
2+
3+
<p align="center">
4+
<a href="https://www.npmjs.com/package/vue-grid-layout"><img src="https://img.shields.io/npm/v/vue-grid-layout.svg"/> <img src="https://img.shields.io/npm/dm/vue-grid-layout.svg"/></a> <a href="https://vuejs.org/"><img src="https://img.shields.io/badge/vue-2.2.x-brightgreen.svg"/></a>
5+
</p>
26

37
vue-grid-layout is a grid layout system, like [Gridster](http://dsmorse.github.io/gridster.js/), for Vue.js. **Heavily inspired in [React-Grid-Layout](https://github.com/STRML/react-grid-layout)**
48

5-
### **Current version:** 2.1.13 (Supports Vue 2.2+)
9+
### **Current version:** 2.2.0 (Supports Vue 2.2+)
610

711
### **For Vue 2.1.10 and below use version [2.1.3](https://github.com/jbaysolutions/vue-grid-layout/tree/2.1.3)**
812
### **For Vue 1 use version [1.0.3](https://github.com/jbaysolutions/vue-grid-layout/tree/1.0.3)**
@@ -25,6 +29,10 @@ vue-grid-layout is a grid layout system, like [Gridster](http://dsmorse.github.i
2529
2630
2731
TODO UPDATE DOCS
32+
33+
Used guide for vue cli build: https://medium.com/justfrontendthings/how-to-create-and-publish-your-own-vuejs-component-library-on-npm-using-vue-cli-28e60943eed3
34+
Also check https://cli.vuejs.org/guide/build-targets.html#library
35+
2836
-->
2937

3038
#### Projects using vue-grid-layout
@@ -40,30 +48,42 @@ TODO UPDATE DOCS
4048
* Bounds checking for dragging and resizing
4149
* Widgets may be added or removed without rebuilding grid
4250
* Layout can be serialized and restored
43-
* Automatic RTL support
51+
* Automatic RTL support (resizing not working with RTL on 2.2.0)
4452

4553

4654
## Getting Started
4755

4856
### Installation
4957

50-
Install the vue-grid-layout [package](https://www.npmjs.org/package/vue-grid-layout) package using [npm](https://www.npmjs.com/):
58+
#### npm
5159

52-
npm install vue-grid-layout
60+
# install with npm
61+
npm install vue-grid-layout --save
62+
63+
# install with yarn
64+
yarn add vue-grid-layout
5365

5466

55-
### Usage
67+
Import the library
5668

57-
npm install vue-grid-layout
69+
```javascript
70+
import VueGridLayout from 'vue-grid-layout';
71+
```
72+
73+
74+
75+
#### browser
76+
77+
Include the browser-ready bundle (download from [releases](https://github.com/jbaysolutions/vue-grid-layout/releases)) in your page. The components will be automatically available.
5878

59-
or include the script in your html (download from [releases](https://github.com/jbaysolutions/vue-grid-layout/releases)):
60-
6179
```html
62-
<script src="vue-grid-layout.min.js"></script>
80+
<script src="vue-grid-layout.umd.min.js"></script>
6381
````
6482

65-
```javascript
6683

84+
### Usage
85+
86+
```javascript
6787
var testLayout = [
6888
{"x":0,"y":0,"w":2,"h":2,"i":"0"},
6989
{"x":2,"y":0,"w":2,"h":4,"i":"1"},
@@ -87,15 +107,8 @@ or include the script in your html (download from [releases](https://github.com/
87107
{"x":2,"y":6,"w":2,"h":2,"i":"19"}
88108
];
89109

90-
var GridLayout = VueGridLayout.GridLayout;
91-
var GridItem = VueGridLayout.GridItem;
92-
93110
new Vue({
94111
el: '#app',
95-
components: {
96-
GridLayout,
97-
GridItem,
98-
},
99112
data: {
100113
layout: testLayout,
101114
},

0 commit comments

Comments
 (0)