Better label support for more inputs:

- Cleave
- DataTimePicker
- GoogleAddress
- Label
- Masked
- Select
- Spectrum
- Switch

Don't output labels for the following input types:

- button
- image
- submit
- reset

Author: dflock

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", :name="schema.inputName")
+	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName", :id="getFieldID(schema)")
 </template>
 
 <script>

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", :name="schema.inputName")
+		input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName", :id="getFieldID(schema)")
 		span.input-group-addon
 			span.glyphicon.glyphicon-calendar
 </template>
@@ -19,7 +19,7 @@
 		methods: {
 
 			getDateFormat() {
-				if (this.schema.dateTimePickerOptions && this.schema.dateTimePickerOptions.format) 
+				if (this.schema.dateTimePickerOptions && this.schema.dateTimePickerOptions.format)
 					return this.schema.dateTimePickerOptions.format;
 				else
 					return inputFormat;
@@ -62,7 +62,7 @@
 			if ($.fn.datetimepicker){
 				$(this.$el).data("DateTimePicker").destroy();
 			}
-		}		
+		}
 	};
 </script>
 

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", :name="schema.inputName",  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()", :id="getFieldID(schema)")
 </template>
 
 <script>
@@ -59,7 +59,7 @@
 				if (place) {
 
 					this.value = place.formatted_address;
-					
+
 					let data  = {};
 					if (place.address_components !== undefined) {
 						for (let i = 0; i < place.address_components.length; i++) {
@@ -70,12 +70,12 @@
 						}
 
 					}
-					
+
 					// Call event in schema
 					if (isFunction(this.schema.onPlaceChanged))
 						this.schema.onPlaceChanged(this.value, data, place, this.model, this.schema);
 				}
-			},	
+			},
 
 			/**
 			 * Get the user location.

src/fields/fieldLabel.vue

@@ -1,5 +1,5 @@
 <template lang="jade">
-	span {{ value }}
+	span(:id="getFieldID(schema)") {{ value }}
 </template>
 
 <script>

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", :name="schema.inputName")
+	input.form-control(type="text", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName", :id="getFieldID(schema)")
 </template>
 
 <script>
@@ -22,7 +22,7 @@
 		beforeDestroy() {
 			if ($.fn.mask)
 				$(this.$el).unmask();
-		}	
+		}
 	};
 </script>
 

src/fields/fieldSelect.vue

@@ -1,13 +1,13 @@
 <template lang="jade">
-	select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName")
+	select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName", :id="getFieldID(schema)")
 		option(:disabled="schema.required", :value="null", :selected="value == undefined") {{ selectOptions.noneSelectedText || "&lt;Nothing selected&gt;" }}
 		option(v-for="item in items", :value="getItemID(item)") {{ getItemName(item) }}
 </template>
 
 <script>
 	import {isObject} from "lodash";
 	import abstractField from "./abstractField";
-	
+
 	export default {
 		mixins: [ abstractField ],
 
@@ -22,7 +22,7 @@
 					return values.apply(this, [this.model, this.schema]);
 				} else
 					return values;
-			}      
+			}
 		},
 
 		methods: {

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", :name="schema.inputName")
+	input(type="text", :autocomplete="schema.autocomplete", :disabled="disabled", :placeholder="schema.placeholder", :readonly="schema.readonly", :name="schema.inputName", :id="getFieldID(schema)")
 </template>
 
 <script>
@@ -15,7 +15,7 @@
 			};
 		},
 
-		watch: { 
+		watch: {
 			model() {
 				if ($.fn.spectrum) {
 					this.picker.spectrum("set", this.value);

src/fields/fieldSwitch.vue

@@ -1,18 +1,18 @@
 <template lang="jade">
 	label
-		input(type="checkbox", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName")
-		span.label(:data-on="schema.textOn || 'On'", :data-off="schema.textOff || 'Off'")
+		input(type="checkbox", v-model="value", :autocomplete="schema.autocomplete", :disabled="disabled", :name="schema.inputName", :id="getFieldID(schema)")
+		span.label(:data-on="schema.textOn || 'On'", :data-off="schema.textOff || 'Off'", :for="getFieldID(schema)")
 		span.handle
 </template>
 
 <script>
 	import abstractField from "./abstractField";
-	
+
 	export default {
 		mixins: [ abstractField ],
 
 		methods: {
-			
+
 			formatValueToField(value) {
 				if (value != null && this.schema.valueOn)
 					return value == this.schema.valueOn;
@@ -29,7 +29,7 @@
 				}
 
 				return value;
-			}		
+			}
 		}
 	};
 </script>
@@ -39,7 +39,7 @@
 	$field-switch-width: 120px;
 	$field-switch-height: 30px;
 
-	.vue-form-generator .field-switch { 
+	.vue-form-generator .field-switch {
 
 		.field-wrap label {
 			position: relative;
@@ -132,11 +132,11 @@
 			left: calc(100% - ($field-switch-height - 1px));
 			box-shadow: -1px 1px 5px rgba(0, 0, 0, 0.2);
 		}
-		 
+
 		/* Transition
 		========================== */
 		.label, .handle {
 			transition: all 0.3s ease;
 		}
 	}
-</style>
+</style>

src/formGenerator.vue

@@ -145,9 +145,18 @@ div
 
 			// Should field type have a label?
 			fieldTypeHasLabel(field) {
-				switch (field.type) {
+				let relevantType = "";
+				if (field.type === "input") {
+					relevantType = field.inputType;
+				} else {
+					relevantType = field.type;
+				}
+
+				switch (relevantType) {
 				case "button":
+				case "image":
 				case "submit":
+				case "reset":
 					return false;
 				default:
 					return true;