items

Description

Optional. Defines the components to be rendered in the Editor

Usage

items?: {
   comp?: string | Component;
   key?: string;
   label?: string;
   labelTemplate?: (value: any) => string;
   column?: "right" | "left";
   batch?: string | number;
   hidden?: boolean;
   section?: string;
   sectionMode?: "accordion" | "exclusive";
   activeSection?: boolean;
   options?: {
      id?: string | number;
      label?: string;
      [key: string]: any;
   }[];
   required?: boolean;
   validation?: (value: any) => boolean;
   validationMessage?: string;
   config?: {
      [key: string]: any;
   };
   [key: string]: any;
	}[];

Parameters

• comp – (required) specifies the component type (e.g., "text", "textarea", "select") or a Svelte component. If the component is not found or not provided, "text" will be used.
• key – (required) unique key that binds the item to a property in the editor’s values object
• label – (optional) text label displayed next to the control
• labelTemplate – (optional) function that returns a custom label string based on the current value
• column – (optional) defines which column the control is rendered in: "left" | "right"
• batch – (optional) groups items together for collective rendering or processing
• hidden – (optional) if true, the item will not be rendered
• section – (optional) assigns the item to a named section
• sectionMode – (optional) defines the behavior of collapsible sections:
  • "accordion" – multiple sections can stay open
  • "exclusive" – only one section can stay open at a time
• activeSection – (optional) if true, the section will be expanded by default
• options – (optional) defines the list of available options. Used by components like select, radio, etc.
• required – (optional) marks the field as required
• validation – (optional) custom validation function. Must return true for valid values, false otherwise
• validationMessage – (optional) message shown when validation fails
• config – (optional) arbitrary configuration object passed directly to the component
• [key: string] – (optional) allows attaching additional attributes or properties to the editor item

Examples

Rendering editable text control in an editor

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

<Editor {items} />

Rendering readonly block in an editor

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

<Editor {items} />

Rendering radio buttons in an editor

<script>
   import { RadioButtonGroup } from "@svar-ui/svelte-core";
   import { Editor, registerEditorItem } from "@svar-ui/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 "@svar-ui/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 "@svar-ui/svelte-core";
   import { Editor, registerEditorItem } from "@svar-ui/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 "@svar-ui/svelte-core";
   import { Editor, registerEditorItem } from "@svar-ui/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 "@svar-ui/svelte-core";
   import { Editor, registerEditorItem } from "@svar-ui/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 "@svar-ui/svelte-core";
   import { Editor, registerEditorItem } from "@svar-ui/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 "@svar-ui/svelte-editor";
   import { Comments } from "@svar-ui/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 "@svar-ui/svelte-editor";
   import { TaskList } from "@svar-ui/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 "@svar-ui/svelte-editor";
   import { Comments } from "@svar-ui/svelte-comments";
   
   registerEditorItem("comments", 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 "@svar-ui/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 "@svar-ui/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.