schema.js

import moment from "moment";
import {} from "lodash";

import { validators } from "../src";

module.exports = {
	fields: [

/***********/
/*  INPUT  */
/***********/
{
    type: "input",
    inputType: "hidden",
    label: "--- INPUT ---",
    model: "",
    styleClasses: "alert alert-info"
},
{
    type: "input",
    inputType: "hidden",
    label: "Hidden",
    model: "id",
    inputName: "hiddenField"
},
{
    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",
    inputName: "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: "age",
    styleClasses: "half-width"
},
{
    type: "input",
    inputType: "color",
    label: "Color",
    model: "color",
    styleClasses: "half-width"
},
{
    type: "input",
    inputType: "checkbox",
    label: "Checkbox (show useless)",
    model: "checkbox",
    styleClasses: "half-width"
},
{
    type: "input",
    inputType: "search",
    label: "Search USELESS",
    model: "search",
    placeholder: "Entrez un mot-clef",
    styleClasses: "half-width",
    visible(model){return model.checkbox} 
},
{
    type: "input",
    inputType: "radio",
    label: "radio USELESS",
    model: "radio",
    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",
    visible(model){return model.checkbox} 
},
{
    type: "input",
    inputType: "button",
    label: "Button USELESS",
    model: "button",
    styleClasses: "half-width",
    visible(model){return model.checkbox} 
},
{
    type: "input",
    inputType: "reset",
    label: "Reset USELESS",
    model: "reset",
    styleClasses: "half-width",
    visible(model){return model.checkbox} 
},
{
    type: "input",
    inputType: "submit",
    label: "Submit USELESS",
    model: "submit",
    styleClasses: "half-width",
    visible(model){return model.checkbox} 
},

/**************/
/*  BUILD IN  */
/**************/

{
    type: "input",
    inputType: "hidden",
    label: "--- BUILD IN ---",
    model: "",
    styleClasses: "alert alert-info"
},
{
    type: "radios",
    label: "RADIOS",
    model: "radios",
    values: [
		{name: "HTML5", value:"HTML5-123"},
		{name: "Javascript", value:"Javascript-123"},
		{name: "CSS3", value:"CSS3-123"},
		{name: "CoffeeScript", value:"CoffeeScript-123"},
		{name: "AngularJS", value:"AngularJS-123"},
		{name: "ReactJS", value:"ReactJS-123"},
		{name: "VueJS", value:"VueJS-123"}
	],
	radiosOptions: {
		value:"value",
		name:"name"
	}
},
{
    type: "radios",
    label: "RADIOS2",
    model: "radios2",
    values: [
		"HTML5",
		"Javascript",
		"CSS3",
		"CoffeeScript",
		"AngularJS",
		"ReactJS",
		"VueJS"
	]
},
{
	type: "image",
	label: "Avatar (image field)",
	model: "avatar",
	required: true,
	browse: true,
	hideInput: false,
	inputName: "photo",
	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: "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
}, 


/************/
/*  JQUERY  */
/************/

{
    type: "input",
    inputType: "hidden",
    label: "--- JQUERY ---",
    model: "",
    styleClasses: "alert alert-info"
},
{
	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", "first"],
	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",
	validator: validators.required
}, 
{
	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: "rangeSlider",
	label: "Rank (rangeSlider field)",
	model: "rank",
	multi: true,
	min: 0,
	max: 10,
	required: true,
	rangeSliderOptions: {
		grid: true
	},
	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: "dateTimePicker",
	label: "DOB (dateTimePicker 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: "dateTimePicker",
	label: "DT",
	model: "dob",
	multi: true,
	validator: [
		validators.date
	],
	dateTimePickerOptions: {
		format: "YYYY-MM-DD HH:mm:ss"
	}
},
{
	type: "dateTimePicker",
	label: "Time",
	model: "time",
	multi: true,
	format: "HH:mm:ss",
	/*validator: [
		validators.time
	],*/
	dateTimePickerOptions: {
		format: "HH:mm:ss"
	}
},


/*************/
/*  VANILLA  */
/*************/

{
    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,
	noUiSliderOptions: {
		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
		}
	}
},
{
	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",
	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
},

/*******************/
/*  CUSTOM FIELDS  */
/*******************/

{
    type: "input",
    inputType: "hidden",
    label: "--- CUSTOM FIELDS ---",
    model: "",
    styleClasses: "alert alert-info"
},
{
	type: "awesome",
	label: "Awesome (custom field)",
	model: "userName"
},

/****************/
/*  DEPRECATED  */
/****************/

// {
// 	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
// 				};
// 			}
// 		}]
// 	}, 

	]
}