updates, 0.0.2

.gitignore

@@ -0,0 +1,22 @@
+.DS_Store
+node_modules
+/dist
+test/node_modules
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

README.md

@@ -1,13 +1,41 @@
 # Vue-Magic-Grid
 This is a Vue.js port of @e-oj 's Magic Grid.
-Note, this is version 0.0.1. (still some minor issues)
+Please check the `/test` folder for a example.
+
+Make sure to lazy-load images with a set height of the image-div,
+or use `waitForImages()` or something similar
+to make sure the grid is properly calculated.
 
 ### Setup
-Register the component
+Install & Register the component
+```js
+$ npm i -S vue-magic-grid
+```
 
 ```js
+import magicGrid from 'vue-magic-grid'
+
 Vue.component('magic-grid', magicGrid)
 ```
 
+### Use
+```html
+<magic-grid>
+  <card
+    v-for="(post, i) in posts"
+    :key="i"
+    :title="post.title"
+    :body="post.body" />
+</magic-grid>
+```
+
+### Props
+- `wrapper: 'wrapper'` // Wrapper class/id
+- `gap: 32` // Gap between elements
+- `maxCols: 5` // Maximum number of colums. Default: Infinite
+- `maxColWidth: 280` // Maximum width of child elements
+- `animate: false` // Animate item positioning.
+
+
 Cheers,
 ImLinus

package.json

@@ -1,10 +1,10 @@
 {
-  "name": "Vue-Magic-Grid",
-  "version": "1.0.0",
+  "name": "vue-magic-grid",
+  "version": "0.0.2",
   "description": "This is a Vue.js port of @e-oj 's Magic Grid",
   "main": "index.js",
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "test": "cd test && npm run serve"
   },
   "repository": {
     "type": "git",

test/.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not ie <= 8

test/.editorconfig

@@ -0,0 +1,5 @@
+[*.{js,jsx,ts,tsx,vue}]
+indent_style = space
+indent_size = 2
+trim_trailing_whitespace = true
+insert_final_newline = true

test/.eslintrc.js

@@ -0,0 +1,17 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true
+  },
+  'extends': [
+    'plugin:vue/essential',
+    '@vue/standard'
+  ],
+  rules: {
+    'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+  },
+  parserOptions: {
+    parser: 'babel-eslint'
+  }
+}

test/.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

test/README.md

@@ -0,0 +1,29 @@
+# test
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Run your tests
+```
+npm run test
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

test/babel.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/app'
+  ]
+}