new: new field html5 input

Author: Lionel Bijaoui

src/fields/fieldHtml5.vue

@@ -0,0 +1,64 @@
+<template lang="jade">
+.wrapper
+	input.form-control(
+		:type="schema.inputType", 
+		v-model="value",
+		:disabled="disabled",
+
+		:accept="schema.accept",
+		:alt="schema.alt",
+		:autocomplete="schema.autocomplete",
+		:checked="schema.checked",
+		:dirname="schema.dirname",
+		:formaction="schema.formaction",
+		:formenctype="schema.formenctype",
+		:formmethod="schema.formmethod",
+		:formnovalidate="schema.formnovalidate",
+		:formtarget="schema.formtarget",
+		:height="schema.height",
+		:list="schema.list",
+		:max="schema.max",
+		:maxlength="schema.maxlength",
+		:min="schema.min",
+		:multiple="schema.multiple",
+		:pattern="schema.pattern",
+		:placeholder="schema.placeholder",
+		:readonly="schema.readonly",
+		:required="schema.required",
+		:size="schema.size",
+		:src="schema.src",
+		:step="schema.step",
+		:width="schema.width",
+		:files="schema.files")
+	span.helper(v-if="schema.inputType === 'color' || schema.inputType === 'range'") {{ value }}
+</template>
+
+<script>
+	import abstractField from "./abstractField";
+
+	export default {
+		mixins: [ abstractField ]
+	};
+	
+</script>
+
+<style lang="sass">
+	.vue-form-generator .field-html5 {
+		.wrapper {
+			width: 100%;
+		}
+		input[type="radio"] {
+			width: 100%;
+		}
+		input[type="color"] {
+			width: 60px;
+		}
+		input[type="range"] {
+			padding: 0;
+		}
+
+		.helper {
+			margin: auto 0.5em;
+		}
+	}
+</style>

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

@@ -0,0 +1,125 @@
+import { expect } from "chai";
+import { createVueField, trigger, checkAttribute } from "../util";
+
+import Vue from "vue";
+import fieldHtml5 from "src/fields/fieldHtml5.vue";
+
+Vue.component("fieldHtml5", fieldHtml5);
+
+let el, vm, field;
+
+function createField(test, schema = {}, model = null, disabled = false, options) {
+	[el, vm, field] = createVueField(test, "fieldHtml5", schema, model, disabled, options);
+}
+
+describe("fieldHtml5.vue", function() {
+
+	describe("check template", () => {
+		let schema = {
+			type: "html5",
+			inputType: "text",
+			label: "Name",
+			model: "name",
+			autocomplete: "off",
+			placeholder: "Field placeholder",
+			readonly: false
+		};
+		let model = { name: "John Doe" };
+		let input;
+
+		before(() => {
+			createField(this, schema, model, false);
+			input = el.getElementsByTagName("input")[0];
+		});
+
+		it("should contain an input text element", () => {
+			expect(field).to.be.exist;
+			expect(field.$el).to.be.exist;
+
+			expect(input).to.be.defined;
+			expect(input.type).to.be.equal("text");
+			expect(input.classList.contains("form-control")).to.be.true;
+		});
+
+		it("should contain the value", (done) => {
+			vm.$nextTick(() => {
+				expect(input.value).to.be.equal("John Doe");
+				done();
+			});
+		});
+
+		let inputTypes = new Map([
+			["text", ["autocomplete", "disabled", "placeholder", "readonly"]],
+			["password", ["autocomplete", "disabled", "placeholder", "readonly"]],
+			["checkbox", ["autocomplete", "disabled"]],
+			// ["radio", [] ],
+			// ["button", [] ],
+			// ["submit", [] ],
+			// ["reset", [] ],
+			// ["file", [] ],
+			// ["hidden", [] ],
+			// ["image", [] ],
+			// ["datetime",  ],
+			// ["datetime", ],
+			// ["date", ],
+			// ["month", ],
+			// ["time", ],
+			// ["week", ],
+			["number", ["autocomplete", "disabled", "placeholder", "readonly"]],
+			// ["range", ["autocomplete"]],
+			["email", ["autocomplete", "disabled", "placeholder", "readonly"]],
+			["url", ["autocomplete", "disabled", "placeholder", "readonly"]],
+			// ["search", ],
+			["tel", ["autocomplete", "disabled", "placeholder", "readonly"]],
+			["color", ["autocomplete"]]
+		]);
+		for (let [inputType, attributes] of inputTypes) {
+			
+			describe("change type of input", () => {
+				
+				it("should become a " + inputType, function(done) {
+					field.schema.inputType = inputType;
+					vm.$nextTick(() => {
+						expect(input.type).to.be.equal(inputType);
+						done();
+					});
+
+				});
+				
+				describe("check optional attribute", () => {
+				
+					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.name = "Jane Doe";
+			vm.$nextTick(() => {
+				expect(input.value).to.be.equal("Jane Doe");
+				done();
+			});
+
+		});
+
+		it("model value should be the input value if changed", (done) => {
+			input.value = "John Smith";
+			trigger(input, "input");
+
+			vm.$nextTick(() => {
+				expect(model.name).to.be.equal("John Smith");
+				done();
+			});
+
+		});
+
+	});
+
+});