Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 16581fb

Browse files
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)

AltStyle によって変換されたページ (->オリジナル) /