Skip to content

Releases: vue-generators/vue-form-generator

v2.2.0

21 Jan 16:27
Compare
Choose a tag to compare
  • add console.log (fa779bd)
  • add console.log to debug (d05818e)
  • add indent (026439a)
  • add unscape html for error message. (20b8d9d)
  • added "getLabelClasses" and unit test, using the fieldClasses unit test as an example (8c01307)
  • added labelClasses support (acdbb6c)
  • added missing "id" attributes to checkbox, checklist, radios and submit (09d44c1)
  • added missing comma that failed in Travis (32c7627)
  • added styleClasses support to groups (8b6801b)
  • addeds "styleClasses" to group schemas, reimplements #339 (8e4b43d)
  • bumped vue version to 2.5.3 (7d7c0c4)
  • change the judgement (d4bc27a)
  • check if field.type is undefined before appending the "field-undefined" class (9993550)
  • commit the built bundle (45e1436)
  • commit the built dist (12b3cf7)
  • commit without console.log (79a77bd)
  • delete console.log (ed853a2)
  • don't render labels when no label text is provided, proposed option 1 from #347 (8ecc851)
  • fix bower.json validation (2afb4ac)
  • fixed null check (7842b92)
  • fixed Vue version (624ed92)
  • fixes #340 - "none" value set to null, formatValueToField checks for isNil(value) and returns `n (5b42807), closes #340
  • fixes #341 - introduced debounce functionality into formatValueToModel (a46fe31), closes #341
  • fixes #345 - declare debouncedValidateFunc and set it when debouncedValidate() is called... vue 2.2. (ee684f0), closes #345
  • fixes #358 - support "validateBeforeSubmit" with async validators (5a26ef1), closes #358
  • fixes #361 - use $event.target.valueAsNumber for number/range inputs, debounce formatValueToModel (d1a8bcf), closes #361
  • fixes #362 - integer validator now calls number validator, and returns `invalidIntegerl: "The va (8d436be), closes #362
  • Groupped fields "tag" param fixed. (9275a26)
  • moved unit test to formGenerator, as labels are managed by formGenerator and not the field component (f102967)
  • remove garbage (17eeae5)
  • remove the errorUnescaped property, add v-html on the error part (ecd2ca5)
  • remove uniqueId import (c86d7dc)
  • removed commented out console.log statements (e9bf285)
  • removed console.log and fixed quotes (025b541)
  • removed indentation (49f57b8)
  • requested by @icebob (2724809)
  • reverted back to schema.required for "none selected" disabled state, per @icebob (f562d7f)
  • reverting back to original test (4ba3d4a)
  • Update badges (705c6a7)
  • Update formGenerator.vue (3208446)
  • update node-sass (e3eee64)
  • Update README.md (f57faba)
  • Update README.md (1092e01)
  • Update README.md (9d9701b)
  • updated tests for modified label logic (f0c2281)

v2.1.1

20 Oct 08:48
Compare
Choose a tag to compare

Stable v2.0.0

30 Jun 10:05
Compare
Choose a tag to compare

This is the stable version of VFG v2.0.0 which supports Vue v2.x

v2.0.0-beta7

31 May 12:11
Compare
Choose a tag to compare

New

Accessibility #201

Now every field has an id property which is the id of input .If not set, will be auto-generated from the slugified version of either: schema.inputName, schema.label or schema.model, in that order. If the fieldIdPrefix option is set, it's value will be prepended to both manual & auto-generated ids.

Grouping fields #209

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/

Support bootstrap columns on fields #180

This would allow styleClasses:'col-xs-6' for example if you want to have multiple fields in one row.

Support custom validation classes #183

Usage:

formOptions: {
  validationErrorClass: "has-error",
  validationSuccessClass: "has-success"
}

Add a props to change the main tag #198

I have a first solution to make it a little more flexible with the is attribute.

// vfg.vue
<template>
    <div :is="tag">VFG</div>
</template>

<script>
export default {
    props: {
        tag: {
            type: String,
            default: 'fieldset'
        }
    }
};
</script>
basic usage
<vfg></vfg>
config usage
<vfg tag="section"></vfg>
basic usage rendered
<fieldset>VFG</fieldset>
config usage rendered
<section>VFG</section>

Commits

  • 📦 build (71e9eb4)
  • 📦 build (908100e)
  • 📦 build (5105f39)
  • [BUGFIX] Fieldset in proper place un puq template (79c0852)
  • [BUGFIX] vue-form-gerenator class in wrapper div (b5d58ac)
  • [FEATURE] Groups (613e831)
  • Add a props to change the main tag (90b0767)
  • Add support for schema.legend & field id prefixes (a6165c8)
  • Add unit test for vueFormGenerator.fieldTypeHasLabel (c61b941)
  • Added props validation for "tag" and unit test for it. (c728597)
  • Added tests for abstractField.getFieldID() (492514d)
  • bump version (5a30f87)
  • fix checklist validation bug #194 (bea085f), closes #194
  • fix lints (890ed44)
  • fix schema.fields error (d2b67e0)
  • fix tests & layout for fields (ee5ed30)
  • fixed indentation (425faa2)
  • Implement #199 (547ea2e)
  • Make fieldTypeHasLabel test actually work & test default path (d618958)
  • remove .sync (d008869)
  • remove tag from groups (b4dc972)
  • rename options to formOptions because conflicted with vueMultiSelect property (2f29943)
  • rename example & improve code (caa4124)
  • Support bootstrap columns on fields (fc2d47a)
  • Support custom validation classes (378a2a7)

v2.0.0-beta6

04 Apr 07:42
Compare
Choose a tag to compare
v2.0.0-beta6 Pre-release
Pre-release

New

Support async validators #171

let customAsyncValidator = function(value) {
	return new Promise((resolve, reject) => {
		setTimeout(() => {
			if (value)
				resolve();
			else
				resolve([ "Invalid value from async validator" ]);
		}, 1000);
	});
};

Schema:

{
	type: "input",
	inputType: "url",
	label: "URL",
	model: "website",
	validator: customAsyncValidator
}

Custom messages for validators #169

You can add custom validator messages for fields in schema.
Every validator function has a method locale. Parameter is an object of custom messages.

Example:

let schema = {
	fields: [
		{
			type: "input",
			inputType: "password",
			label: "Password",
			model: "password",
			min: 6,
			required: true,

			// String validator with custom error messages
			validator: validators.string.locale({ 
				fieldIsRequired: "The password is required!",
				textTooSmall: "Password must be at least {1} characters"
			})
		}
	]
}

Result:
image

Ability to use string as name of validator by jmverges #167

You can set validator as string instead of Function.

{
	type: "input",
	inputType: "text",
	label: "Name",
	model: "name",
	min: 3,
	validator: "string"
}

This is a shorthand for VueFormGenerator.validators.string. It can be an Array of Strings too.

Fixes

  • fixed vue-multiselect customLabel handling by cristijora #159
  • fixed "TypeError: this.value.push is not a function" in checklist by lionel-bijaoui #156
  • ... other minor fixes.

Commits

  • 📦 build (dd33ea0)
  • #159 Fix customLabel function from multi-select field to work with object values (84d3e41)
  • #172 Sync model value with files from file upload input (4ac96e4)
  • checklist field now support array of string or array of objects (with name and value propertie (be09146)
  • radios field now support array of string or array of objects (with name and value properties) (0f48c30)
  • add .locale method to every validator (1dc7fb7)
  • Add a is-checked class to element where the input is checked to ease customisation. Add checklist (3facc08)
  • add example to dev (267073c)
  • add test for async validator (e9463c2)
  • bump version (8ced4af)
  • change input event to change on checlist field (e6a2b9a)
  • Change onChange trigger event from change to input for checklist (67a3659)
  • fix #174 (d939c95), closes #174
  • Fix a problem with value define but not an Array (190f67a)
  • fix double validator (7c6d658)
  • Fix error "TypeError: this.value.push is not a function" in checklist (c66b0e9)
  • fix lint (1f99ab6)
  • fix parameters of validators (d97c917)
  • Fix test to reflect changes (6126f25)
  • fix usage example in readme (596b302)
  • Fix validator messages interpolation (6b44e39)
  • Improve readme file. (846cf15)
  • Move some dependency to devDependency (b00e4bb)
  • Provides ability to use strings as validators (36c7829)
  • remove only from test (560d234)
  • simplify code (cd922ee)
  • support async (promised) validators #170 (d50a756)
  • update code language in readme (3ee0865)
  • Update the unit test to reflect the changes and test for the new behavior. Fix lint error. (1f6150f)
  • Update unit test for checklist (24eb17f)
  • Update unit test for radios (8a94e81)
  • Use this.$set instead of a direct assignation (4b7e118)

v2.0.0-beta5

01 Mar 10:37
Compare
Choose a tag to compare
v2.0.0-beta5 Pre-release
Pre-release

Break changes

Removed deprecated fields. #121

If you are using text, number, color, email, password or range field type in schema, please change it to input and set the type into inputType property. Example:

Old way

    {
        type: "text"
    },
    {
        type: "number"
    }

New way

    {
        type: "input"
        inputType: "text"
    },
    {
        type: "input"
        inputType: "number"
    }

Created two separated & renamed bundle file: full and core #121

Core is a more minimal version with only half the fields.
Full is core + other fields.

  • Full bundle: 75 kB (gzipped: 19 kB)
  • Core bundle: 39 kB (gzipped: 11 kB)

If you don't know what to choose, don't worry, the full is the default version.
If you want the slim down version, here is the changes:

// the "core" way
<script>
  import VueFormGenerator from "vue-form-generator/dist/vfg-core.js";
  import "vue-form-generator/dist/vfg-core.css";
</script>

Validation error handling changed #128 #109

  1. VFG component emits a validated event, if validation executed. Event parameters: isValid: boolean, errors: Array

Example:

<vue-form-generator @validated="onValidated" />

...

methods:{
  onValidated(isValid, errors) {
   console.log("Validation result: ", isValid, ", Errors:", errors);
  }
}
  1. Fields validation schema.errors issue is fixed. Now errors in the local data. The communication with parent is event-based (similar @validated solution)
  2. Fix this in schema functions. Now this is always the instance of vfg. Parameters: model, fieldSchema, vfg

Other important updates

  • removed unneccessary dependencies #112
  • removed momentjs dependency and switch to fecha (more lightweight) #117
  • upgrade from jade to pug #132
  • improve validation error handling & events #129

v2.0.0-beta4

15 Feb 08:56
Compare
Choose a tag to compare
v2.0.0-beta4 Pre-release
Pre-release

v2.0.0-beta3

10 Feb 13:35
Compare
Choose a tag to compare
v2.0.0-beta3 Pre-release
Pre-release

v2.0.0-beta2

30 Jan 13:07
Compare
Choose a tag to compare
v2.0.0-beta2 Pre-release
Pre-release

v2.0.0 Beta 1

12 Dec 19:55
Compare
Choose a tag to compare
v2.0.0 Beta 1 Pre-release
Pre-release
  • 🐛 fix $index (80ecf31)
  • 🐛 fix examples (8ab6894)
  • 📦 first build for Vue 2.x (393461b)
  • [wip] modification to work with vuejs 2.0. (0b1df2c)
  • Fix a bug with v-model and dynamic type on input. (1d090df)
  • fix validator error (d671057)
  • Update README.md (acd1e22)
  • Update vuejs version to 2.1.3, and made change accordingly (added vue-template-compiler). Update vue (61b76c1)
  • test: fix checklist tests (f3202fa)
  • test: fix fieldCleave tests (caae630)
  • test: fix selectEx tests (b240183)
  • test: fix test cases (8044f9e)
  • fix: aligned with issue #84 (5d6c0c7)
  • fix: rewrite in jade and commenting problematic fields (35be49e)