:clipboard: A schema-based form generator component for Vue.js
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)
this.$el
to it, the pika (2024204)fields
, and fix debounceFormatFunction
property to match fieldInpu (7ad1fca)A little bit of cleaning. No breaking changes since the last beta. This release can be considered the real start of the beta.
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.
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.
#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.
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);
}
);
}
#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>
#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".
#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
⚠️ This version will not work with npm ⚠️
⚠️ This version will not work with npm ⚠️
form-group
will not set width on col-*
elements)debounceFormatTimeout: TIME_IN_MS
in field schema