Neovictorian Paisley Menswear

    vue-layout-grid

    0.3.4 • Public • Published

    LayoutGrid

    Layout grid system in VueJs, see also:

    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

    <link rel="stylesheet" href="//cdn.materialdesignicons.com/2.0.46/css/materialdesignicons.min.css">

    template

    <layout-grid
        :editable="editable"
        :margin="margin"
        :row-height="rowHeight"
        :min-w="minW">
    </layout-grid>

    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

    this.$store.state.LayoutGrid.layout

    mutations

    // 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

    Screen Shots

    ###UI Alerts Table

    ###Dashboard Dashboard

    Keywords

    Install

    npm i vue-layout-grid

    DownloadsWeekly Downloads

    32

    Version

    0.3.4

    License

    MIT

    Unpacked Size

    421 kB

    Total Files

    16

    Last publish

    Collaborators

    • gopherj