217 lines
7.5 KiB
JavaScript
217 lines
7.5 KiB
JavaScript
var _typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) { return typeof obj; } : function (obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; };
|
|
|
|
// Mixins
|
|
import Colorable from './colorable';
|
|
import { inject as RegistrableInject } from './registrable';
|
|
// Utilities
|
|
import { deepEqual } from '../util/helpers';
|
|
import { consoleError } from '../util/console';
|
|
import mixins from '../util/mixins';
|
|
/* @vue/component */
|
|
export default mixins(Colorable, RegistrableInject('form')).extend({
|
|
name: 'validatable',
|
|
props: {
|
|
disabled: Boolean,
|
|
error: Boolean,
|
|
errorCount: {
|
|
type: [Number, String],
|
|
default: 1
|
|
},
|
|
errorMessages: {
|
|
type: [String, Array],
|
|
default: function _default() {
|
|
return [];
|
|
}
|
|
},
|
|
messages: {
|
|
type: [String, Array],
|
|
default: function _default() {
|
|
return [];
|
|
}
|
|
},
|
|
readonly: Boolean,
|
|
rules: {
|
|
type: Array,
|
|
default: function _default() {
|
|
return [];
|
|
}
|
|
},
|
|
success: Boolean,
|
|
successMessages: {
|
|
type: [String, Array],
|
|
default: function _default() {
|
|
return [];
|
|
}
|
|
},
|
|
validateOnBlur: Boolean,
|
|
value: { required: false }
|
|
},
|
|
data: function data() {
|
|
return {
|
|
errorBucket: [],
|
|
hasColor: false,
|
|
hasFocused: false,
|
|
hasInput: false,
|
|
isFocused: false,
|
|
isResetting: false,
|
|
lazyValue: this.value,
|
|
valid: false
|
|
};
|
|
},
|
|
|
|
computed: {
|
|
hasError: function hasError() {
|
|
return this.internalErrorMessages.length > 0 || this.errorBucket.length > 0 || this.error;
|
|
},
|
|
|
|
// TODO: Add logic that allows the user to enable based
|
|
// upon a good validation
|
|
hasSuccess: function hasSuccess() {
|
|
return this.internalSuccessMessages.length > 0 || this.success;
|
|
},
|
|
externalError: function externalError() {
|
|
return this.internalErrorMessages.length > 0 || this.error;
|
|
},
|
|
hasMessages: function hasMessages() {
|
|
return this.validationTarget.length > 0;
|
|
},
|
|
hasState: function hasState() {
|
|
return this.hasSuccess || this.shouldValidate && this.hasError;
|
|
},
|
|
internalErrorMessages: function internalErrorMessages() {
|
|
return this.genInternalMessages(this.errorMessages);
|
|
},
|
|
internalMessages: function internalMessages() {
|
|
return this.genInternalMessages(this.messages);
|
|
},
|
|
internalSuccessMessages: function internalSuccessMessages() {
|
|
return this.genInternalMessages(this.successMessages);
|
|
},
|
|
|
|
internalValue: {
|
|
get: function get() {
|
|
return this.lazyValue;
|
|
},
|
|
set: function set(val) {
|
|
this.lazyValue = val;
|
|
this.$emit('input', val);
|
|
}
|
|
},
|
|
shouldValidate: function shouldValidate() {
|
|
if (this.externalError) return true;
|
|
if (this.isResetting) return false;
|
|
return this.validateOnBlur ? this.hasFocused && !this.isFocused : this.hasInput || this.hasFocused;
|
|
},
|
|
validations: function validations() {
|
|
return this.validationTarget.slice(0, Number(this.errorCount));
|
|
},
|
|
validationState: function validationState() {
|
|
if (this.hasError && this.shouldValidate) return 'error';
|
|
if (this.hasSuccess) return 'success';
|
|
if (this.hasColor) return this.color;
|
|
return undefined;
|
|
},
|
|
validationTarget: function validationTarget() {
|
|
if (this.internalErrorMessages.length > 0) {
|
|
return this.internalErrorMessages;
|
|
} else if (this.successMessages.length > 0) {
|
|
return this.internalSuccessMessages;
|
|
} else if (this.messages.length > 0) {
|
|
return this.internalMessages;
|
|
} else if (this.shouldValidate) {
|
|
return this.errorBucket;
|
|
} else return [];
|
|
}
|
|
},
|
|
watch: {
|
|
rules: {
|
|
handler: function handler(newVal, oldVal) {
|
|
if (deepEqual(newVal, oldVal)) return;
|
|
this.validate();
|
|
},
|
|
|
|
deep: true
|
|
},
|
|
internalValue: function internalValue() {
|
|
// If it's the first time we're setting input,
|
|
// mark it with hasInput
|
|
this.hasInput = true;
|
|
this.validateOnBlur || this.$nextTick(this.validate);
|
|
},
|
|
isFocused: function isFocused(val) {
|
|
// Should not check validation
|
|
// if disabled or readonly
|
|
if (!val && !this.disabled && !this.readonly) {
|
|
this.hasFocused = true;
|
|
this.validateOnBlur && this.validate();
|
|
}
|
|
},
|
|
isResetting: function isResetting() {
|
|
var _this = this;
|
|
|
|
setTimeout(function () {
|
|
_this.hasInput = false;
|
|
_this.hasFocused = false;
|
|
_this.isResetting = false;
|
|
_this.validate();
|
|
}, 0);
|
|
},
|
|
hasError: function hasError(val) {
|
|
if (this.shouldValidate) {
|
|
this.$emit('update:error', val);
|
|
}
|
|
},
|
|
value: function value(val) {
|
|
this.lazyValue = val;
|
|
}
|
|
},
|
|
beforeMount: function beforeMount() {
|
|
this.validate();
|
|
},
|
|
created: function created() {
|
|
this.form && this.form.register(this);
|
|
},
|
|
beforeDestroy: function beforeDestroy() {
|
|
this.form && this.form.unregister(this);
|
|
},
|
|
|
|
methods: {
|
|
genInternalMessages: function genInternalMessages(messages) {
|
|
if (!messages) return [];else if (Array.isArray(messages)) return messages;else return [messages];
|
|
},
|
|
|
|
/** @public */
|
|
reset: function reset() {
|
|
this.isResetting = true;
|
|
this.internalValue = Array.isArray(this.internalValue) ? [] : undefined;
|
|
},
|
|
|
|
/** @public */
|
|
resetValidation: function resetValidation() {
|
|
this.isResetting = true;
|
|
},
|
|
|
|
/** @public */
|
|
validate: function validate() {
|
|
var force = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
|
|
var value = arguments[1];
|
|
|
|
var errorBucket = [];
|
|
value = value || this.internalValue;
|
|
if (force) this.hasInput = this.hasFocused = true;
|
|
for (var index = 0; index < this.rules.length; index++) {
|
|
var rule = this.rules[index];
|
|
var valid = typeof rule === 'function' ? rule(value) : rule;
|
|
if (typeof valid === 'string') {
|
|
errorBucket.push(valid);
|
|
} else if (typeof valid !== 'boolean') {
|
|
consoleError('Rules should return a string or boolean, received \'' + (typeof valid === 'undefined' ? 'undefined' : _typeof(valid)) + '\' instead', this);
|
|
}
|
|
}
|
|
this.errorBucket = errorBucket;
|
|
this.valid = errorBucket.length === 0;
|
|
return this.valid;
|
|
}
|
|
}
|
|
});
|
|
//# sourceMappingURL=validatable.js.map
|