Merge pull request jbaysolutions#5 from jbaysolutions/vue2

Vue 2

Author: gmsa

README.md

@@ -1,10 +1,12 @@
 # vue-grid-layout
 
-vue-grid-layout is a grid layout system, like [Gridster](http://gridster.net), for Vue.js.
+vue-grid-layout is a grid layout system, like [Gridster](http://gridster.net), for Vue.js. **Heavily inspired in [React-Grid-Layout](https://github.com/STRML/react-grid-layout)**
 
+### **Current version:** 2.0.0 (Supports Vue 2.0+)
 
-**Heavily inspired in [React-Grid-Layout](https://github.com/STRML/react-grid-layout)**
+### **For Vue 1 use version [1.0.0](https://github.com/jbaysolutions/vue-grid-layout/tree/1.0.0)** 
 
+<br/>
 
 [**[Demo](https://jbaysolutions.github.io/vue-grid-layout/examples/01-basic.html) | [Changelog](/CHANGELOG.md)**]
 
@@ -50,7 +52,13 @@ Install the vue-grid-layout [package](https://www.npmjs.org/package/vue-grid-lay
 
 ## Usage
 
-npm install vue-grid-layout
+    npm install vue-grid-layout
+
+or include the script in your html (download from [releases](https://github.com/jbaysolutions/vue-grid-layout/releases)):
+ 
+```html
+    <script src="vue-grid-layout.min.js"></script>
+```` 
 
 ```javascript
 
@@ -96,7 +104,7 @@ npm install vue-grid-layout
 ````html
 
     <grid-layout
-            :layout.sync="layout"
+            :layout="layout"
             :col-num="12"
             :row-height="30"
             :is-draggable="true"
@@ -107,10 +115,10 @@ npm install vue-grid-layout
     >
 
         <grid-item v-for="item in layout"
-                   :x.sync="item.x"
-                   :y.sync="item.y"
-                   :w.sync="item.w"
-                   :h.sync="item.h"
+                   :x="item.x"
+                   :y="item.y"
+                   :w="item.w"
+                   :h="item.h"
                    :i="item.i">
             {{item.i}}
         </grid-item>

dist/vue-grid-layout.js

@@ -21,12 +21,22 @@ <h1>Vue Grid Layout Example 1 - Basic</h1>
             </div>
         </div>
         <div id="content">
-            <grid-layout :layout.sync="layout" :col-num="12" :row-height="30" :is-draggable="true" :vertical-compact="true">
+            <!--<button @click="decreaseWidth">Decrease Width</button>
+            <button @click="increaseWidth">Increase Width</button>
+            <button @click="addItem">Add an item</button>-->
+            <grid-layout :layout="layout"
+                         :col-num="12"
+                         :row-height="30"
+                         :is-draggable="true"
+                         :is-resizable="true"
+                         :vertical-compact="true"
+                         :use-css-transforms="true"
+            >
                 <grid-item v-for="item in layout"
-                           :x.sync="item.x"
-                           :y.sync="item.y"
-                           :w.sync="item.w"
-                           :h.sync="item.h"
+                           :x="item.x"
+                           :y="item.y"
+                           :w="item.w"
+                           :h="item.h"
                            :i="item.i"
                         >
                     <span class="text">{{item.i}}</span>
@@ -35,7 +45,7 @@ <h1>Vue Grid Layout Example 1 - Basic</h1>
         </div>
 
     </div>
-    <script src="vue.js"></script>
+    <script src="vue.min.js"></script>
     <script src="../dist/vue-grid-layout.js"></script>
     <script src="01-basic.js"></script>
 </body>

dist/vue-grid-layout.min.js

@@ -37,10 +37,40 @@ new Vue({
     },
     data: {
         layout: testLayout,
+        index: 0
     },
-});
+/*
+    mounted: function () {
+        this.index = this.layout.length;
+    },
+    methods: {
+        increaseWidth: function(item) {
+            var width = document.getElementById("content").offsetWidth;
+            width += 20;
+            document.getElementById("content").style.width = width+"px";
+        },
+        decreaseWidth: function(item) {
 
+            var width = document.getElementById("content").offsetWidth;
+            width -= 20;
+            document.getElementById("content").style.width = width+"px";
+        },
+        removeItem: function(item) {
+            //console.log("### REMOVE " + item.i);
+            this.layout.splice(this.layout.indexOf(item), 1);
+        },
+        addItem: function() {
+            var self = this;
+            //console.log("### LENGTH: " + this.layout.length);
+            var item = {"x":0,"y":0,"w":2,"h":2,"i":this.index+"", whatever: "bbb"};
+            this.index++;
+            this.layout.push(item);
+        }
+    }
+*/
+});
 
+/*
 function generateLayout() {
     return _.map(_.range(0, 25), function (item, i) {
         var y = Math.ceil(Math.random() * 4) + 1;
@@ -53,7 +83,7 @@ function generateLayout() {
             static: Math.random() < 0.05
         };
     });
-}
+}*/