https://github.com/0x8f701/LayoutGrid
Vue Layout Gridster
https://github.com/0x8f701/LayoutGrid
layout-grid
Last synced: 9 months ago
JSON representation
Vue Layout Gridster
- Host: GitHub
- URL: https://github.com/0x8f701/LayoutGrid
- Owner: GopherJ
- License: mit
- Created: 2018-04-02T20:49:28.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2022-12-11T02:47:25.000Z (over 3 years ago)
- Last Synced: 2024-11-30T11:07:05.510Z (over 1 year ago)
- Topics: layout-grid
- Language: Vue
- Size: 7.42 MB
- Stars: 6
- Watchers: 1
- Forks: 1
- Open Issues: 13
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# LayoutGrid
Layout grid system in VueJs, see also:
- [vue-grid-layout](https://github.com/jbaysolutions/vue-grid-layout)
- [Vs](https://github.com/GopherJ/Vs)
## Introduction
This component is for creating a dashboard more simply. All config of the dashboard will be saved in the vuex module `LayoutGrid`. In any component of
your SPA, you can add a new item or delete one. I've also added some new features:
- `table mode`
- `json/csv download`
- `UI design`
This component use `jbaysolutions/vue-grid-layout` internally and makes it simpler to use, that means the layout is controlled in vuex and every time
when we need to add a new item. We just need to specify the `title`, `is`, `w`, `h` and `data`. It will calculate automatically the next position and
also the identifier `i` .
## Installation
```
npm i -S vue-layout-grid
```
## Usage
`main.js`
```
import Vue from 'vue';
import Vuex from 'vuex';
import LayoutGrid from 'vue-layout-grid';
import Buefy from 'buefy';
import 'buefy/lib/buefy.min.css';
const store = new Vuex.Store();
Vue.use(Vuex);
Vue.use(LayoutGrid, { store });
new Vue({
store,
...
});
```
`index.html`
```html
```
`template`
```vue
```
## Props
|prop|description|type|default|
|:---|:---|:---|:---|
|`editable`|`show border or not`|`boolean`|`true`|
|`margin`|`margin between layout grid item`|`[number, number]`|`[0, 0]`|
|`row-height`|`layout grid item height unit`|`number`|`100`|
|`min-w`|`min w`|`number`|`1`|
## Vuex Module
This component has a vuex module which is registered as `LayoutGrid`.
`store`
```javascript
this.$store.state.LayoutGrid.layout
```
`mutations`
```javascript
// For example, here I need to add a new item to the layout
// This item is the `d3-timeline` component of [Vs](https://github.com/GopherJ/Vs)
// I just need to do:
this.$store.commit('LayoutGrid/ADD_LAYOUT_ITEM', {
title: 'Alerts',
is: 'd3-timeline',
w: 12,
h: 3,
data: {
// props of d3-timeline
data: [...],
options: {...},
width: '100%',
height: '100%'
}
});
// EDIT
// This is used to replace/update an item
// For example we change the d3-timeline to d3-timelion
this.$store.commit('LayoutGrid/EDIT_LAYOUT_ITEM', {
i: '0', // indentifier of d3-timeline, it's generated automatically
title: 'Entries Over Time',
is: 'd3-timelion',
w: 12,
h: 3,
data: {
// props of d3-timelion
data: [...],
options: {...},
width: '100%',
height: '100%'
}
});
```
## Special Thanks
[jbaysolutions](https://github.com/jbaysolutions)
## Screen Shots
*###UI*
*###Dashboard*
