Skip to content

Commit

Permalink
Merge branch 'master' into develop
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@zoul0813
zoul0813 committed Dec 13, 2017
2 parents 7ffa1d2 + e678a72 commit 19c4929
Show file tree
Hide file tree
Showing 9 changed files with 457 additions and 262 deletions.
6 changes: 3 additions & 3 deletions dist/vfg-core.js
View file

Large diffs are not rendered by default.

8 changes: 4 additions & 4 deletions dist/vfg.js
View file

Large diffs are not rendered by default.

364 changes: 239 additions & 125 deletions package-lock.json
View file

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
"eslint-plugin-vue": "1.0.0",
"extract-text-webpack-plugin": "1.0.1",
"fakerator": "0.3.0",
"fecha": "2.3.0",
"fecha": "2.3.2",
"inject-loader": "2.0.1",
"isparta-loader": "2.0.0",
"karma": "1.7.1",
Expand Down
64 changes: 36 additions & 28 deletions src/fields/abstractField.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,8 @@ export default {
data() {
return {
errors: [],
debouncedValidateFunc: null
debouncedValidateFunc: null,
debouncedFormatFunction: null,
};
},

Expand All @@ -45,33 +46,12 @@ export default {

set(newValue) {
let oldValue = this.value;

newValue = this.formatValueToModel(newValue);

let changed = false;
if (isFunction(this.schema.set)) {
this.schema.set(this.model, newValue);
changed = true;

} else if (this.schema.model) {
this.setModelValueByPath(this.schema.model, newValue);
changed = true;
}

if (changed) {
this.$emit("model-updated", newValue, this.schema.model);

if (isFunction(this.schema.onChanged)) {
this.schema.onChanged.call(this, this.model, newValue, oldValue, this.schema);
}

if (this.$parent.options && this.$parent.options.validateAfterChanged === true) {
if (this.$parent.options.validateDebounceTime > 0) {
this.debouncedValidate();
} else {
this.validate();
}
}

if(isFunction(newValue)) {
newValue(newValue, oldValue);
} else {
this.updateModelValue(newValue, oldValue);
}
}
}
Expand All @@ -82,7 +62,6 @@ export default {
this.clearValidationErrors();

if (this.schema.validator && this.schema.readonly !== true && this.disabled !== true) {

let validators = [];
if (!isArray(this.schema.validator)) {
validators.push(convertValidator(this.schema.validator).bind(this));
Expand Down Expand Up @@ -128,12 +107,41 @@ export default {

return this.errors;
},

debouncedValidate() {
if(!isFunction(this.debouncedValidateFunc)) {
this.debouncedValidateFunc = debounce(this.validate.bind(this), objGet(this, "$parent.options.validateDebounceTime", 500));
}
this.debouncedValidateFunc();
},

updateModelValue(newValue, oldValue) {
let changed = false;
if (isFunction(this.schema.set)) {
this.schema.set(this.model, newValue);
changed = true;
} else if (this.schema.model) {
this.setModelValueByPath(this.schema.model, newValue);
changed = true;
}

if (changed) {
this.$emit("model-updated", newValue, this.schema.model);

if (isFunction(this.schema.onChanged)) {
this.schema.onChanged.call(this, this.model, newValue, oldValue, this.schema);
}

if (this.$parent.options && this.$parent.options.validateAfterChanged === true) {
if (this.$parent.options.validateDebounceTime > 0) {
this.debouncedValidate();
} else {
this.validate();
}
}
}
},

clearValidationErrors() {
this.errors.splice(0);
},
Expand Down
132 changes: 81 additions & 51 deletions src/fields/core/fieldInput.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@
.wrapper
input.form-control(
:id="getFieldID(schema)",
:type="schema.inputType",
:type="schema.inputType.toLowerCase()",
:value="value",
@input="value = $event.target.value",
@input="onInput",
@blur="onBlur",
:class="schema.fieldClasses",
@change="schema.onChange || null",
:disabled="disabled",
Expand Down Expand Up @@ -35,81 +36,110 @@
:step="schema.step",
:width="schema.width",
:files="schema.files")
span.helper(v-if="schema.inputType === 'color' || schema.inputType === 'range'") {{ value }}
span.helper(v-if="schema.inputType.toLowerCase() === 'color' || schema.inputType.toLowerCase() === 'range'") {{ value }}
</template>

<script>
import abstractField from "../abstractField";
import { debounce, isFunction, isNumber } from "lodash";
import fecha from "fecha";
const DATETIME_FORMATS = {
"date": "YYYY-MM-DD",
"datetime": "YYYY-MM-DD HH:mm:ss",
"datetime-local": "YYYY-MM-DDTHH:mm:ss",
};
const DEBOUNCE_FORMAT_MS = 1000;
export default {
mixins: [abstractField],
methods: {
formatValueToField(value) {
formatValueToModel(value) {
if (value != null) {
let dt;
switch (this.schema.inputType) {
switch (this.schema.inputType.toLowerCase()) {
case "date":
dt = this.schema.format ? fecha.parse(value, this.schema.format) : new Date(value);
return fecha.format(dt, "YYYY-MM-DD");
case "datetime":
dt = this.schema.format ? fecha.parse(value, this.schema.format) : new Date(value);
return fecha.format(dt, "YYYY-MM-DD HH:mm:ss");
case "datetime-local":
dt = this.schema.format ? fecha.parse(value, this.schema.format) : new Date(value);
return fecha.format(dt, "YYYY-MM-DDTHH:mm:ss");
case "number":
case "range":
// debounce
return (newValue, oldValue) => {
this.debouncedFormatFunc(value, oldValue);
};
}
}
return value;
},
formatValueToModel(value) {
if (value != null) {
let m;
switch (this.schema.inputType) {
case "date":
m = fecha.parse(value, "YYYY-MM-DD");
if (m !== false) {
if (this.schema.format)
value = fecha.format(m, this.schema.format);
else
value = m.valueOf();
}
break;
case "datetime":
m = fecha.parse(value, "YYYY-MM-DD HH:mm:ss");
if (m !== false) {
if (this.schema.format)
value = fecha.format(m, this.schema.format);
else
value = m.valueOf();
}
break;
case "datetime-local":
m = fecha.parse(value, "YYYY-MM-DDTHH:mm:ss");
if (m !== false) {
if (this.schema.format)
value = fecha.format(m, this.schema.format);
else
value = m.valueOf();
}
break;
case "number":
return Number(value);
case "range":
return Number(value);
formatDatetimeToModel(newValue, oldValue) {
let defaultFormat = DATETIME_FORMATS[this.schema.inputType.toLowerCase()];
let m = fecha.parse(newValue, defaultFormat);
if (m !== false) {
if (this.schema.format) {
newValue = fecha.format(m, this.schema.format);
} else {
newValue = m.valueOf();
}
}
this.updateModelValue(newValue, oldValue);
},
formatNumberToModel(newValue, oldValue) {
if(!isNumber(newValue)) {
newValue = NaN;
}
this.updateModelValue(newValue, oldValue);
},
onInput($event) {
let value = $event.target.value;
switch(this.schema.inputType.toLowerCase()) {
case "number":
case "range":
if($event.target.valueAsNumber) {
value = $event.target.valueAsNumber;
}
break;
}
this.value = value;
},
onBlur() {
if(isFunction(this.debouncedFormatFunc)) {
this.debouncedFormatFunc.flush();
}
}
},
return value;
mounted () {
switch(this.schema.inputType.toLowerCase()) {
case "number":
case "range":
this.debouncedFormatFunc = debounce((newValue, oldValue) => {
this.formatNumberToModel(newValue, oldValue);
}
, DEBOUNCE_FORMAT_MS, {
trailing: true,
leading: false
});
break;
case "date":
case "datetime":
case "datetime-local":
// wait 1s before calling 'formatDatetimeToModel' to allow user to input data
this.debouncedFormatFunc = debounce((newValue, oldValue) => {
this.formatDatetimeToModel(newValue, oldValue);
}
, DEBOUNCE_FORMAT_MS, {
trailing: true,
leading: false
});
break;
}
},
created () {
if(this.schema.inputType == "file")
if(this.schema.inputType.toLowerCase() == "file") {
console.warn("The 'file' type in input field is deprecated. Use 'file' field instead.");
}
}
};
Expand Down
14 changes: 10 additions & 4 deletions src/fields/core/fieldSelect.vue
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<template lang="pug">
select.form-control(v-model="value", :disabled="disabled", :name="schema.inputName", :id="getFieldID(schema)", :class="schema.fieldClasses")
option(v-if="!selectOptions.hideNoneSelectedText", :disabled="schema.required", :value="null", :selected="value == undefined") {{ selectOptions.noneSelectedText || "&lt;Nothing selected&gt;" }}
option(v-if="!selectOptions.hideNoneSelectedText", :disabled="schema.required", :value="null") {{ selectOptions.noneSelectedText || "&lt;Nothing selected&gt;" }}

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

<script>
import {isObject, find} from "lodash";
import {isObject, isNil, find} from "lodash";
import abstractField from "../abstractField";
export default {
Expand All @@ -27,10 +27,16 @@
return this.groupValues(values.apply(this, [this.model, this.schema]));
} else
return this.groupValues(values);
}
},
},
methods: {
formatValueToField(value) {
if(isNil(value)) {
return null;
}
return value;
},
groupValues(values){
let array = [];
Expand Down Expand Up @@ -123,7 +129,7 @@
} else {
return item;
}
}
},
}
};
</script>
Expand Down
Loading

0 comments on commit 19c4929

Please sign in to comment.