Merge pull request #318 from vuchl/master

refactored `schema.classes` to `schema.fieldClasses`

Author: icebob

package-lock.json

@@ -102,6 +102,5 @@
     "webpack-dev-server": "1.16.2",
     "webpack-merge": "0.14.1"
   },
-  "dependencies": {
-  }
+  "dependencies": {}
 }

package.json

@@ -19,7 +19,7 @@ export default {
 		"model",
 		"schema",
 		"formOptions",
-		"disabled"
+		"disabled",
 	],
 
 	data() {
@@ -172,6 +172,10 @@ export default {
 			return slugifyFormID(schema, idPrefix);
 		},
 
+		getFieldClasses() {
+			return this.schema.fieldClasses || [];
+		},
+
 		formatValueToField(value) {
 			return value;
 		},

src/fields/abstractField.js

@@ -1,5 +1,5 @@
 <template lang="pug">
-	input(type="checkbox", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName")
+	input(type="checkbox", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName", :class="schema.fieldClasses")
 </template>
 
 <script>

src/fields/core/fieldCheckbox.vue

@@ -5,6 +5,7 @@
 		:type="schema.inputType",
 		:value="value",
 		@input="value = $event.target.value",
+		:class="schema.fieldClasses",
 		@change="schema.onChange || null",
 		:disabled="disabled",
 		:accept="schema.accept",

src/fields/core/fieldInput.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-	span(:id="getFieldID(schema)") {{ value }}
+	span(:id="getFieldID(schema)", :class="schema.fieldClasses") {{ value }}
 </template>
 
 <script>

src/fields/core/fieldLabel.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 	.radio-list(:disabled="disabled")
 		label(v-for="item in items", :class="{'is-checked': isItemChecked(item)}")
-			input(type="radio", :disabled="disabled", :name="id", @click="onSelection(item)", :value="getItemValue(item)", :checked="isItemChecked(item)" )
+			input(type="radio", :disabled="disabled", :name="id", @click="onSelection(item)", :value="getItemValue(item)", :checked="isItemChecked(item)", :class="schema.fieldClasses")
 			| {{ getItemName(item) }}
 
 </template>

src/fields/core/fieldRadios.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-	select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName", :id="getFieldID(schema)")
+	select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName", :id="getFieldID(schema)", :class="schema.fieldClasses")
 		option(v-if="!selectOptions.hideNoneSelectedText", :disabled="schema.required", :value="null", :selected="value == undefined") {{ selectOptions.noneSelectedText || "&lt;Nothing selected&gt;" }}
 
 		template(v-for="item in items")

src/fields/core/fieldSelect.vue

@@ -1,5 +1,5 @@
 <template lang="pug">
-	input(type="submit", :value="schema.buttonText", @click="click", :name="schema.inputName", :disabled="disabled")
+	input(type="submit", :value="schema.buttonText", @click="click", :name="schema.inputName", :disabled="disabled", :class="schema.fieldClasses")
 </template>
 
 <script>

src/fields/core/fieldSubmit.vue

@@ -2,6 +2,7 @@
 	textarea.form-control(
 		v-model="value",
 		:id="getFieldID(schema)",
+	  :class="schema.fieldClasses",
 		:disabled="disabled",
 		:maxlength="schema.max",
 		:minlength="schema.min",

src/fields/core/fieldTextArea.vue

@@ -480,4 +480,27 @@ describe("abstractField.vue", function() {
 
 	});
 
+	describe("check classes application to fields", () => {
+		
+		let schema = {
+			type: "text",
+			label: "First Name",
+			model: "user__model",
+			inputName: "input_name",
+			fieldClasses: ["applied-class", "another-class"]
+		};
+		let model = {};
+
+		before( () => {
+			createField(this, schema, model);
+		});
+
+		it("should have 2 classes ('applied-class' and 'another-class')", () => {
+			expect(field.getFieldClasses().length).to.be.equal(2);
+			expect(field.getFieldClasses()[0]).to.be.equal("applied-class");
+			expect(field.getFieldClasses()[1]).to.be.equal("another-class");
+		});
+
+	});
+
 });

test/unit/specs/fields/abstractField.spec.js

@@ -18,7 +18,8 @@ describe("FieldCheckbox.vue", function() {
 		let schema = {
 			type: "checkbox",
 			label: "Status",
-			model: "status"
+			model: "status",
+			fieldClasses: ["applied-class", "another-class"]
 		};
 		let model = { status: true };
 		let input;
@@ -73,6 +74,11 @@ describe("FieldCheckbox.vue", function() {
 
 		});
 
+		it("should have 2 classes", () => {
+			expect(input.className.indexOf("applied-class")).not.to.be.equal(-1);
+			expect(input.className.indexOf("another-class")).not.to.be.equal(-1);
+		});
+
 	});
 
 });

test/unit/specs/fields/fieldCheckbox.spec.js

@@ -22,7 +22,8 @@ describe("fieldInput.vue", function() {
 			model: "name",
 			autocomplete: "off",
 			placeholder: "Field placeholder",
-			readonly: false
+			readonly: false,
+			fieldClasses: ["applied-class", "another-class"]
 		};
 		let model = { name: "John Doe" };
 		let input;
@@ -120,6 +121,11 @@ describe("fieldInput.vue", function() {
 
 		});
 
+		it("should have 2 classes", () => {
+			expect(input.className.indexOf("applied-class")).not.to.be.equal(-1);
+			expect(input.className.indexOf("another-class")).not.to.be.equal(-1);
+		});
+
 	});
 
 });

test/unit/specs/fields/fieldInput.spec.js

@@ -18,7 +18,8 @@ describe("fieldLabel.vue", function() {
 		let schema = {
 			type: "label",
 			label: "Timestamp",
-			model: "timestamp"
+			model: "timestamp",
+			fieldClasses: ["applied-class", "another-class"]
 		};
 		let model = { timestamp: "2 days ago" };
 		let span;
@@ -51,6 +52,11 @@ describe("fieldLabel.vue", function() {
 
 		});
 
+		it("should have 2 classes", () => {
+			expect(span.className.indexOf("applied-class")).not.to.be.equal(-1);
+			expect(span.className.indexOf("another-class")).not.to.be.equal(-1);
+		});
+
 	});
 
 });

test/unit/specs/fields/fieldLabel.spec.js

@@ -27,7 +27,8 @@ describe("FieldRadios.vue", function() {
 				"AngularJS",
 				"ReactJS",
 				"VueJS"
-			]
+			],
+			fieldClasses: ["applied-class", "another-class"]
 		};
 		let model = { skills: "Javascript" };
 		let radioList;
@@ -76,6 +77,11 @@ describe("FieldRadios.vue", function() {
 			expect(labelList[6].classList.contains("is-checked")).to.be.false;
 		});
 
+		it("should have 2 classes", () => {
+			expect(radios[0].className.indexOf("applied-class")).not.to.be.equal(-1);
+			expect(radios[0].className.indexOf("another-class")).not.to.be.equal(-1);
+		});
+
 
 		describe("test values reactivity to changes", () => {
 

test/unit/specs/fields/fieldRadios.spec.js

@@ -26,7 +26,8 @@ describe("fieldSelect.vue", function () {
 				"Paris",
 				"Rome",
 				"Berlin"
-			]
+			],
+			fieldClasses: ["applied-class", "another-class"]
 		};
 		let model = { city: "Paris" };
 		let input;
@@ -230,7 +231,8 @@ describe("fieldSelect.vue", function () {
 					{ id: 3, name: "Rome" },
 					{ id: 4, name: "Berlin" }
 				];
-			}
+			},
+			fieldClasses: ["applied-class", "another-class"]
 		};
 		let model = { city: 2 };
 		let input;
@@ -267,6 +269,11 @@ describe("fieldSelect.vue", function () {
 
 		});
 
+		it("should have 2 classes", () => {
+			expect(input.className.indexOf("applied-class")).not.to.be.equal(-1);
+			expect(input.className.indexOf("another-class")).not.to.be.equal(-1);
+		});
+
 	});
 
 });

test/unit/specs/fields/fieldSelect.spec.js

@@ -21,7 +21,8 @@ describe("fieldSubmit.vue", function() {
 			type: "submit",
 			buttonText: "Submit form",
 			validateBeforeSubmit: false,
-			onSubmit() {}
+			onSubmit() {},
+			fieldClasses: ["applied-class", "another-class"]
 		};
 		let model = { name: "John Doe" };
 		let input;
@@ -72,6 +73,12 @@ describe("fieldSubmit.vue", function() {
 				});
 			});
 		});
+
+		it("should have 2 classes", () => {
+			expect(input.className.indexOf("applied-class")).not.to.be.equal(-1);
+			expect(input.className.indexOf("another-class")).not.to.be.equal(-1);
+		});
+
 	});
 
 });

test/unit/specs/fields/fieldSubmit.spec.js

@@ -22,7 +22,8 @@ describe("fieldTextArea.vue", function() {
 			model: "desc",
 			max: 500,
 			placeholder: "Field placeholder",
-			readonly: false
+			readonly: false,
+			fieldClasses: ["applied-class", "another-class"]
 		};
 		let model = { desc: "Lorem ipsum dolor sit amet, consectetur adipiscing elit." };
 		let input;
@@ -87,6 +88,11 @@ describe("fieldTextArea.vue", function() {
 
 		});
 
+		it("should have 2 classes", () => {
+			expect(input.className.indexOf("applied-class")).not.to.be.equal(-1);
+			expect(input.className.indexOf("another-class")).not.to.be.equal(-1);
+		});
+
 	});
 
 });