Config panels

Config panel configuration options

Form settings panel

The following options can be used to disable form settings config options.

js
// builder.config.js

export default {
  form: {
    props: {
      properties: {
        name: true,
        width: true,
        nesting: true,
      },
      submission: {
        endpoint: true,
        formKey: true,
      },
      validation: {
        live: true,
      },
      layout: {
        size: {
          sm: true,
          md: true,
          lg: true,
        },
        columns: {
          container: true,
          label: true,
          wrapper: true,
        },
        forceLabels: true,
        floatPlaceholders: true,
        displayErrors: true,
        displayMessages: true,
      },
    },
  },
}

Theme settings panel

The following options can be used to disable theme config options.

js
// builder.config.js

export default {
  'theme': {
    'props': {
      'theme': {
        'theme': true
      },
      'tools': {
        'tools': true
      },
      'colors': {
        'primary': true,
        'primary-darker': true,
        'color-on-primary': true,
        'danger': true,
        'danger-lighter': true,
        'success': true,
        'success-lighter': true,
        'gray-50': true,
        'gray-100': true,
        'gray-200': true,
        'gray-300': true,
        'gray-400': true,
        'gray-500': true,
        'gray-600': true,
        'gray-700': true,
        'gray-800': true,
        'gray-900': true
      },
      'fonts': {
        'font-size': true,
        'line-height': true,
        'letter-spacing': true,
        'font-size-small': true,
        'line-height-small': true,
        'letter-spacing-small': true,
        'font-size-h1': true,
        'font-size-h1-mobile': true,
        'font-size-h2': true,
        'font-size-h2-mobile': true,
        'font-size-h3': true,
        'font-size-h3-mobile': true,
        'font-size-h4': true,
        'font-size-h4-mobile': true,
        'line-height-headings': true,
        'letter-spacing-headings': true,
        'font-size-blockquote': true,
        'line-height-blockquote': true,
        'letter-spacing-blockquote': true
      },
      'spaces': {
        'gutter': true,
        'link-color': true,
        'link-decoration': true,
        'color-muted': true,
        'color-passive': true,
        'bg-passive': true,
        'border-color-passive': true,
        'bg-selected': true,
        'radius-small': true,
        'shadow-handles': true,
        'shadow-handles-hover': true,
        'shadow-handles-focus': true
      },
      'inputs': {
        'min-height-input': true,
        'ring-width': true,
        'ring-color': true,
        'py-input': true,
        'px-input': true,
        'border-width-input': true,
        'radius-input': true,
        'radius-large': true,
        'border-color-input': true,
        'color-input': true,
        'bg-icon': true,
        'color-floating': true,
        'bg-input': true,
        'shadow-input': true,
        'hover': true,
        'color-input-hover': true,
        'bg-input-hover': true,
        'border-color-input-hover': true,
        'shadow-input-hover': true,
        'focus': true,
        'color-input-focus': true,
        'color-floating-focus': true,
        'bg-input-focus': true,
        'border-color-input-focus': true,
        'shadow-input-focus': true,
        'danger': true,
        'color-input-danger': true,
        'color-floating-danger': true,
        'bg-input-danger': true,
        'border-color-input-danger': true,
        'success': true,
        'color-input-success': true,
        'color-floating-success': true,
        'bg-input-success': true,
        'border-color-input-success': true,
        'disabled': true,
        'color-disabled': true,
        'bg-disabled': true,
        'floating-top': true,
        'space-addon': true,
        'bg-addon': true,
        'color-addon': true
      },
      'select': {
        'dropdown': true,
        'border-width-dropdown': true,
        'shadow-dropdown': true
      },
      'tags': {
        'py-tag': true,
        'px-tag': true,
        'space-tags': true,
        'border-width-tag': true,
        'radius-tag': true,
        'color-tag': true,
        'bg-tag': true,
        'border-color-tag': true
      },
      'datepicker': {
        'color-date-head': true,
        'bg-date-head': true
      },
      'checkboxes': {
        'checkbox-size': true,
        'space-checkbox': true,
        'border-color-checked': true,
        'radio': true,
        'border-width-radio': true,
        'checkbox': true,
        'border-width-checkbox': true,
        'radius-checkbox': true,
        'tabs': true,
        'py-group-tabs': true,
        'px-group-tabs': true,
        'blocks': true,
        'py-group-blocks': true,
        'px-group-blocks': true
      },
      'slider': {
        'slider-height': true,
        'slider-height-vertical': true,
        'radius-slider': true,
        'handle': true,
        'slider-handle-size': true,
        'bg-slider-handle': true,
        'tooltip': true,
        'py-slider-tooltip': true,
        'px-slider-tooltip': true,
        'slider-tooltip-distance': true,
        'slider-tooltip-arrow-size': true,
        'border-color-slider-tooltip': true
      },
      'toggle': {
        'toggle-width': true,
        'toggle-height': true,
        'border-width-toggle': true,
        'handle': true,
        'bg-toggle-handle': true
      },
      'images': {
        'image': true,
        'radius-image': true,
        'gallery': true,
        'gallery-size': true,
        'radius-gallery': true
      },
      'buttons': {
        'py-btn': true,
        'px-btn': true,
        'small-buttons': true,
        'py-btn-small': true,
        'px-btn-small': true,
        'border-color-btn': true,
        'border-width-btn': true,
        'radius-btn': true,
        'color-btn': true,
        'bg-btn': true,
        'shadow-btn': true,
        'secondary': true,
        'color-btn-secondary': true,
        'bg-btn-secondary': true,
        'border-color-btn-secondary': true,
        'danger': true,
        'color-btn-danger': true,
        'bg-btn-danger': true,
        'border-color-btn-danger': true
      },
      'static': {
        'spacing': true,
        'space-static-tag-1': true,
        'space-static-tag-2': true,
        'space-static-tag-3': true,
        'divider': true,
        'py-hr': true,
        'border-color-hr': true,
        'quote': true,
        'py-blockquote': true,
        'px-blockquote': true,
        'border-width-blockquote': true,
        'border-color-blockquote': true
      }
    },
  },
}

Export settings panel

The following options can be used to disable export config options.

js
// builder.config.js

export default {
  export: {
    props: {
      export: {
        output: true,
        api: true,
        theme: true,
        download: true,
      },
    },
  },
}

Element search panel

The following options configure the available elements & element categories.

js
// builder.config.js

export default {
  // Element categories (set to `false` to hide)
  categories: [
    {
      label: 'Fields',
      key: 'fields',
    },
    {
      label: 'Static',
      key: 'static',
    },
    {
      label: 'Structure',
      key: 'structure',
    },
  ],

  // List of element types to include
  elements: [
    'text',
    'number',
    'email',
    'phone',
    'password',
    'url',
    'location',
    'textarea',
    'editor',
    'checkbox',
    'checkboxgroup',
    'checkboxBlocks',
    'checkboxTabs',
    'radio',
    'radiogroup',
    'radioBlocks',
    'radioTabs',
    'toggle',
    'select',
    'multiselect',
    'tags',
    'date',
    'datetime',
    'time',
    'dates',
    'dateRange',
    'slider',
    'rangeSlider',
    'verticalSlider',
    'file',
    'multifile',
    'image',
    'multiImage',
    'gallery',
    'hidden',
    'submit',
    'reset',
    'primaryButton',
    'secondaryButton',
    'dangerButton',
    'h1',
    'h2',
    'h3',
    'h4',
    'p',
    'quote',
    'img',
    'link',
    'divider',
    'html',
    'tabs',
    'steps',
    'container',
    'container2',
    'container3',
    'container4',
    'list',
    'nestedList',
  ],

  // List of element types to exclude
  excludeElements: [],
}

Element settings panel

Element settings can be disabled for different elements under element.props. This object has an item for each element type and a special one, called default.

js
// builder.config.js

export default {
  element: {
    props: {
      // Disables placeholder options for each element
      default: {
        properties: {
          placeholder: false,
        },
        decorators: {
          addons: false,
          before: false,
          between: false,
          after: false,
          tooltip: false,
          description: false,
        },
        // ...
      },

      // ...
    },
  },
}

The default contains all the options of all the elements and can be used to disable properties globally, without having to go through each element and eg. disabling conditions for each.

When disabling default options you have to explicitly disable options and you can't disable option groups:

js
// builder.config.js

export default {
  element: {
    props: {

      // THIS WILL NOT WORK
      default: {
        properties: false
      },

      // THIS WILL WORK
      default: {
        properties: {
          inputType: false,
          label: false,
          tooltip: false,
          placeholder: false,
          description: false,
          meta: false,
        }
      },
    },
  },
}

The named element sections (eg. text, textarea or select, etc.) contain configuration options for only that specific element. These can be used to disable config options for certain elements only and to override default.

js
// builder.config.js

export default {
  element: {
    props: {
      // Disables placeholder options for all elements
      default: {
        properties: {
          placeholder: false,
        },
        // ...
      },

      // Enables back placeholder options for `select` only
      select: {
        properties: {
          placeholder: true,
        },
        // ...
      },

      // ...
    },
  },
}

The only config you shouldn't disable ever is the properties.type. This is a core field that needs to be included in each element config panels.

We can disable options groups or single options for elements:

js
// builder.config.js

export default {
  element: {
    props: {

      // THIS WILL WORK
      text: {
        properties: false
      },

      // THIS WILL ALSO WORK
      text: {
        properties: {
          inputType: false,
          label: false,
          tooltip: false,
          placeholder: false,
          description: false,
        }
      },
    },
  },
}

Certain configuration options are broken down further into "sub-options", enabling to turn off features within configuration groups, eg. validation:

js
// builder.config.js

export default {
  element: {
    props: {
      default: {
        validation: {
          // Turn off validation feature
          // completely for each element
          validation: false,

          // Turn off only "min", "max" and
          // "size" validation rules for each
          // element that have them
          validation: {
            min: false,
            max: false,
            size: false,
            // ...
          },
        }
      },
      // ...
    },
  },
}

Element settings

The available element settings options are listed in this section.

default

Setting options for default element type.

js
// builder.config.js

export default {
  element: {
    props: {
      default: {
        properties: {
          type: true,
          name: true,
          inputType: true,
          label: true,
          tooltip: true,
          placeholder: {
            floating: true,
          },
          description: true,
          meta: true,
        },
        data: {
          default: true,
          submit: true,
          items: {
            list: true,
            json: true,
            endpoint: true,
          },
          object: true,
          nested: true,
        },
        decorators: {
          addons: {
            prefix: true,
            suffix: true,
          },
          before: true,
          between: true,
          after: true,
          tooltip: true,
          description: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
          align: {
            left: true,
            right: true,
          },
          view: {
            tabs: true,
            blocks: true,
          },
          full: true,
          space: {
            '0': true,
            '1': true,
            '2': true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            accepted: true,
            active_url: true,
            after: true,
            after_or_equal: true,
            alpha: true,
            alpha_dash: true,
            alpha_num: true,
            array: true,
            before: true,
            before_or_equal: true,
            boolean: true,
            date: true,
            date_equals: true,
            date_format: true,
            different: true,
            digits: true,
            digits_between: true,
            dimensions: true,
            width: true,
            height: true,
            minWidth: true,
            minHeight: true,
            maxWidth: true,
            maxHeight: true,
            ratio: true,
            distinct: true,
            email: true,
            exists: true,
            file: true,
            gt: true,
            gte: true,
            image: true,
            in: true,
            in_array: true,
            integer: true,
            ip: true,
            ipv4: true,
            ipv6: true,
            json: true,
            lt: true,
            lte: true,
            max: true,
            mimetypes: true,
            mimes: true,
            min: true,
            not_in: true,
            nullable: true,
            numeric: true,
            regex: true,
            required: true,
            same: true,
            size: true,
            string: true,
            timezone: true,
            unique: true,
            url: true,
            uuid: true,
          },
          fileRules: {
            min: true,
            max: true,
            mimes: true,
            extensions: true,
            dimensions: true,
            width: true,
            height: true,
            minWidth: true,
            minHeight: true,
            maxWidth: true,
            maxHeight: true,
            ratio: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          readonly: true,
          id: true,
          autocomplete: true,
          attrs: true,
        },
        options: {
          autogrow: true,
          rows: true,
          endpoint: {
            method: true,
          },
          accept: {
            mimes: true,
            extensions: true,
          },
          tools: true,
          text: true,
          boolValue: true,
          radio: true,
          labels: true,
          native: true,
          search: {
            strict: true,
            trackBy: true,
            inputType: true,
            autocomplete: true,
          },
          create: {
            append: true,
            addOn: true,
          },
          behavior: {
            deselect: true,
            clear: true,
            closeOnSelect: true,
          },
          ui: {
            caret: true,
            truncate: true,
            openDirection: true,
            limit: true,
          },
          noOptions: true,
          noResults: true,
          max: true,
          multipleLabel: true,
          format: {
            display: true,
            value: true,
            load: true,
          },
          restrictions: {
            min: true,
            max: true,
            disables: true,
          },
          hour24: true,
          seconds: true,
          mode: true,
          min: true,
          step: true,
          orientation: true,
          direction: true,
          tooltips: {
            merge: true,
            show: true,
            position: true,
          },
          tooltipFormat: true,
          autoUpload: true,
          dragAndDrop: true,
          softRemove: true,
          clickable: true,
          urls: {
            click: true,
            preview: true,
          },
          endpoints: {
            uploadTemp: true,
            uploadTempMethod: true,
            removeTemp: true,
            removeTempMethod: true,
            remove: true,
            removeMethod: true,
          },
          params: true,
          controls: {
            add: true,
            remove: true,
            sort: true,
          },
          store: {
            object: true,
            file: true,
            order: true,
          },
          buttonLabel: true,
          buttonType: true,
          submits: true,
          resets: true,
          href: true,
          target: true,
          tag: {
            html: true,
            h1: true,
            h2: true,
            h3: true,
            h4: true,
            p: true,
            blockquote: true,
            img: true,
            link: true,
            hr: true,
          },
          content: true,
          img: {
            src: true,
            alt: true,
            title: true,
            width: true,
            height: true,
          },
          link: {
            href: true,
            target: true,
          },
          attrs: true,
          initial: true,
          addText: true,
          storeOrder: true,
        },
      },
    },
  },
}

text

Setting options for text element type.

js
// builder.config.js

export default {
  element: {
    props: {
      text: {
        properties: {
          type: true,
          name: true,
          inputType: true,
          label: true,
          tooltip: true,
          placeholder: {
            floating: true,
          },
          description: true,
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          addons: {
            prefix: true,
            suffix: true,
          },
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            active_url: true,
            after: true,
            after_or_equal: true,
            alpha: true,
            alpha_dash: true,
            alpha_num: true,
            before: true,
            before_or_equal: true,
            date: true,
            date_equals: true,
            date_format: true,
            different: true,
            digits: true,
            digits_between: true,
            email: true,
            exists: true,
            gt: true,
            gte: true,
            in: true,
            in_array: true,
            integer: true,
            ip: true,
            ipv4: true,
            ipv6: true,
            json: true,
            lt: true,
            lte: true,
            max: true,
            min: true,
            not_in: true,
            nullable: true,
            numeric: true,
            regex: true,
            required: true,
            same: true,
            size: true,
            string: true,
            timezone: true,
            unique: true,
            url: true,
            uuid: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          readonly: true,
          id: true,
          autocomplete: true,
          attrs: true,
        },
      },
    },
  },
}

number

Setting options for number element type.

js
// builder.config.js

export default {
  element: {
    props: {
      number: {
        properties: {
          type: true,
          name: true,
          inputType: true,
          label: true,
          tooltip: true,
          placeholder: {
            floating: true,
          },
          description: true,
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          addons: {
            prefix: true,
            suffix: true,
          },
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            active_url: true,
            after: true,
            after_or_equal: true,
            alpha: true,
            alpha_dash: true,
            alpha_num: true,
            before: true,
            before_or_equal: true,
            date: true,
            date_equals: true,
            date_format: true,
            different: true,
            digits: true,
            digits_between: true,
            email: true,
            exists: true,
            gt: true,
            gte: true,
            in: true,
            in_array: true,
            integer: true,
            ip: true,
            ipv4: true,
            ipv6: true,
            json: true,
            lt: true,
            lte: true,
            max: true,
            min: true,
            not_in: true,
            nullable: true,
            numeric: true,
            regex: true,
            required: true,
            same: true,
            size: true,
            string: true,
            timezone: true,
            unique: true,
            url: true,
            uuid: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          readonly: true,
          id: true,
          autocomplete: true,
          attrs: true,
        },
      },
    },
  },
}

email

Setting options for email element type.

js
// builder.config.js

export default {
  element: {
    props: {
      email: {
        properties: {
          type: true,
          name: true,
          inputType: true,
          label: true,
          tooltip: true,
          placeholder: {
            floating: true,
          },
          description: true,
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          addons: {
            prefix: true,
            suffix: true,
          },
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            active_url: true,
            after: true,
            after_or_equal: true,
            alpha: true,
            alpha_dash: true,
            alpha_num: true,
            before: true,
            before_or_equal: true,
            date: true,
            date_equals: true,
            date_format: true,
            different: true,
            digits: true,
            digits_between: true,
            email: true,
            exists: true,
            gt: true,
            gte: true,
            in: true,
            in_array: true,
            integer: true,
            ip: true,
            ipv4: true,
            ipv6: true,
            json: true,
            lt: true,
            lte: true,
            max: true,
            min: true,
            not_in: true,
            nullable: true,
            numeric: true,
            regex: true,
            required: true,
            same: true,
            size: true,
            string: true,
            timezone: true,
            unique: true,
            url: true,
            uuid: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          readonly: true,
          id: true,
          autocomplete: true,
          attrs: true,
        },
      },
    },
  },
}

phone

Setting options for phone element type.

js
// builder.config.js

export default {
  element: {
    props: {
      phone: {
        properties: {
          type: true,
          name: true,
          inputType: true,
          label: true,
          tooltip: true,
          placeholder: {
            floating: true,
          },
          description: true,
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          addons: {
            prefix: true,
            suffix: true,
          },
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            active_url: true,
            after: true,
            after_or_equal: true,
            alpha: true,
            alpha_dash: true,
            alpha_num: true,
            before: true,
            before_or_equal: true,
            date: true,
            date_equals: true,
            date_format: true,
            different: true,
            digits: true,
            digits_between: true,
            email: true,
            exists: true,
            gt: true,
            gte: true,
            in: true,
            in_array: true,
            integer: true,
            ip: true,
            ipv4: true,
            ipv6: true,
            json: true,
            lt: true,
            lte: true,
            max: true,
            min: true,
            not_in: true,
            nullable: true,
            numeric: true,
            regex: true,
            required: true,
            same: true,
            size: true,
            string: true,
            timezone: true,
            unique: true,
            url: true,
            uuid: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          readonly: true,
          id: true,
          autocomplete: true,
          attrs: true,
        },
      },
    },
  },
}

password

Setting options for password element type.

js
// builder.config.js

export default {
  element: {
    props: {
      password: {
        properties: {
          type: true,
          name: true,
          inputType: true,
          label: true,
          tooltip: true,
          placeholder: {
            floating: true,
          },
          description: true,
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          addons: {
            prefix: true,
            suffix: true,
          },
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            active_url: true,
            after: true,
            after_or_equal: true,
            alpha: true,
            alpha_dash: true,
            alpha_num: true,
            before: true,
            before_or_equal: true,
            date: true,
            date_equals: true,
            date_format: true,
            different: true,
            digits: true,
            digits_between: true,
            email: true,
            exists: true,
            gt: true,
            gte: true,
            in: true,
            in_array: true,
            integer: true,
            ip: true,
            ipv4: true,
            ipv6: true,
            json: true,
            lt: true,
            lte: true,
            max: true,
            min: true,
            not_in: true,
            nullable: true,
            numeric: true,
            regex: true,
            required: true,
            same: true,
            size: true,
            string: true,
            timezone: true,
            unique: true,
            url: true,
            uuid: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          readonly: true,
          id: true,
          autocomplete: true,
          attrs: true,
        },
      },
    },
  },
}

url

Setting options for url element type.

js
// builder.config.js

export default {
  element: {
    props: {
      url: {
        properties: {
          type: true,
          name: true,
          inputType: true,
          label: true,
          tooltip: true,
          placeholder: {
            floating: true,
          },
          description: true,
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          addons: {
            prefix: true,
            suffix: true,
          },
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            active_url: true,
            after: true,
            after_or_equal: true,
            alpha: true,
            alpha_dash: true,
            alpha_num: true,
            before: true,
            before_or_equal: true,
            date: true,
            date_equals: true,
            date_format: true,
            different: true,
            digits: true,
            digits_between: true,
            email: true,
            exists: true,
            gt: true,
            gte: true,
            in: true,
            in_array: true,
            integer: true,
            ip: true,
            ipv4: true,
            ipv6: true,
            json: true,
            lt: true,
            lte: true,
            max: true,
            min: true,
            not_in: true,
            nullable: true,
            numeric: true,
            regex: true,
            required: true,
            same: true,
            size: true,
            string: true,
            timezone: true,
            unique: true,
            url: true,
            uuid: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          readonly: true,
          id: true,
          autocomplete: true,
          attrs: true,
        },
      },
    },
  },
}

location

Setting options for location element type.

js
// builder.config.js

export default {
  element: {
    props: {
      location: {
        properties: {
          type: true,
          name: true,
          inputType: true,
          label: true,
          tooltip: true,
          placeholder: {
            floating: true,
          },
          description: true,
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          addons: {
            prefix: true,
            suffix: true,
          },
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            required: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          readonly: true,
          id: true,
          autocomplete: true,
          attrs: true,
        },
      },
    },
  },
}

textarea

Setting options for textarea element type.

js
// builder.config.js

export default {
  element: {
    props: {
      textarea: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          placeholder: {
            floating: true,
          },
          description: true,
        },
        options: {
          autogrow: true,
          rows: true,
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          addons: {
            prefix: true,
            suffix: true,
          },
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            alpha: true,
            alpha_dash: true,
            alpha_num: true,
            different: true,
            digits: true,
            digits_between: true,
            email: true,
            exists: true,
            gt: true,
            gte: true,
            in: true,
            in_array: true,
            integer: true,
            ip: true,
            ipv6: true,
            json: true,
            lt: true,
            lte: true,
            max: true,
            min: true,
            not_in: true,
            nullable: true,
            numeric: true,
            regex: true,
            required: true,
            same: true,
            size: true,
            string: true,
            timezone: true,
            unique: true,
            url: true,
            uuid: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          readonly: true,
          id: true,
          attrs: true,
        },
      },
    },
  },
}

editor

Setting options for editor element type.

js
// builder.config.js

export default {
  element: {
    props: {
      editor: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          placeholder: {
            floating: true,
          },
          description: true,
        },
        options: {
          endpoint: {
            method: true,
          },
          accept: {
            mimes: true,
            extensions: true,
          },
          tools: true,
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            different: true,
            gt: true,
            gte: true,
            lt: true,
            lte: true,
            max: true,
            min: true,
            nullable: true,
            regex: true,
            required: true,
            same: true,
            size: true,
            string: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

checkbox

Setting options for checkbox element type.

js
// builder.config.js

export default {
  element: {
    props: {
      checkbox: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          text: true,
          boolValue: true,
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          align: {
            left: true,
            right: true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            accepted: true,
            different: true,
            in: true,
            not_in: true,
            same: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

checkboxgroup

Setting options for checkboxgroup element type.

js
// builder.config.js

export default {
  element: {
    props: {
      checkboxgroup: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        data: {
          items: {
            list: true,
            json: true,
            endpoint: true,
          },
          default: true,
          submit: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          view: {
            tabs: true,
            blocks: true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            array: true,
            distinct: true,
            max: true,
            min: true,
            nullable: true,
            required: true,
            size: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

checkboxBlocks

Setting options for checkboxBlocks element type.

js
// builder.config.js

export default {
  element: {
    props: {
      checkboxBlocks: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        data: {
          items: {
            list: true,
            json: true,
            endpoint: true,
          },
          default: true,
          submit: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          view: {
            tabs: true,
            blocks: true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            array: true,
            distinct: true,
            max: true,
            min: true,
            nullable: true,
            required: true,
            size: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

checkboxTabs

Setting options for checkboxTabs element type.

js
// builder.config.js

export default {
  element: {
    props: {
      checkboxTabs: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        data: {
          items: {
            list: true,
            json: true,
            endpoint: true,
          },
          default: true,
          submit: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          view: {
            tabs: true,
            blocks: true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            array: true,
            distinct: true,
            max: true,
            min: true,
            nullable: true,
            required: true,
            size: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

radio

Setting options for radio element type.

js
// builder.config.js

export default {
  element: {
    props: {
      radio: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          text: true,
          radio: true,
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          align: {
            left: true,
            right: true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            boolean: true,
            in: true,
            in_array: true,
            not_in: true,
            required: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

radiogroup

Setting options for radiogroup element type.

js
// builder.config.js

export default {
  element: {
    props: {
      radiogroup: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        data: {
          items: {
            list: true,
            json: true,
            endpoint: true,
          },
          default: true,
          submit: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          view: {
            tabs: true,
            blocks: true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            different: true,
            in: true,
            in_array: true,
            not_in: true,
            nullable: true,
            required: true,
            same: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

radioBlocks

Setting options for radioBlocks element type.

js
// builder.config.js

export default {
  element: {
    props: {
      radioBlocks: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        data: {
          items: {
            list: true,
            json: true,
            endpoint: true,
          },
          default: true,
          submit: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          view: {
            tabs: true,
            blocks: true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            different: true,
            in: true,
            in_array: true,
            not_in: true,
            nullable: true,
            required: true,
            same: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

radioTabs

Setting options for radioTabs element type.

js
// builder.config.js

export default {
  element: {
    props: {
      radioTabs: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        data: {
          items: {
            list: true,
            json: true,
            endpoint: true,
          },
          default: true,
          submit: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          view: {
            tabs: true,
            blocks: true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            different: true,
            in: true,
            in_array: true,
            not_in: true,
            nullable: true,
            required: true,
            same: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

toggle

Setting options for toggle element type.

js
// builder.config.js

export default {
  element: {
    props: {
      toggle: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          text: true,
          labels: true,
          boolValue: true,
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          align: {
            left: true,
            right: true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            different: true,
            in: true,
            not_in: true,
            nullable: true,
            required: true,
            same: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

select

Setting options for select element type.

js
// builder.config.js

export default {
  element: {
    props: {
      select: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          placeholder: {
            floating: true,
          },
          description: true,
        },
        options: {
          native: true,
          search: {
            strict: true,
            trackBy: true,
            inputType: true,
            autocomplete: true,
          },
          create: {
            append: true,
            addOn: true,
          },
          behavior: {
            deselect: true,
            clear: true,
            closeOnSelect: true,
          },
          ui: {
            caret: true,
            truncate: true,
            openDirection: true,
            limit: true,
          },
          noOptions: true,
          noResults: true,
        },
        data: {
          items: {
            list: true,
            json: true,
            endpoint: true,
            valueKey: true,
            labelKey: true,
            dataKey: true,
            searchParam: true,
            updateOnSearch: true,
            delay: true,
            minChars: true,
            resolveOnLoad: true,
            filterResults: true,
            clearOnSearch: true,
          },
          default: true,
          object: true,
          submit: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            alpha: true,
            alpha_dash: true,
            alpha_num: true,
            different: true,
            digits: true,
            digits_between: true,
            email: true,
            exists: true,
            gt: true,
            gte: true,
            in: true,
            in_array: true,
            integer: true,
            ip: true,
            ipv4: true,
            ipv6: true,
            lt: true,
            lte: true,
            max: true,
            min: true,
            not_in: true,
            nullable: true,
            numeric: true,
            regex: true,
            required: true,
            same: true,
            size: true,
            string: true,
            timezone: true,
            unique: true,
            url: true,
            uuid: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
          attrs: true,
        },
      },
    },
  },
}

multiselect

Setting options for multiselect element type.

js
// builder.config.js

export default {
  element: {
    props: {
      multiselect: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          placeholder: {
            floating: true,
          },
          description: true,
        },
        options: {
          native: true,
          search: {
            strict: true,
            trackBy: true,
            inputType: true,
            autocomplete: true,
          },
          create: {
            append: true,
            addOn: true,
          },
          behavior: {
            deselect: true,
            clear: true,
            closeOnSelect: true,
            hideSelected: true,
          },
          ui: {
            caret: true,
            truncate: true,
            openDirection: true,
            limit: true,
          },
          max: true,
          multipleLabel: true,
          noOptions: true,
          noResults: true,
        },
        data: {
          items: {
            list: true,
            json: true,
            endpoint: true,
            valueKey: true,
            labelKey: true,
            dataKey: true,
            searchParam: true,
            updateOnSearch: true,
            delay: true,
            minChars: true,
            resolveOnLoad: true,
            filterResults: true,
            clearOnSearch: true,
          },
          default: true,
          object: true,
          submit: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            array: true,
            distinct: true,
            gt: true,
            gte: true,
            lt: true,
            lte: true,
            max: true,
            min: true,
            nullable: true,
            required: true,
            size: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
          attrs: true,
        },
      },
    },
  },
}

tags

Setting options for tags element type.

js
// builder.config.js

export default {
  element: {
    props: {
      tags: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          placeholder: {
            floating: true,
          },
          description: true,
        },
        options: {
          search: {
            strict: true,
            trackBy: true,
            inputType: true,
            autocomplete: true,
          },
          create: {
            append: true,
            addOn: true,
          },
          behavior: {
            deselect: true,
            clear: true,
            closeOnSelect: true,
            hideSelected: true,
          },
          ui: {
            caret: true,
            truncate: true,
            openDirection: true,
            limit: true,
          },
          max: true,
          noOptions: true,
          noResults: true,
        },
        data: {
          items: {
            list: true,
            json: true,
            endpoint: true,
            valueKey: true,
            labelKey: true,
            dataKey: true,
            searchParam: true,
            updateOnSearch: true,
            delay: true,
            minChars: true,
            resolveOnLoad: true,
            filterResults: true,
            clearOnSearch: true,
          },
          default: true,
          object: true,
          submit: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            array: true,
            distinct: true,
            gt: true,
            gte: true,
            lt: true,
            lte: true,
            max: true,
            min: true,
            nullable: true,
            required: true,
            size: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
          attrs: true,
        },
      },
    },
  },
}

date

Setting options for date element type.

js
// builder.config.js

export default {
  element: {
    props: {
      date: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          placeholder: {
            floating: true,
          },
          description: true,
        },
        options: {
          format: {
            display: true,
            value: true,
            load: true,
          },
          restrictions: {
            min: true,
            max: true,
            disables: true,
          },
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          addons: {
            prefix: true,
            suffix: true,
          },
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            after: true,
            after_or_equal: true,
            before: true,
            before_or_equal: true,
            date: true,
            date_format: true,
            different: true,
            in: true,
            in_array: true,
            not_in: true,
            nullable: true,
            required: true,
            same: true,
            string: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          readonly: true,
          id: true,
        },
      },
    },
  },
}

datetime

Setting options for datetime element type.

js
// builder.config.js

export default {
  element: {
    props: {
      datetime: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          placeholder: {
            floating: true,
          },
          description: true,
        },
        options: {
          hour24: true,
          seconds: true,
          format: {
            display: true,
            value: true,
            load: true,
          },
          restrictions: {
            min: true,
            max: true,
            disables: true,
          },
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          addons: {
            prefix: true,
            suffix: true,
          },
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            after: true,
            after_or_equal: true,
            before: true,
            before_or_equal: true,
            date: true,
            date_format: true,
            different: true,
            in: true,
            in_array: true,
            not_in: true,
            nullable: true,
            required: true,
            same: true,
            string: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          readonly: true,
          id: true,
        },
      },
    },
  },
}

time

Setting options for time element type.

js
// builder.config.js

export default {
  element: {
    props: {
      time: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          placeholder: {
            floating: true,
          },
          description: true,
        },
        options: {
          hour24: true,
          seconds: true,
          format: {
            display: true,
            value: true,
            load: true,
          },
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          addons: {
            prefix: true,
            suffix: true,
          },
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            after: true,
            after_or_equal: true,
            before: true,
            before_or_equal: true,
            date: true,
            date_format: true,
            different: true,
            in: true,
            in_array: true,
            not_in: true,
            nullable: true,
            required: true,
            same: true,
            string: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          readonly: true,
          id: true,
        },
      },
    },
  },
}

dates

Setting options for dates element type.

js
// builder.config.js

export default {
  element: {
    props: {
      dates: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          placeholder: {
            floating: true,
          },
          description: true,
        },
        options: {
          mode: true,
          format: {
            display: true,
            value: true,
            load: true,
          },
          restrictions: {
            min: true,
            max: true,
            disables: true,
          },
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          addons: {
            prefix: true,
            suffix: true,
          },
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            after: true,
            after_or_equal: true,
            array: true,
            before: true,
            before_or_equal: true,
            date: true,
            date_format: true,
            distinct: true,
            max: true,
            min: true,
            nullable: true,
            required: true,
            size: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          readonly: true,
          id: true,
        },
      },
    },
  },
}

dateRange

Setting options for dateRange element type.

js
// builder.config.js

export default {
  element: {
    props: {
      dateRange: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          placeholder: {
            floating: true,
          },
          description: true,
        },
        options: {
          mode: true,
          format: {
            display: true,
            value: true,
            load: true,
          },
          restrictions: {
            min: true,
            max: true,
            disables: true,
          },
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          addons: {
            prefix: true,
            suffix: true,
          },
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            after: true,
            after_or_equal: true,
            array: true,
            before: true,
            before_or_equal: true,
            date: true,
            date_format: true,
            distinct: true,
            max: true,
            min: true,
            nullable: true,
            required: true,
            size: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          readonly: true,
          id: true,
        },
      },
    },
  },
}

slider

Setting options for slider element type.

js
// builder.config.js

export default {
  element: {
    props: {
      slider: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          min: true,
          max: true,
          step: true,
          orientation: true,
          direction: true,
          tooltips: {
            merge: true,
            show: true,
            position: true,
          },
          tooltipFormat: true,
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            array: true,
            different: true,
            digits: true,
            digits_between: true,
            distinct: true,
            gt: true,
            gte: true,
            in: true,
            in_array: true,
            integer: true,
            lt: true,
            lte: true,
            max: true,
            min: true,
            not_in: true,
            nullable: true,
            numeric: true,
            required: true,
            same: true,
            size: true,
            string: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

rangeSlider

Setting options for rangeSlider element type.

js
// builder.config.js

export default {
  element: {
    props: {
      rangeSlider: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          min: true,
          max: true,
          step: true,
          orientation: true,
          direction: true,
          tooltips: {
            merge: true,
            show: true,
            position: true,
          },
          tooltipFormat: true,
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            array: true,
            different: true,
            digits: true,
            digits_between: true,
            distinct: true,
            gt: true,
            gte: true,
            in: true,
            in_array: true,
            integer: true,
            lt: true,
            lte: true,
            max: true,
            min: true,
            not_in: true,
            nullable: true,
            numeric: true,
            required: true,
            same: true,
            size: true,
            string: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

verticalSlider

Setting options for verticalSlider element type.

js
// builder.config.js

export default {
  element: {
    props: {
      verticalSlider: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          min: true,
          max: true,
          step: true,
          orientation: true,
          direction: true,
          tooltips: {
            merge: true,
            show: true,
            position: true,
          },
          tooltipFormat: true,
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            array: true,
            different: true,
            digits: true,
            digits_between: true,
            distinct: true,
            gt: true,
            gte: true,
            in: true,
            in_array: true,
            integer: true,
            lt: true,
            lte: true,
            max: true,
            min: true,
            not_in: true,
            nullable: true,
            numeric: true,
            required: true,
            same: true,
            size: true,
            string: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

file

Setting options for file element type.

js
// builder.config.js

export default {
  element: {
    props: {
      file: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          autoUpload: true,
          dragAndDrop: true,
          softRemove: true,
          clickable: true,
          urls: {
            click: true,
            preview: true,
          },
          accept: {
            types: true,
            mimes: true,
            extensions: true,
          },
          endpoints: {
            uploadTemp: true,
            uploadTempMethod: true,
            removeTemp: true,
            removeTempMethod: true,
            remove: true,
            removeMethod: true,
          },
          params: true,
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          view: {
            file: true,
            image: true,
            gallery: true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            dimensions: true,
            file: true,
            gt: true,
            gte: true,
            image: true,
            lt: true,
            lte: true,
            max: true,
            mimetypes: true,
            mimes: true,
            min: true,
            nullable: true,
            required: true,
            size: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

multifile

Setting options for multifile element type.

js
// builder.config.js

export default {
  element: {
    props: {
      multifile: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          autoUpload: true,
          dragAndDrop: true,
          softRemove: true,
          clickable: true,
          urls: {
            click: true,
            preview: true,
          },
          controls: {
            add: true,
            remove: true,
            sort: true,
          },
          store: {
            object: true,
            file: true,
            order: true,
          },
          accept: {
            types: true,
            mimes: true,
            extensions: true,
          },
          endpoints: {
            uploadTemp: true,
            uploadTempMethod: true,
            removeTemp: true,
            removeTempMethod: true,
            remove: true,
            removeMethod: true,
          },
          params: true,
        },
        data: {
          submit: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          view: {
            file: true,
            image: true,
            gallery: true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          fileRules: {
            min: true,
            max: true,
            mimes: true,
            extensions: true,
            dimensions: true,
            width: true,
            height: true,
            minWidth: true,
            minHeight: true,
            maxWidth: true,
            maxHeight: true,
            ratio: true,
          },
          validation: {
            array: true,
            gt: true,
            gte: true,
            lt: true,
            lte: true,
            max: true,
            min: true,
            nullable: true,
            required: true,
            size: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

image

Setting options for image element type.

js
// builder.config.js

export default {
  element: {
    props: {
      image: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          autoUpload: true,
          dragAndDrop: true,
          softRemove: true,
          clickable: true,
          urls: {
            click: true,
            preview: true,
          },
          accept: {
            types: true,
            mimes: true,
            extensions: true,
          },
          endpoints: {
            uploadTemp: true,
            uploadTempMethod: true,
            removeTemp: true,
            removeTempMethod: true,
            remove: true,
            removeMethod: true,
          },
          params: true,
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          view: {
            file: true,
            image: true,
            gallery: true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            dimensions: true,
            file: true,
            gt: true,
            gte: true,
            image: true,
            lt: true,
            lte: true,
            max: true,
            mimetypes: true,
            mimes: true,
            min: true,
            nullable: true,
            required: true,
            size: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

multiImage

Setting options for multiImage element type.

js
// builder.config.js

export default {
  element: {
    props: {
      multiImage: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          autoUpload: true,
          dragAndDrop: true,
          softRemove: true,
          clickable: true,
          urls: {
            click: true,
            preview: true,
          },
          controls: {
            add: true,
            remove: true,
            sort: true,
          },
          store: {
            object: true,
            file: true,
            order: true,
          },
          accept: {
            types: true,
            mimes: true,
            extensions: true,
          },
          endpoints: {
            uploadTemp: true,
            uploadTempMethod: true,
            removeTemp: true,
            removeTempMethod: true,
            remove: true,
            removeMethod: true,
          },
          params: true,
        },
        data: {
          submit: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          view: {
            file: true,
            image: true,
            gallery: true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          fileRules: {
            min: true,
            max: true,
            mimes: true,
            extensions: true,
            dimensions: true,
            width: true,
            height: true,
            minWidth: true,
            minHeight: true,
            maxWidth: true,
            maxHeight: true,
            ratio: true,
          },
          validation: {
            array: true,
            gt: true,
            gte: true,
            lt: true,
            lte: true,
            max: true,
            min: true,
            nullable: true,
            required: true,
            size: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

Setting options for gallery element type.

js
// builder.config.js

export default {
  element: {
    props: {
      gallery: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          autoUpload: true,
          dragAndDrop: true,
          softRemove: true,
          clickable: true,
          urls: {
            click: true,
            preview: true,
          },
          controls: {
            add: true,
            remove: true,
            sort: true,
          },
          store: {
            object: true,
            file: true,
            order: true,
          },
          accept: {
            types: true,
            mimes: true,
            extensions: true,
          },
          endpoints: {
            uploadTemp: true,
            uploadTempMethod: true,
            removeTemp: true,
            removeTempMethod: true,
            remove: true,
            removeMethod: true,
          },
          params: true,
        },
        data: {
          submit: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          view: {
            file: true,
            image: true,
            gallery: true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          fileRules: {
            min: true,
            max: true,
            mimes: true,
            extensions: true,
            dimensions: true,
            width: true,
            height: true,
            minWidth: true,
            minHeight: true,
            maxWidth: true,
            maxHeight: true,
            ratio: true,
          },
          validation: {
            array: true,
            gt: true,
            gte: true,
            lt: true,
            lte: true,
            max: true,
            min: true,
            nullable: true,
            required: true,
            size: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

hidden

Setting options for hidden element type.

js
// builder.config.js

export default {
  element: {
    props: {
      hidden: {
        properties: {
          type: true,
          name: true,
          meta: true,
        },
        data: {
          default: true,
          submit: true,
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          id: true,
          attrs: true,
        },
      },
    },
  },
}

submit

Setting options for submit element type.

js
// builder.config.js

export default {
  element: {
    props: {
      submit: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          buttonLabel: true,
          buttonType: true,
          submits: true,
          resets: true,
          href: true,
          target: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          full: true,
          align: {
            left: true,
            center: true,
            right: true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

reset

Setting options for reset element type.

js
// builder.config.js

export default {
  element: {
    props: {
      reset: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          buttonLabel: true,
          buttonType: true,
          submits: true,
          resets: true,
          href: true,
          target: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          full: true,
          align: {
            left: true,
            center: true,
            right: true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

primaryButton

Setting options for primaryButton element type.

js
// builder.config.js

export default {
  element: {
    props: {
      primaryButton: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          buttonLabel: true,
          buttonType: true,
          submits: true,
          resets: true,
          href: true,
          target: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          full: true,
          align: {
            left: true,
            center: true,
            right: true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

secondaryButton

Setting options for secondaryButton element type.

js
// builder.config.js

export default {
  element: {
    props: {
      secondaryButton: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          buttonLabel: true,
          buttonType: true,
          submits: true,
          resets: true,
          href: true,
          target: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          full: true,
          align: {
            left: true,
            center: true,
            right: true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

dangerButton

Setting options for dangerButton element type.

js
// builder.config.js

export default {
  element: {
    props: {
      dangerButton: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          buttonLabel: true,
          buttonType: true,
          submits: true,
          resets: true,
          href: true,
          target: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          full: true,
          align: {
            left: true,
            center: true,
            right: true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        conditions: {
          conditions: true,
        },
        attributes: {
          disabled: true,
          id: true,
        },
      },
    },
  },
}

h1

Setting options for h1 element type.

js
// builder.config.js

export default {
  element: {
    props: {
      h1: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          tag: {
            html: true,
            h1: true,
            h2: true,
            h3: true,
            h4: true,
            p: true,
            blockquote: true,
            img: true,
            link: true,
            hr: true,
          },
          content: true,
          img: {
            src: true,
            alt: true,
            title: true,
            width: true,
            height: true,
          },
          link: {
            href: true,
            target: true,
          },
          attrs: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          align: {
            left: true,
            center: true,
            right: true,
          },
          space: {
            '0': true,
            '1': true,
            '2': true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        conditions: {
          conditions: true,
        },
      },
    },
  },
}

h2

Setting options for h2 element type.

js
// builder.config.js

export default {
  element: {
    props: {
      h2: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          tag: {
            html: true,
            h1: true,
            h2: true,
            h3: true,
            h4: true,
            p: true,
            blockquote: true,
            img: true,
            link: true,
            hr: true,
          },
          content: true,
          img: {
            src: true,
            alt: true,
            title: true,
            width: true,
            height: true,
          },
          link: {
            href: true,
            target: true,
          },
          attrs: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          align: {
            left: true,
            center: true,
            right: true,
          },
          space: {
            '0': true,
            '1': true,
            '2': true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        conditions: {
          conditions: true,
        },
      },
    },
  },
}

h3

Setting options for h3 element type.

js
// builder.config.js

export default {
  element: {
    props: {
      h3: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          tag: {
            html: true,
            h1: true,
            h2: true,
            h3: true,
            h4: true,
            p: true,
            blockquote: true,
            img: true,
            link: true,
            hr: true,
          },
          content: true,
          img: {
            src: true,
            alt: true,
            title: true,
            width: true,
            height: true,
          },
          link: {
            href: true,
            target: true,
          },
          attrs: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          align: {
            left: true,
            center: true,
            right: true,
          },
          space: {
            '0': true,
            '1': true,
            '2': true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        conditions: {
          conditions: true,
        },
      },
    },
  },
}

h4

Setting options for h4 element type.

js
// builder.config.js

export default {
  element: {
    props: {
      h4: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          tag: {
            html: true,
            h1: true,
            h2: true,
            h3: true,
            h4: true,
            p: true,
            blockquote: true,
            img: true,
            link: true,
            hr: true,
          },
          content: true,
          img: {
            src: true,
            alt: true,
            title: true,
            width: true,
            height: true,
          },
          link: {
            href: true,
            target: true,
          },
          attrs: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          align: {
            left: true,
            center: true,
            right: true,
          },
          space: {
            '0': true,
            '1': true,
            '2': true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        conditions: {
          conditions: true,
        },
      },
    },
  },
}

p

Setting options for p element type.

js
// builder.config.js

export default {
  element: {
    props: {
      p: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          tag: {
            html: true,
            h1: true,
            h2: true,
            h3: true,
            h4: true,
            p: true,
            blockquote: true,
            img: true,
            link: true,
            hr: true,
          },
          content: true,
          img: {
            src: true,
            alt: true,
            title: true,
            width: true,
            height: true,
          },
          link: {
            href: true,
            target: true,
          },
          attrs: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          align: {
            left: true,
            center: true,
            right: true,
          },
          space: {
            '0': true,
            '1': true,
            '2': true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        conditions: {
          conditions: true,
        },
      },
    },
  },
}

quote

Setting options for quote element type.

js
// builder.config.js

export default {
  element: {
    props: {
      quote: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          tag: {
            html: true,
            h1: true,
            h2: true,
            h3: true,
            h4: true,
            p: true,
            blockquote: true,
            img: true,
            link: true,
            hr: true,
          },
          content: true,
          img: {
            src: true,
            alt: true,
            title: true,
            width: true,
            height: true,
          },
          link: {
            href: true,
            target: true,
          },
          attrs: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          align: {
            left: true,
            center: true,
            right: true,
          },
          space: {
            '0': true,
            '1': true,
            '2': true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        conditions: {
          conditions: true,
        },
      },
    },
  },
}

img

Setting options for img element type.

js
// builder.config.js

export default {
  element: {
    props: {
      img: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          tag: {
            html: true,
            h1: true,
            h2: true,
            h3: true,
            h4: true,
            p: true,
            blockquote: true,
            img: true,
            link: true,
            hr: true,
          },
          content: true,
          img: {
            src: true,
            alt: true,
            title: true,
            width: true,
            height: true,
          },
          link: {
            href: true,
            target: true,
          },
          attrs: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          align: {
            left: true,
            center: true,
            right: true,
          },
          space: {
            '0': true,
            '1': true,
            '2': true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        conditions: {
          conditions: true,
        },
      },
    },
  },
}

Setting options for link element type.

js
// builder.config.js

export default {
  element: {
    props: {
      link: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          tag: {
            html: true,
            h1: true,
            h2: true,
            h3: true,
            h4: true,
            p: true,
            blockquote: true,
            img: true,
            link: true,
            hr: true,
          },
          content: true,
          img: {
            src: true,
            alt: true,
            title: true,
            width: true,
            height: true,
          },
          link: {
            href: true,
            target: true,
          },
          attrs: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          align: {
            left: true,
            center: true,
            right: true,
          },
          space: {
            '0': true,
            '1': true,
            '2': true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        conditions: {
          conditions: true,
        },
      },
    },
  },
}

divider

Setting options for divider element type.

js
// builder.config.js

export default {
  element: {
    props: {
      divider: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          tag: {
            html: true,
            h1: true,
            h2: true,
            h3: true,
            h4: true,
            p: true,
            blockquote: true,
            img: true,
            link: true,
            hr: true,
          },
          content: true,
          img: {
            src: true,
            alt: true,
            title: true,
            width: true,
            height: true,
          },
          link: {
            href: true,
            target: true,
          },
          attrs: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          align: {
            left: true,
            center: true,
            right: true,
          },
          space: {
            '0': true,
            '1': true,
            '2': true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        conditions: {
          conditions: true,
        },
      },
    },
  },
}

html

Setting options for html element type.

js
// builder.config.js

export default {
  element: {
    props: {
      html: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        options: {
          tag: {
            html: true,
            h1: true,
            h2: true,
            h3: true,
            h4: true,
            p: true,
            blockquote: true,
            img: true,
            link: true,
            hr: true,
          },
          content: true,
          img: {
            src: true,
            alt: true,
            title: true,
            width: true,
            height: true,
          },
          link: {
            href: true,
            target: true,
          },
          attrs: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          align: {
            left: true,
            center: true,
            right: true,
          },
          space: {
            '0': true,
            '1': true,
            '2': true,
          },
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        conditions: {
          conditions: true,
        },
      },
    },
  },
}

container

Setting options for container element type.

js
// builder.config.js

export default {
  element: {
    props: {
      container: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        data: {
          nested: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        conditions: {
          conditions: true,
        },
      },
    },
  },
}

container2

Setting options for container2 element type.

js
// builder.config.js

export default {
  element: {
    props: {
      container2: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        data: {
          nested: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        conditions: {
          conditions: true,
        },
      },
    },
  },
}

container3

Setting options for container3 element type.

js
// builder.config.js

export default {
  element: {
    props: {
      container3: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        data: {
          nested: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        conditions: {
          conditions: true,
        },
      },
    },
  },
}

container4

Setting options for container4 element type.

js
// builder.config.js

export default {
  element: {
    props: {
      container4: {
        properties: {
          type: true,
          name: true,
          label: true,
          tooltip: true,
          description: true,
        },
        data: {
          nested: true,
        },
        decorators: {
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        conditions: {
          conditions: true,
        },
      },
    },
  },
}

list

Setting options for list element type.

js
// builder.config.js

export default {
  element: {
    props: {
      list: {
        properties: {
          type: true,
          name: true,
          label: true,
        },
        options: {
          initial: true,
          min: true,
          max: true,
          controls: {
            add: true,
            remove: true,
            sort: true,
          },
          addText: true,
          storeOrder: true,
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          tooltip: true,
          description: true,
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            array: true,
            distinct: true,
            gt: true,
            gte: true,
            lt: true,
            lte: true,
            max: true,
            min: true,
            nullable: true,
            required: true,
            size: true,
          },
        },
        conditions: {
          conditions: true,
        },
      },
    },
  },
}

nestedList

Setting options for nestedList element type.

js
// builder.config.js

export default {
  element: {
    props: {
      nestedList: {
        properties: {
          type: true,
          name: true,
          label: true,
        },
        options: {
          initial: true,
          min: true,
          max: true,
          controls: {
            add: true,
            remove: true,
            sort: true,
          },
          addText: true,
          storeOrder: true,
        },
        data: {
          default: true,
          submit: true,
        },
        decorators: {
          tooltip: true,
          description: true,
          before: true,
          between: true,
          after: true,
        },
        layout: {
          size: {
            sm: true,
            md: true,
            lg: true,
          },
          columns: {
            container: true,
            label: true,
            wrapper: true,
          },
        },
        validation: {
          fieldName: true,
          validation: {
            array: true,
            distinct: true,
            gt: true,
            gte: true,
            lt: true,
            lte: true,
            max: true,
            min: true,
            nullable: true,
            required: true,
            size: true,
          },
        },
        conditions: {
          conditions: true,
        },
      },
    },
  },
}
👋 Hire Vueform team for form customizations and developmentLearn more