vue-layout-builder
A vue application (wrapped in a ES6 class) that allows you to arrange custom layouts based on templates provided in a config.
Installation
yarn add vue-layout-builder
Usage
const layoutBuilder = document;layoutBuilder config;
Config explanation
The saveUrl
is used to make a post request to store the current state.
When adding or editing an element, the layout builder calls an external function provided by a CMS.
adapters: callback: Function // function that is called to create or edit elements
This function should afterwards call
appInstance$options
sections
is an array which stores section objects. These are the main parts of the page.
Every key/value pair in the content
object represents a block in a section (defined by a slot
in the actual layout files).
In each of these blocks n
elements can be rendered.
locked
defines if a block is editable or not.
sections: id: Number // id of the section layout: String // name of the layout content: String: // name of the content block String // array with the ids of the elements (see: elements) locked: Boolean // section is editable or not
content_types
holds all types an element can have (e.g. "Image", "Gallery", "Article" etc.).
These types need to belong to a group
(e.g. "Media elements", "Text elements" etc.).
The params
object would be send to the cms when adding an element of the given content type.
content_types: id: Number name: String group: String params: Object
elements
is an object holding all available, actually created, elements.
elements: String: html: String params: Object content_type_group: String name: String
layouts
is an object holding the available layouts the user can choose (e.g. "Two columns", "Three columns")
layouts: String: slots: String html: String name: String
Example config
adapters: callback: windowDrupalipelayout_builderhandle saveUrl: "" sections: id: 1 layout: "LayoutThreeColumns" content: {} id: 2 layout: "LayoutTwoColumns" content: "slot1": "element1" null "element2" id: 3 layout: null content: {} id: 4 layout: "LayoutTwoColumns" content: "slot1": "element2" "slot2": "element2" "element3" locked: true content_types: id: 1 name: "Image" group: "Media elements" params: url: "" id: 2 name: "Media Player" group: "Media elements" params: url: "" id: 3 name: "Quote" group: "Text elements" params: url: "" elements: element1: html: "<img>" params: url: "" content_type_group: "Media elements" name: "Logo" element2: html: "<MediaPlayer />" params: url: "" content_type_group: "Media elements" name: "Media player" element3: html: "<Pdf />" params: url: "" content_type_group: "Text elements" name: "Pdf" layouts: LayoutOneColumn: slots: "slot1" html: "<div class='Row'><div class='Column'><slot name='slot1'></slot></div></div>" name: "One column" LayoutThreeColumns: slots: "slot1" "slot2" "slot3" html: "<div class='Row'><div class='Column'><slot name='slot1'></slot></div><div class='Column'><slot name='slot2'></slot></div><div class='Column'><slot name='slot3'></slot></div></div>" name: "Three columns" LayoutTwoColumns: slots: "slot1" "slot2" html: "<div class='Row'><div class='Column'><slot name='slot1'></slot></div><div class='Column'><slot name='slot2'></slot></div></div>" name: "Two columns"
Contributing
Everything that lives in the public/
folder, should usually be provided by the external cms. What it is in there, is also used for developing the layout builder.
Open localhost:8080
after running
yarn start
Before publishing to npm, make sure to run:
yarn build-bundle
Tests
Run tests with
yarn test:unit