Grouping fields

[icebob]

This PR add two new features to vfg by @dflock & @jmverges.

1. add ID prefix for fields
2. support to grouping fields of schema
   Syntax:

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

Dev example: http://localhost:8080/grouping/

[jmverges]

@icebob what I try to explain before is:

       mounted(){
            let $this = this;
            this.$watch('model', function () {
                let prop = {};
                clearTimeout($this.timer);
                $this.timer = setTimeout(function () {
                    $this.build();
                    $this.schema = {groups:$this.getSheets()};
                }, 1000);
            }, {deep: true});
            this.build();
            this.schema =  {groups:$this.getSheets()};
        },

I'm recreating the schema each time the model changes as the schema has linked between them. Each time I update schema, a weird behaviour happen. First: https://cloud.githubusercontent.com/assets/2902073/26468867/43976b56-4198-11e7-8701-2a5928441104.png Then I select a VehicleType https://cloud.githubusercontent.com/assets/2902073/26468961/a941a4b2-4198-11e7-8116-4ce685a011eb.png

[icebob]

@jmverges Could you create a jsfiddle?

[dflock]

Much better, thanks!

[icebob]

@dflock In d008869 a made simpler solution for fieldIdPrefix. Could you check it?

[icebob]

Further tasks before merge:

• fix tests
• cover with tests the new features
• update docs

Somebody can help? At least with docs :)

[dflock]

This looks good.

I'd still advocate calling it schema.fieldsets instead of schema.groups - because that automatically tells you what the feature does and what output you're going to get.

[jmverges]

I would like to have that somehow configurable, or "hackable" somehow. Think about doing some tabs for each "fieldset" you may need to change the group rendering.

[icebob]

I think groups it's not bad. More simpler than fieldset. And we need to add it to docs, how it's working

[icebob]

In the future we can add tag to groups too and we can create not just <fieldset> -> <legend>, but even <section>-><header>.

[dflock]

Ok, calling it groups is fine.

I think if I was doing multiple tabs, I'd probably do the tab markup outside of vfg and have multiple calls to vfg, one per tab, maybe? Haven't thought about it too deeply. What about multiple tabs, with groups/fieldsets on each tab? I think the groups thing should just do fieldsets for now - don't try and make it do everything.

[dflock]

I'll start updating the docs now.

[icebob]

Thanks @dflock. Test fixed.

[icebob]

Just my thougths: In the future maybe would be good a visible property in groups (like in fields). Would be easy to turn on/off the whole group.

[dflock]

OK, docs changes are done (I think), here: https://www.gitbook.com/book/icebob/vueformgenerator/changes/7

[jmverges]

Good morning guys,

A lot of work you did!

@icebob removing "sync" removes the possibility to update the schema and get the form rebuild. did you try it?

Edit:
I think we need to be able to sync groups in the grouped option and fields in the non-grouped part.

Cheers

[icebob]

@dflock Thank you. I'm checking...

@jmverges I removed sync because it is not neccessary. It is sticked in from Vue 1.x. Because vfg stored validation errors in schema prop. I don't checked your updated schema problem. First, I'm waiting a fiddle from you. :)

[jmverges]

How can I create a fiddle for Vue and Vue Form Generator? If you can provide me the barebones, I can put the code in there 👍

[icebob]

Fork it: https://jsfiddle.net/icebob/0mg1v81e/
And modify the JS to demonstrate your issue.
"Update" and send me the link

[jmverges]

I don't get it running int fiddle but something like this https://jsfiddle.net/ym6dn8zd/1/

[icebob]

Now it's running, but what is the exact problem? https://jsfiddle.net/ym6dn8zd/4/

[jmverges]

https://jsfiddle.net/ym6dn8zd/7/ I cannot reproduce it in there, weird

[jmverges]

Forgot it, was my own problem, didn't see it

[icebob]

Published: https://github.com/icebob/vue-form-generator/releases/tag/v2.0.0-beta7