Very cool tool! I intend to use it as a wireframe. <p dir="auto"

Hi Thank you. You can add inputs globally for all

add custom script about vvvebjs HOT 1 OPEN

androidealp commented on May 25, 2024

add custom script

from vvvebjs.

Comments (1)

givanz commented on May 25, 2024 1

Thank you.

You can add inputs globally for all components by including them in the _base component that is extended by most components
https://github.com/givanz/VvvebJs/blob/master/libs/builder/components-common.js#L100

For example to edit the event for click you can use something like

Vvveb.Components.add("_base", {
    name: "Element",
	properties: [{
        key: "element_header",
        inputtype: SectionInput,
        name:false,
        sort:base_sort++,
        data: {header:"General"},
    }, {
        name: "Id",
        key: "id",
        htmlAttr: "id",
        sort: base_sort++,
        inline:false,
        col:6,
        inputtype: TextInput
    }, {
        name: "Class",
        key: "class",
        htmlAttr: "class",
        sort: base_sort++,
        inline:false,
        col:6,
        inputtype: TextInput
    }, {
        name: "Click Event",
        key: "clickevent",
        htmlAttr: "onclick",
        sort: base_sort++,
        inline:false,
        col:6,
        inputtype: TextInput
    }
   ]
});

If you want to use a predefined list of javascript functions that can be selected for events then you can use a select input like this:

Vvveb.Components.add("_base", {
    name: "Element",
	properties: [{
        key: "element_header",
        inputtype: SectionInput,
        name:false,
        sort:base_sort++,
        data: {header:"General"},
    }, {
        name: "Id",
        key: "id",
        htmlAttr: "id",
        sort: base_sort++,
        inline:false,
        col:6,
        inputtype: TextInput
    }, {
        name: "Class",
        key: "class",
        htmlAttr: "class",
        sort: base_sort++,
        inline:false,
        col:6,
        inputtype: TextInput
    }, {
        name: "Click Event",
        key: "clickevent",
        htmlAttr: "onclick",
        sort: base_sort++,
        inline:false,
        col:6,
        inputtype: SelectInput,
        data:{
	options: [{
                value: "myfunction()",
                text: "My function"
            }, {
                value: "alert('Message')",
                text: "Display message"
            }, {
                value: "anotherFunction()",
                text: "Another Function"
            }]
       },
    }
   ]
});