Grid And Widgets

I created this package to introduce a new way to build web pages in Vue 3. I needed a way to create custom webpages quickly with drag and drop capability for our project lectful.com Since our platform is a SAAS solution where all of our customers share the same codebase but different databases, we needed a way to store the layout of pages of each customer in their database.

So, why didn't I just use some HTML WYSIWYG editor to build webpages? Well, manipulating HTML directly is difficult, not predictable, and would require us to always add HTML templates with bunch of slots...

The solution I came up with is to store the webpage layout as JSON instead of HTML. And then we build a bunch of independant widgets that can be dragged and dropped into the layout. I was able to do this thanks to the flexible Grid system that CSS offers.

How to install

1npm install grid-and-widgets

or in the case of gitlab

1npm install https://www.gitlab.com/vipayers/grid-and-widgets

How to use

This code lets you use the package globally in your app.js file

1import { createApp } from 'vue'
2import App from './App.vue'
3const app = createApp(App)
4
5import 'grid-and-widgets/dist/style.css'
6
7
8import GridAndWidgets from 'grid-and-widgets'; //Import as a plugin
9app.use(GridAndWidgets) // And then use the plugin
10
11app.mount('#app')

Or you can use it locally in your any component file

1<template>
2    <div>
3        <Builder :widgets="widgets" v-model:content="content" @saveButtonClicked="save()" />
4    </div>
5</template>
6<script>
7import 'grid-and-widgets/dist/style.css'
8
9import {Builder, Viewer} from 'grid-and-widgets'
10
11import TextComponent from 'SOMEPATH/Widgets/Text/Component.vue';
12import TextConfig from 'SOMEPATH/Widgets/Text/Config'
13import TextIcon from 'SOMEPATH/Widgets/Text/Icon'
14
15import ImageComponent from 'SOMEPATH/Widgets/Image/Component.vue';
16import ImageConfig from 'SOMEPATH/Widgets/Image/Config'
17import ImageIcon from 'SOMEPATH/Widgets/Image/Icon'
18
19const widgets  = {
20    'text' : {
21        name : 'Text',
22        component : TextComponent,
23        config : TextConfig,
24        icon : TextIcon
25    },
26    'image' :{
27        name : 'Image',
28        component : ImageComponent,
29        config : ImageConfig,
30        icon : ImageIcon
31    }
32}
33
34
35export default {
36    components:{
37        Builder,
38        Viewer
39    },
40    methods:{
41        save(){
42            //Save page layout, maybe by sending an Axios request to the backend
43        }
44    },
45    data(){
46        return {
47            //This structure must be respected
48            content : { layout: { lg: [], md: [], sm: [], xs: [], xxs: [] }, is_responsive: true }
49        }
50    }
51}
52</script>

Widgets

Widgets are the main building blocks that compose a webpage. We have seen in the previous example how to add them to the builder. Widgets have three composed of three things:

1. Main Widget Component The main widget component is the actual UI of the widget that will be visible to the end user.
2. A config component The config component of the widget is a component that allows you to customize your widget.
3. An Icon component Each widget has an Icon, so you simply define the Icon of the widget, for example an SVG or PNG...

let's see an example widget that lets user display an image

SOMEPATH/Widgets/Image/Component.vue

1<template>
2    <div class="w-full h-full object-cover">
3        <img class="w-full h-full object-cover" :src="url" />
4    </div>
5</template>
6
7<script>
8export default {
9    props:{
10        url : String
11    }
12}
13</script>

SOMEPATH/Widgets/Image/Config

1<template>
2    <div>
3        <h1>Image url</h1>
4        <input :value="modelValue.url" @input="$emit('update:modelValue', {url : $event.target.value})" class="bg-transparent border p-1 rounded mt-1" />    
5    </div>
6</template>
7
8<script>
9export default {
10    props:{
11        modelValue:{
12            type : Object,
13            default : {
14                url : ''
15            }
16        }
17    }
18}
19</script>

SOMEPATH/Widgets/Text/Icon

1<template>
2    <div class="w-full h-full text-gray-300">
3        <svg viewBox="0 0 24 24">
4            <path fill="currentColor" d="M21,3H3C2,3 1,4 1,5V19A2,2 0 0,0 3,21H21C22,21 23,20 23,19V5C23,4 22,3 21,3M5,17L8.5,12.5L11,15.5L14.5,11L19,17H5Z"></path>
5        </svg>
6    </div>
7</template>

Resize container height to fit widget height.

Sometimes, some widgets might have a non fixed height (for example elements that show a hidden content when clicked...), however The grid has a specific height defined for each container, so whenever a widget changes size it needs to totify the grid to update its height so that it accounts for the new size of our widget. To do that, inside our widget we can dispatch an event named fitHeight with the widget element so that the grid recalculate the container height. Here is an example widget.

1<template>
2    <div ref="myComponent">
3        <button @click="toggle">Show content</button>
4        <div v-if="isShown">
5            Some hidden content that only appears when the isShown variable is true. When it appears it changes the 
6            height of the component.
7        </div>
8    </div>
9</template>
10<script>
11export default {
12    methods:{
13        toggle(){
14            this.isShown = !this.isShown;
15
16            //We use $nextTick so that we send the height after the component is rendered with the new height.
17            this.$nextTick(() => {
18                this.$emit('fitHeight', { element : this.$refs.myComponent })
19            })
20
21            
22            //Or, We can specify the new container height explicitly
23            let height = this.$refs.myComponent.clientHeight; //Or any value
24            this.$nextTick(() => {
25                this.$emit('fitHeight', { height })
26            })
27        }
28    }
29}
30</script>