Implement #78

icebob · icebob · commit f92b193a78aa · 2016-09-26T22:27:21.000+02:00
Add `name` attr to input, select and textarea fields
diff --git a/dev/schema.js b/dev/schema.js
@@ -20,7 +20,8 @@ module.exports = {
     type: "input",
     inputType: "hidden",
     label: "Hidden",
-    model: "id"
+    model: "id",
+    inputName: "hiddenField"
 },
 {
     type: "input",
@@ -57,6 +58,7 @@ module.exports = {
     label: "URL",
     model: "website",
     placeholder: "Enter your website",
+    inputName: "website",
     validator: validators.url
 },
 {
diff --git a/src/fields/fieldCheckbox.vue b/src/fields/fieldCheckbox.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input(type="checkbox", v-model="value",  :autocomplete="schema.autocomplete", :disabled="disabled")
+	input(type="checkbox", v-model="value",  :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName")
 </template>
 
 <script>
diff --git a/src/fields/fieldCleave.vue b/src/fields/fieldCleave.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
+	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
 </template>
 
 <script>
diff --git a/src/fields/fieldColor.vue b/src/fields/fieldColor.vue
@@ -1,6 +1,6 @@
 <template lang="jade">
 	.wrapper
-		input(type="color", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled")
+		input(type="color", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName")
 		span.helper {{ value }}
 </template>
 
diff --git a/src/fields/fieldDateTimePicker.vue b/src/fields/fieldDateTimePicker.vue
@@ -1,6 +1,6 @@
 <template lang="jade">
 	.input-group.date
-		input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
+		input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
 		span.input-group-addon
 			span.glyphicon.glyphicon-calendar
 </template>
diff --git a/src/fields/fieldEmail.vue b/src/fields/fieldEmail.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="email", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
+	input.form-control(type="email", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
 </template>
 
 <script>
diff --git a/src/fields/fieldGoogleAddress.vue b/src/fields/fieldGoogleAddress.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly",  debounce="500", @focus="geolocate()")
+	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName",  debounce="500", @focus="geolocate()")
 </template>
 
 <script>
diff --git a/src/fields/fieldImage.vue b/src/fields/fieldImage.vue
@@ -1,7 +1,7 @@
 <template lang="jade">
 	div.wrapper
 		input.form-control.link(type="text", v-show="schema.hideInput !== true", 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")
+		input.form-control.file(type="file", v-if="schema.browse !== false", :disabled="disabled", @change="fileChanged", :name="schema.inputName")
 		.preview(:style="previewStyle")
 			.remove(title="Remove image", @click="remove")
 </template>
diff --git a/src/fields/fieldInput.vue b/src/fields/fieldInput.vue
@@ -21,6 +21,7 @@
 		:maxlength="schema.maxlength",
 		:min="schema.min",
 		:multiple="schema.multiple",
+		:name="schema.inputName",
 		:pattern="schema.pattern",
 		:placeholder="schema.placeholder",
 		:readonly="schema.readonly",
diff --git a/src/fields/fieldMasked.vue b/src/fields/fieldMasked.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
+	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
 </template>
 
 <script>
diff --git a/src/fields/fieldNumber.vue b/src/fields/fieldNumber.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	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")
+	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", :name="schema.inputName")
 </template>
 
 <script>
diff --git a/src/fields/fieldPassword.vue b/src/fields/fieldPassword.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="password", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
+	input.form-control(type="password", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
 </template>
 
 <script>
diff --git a/src/fields/fieldPikaday.vue b/src/fields/fieldPikaday.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
+	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
 </template>
 
 <script>
diff --git a/src/fields/fieldRange.vue b/src/fields/fieldRange.vue
@@ -1,6 +1,6 @@
 <template lang="jade">
 	.wrapper
-		input.form-control(type="range", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :max="schema.max", :min="schema.min")
+		input.form-control(type="range", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :max="schema.max", :min="schema.min", :name="schema.inputName")
 		.helpText {{ value }}
 </template>
 
diff --git a/src/fields/fieldRangeSlider.vue b/src/fields/fieldRangeSlider.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	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")
+	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", :name="schema.inputName")
 </template>
 
 <script>
diff --git a/src/fields/fieldSelect.vue b/src/fields/fieldSelect.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	select.form-control(v-model="value", :disabled="disabled")
+	select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName")
 		option(:disabled="schema.required", :value="null", :selected="value == undefined") &lt;Not selected&gt;
 		option(v-for="item in items", :value="getItemID(item)") {{ getItemName(item) }}
 </template>
diff --git a/src/fields/fieldSelectEx.vue b/src/fields/fieldSelectEx.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	select.selectpicker(v-model="value", :disabled="disabled", :multiple="schema.multiSelect", :title="schema.placeholder", data-width="100%")
+	select.selectpicker(v-model="value", :disabled="disabled", :multiple="schema.multiSelect", :title="schema.placeholder", data-width="100%", :name="schema.inputName")
 		option(:disabled="schema.required", v-if="schema.multiSelect !== true", :value="null", :selected="value == undefined") &lt;Not selected&gt;
 		option(v-for="item in items", :value="getItemID(item)") {{ getItemName(item) }}
 </template>
diff --git a/src/fields/fieldSpectrum.vue b/src/fields/fieldSpectrum.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input(type="text", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly")
+	input(type="text", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName")
 </template>
 
 <script>
diff --git a/src/fields/fieldSubmit.vue b/src/fields/fieldSubmit.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	input(type="submit", :value="schema.buttonText", @click="click")
+	input(type="submit", :value="schema.buttonText", @click="click", :name="schema.inputName")
 </template>
 
 <script>
diff --git a/src/fields/fieldSwitch.vue b/src/fields/fieldSwitch.vue
@@ -1,6 +1,6 @@
 <template lang="jade">
 	label
-		input(type="checkbox", v-model="value", :disabled="disabled")
+		input(type="checkbox", v-model="value", :disabled="disabled", :name="schema.inputName")
 		span.label(:data-on="schema.textOn || 'On'", :data-off="schema.textOff || 'Off'")
 		span.handle
 </template>
diff --git a/src/fields/fieldText.vue b/src/fields/fieldText.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	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")
+	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", :name="schema.inputName")
 </template>
 
 <script>
diff --git a/src/fields/fieldTextArea.vue b/src/fields/fieldTextArea.vue
@@ -1,5 +1,5 @@
 <template lang="jade">
-	textarea.form-control(v-model="value", :disabled="disabled", :maxlength="schema.max", :minlength="schema.min", :placeholder="schema.placeholder", :readonly="schema.readonly", :rows="schema.rows || 2")
+	textarea.form-control(v-model="value", :disabled="disabled", :maxlength="schema.max", :minlength="schema.min", :placeholder="schema.placeholder", :readonly="schema.readonly", :rows="schema.rows || 2", :name="schema.inputName")
 </template>
 
 <script>
diff --git a/test/unit/specs/fields/fieldCheckbox.spec.js b/test/unit/specs/fields/fieldCheckbox.spec.js
@@ -18,8 +18,7 @@ describe("FieldCheckbox.vue", function() {
 		let schema = {
 			type: "checkbox",
 			label: "Status",
-			model: "status",
-			autocomplete: "off"
+			model: "status"
 		};
 		let model = { status: true };
 		let input;
@@ -45,7 +44,7 @@ describe("FieldCheckbox.vue", function() {
 		});
 
 		describe("check optional attribute", () => {
-			let attributes = ["autocomplete", "disabled"];
+			let attributes = ["autocomplete", "disabled", "inputName"];
 
 			attributes.forEach(function(name) {
 				it("should set " + name, function(done) {
diff --git a/test/unit/specs/fields/fieldCleave.spec.js b/test/unit/specs/fields/fieldCleave.spec.js
@@ -52,7 +52,7 @@ describe("fieldCleave.vue", function() {
 		});
 
 		describe("check optional attribute", () => {
-			let attributes = ["autocomplete", "disabled", "readonly"];
+			let attributes = ["autocomplete", "disabled", "readonly", "inputName"];
 
 			attributes.forEach(function(name) {
 				it("should set " + name, function(done) {
diff --git a/test/unit/specs/fields/fieldColor.spec.js b/test/unit/specs/fields/fieldColor.spec.js
@@ -45,7 +45,7 @@ describe("fieldColor.vue", function() {
 		});
 
 		describe("check optional attribute", () => {
-			let attributes = ["autocomplete"];
+			let attributes = ["autocomplete", "inputName"];
 
 			attributes.forEach(function(name) {
 				it("should set " + name, function(done) {
diff --git a/test/unit/specs/fields/fieldDateTimePicker.spec.js b/test/unit/specs/fields/fieldDateTimePicker.spec.js
@@ -49,7 +49,7 @@ describe("fieldDateTimePicker.vue", function() {
 		});
 
 		describe("check optional attribute", () => {
-			let attributes = ["autocomplete", "disabled", "placeholder", "readonly"];
+			let attributes = ["autocomplete", "disabled", "placeholder", "readonly", "inputName"];
 
 			attributes.forEach(function(name) {
 				it("should set " + name, function(done) {
diff --git a/test/unit/specs/fields/fieldEmail.spec.js b/test/unit/specs/fields/fieldEmail.spec.js
@@ -49,7 +49,7 @@ describe("fieldEmail.vue", function() {
 		});
 
 		describe("check optional attribute", () => {
-			let attributes = ["autocomplete", "disabled", "placeholder", "readonly"];
+			let attributes = ["autocomplete", "disabled", "placeholder", "readonly", "inputName"];
 
 			attributes.forEach(function(name) {
 				it("should set " + name, function(done) {
diff --git a/test/unit/specs/fields/fieldGoogleAddress.spec.js b/test/unit/specs/fields/fieldGoogleAddress.spec.js
@@ -48,7 +48,7 @@ describe("fieldGoogleAddress.vue", function() {
 		});
 
 		describe("check optional attribute", () => {
-			let attributes = ["autocomplete", "disabled", "placeholder", "readonly"];
+			let attributes = ["autocomplete", "disabled", "placeholder", "readonly", "inputName"];
 
 			attributes.forEach(function(name) {
 				it("should set " + name, function(done) {
diff --git a/test/unit/specs/fields/fieldInput.spec.js b/test/unit/specs/fields/fieldInput.spec.js
@@ -49,9 +49,9 @@ describe("fieldInput.vue", function() {
 		});
 
 		let inputTypes = new Map([
-			["text", ["autocomplete", "disabled", "placeholder", "readonly"]],
-			["password", ["autocomplete", "disabled", "placeholder", "readonly"]],
-			["checkbox", ["autocomplete", "disabled"]],
+			["text", ["autocomplete", "disabled", "placeholder", "readonly", "inputName"]],
+			["password", ["autocomplete", "disabled", "placeholder", "readonly", "inputName"]],
+			["checkbox", ["autocomplete", "disabled", "inputName"]],
 			// ["radio", [] ],
 			// ["button", [] ],
 			// ["submit", [] ],
@@ -65,13 +65,13 @@ describe("fieldInput.vue", function() {
 			// ["month", ],
 			// ["time", ],
 			// ["week", ],
-			["number", ["autocomplete", "disabled", "placeholder", "readonly"]],
+			["number", ["autocomplete", "disabled", "placeholder", "readonly", "inputName"]],
 			// ["range", ["autocomplete"]],
-			["email", ["autocomplete", "disabled", "placeholder", "readonly"]],
-			["url", ["autocomplete", "disabled", "placeholder", "readonly"]],
+			["email", ["autocomplete", "disabled", "placeholder", "readonly", "inputName"]],
+			["url", ["autocomplete", "disabled", "placeholder", "readonly", "inputName"]],
 			// ["search", ],
-			["tel", ["autocomplete", "disabled", "placeholder", "readonly"]],
-			["color", ["autocomplete"]]
+			["tel", ["autocomplete", "disabled", "placeholder", "readonly", "inputName"]],
+			["color", ["autocomplete", "inputName"]]
 		]);
 		for (let [inputType, attributes] of inputTypes) {
 			
diff --git a/test/unit/specs/fields/fieldMasked.spec.js b/test/unit/specs/fields/fieldMasked.spec.js
@@ -49,7 +49,7 @@ describe("fieldMasked.vue", function() {
 		});
 
 		describe("check optional attribute", () => {
-			let attributes = ["autocomplete", "disabled", "placeholder", "readonly"];
+			let attributes = ["autocomplete", "disabled", "placeholder", "readonly", "inputName"];
 
 			attributes.forEach(function(name) {
 				it("should set " + name, function(done) {
diff --git a/test/unit/specs/fields/fieldNumber.spec.js b/test/unit/specs/fields/fieldNumber.spec.js
@@ -51,7 +51,7 @@ describe("fieldNumber.vue", function() {
 			});
 		});
 		describe("check optional attribute", () => {
-			let attributes = ["autocomplete", "disabled", "placeholder", "readonly"];
+			let attributes = ["autocomplete", "disabled", "placeholder", "readonly", "inputName"];
 
 			attributes.forEach(function(name) {
 				it("should set " + name, function(done) {
diff --git a/test/unit/specs/fields/fieldPassword.spec.js b/test/unit/specs/fields/fieldPassword.spec.js
@@ -49,7 +49,7 @@ describe("fieldPassword.vue", function() {
 		});
 
 		describe("check optional attribute", () => {
-			let attributes = ["autocomplete", "disabled", "placeholder", "readonly"];
+			let attributes = ["autocomplete", "disabled", "placeholder", "readonly", "inputName"];
 
 			attributes.forEach(function(name) {
 				it("should set " + name, function(done) {
diff --git a/test/unit/specs/fields/fieldPikaday.spec.js b/test/unit/specs/fields/fieldPikaday.spec.js
@@ -49,7 +49,7 @@ describe("fieldPikaday.vue", function() {
 		});
 
 		describe("check optional attribute", () => {
-			let attributes = ["autocomplete", "disabled", "placeholder", "readonly"];
+			let attributes = ["autocomplete", "disabled", "placeholder", "readonly", "inputName"];
 
 			attributes.forEach(function(name) {
 				it("should set " + name, function(done) {
diff --git a/test/unit/specs/fields/fieldRange.spec.js b/test/unit/specs/fields/fieldRange.spec.js
@@ -50,7 +50,7 @@ describe("fieldRange.vue", function() {
 		});
 
 		describe("check optional attribute", () => {
-			let attributes = ["autocomplete", "disabled"];
+			let attributes = ["autocomplete", "disabled", "inputName"];
 
 			attributes.forEach(function(name) {
 				it("should set " + name, function(done) {
diff --git a/test/unit/specs/fields/fieldRangeSlider.spec.js b/test/unit/specs/fields/fieldRangeSlider.spec.js
@@ -53,7 +53,7 @@ describe("fieldRangeSlider.vue", function() {
 		});
 
 		describe("check optional attribute", () => {
-			let attributes = ["autocomplete", "placeholder", "readonly"];
+			let attributes = ["autocomplete", "placeholder", "readonly", "inputName"];
 
 			attributes.forEach(function(name) {
 				it("should set " + name, function(done) {
diff --git a/test/unit/specs/fields/fieldSelect.spec.js b/test/unit/specs/fields/fieldSelect.spec.js
@@ -67,7 +67,7 @@ describe("fieldSelect.vue", function() {
 		});
 
 		describe("check optional attribute", () => {
-			let attributes = ["disabled"];
+			let attributes = ["disabled", "inputName"];
 
 			attributes.forEach(function(name) {
 				it("should set " + name, function(done) {
diff --git a/test/unit/specs/fields/fieldSelectEx.spec.js b/test/unit/specs/fields/fieldSelectEx.spec.js
@@ -66,7 +66,7 @@ describe("fieldSelectEx.vue", function() {
 		});
 
 		describe("check optional attribute", () => {
-			let attributes = ["disabled", "multiSelect"];
+			let attributes = ["disabled", "multiSelect", "inputName"];
 
 			attributes.forEach(function(name) {
 				it("should set " + name, function(done) {
diff --git a/test/unit/specs/fields/fieldSpectrum.spec.js b/test/unit/specs/fields/fieldSpectrum.spec.js
@@ -48,7 +48,7 @@ describe("fieldSpectrum.vue", function() {
 		});
 
 		describe("check optional attribute", () => {
-			let attributes = ["autocomplete", "disabled", "placeholder", "readonly"];
+			let attributes = ["autocomplete", "disabled", "placeholder", "readonly", "inputName"];
 
 			attributes.forEach(function(name) {
 				it("should set " + name, function(done) {
diff --git a/test/unit/specs/fields/fieldText.spec.js b/test/unit/specs/fields/fieldText.spec.js
@@ -48,7 +48,7 @@ describe("fieldText.vue", function() {
 		});
 
 		describe("check optional attribute", () => {
-			let attributes = ["autocomplete", "disabled", "placeholder", "readonly"];
+			let attributes = ["autocomplete", "disabled", "placeholder", "readonly", "inputName"];
 
 			attributes.forEach(function(name) {
 				it("should set " + name, function(done) {
diff --git a/test/unit/specs/fields/fieldTextArea.spec.js b/test/unit/specs/fields/fieldTextArea.spec.js
@@ -58,7 +58,7 @@ describe("fieldTextArea.vue", function() {
 		});
 
 		describe("check optional attribute", () => {
-			let attributes = ["disabled", "placeholder", "readonly"];
+			let attributes = ["disabled", "placeholder", "readonly", "inputName"];
 
 			attributes.forEach(function(name) {
 				it("should set " + name, function(done) {
diff --git a/test/unit/specs/util.js b/test/unit/specs/util.js
@@ -52,8 +52,8 @@ export let attributesList = {
 	"disabled": { before: true, after: false, field: true },
 	"multiSelect": { before: true, after: false, name: "multiple" },
 	"placeholder": { before: "Field placeholder", after: "" },
-	"readonly": { before: true, after: false, name: "readOnly" }
-
+	"readonly": { before: true, after: false, name: "readOnly" },
+	"inputName": { before: "test-name", after: "", name: "name" }
 };
 
 export function checkAttribute(name, vm, input, field, schema, done) {
@@ -66,14 +66,15 @@ export function checkAttribute(name, vm, input, field, schema, done) {
 	} else {
 		schematic = schema;
 	}
-	schematic[name] = attr.before;
+
+	vm.$set("schema." + name, attr.before);
 	vm.$nextTick(() => {
 		if (attr.name) {
 			expect(input[attr.name]).to.be.equal(schematic[name]);
 		} else {
 			expect(input[name]).to.be.equal(schematic[name]);
 		}
-		schematic[name] = attr.after;
+		vm.$set("schema." + name, attr.after);
 		return done();
 	});
 }
