Skip to content

Commit 16581fb

Browse files
icebobicebob
committed
Color pickers added.
1 parent 5cbaadb commit 16581fb

File tree

9 files changed

+100
-50
lines changed

9 files changed

+100
-50
lines changed

‎README.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,9 @@ TODO
3737

3838
## TODO
3939
* [x] Date picker with bootstrap-datepicker
40-
* [ ] Time picker
41-
* [ ] Color picker with spectrum
40+
* [x] Time picker
41+
* [x] HTML5 Color picker
42+
* [x] Color picker with spectrum
4243
* [ ] Image editor
4344
* [ ] Better slider
4445
* [ ] Groupable fields

‎dev/data.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,7 @@ module.exports = {
4242
user.status = faker.helpers.randomize([true, false, true]);
4343
user.created = faker.date.recent(30).valueOf();
4444
user.dt = faker.date.recent(30).valueOf();
45+
user.favoriteColor = faker.internet.color();
4546

4647
if (user.type == "business") {
4748
user.company = {

‎dev/index.html‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/css/bootstrap-select.min.css">
99
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.0.2/css/bootstrap-slider.css">
1010
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.css">
11+
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.css">
1112

1213
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
1314
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
@@ -16,6 +17,7 @@
1617
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.10.0/js/bootstrap-select.min.js"></script>
1718
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-slider/7.0.2/bootstrap-slider.min.js"></script>
1819
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
20+
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.js"></script>
1921
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.3.0/lodash.min.js"></script>
2022
</head>
2123
<body>

‎dev/schema.js‎

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,14 @@ module.exports = {
113113
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."
114114
//validator: validators.regexp
115115
},
116+
{
117+
type: "spectrum",
118+
label: "Color",
119+
model: "favoriteColor",
120+
colorOptions: {
121+
//preferredFormat: "rgb"
122+
}
123+
},
116124
{
117125
type: "number",
118126
label: "Age",
@@ -129,7 +137,7 @@ module.exports = {
129137
]
130138
},
131139
{
132-
type: "date",
140+
type: "dateTime",
133141
label: "DOB",
134142
model: "dob",
135143
multi: true,
@@ -139,6 +147,9 @@ module.exports = {
139147
validator: [
140148
validators.date
141149
],
150+
dateTimePickerOptions: {
151+
format: "YYYY-MM-DD"
152+
},
142153
onChanged(model, newVal, oldVal, field) {
143154
model.age = moment().year() - moment(newVal).year();
144155
}
@@ -158,6 +169,22 @@ module.exports = {
158169
}
159170

160171
},
172+
173+
{
174+
type: "dateTime",
175+
label: "Time",
176+
model: "time",
177+
multi: true,
178+
format: "HH:mm:ss",
179+
/*validator: [
180+
validators.time
181+
],*/
182+
dateTimePickerOptions: {
183+
format: "HH:mm:ss"
184+
}
185+
186+
},
187+
161188
{
162189
type: "slider",
163190
label: "Rank",

‎src/fields/fieldColor.vue‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template lang="jade">
2+
input(type="color", v-model="value", :disabled="disabled", :placeholder="schema.placeholder")
3+
span.helper {{ value }}
4+
</template>
5+
6+
<script>
7+
import abstractField from './abstractField';
8+
export default {
9+
mixins: [ abstractField ]
10+
}
11+
</script>
12+
13+
14+
<style lang="sass" scoped>
15+
span {
16+
margin-left: 0.3em;
17+
}
18+
</style>

‎src/fields/fieldDate.vue‎

Lines changed: 0 additions & 44 deletions
This file was deleted.

‎src/fields/fieldDateTime.vue‎

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,23 @@
1616
1717
methods: {
1818
19+
getDateFormat() {
20+
if (this.schema.dateTimePickerOptions && this.schema.dateTimePickerOptions.format)
21+
return this.schema.dateTimePickerOptions.format
22+
else
23+
return inputFormat;
24+
},
25+
1926
formatValueToField(value) {
2027
if (value != null)
21-
return moment(value, this.schema.format).format(inputFormat);
28+
return moment(value, this.schema.format).format(this.getDateFormat());
2229
2330
return value;
2431
},
2532
2633
formatValueToModel(value) {
2734
if (value != null) {
28-
let m = moment(value, inputFormat);
35+
let m = moment(value, this.getDateFormat());
2936
if (this.schema.format)
3037
value = m.format(this.schema.format);
3138
else

‎src/fields/fieldSpectrum.vue‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
<template lang="jade">
2+
input(type="text", :disabled="disabled", :placeholder="schema.placeholder")
3+
</template>
4+
5+
<script>
6+
import abstractField from './abstractField';
7+
import { defaults } from 'lodash';
8+
export default {
9+
mixins: [ abstractField ],
10+
11+
watch: {
12+
model() {
13+
if ($.fn.spectrum) {
14+
$(this.$el).spectrum("set", this.value);
15+
}
16+
}
17+
},
18+
19+
ready() {
20+
if ($.fn.spectrum)
21+
$(this.$el).spectrum("destroy").spectrum(defaults(this.schema.colorOptions || {}, {
22+
showInput: true,
23+
showAlpha: true,
24+
disabled: this.schema.disabled,
25+
allowEmpty: !this.schema.required,
26+
preferredFormat: "hex",
27+
change: (color) => {
28+
this.value = color ? color.toString() : null
29+
30+
}
31+
}));
32+
}
33+
}
34+
</script>
35+
36+
37+
<style lang="sass" scoped>
38+
</style>

‎src/formGenerator.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
i.fa.fa-question-circle
99
.helpText {{{field.help}}}
1010

11-
|{{ field.label }}
11+
| {{ field.label }}
1212
td
1313
.field-wrap
1414
component(:is="getFieldType(field)", :disabled="fieldDisabled(field)", :model.sync="model", :schema.sync="field")

0 commit comments

Comments
 (0)