API Reference

ww-config.js

options.autoByContent

• Type: boolean (default false)
• Available for Element only
• Description: If true, width = auto will use your element size instead of the parent available space.

For an example see the behavior of ww-button

options.sizable

• Type: boolean (default false)
• Available for Element only
• Description: If true, the editor will display handle to resize your element visually.

For an example see the behavior of ww-image

options.hyperlink

• Type: boolean (default false)
• Available for Element only
• Description: If true, the editor will allow your component to be wrap inside an a tag.

editor.label

• Type: translated text
• Available for Section and Element
• Mandatory
• Description: This is the text use by the editor to label your component through the interface (menu, navigator, ...)

editor.noHover

• Type: boolean (default false)
• Available for Element only
• Description: If true, the editor will not display an hover effect. Use this property if you want to handle yourself what you display on hover

editor.infoTag

• Type: InfoTag or InfoTag[] or Function returning InfoTag or InfoTag[]
• Available for Section and Element
• Description: Let you add small tags info on your component floating menu.

See `ww-text` html tag for example

infoTag: content => ({
    color: 'var(--ww-color-blue-500)',
    backgroundColor: 'var(--ww-color-blue-100)',
    text: content.tag === 'button' ? 'BTN' : content.tag && content.tag.toUpperCase()
    action: () => {
        // anything you want to do on click
    }
}),

editor.bubble

• Type: Boolean or {icon?: String; color?: String;}
• Available for Element only
• Description: Let you add a small bubble in the left top corner. Usefull for selection of container when children take all the content space.

type InfoTag = {
  color: string;
  backgroundColor: string;
  text?: string;
  icon?: string;
  action: function;
};

properties

• Type: An object with property name as key, and a property as value
• Available for Section and Element
• Description: Let you describe all your content properties

triggerEvents

• Type: Array<{ name: String, label: translated text }>
• Available for Element only
• Description: Let you describe all the custom event your component can emit. Useful for custom workflows

Content property

Each content property is describe with an object which has the following properties.

property.label

• Type: translated text
• Mandatory
• Available for Section and Element
• Description: Label used by the editor on the edit panel interface

property.section

• Type: style or settings (default is style)
• Available for Section and Element
• Description: Determine in which panel's tab the property will be display

property.defaultValue

• Type: any
• Available for Section and Element
• Description: This the default value of the property if empty.

TIP

This can be very useful to create child element. See Add element property

property.options

• Type: Object or an EditorFunction returning an object
• Available for Section and Element
• Description: List of options pass to the ux component used in the edit panel.

See available options (depending on the type) here

property.type

• Type: string
• Mandatory if your property is not hidden
• Available for Section and Element
• Description: The type of your property. It is used to know which user interface display to edit your property inside edit panel.

A complete list of available types are availabe here

property.multiLang

• Type: boolean (default false)
• Available for Section and Element
• Description: Will treat your property as a translated object
• See also Add a translated text property

property.responsive

• Type: boolean (default false)
• Available for Section and Element
• Description: Indicate that your property can be different depending on the current screen
• See also Add a responsive property

property.states

• Type: boolean (default false)
• Available for Element only
• Description: Indicate that your property can be different depending on the current state (hover for example, or a custom one)
• See also Use element state

property.bindable

• Type: boolean | list | repeatable (default false)
• Available for Section and Element
• Description: Indicate that your property can be binded. The type of binding depend on the value
  • true: bind to a primitive
  • list: bind to an array
  • repeatable: special binding to connect to a dropzone and repeat content
• See also Add a bindable property and Add a dropzone

property.editorOnly

• Type: boolean (default false)
• Available for Section and Element
• Description: Indicate if this property is only needed in editor. The data will not be saved inside content, and can be retrieve and modified in an other way. This is usefull for adding some editing logic
• See also Custom editor interface

property.hidden

• Type: boolean or an EditorFunction returning a boolean (default false)
• Available for Section and Element
• Description: Indicate if this property should be hidden from the EditorPanel. This is usefull for dropzone or if you provide yourself a custom way to edit this property
• See also Custom editor interface

Editor Function

Some options of a content property can take a function rather than static value. This enable a better UX experience by making the sidepanel dynamic. The arguments of this function are:

• content: the current content of the component

• sidepanelContent: the current editor only content of the component

• boundsProps: an object with property name as prop, and true as value if the props is currently bound

Available Types

Array

{
    type: "Array",
    label: { "en": "List of items" },
    options: {
        item: {
            [...] // a content property
        },
        fixed: false // if true, do not display add and remove button
    }
},

WARNING

All property except responsive and states are supported for child properties

BigButtons

{
    label: { en: 'Presets' },
    type: 'BigButtons',
    options: {
        action: 'setPreset',
        values: [
            { icon: 'two-columns-mosaic', id: 'two-columns-mosaic' },
            { icon: 'three-columns-mosaic', id: 'three-columns-mosaic' },
            { icon: 'four-columns-mosaic', id: 'four-columns-mosaic' },
            { icon: 'five-columns-mosaic', id: 'five-columns-mosaic' },
        ],
    }
}

Used to display a button on the edit panel.

TIP

Very usefull for quick presets action buttons

This used with editorOnly: true as it has no value

BigIconRadioGroup

{
    label: { en: 'Display type', fr: "Type d'affichage" },
    type: 'BigIconRadioGroup',
    options: [
        { icon: 'type-columns', value: 'columns', label: 'Columns' }]),
        { icon: 'type-rows', value: 'rows', label: 'Rows' },
        { icon: 'type-mosaic', value: 'mosaic', label: 'Mosaic' },
    ],
    defaultValue: 'columns',
}

Button

{
    "type": "Button",
    "label": null,
    "options": {
        // Translated text to be displayed inside button
        "text": {
            "en": "Click me"
        },
        "action": "display" // name of one of your component methods
    }
},

Used to display a button on the edit panel.

TIP

This used with editorOnly: true as it has no value

Color

{
    "type": "Color",
    "label": {
        "en": "Text color",
        "fr": "Couleur du texte"
    },
    "options": {
        "nullable": true, // boolean (default: false). If true color can be null
        "gradient": true // boolean (default: false). If true can return gradient string
    }
},

Return a string

CssFilter

{
    "type": "CssFilter",
    "label": {
        "en": "Filters",
        "fr": "Filtres"
    },
},

Return a string

FontFamily

{
    "type": "FontFamily",
    "label": {
        "en": "Font Family",
    },
},

Return a string

Icon

{
    "type": "Icon",
    "label": {
        "en": "Icon",
    },
},

Return a string

Image:

{
    "type": "Image",
    "label": {
        "en": "Image",
        "fr": "Image"
    },
},

Return a string representing an image path

Info:

{
    label: {
        en: 'Text',
        fr: 'Texte',
    },
    type: 'Info',
    options: {
        text: { en: 'Click text to edit' },
    },
},

TIP

This is usefull if you still want this property on the sidepanel for binding, but provide your own edition ux, like text here

Length

{
  "type": "Length",
  "label": {
    "en": "Size",
    "fr": "Taille"
  },
  "options": {
    "unitChoices": [
      { "value": "px", "label": "px", "min": 1, "max": 1000 },
      { "value": "%", "label": "%", "min": 1, "max": 100 }
    ]
  }
}

Return a string representing a length (value + unit)

Number

{
  "type": "Number",
  "label": {
    "en": "Number of columns",
    "fr": "Nombres de colonnes"
  },
  "options": {
    "min": 1, // default 0
    "max": 10, // default 100,
    "step": 1 // default 1
  }
}

Return a Number

Object

{
    type: "Object",
    label: { "en": "Parameters" },
    options: {
        item: {
            {
                prop1: [...] // Content property
                prop2: [...] // Content property
            }
        },
    }
}

This is usefull if you want nested properties. We still encourage you to use as flat as possible content.

WARNING

All property except responsive and states are supported for child properties

OnOff

{
  "type": "OnOff",
  "label": {
    "en": "Use icon?",
    "fr": "Utiliser un icône?"
  }
}

Return a Boolean

Script

{
  "type": "Script",
  "label": {
    "en": "Custom js"
  }
}

Return a string

Section

{
  "type": "Section",
  "label": {
    "en": "Section"
  }
}

Return a section id

Shadows

{
  "type": "Shadows",
  "label": {
    "en": "Shadows",
    "fr": "Ombres"
  },
  "options": {
    "isText": true // default: false. If true return text-shadow css compatible value
  }
}

Return a string

Text

{
  "label": { "en": "Alt", "fr": "Alt" },
  "type": "Text",
  "options": {
    "placeholder": "Image description" // all input[type = text] options are supported
  }
}

Return a string

Textarea

{
  "label": { "en": "Description", "fr": "Description" },
  "type": "Textarea",
  "options": {
    "placeholder": "Image description" // all textarea options are supported
  }
}

Return a string

TextRadioGroup

{
    "type": "TextRadioGroup",
    "label": {
        "en": "Alignement",
        "fr": "Alignement"
    }
    "options": {
        "choices": [
            {
                "value": "left",
                "default": true,
                "title": { "en": "Left", "fr": "Gauche" },
                "icon": "text-align-left"
            },
            { "value": "center", "title": { "en": "Center", "fr": "Milieu" }, "icon": "text-align-center" },
            { "value": "right", "title": { "en": "Right", "fr": "Droite" }, "icon": "text-align-right" },
            {
                "value": "justify",
                "title": { "en": "Justify", "fr": "Justifié" },
                "icon": "text-align-justify"
            }
        ]
    }
}

Return type of value

TextSelect

{
  "label": {
    "en": "Font weight",
    "fr": "Graisse"
  },
  "type": "TextSelect",
  "options": {
    "options": [
      { "value": null, "label": { "en": "Default", "fr": "Par défaut" } },
      { "value": 100, "label": { "en": "100 - Thin" } },
      { "value": 200, "label": { "en": "200 - Extra Light" } },
      { "value": 300, "label": { "en": "300 - Light" } },
      { "value": 400, "label": { "en": "400 - Normal" } },
      { "value": 500, "label": { "en": "500 - Medium" } },
      { "value": 600, "label": { "en": "600 - Semi Bold" } },
      { "value": 700, "label": { "en": "700 - Bold" } },
      { "value": 800, "label": { "en": "800 - Extra Bold" } },
      { "value": 900, "label": { "en": "900 - Black" } }
    ]
  }
}

Video

{
  "label": { "en": "Video url", "fr": "Video url" },
  "type": "Video"
}

Return a string

Component interface

Props

content

• Type: Object
• Available for Section and Element
• Available in Editor and Front context

uid

• Type: String ID
• Available for Section and Element
• Available in Editor and Front context

wwEditorState

• Type: Object
• Available for Section and Element
• Available in Editor context only

const wwEditorState = {
  editMode: wwLib.wwEditorHelper.EDIT_MODES.EDITION,
  isSelected: false,
  isDoubleSelected: false,
  isHovered: false,
  sidepanelContent: {},
  isACopy: false,
  boundProps: {
    data: true,
    fontSize: false,
  },
};

wwFrontState

• Type: Object
• Available for Section and Element
• Available in Editor and Front context

const wwFrontState = {
  lang: "en",
  pageId: "123544",
  sectionId: "123456",
  screenSize: "desktop",
  screnSizes: ["desktop", "tablet", "mobile"],
};

WARNING

You will probably never use this property, as weweb.io already handle responsive and translation logic for you

wwElementState

• Type: Object
• Available for Element only
• Available in Editor and Front context

Its a special property for advanced usage, basically to pass custom props to your component.

const wwElementState = {
  props: {},
  isInsideLink: false,
  name: "My element",
};

Event

// Inside your component methods you can do
this.$emit("update:content", {
  /*... */
});

update:content

• Type: Object
• Available for Section and Element
• Available in Editor only
• See also Update content

update:content:effect

• Type: Object
• Available for Section and Element
• Available in Editor only
• See also Update content

trigger-event

• Type: {name: String, payload: any}
• Available in Editor and Front context
• Description: Trigger workflow event

element-event

• Type: any
• Available in Editor and Front context
• Description: Trigger event that will be available for the parent element

update:sidepanel-content

• Type: { value: any, path: string }
• Available for Section and Element
• Available in Editor only
• See also Custom editor interface

change-menu-visibility

• Type: `Boolean
• Available for Element only
• Available in Editor only Toogle menu visibility. Use by certain element to hide the menu

weweb.io objects

Editor properties

weweb.io (opens new window) Editor handle by default some properties of your component listed below. Do not handle them yourself

Section

• Height of the root html element
• Max width of the root html element
• Positioning of the root html element content
• Padding and margin of the root html element
• Background of the root html element
• Borders and Shadow of the root html element
• Tag of the root element

Element

• Width, max-width, height of the root html element
• Positioning of the root html element content
• Padding and margin of the root html element
• Background of the root html element
• Borders and Shadow of the root html element
• Id and class of the root element
• Link wrapping your whole element

Translated text

weweb.io (opens new window) use a custom way to handle translation. We use object with lang as key to store the different variants. Value can be anything (usefull for handle any kind of content which need to change depending on the locale)

To "translate", use wwLib.wwLang.

See also Add a translated text property

wwLib global variable

wwLib.wwLang

wwLib.createElement

wwLib.createElementFromTemplate

wwLib.getFrontWindow

Global components and directive

wwLayout component

This is a Vue component which allow to have a dropzone. See more here.

It just repeat children elements, and handle drag and drop for you. You still need to handle the css yourself.

Available props:

• tag: String: change the tag root element
• direction: 'column' | 'row' (default column): Change the ux of the dropzone. You are still responsible of the css to display children
• disableDragDrop: Boolean (default false): Disable the drag and drop if you are handling child add/remove yourself

Events:

• update:list: Emit each time a child element is added or removed

wwElement component

wwEditableText component

ww-responsive directive