How to modify the Container Element Type?

[dan-leech]

Hello everyone,

When I try to customise container in builder.config.js:

element: {
       types: {
           container: {
               sections: {
                   properties: {
                       name: 'properties',
                       label: 'Properties',
                       fields: {
                           type: { type: TypeField },
                           name: { type: NameField },
                           label: { type: LabelField },
                           tooltip: { type: InfoField },
                           description: { type: DescriptionField },
                           customType: { type: InputTypeField },
                       },
                   },
                   data: {
                       name: 'data',
                       label: 'Data',
                       fields: {
                           nested: { type: NestedField },
                       },
                   },
                   decorators: {
                       name: 'decorators',
                       label: 'Decorators',
                       fields: {
                           before: { type: BeforeField },
                           between: { type: BetweenField },
                           after: { type: AfterField },
                       },
                   },
                   layout: {
                       name: 'layout',
                       label: 'Layout',
                       fields: {
                           size: { type: SizeField },
                           columns: { type: ColumnsField },
                       },
                   },
                   conditions: {
                       name: 'conditions',
                       label: 'Conditions',
                       fields: {
                           conditions: { type: ConditionsField },
                       },
                   },
               },
               separators: {
                   properties: [
                       ['type', 'name'],
                       ['label', 'tooltip'],
                       ['description'],
                   ],
                   layout: [
                       ['size'],
                       ['columns'],
                   ],
               }
           },
       }
   }

Container disappears from the elements. It works for checkboxgroup but it doesn't for the container element.
I took elemets code from here: https://builder.vueform.com/docs/custom-elements
Might I do something wrong? Could you advise me?

P.S.: also I tried to add custom properties field to static element type to add it to all static elements but the field isn't appear in properties.

[adamberecz]

Apologies @dan-leech - I overlooked this discussion and forgot to reply. I tested and it really seems like a bug - will be fixed.

I've created an issue for it: #43

[adamberecz]

Actually, I figured out the problem is that you don't only need the sections and separators properties, but everything else, like label, icon, category, etc. And from the missing category is the reason why it does not belong to any category and thus not being rendered.

If you don't want to change any of these properties this is the best practice:

// builder.config.js

import { elementTypes } from '@vueform/builder'

export default {
   element: {
       types: {
           container: {
               ...elementTypes.container,
               sections: {
                   properties: {
                       name: 'properties',
                       label: 'Properties',
                       fields: {
                           type: { type: TypeField },
                           name: { type: NameField },
                           label: { type: LabelField },
                           tooltip: { type: InfoField },
                           description: { type: DescriptionField },
                           customType: { type: InputTypeField },
                       },
                   },
                   data: {
                       name: 'data',
                       label: 'Data',
                       fields: {
                           nested: { type: NestedField },
                       },
                   },
                   decorators: {
                       name: 'decorators',
                       label: 'Decorators',
                       fields: {
                           before: { type: BeforeField },
                           between: { type: BetweenField },
                           after: { type: AfterField },
                       },
                   },
                   layout: {
                       name: 'layout',
                       label: 'Layout',
                       fields: {
                           size: { type: SizeField },
                           columns: { type: ColumnsField },
                       },
                   },
                   conditions: {
                       name: 'conditions',
                       label: 'Conditions',
                       fields: {
                           conditions: { type: ConditionsField },
                       },
                   },
               },
               separators: {
                   properties: [
                       ['type', 'name'],
                       ['label', 'tooltip'],
                       ['description'],
                   ],
                   layout: [
                       ['size'],
                       ['columns'],
                   ],
               }
           },
       }
    }
}

[dan-leech]

@adamberecz Thanks.
Is it possible to edit static for all static elements this way?
I have not succeed.

[adamberecz]

It should be possible. The keys for static elements are:

• h1
• h2
• h3
• h4
• p
• quote
• img
• link
• divider
• html

What's the issue you're encountering?

[dan-leech]

I mean that I want to adjust all static elements at once by overload static like it's possible with checkboxgroup for all checkboxgroup types

[adamberecz]

In that case you have to edit the html element.