Merge pull request #303 from hansi90/hint

Hint function

Author: icebob

dev/full/schema.js

@@ -86,7 +86,7 @@ module.exports = {
 			required: true,
 			hint: "Minimum 6 characters",
 			styleClasses: "half-width",
-			validator: validators.string.locale({ 
+			validator: validators.string.locale({
 				fieldIsRequired: "The password is required!",
 				textTooSmall: "Password must be at least {1} characters!"
 			})
@@ -210,60 +210,60 @@ module.exports = {
 			model: "",
 			styleClasses: "alert alert-info"
 		}, {
-            type: "checklist",
-            label: "CHECKLIST combobox",
-            model: "checklistcombobox",
-            listBox: false,
-            values: [{
-                name: "HTML5",
-                value: "HTML5-123"
-            }, {
-                name: "Javascript",
-                value: "Javascript-123"
-            }, {
-                name: "CSS3",
-                value: "CSS3-123"
-            }, {
-                name: "CoffeeScript",
-                value: "CoffeeScript-123"
-            }, {
-                name: "AngularJS",
-                value: "AngularJS-123"
-            }, {
-                name: "ReactJS",
-                value: "ReactJS-123"
-            }, {
-                name: "VueJS",
-                value: "VueJS-123"
-            }],
-        }, {
-            type: "checklist",
-            label: "CHECKLIST listBox",
-            model: "checklistlistbox",
-            listBox: true,
-            values: [{
-                name: "HTML5",
-                value: "HTML5-123"
-            }, {
-                name: "Javascript",
-                value: "Javascript-123"
-            }, {
-                name: "CSS3",
-                value: "CSS3-123"
-            }, {
-                name: "CoffeeScript",
-                value: "CoffeeScript-123"
-            }, {
-                name: "AngularJS",
-                value: "AngularJS-123"
-            }, {
-                name: "ReactJS",
-                value: "ReactJS-123"
-            }, {
-                name: "VueJS",
-                value: "VueJS-123"
-            }],
-        }, {
+			type: "checklist",
+			label: "CHECKLIST combobox",
+			model: "checklistcombobox",
+			listBox: false,
+			values: [{
+				name: "HTML5",
+				value: "HTML5-123"
+			}, {
+				name: "Javascript",
+				value: "Javascript-123"
+			}, {
+				name: "CSS3",
+				value: "CSS3-123"
+			}, {
+				name: "CoffeeScript",
+				value: "CoffeeScript-123"
+			}, {
+				name: "AngularJS",
+				value: "AngularJS-123"
+			}, {
+				name: "ReactJS",
+				value: "ReactJS-123"
+			}, {
+				name: "VueJS",
+				value: "VueJS-123"
+			}],
+		}, {
+			type: "checklist",
+			label: "CHECKLIST listBox",
+			model: "checklistlistbox",
+			listBox: true,
+			values: [{
+				name: "HTML5",
+				value: "HTML5-123"
+			}, {
+				name: "Javascript",
+				value: "Javascript-123"
+			}, {
+				name: "CSS3",
+				value: "CSS3-123"
+			}, {
+				name: "CoffeeScript",
+				value: "CoffeeScript-123"
+			}, {
+				name: "AngularJS",
+				value: "AngularJS-123"
+			}, {
+				name: "ReactJS",
+				value: "ReactJS-123"
+			}, {
+				name: "VueJS",
+				value: "VueJS-123"
+			}],
+		}, {
 			type: "radios",
 			label: "RADIOS",
 			model: "radios",
@@ -319,7 +319,11 @@ module.exports = {
 			type: "textArea",
 			label: "Biography (textArea field)",
 			model: "bio",
-			hint: "Max 500 characters",
+			hint(model) {
+				if (model && model.bio) {
+					return model.bio.length + " of max 500 characters used!";
+				}
+			},
 			max: 500,
 			placeholder: "User's biography",
 			rows: 4,

src/formGenerator.vue

@@ -12,7 +12,7 @@ div.vue-form-generator(v-if='schema != null')
 					component(:is='getFieldType(field)', :disabled='fieldDisabled(field)', :model='model', :schema='field', :formOptions='options', @model-updated='modelUpdated', @validated="onFieldValidated")
 					.buttons(v-if='buttonVisibility(field)')
 						button(v-for='btn in field.buttons', @click='buttonClickHandler(btn, field, $event)', :class='btn.classes') {{ btn.label }}
-				.hint(v-if='field.hint') {{ field.hint }}
+				.hint(v-if='field.hint') {{ fieldHint(field) }}
 				.errors.help-block(v-if='fieldErrors(field).length > 0')
 					span(v-for='(error, index) in fieldErrors(field)', track-by='index') {{ error }}
 
@@ -274,6 +274,14 @@ div.vue-form-generator(v-if='schema != null')
 
 				return field.featured;
 			},
+			
+			// Get current hint.
+			fieldHint(field){
+				if (isFunction(field.hint))
+					return field.hint.call(this, this.model, field, this);
+
+				return field.hint;
+			},
 
 			buttonClickHandler(btn, field, event) {
 				return btn.onclick.call(this, this.model, field, event, this);

test/unit/specs/VueFormGenerator.spec.js

@@ -440,6 +440,46 @@ describe("VueFormGenerator.vue", () => {
 
 	});
 
+	describe("check fieldHint with function", () => {
+		let schema = {
+			fields: [
+				{
+					type: "textArea",
+					label: "Note",
+					model: "note",
+					max: 500,
+					rows: 4,
+					hint(model) {
+						if (model && model.note) {
+							return model.note.length + " of max 500 characters used!";
+						}
+					}
+				}
+			]
+		};
+
+		let model = {
+			note: "John Doe"
+		};
+
+		before( () => {
+			createFormGenerator(schema, model);
+		});
+
+		it("should be applay", () => {
+			expect(el.querySelector(".form-group .hint").textContent).to.be.equal("8 of max 500 characters used!");
+		});
+
+		it("should be changed", (done) => {
+			model.note= "Dr. John Doe";
+			vm.$nextTick(() => {
+				expect(el.querySelector(".form-group .hint").textContent).to.be.equal("12 of max 500 characters used!");
+				done();
+			});
+		});
+
+	});
+
 	describe("check fieldFeatured with function", () => {
 		let schema = {
 			fields: [