Release notes from vue-form-generator

v2.3.4

2019-02-09T15:10:16Z

v2.3.4 (2019-02-07)
#469 - fixes example in README, tested with a fresh vue-cli project (b0037c9)
#551 - added "is-disabled" class to the radios label (1e9db8e), closes #551
Add vfg-field-matrix into the readme (a898201)
added optional field property debounceValidateTime which works at the field level, allowing indivi (d98fa50)
Ref #563 - return unique validation errors (prevents multiple validators from returning "this field (f9c699b), closes #563
single-quotes fix (5756317)
Update validators.js (a282933)
updated abstractField test, seems the field.formOptions wasn't being updated, the `this.$parent.op (8c1f462)
updated package-lock with latest deps (f7d7c71)

v2.3.3

2018-12-14T20:59:10Z

#535, #526 - reversed "deep property path" fix (da32bde), closes #535 #526
added "item.disabled" logic, supporting both boolean values and a function that is passed a referenc (b227eb4)
added "options" to VFG install function, appending custom "validators" to the validators object that (892469e)
added "type" attribute to inside buttons schema, defaults to "button" when one is not provided (3306893)
added an optional "unique" flag to "getFieldID" that appends lodash "uniqueId" to the ID when true. (ab1daeb), closes #468
added newline (5813f0a)
Codacy (guard-for-in) fix (4e81d2d)
code fix (b3a1010)
Fix required number input does not require a value (f95b38c)
fixed code structure (3b750b3)
fixed single-quotes (dfee175)
fixes #480 - dates are always passed to "date" and "datetime-local" elements using the standard form (db3413f), closes #480
fixes an issue with fieldPikaday modifying the field schema and attaching this.$el to it, the pika (2024204)
listen for model-updated from fields, and fix debounceFormatFunction property to match fieldInpu (7ad1fca)
migrated VFG docs to newer GitBooks, created GitHub Repo for Docs to allow for easier maintenance, u (d372f5b)
feat: add maxElements slot to fieldVueMultiSelect (2e91a2f)

v2.3.2

2018-10-29T13:17:20Z

Export dist (9912b5e)
Fix deep property path not working (fb02f26)
Fix fieldSubmit not calling validate method (c82c44b)
Fix Rawgit shut down (34e08a6)
docs: replace duplicated 2.3.0 with 2.3.1 (69bbfce)
feat(fields): add required attribute to checkbox component (2b3c7e5)
feat(fields): add required attribute to radios component (8d04252)

v2.3.1

2018-10-17T15:12:53Z

Use lodash-webpack-plugin for even better size
Added required attribute to textarea

3.0.0-beta.4

2018-10-03T14:27:16Z

A little bit of cleaning.
No breaking changes since the last beta.
This release can be considered the real start of the beta.

3.0.0-beta.3

2018-10-03T14:24:23Z

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

3.0.0-beta.2

2018-10-03T13:51:12Z

⚠️ This version will not work with npm ⚠️

3.0.0-beta.1

2018-10-03T13:51:02Z

⚠️ This version will not work with npm ⚠️

v2.3.0

2018-09-24T19:49:39Z

Fixed issue with SCSS variables being referenced incorrectly (#449)
Updated README to include new third-party VFG Fields
Rework of formGenerator use a component
Allow HTML for Field Label and Hints
Updated package.json URL's for VFG
Added a "noResult" slot to FieldVueMultiSelect
Include a reference to the VFG instance that triggered a "validated" event (3rd param)
Fixed a number parsing bug in IE/Edge with FieldInput
Added support for Bootstrap CSS Classes (form-group will not set width on col-* elements)

v2.2.2

2018-04-26T13:40:08Z

Fix NaN with value 0 on input type number/range.
Fix bug in fieldUpload that threw error due to $event not being defined
Added $event to onValidationError in fieldSubmit
Fixed bug with validationErrorClass and validationSuccessClass depending on each
Made DEBOUNCE_FORMAT_MS configurable in fieldInput, just pass debounceFormatTimeout: TIME_IN_MS in field schema
$event.preventDefault() called when using async validation with fieldSubmit to prevent unwanted form submissions