Merge pull request #63 from lionel-bijaoui/LB_autocomplete

enhancement: add missing "autocomplete", "placeholder" and "readonly"…

src/fields/fieldCheckbox.vue

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

src/fields/fieldChecklist.vue

@@ -1,20 +1,20 @@
 <template lang="jade">
 	.wrapper
-		.listbox.form-control(v-if="schema.listBox")
+		.listbox.form-control(v-if="schema.listBox", :disabled="disabled")
 			.list-row(v-for="item in items")
 				label
-					input(type="checkbox", :checked="getItemIsChecked(item)", @change="onChanged($event, item)")
+					input(type="checkbox", :checked="getItemIsChecked(item)", :disabled="disabled", @change="onChanged($event, item)")
 					| {{ getItemName(item) }}
 
-		.combobox.form-control(v-if="!schema.listBox")
+		.combobox.form-control(v-if="!schema.listBox", :disabled="disabled")
 			.mainRow(@click="onExpandCombo", :class="{ expanded: comboExpanded }")
 				.info {{ selectedCount }} selected
 				.arrow
 
 			.dropList
 				.list-row(v-if="comboExpanded", v-for="item in items")
 					label
-						input(type="checkbox", :checked="getItemIsChecked(item)", @change="onChanged($event, item)")
+						input(type="checkbox", :checked="getItemIsChecked(item)", :disabled="disabled", @change="onChanged($event, item)")
 						| {{ getItemName(item) }}
 </template>
 

src/fields/fieldCleave.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="text", v-model="value", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder")
+	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
 </template>
 
 <script>

src/fields/fieldColor.vue

@@ -1,6 +1,6 @@
 <template lang="jade">
 	.wrapper
-		input(type="color", v-model="value", :disabled="disabled")
+		input(type="color", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled")
 		span.helper {{ value }}
 </template>
 

src/fields/fieldDateTime.vue

@@ -1,6 +1,6 @@
 <template lang="jade">
 	.input-group.date
-		input.form-control(type="text", v-model="value", :disabled="disabled")
+		input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
 		span.input-group-addon
 			span.glyphicon.glyphicon-calendar
 </template>

src/fields/fieldEmail.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="email", v-model="value", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder")
+	input.form-control(type="email", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
 </template>
 
 <script>

src/fields/fieldGoogleAddress.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="text", v-model="value", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder", debounce="500", @focus="geolocate()")
+	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly",  debounce="500", @focus="geolocate()")
 </template>
 
 <script>

src/fields/fieldImage.vue

@@ -1,7 +1,7 @@
 <template lang="jade">
 	div.wrapper
-		input.form-control.link(type="text", v-model="wrappedValue", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder")
-		input.form-control.file(type="file", :readonly="schema.readonly", :disabled="disabled", v-if="schema.browse !== false", @change="fileChanged")
+		input.form-control.link(type="text", v-model="wrappedValue", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
+		input.form-control.file(type="file", v-if="schema.browse !== false", :disabled="disabled", @change="fileChanged")
 		.preview(:style="previewStyle")
 			.remove(title="Remove image", @click="remove")
 </template>

src/fields/fieldMasked.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="text", v-model="value", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder")
+	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
 </template>
 
 <script>

src/fields/fieldNumber.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="number", v-model="value", number, :min="schema.min", :max="schema.max", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder")
+	input.form-control(type="number", v-model="value", number, :autocomplete="schema.autocomplete", :disabled="disabled", :max="schema.max", :min="schema.min", :placeholder="schema.placeholder", :readonly="schema.readonly")
 </template>
 
 <script>

src/fields/fieldPassword.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="password", v-model="value", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder")
+	input.form-control(type="password", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
 </template>
 
 <script>

src/fields/fieldPikaday.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="text", v-model="value", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder")
+	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
 </template>
 
 <script>

src/fields/fieldRange.vue

@@ -1,6 +1,6 @@
 <template lang="jade">
 	.wrapper
-		input.form-control(type="range", v-model="value", :min="schema.min", :max="schema.max", :disabled="disabled", :placeholder="schema.placeholder")
+		input.form-control(type="range", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :max="schema.max", :min="schema.min")
 		.helpText {{ value }}
 </template>
 

src/fields/fieldSlider.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	input(type="text", :data-min="schema.min", :data-max="schema.max", :data-step="schema.step", :data-disable="disabled")
+	input(type="text", :autocomplete="schema.autocomplete", :data-disable="disabled", :data-max="schema.max", :data-min="schema.min", :data-step="schema.step", :placeholder="schema.placeholder", :readonly="schema.readonly")
 </template>
 
 <script>

src/fields/fieldSpectrum.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	input(type="text", :disabled="disabled", :placeholder="schema.placeholder")
+	input(type="text", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
 </template>
 
 <script>

src/fields/fieldText.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="text", v-model="value", :maxlength="schema.max", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder")
+	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :maxlength="schema.max", :pattern="schema.pattern", :placeholder="schema.placeholder", :readonly="schema.readonly")
 </template>
 
 <script>

src/fields/fieldTextArea.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	textarea.form-control(v-model="value", :rows="schema.rows || 2", :readonly="schema.readonly", :placeholder="schema.placeholder", :disabled="disabled", :maxlength="schema.max")
+	textarea.form-control(v-model="value", :disabled="disabled", :maxlength="schema.max", :minlength="schema.min", :placeholder="schema.placeholder", :readonly="schema.readonly", :rows="schema.rows || 2")
 </template>
 
 <script>

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

@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { createVueField, trigger } from "../util";
+import { createVueField, trigger, checkAttribute } from "../util";
 
 import Vue from "vue";
 import FieldCheckbox from "src/fields/fieldCheckbox.vue";
@@ -18,7 +18,8 @@ describe("FieldCheckbox.vue", function() {
 		let schema = {
 			type: "checkbox",
 			label: "Status",
-			model: "status"
+			model: "status",
+			autocomplete: "off"
 		};
 		let model = { status: true };
 		let input;
@@ -34,28 +35,29 @@ describe("FieldCheckbox.vue", function() {
 
 			expect(input).to.be.defined;
 			expect(input.type).to.be.equal("checkbox");
-			expect(input.disabled).to.be.false;	
 		});
 
 		it("should contain the value", (done) => {
 			vm.$nextTick( () => {
-				expect(input.checked).to.be.true;	
+				expect(input.checked).to.be.true;
 				done();
 			});
 		});
 
-		it("should set disabled", (done) => {
-			field.disabled = true;
-			vm.$nextTick( () => {
-				expect(input.disabled).to.be.true;	
-				done();
+		describe("check optional attribute", () => {
+			let attributes = ["autocomplete", "disabled"];
+
+			attributes.forEach(function(name) {
+				it("should set " + name, function(done) {
+					checkAttribute(name, vm, input, field, schema, done);
+				});
 			});
 		});
 
 		it("input value should be the model value after changed", (done) => {
 			model.status = false;
 			vm.$nextTick( () => {
-				expect(input.checked).to.be.false;	
+				expect(input.checked).to.be.false;
 				done();
 			});
 
@@ -66,7 +68,7 @@ describe("FieldCheckbox.vue", function() {
 			trigger(input, "change");
 
 			vm.$nextTick( () => {
-				expect(model.status).to.be.true;	
+				expect(model.status).to.be.true;
 				done();
 			});
 

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

@@ -64,14 +64,6 @@ describe("fieldChecklist.vue", function() {
 				expect(isChecked(6)).to.be.true;
 			});
 
-			/*it("should set disabled", (done) => {
-				field.disabled = true;
-				vm.$nextTick( () => {
-					expect(listbox.disabled).to.be.true;	
-					done();
-				});
-			});*/
-
 			it("listbox value should be the model value after changed", (done) => {
 				model.skills = ["ReactJS"];
 				vm.$nextTick( () => {
@@ -89,7 +81,7 @@ describe("fieldChecklist.vue", function() {
 				trigger(checkboxes[0], "change");
 
 				vm.$nextTick( () => {
-					expect(model.skills).to.be.deep.equal(["ReactJS", "HTML5"]);	
+					expect(model.skills).to.be.deep.equal(["ReactJS", "HTML5"]);
 					done();
 				});
 
@@ -153,7 +145,7 @@ describe("fieldChecklist.vue", function() {
 				trigger(checkboxes[0], "change");
 
 				vm.$nextTick( () => {
-					expect(model.skills).to.be.deep.equal([3, 1]);	
+					expect(model.skills).to.be.deep.equal([3, 1]);
 					done();
 				});
 
@@ -219,13 +211,13 @@ describe("fieldChecklist.vue", function() {
 				trigger(checkboxes[0], "change");
 
 				vm.$nextTick( () => {
-					expect(model.skills).to.be.deep.equal([3, 1]);	
+					expect(model.skills).to.be.deep.equal([3, 1]);
 					done();
 				});
 
 			});
 
-		});		
+		});
 
 	});
 
@@ -316,7 +308,7 @@ describe("fieldChecklist.vue", function() {
 				trigger(checkboxes[0], "change");
 
 				vm.$nextTick( () => {
-					expect(model.skills).to.be.deep.equal(["ReactJS", "HTML5"]);	
+					expect(model.skills).to.be.deep.equal(["ReactJS", "HTML5"]);
 					done();
 				});
 
@@ -327,7 +319,7 @@ describe("fieldChecklist.vue", function() {
 				trigger(checkboxes[0], "change");
 
 				vm.$nextTick( () => {
-					expect(model.skills).to.be.deep.equal(["ReactJS"]);	
+					expect(model.skills).to.be.deep.equal(["ReactJS"]);
 					done();
 				});
 
@@ -339,11 +331,11 @@ describe("fieldChecklist.vue", function() {
 				trigger(checkboxes[0], "change");
 
 				vm.$nextTick( () => {
-					expect(model.skills).to.be.deep.equal(["HTML5"]);	
+					expect(model.skills).to.be.deep.equal(["HTML5"]);
 					done();
 				});
 
-			});			
+			});
 
 		});
 

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

@@ -1,5 +1,5 @@
 import { expect } from "chai";
-import { createVueField, trigger } from "../util";
+import { createVueField, trigger, checkAttribute } from "../util";
 
 import Vue from "vue";
 import FieldCleave from "src/fields/fieldCleave.vue";
@@ -19,8 +19,9 @@ describe("fieldCleave.vue", function() {
 			type: "masked",
 			label: "Phone",
 			model: "phone",
+			autocomplete: "off",
+			placeholder: "",
 			readonly: false,
-			placeholder: "Field placeholder",
 			cleaveOptions: {
 				phone: true,
 				phoneRegionCode: "HU",
@@ -41,40 +42,29 @@ describe("fieldCleave.vue", function() {
 			expect(input).to.be.defined;
 			expect(input.type).to.be.equal("text");
 			expect(input.classList.contains("form-control")).to.be.true;
-			expect(input.placeholder).to.be.equal(schema.placeholder);	
-			expect(input.readOnly).to.be.false;	
-			expect(input.disabled).to.be.false;	
 		});
 
 		it("should contain the value", (done) => {
 			vm.$nextTick( () => {
-				expect(input.value).to.be.equal("30 123 4567");	
+				expect(input.value).to.be.equal("30 123 4567");
 				done();
 			});
 		});
 
-		it("should set readOnly", (done) => {
-			schema.readonly = true;
-			vm.$nextTick( () => {
-				expect(input.readOnly).to.be.true;	
-				schema.readonly = false;
-				done();
-			});
-		});
+		describe("check optional attribute", () => {
+			let attributes = ["autocomplete", "disabled", "readonly"];
 
-		it("should set disabled", (done) => {
-			field.disabled = true;
-			vm.$nextTick( () => {
-				expect(input.disabled).to.be.true;	
-				field.disabled = false;
-				done();
+			attributes.forEach(function(name) {
+				it("should set " + name, function(done) {
+					checkAttribute(name, vm, input, field, schema, done);
+				});
 			});
 		});
 
 		it("input value should be the model value after changed", (done) => {
 			model.phone = "70 555 4433";
 			vm.$nextTick( () => {
-				expect(input.value).to.be.equal("70 555 4433");	
+				expect(input.value).to.be.equal("70 555 4433");
 				done();
 			});
 
@@ -85,23 +75,23 @@ describe("fieldCleave.vue", function() {
 			trigger(input, "input");
 
 			vm.$nextTick( () => {
-				expect(model.phone).to.be.equal("21 888 6655");	
+				expect(model.phone).to.be.equal("21 888 6655");
 				done();
 			});
 
 		});
 
 		it("should be formatted data in model", (done) => {
 			field.cleave.setRawValue("301234567");
-			expect(input.value).to.be.equal("30 123 4567");	
+			expect(input.value).to.be.equal("30 123 4567");
 			trigger(input, "change");
 
 			vm.$nextTick( () => {
-				expect(model.phone).to.be.equal("30 123 4567");	
+				expect(model.phone).to.be.equal("30 123 4567");
 				done();
 			});
 
-		});		
+		});
 
 	});