diff --git a/README.md b/README.md index 3d2b871..4f0b873 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,17 @@ ## Vue.js Grid ( Experiment ) +## ⚠️ This an experement and not a production-ready plugin + [![npm version](https://badge.fury.io/js/vue-js-grid.svg)](https://badge.fury.io/js/vue-js-grid) [![npm](https://img.shields.io/npm/dm/vue-js-grid.svg)](https://www.npmjs.com/package/vue-js-grid) #### Fixed size grid for Vue.js -This is very a first version of the plugin. If you find any bugs and/or want to contribute, feel free to create issues, PRs or reach me out on twitter! 👍 🚀 +This is very a first version of the plugin. If you find any bugs and/or want to contribute, feel free to create issues, PRs, or reach me out on twitter! 👍 🚀 Thanks! -

+

@@ -62,36 +64,33 @@ Plugin does **NOT** modify the source data array. | Name | Type | Default | Description | | --- | --- | --- | --- | -| items | Array | [] | Initial array of items | -| cellWidth | Number | 80 | Cell width | -| cellHeight | Number | 80 | Cell height | -| draggable | Boolean | false | Flag that will let you drag grid's cells | -| dragDelay | Number | 0 | @TODO | -| sortable | Boolean | false | Flag that will let you reorder grid's cells, requires `draggable` to be `true` | -| center | Boolean | false | @TODO | +| `items` | Array | `[]` | Initial array of items | +| `cellWidth` | Number | `80` | Cell width | +| `cellHeight` | Number | `80` | Cell height | +| `draggable` | Boolean | `false` | Flag that will let you drag grid's cells | +| `dragDelay` | Number | `0` | @TODO | +| `sortable` | Boolean | `false` | Flag that will let you reorder grid's cells; requires `draggable` to be `true` | +| `center` | Boolean | `false` | @TODO | ### Events | Name | Description | | --- | --- | -| @change | Occurs on every action that involves reordering array or changing it's length | -| @remove | Occurs when an element is deleted through template | -| @click | Occurs when cell is clicked | -| @sort | Occurs when array item order is changed manually | +| `@change` | Occurs on every action that involves reordering array or changing its length | +| `@remove` | Occurs when an element is deleted through template | +| `@click` | Occurs when cell is clicked | +| `@sort` | Occurs when array item order is changed manually | ### Cell template -Cell template is used to get access to list data, indexing and sorting params generated by plugin. +Cell template is used to get access to list data, indexing, and sorting params generated by plugin. Template's scope contains: -`props.item` - list item value - -`props.index` - initial index of the item - -`props.sort` - current index of an item after sorting - -`props.remove()` - method that will remove item from the arrey and resport list. +* `props.item`: list item value +* `props.index`: initial index of the item +* `props.sort`: current index of the item after sorting +* `props.remove()`: method that removes the item from the array and resort list. Example: @@ -103,7 +102,7 @@ Example: ``` -### Why do i need this? +### Why do I need this? A good example of using a plugin would be rending macOS' `Launchpad` or `Dock`. Check out a demo for a solid example of how the plugin behaves & feels. diff --git a/demo/package.json b/demo/package.json index dc18088..6c50e9e 100644 --- a/demo/package.json +++ b/demo/package.json @@ -22,7 +22,7 @@ "html-webpack-plugin": "^2.30.1", "install": "^0.10.1", "node-sass": "^4.5.0", - "npm": "^5.4.2", + "npm": "^6.13.4", "sass-loader": "^5.0.1", "vue-loader": "^11.1.4", "vue-template-compiler": "^2.2.1", diff --git a/src/Grid.vue b/src/Grid.vue index 67cf209..647d9bc 100644 --- a/src/Grid.vue +++ b/src/Grid.vue @@ -19,7 +19,7 @@ :item="v.item" :index="v.index" :sort="v.sort" - :remove="() => { removeItem(v) }"/> + :remove="() => { removeItem(v) }">