Add a "clean" CSS class for untouched fields

- 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"
- use internal "vfgTouched" value to track state of field

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;
 		}