diff --git a/dev/schema.js b/dev/schema.js
index 9d963383..5d9813e6 100644
--- a/dev/schema.js
+++ b/dev/schema.js
@@ -7,598 +7,850 @@ import { validators } from "../src";
 let fakerator = new Fakerator();
 
 module.exports = {
-	fields: [{
-			type: "text",
-			label: "ID (disabled text field)",
-			model: "id",
-			readonly: true,
-			editableIfNew: true, // TODO
-			featured: false,
-			disabled: true
-		}, {
-			type: "select",
-			label: "Type (select field)",
-			model: "type",
-			required: true,
-			values: [
-				{ id: "personal", name: "Personal" },
-				{ id: "business", name: "Business" }
-			],
-			default: "personal"
-		}, {
-			type: "text",
-			label: "First name",
-			model: "firstName",
-			featured: true,
-			required: true,
-			placeholder: "User's first name",
-			styleClasses: "half-width",
-			validator: validators.string,
+	fields: [
 
-			onChanged(model, newVal, oldVal, field) {
-				//console.log(`Model's name changed from ${oldVal} to ${newVal}. Model:`, model);
-			},
+/***********/
+/*  INPUT  */
+/***********/
+{
+    type: "input",
+    inputType: "hidden",
+    label: "--- INPUT ---",
+    model: "",
+    styleClasses: "alert alert-info"
+},
+{
+    type: "input",
+    inputType: "hidden",
+    label: "Hidden",
+    model: "id"
+},
+{
+    type: "input",
+    inputType: "text",
+	label: "First name",
+	model: "firstName",
+	featured: true,
+	required: true,
+	placeholder: "User's first name",
+	styleClasses: "half-width",
+	validator: validators.string,
+	onChanged(model, newVal, oldVal, field) {
+		console.log(`Model's name changed from ${oldVal} to ${newVal}. Model:`, model);
+	},
+	onValidated(model, errors, field) {
+		if (errors.length > 0)
+			console.warn("Validation error in Name field! Errors:", errors);
+	}
+},
+{
+    type: "input",
+    inputType: "text",
+	label: "Last name",
+	model: "lastName",
+	featured: true,
+	required: true,
+	placeholder: "User's last name",
+	styleClasses: "half-width",
+	validator: validators.string
+},
+{
+    type: "input",
+    inputType: "url",
+    label: "URL",
+    model: "website",
+    placeholder: "Enter your website",
+    validator: validators.url
+},
+{
+    type: "input",
+    inputType: "tel",
+    label: "Telephone",	
+    model: "phone",    
+    placeholder: "Enter your phone number",
+    styleClasses: "half-width"
+},
+{
+    type: "input",
+    inputType: "password",
+    label: "Password",
+    model: "password",
+    placeholder: "Enter your password",
+	min: 6,
+	required: true,
+	hint: "Minimum 6 characters",
+	styleClasses: "half-width",
+	validator: validators.string
+},
+{
+    type: "input",
+    inputType: "date",
+    label: "Date",
+    model: "dob",
+    styleClasses: "half-width"
+},
+{
+    type: "input",
+    inputType: "datetime",
+    label: "Datetime",
+    model: "dob",
+    styleClasses: "half-width"
+},
+{
+    type: "input",
+    inputType: "datetime-local",
+    label: "Datetime local",
+    model: "dob",
+    styleClasses: "half-width"
+},
+{
+    type: "input",
+    inputType: "time",
+    label: "Time",
+    model: "time",
+    step:1,
+    styleClasses: "half-width"
+},
+{
+    type: "input",
+    inputType: "month",
+    label: "Month",
+    model: "month",
+    styleClasses: "half-width"
+},
+{
+    type: "input",
+    inputType: "week",
+    label: "Week",
+    model: "week",
+    styleClasses: "half-width"
+},
+{
+    type: "input",
+    inputType: "number",
+    label: "Number",
+    model: "age",
+    styleClasses: "half-width"
+},
+{
+    type: "input",
+    inputType: "range",
+    label: "Range",
+    model: "range",
+    styleClasses: "half-width"
+},
+{
+    type: "input",
+    inputType: "color",
+    label: "Color",
+    model: "color",
+    styleClasses: "half-width"
+},
+{
+    type: "input",
+    inputType: "checkbox",
+    label: "Checkbox",
+    model: "checkbox",
+    styleClasses: "half-width"
+},
+{
+    type: "input",
+    inputType: "search",
+    label: "Search USELESS",
+    model: "search",
+    placeholder: "Entrez un mot-clef",
+    styleClasses: "half-width"
+},
+{
+    type: "input",
+    inputType: "radio",
+    label: "radio USELESS",
+    model: "radio",
+    styleClasses: "half-width"
+},
+{
+    type: "input",
+    inputType: "file",
+    label: "File USELESS",
+    model: "file",
+},
+{
+    type: "input",
+    inputType: "image",
+    label: "Image USELESS",
+    model: "image",
+    styleClasses: "half-width"
+},
+{
+    type: "input",
+    inputType: "button",
+    label: "Button USELESS",
+    model: "button",
+    styleClasses: "half-width"
+},
+{
+    type: "input",
+    inputType: "reset",
+    label: "Reset USELESS",
+    model: "reset",
+    styleClasses: "half-width"
+},
+{
+    type: "input",
+    inputType: "submit",
+    label: "Submit USELESS",
+    model: "submit",
+    styleClasses: "half-width"
+},
 
-			onValidated(model, errors, field) {
-				//if (errors.length > 0)
-				//	console.warn("Validation error in Name field! Errors:", errors);
-			}
-		}, {
-			type: "text",
-			label: "Last name",
-			model: "lastName",
-			featured: true,
-			required: true,
-			placeholder: "User's last name",
-			styleClasses: "half-width",
-			validator: validators.string
-		}, {
-			type: "text",
-			label: "Username",
-			model: "userName",
-			featured: true,
-			required: true,
-			min: 5,
-			placeholder: "User's last name",
-			styleClasses: ["half-width", "first"],
-			validator: validators.string
-		}, {
-			type: "password",
-			label: "Password (password field)",
-			model: "password",
-			min: 6,
-			required: true,
-			hint: "Minimum 6 characters",
-			styleClasses: "half-width",
-			validator: validators.string
-		},
-
-		{
-			type: "vueMultiSelect",
-			label: "Skills (vue-multiSelect field)",
-			model: "skills",
-			required: true,
-			multiSelect: true,
-			selectOptions: {
-				// id:25,
-				// key:"name",
-				// label: "name",
-				searchable: true,
-				clearOnSelect: true,
-				hideSelected: true,
-				// maxHeight:300,
-				// allowEmpty:true,
-				// resetAfter:false,
-				// closeOnSelect: true,
-				// customLabel:function(){return ""},
-				taggable: true,
-				tagPlaceholder: 'tagPlaceholder',
-				onNewTag(newTag, id, options, value) {
-					console.log("onNewTag", newTag, id, options, value);
-					options.push(newTag);
-					value.push(newTag);
-				},	
-				// showPointer: true,
-				onSearch(searchQuery, id, options){
-					console.log("onSearch",searchQuery, id, options);                    
-				}
-				// selectLabel: "selectLabel",
-				// selectedLabel: "selectedLabel",
-				// deselectLabel: "deselectLabel",
-				// limit:2,
-				// limitText: count => `and ${count} more`,
-				// loading: false
-			},
-			values: [
-				"HTML5",
-				"Javascript",
-				"CSS3",
-				"CoffeeScript",
-				"AngularJS",
-				"ReactJS",
-				"VueJS"
-			],
-			onChanged(model, newVal, oldVal, field) {
-				console.log(`Model's name changed from ${oldVal} to ${newVal}. Model:`, model);
-			},			
-			max: 4,
-			placeholder: "placeholder",
-			validator: validators.array
-		},
-
-		{
-			type: "selectEx",
-			label: "Skills (selectEx field)",
-			model: "skills",
-			multi: true,
-			required: true,
-			multiSelect: true,
-			selectOptions: {
-				// https://silviomoreto.github.io/bootstrap-select/options/
-				liveSearch: true,
-				//maxOptions: 3,
-				//size: 4,
-				//actionsBox: true,
-				selectedTextFormat: "count > 3"
-			},
-			values: [
-				"HTML5",
-				"Javascript",
-				"CSS3",
-				"CoffeeScript",
-				"AngularJS",
-				"ReactJS",
-				"VueJS"
-			],
-			min: 2,
-			max: 4,
-			validator: validators.array
-		}, {
-			type: "text",
-			label: "Company name",
-			model: "company.name",
-			styleClasses: ["company", "half-width"],
-
-			visible(model) {
-				return model && model.type == "business";
-			}
-		}, {
-			type: "text",
-			label: "Company phone",
-			model: "company.phone",
-			styleClasses: "company",
-			pattern: "^\\+[0-9]{2}-[237]0-[0-9]{3}-[0-9]{4}$",
-			placeholder: "User's phone number",
-			hint: "Format: +36-(20|30|70)-000-0000",
-			styleClasses: "half-width",
-			visible(model) {
-				return model && model.type == "business";
-			}
-		}, {
-			type: "email",
-			label: "E-mail (email field)",
-			model: "email",
-			placeholder: "User's e-mail address"
-		}, {
-			type: "awesome",
-			label: "Awesome (custom field)",
-			model: "userName"
-		}, {
-			type: "googleAddress",
-			label: "Location (googleAddress)",
-			model: "location",
-			placeholder: "Location",
-			onPlaceChanged(value, place, rawPlace, model, schema) {
-				console.log("Location changed! " + value);
-				//console.log(place);
-				//console.log(rawPlace);
-			}
-		}, {
-			type: "text",
-			label: "Phone",
-			model: "phone",
-			pattern: "^\\+[0-9]{2}-[237]0-[0-9]{3}-[0-9]{4}$",
-			placeholder: "User's phone number",
-			hint: "Format: +36-(20|30|70)-000-0000",
-			help: "You can use any <b>formatted</b> texts. Or place a <a target='_blank' href='https://github.com/icebob/vue-form-generator'>link</a> to another site.",
-			styleClasses: "half-width"
-				//validator: validators.regexp
-		}, {
-			type: "cleave",
-			label: "Mobile  (Cleave.js field)",
-			model: "mobile",
-			cleaveOptions: {
-				// Credit Card
-			    creditCard: false,
-			    onCreditCardTypeChanged(type){
-					console.log("onCreditCardTypeChanged", type);	
-				},
-			    // Phone
-			    phone: false,
-    			phoneRegionCode: 'AU',
-    			// Date
-    			date: false,
-    			datePattern: ['d', 'm', 'Y'],
-    			// Numerals
-    			numeral: false,
-    			numeralThousandsGroupStyle: 'thousand',
-    			numeralDecimalScale: 2,
-    			numeralDecimalMark: '.',
-    			// General
-    			blocks: [0, 2, 0, 3, 4],
-    			delimiter: ' ',
-    			delimiters: ['(', ')', ' ', '-', '-'],
-    			// prefix: '(',
-    			numericOnly: true,
-    			uppercase: false,
-    			lowercase: false
-			},
-
-			styleClasses: "half-width",
-			validator: validators.required
-		}, {			
-			type: "masked",
-			label: "Mobile  (masked field)",
-			model: "mobile",
-			mask: "(99) 999-9999",
-			styleClasses: "half-width",
-			validator: validators.required
-		}, {
-			type: "color",
-			label: "Color (basic)",
-			model: "favoriteColor",
-			required: true,
-			colorOptions: {
-				//preferredFormat: "rgb"
-			},
-			validator: validators.required
-		}, {			
-			type: "spectrum",
-			label: "Color (spectrum field)",
-			model: "favoriteColor",
-			required: true,
-			colorOptions: {
-				//preferredFormat: "rgb"
-			},
-			validator: validators.required
-		}, {
-			type: "image",
-			label: "Avatar (image field)",
-			model: "avatar",
-			required: true,
-			browse: true,
-			validator: validators.required
-
-		}, {
-			type: "number",
-			label: "Age (number field)",
-			model: "age",
-			multi: true,
-			disabled: true,
-			placeholder: "User's age",
-			hint: "Minimum 18 age.",
-			min: 18,
-			max: 100,
-			validator: [
-				validators.integer,
-				validators.number
-			]
-		}, {
-			type: "dateTime",
-			label: "DOB (dateTime field)",
-			model: "dob",
-			required: true,
-			placeholder: "User's birth of date",
-			min: moment("1900-01-01").toDate(),
-			max: moment("2016-01-01").toDate(),
-			validator: [
-				validators.date
-			],
-			dateTimePickerOptions: {
-				format: "YYYY-MM-DD"
-			},
-			onChanged(model, newVal, oldVal, field) {
-				model.age = moment().year() - moment(newVal).year();
-			}
+/**************/
+/*  BUILD IN  */
+/**************/
 
-		}, {
-			type: "pikaday",
-			label: "DOB (pikaday field)",
-			model: "dob",
-			required: true,
-			placeholder: "User's birth of date",
-			validator: validators.date,
-			pikadayOptions: {
-				// bound: true,
-				// position: 'bottom left',
-				// reposition: true,
-				// container: ,
-				// format: 'YYYY-MM-DD HH:mm:ss',
-				// formatStrict: ,
-				// defaultDate: ,
-				// setDefaultDate: ,
-				// firstDay: 1,
-				// minDate: ,
-				// maxDate: ,
-				// disableWeekends: false,
-				// disableDayFn: ,
-				// yearRange: ,
-				// showWeekNumber: false,
-				// isRTL: false,
-				// i18n: {
-				//     previousMonth : 'Previous Month',
-				//     nextMonth     : 'Next Month',
-				//     months        : ['January','February','March','April','May','June','July','August','September','October','November','December'],
-				//     weekdays      : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
-				//     weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
-				// },
-				// yearSuffix: ,
-				// showMonthAfterYear: false,
-				// showDaysInNextAndPreviousMonths: false,
-				// numberOfMonths: ,
-				// mainCalendar: ,
-				// theme: null,
-				// onSelect: ,
-				// onOpen: ,
-				// onClose: ,
-				// onDraw: ,
-			},
-			onChanged(model, newVal, oldVal, field) {
-				// model.age = moment().year() - moment(newVal).year();
-			}
+{
+    type: "input",
+    inputType: "hidden",
+    label: "--- BUILD IN ---",
+    model: "",
+    styleClasses: "alert alert-info"
+},
+{
+	type: "image",
+	label: "Avatar (image field)",
+	model: "avatar",
+	required: true,
+	browse: true,
+	validator: validators.required
+},
+{
+	type: "textArea",
+	label: "Biography (textArea field)",
+	model: "bio",
+	hint: "Max 500 characters",
+	max: 500,
+	placeholder: "User's biography",
+	rows: 4,
+	validator: validators.string
+},
+{
+	type: "staticMap",
+	label: "Map",
+	model: "address.geo",
+	visible: true,
+	staticMapOptions: {
+        lat: "latitude",
+        lng: "longitude",
+        zoom: 6,
+        sizeX:640,
+        sizeY:640,
+        scale: 1,
+        format:"png",
+        // maptype:"satellite",
+        language:"FR-fr",
+        // region:
+        markers:"color:blue%7Clabel:S%7C43.107733,4.541936",
+        // path:
+        // visible:
+        // style:"feature:road.highway%7Celement:labels.text.stroke%7Cvisibility:on%7Ccolor:0xb06eba&style=feature:road.highway%7Celement:labels.text.fill%7Cvisibility:on%7Ccolor:0xffffff",
+        // key:
+        // signature:
+    }
+}, 
+{
+	type: "switch",
+	label: "Status (switch field)",
+	model: "status",
+	multi: true,
+	default: true,
+	textOn: "Active",
+	textOff: "Inactive",
+	styleClasses: "half-width"
+},
+{
+	type: "switch",
+	label: "Sex (switch field)",
+	model: "sex",
+	multi: true,
+	default: "male",
+	textOn: "Female",
+	textOff: "Male",
+	valueOn: "female",
+	valueOff: "male",
+	styleClasses: "half-width"
+},
+{
+	type: "label",
+	label: "Created (label field)",
+	model: "created",
+	get(model) {
+		return model && model.created ? moment(model.created).format("LLL") : "-";
+	},
+	styleClasses: "half-width"
+}, 
+{
+	type: "submit",
+	label: "",
+	buttonText: "Submit form",
+	validateBeforeSubmit: true,
+	onSubmit(model, schema) {
+		console.log("Form submitted!", model);
+		alert("Form submitted!");
+	},
+	styleClasses: "half-width"
+},
+{
+	type: "select",
+	label: "Type (select field)",
+	model: "type",
+	required: true,
+	values: [
+		{ id: "personal", name: "Personal" },
+		{ id: "business", name: "Business" }
+	],
+	default: "personal"
+},
 
-		},{
-			type: "dateTime",
-			label: "DT",
-			model: "dt",
-			multi: true,
-			validator: [
-				validators.date
-			],
-			dateTimePickerOptions: {
-				format: "YYYY-MM-DD HH:mm:ss"
-			}
 
-		},
+{
+	type: "select",
+	label: "Role",
+	model: "role",
+	required: true,
+	values: [
+		{ id: "admin", name: "Administrator" },
+		{ id: "moderator", name: "Moderator" },
+		{ id: "user", name: "Registered User" },
+		{ id: "visitor", name: "Visitor" }
+	],
+	styleClasses: "half-width",
+	validator: validators.required
+},
+{
+	type: "select",
+	label: "Language",
+	model: "language",
+	required: true,
+	values: [
+		{ id: "en-GB", name: "English (GB)" },
+		{ id: "en-US", name: "English (US)" },
+		{ id: "de", name: "German" },
+		{ id: "it", name: "Italic" },
+		{ id: "fr", name: "French" }
+	],
+	hint: "Your native language",
+	styleClasses: "half-width",
+	validator: validators.required
+}, 
 
-		{
-			type: "dateTime",
-			label: "Time",
-			model: "time",
-			multi: true,
-			format: "HH:mm:ss",
-			/*validator: [
-				validators.time
-			],*/
-			dateTimePickerOptions: {
-				format: "HH:mm:ss"
-			}
 
-		},
+/************/
+/*  JQUERY  */
+/************/
 
-		{
-			type: "switch",
-			label: "Sex (switch field)",
-			model: "sex",
-			multi: true,
-			default: "male",
-			textOn: "Female",
-			textOff: "Male",
-			valueOn: "female",
-			valueOff: "male"
-		},
+{
+    type: "input",
+    inputType: "hidden",
+    label: "--- JQUERY ---",
+    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)",
+	model: "favoriteColor",
+	required: true,
+	colorOptions: {
+		//preferredFormat: "rgb"
+	},
+	validator: validators.required
+}, 
+{
+	type: "masked",
+	label: "Mobile  (masked field)",
+	model: "mobile",
+	mask: "(99) 999-9999",
+	styleClasses: "half-width",
+	validator: validators.required
+}, 
+{
+	type: "slider",
+	label: "Income",
+	model: "income",
+	multi: true,
+	min: 0,
+	max: 100000,
+	sliderOptions: {
+		type: "double",
+		prefix: "$",
+		step: 1000
+	}
+},
+{
+	type: "selectEx",
+	label: "Skills (selectEx field)",
+	model: "skills",
+	multi: true,
+	required: true,
+	multiSelect: true,
+	selectOptions: {
+		// https://silviomoreto.github.io/bootstrap-select/options/
+		liveSearch: true,
+		//maxOptions: 3,
+		//size: 4,
+		//actionsBox: true,
+		selectedTextFormat: "count > 3"
+	},
+	values: [
+		"HTML5",
+		"Javascript",
+		"CSS3",
+		"CoffeeScript",
+		"AngularJS",
+		"ReactJS",
+		"VueJS"
+	],
+	min: 2,
+	max: 4,
+	validator: validators.array
+},
+{
+	type: "slider",
+	label: "Rank (slider field)",
+	model: "rank",
+	multi: true,
+	min: 1,
+	max: 10,
+	required: true,
+	sliderOptions: {
+		grid: true
+	},
+	// validator: validators.integer
+},
+{
+	type: "dateTime",
+	label: "DOB (dateTime field)",
+	model: "dob",
+	required: true,
+	placeholder: "User's birth of date",
+	min: moment("1900-01-01").toDate(),
+	max: moment("2016-01-01").toDate(),
+	validator: [
+		validators.date
+	],
+	dateTimePickerOptions: {
+		format: "YYYY-MM-DD"
+	},
+	onChanged(model, newVal, oldVal, field) {
+		model.age = moment().year() - moment(newVal).year();
+	}
+}, 
+{
+	type: "dateTime",
+	label: "DT",
+	model: "dob",
+	multi: true,
+	validator: [
+		validators.date
+	],
+	dateTimePickerOptions: {
+		format: "YYYY-MM-DD HH:mm:ss"
+	}
+},
+{
+	type: "dateTime",
+	label: "Time",
+	model: "time",
+	multi: true,
+	format: "HH:mm:ss",
+	/*validator: [
+		validators.time
+	],*/
+	dateTimePickerOptions: {
+		format: "HH:mm:ss"
+	}
+},
 
-		{
-			type: "noUiSlider",
-			label: "Rank (noUiSlider field)",
-			model: "rank",
-			multi: true,
-			min: 1,
-			max: 10,
-			required: true,
-			disabled: false,
-			sliderOptions: {
-				// connect: "lower",	// "lower", "upper", true, false
-				// margin: 2 //number
-				// limit: 2 //number
-				step:1,
-				// orientation:"horizontal", //"vertical", "horizontal"
-				// direction: "ltr", //"ltr", "rtl"
-				// tooltips: false, // false, true, formatter, array[formatter or false]
-				// animate: true,
-				range:{
-					'min': [  0 ],
-					'max': [ 10 ]
-				},
-				pips: {
-					mode: 'count',
-					values: 6,
-					density: 10,
-					stepped: true
-				}
-			},
-			// validator: validators.integer
-		},
 
-		{
-			type: "slider",
-			label: "Rank (slider field)",
-			model: "rank",
-			multi: true,
-			min: 1,
-			max: 10,
-			required: true,
-			sliderOptions: {
-				grid: true
-			},
-			// validator: validators.integer
-		},
+/*************/
+/*  VANILLA  */
+/*************/
 
-		{
-			type: "slider",
-			label: "Income",
-			model: "income",
-			multi: true,
-			min: 0,
-			max: 100000,
-			sliderOptions: {
-				type: "double",
-				prefix: "$",
-				step: 1000
-			}
+{
+    type: "input",
+    inputType: "hidden",
+    label: "--- VANILLA ---",
+    model: "",
+    styleClasses: "alert alert-info"
+},
+{
+	type: "googleAddress",
+	label: "Location (googleAddress)",
+	model: "location",
+	placeholder: "Location",
+	onPlaceChanged(value, place, rawPlace, model, schema) {
+		console.log("Location changed! " + value);
+		//console.log(place);
+		//console.log(rawPlace);
+	}
+}, 
+{
+	type: "noUiSlider",
+	label: "Rank (noUiSlider field)",
+	model: "rank",
+	multi: true,
+	min: 1,
+	max: 10,
+	required: true,
+	disabled: false,
+	sliderOptions: {
+		// connect: "lower",	// "lower", "upper", true, false
+		// margin: 2 //number
+		// limit: 2 //number
+		step:1,
+		// orientation:"horizontal", //"vertical", "horizontal"
+		// direction: "ltr", //"ltr", "rtl"
+		// tooltips: false, // false, true, formatter, array[formatter or false]
+		// animate: true,
+		range:{
+			'min': [  0 ],
+			'max': [ 10 ]
 		},
-
-		{
-			type: "select",
-			label: "Role",
-			model: "role",
-			required: true,
-			values: [
-				{ id: "admin", name: "Administrator" },
-				{ id: "moderator", name: "Moderator" },
-				{ id: "user", name: "Registered User" },
-				{ id: "visitor", name: "Visitor" }
-			],
-			styleClasses: "half-width",
-			validator: validators.required
+		pips: {
+			mode: 'count',
+			values: 6,
+			density: 10,
+			stepped: true
+		}
+	},
+	// validator: validators.integer
+},
+{
+	type: "cleave",
+	label: "Mobile  (Cleave.js field)",
+	model: "mobile",
+	cleaveOptions: {
+		// Credit Card
+	    creditCard: false,
+	    onCreditCardTypeChanged(type){
+			console.log("onCreditCardTypeChanged", type);	
 		},
+	    // Phone
+	    phone: false,
+		phoneRegionCode: 'AU',
+		// Date
+		date: false,
+		datePattern: ['d', 'm', 'Y'],
+		// Numerals
+		numeral: false,
+		numeralThousandsGroupStyle: 'thousand',
+		numeralDecimalScale: 2,
+		numeralDecimalMark: '.',
+		// General
+		blocks: [0, 2, 0, 3, 4],
+		delimiter: ' ',
+		delimiters: ['(', ')', ' ', '-', '-'],
+		// prefix: '(',
+		numericOnly: true,
+		uppercase: false,
+		lowercase: false
+	},
+	styleClasses: "half-width",
+	validator: validators.required
+}, 
+{
+	type: "pikaday",
+	label: "DOB (pikaday field)",
+	model: "dob",
+	required: true,
+	placeholder: "User's birth of date",
+	validator: validators.date,
+	pikadayOptions: {
+		// bound: true,
+		// position: 'bottom left',
+		// reposition: true,
+		// container: ,
+		// format: 'YYYY-MM-DD HH:mm:ss',
+		// formatStrict: ,
+		// defaultDate: ,
+		// setDefaultDate: ,
+		// firstDay: 1,
+		// minDate: ,
+		// maxDate: ,
+		// disableWeekends: false,
+		// disableDayFn: ,
+		// yearRange: ,
+		// showWeekNumber: false,
+		// isRTL: false,
+		// i18n: {
+		//     previousMonth : 'Previous Month',
+		//     nextMonth     : 'Next Month',
+		//     months        : ['January','February','March','April','May','June','July','August','September','October','November','December'],
+		//     weekdays      : ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'],
+		//     weekdaysShort : ['Sun','Mon','Tue','Wed','Thu','Fri','Sat']
+		// },
+		// yearSuffix: ,
+		// showMonthAfterYear: false,
+		// showDaysInNextAndPreviousMonths: false,
+		// numberOfMonths: ,
+		// mainCalendar: ,
+		// theme: null,
+		// onSelect: ,
+		// onOpen: ,
+		// onClose: ,
+		// onDraw: ,
+	},
+	onChanged(model, newVal, oldVal, field) {
+		// model.age = moment().year() - moment(newVal).year();
+	}
+},
+{
+	type: "vueMultiSelect",
+	label: "Skills (vue-multiSelect field)",
+	model: "skills",
+	required: true,
+	multiSelect: true,
+	selectOptions: {
+		// id:25,
+		// key:"name",
+		// label: "name",
+		searchable: true,
+		clearOnSelect: true,
+		hideSelected: true,
+		// maxHeight:300,
+		// allowEmpty:true,
+		// resetAfter:false,
+		// closeOnSelect: true,
+		// customLabel:function(){return ""},
+		taggable: true,
+		tagPlaceholder: 'tagPlaceholder',
+		onNewTag(newTag, id, options, value) {
+			console.log("onNewTag", newTag, id, options, value);
+			options.push(newTag);
+			value.push(newTag);
+		},	
+		// showPointer: true,
+		onSearch(searchQuery, id, options){
+			console.log("onSearch",searchQuery, id, options);                    
+		}
+		// selectLabel: "selectLabel",
+		// selectedLabel: "selectedLabel",
+		// deselectLabel: "deselectLabel",
+		// limit:2,
+		// limitText: count => `and ${count} more`,
+		// loading: false
+	},
+	values: [
+		"HTML5",
+		"Javascript",
+		"CSS3",
+		"CoffeeScript",
+		"AngularJS",
+		"ReactJS",
+		"VueJS"
+	],
+	onChanged(model, newVal, oldVal, field) {
+		console.log(`Model's name changed from ${oldVal} to ${newVal}. Model:`, model);
+	},			
+	max: 4,
+	placeholder: "placeholder",
+	validator: validators.array
+},
 
-		{
-			type: "select",
-			label: "Language",
-			model: "language",
-			required: true,
-			values: [
-				{ id: "en-GB", name: "English (GB)" },
-				{ id: "en-US", name: "English (US)" },
-				{ id: "de", name: "German" },
-				{ id: "it", name: "Italic" },
-				{ id: "fr", name: "French" }
-			],
-			hint: "Your native language",
-			styleClasses: "half-width",
-			validator: validators.required
-		}, {
-			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: "text",
-			label: "City",
-			model: "address.city",
-			multi: true,
-			styleClasses: "half-width",
-			validator: validators.required
-		}, {
-			type: "text",
-			label: "Street",
-			model: "address.street"
-		}, {
-			type: "text",
-			label: "GPS",
-			model: "address.geo",
-			disabled: false,
-			get(model) {
-				if (model && model.address && model.address.geo)
-					return model.address.geo.latitude + ", " + model.address.geo.longitude;
-			},
-			set(model, val) {
-				let values = val.split(",");
-				if (!model.address)
-					model.address = {};
-
-				if (!model.address.geo)
-					model.address.geo = {};
+/*******************/
+/*  CUSTOM FIELDS  */
+/*******************/
 
-				if (values.length > 0 && values[0].trim() != "")
-					model.address.geo.latitude = parseFloat(values[0].trim());
-				else
-					model.address.geo.latitude = 0
+{
+    type: "input",
+    inputType: "hidden",
+    label: "--- CUSTOM FIELDS ---",
+    model: "",
+    styleClasses: "alert alert-info"
+},
+{
+	type: "awesome",
+	label: "Awesome (custom field)",
+	model: "userName"
+},
 
-				if (values.length > 1 && values[1].trim() != "")
-					model.address.geo.longitude = parseFloat(values[1].trim());
-				else
-					model.address.geo.longitude = 0
-			},
-			buttons: [{
-				classes: "btn-location",
-				label: "Current location",
-				onclick: function(model) {
-					if (navigator.geolocation) {
-						navigator.geolocation.getCurrentPosition((pos) => {
-							if (!model.address)
-								model.address = {};
+/****************/
+/*  DEPRECATED  */
+/****************/
 
-							if (!model.address.geo)
-								model.address.geo = {};
+// {
+// 	type: "text",
+// 	label: "ID (disabled text field)",
+// 	model: "id",
+// 	readonly: true,
+// 	editableIfNew: true, // TODO
+// 	featured: false,
+// 	disabled: true
+// },
+// {
+// 	type: "password",
+// 	label: "Password (password field)",
+// 	model: "password",
+// 	min: 6,
+// 	required: true,
+// 	hint: "Minimum 6 characters",
+// 	styleClasses: "half-width",
+// 	validator: validators.string
+// },
+// {	
+// 		type: "text",
+// 		label: "Username",
+// 		model: "userName",
+// 		featured: true,
+// 		required: true,
+// 		min: 5,
+// 		placeholder: "User's last name",
+// 		styleClasses: ["half-width", "first"],
+// 		validator: validators.string
+// 	}, 
+// {
+// 		type: "text",
+// 		label: "Company name",
+// 		model: "company.name",
+// 		styleClasses: ["company", "half-width"],
+// 		visible(model) {
+// 			return model && model.type == "business";
+// 		}
+// 	}, 
+// 	{
+// 		type: "text",
+// 		label: "Company phone",
+// 		model: "company.phone",
+// 		styleClasses: "company",
+// 		pattern: "^\\+[0-9]{2}-[237]0-[0-9]{3}-[0-9]{4}$",
+// 		placeholder: "User's phone number",
+// 		hint: "Format: +36-(20|30|70)-000-0000",
+// 		styleClasses: "half-width",
+// 		visible(model) {
+// 			return model && model.type == "business";
+// 		}
+// 	}, 
+// 	{
+// 		type: "email",
+// 		label: "E-mail (email field)",
+// 		model: "email",
+// 		placeholder: "User's e-mail address"
+// 	},  
+// 	{
+// 		type: "text",
+// 		label: "Phone",
+// 		model: "phone",
+// 		pattern: "^\\+[0-9]{2}-[237]0-[0-9]{3}-[0-9]{4}$",
+// 		placeholder: "User's phone number",
+// 		hint: "Format: +36-(20|30|70)-000-0000",
+// 		help: "You can use any <b>formatted</b> texts. Or place a <a target='_blank' href='https://github.com/icebob/vue-form-generator'>link</a> to another site.",
+// 		styleClasses: "half-width"
+// 			//validator: validators.regexp
+// 	}, 
+// 	{
+// 		type: "color",
+// 		label: "Color (basic)",
+// 		model: "favoriteColor",
+// 		required: true,
+// 		colorOptions: {
+// 			//preferredFormat: "rgb"
+// 		},
+// 		validator: validators.required
+// 	}, 
+// 	{
+// 		type: "number",
+// 		label: "Age (number field)",
+// 		model: "age",
+// 		multi: true,
+// 		disabled: true,
+// 		placeholder: "User's age",
+// 		hint: "Minimum 18 age.",
+// 		min: 18,
+// 		max: 100,
+// 		validator: [
+// 			validators.integer,
+// 			validators.number
+// 		]
+// 	}, 
+// 	{
+// 		type: "text",
+// 		label: "City",
+// 		model: "address.city",
+// 		multi: true,
+// 		styleClasses: "half-width",
+// 		validator: validators.required
+// 	}, {
+// 		type: "text",
+// 		label: "Street",
+// 		model: "address.street"
+// 	}, {
+// 		type: "text",
+// 		label: "GPS",
+// 		model: "address.geo",
+// 		disabled: false,
+// 		get(model) {
+// 			if (model && model.address && model.address.geo)
+// 				return model.address.geo.latitude + ", " + model.address.geo.longitude;
+// 		},
+// 		set(model, val) {
+// 			let values = val.split(",");
+// 			if (!model.address)
+// 				model.address = {};
+// 			if (!model.address.geo)
+// 				model.address.geo = {};
+// 			if (values.length > 0 && values[0].trim() != "")
+// 				model.address.geo.latitude = parseFloat(values[0].trim());
+// 			else
+// 				model.address.geo.latitude = 0
+// 			if (values.length > 1 && values[1].trim() != "")
+// 				model.address.geo.longitude = parseFloat(values[1].trim());
+// 			else
+// 				model.address.geo.longitude = 0
+// 		},
+// 		buttons: [{
+// 			classes: "btn-location",
+// 			label: "Current location",
+// 			onclick: function(model) {
+// 				if (navigator.geolocation) {
+// 					navigator.geolocation.getCurrentPosition((pos) => {
+// 						if (!model.address)
+// 							model.address = {};
+// 						if (!model.address.geo)
+// 							model.address.geo = {};
+// 						model.address.geo.latitude = pos.coords.latitude.toFixed(5);
+// 						model.address.geo.longitude = pos.coords.longitude.toFixed(5);
+// 					});
+// 				} else {
+// 					alert("Geolocation is not supported by this browser.");
+// 				}
+// 			}
+// 		}, {
+// 			classes: "btn-clear",
+// 			label: "Clear",
+// 			onclick: function(model) {
+// 				model.address.geo = {
+// 					latitude: 0,
+// 					longitude: 0
+// 				};
+// 			}
+// 		}]
+// 	}, 
 
-							model.address.geo.latitude = pos.coords.latitude.toFixed(5);
-							model.address.geo.longitude = pos.coords.longitude.toFixed(5);
-						});
-					} else {
-						alert("Geolocation is not supported by this browser.");
-					}
-				}
-			}, {
-				classes: "btn-clear",
-				label: "Clear",
-				onclick: function(model) {
-					model.address.geo = {
-						latitude: 0,
-						longitude: 0
-					};
-				}
-			}]
-		}, {
-			type: "staticMap",
-			label: "Map",
-			model: "address.geo",
-			visible: false
-		}, {
-			type: "label",
-			label: "Created (label field)",
-			model: "created",
-			get(model) {
-				return model && model.created ? moment(model.created).format("LLL") : "-";
-			}
-		}, {
-			type: "switch",
-			label: "Status (switch field)",
-			model: "status",
-			multi: true,
-			default: true,
-			textOn: "Active",
-			textOff: "Inactive"
-		}, {
-			type: "textArea",
-			label: "Biography (textArea field)",
-			model: "bio",
-			hint: "Max 500 characters",
-			max: 500,
-			placeholder: "User's biography",
-			rows: 4,
-			validator: validators.string
-		}/*, {
-			type: "submit",
-			label: "",
-			buttonText: "Submit form",
-			validateBeforeSubmit: true,
-			onSubmit(model, schema) {
-				console.log("Form submitted!", model);
-				alert("Form submitted!");
-			}
-		}*/
 	]
 }