Add new fields tests #40

src/fields/fieldCleave.vue

@@ -43,6 +43,11 @@ export default {
 		} else {
 			console.warn("Cleave is missing. Please download from https://github.com/nosir/cleave.js/ and load the script in the HTML head section!");
 		}
+	},
+
+	beforeDestroy() {
+		if (this.cleave)
+			this.cleave.destroy();
 	}
 };
 </script>

src/fields/fieldDateTime.vue

@@ -9,6 +9,7 @@
 	/* global $ */
 	import abstractField from "./abstractField";
 	import moment from "moment";
+	import { defaults } from "lodash";
 
 	let inputFormat = "YYYY-MM-DD HH:mm:ss";
 
@@ -46,11 +47,13 @@
 		},
 
 		ready() {
-			if ($.fn.datetimepicker) 
-				$(this.$el).datetimepicker(this.schema.dateTimePickerOptions);
+			if ($.fn.datetimepicker) {
+				$(this.$el).datetimepicker(defaults(this.schema.dateTimePickerOptions || {}, {
+					format: inputFormat
+				}));
+			}
 			else
 				console.warn("Bootstrap datetimepicker library is missing. Please download from https://eonasdan.github.io/bootstrap-datetimepicker/ and load the script and CSS in the HTML head section!");
-
 		}		
 	};
 </script>

src/fields/fieldGoogleAddress.vue

@@ -23,7 +23,7 @@
 
 				//google inputs retrieved
 				"inputs": {
-					"street_number": "long_name",
+					street_number: "long_name",
 					route: "long_name",
 					country: "long_name",
 					administrative_area_level_1: "long_name",
@@ -89,7 +89,7 @@
 							lng: position.coords.longitude
 						};
 
-						let circle = new google.maps.Circle({
+						let circle = new window.google.maps.Circle({
 							center: geolocation,
 							radius: position.coords.accuracy
 						});

src/fields/fieldPikaday.vue

@@ -7,7 +7,7 @@
 	import moment from "moment";
 	import { defaults } from "lodash";
 
-	let inputFormat = "YYYY-MM-DD HH:mm:ss";
+	let inputFormat = "YYYY-MM-DD";
 
 	export default {
 		mixins: [ abstractField ],
@@ -53,7 +53,7 @@
 					position: "bottom left", // preferred position of the datepicker relative to the form field, e.g.: `top right`, `bottom right` **Note:** automatic adjustment may occur to avoid datepicker from being displayed outside the viewport, see [positions example][] (default to "bottom left")
 					reposition: true, // can be set to false to not reposition datepicker within the viewport, forcing it to take the configured `position` (default: true)
 					// container: , // DOM node to render calendar into, see [container example][] (default: undefined)
-					// format: , // the default output format for `.toString()` and `field` value (requires [Moment.js][moment] for custom formatting)
+					format: inputFormat, // the default output format for `.toString()` and `field` value (requires [Moment.js][moment] for custom formatting)
 					// formatStrict: , // the default flag for moment"s strict date parsing (requires [Moment.js][moment] for custom formatting)
 					// defaultDate: , // the initial date to view when first opened
 					// setDefaultDate: , // make the `defaultDate` the initial selected value
@@ -88,7 +88,12 @@
 				console.warn("Pikaday is missing. Please download from https://github.com/dbushell/Pikaday/ and load the script and CSS in the HTML head section!");
 			}
 
-		}		
+		},
+
+		beforeDestroy() {
+			if (this.picker)
+				this.picker.destroy();
+		}
 	};
 </script>
 

src/fields/fieldSlider.vue

@@ -10,6 +10,12 @@
 	export default {
 		mixins: [ abstractField ],
 
+		data() {
+			return {
+				slider: null
+			};
+		},
+
 		watch: {
 			model: function() {
 				if ($.fn.ionRangeSlider) {
@@ -19,9 +25,8 @@
 					} else
 						valueFrom = this.value;
 
-					let ionRangeSlider = $(this.$el).data("ionRangeSlider");
-					if (ionRangeSlider) {
-						ionRangeSlider.update({
+					if (this.slider) {
+						this.slider.update({
 							from: valueFrom,
 							to: valueTo
 						});	
@@ -38,24 +43,31 @@
 				} else
 					valueFrom = this.value;
 
+				let self = this;
 				$(this.$el).ionRangeSlider(defaults(this.schema.sliderOptions || {}, {
 					type: "single",
 					grid: true,
 					hide_min_max: true,
 					from: valueFrom,
 					to: valueTo,
-					onChange: (slider) => {
-						if (this.schema.sliderOptions.type == "double") {
-							this.value = [ slider.from, slider.to ];
+					onChange(slider) {
+						if (self.slider.options.type == "double") {
+							self.value = [ slider.from, slider.to ];
 						} else {
-							this.value = slider.from;
+							self.value = slider.from;
 						}
 					}
 				}));
+				this.slider = $(this.$el).data("ionRangeSlider");
 			}
 			else
 				console.warn("ion.rangeSlider library is missing. Please download from https://github.com/IonDen/ion.rangeSlider and load the script and CSS in the HTML head section!");
-		}		
+		},
+
+		beforeDestroy() {
+			if (this.slider)
+				this.slider.destroy();
+		}	
 	};
 </script>
 

src/fields/fieldSpectrum.vue

@@ -9,17 +9,30 @@
 	export default {
 		mixins: [ abstractField ],
 
+		data() {
+			return {
+				picker: null
+			};
+		},
+
 		watch: { 
 			model() {
 				if ($.fn.spectrum) {
-					$(this.$el).spectrum("set", this.value);
+					this.picker.spectrum("set", this.value);
 				}
+			},
+
+			disabled(val) {
+				if (val)
+					this.picker.spectrum("disable");
+				else
+					this.picker.spectrum("enable");
 			}
 		},
 
 		ready() {
-			if ($.fn.spectrum)
-				$(this.$el).spectrum("destroy").spectrum(defaults(this.schema.colorOptions || {}, {
+			if ($.fn.spectrum) {
+				this.picker = $(this.$el).spectrum("destroy").spectrum(defaults(this.schema.colorOptions || {}, {
 					showInput: true,
 					showAlpha: true,
 					disabled: this.schema.disabled,
@@ -29,8 +42,16 @@
 						this.value = color ? color.toString() : null;
 					}
 				}));
-			else
+				this.picker.spectrum("set", this.value);
+
+			} else {
 				console.warn("Spectrum color library is missing. Please download from http://bgrins.github.io/spectrum/ and load the script and CSS in the HTML head section!");
+			}
+		},
+
+		beforeDestroy() {
+			if (this.picker)
+				this.picker.spectrum("destroy");
 		}
 
 	};

src/formGenerator.vue

@@ -163,6 +163,10 @@
 	$errorColor: lighten(#F00, 0%);
 
 	fieldset.vue-form-generator {
+
+		* {
+			box-sizing: border-box;
+		}		
 
 		.form-control {
 			// Default Bootstrap .form-control style

test/unit/index.js

@@ -8,3 +8,5 @@ testsContext.keys().forEach(testsContext);
 // you want coverage for.
 var srcContext = require.context("src", true, /\.(js|vue)$/);
 srcContext.keys().forEach(srcContext);
+
+require("./style.scss");

test/unit/karma.conf.js

@@ -1,64 +1,65 @@
 var wsConfig = require("./webpack.test.config");
 
 module.exports = function(config) {
-    var settings = {
-        // base path that will be used to resolve all patterns (eg. files, exclude)
-        basePath: "",
+	var settings = {
+		// base path that will be used to resolve all patterns (eg. files, exclude)
+		basePath: "",
 
-        browsers: ["PhantomJS"],
+		browsers: ["PhantomJS"],
 
-        reporters: ["spec", "coverage"],
+		reporters: ["spec", "coverage"],
 
-        frameworks: ["mocha", "chai", "sinon-chai"],
+		frameworks: ["mocha", "chai", "sinon-chai"],
 
-        files: [
-            "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js",
-            "https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js",
-            "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js",
-            "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js",
-            "https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js",
-            "https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js",
-            "https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js",
-            "https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/js/ion.rangeSlider.js",
-            "https://rawgit.com/monterail/vue-multiselect/master/lib/vue-multiselect.min.js",
-            "https://rawgit.com/nosir/cleave.js/master/dist/cleave.min.js",
-            "https://nosir.github.io/cleave.js/lib/cleave-phone.i18n.js",
-            "https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.js",
-            "https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/pikaday.min.js",
+		files: [
+			"https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js",
+			"https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js",
+			"https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.js",
+			"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js",
+			"https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js",
+			"https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js",
+			"https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js",
+			"https://cdnjs.cloudflare.com/ajax/libs/ion-rangeslider/2.1.4/js/ion.rangeSlider.js",
+			"https://rawgit.com/monterail/vue-multiselect/master/lib/vue-multiselect.min.js",
+			"https://rawgit.com/nosir/cleave.js/master/dist/cleave.js",
+			"https://nosir.github.io/cleave.js/lib/cleave-phone.i18n.js",
+			"https://cdnjs.cloudflare.com/ajax/libs/noUiSlider/8.5.1/nouislider.js",
+			"https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/pikaday.js",
+			"https://maps.googleapis.com/maps/api/js?key=AIzaSyCEz-sX9bRJorDS-D_JL0JkZVZe2gzoUMw&libraries=places",
 
-            "./index.js"
-        ],
+			"./index.js"
+		],
 
-        exclude: [],
+		exclude: [],
 
-        preprocessors: {
-            "./index.js": ["webpack", "sourcemap"]
-        },
+		preprocessors: {
+			"./index.js": ["webpack", "sourcemap"]
+		},
 
-        webpack: wsConfig,
+		webpack: wsConfig,
 
-        webpackMiddleware: {
-            noInfo: true
-        },
+		webpackMiddleware: {
+			noInfo: true
+		},
 
-        port: 9876,
+		port: 9876,
 
-        colors: true,
+		colors: true,
 
-        logLevel: config.LOG_INFO,
+		logLevel: config.LOG_INFO,
 
-        autoWatch: false,
+		autoWatch: false,
 
-        singleRun: true,
+		singleRun: true,
 
-        coverageReporter: {
-            dir: "./coverage",
-            reporters: [
-                { type: "lcov", subdir: "." },
-                { type: "text-summary" }
-            ]
-        }
-    }
+		coverageReporter: {
+			dir: "./coverage",
+			reporters: [
+				{ type: "lcov", subdir: "." },
+				{ type: "text-summary" }
+			]
+		}
+	}
 
-    config.set(settings);
+	config.set(settings);
 }