3.0.0-beta.3

This is the first version of the v3 that work
It is a major version with lot's of breaking changes (and more to come during the beta phase)
Here is a mini migration guide if you want to test it for yourself.

Breaking changes

Schema

Read changes here #481
TL;DR
Top keys are restricted to this list :

const allowedKeys = [
    // Minimal
    "type",
    "model",
    // Identity
    "id",
    "inputName",
    // Texts
    "label",
    "placeholder",
    "hint",
    "help",
    // Modifiers
    "featured",
    "visible",
    "disabled",
    "required",
    "readonly",
    "validator",
    // Other options
    "styleClasses",
    "labelClasses",
    "fieldClasses",
    "fieldOptions",
    "values",
    "buttons",
    "attributes",
    // Getter/Setter
    "get",
    "set",
    // Events
    "onChanged",
    "onValidated"
];

fieldOptions was created to replace ***Options (e.g. radiosOptions, selectOptions, pikadayOptions). This mean that any option not in the list must go under this key.

inputName, placeholder, disabled, required, readonly, fieldClasses, fieldOptions and values are directly available to field (schema.readonly become readonly). They can also all be defined with a function that return their value if needed.

Lot's of test where updated to reflect the changes.

Groups

#484
TL;DR
A group is a special type of field.

{
    type: "group",
    legend: "My new group",
    styleClasses: "nice-group",
    tag: "section",
    fields: [...]
}

Group don't validate.

form-group is now form-element and form-group is a recursive component that allow for the flexibility enabled by this new system. So update your CSS if you customized VFG.

New validation system (internal)

Still from #484
Manual validation return a promise and is asynchronous. Since everything communication through the event bus (and by event), there is no way to fall back toward synchronous validation for the whole form.
It doesn't change the way single validator works as far as I know.

<vue-form-generator ... ref="form"><vue-form-generator>

/* Old way */
myManualValidation() {
    let errors = this.$refs.form.validate();
    if(errors.length > 0) {
        // Validation error
        console.warn("Error during validation", error);
    } else {
        // No validation errors
        // ...

    }
}
/* New way */
myManualValidation() {
    this.$refs.form.validate().then(
        () => {
            // No validation errors
            // ...
        },
        (error) => {
            // Validation error
            console.warn("Error during validation", error);
        }
    );
}

Custom label, help, hint and errors block

#493
Label, help, hint, and errors template can be changed with slot (respectively label, help, hint, and errors).

Possibility to use scoped-slot to customize fully how label, help, hint and errors are build.

Expose field object and getValueFromOption function. For errors, errors object is also exposed.

Exemple (taken from "custom" dev project)

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

    <template slot="label" slot-scope="{ field, getValueFromOption }">
        <h3><i :class="`fa fa-${getIcon(field, getValueFromOption)}`"></i> {{ field.label }}</h3>
    </template>

    <template slot="help" slot-scope="{ field }">
        <span v-if='field.help' class="help">
            <span @click.prevent="testClick(field.help, $event)">Need help</span>
            <i class="fa fa-question"></i>
            <vue-markdown class="helpText" :source="field.help"></vue-markdown>
        </span>
    </template>

    <template slot="hint" slot-scope="{ field, getValueFromOption }">
        <div class="hint hint--info">
            <i class="fa fa-info-circle"></i>
            <span v-html="getValueFromOption(field, 'hint', undefined)"></span>
        </div>
    </template>

    <template slot="errors" slot-scope="{ errors, field, getValueFromOption }">
        <span>Custom errors</span>
        <table class="errors help-block">
            <tbody>
                <thead>
                    <tr>
                        <th scope="col" id="">Index</th>
                        <th scope="col" id="">Error</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(error, index) in errors" :key="index">
                        <td>{{index}}</td>
                        <td v-html="error"></td>
                    </tr>
                </tbody>
            </tbody>
        </table>
    </template>

</vue-form-generator>

Better validation states

#495
TL;DR
Add "clean" when the value is not manually changed or validated.

If changed or validated, loose the clean state and is either 'valid" or "error".

Class name can be customised with "validationCleanClass".

Project updated to vue-cli 3

#500
That shouldn't concern you since this is internal, but for contributors it will make things easier.

Future version will be easier to update and work with.

Main changes for contributors:
npm run dev become npm run serve