new: new field 'input'

src/fields/fieldInput.vue

@@ -0,0 +1,92 @@
+<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 ],
+		methods: {
+			formatValueToField(value) {
+				switch(this.schema.inputType){
+					case "date":
+						return moment(value).format("YYYY-MM-DD");
+					case "datetime":
+						return moment(value).format();
+					case "datetime-local":
+						return moment(value).format("YYYY-MM-DDTHH:mm:ss");
+					default:
+						return value;
+				}
+			},
+			formatValueToModel(value) {
+				console.log(this.schema.inputType, typeof value);
+				if (value != null) {
+				    if (this.schema.inputType === "date" ||
+				        this.schema.inputType === "datetime" ||
+				        this.schema.inputType === "datetimelocal") {
+						return new Date(value).getTime();
+				    }else{
+				    	return value;
+				    }
+				} else {
+					return value;
+				}
+			}
+		}
+	};
+
+</script>
+
+<style lang="sass">
+	.vue-form-generator .field-input {
+		.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/fieldInput.spec.js

@@ -0,0 +1,125 @@
+import { expect } from "chai";
+import { createVueField, trigger, checkAttribute } from "../util";
+
+import Vue from "vue";
+import fieldInput from "src/fields/fieldInput.vue";
+
+Vue.component("fieldInput", fieldInput);
+
+let el, vm, field;
+
+function createField(test, schema = {}, model = null, disabled = false, options) {
+	[el, vm, field] = createVueField(test, "fieldInput", schema, model, disabled, options);
+}
+
+describe("fieldInput.vue", function() {
+
+	describe("check template", () => {
+		let schema = {
+			type: "input",
+			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();
+			});
+
+		});
+
+	});
+
+});