Merge pull request jbaysolutions#128 from marverix/master

README.md - Documentation

Author: gmsa

README.md

@@ -43,14 +43,16 @@ TODO UPDATE DOCS
 * Automatic RTL support
 
 
-## Installation
+## Getting Started
+
+### Installation
 
 Install the vue-grid-layout [package](https://www.npmjs.org/package/vue-grid-layout) package using [npm](https://www.npmjs.com/):
 
 	npm install vue-grid-layout
 
 
-## Usage
+### Usage
 
     npm install vue-grid-layout
 
@@ -126,10 +128,254 @@ or include the script in your html (download from [releases](https://github.com/
     </grid-layout>
 ```` 
 
-<!-- TODO DOCUMENTAR PROPS DE GridLayout E GridItem -->
 
+### Documentation
+
+#### Properties
+
+##### GridLayout
+
+* **layout**
+    
+    * type: `Array`
+    * required: `true`
+
+    This is the initial layout of the grid.
+
+    The value must be an `Array` of `Object` items. Each item must have `i`, `x`, `y`, `w` and `h` proprties. Please refer to `GridItem` documentation below for more informations.
+
+* **colNum**
+    
+    * type: `Number`
+    * required: `false`
+    * default: `12`
+
+    Says how many columns the grid has.
+
+    The value should be a _natural number_. 
+
+* **rowHeight**
+    
+    * type: `Number`
+    * required: `false`
+    * default: `150`
+
+    Says what is a height of a single row in pixels.
+
+* **maxRows**
+    
+    * type: `Number`
+    * required: `false`
+    * default: `Infinity`
+
+    Says what is a maximal number of rows in the grid.
+
+* **margin**
+    
+    * type: `Array`
+    * required: `false`
+    * default: `[10, 10]`
+
+    Says what are the margins of elements inside the grid.
+
+    The value must be a two-element `Array` of `Number`. Each value is expressed in pixels. The first element is a margin horizontally, the second element is a vertical margin.
+
+* **isDraggable**
+    
+    * type: `Boolean`
+    * required: `false`
+    * default: `true`
+
+    Says if the grids items are draggable.
+
+* **isResizable**
+    
+    * type: `Boolean`
+    * required: `false`
+    * default: `true`
+
+    Says if the grids items are resizable.
+
+* **isMirrored**
+    
+    * type: `Boolean`
+    * required: `false`
+    * default: `false`
+
+    Says if the RTL/LTR should be reversed.
+
+* **autoSize**
+    
+    * type: `Boolean`
+    * required: `false`
+    * default: `true`
+
+    Says if the container height should swells and contracts to fit contents.
+
+* **verticalCompact**
+    
+    * type: `Boolean`
+    * required: `false`
+    * default: `true`
+
+    Says if the layout should be compact vertically.
+
+* **useCssTransforms**
+    
+    * type: `Boolean`
+    * required: `false`
+    * default: `true`
+
+    Says if the CSS `transition-property: transform;` should be used.
+
+
+
+##### GridItem
+
+* **i**
+    
+    * type: `String`
+    * required: `true`
+
+    This is the unique identifier of the item.
+
+* **x**
+    
+    * type: `Number`
+    * required: `true`
+
+    Says what is a initial horizontal position of the item (in which column it should be placed).
+
+    The value must be a _whole number_. 
+
+* **y**
+    
+    * type: `Number`
+    * required: `true`
+
+    Says what is a initial vertical position of the item (in which row it should be placed).
+
+    The value must be a _whole number_. 
+
+* **w**
+    
+    * type: `Number`
+    * required: `true`
+
+    Says what is a initial width of the item.
+
+    The value is a number that is multiplied by `colWidth`.
+
+* **h**
+    
+    * type: `Number`
+    * required: `true`
+
+    Says what is a initial height of the item.
 
-### Events
+    The value is a number that is multiplied by `rowHeight`.
+
+* **minW**
+    
+    * type: `Number`
+    * required: `false`
+    * default: `1`
+
+    Says what is a minimal width of the item. If `w` will be smaller then `minW` then `w` will be set to `minW`.
+
+    The value is a number that is multiplied by `colWidth`.
+
+* **minH**
+    
+    * type: `Number`
+    * required: `false`
+    * default: `1`
+
+    Says what is a minimal hieght of the item. If `h` will be smaller then `minH` then `h` will be set to `minH`.
+
+    The value is a number that is multiplied by `rowHeight`.
+
+* **maxW**
+    
+    * type: `Number`
+    * required: `false`
+    * default: `Infinity`
+
+    Says what is a maximal width of the item. If `w` will be bigger then `maxW` then `w` will be set to `maxW`.
+
+    The value is a number that is multiplied by `colWidth`.
+
+* **maxH**
+    
+    * type: `Number`
+    * required: `false`
+    * default: `Infinity`
+
+    Says what is a maximal height of the item. If `h` will be bigger then `maxH` then `h` will be set to `maxH`.
+
+    The value is a number that is multiplied by `rowHeight`
+
+* **isDraggable**
+    
+    * type: `Boolean`
+    * required: `false`
+    * default: `null`
+
+    Says if item is draggable.
+
+    If default value is `null` then it's inherited from parent.
+
+* **isResizable**
+    
+    * type: `Boolean`
+    * required: `false`
+    * default: `null`
+
+    Says if item is resizable.
+
+    If default value is `null` then it's inherited from parent.
+
+* **dragIgnoreFrom**
+    
+    * type: `String`
+    * required: `false`
+    * default: `'a, button'`
+
+    Says which elements of the item shouldn't trigger drag event of the item.
+
+    The value is `css-like` selector string.
+
+    For more info please refer to `ignoreFrom` in [interact.js docs](http://interactjs.io/docs/#ignorable-selectors).
+
+* **dragAllowFrom**
+    
+    * type: `String`
+    * required: `false`
+    * default: `null`
+
+    Says which elements of the item should trigger drag event of the item.
+
+    The value is `css-like` selector string.
+    
+    If `null` then one can drag by any (excluding `dragIgnoreFrom`) element of the item.
+
+    For more info please refer to `allowFrom` in [interact.js docs](http://interactjs.io/docs/#ignorable-selectors).
+
+* **resizeIgnoreFrom**
+    
+    * type: `String`
+    * required: `false`
+    * default: `'a, button'`
+
+    Says which elements of the item shouldn't trigger resize event of the item.
+
+    The value is `css-like` selector string.
+
+    For more info please refer to `ignoreFrom` in [interact.js docs](http://interactjs.io/docs/#ignorable-selectors).
+
+
+
+#### Events
 
 Move and resize event listeners can be added to each grid-item, so that the parent Vue can be notified when a grid element is being moved or resized.
 Moved and resized event listeners can be added, if the only notification needed is when an item is finished moving or resizing.
@@ -165,39 +411,59 @@ Working example [here](https://jbaysolutions.github.io/vue-grid-layout/examples/
     </grid-layout>
 ```` 
 
-* Layout updated event: every time the layout has finished updating and positions of all grid-items are recalculated
+* **layoutUpdatedEvent**
+
+    Layout updated event
+
+    Every time the layout has finished updating and positions of all grid-items are recalculated
 
 ```javascript
     layoutUpdatedEvent: function(newLayout){
       console.log("Updated layout: ", newLayout)
     }
 ```
 
-* Move event: every time an item is being moved and changes position
+* **moveEvent**
+
+    Move event
+
+    Every time an item is being moved and changes position
 
 ```javascript
     moveEvent: function(i, newX, newY){
         console.log("MOVE i=" + i + ", X=" + newX + ", Y=" + newY);
     },
 ```
 
-* Resize event: every time an item is being resized and changes size
+* **resizeEvent**
+
+    Resize event
+
+    Every time an item is being resized and changes size
 
 ```javascript
     resizeEvent: function(i, newH, newW){
         console.log("RESIZE i=" + i + ", H=" + newH + ", W=" + newW);
     },
 ``` 
 
-* Moved event: every time an item is finished being moved and changes position
+* **movedEvent**
+
+    Moved event
+
+    Every time an item is finished being moved and changes position
 
 ```javascript
     movedEvent: function(i, newX, newY){
         console.log("MOVED i=" + i + ", X=" + newX + ", Y=" + newY);
     },
 ```
 
-* Resized event: every time an item is finished being resized and changes size
+* **resizedEvent**
+
+    Resized event
+
+    Every time an item is finished being resized and changes size
 
 ```javascript
     /**