rename dateTime to dateTimePicker and slider to rangeSlider

dev/schema.js

@@ -136,7 +136,7 @@ module.exports = {
     type: "input",
     inputType: "range",
     label: "Range",
-    model: "range",
+    model: "age",
     styleClasses: "half-width"
 },
 {
@@ -149,7 +149,7 @@ module.exports = {
 {
     type: "input",
     inputType: "checkbox",
-    label: "Checkbox",
+    label: "Checkbox (show useless)",
     model: "checkbox",
     styleClasses: "half-width"
 },
@@ -159,48 +159,55 @@ module.exports = {
     label: "Search USELESS",
     model: "search",
     placeholder: "Entrez un mot-clef",
-    styleClasses: "half-width"
+    styleClasses: "half-width",
+    visible(model){return model.checkbox} 
 },
 {
     type: "input",
     inputType: "radio",
     label: "radio USELESS",
     model: "radio",
-    styleClasses: "half-width"
+    styleClasses: "half-width",
+    visible(model){return model.checkbox} 
 },
 {
     type: "input",
     inputType: "file",
     label: "File USELESS",
     model: "file",
+    visible(model){return model.checkbox} 
 },
 {
     type: "input",
     inputType: "image",
     label: "Image USELESS",
     model: "image",
-    styleClasses: "half-width"
+    styleClasses: "half-width",
+    visible(model){return model.checkbox} 
 },
 {
     type: "input",
     inputType: "button",
     label: "Button USELESS",
     model: "button",
-    styleClasses: "half-width"
+    styleClasses: "half-width",
+    visible(model){return model.checkbox} 
 },
 {
     type: "input",
     inputType: "reset",
     label: "Reset USELESS",
     model: "reset",
-    styleClasses: "half-width"
+    styleClasses: "half-width",
+    visible(model){return model.checkbox} 
 },
 {
     type: "input",
     inputType: "submit",
     label: "Submit USELESS",
     model: "submit",
-    styleClasses: "half-width"
+    styleClasses: "half-width",
+    visible(model){return model.checkbox} 
 },
 
 /**************/
@@ -354,23 +361,6 @@ module.exports = {
     model: "",
     styleClasses: "alert alert-info"
 },
-{
-	type: "selectEx",
-	label: "Country (selectEx field)",
-	model: "address.country",
-	multi: true,
-	required: true,
-	values: ["United Kingdom", "France", "Germany"],
-	//default: "United Kingdom",
-	multiSelect: false,
-	selectOptions: {
-		// https://silviomoreto.github.io/bootstrap-select/options/
-		liveSearch: true,
-		size: 10
-	},
-	styleClasses: ["half-width", "first"],
-	validator: validators.required
-}, 
 {
 	type: "spectrum",
 	label: "Color (spectrum field)",
@@ -386,22 +376,26 @@ module.exports = {
 	label: "Mobile  (masked field)",
 	model: "mobile",
 	mask: "(99) 999-9999",
-	styleClasses: "half-width",
+	styleClasses: ["half-width", "first"],
 	validator: validators.required
-}, 
+},
 {
-	type: "slider",
-	label: "Income",
-	model: "income",
+	type: "selectEx",
+	label: "Country (selectEx field)",
+	model: "address.country",
 	multi: true,
-	min: 0,
-	max: 100000,
-	sliderOptions: {
-		type: "double",
-		prefix: "$",
-		step: 1000
-	}
-},
+	required: true,
+	values: ["United Kingdom", "France", "Germany"],
+	//default: "United Kingdom",
+	multiSelect: false,
+	selectOptions: {
+		// https://silviomoreto.github.io/bootstrap-select/options/
+		liveSearch: true,
+		size: 10
+	},
+	styleClasses: "half-width",
+	validator: validators.required
+}, 
 {
 	type: "selectEx",
 	label: "Skills (selectEx field)",
@@ -431,21 +425,35 @@ module.exports = {
 	validator: validators.array
 },
 {
-	type: "slider",
-	label: "Rank (slider field)",
+	type: "rangeSlider",
+	label: "Rank (rangeSlider field)",
 	model: "rank",
 	multi: true,
-	min: 1,
+	min: 0,
 	max: 10,
 	required: true,
-	sliderOptions: {
+	rangeSliderOptions: {
 		grid: true
 	},
-	// validator: validators.integer
+	validator: validators.integer
 },
+// {
+// 	type: "rangeSlider",
+// 	label: "Income",
+// 	model: "income",
+// 	multi: true,
+// 	min: 0,
+// 	max: 100000,
+// 	rangeSliderOptions: {
+// 		type: "double",
+// 		prefix: "$",
+// 		step: 1000,
+// 		force_edges: true
+// 	}
+// },
 {
-	type: "dateTime",
-	label: "DOB (dateTime field)",
+	type: "dateTimePicker",
+	label: "DOB (dateTimePicker field)",
 	model: "dob",
 	required: true,
 	placeholder: "User's birth of date",
@@ -462,7 +470,7 @@ module.exports = {
 	}
 }, 
 {
-	type: "dateTime",
+	type: "dateTimePicker",
 	label: "DT",
 	model: "dob",
 	multi: true,
@@ -474,7 +482,7 @@ module.exports = {
 	}
 },
 {
-	type: "dateTime",
+	type: "dateTimePicker",
 	label: "Time",
 	model: "time",
 	multi: true,
@@ -519,8 +527,8 @@ module.exports = {
 	max: 10,
 	required: true,
 	disabled: false,
-	sliderOptions: {
-		// connect: "lower",	// "lower", "upper", true, false
+	noUiSliderOptions: {
+		connect: "lower",	// "lower", "upper", true, false
 		// margin: 2 //number
 		// limit: 2 //number
 		step:1,
@@ -538,8 +546,38 @@ module.exports = {
 			density: 10,
 			stepped: true
 		}
-	},
-	// validator: validators.integer
+	}
+},
+{
+	type: "noUiSlider",
+	label: "Rank (noUiSlider field)",
+	model: "income",
+	multi: true,
+	min: 0,
+	max: 100000,
+	required: true,
+	disabled: false,
+	noUiSliderOptions: {
+		double:true,
+		connect: true,	// "lower", "upper", true, false
+		// margin: 2 //number
+		// limit: 2 //number
+		step: 1000,
+		// orientation:"vertical", //"vertical", "horizontal"
+		// direction: "ltr", //"ltr", "rtl"
+		tooltips: true, // false, true, formatter, array[formatter or false]
+		animate: false,
+		range:{
+			'min': [  0 ],
+			'max': [ 100000 ]
+		},
+		pips: {
+			mode: 'count',
+			values: 6,
+			density: 10,
+			stepped: true
+		}
+	}
 },
 {
 	type: "cleave",

src/fields/fieldNoUiSlider.vue

@@ -32,14 +32,25 @@
 					// Single value
 					this.value = parseFloat(value);
 				}
+			},
+			getStartValue(){
+				if (this.value != null) {
+					return this.value;
+				}else{
+					if (this.schema.noUiSliderOptions.double) {
+						return [this.schema.min, this.schema.min];
+					}else{
+						return this.schema.min;
+					}
+				}
 			}
 		},
 
 		ready() {
 			if (window.noUiSlider) {
 				this.slider = this.$el;
-				window.noUiSlider.create(this.slider, defaults(this.schema.sliderOptions || {}, {
-					start: this.value != null ? this.value : this.schema.min,
+				window.noUiSlider.create(this.slider, defaults(this.schema.noUiSliderOptions || {}, {
+					start: this.getStartValue(),
 					range: {
 						"min": this.schema.min,
 						"max": this.schema.max

src/fields/fieldSlider.vue → src/fields/fieldRangeSlider.vue

@@ -44,7 +44,7 @@
 					valueFrom = this.value;
 
 				let self = this;
-				$(this.$el).ionRangeSlider(defaults(this.schema.sliderOptions || {}, {
+				$(this.$el).ionRangeSlider(defaults(this.schema.rangeSliderOptions || {}, {
 					type: "single",
 					grid: true,
 					hide_min_max: true,
@@ -73,7 +73,7 @@
 
 
 <style lang="sass">
-	.vue-form-generator .field-slider .irs {
+	.vue-form-generator .field-rangeSlider .irs {
 		width: 100%;
 	}
 </style>

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

@@ -3,21 +3,21 @@ import { createVueField, trigger, checkAttribute } from "../util";
 import moment from "moment";
 
 import Vue from "vue";
-import FieldDateTime from "src/fields/fieldDateTime.vue";
+import FieldDateTimePicker from "src/fields/fieldDateTimePicker.vue";
 
-Vue.component("FieldDateTime", FieldDateTime);
+Vue.component("FieldDateTimePicker", FieldDateTimePicker);
 
 let el, vm, field;
 
 function createField(test, schema = {}, model = null, disabled = false, options) {
-	[ el, vm, field ] = createVueField(test, "fieldDateTime", schema, model, disabled, options);
+	[ el, vm, field ] = createVueField(test, "fieldDateTimePicker", schema, model, disabled, options);
 }
 
-describe("fieldDateTime.vue", function() {
+describe("fieldDateTimePicker.vue", function() {
 
 	describe("check template", () => {
 		let schema = {
-			type: "dateTime",
+			type: "dateTimePicker",
 			label: "Event",
 			model: "event",
 			autocomplete: "off",
@@ -82,7 +82,7 @@ describe("fieldDateTime.vue", function() {
 
 	describe("check YYYYMMDD format", () => {
 		let schema = {
-			type: "dateTime",
+			type: "dateTimePicker",
 			label: "Event",
 			model: "event",
 			format: "YYYYMMDD",

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

@@ -17,7 +17,7 @@ describe("fieldNoUiSlider.vue", function() {
 
 	describe("check template", () => {
 		let schema = {
-			type: "range",
+			type: "noUiSlider",
 			label: "Rating",
 			model: "rating",
 			min: 1,

test/unit/specs/fields/fieldSlider.spec.js → test/unit/specs/fields/fieldRangeSlider.spec.js

@@ -2,21 +2,21 @@ import { expect } from "chai";
 import { createVueField, checkAttribute } from "../util";
 
 import Vue from "vue";
-import FieldSlider from "src/fields/fieldSlider.vue";
+import FieldRangeSlider from "src/fields/fieldRangeSlider.vue";
 
-Vue.component("FieldSlider", FieldSlider);
+Vue.component("FieldRangeSlider", FieldRangeSlider);
 
 let el, vm, field;
 
 function createField(test, schema = {}, model = null, disabled = false, options) {
-	[ el, vm, field ] = createVueField(test, "fieldSlider", schema, model, disabled, options);
+	[ el, vm, field ] = createVueField(test, "fieldRangeSlider", schema, model, disabled, options);
 }
 
-describe("fieldSlider.vue", function() {
+describe("fieldRangeSlider.vue", function() {
 
 	describe("check template", () => {
 		let schema = {
-			type: "range",
+			type: "rangeSlider",
 			label: "Rating",
 			model: "rating",
 			min: 1,