Skip to content

Commit 19c4929

Browse files
zoul0813zoul0813
committed
Merge branch 'master' into develop
* master: reverting back to original test reverted back to `schema.required` for "none selected" disabled state, per @icebob fixes vue-generators#340 - "none" value set to `null`, formatValueToField checks for `isNil(value)` and returns `null`, none options are always disabled fixes vue-generators#362 - `integer` validator now calls `number` validator, and returns `invalidIntegerl: "The value is not an integer"` as well as any errors generated by `number` fixes vue-generators#361 - use $event.target.valueAsNumber for number/range inputs, debounce `formatValueToModel` for number/range, removed `formatValueToField` added missing comma that failed in Travis requested by @icebob fixes vue-generators#341 - introduced debounce functionality into `formatValueToModel` # Conflicts: # dist/vfg-core.js # dist/vfg.js # package-lock.json
2 parents 7ffa1d2 + e678a72 commit 19c4929

File tree

9 files changed

+457
-262
lines changed

9 files changed

+457
-262
lines changed

‎dist/vfg-core.js

+3-3
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/vfg.js

+4-4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package-lock.json

+239-125
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@
6363
"eslint-plugin-vue": "1.0.0",
6464
"extract-text-webpack-plugin": "1.0.1",
6565
"fakerator": "0.3.0",
66-
"fecha": "2.3.0",
66+
"fecha": "2.3.2",
6767
"inject-loader": "2.0.1",
6868
"isparta-loader": "2.0.0",
6969
"karma": "1.7.1",

‎src/fields/abstractField.js

+36-28
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,8 @@ export default {
2525
data() {
2626
return {
2727
errors: [],
28-
debouncedValidateFunc: null
28+
debouncedValidateFunc: null,
29+
debouncedFormatFunction: null,
2930
};
3031
},
3132

@@ -45,33 +46,12 @@ export default {
4546

4647
set(newValue) {
4748
let oldValue = this.value;
48-
4949
newValue = this.formatValueToModel(newValue);
50-
51-
let changed = false;
52-
if (isFunction(this.schema.set)) {
53-
this.schema.set(this.model, newValue);
54-
changed = true;
55-
56-
} else if (this.schema.model) {
57-
this.setModelValueByPath(this.schema.model, newValue);
58-
changed = true;
59-
}
60-
61-
if (changed) {
62-
this.$emit("model-updated", newValue, this.schema.model);
63-
64-
if (isFunction(this.schema.onChanged)) {
65-
this.schema.onChanged.call(this, this.model, newValue, oldValue, this.schema);
66-
}
67-
68-
if (this.$parent.options && this.$parent.options.validateAfterChanged === true) {
69-
if (this.$parent.options.validateDebounceTime > 0) {
70-
this.debouncedValidate();
71-
} else {
72-
this.validate();
73-
}
74-
}
50+
51+
if(isFunction(newValue)) {
52+
newValue(newValue, oldValue);
53+
} else {
54+
this.updateModelValue(newValue, oldValue);
7555
}
7656
}
7757
}
@@ -82,7 +62,6 @@ export default {
8262
this.clearValidationErrors();
8363

8464
if (this.schema.validator && this.schema.readonly !== true && this.disabled !== true) {
85-
8665
let validators = [];
8766
if (!isArray(this.schema.validator)) {
8867
validators.push(convertValidator(this.schema.validator).bind(this));
@@ -128,12 +107,41 @@ export default {
128107

129108
return this.errors;
130109
},
110+
131111
debouncedValidate() {
132112
if(!isFunction(this.debouncedValidateFunc)) {
133113
this.debouncedValidateFunc = debounce(this.validate.bind(this), objGet(this, "$parent.options.validateDebounceTime", 500));
134114
}
135115
this.debouncedValidateFunc();
136116
},
117+
118+
updateModelValue(newValue, oldValue) {
119+
let changed = false;
120+
if (isFunction(this.schema.set)) {
121+
this.schema.set(this.model, newValue);
122+
changed = true;
123+
} else if (this.schema.model) {
124+
this.setModelValueByPath(this.schema.model, newValue);
125+
changed = true;
126+
}
127+
128+
if (changed) {
129+
this.$emit("model-updated", newValue, this.schema.model);
130+
131+
if (isFunction(this.schema.onChanged)) {
132+
this.schema.onChanged.call(this, this.model, newValue, oldValue, this.schema);
133+
}
134+
135+
if (this.$parent.options && this.$parent.options.validateAfterChanged === true) {
136+
if (this.$parent.options.validateDebounceTime > 0) {
137+
this.debouncedValidate();
138+
} else {
139+
this.validate();
140+
}
141+
}
142+
}
143+
},
144+
137145
clearValidationErrors() {
138146
this.errors.splice(0);
139147
},

‎src/fields/core/fieldInput.vue

+81-51
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,10 @@
22
.wrapper
33
input.form-control(
44
:id="getFieldID(schema)",
5-
:type="schema.inputType",
5+
:type="schema.inputType.toLowerCase()",
66
:value="value",
7-
@input="value = $event.target.value",
7+
@input="onInput",
8+
@blur="onBlur",
89
:class="schema.fieldClasses",
910
@change="schema.onChange || null",
1011
:disabled="disabled",
@@ -35,81 +36,110 @@
3536
:step="schema.step",
3637
:width="schema.width",
3738
:files="schema.files")
38-
span.helper(v-if="schema.inputType === 'color' || schema.inputType === 'range'") {{ value }}
39+
span.helper(v-if="schema.inputType.toLowerCase() === 'color' || schema.inputType.toLowerCase() === 'range'") {{ value }}
3940
</template>
4041

4142
<script>
4243
import abstractField from "../abstractField";
44+
import { debounce, isFunction, isNumber } from "lodash";
4345
import fecha from "fecha";
4446
47+
const DATETIME_FORMATS = {
48+
"date": "YYYY-MM-DD",
49+
"datetime": "YYYY-MM-DD HH:mm:ss",
50+
"datetime-local": "YYYY-MM-DDTHH:mm:ss",
51+
};
52+
53+
const DEBOUNCE_FORMAT_MS = 1000;
54+
4555
export default {
4656
mixins: [abstractField],
4757
methods: {
48-
49-
formatValueToField(value) {
58+
formatValueToModel(value) {
5059
if (value != null) {
51-
let dt;
52-
switch (this.schema.inputType) {
60+
switch (this.schema.inputType.toLowerCase()) {
5361
case "date":
54-
dt = this.schema.format ? fecha.parse(value, this.schema.format) : new Date(value);
55-
return fecha.format(dt, "YYYY-MM-DD");
5662
case "datetime":
57-
dt = this.schema.format ? fecha.parse(value, this.schema.format) : new Date(value);
58-
return fecha.format(dt, "YYYY-MM-DD HH:mm:ss");
5963
case "datetime-local":
60-
dt = this.schema.format ? fecha.parse(value, this.schema.format) : new Date(value);
61-
return fecha.format(dt, "YYYY-MM-DDTHH:mm:ss");
64+
case "number":
65+
case "range":
66+
// debounce
67+
return (newValue, oldValue) => {
68+
this.debouncedFormatFunc(value, oldValue);
69+
};
6270
}
6371
}
6472
6573
return value;
6674
},
67-
68-
formatValueToModel(value) {
69-
if (value != null) {
70-
let m;
71-
switch (this.schema.inputType) {
72-
case "date":
73-
m = fecha.parse(value, "YYYY-MM-DD");
74-
if (m !== false) {
75-
if (this.schema.format)
76-
value = fecha.format(m, this.schema.format);
77-
else
78-
value = m.valueOf();
79-
}
80-
break;
81-
case "datetime":
82-
m = fecha.parse(value, "YYYY-MM-DD HH:mm:ss");
83-
if (m !== false) {
84-
if (this.schema.format)
85-
value = fecha.format(m, this.schema.format);
86-
else
87-
value = m.valueOf();
88-
}
89-
break;
90-
case "datetime-local":
91-
m = fecha.parse(value, "YYYY-MM-DDTHH:mm:ss");
92-
if (m !== false) {
93-
if (this.schema.format)
94-
value = fecha.format(m, this.schema.format);
95-
else
96-
value = m.valueOf();
97-
}
98-
break;
99-
case "number":
100-
return Number(value);
101-
case "range":
102-
return Number(value);
75+
formatDatetimeToModel(newValue, oldValue) {
76+
let defaultFormat = DATETIME_FORMATS[this.schema.inputType.toLowerCase()];
77+
let m = fecha.parse(newValue, defaultFormat);
78+
if (m !== false) {
79+
if (this.schema.format) {
80+
newValue = fecha.format(m, this.schema.format);
81+
} else {
82+
newValue = m.valueOf();
10383
}
10484
}
85+
this.updateModelValue(newValue, oldValue);
86+
},
87+
formatNumberToModel(newValue, oldValue) {
88+
if(!isNumber(newValue)) {
89+
newValue = NaN;
90+
}
91+
this.updateModelValue(newValue, oldValue);
92+
},
93+
onInput($event) {
94+
let value = $event.target.value;
95+
switch(this.schema.inputType.toLowerCase()) {
96+
case "number":
97+
case "range":
98+
if($event.target.valueAsNumber) {
99+
value = $event.target.valueAsNumber;
100+
}
101+
break;
102+
}
103+
this.value = value;
104+
},
105+
onBlur() {
106+
if(isFunction(this.debouncedFormatFunc)) {
107+
this.debouncedFormatFunc.flush();
108+
}
109+
}
110+
},
105111
106-
return value;
112+
mounted () {
113+
switch(this.schema.inputType.toLowerCase()) {
114+
case "number":
115+
case "range":
116+
this.debouncedFormatFunc = debounce((newValue, oldValue) => {
117+
this.formatNumberToModel(newValue, oldValue);
118+
}
119+
, DEBOUNCE_FORMAT_MS, {
120+
trailing: true,
121+
leading: false
122+
});
123+
break;
124+
case "date":
125+
case "datetime":
126+
case "datetime-local":
127+
// wait 1s before calling 'formatDatetimeToModel' to allow user to input data
128+
this.debouncedFormatFunc = debounce((newValue, oldValue) => {
129+
this.formatDatetimeToModel(newValue, oldValue);
130+
}
131+
, DEBOUNCE_FORMAT_MS, {
132+
trailing: true,
133+
leading: false
134+
});
135+
break;
107136
}
108137
},
109138
110139
created () {
111-
if(this.schema.inputType == "file")
140+
if(this.schema.inputType.toLowerCase() == "file") {
112141
console.warn("The 'file' type in input field is deprecated. Use 'file' field instead.");
142+
}
113143
}
114144
};
115145

‎src/fields/core/fieldSelect.vue

+10-4
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template lang="pug">
22
select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName", :id="getFieldID(schema)", :class="schema.fieldClasses")
3-
option(v-if="!selectOptions.hideNoneSelectedText", :disabled="schema.required", :value="null", :selected="value == undefined") {{ selectOptions.noneSelectedText || "&lt;Nothing selected&gt;" }}
3+
option(v-if="!selectOptions.hideNoneSelectedText", :disabled="schema.required", :value="null") {{ selectOptions.noneSelectedText || "&lt;Nothing selected&gt;" }}
44

55
template(v-for="item in items")
66
optgroup(v-if="item.group", :label="getGroupName(item)")
@@ -10,7 +10,7 @@
1010
</template>
1111

1212
<script>
13-
import {isObject, find} from "lodash";
13+
import {isObject, isNil, find} from "lodash";
1414
import abstractField from "../abstractField";
1515
1616
export default {
@@ -27,10 +27,16 @@
2727
return this.groupValues(values.apply(this, [this.model, this.schema]));
2828
} else
2929
return this.groupValues(values);
30-
}
30+
},
3131
},
3232
3333
methods: {
34+
formatValueToField(value) {
35+
if(isNil(value)) {
36+
return null;
37+
}
38+
return value;
39+
},
3440
3541
groupValues(values){
3642
let array = [];
@@ -123,7 +129,7 @@
123129
} else {
124130
return item;
125131
}
126-
}
132+
},
127133
}
128134
};
129135
</script>

0 commit comments

Comments
 (0)