A Vue 2.x component for designing grid layouts using Sortable.js.

Design a responsive grid based on rows and blocks using HTML5 drag and drop. The JSON model can be used to generate an actual HTML grid using any CSS framework you choose or saved to a database for subsequent use. It can be decorated with any additional JSON properties to allow you to extend your grid in any way you need.

• Dependencies
• Installation
• Usage
  • Grid Data Model
    • Internal model
  • Component Props
  • Overidden Sortable JS Options
  • Events
  • Methods
  • CSS and Styles
    • CSS Classes Used
    • Specificity and Overriding Scoped Styles
    • Using :hover styles
• Demo
• Contributing
• Credits
  • Author
  • Contributors
• Licence

vue-grid-designer has no external dependency requirements. The following dependencies are included in the exported ESM package:

{
    "@fortawesome/fontawesome-svg-core"  : "^1.2.30",
    "@fortawesome/free-solid-svg-icons"  : "^5.14.0",
    "@fortawesome/vue-fontawesome"       : "^2.0.0",
    "lodash-es"                          : "^4.17.15",
    "sortablejs"                         : "^1.10.2",
    "uuid"                               : "^8.3.0",
    "vue"                                : "^2.6.12"
}

npm i @thefoot/vue-grid-designer --save

Either register vue-grid-designer as a global component in your main Vue application file:

import Vue             from 'vue';
import VueGridDesigner from '@thefoot/vue-grid-designer';
Vue.component('vue-grid-designer', VueGridDesigner);

new Vue (
    {
        render: h => h ( App )
    }
).$mount ( '#app' );

or use locally (recommended) in your Vue component:

import VueGridDesigner from '@thefoot/vue-grid-designer';

export default {
    ...
    components: { VueGridDesigner }
    ...
};

Then simply add the component to your template and bind your grid model to it:

<template>
    <div>
        <vue-grid-designer v-model="grid"></vue-grid-designer>
    </div>
</template>

<script>
    import VueGridDesigner from '@thefoot/vue-grid-designer';
    export default { 
        components: { VueGridDesigner },
        data () {
            return {
                grid: []
            };
        }   
    };
</script>

You can even use it via a script tag:

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/@thefoot/vue-grid-designer"></script>

The grid is a collection of row objects. row.blocks is a collection of block objects.

[
    {
        blocks: [
            { 
                span: 1,
                content: '<p>Foo</p>'
            }
        ]
    }
]

It is structured this way to allow rows and blocks to be decorated with additional properties. Use-cases are most likely to need additional data.

Internally - VDG adds an _id property to each row and block (v4 UUID). Custom events include the ID, whereas the bound model only emits exactly what was passed in, including any custom properties. To retrieve the full internal model, including custom properties, call the getFullModel () component method.

All events have a vgd property added to the original event (either SortableJS event or native event - whichever is relevant), and contain row and block properties.

Methods that receive an event parameter fire a custom event.

This component uses BEM methodology and naming convention.

For scoped styles, Vue uses a data attribute based on the component ID to isolate styles to the component. In order to override these styles you should prefix all style overrides using your main app or component selector. E.g.:

#demo {
    .vgd__row { ... }
}

For additional examples, please look at the Demo source code.

There is a known issue with :hover state in DnD elements in Chrome. The workaround is to scope any :hover styles. This scope is provided via the .use-hover class. E.g.:

.use-hover {
    .vgd__row:hover { ... }
}

Component Demo

Contributions welcome, please read CONTRIBUTING and CODING-STANDARDS.

• @TheFoot

• .

MIT