Merge pull request #495 from lionel-bijaoui/lb_clean_validation_state

Add a "clean" CSS class for untouched fields

Author: lionel-bijaoui

src/fields/abstractField.js

@@ -46,6 +46,7 @@ export default {
 		const fieldUID = uniqueId(this.fieldID + "_");
 		return {
 			fieldUID,
+			touched: false,
 			errors: [],
 			debouncedValidateFunc: null,
 			debouncedFormatFunction: null
@@ -75,6 +76,8 @@ export default {
 			},
 
 			set(newValue) {
+				this.touch();
+
 				let oldValue = this.value;
 				newValue = this.formatValueToModel(newValue);
 
@@ -133,6 +136,8 @@ export default {
 			}
 		},
 		validate() {
+			this.touch();
+
 			this.clearValidationErrors();
 			let validateAsync = objGet(this.formOptions, "validateAsync", false);
 
@@ -277,6 +282,13 @@ export default {
 
 		formatValueToModel(value) {
 			return value;
+		},
+
+		touch() {
+			if (!this.touched) {
+				this.touched = true;
+				this.$emit("field-touched");
+			}
 		}
 	},
 	created() {

src/formElement.vue

@@ -6,7 +6,7 @@
 		</label>
 
 		<div class="field-wrap">
-			<component ref="child" :is="fieldType" :model="model" :schema="field" :formOptions="options" :eventBus="eventBus" :fieldID="fieldID" @errors-updated="onChildValidated"></component>
+			<component ref="child" :is="fieldType" :model="model" :schema="field" :formOptions="options" :eventBus="eventBus" :fieldID="fieldID" @field-touched="onFieldTouched" @errors-updated="onChildValidated"></component>
 			<div v-if="buttonsAreVisible" class="buttons">
 				<button v-for="(btn, index) in field.buttons" @click="buttonClickHandler(btn, field, $event)" :class="btn.classes" :key="index" v-text="btn.label"></button>
 			</div>
@@ -51,7 +51,8 @@ export default {
 	},
 	data() {
 		return {
-			childErrors: []
+			childErrors: [],
+			childTouched: false
 		};
 	},
 	computed: {
@@ -84,7 +85,8 @@ export default {
 		fieldRowClasses() {
 			let baseClasses = {
 				[objGet(this.options, "validationErrorClass", "error")]: this.fieldHasErrors,
-				[objGet(this.options, "validationSuccessClass", "valid")]: !this.fieldHasErrors,
+				[objGet(this.options, "validationSuccessClass", "valid")]: !this.fieldHasErrors && this.childTouched,
+				[objGet(this.options, "validationCleanClass", "clean")]: !this.fieldHasErrors && !this.childTouched,
 				disabled: this.getValueFromOption(this.field, "disabled"),
 				readonly: this.getValueFromOption(this.field, "readonly"),
 				featured: this.getValueFromOption(this.field, "featured"),
@@ -119,6 +121,9 @@ export default {
 		buttonClickHandler(btn, field, event) {
 			return btn.onclick.call(this, this.model, field, event, this);
 		},
+		onFieldTouched() {
+			this.childTouched = true;
+		},
 		onChildValidated(errors) {
 			this.childErrors = errors;
 		}

test/unit/specs/VueFormGenerator.spec.js

@@ -72,33 +72,22 @@ describe("VueFormGenerator.vue", () => {
 	});
 
 	describe("check form-element classes", () => {
-		let group;
-		let schema = {
-			fields: [
-				{
-					type: "input",
-					fieldOptions: {
-						inputType: "text"
-					},
-					label: "Name",
-					model: "name",
-					readonly: false,
-					featured: false,
-					required: false,
-					disabled: false
-				}
-			]
-		};
+		let formGenerator;
+		let formElement;
+		let schema;
 
 		beforeEach(() => {
 			// Reset schema value
 			schema = {
 				fields: [
 					{
 						type: "input",
-						fieldOptions: {
-							inputType: "text"
-						},
+						fieldOptions: { inputType: "text" },
+						/*
+							styleClasses need to be defined for the unit test to work (add getter/setter)
+							In real use, it is not mandatory
+						 */
+						styleClasses: "",
 						label: "Name",
 						model: "name",
 						readonly: false,
@@ -109,83 +98,95 @@ describe("VueFormGenerator.vue", () => {
 				]
 			};
 			createFormGenerator({ schema });
-			group = wrapper.find(".form-element");
+			formGenerator = wrapper.find({ name: "formGenerator" });
+			formElement = wrapper.find({ name: "form-element" });
 		});
 
 		it("should be minimal classes", () => {
-			expect(group.classes().length).to.be.equal(2);
-			expect(group.classes()).to.include("form-element");
-			expect(group.classes()).to.include("field-input");
+			expect(formElement.classes().length).to.be.equal(3);
+			expect(formElement.classes()).to.include("form-element");
+			expect(formElement.classes()).to.include("field-input");
 		});
 
 		it("should be featured class", () => {
 			wrapper.vm.schema.fields[0].featured = true;
 
-			expect(group.classes()).to.include("featured");
+			expect(formElement.classes()).to.include("featured");
 		});
 
 		it("should be readonly class", () => {
 			wrapper.vm.schema.fields[0].readonly = true;
 
-			expect(group.classes()).to.include("readonly");
+			expect(formElement.classes()).to.include("readonly");
 		});
 
 		it("should be disabled class", () => {
 			wrapper.vm.schema.fields[0].disabled = true;
 
-			expect(group.classes()).to.include("disabled");
+			expect(formElement.classes()).to.include("disabled");
 		});
 
 		it("should be required class", () => {
 			wrapper.vm.schema.fields[0].required = true;
 
-			expect(group.classes()).to.include("required");
+			expect(formElement.classes()).to.include("required");
 		});
 
 		it("should be error class", () => {
-			const formElement = wrapper.find({ name: "form-element" });
 			formElement.vm.onChildValidated(["Validation error!"]);
-			expect(group.classes()).to.include("error");
+			expect(formElement.classes()).to.include("error");
 		});
 
 		describe("custom validation classes", () => {
+			let formGenerator;
+			let formElement;
 			beforeEach(() => {
-				let options = { validationErrorClass: "has-error", validationSuccessClass: "has-success" };
+				let options = {
+					validationCleanClass: "is-clean",
+					validationSuccessClass: "has-success",
+					validationErrorClass: "has-error"
+				};
 				createFormGenerator({
 					schema,
 					options: options
 				});
-				group = wrapper.find(".form-element");
+				formGenerator = wrapper.find({ name: "formGenerator" });
+				formElement = wrapper.find({ name: "form-element" });
+			});
+
+			it("clean class", () => {
+				expect(formElement.classes()).to.include("is-clean");
 			});
 
 			it("error class", () => {
-				const formElement = wrapper.find({ name: "form-element" });
 				formElement.vm.onChildValidated(["Validation error!"]);
 
-				expect(group.classes()).to.include("has-error");
+				expect(formElement.classes()).to.include("has-error");
 			});
 
-			it("success class", () => {
-				const formElement = wrapper.find({
-					name: "form-element"
-				});
-				formElement.vm.onChildValidated([]);
-
-				expect(group.classes()).to.include("has-success");
+			it("success class", (done) => {
+				formGenerator.vm.validate().then(
+					() => {
+						expect(formElement.classes()).to.include("has-success");
+						done();
+					},
+					() => {}
+				);
 			});
 		});
-		// Work in real use, but not here
-		it.skip("should be add a custom classes", () => {
-			wrapper.vm.schema.fields[0].styleClasses = "classA";
 
-			expect(group.classes()).to.include("classA");
+		it("should be add a custom classes", () => {
+			schema.fields[0].styleClasses = "classA";
+			formGenerator.setProps({ schema: { ...schema } });
+
+			expect(formElement.classes()).to.include("classA");
 		});
-		// Work in real use, but not here
-		it.skip("should be add more custom classes", () => {
-			wrapper.vm.schema.fields[0].styleClasses = ["classB", "classC"];
 
-			expect(group.classes()).to.include("classB");
-			expect(group.classes()).to.include("classC");
+		it("should be add more custom classes", () => {
+			schema.fields[0].styleClasses = ["classB", "classC"];
+
+			expect(formElement.classes()).to.include("classB");
+			expect(formElement.classes()).to.include("classC");
 		});
 	});
 	// TODO: should be moved to formGroup