added css classes for core fields

vuchl · vuchl · commit 05a98eb8df1d · 2017-09-19T20:16:41.000+02:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -102,6 +102,5 @@
     "webpack-dev-server": "1.16.2",
     "webpack-merge": "0.14.1"
   },
-  "dependencies": {
-  }
+  "dependencies": {}
 }
diff --git a/src/fields/abstractField.js b/src/fields/abstractField.js
@@ -19,7 +19,7 @@ export default {
 		"model",
 		"schema",
 		"formOptions",
-		"disabled"
+		"disabled",
 	],
 
 	data() {
@@ -167,6 +167,10 @@ export default {
 		getFieldID(schema) {
 			const idPrefix = this.formOptions && this.formOptions.fieldIdPrefix ? this.formOptions.fieldIdPrefix : "";
 			return slugifyFormID(schema, idPrefix);
+		},
+
+		getFieldClasses() {
+			return this.schema.classes || [];
 		}
 
 	}
diff --git a/src/fields/core/fieldCheckbox.vue b/src/fields/core/fieldCheckbox.vue
@@ -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.classes")
 </template>
 
 <script>
diff --git a/src/fields/core/fieldInput.vue b/src/fields/core/fieldInput.vue
@@ -6,6 +6,7 @@
 		:value="value",
 		@input="value = $event.target.value",
 		@change="onChange",
+		:class="schema.classes",
 		:disabled="disabled",
 		:accept="schema.accept",
 		:alt="schema.alt",
diff --git a/src/fields/core/fieldLabel.vue b/src/fields/core/fieldLabel.vue
@@ -1,5 +1,5 @@
 <template lang="pug">
-	span(:id="getFieldID(schema)") {{ value }}
+	span(:id="getFieldID(schema)" :class="schema.classes") {{ value }}
 </template>
 
 <script>
diff --git a/src/fields/core/fieldRadios.vue b/src/fields/core/fieldRadios.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.classes")
 			| {{ getItemName(item) }}
 
 </template>
diff --git a/src/fields/core/fieldSelect.vue b/src/fields/core/fieldSelect.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.classes")
 		option(v-if="!selectOptions.hideNoneSelectedText", :disabled="schema.required", :value="null", :selected="value == undefined") {{ selectOptions.noneSelectedText || "&lt;Nothing selected&gt;" }}
 		option(v-for="item in items", :value="getItemValue(item)") {{ getItemName(item) }}
 </template>
diff --git a/src/fields/core/fieldSubmit.vue b/src/fields/core/fieldSubmit.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.classes")
 </template>
 
 <script>
diff --git a/src/fields/core/fieldTextArea.vue b/src/fields/core/fieldTextArea.vue
@@ -2,6 +2,7 @@
 	textarea.form-control(
 		v-model="value",
 		:id="getFieldID(schema)",
+	  :class="schema.classes",
 		:disabled="disabled",
 		:maxlength="schema.max",
 		:minlength="schema.min",
diff --git a/test/unit/specs/fields/abstractField.spec.js b/test/unit/specs/fields/abstractField.spec.js
@@ -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",
+			classes: ["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");
+		});
+
+	});
+
 });
diff --git a/test/unit/specs/fields/fieldCheckbox.spec.js b/test/unit/specs/fields/fieldCheckbox.spec.js
@@ -18,7 +18,8 @@ describe("FieldCheckbox.vue", function() {
 		let schema = {
 			type: "checkbox",
 			label: "Status",
-			model: "status"
+			model: "status",
+			classes: ["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);
+		});
+
 	});
 
 });
diff --git a/test/unit/specs/fields/fieldInput.spec.js b/test/unit/specs/fields/fieldInput.spec.js
@@ -22,7 +22,8 @@ describe("fieldInput.vue", function() {
 			model: "name",
 			autocomplete: "off",
 			placeholder: "Field placeholder",
-			readonly: false
+			readonly: false,
+			classes: ["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);
+		});
+
 	});
 
 });
diff --git a/test/unit/specs/fields/fieldLabel.spec.js b/test/unit/specs/fields/fieldLabel.spec.js
@@ -18,7 +18,8 @@ describe("fieldLabel.vue", function() {
 		let schema = {
 			type: "label",
 			label: "Timestamp",
-			model: "timestamp"
+			model: "timestamp",
+			classes: ["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);
+		});
+
 	});
 
 });
diff --git a/test/unit/specs/fields/fieldRadios.spec.js b/test/unit/specs/fields/fieldRadios.spec.js
@@ -27,7 +27,8 @@ describe("FieldRadios.vue", function() {
 				"AngularJS",
 				"ReactJS",
 				"VueJS"
-			]
+			],
+			classes: ["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", () => {
 			
diff --git a/test/unit/specs/fields/fieldSelect.spec.js b/test/unit/specs/fields/fieldSelect.spec.js
@@ -26,7 +26,8 @@ describe("fieldSelect.vue", function() {
 				"Paris",
 				"Rome",
 				"Berlin"
-			]
+			],
+			classes: ["applied-class", "another-class"]
 		};
 		let model = { city: "Paris" };
 		let input;
@@ -210,7 +211,8 @@ describe("fieldSelect.vue", function() {
 					{ id: 3, name: "Rome" },
 					{ id: 4, name: "Berlin" }
 				];
-			}
+			},
+			classes: ["applied-class", "another-class"]
 		};
 		let model = { city: 2 };
 		let input;
@@ -247,6 +249,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);
+		});
+
 	});
 
 });
diff --git a/test/unit/specs/fields/fieldSubmit.spec.js b/test/unit/specs/fields/fieldSubmit.spec.js
@@ -21,7 +21,8 @@ describe("fieldSubmit.vue", function() {
 			type: "submit",
 			buttonText: "Submit form",
 			validateBeforeSubmit: false,
-			onSubmit() {}
+			onSubmit() {},
+			classes: ["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);
+		});
+
 	});
 
 });
diff --git a/test/unit/specs/fields/fieldTextArea.spec.js b/test/unit/specs/fields/fieldTextArea.spec.js
@@ -22,7 +22,8 @@ describe("fieldTextArea.vue", function() {
 			model: "desc",
 			max: 500,
 			placeholder: "Field placeholder",
-			readonly: false
+			readonly: false,
+			classes: ["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);
+		});
+
 	});
 
 });

Original file line number	Diff line number	Diff line change
`@@ -102,6 +102,5 @@`
`102`	`102`	`"webpack-dev-server": "1.16.2",`
`103`	`103`	`"webpack-merge": "0.14.1"`
`104`	`104`	`},`
`105`		`- "dependencies": {`
`106`		`- }`
	`105`	`+ "dependencies": {}`
`107`	`106`	`}`