Color pickers added.

vue-generators · May 1, 2016 · 16581fb · 16581fb
1 parent 5cbaadb
commit 16581fb
Show file tree

Hide file tree

Showing 9 changed files with 100 additions and 50 deletions.
diff --git a/README.md b/README.md
@@ -37,8 +37,9 @@ TODO
 
 ## TODO
 * [x] Date picker with bootstrap-datepicker
-* [ ] Time picker
-* [ ] Color picker with spectrum
+* [x] Time picker
+* [x] HTML5 Color picker
+* [x] Color picker with spectrum
 * [ ] Image editor
 * [ ] Better slider
 * [ ] Groupable fields

diff --git a/dev/data.js b/dev/data.js
@@ -42,6 +42,7 @@ module.exports = {
 			user.status = faker.helpers.randomize([true, false, true]);
 			user.created = faker.date.recent(30).valueOf();
 			user.dt = faker.date.recent(30).valueOf();
+			user.favoriteColor = faker.internet.color();
 
 			if (user.type == "business") {
 				user.company = {

diff --git a/dev/index.html b/dev/index.html
@@ -8,6 +8,7 @@
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.0.2/css/bootstrap-slider.css">
 	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css">
+	<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.css">
 
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
@@ -16,6 +17,7 @@
 	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
 	<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/lodash.js/4.3.0/lodash.min.js"></script>
   </head>
   <body>

diff --git a/dev/schema.js b/dev/schema.js
@@ -113,6 +113,14 @@ 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: "spectrum",
+			label: "Color",
+			model: "favoriteColor",
+			colorOptions: {
+				//preferredFormat: "rgb"
+			}
+		},		
 		{
 			type: "number",
 			label: "Age",
@@ -129,7 +137,7 @@ module.exports = {
 			]
 		},
 		{
-			type: "date",
+			type: "dateTime",
 			label: "DOB",
 			model: "dob",
 			multi: true,
@@ -139,6 +147,9 @@ module.exports = {
 			validator: [
 				validators.date
 			],
+			dateTimePickerOptions: {
+				format: "YYYY-MM-DD"
+			},			
 			onChanged(model, newVal, oldVal, field) {
 				model.age = moment().year() - moment(newVal).year();
 			}
@@ -158,6 +169,22 @@ module.exports = {
 			}
 
 		},
+
+		{
+			type: "dateTime",
+			label: "Time",
+			model: "time",
+			multi: true,
+			format: "HH:mm:ss",
+			/*validator: [
+				validators.time
+			],*/
+			dateTimePickerOptions: {
+				format: "HH:mm:ss"
+			}
+
+		},
+
 		{
 			type: "slider",
 			label: "Rank",

diff --git a/src/fields/fieldColor.vue b/src/fields/fieldColor.vue
@@ -0,0 +1,18 @@
+<template lang="jade">
+	input(type="color", v-model="value", :disabled="disabled", :placeholder="schema.placeholder")
+	span.helper {{ value }}
+</template>
+
+<script>
+	import abstractField from './abstractField';
+	export default {
+		mixins: [ abstractField ]
+	}
+</script>
+
+
+<style lang="sass" scoped>
+	span {
+		margin-left: 0.3em;
+	}
+</style>
diff --git a/src/fields/fieldDate.vue b/src/fields/fieldDate.vue
diff --git a/src/fields/fieldDateTime.vue b/src/fields/fieldDateTime.vue
@@ -16,16 +16,23 @@
 
 		methods: {
 
+			getDateFormat() {
+				if (this.schema.dateTimePickerOptions && this.schema.dateTimePickerOptions.format) 
+					return this.schema.dateTimePickerOptions.format
+				else
+					return inputFormat;
+			},
+
 			formatValueToField(value) {
 				if (value != null)
-					return moment(value, this.schema.format).format(inputFormat);
+					return moment(value, this.schema.format).format(this.getDateFormat());
 
 				return value;
 			},
 
 			formatValueToModel(value) {
 				if (value != null) {
-					let m = moment(value, inputFormat);
+					let m = moment(value, this.getDateFormat());
 					if (this.schema.format)
 						value = m.format(this.schema.format);
 					else

diff --git a/src/fields/fieldSpectrum.vue b/src/fields/fieldSpectrum.vue
@@ -0,0 +1,38 @@
+<template lang="jade">
+	input(type="text", :disabled="disabled", :placeholder="schema.placeholder")
+</template>
+
+<script>
+	import abstractField from './abstractField';
+	import { defaults } from 'lodash';
+	export default {
+		mixins: [ abstractField ],
+
+		watch: { 
+			model() {
+				if ($.fn.spectrum) {
+					$(this.$el).spectrum("set", this.value);
+				}
+			}
+		},
+
+		ready() {
+			if ($.fn.spectrum)
+				$(this.$el).spectrum("destroy").spectrum(defaults(this.schema.colorOptions || {}, {
+					showInput: true,
+					showAlpha: true,
+					disabled: this.schema.disabled,
+					allowEmpty: !this.schema.required,
+					preferredFormat: "hex",
+					change: (color) => {
+						this.value = color ? color.toString() : null
+
+					}
+				}));
+		}
+	}
+</script>
+
+
+<style lang="sass" scoped>
+</style>
diff --git a/src/formGenerator.vue b/src/formGenerator.vue
@@ -8,7 +8,7 @@
 						i.fa.fa-question-circle
 						.helpText {{{field.help}}}
 
-					|{{ field.label }}
+					| {{ field.label }}
 				td
 					.field-wrap
 						component(:is="getFieldType(field)", :disabled="fieldDisabled(field)", :model.sync="model", :schema.sync="field")