Group are not flexible enough

[lionel-bijaoui]

Hello @icebob @jmverges @dflock
I'm late to the party and I didn't really follow the work on groups.
Since working on #257 , I'm exposed to how group work and I have noticed a flaw in the current design.
I can't alternate freely between single field and group.
The only possibility is fields -> groups. I can't do the inverse (ex. groups -> fields) or anything else (ex. field -> group -> field -> group -> group -> field)
My goal is not to spit on everyone hard work, but I wonder if they can be a better more flexible way to do this.
Why a type: group was not used ?

fields: [{
    type: "input",
    inputType: "text",
    label: "Single field (without group)",
    model: "single"
}, {
    type: "group",
    legend: "Contact Details",
    fields: [{
        type: "input",
        inputType: "text",
        label: "Name",
        model: "name"
    }, {
        type: "input",
        inputType: "email",
        label: "Email",
        model: "email"
    }]
}, {
    type: "group",
    legend: "Other Details",
    fields: [{
        type: "input",
        inputType: "text",
        label: "More",
        model: "others.more"
    }, {
        type: "input",
        inputType: "text",
        label: "Things",
        model: "others.things"
    }]
}]

Thanks for the feedback.

[icebob]

The current solution was the easiest way to implement it.
If you use groups as a type of field it is more complicated to implement in the template. Need to handle multi-level groups too.

[jamestowers]

This would be a nice feature, you could potentially set the group tag and className so you're confined to fieldset, eg:

type: "group",
legend: "User details",
tag: "div",
className: "col-6 md-col-12",
fields: [{...}]

[cincarnato]

I really need this
group
{
className: "col-6 md-col-12",
fields: [..

[zoul0813]

PR #339 adds "styleClasses" to groups. This allows you to add a "styleClasses" property to your groups, the same way you add it for fields. Coupled with the "tag" property, you can now have groups defined as <div class="col-md-6"></div>, for example.

Sample Use

<vue-form-generator :schema="schema" :model="model" :options="formOptions" tag="div"></vue-form-generator>

Sample Schema

{
    legend: "Group Title",
    styleClasses: "group-class",
    fields: [
        {
            type: "input",
            inputType: "text",
            label: "Text Label",
            model: "text_field",
            styleClasses: "style-class",
            labelClasses: "label-class",
            fieldClasses: "field-class",
        },
    ]
}

[lionel-bijaoui]

Fixed in #484