Add input mask field

icebob · icebob · commit 4e7d5ba83aa6 · 2016-05-01T15:43:16.000+02:00
diff --git a/dev/data.js b/dev/data.js
@@ -26,13 +26,14 @@ module.exports = {
 			user.bio = faker.lorem.paragraph();
 			let dob = faker.date.past(40, "1998-01-01");
 			user.dob = dob.valueOf();
+			user.time = moment().format("hh:mm:ss");
 			user.age = moment().year() - moment(dob).year();
 			user.rank = faker.random.number({
 				min: 1,
 				max: 10
 			});
 			user.role = faker.helpers.randomize(roles).id;
-
+			//user.mobile = faker.phone.phoneNumber();
 
 			user.skills = [];
 			user.skills.push(faker.helpers.randomize(skills));
diff --git a/dev/index.html b/dev/index.html
@@ -18,6 +18,7 @@
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.0.2/bootstrap-slider.min.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js"></script>
+	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.maskedinput/1.4.1/jquery.maskedinput.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
   </head>
   <body>
diff --git a/dev/schema.js b/dev/schema.js
@@ -113,6 +113,12 @@ module.exports = {
 			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."
 			//validator: validators.regexp
 		},
+		{
+			type: "masked",
+			label: "Mobile",
+			model: "mobile",
+			mask: "(99) 999-9999"
+		},		
 		{
 			type: "spectrum",
 			label: "Color",
diff --git a/src/fields/fieldDateTime.vue b/src/fields/fieldDateTime.vue
@@ -47,6 +47,9 @@
 		ready() {
 			if ($.fn.datetimepicker) 
 				$(this.$el).datetimepicker(this.schema.dateTimePickerOptions);
+			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>
diff --git a/src/fields/fieldMasked.vue b/src/fields/fieldMasked.vue
@@ -0,0 +1,24 @@
+<template lang="jade">
+	input.form-control(type="text", v-model="value", :readonly="schema.readonly", :disabled="disabled", :placeholder="schema.placeholder")
+</template>
+
+<script>
+	import abstractField from './abstractField';
+
+	export default {
+		mixins: [ abstractField ],
+
+		ready() {
+			if ($.fn.mask)
+				$(this.$el).mask("destroy").mask(this.schema.mask, this.schema.maskOptions);
+			else
+				console.warn("JQuery MaskedInput library is missing. Please download from https://github.com/digitalBush/jquery.maskedinput and load the script in the HTML head section!");
+		}		
+	}
+</script>
+
+<style lang="sass" scoped>
+	input {
+		width: 100%;
+	}
+</style>
diff --git a/src/fields/fieldSelectEx.vue b/src/fields/fieldSelectEx.vue
@@ -46,6 +46,9 @@
 		ready() {
 			if ($.fn.selectpicker) 
 				$(this.$el).selectpicker("destroy").selectpicker(this.schema.selectOptions);
+			else
+				console.warn("Bootstrap-select library is missing. Please download from https://silviomoreto.github.io/bootstrap-select/ and load the script and CSS in the HTML head section!");
+
 		}
 	}
 </script>
diff --git a/src/fields/fieldSpectrum.vue b/src/fields/fieldSpectrum.vue
@@ -29,7 +29,10 @@
 
 					}
 				}));
+			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!");
 		}
+
 	}
 </script>
 

Original file line number	Diff line number	Diff line change
`@@ -47,6 +47,9 @@`
`47`	`47`	`ready() {`
`48`	`48`	`if ($.fn.datetimepicker)`
`49`	`49`	`$(this.$el).datetimepicker(this.schema.dateTimePickerOptions);`
	`50`	`+ else`
	`51`	`+ 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!");`
	`52`	`+`
`50`	`53`	`}`
`51`	`54`	`}`
`52`	`55`	`</script>`
Original file line number	Diff line number	Diff line change
`@@ -46,6 +46,9 @@`
`46`	`46`	`ready() {`
`47`	`47`	`if ($.fn.selectpicker)`
`48`	`48`	`$(this.$el).selectpicker("destroy").selectpicker(this.schema.selectOptions);`
	`49`	`+ else`
	`50`	`+ console.warn("Bootstrap-select library is missing. Please download from https://silviomoreto.github.io/bootstrap-select/ and load the script and CSS in the HTML head section!");`
	`51`	`+`
`49`	`52`	`}`
`50`	`53`	`}`
`51`	`54`	`</script>`
Original file line number	Diff line number	Diff line change
`@@ -29,7 +29,10 @@`
`29`	`29`
`30`	`30`	`}`
`31`	`31`	`}));`
	`32`	`+ else`
	`33`	`+ 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!");`
`32`	`34`	`}`
	`35`	`+`
`33`	`36`	`}`
`34`	`37`	`</script>`
`35`	`38`