add every component to the body

If not, the ready() was not called.

Author: icebob

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,12 @@
 		},
 
 		ready() {
-			if ($.fn.datetimepicker) 
+			if ($.fn.datetimepicker) {
 				$(this.$el).datetimepicker(this.schema.dateTimePickerOptions);
+				//$(this.$el).data("DateTimePicker").date(this.formatValueToField(this.value));
+			}
 			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/fieldSpectrum.vue

@@ -18,7 +18,7 @@
 		},
 
 		ready() {
-			if ($.fn.spectrum)
+			if ($.fn.spectrum) {
 				$(this.$el).spectrum("destroy").spectrum(defaults(this.schema.colorOptions || {}, {
 					showInput: true,
 					showAlpha: true,
@@ -29,8 +29,9 @@
 						this.value = color ? color.toString() : null;
 					}
 				}));
-			else
+			} 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!");
+			}
 		}
 
 	};

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

@@ -13,7 +13,7 @@ function createField(schema = {}, model = null, disabled = false, options) {
 	[ el, vm, field ] = createVueField("fieldDateTime", schema, model, disabled, options);
 }
 
-describe("fieldDateTime.vue", () => {
+describe.only("fieldDateTime.vue", () => {
 
 	describe("check template", () => {
 		let schema = {
@@ -50,7 +50,12 @@ describe("fieldDateTime.vue", () => {
 			field.disabled = true;
 			vm.$nextTick( () => {
 				expect(input.disabled).to.be.true;	
-				done();
+
+				// Rollback
+				field.disabled = false;
+				vm.$nextTick( () => {
+					done();
+				});
 			});
 		});
 

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

@@ -28,7 +28,6 @@ describe("fieldMasked.vue", () => {
 
 		before( () => {
 			createField(schema, model, false);
-			vm.$appendTo(document.body);
 			input = el.getElementsByTagName("input")[0];
 		});
 

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

@@ -28,7 +28,6 @@ describe("fieldNoUiSlider.vue", () => {
 
 		before( () => {
 			createField(schema, model, false);
-			vm.$appendTo(document.body);
 			input = el.getElementsByClassName("slider")[0];
 		});
 

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

@@ -35,7 +35,6 @@ describe("fieldVueMultiSelect.vue", () => {
 
 		before( () => {
 			createField(schema, model, false);
-			vm.$appendTo(document.body);
 			input = el.querySelector(".multiselect");
 		});
 

test/unit/specs/util.js

@@ -20,6 +20,7 @@ export function trigger (el, event, args) {
 export function createVueField(type, schema = {}, model = null, disabled = false, options) {
 	let elName = Vue.util.hyphenate(type);
 	let el = document.createElement("div");		
+	document.body.appendChild(el);
 	el.innerHTML = `<${elName} :schema.sync="schema" :model.sync="model" :disabled="disabled" v-ref:field></${elName}>`;
 	let vm = new Vue({
 		el: el,
@@ -31,6 +32,6 @@ export function createVueField(type, schema = {}, model = null, disabled = false
 		}
 	});
 	let field = vm.$refs.field;
-	
+
 	return [ el, vm, field ];
 }