Neleto logoNeleto

Property-Types

Definition of all available property-types

These are the different inputs available for component form-structure.

Component structure

A plugin provides components as folders inside the directory referenced by components in your plugin.json. Each component folder can contain these files:

FileRequiredPurpose
form.jsonyesThe editable properties shown in the page builder
.meta.jsonyesIcon and category of the component
template.hbsnoThe Handlebars template rendered on the page
script.jsnoClient-side script loaded when the component renders
style.cssnoStyles loaded when the component renders

.meta.json

.meta.json defines the icon and the page-builder category of the component:

{
    "icon": "i-tabler-photo",
    "category": "interactive"
}

form.json

form.json is an object with the component's translated label (the name shown in the page builder) and a properties array. Each entry of properties is one of the property-types documented below:

{
    "label": { "de": "Meine Komponente", "en": "My component" },
    "properties": [
        {
            "type": "text",
            "id": "heading",
            "label": { "de": "Überschrift", "en": "Heading" }
        }
    ]
}
Every label, hint and description is a Record<string, string> that should contain an entry for each language your instance uses.

template.hbs

Inside the template the configured property values are available under properties, and data resolved from relation / pluginData properties under relations:

<h2>{{ properties.heading }}</h2>

Number

type Number = {
    id: string;
    label: Record<string, string>;
    description?: string;
    defaultValue?: number;
    hint?: string;
    min?: number;
    max?: numer;
    step?: number;
};

Range

type Range = {
    id: string;
    label: Record<string, string>;
    description?: string;
    defaultValue?: number;
    hint?: string;
    min: number;
    max: numer;
    step?: number;
};

Checkbox

type Checkbox = {
    id: string;
    label: Record<string, string>;
    description?: string;
    defaultValue?: boolean;
    hint?: string;
};

RelationRules

type RelationRules = {
    id: string;
    label: Record<string, string>;
    description?: string;
    defaultValue?: unknown;
    hint?: string;
    relationName: "tag" | "user" | "page" | "post" | "file";
};

Relation

type Relation = {
    id: string;
    label: Record<string, string>;
    description?: string;
    defaultValue?: Array<string>;
    hint?: string;
    relationName: "tag" | "user" | "page" | "post" | "file";
    multiple?: boolean;
};

Richtext

type Richtext = {
    id: string;
    label: Record<string, string>;
    description?: string;
    defaultValue?: string;
    hint?: string;
};

Code

type Code = {
    id: string;
    label: Record<string, string>;
    description?: string;
    defaultValue?: string;
    hint?: string;
    language: "json" | "js" | "css" | "html";
};

Text

type Text = {
    id: string;
    label: Record<string, string>;
    description?: string;
    defaultValue?: string;
    hint?: string;
};

Textarea

type Textarea = {
    id: string;
    label: Record<string, string>;
    description?: string;
    defaultValue?: string;
    hint?: string;
};

Accordion

type Accordion = {
    id: string;
    label: Record<string, string>;
    description?: string;
    defaultValue?: unknown;
    hint?: string;
    items: Array<{
        id: string;
        description: Record<string, string>;
        properties: Array<Form>;
    }>;
};

Select

type Select<T extends string | number> = {
    id: string;
    label: Record<string, string>;
    description?: string;
    defaultValue?: T;
    hint?: string;
    options: Array<{
        value: T;
        label: Record<string, string>;
    }>;
    dataType: "string" | "number";
    multiple?: boolean;
};

Key-value

type KeyValue = {
    id: string;
    label: Record<string, string>;
    description?: string;
    defaultValue?: Record<any, any>;
    hint?: string;
    value: FormItem;
    key: FormItem;
};

Buider

type Builder = {
    id: string;
    label: Record<string, string>;
    description?: string;
    defaultValue?: unknown;
    hint?: string;
    previewTemplate?: string;
    items: Array<any>;
};

Buttongroup

type Buttongroup = {
    id: string;
    label: Record<string, string>;
    description?: string;
    defaultValue?: string;
    hint?: string;
    options: Array<{
        value: string;
        label: Record<string, string>;
    }>;
};

PluginData

type PluginData = {
    id: string;
    label: Record<string, string>;
    description?: string;
    defaultValue?: unknown;
    hint?: string;
    pluginId: string;
    labelKey: string;
    valueKey: string;
    filterByKey?: string;
};