Skip to main content

items

items: Array<{ comp: string; key: string; label: string; options?: Array<{ value: string; label: string; color?: string }> }>

this property defines the components to be rendered in the editor. The default value is an empty array.

Usage​

Rendering editable text control in an editor​

<script>
    import { Editor } from "wx-svelte-editor";
    
    const items = [
        {
            comp: "text",
            key: "name",
            label: "Name"
        }
    ];
</script>

<Editor {items} />

Rendering readonly block in an editor​

<script>
    import { Editor } from "wx-svelte-editor";
    
    const items = [
        {
            comp: "readonly",
            key: "name",
            label: "Name"
        }
    ];
</script>

<Editor {items} />

Rendering radio buttons in an editor​

<script>
    import { RadioButtonGroup } from "wx-svelte-core";
    import { Editor, registerEditorItem } from "wx-svelte-editor";
    
    registerEditorItem("radio-group", RadioButtonGroup);

    const items = [
        {
            comp: "radio-group",
            key: "name",
            label: "Name",
            options: [
                {
                    value: "s",
                    label: "Scorpions",
                },
                {
                    value: "m",
                    label: "Muse",
                },
            ]
        }
    ];
</script>

<Editor {items} />

Rendering textarea control in an editor​

<script>
    import { Editor } from "wx-svelte-editor";
    
    registerEditorItem("textarea", TextArea);

    const items = [
        {
            comp: "textarea",
            key: "name",
            label: "Name"
        }
    ];
</script>

<Editor {items} />

Rendering slider control in an editor​

<script>
    import { Slider } from "wx-svelte-core";
    import { Editor, registerEditorItem } from "wx-svelte-editor";
    
    registerEditorItem("slider", Slider);

    const items = [
        {
            comp: "slider",
            key: "name",
            label: "Name"
        }
    ];
</script>

<Editor {items} />

Rendering rich select control in an editor​

<script>
    import { RichSelect } from "wx-svelte-core";
    import { Editor, registerEditorItem } from "wx-svelte-editor";
    
    registerEditorItem("select", RichSelect);

    const items = [
        {
            comp: "select",
            key: "name",
            label: "Name",
            options: [
                { id: 1, label: "High", color: "#DF282F" },
                { id: 2, label: "Medium", color: "#FFC975" },
                { id: 3, label: "Low", color: "#65D3B3" },
            ]
        }
    ];
</script>

<Editor {items} />

Rendering datepicker control in an editor​

<script>
    import { DatePicker } from "wx-svelte-core";
    import { Editor, registerEditorItem } from "wx-svelte-editor";
    
    registerEditorItem("datepicker", DatePicker);

    const items = [
        {
            comp: "datepicker",
            key: "name",
            label: "Name"
        }
    ];
</script>

<Editor {items} />

Rendering colorpicker control in an editor​

<script>
    import { ColorSelect } from "wx-svelte-core";
    import { Editor, registerEditorItem } from "wx-svelte-editor";
    
    registerEditorItem("colorselect", ColorSelect);

    const items = [
        {
            comp: "colorselect",
            key: "name",
            label: "Name"
        }
    ];
</script>

<Editor {items} />

Adding comments to editor​

<script>
    import { Editor, registerEditorItem } from "wx-svelte-editor";
    import { Comments } from "wx-svelte-comments";

    registerEditorItem("comments", Comments);

    const users = [
        {
            id: 1,
            name: "John Doe",
            avatar: "https://via.placeholder.com/150",
        },
    ];

    const items = [
        {
            comp: "comments",
            key: "comments",
            label: "Comments",
            users,
            activeUser: 1,
        },

    ];

    const data = {
        comments: [
            {
                id: 1,
                user: 1,
                content: "Greetings, fellow colleagues.",
                date: new Date(),
            },
        ],
    }
</script>

<Editor {items} values={data} />

Adding task list to editor​

<script>
    import { Editor, registerEditorItem } from "wx-svelte-editor";
    import { TaskList } from "wx-svelte-tasklist";

    registerEditorItem("tasks", Tasklist);
    const items = [
        {
            comp: "tasks",
            key: "task",
            label: "Task",
        },
    ];

    const data = {
        task: [
            {
                id: 1,
                title: "Task 1",
                status: 1,
            },
        ],
    }
</script>

<Editor {items} values={data} />

Splitting form in sections​

<script>
    import { Editor, registerEditorItem } from "wx-svelte-editor";
    import { Comments } from "wx-svelte-comments";
    
    registerEditorItem("coments", Comments);

    const items = [
        {
            comp: "section",
            key: "common-section",
            label: "Common settings",
        },
        {
            comp: "text",
            key: "name",
            label: "Name",
        },
        {
            comp: "textarea",
            key: "descr",
            label: "Description",
        },
        {
            comp: "section",
            key: "comments-section",
            label: "Comments",
        },
        {
            comp: "comments",
            key: "comments",
            section: "comments-section",
        }
    ];
</script>

<Editor {items} />

All fields are rendered inside a collapsible sections.

Marking field as required​

<script>
    import { Editor } from "wx-svelte-editor";

    const items = [
        {
            comp: "text",
            key: "name",
            required: true,
        },
    ];
</script>

<Editor {items} />

This example shows how to mark the name field as required in the editor.

Defining validation rule for a field​

<script>
    import { Editor } from "wx-svelte-editor";

    const items = [
        { comp: "text", key: "name", label: "Name",
            validation: val => {
              const regEx = /^[a-zA-Z]+$/;
                return val && regEx.test(val);
            },
            validationMessage: "wrong name format"
        }
    ];
</script>

<Editor {items} />

This example defines a validation rule for the "Name" field that requires the input to match a specific regular expression. If the input does not match, the validation message "wrong name format" will be displayed.