Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update README.md #37

Merged
merged 1 commit into from
Apr 7, 2020
Merged

Update README.md #37

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
41 changes: 19 additions & 22 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@

#### 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!

<p align="center">
<p style="text-align:center">
<img src="https://user-images.githubusercontent.com/1577802/30805846-45ccd718-a1eb-11e7-9963-7aee8e76c9b0.gif">
</p>

Expand Down Expand Up @@ -62,36 +62,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:

Expand All @@ -103,7 +100,7 @@ Example:
</template>
```

### 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.

Expand Down