523 lines
17 KiB
Vue
523 lines
17 KiB
Vue
<template>
|
||
<div
|
||
class="formulario-input"
|
||
:data-has-errors="hasErrors"
|
||
:data-is-showing-errors="hasVisibleErrors"
|
||
:data-type="type"
|
||
>
|
||
<slot
|
||
:id="id"
|
||
:context="context"
|
||
:errors="errors"
|
||
:validationErrors="validationErrors"
|
||
/>
|
||
</div>
|
||
</template>
|
||
|
||
<script lang="ts">
|
||
import Vue from 'vue'
|
||
import {
|
||
Component,
|
||
Inject,
|
||
Model,
|
||
Prop,
|
||
Provide,
|
||
Watch,
|
||
} from 'vue-property-decorator'
|
||
import { shallowEqualObjects, parseRules, snakeToCamel, has, arrayify, groupBails } from './libs/utils'
|
||
import { ValidationError } from '@/validation/types'
|
||
import { ObjectType } from '@/common.types'
|
||
|
||
const ERROR_BEHAVIOR = {
|
||
BLUR: 'blur',
|
||
LIVE: 'live',
|
||
SUBMIT: 'submit',
|
||
}
|
||
|
||
@Component({ inheritAttrs: false })
|
||
export default class FormularioInput extends Vue {
|
||
@Inject({ default: undefined }) formularioSetter!: Function|undefined
|
||
@Inject({ default: () => () => ({}) }) formularioFieldValidation!: Function
|
||
@Inject({ default: undefined }) formularioRegister!: Function|undefined
|
||
@Inject({ default: undefined }) formularioDeregister!: Function|undefined
|
||
@Inject({ default: () => () => ({}) }) getFormValues!: Function
|
||
@Inject({ default: undefined }) observeErrors!: Function|undefined
|
||
@Inject({ default: undefined }) removeErrorObserver!: Function|undefined
|
||
@Inject({ default: '' }) path!: string
|
||
|
||
@Provide() formularioRegisterRule = this.registerRule
|
||
@Provide() formularioRemoveRule = this.removeRule
|
||
|
||
@Model('input', {
|
||
default: '',
|
||
}) formularioValue: any
|
||
|
||
@Prop({
|
||
type: [String, Number, Boolean],
|
||
default: false,
|
||
}) id!: string|number|boolean
|
||
|
||
@Prop({ default: 'text' }) type!: string
|
||
@Prop({ required: true }) name: string|boolean
|
||
@Prop({ default: false }) value!: any
|
||
|
||
@Prop({
|
||
type: [String, Boolean, Array],
|
||
default: false,
|
||
}) validation
|
||
|
||
@Prop({
|
||
type: [String, Boolean],
|
||
default: false,
|
||
}) validationName!: string|boolean
|
||
|
||
@Prop({
|
||
type: Object,
|
||
default: () => ({}),
|
||
}) validationRules!: ObjectType
|
||
|
||
@Prop({
|
||
type: Object,
|
||
default: () => ({}),
|
||
}) validationMessages!: ObjectType
|
||
|
||
@Prop({
|
||
type: [Array, String, Boolean],
|
||
default: false,
|
||
}) errors!: []|string|boolean
|
||
|
||
@Prop({
|
||
type: String,
|
||
default: ERROR_BEHAVIOR.BLUR,
|
||
validator: value => [ERROR_BEHAVIOR.BLUR, ERROR_BEHAVIOR.LIVE, ERROR_BEHAVIOR.SUBMIT].includes(value)
|
||
}) errorBehavior!: string
|
||
|
||
@Prop({ default: false }) showErrors!: boolean
|
||
@Prop({ default: false }) disableErrors!: boolean
|
||
@Prop({ default: true }) preventWindowDrops!: boolean
|
||
@Prop({ default: 'preview' }) imageBehavior!: string
|
||
@Prop({ default: false }) uploader!: Function|Object|boolean
|
||
@Prop({ default: false }) uploadUrl!: string|boolean
|
||
@Prop({ default: 'live' }) uploadBehavior!: string
|
||
|
||
defaultId: string = this.$formulario.nextId(this)
|
||
localAttributes: ObjectType = {}
|
||
localErrors: ValidationError[] = []
|
||
proxy: ObjectType = this.getInitialValue()
|
||
behavioralErrorVisibility: boolean = this.errorBehavior === 'live'
|
||
formShouldShowErrors: boolean = false
|
||
validationErrors: [] = []
|
||
pendingValidation: Promise<any> = Promise.resolve()
|
||
// These registries are used for injected messages registrants only (mostly internal).
|
||
ruleRegistry: [] = []
|
||
messageRegistry: ObjectType = {}
|
||
|
||
get context () {
|
||
return this.defineModel({
|
||
attributes: this.elementAttributes,
|
||
blurHandler: this.blurHandler.bind(this),
|
||
disableErrors: this.disableErrors,
|
||
errors: this.explicitErrors,
|
||
allErrors: this.allErrors,
|
||
formShouldShowErrors: this.formShouldShowErrors,
|
||
getValidationErrors: this.getValidationErrors.bind(this),
|
||
hasGivenName: this.hasGivenName,
|
||
hasValidationErrors: this.hasValidationErrors.bind(this),
|
||
help: this.help,
|
||
id: this.id || this.defaultId,
|
||
imageBehavior: this.imageBehavior,
|
||
limit: this.limit,
|
||
name: this.nameOrFallback,
|
||
performValidation: this.performValidation.bind(this),
|
||
preventWindowDrops: this.preventWindowDrops,
|
||
repeatable: this.repeatable,
|
||
setErrors: this.setErrors.bind(this),
|
||
showValidationErrors: this.showValidationErrors,
|
||
uploadBehavior: this.uploadBehavior,
|
||
uploadUrl: this.mergedUploadUrl,
|
||
uploader: this.uploader || this.$formulario.getUploader(),
|
||
validationErrors: this.validationErrors,
|
||
value: this.value,
|
||
visibleValidationErrors: this.visibleValidationErrors,
|
||
})
|
||
}
|
||
|
||
get parsedValidationRules () {
|
||
const parsedValidationRules = {}
|
||
Object.keys(this.validationRules).forEach(key => {
|
||
parsedValidationRules[snakeToCamel(key)] = this.validationRules[key]
|
||
})
|
||
return parsedValidationRules
|
||
}
|
||
|
||
get messages () {
|
||
const messages = {}
|
||
Object.keys(this.validationMessages).forEach((key) => {
|
||
messages[snakeToCamel(key)] = this.validationMessages[key]
|
||
})
|
||
Object.keys(this.messageRegistry).forEach((key) => {
|
||
messages[snakeToCamel(key)] = this.messageRegistry[key]
|
||
})
|
||
return messages
|
||
}
|
||
|
||
/**
|
||
* Reducer for attributes that will be applied to each core input element.
|
||
*/
|
||
get elementAttributes () {
|
||
const attrs = Object.assign({}, this.localAttributes)
|
||
// pass the ID prop through to the root element
|
||
if (this.id) {
|
||
attrs.id = this.id
|
||
} else {
|
||
attrs.id = this.defaultId
|
||
}
|
||
// pass an explicitly given name prop through to the root element
|
||
if (this.hasGivenName) {
|
||
attrs.name = this.name
|
||
}
|
||
|
||
// If there is help text, have this element be described by it.
|
||
if (this.help) {
|
||
attrs['aria-describedby'] = `${attrs.id}-help`
|
||
}
|
||
|
||
return attrs
|
||
}
|
||
|
||
/**
|
||
* Return the element’s name, or select a fallback.
|
||
*/
|
||
get nameOrFallback () {
|
||
return this.path !== '' ? `${this.path}.${this.name}` : this.name
|
||
}
|
||
|
||
/**
|
||
* Determine if an input has a user-defined name.
|
||
*/
|
||
get hasGivenName () {
|
||
return typeof this.name !== 'boolean'
|
||
}
|
||
|
||
/**
|
||
* The validation label to use.
|
||
*/
|
||
get mergedValidationName () {
|
||
return this.validationName || this.name
|
||
}
|
||
|
||
/**
|
||
* Use the uploadURL on the input if it exists, otherwise use the uploadURL
|
||
* that is defined as a plugin option.
|
||
*/
|
||
get mergedUploadUrl () {
|
||
return this.uploadUrl || this.$formulario.getUploadUrl()
|
||
}
|
||
|
||
/**
|
||
* Does this computed property have errors
|
||
*/
|
||
get hasErrors () {
|
||
return this.allErrors.length > 0
|
||
}
|
||
|
||
/**
|
||
* Returns if form has actively visible errors (of any kind)
|
||
*/
|
||
get hasVisibleErrors () {
|
||
return ((this.validationErrors && this.showValidationErrors) || !!this.explicitErrors.length)
|
||
}
|
||
|
||
/**
|
||
* The merged errors computed property.
|
||
* Each error is an object with fields message (translated message), rule (rule name) and context
|
||
*/
|
||
get allErrors (): ValidationError[] {
|
||
return [
|
||
...this.explicitErrors,
|
||
...arrayify(this.validationErrors)
|
||
]
|
||
}
|
||
|
||
/**
|
||
* All of the currently visible validation errors (does not include error handling)
|
||
*/
|
||
get visibleValidationErrors () {
|
||
return (this.showValidationErrors && this.validationErrors.length) ? this.validationErrors : []
|
||
}
|
||
|
||
/**
|
||
* These are errors we that have been explicity passed to us.
|
||
*/
|
||
get explicitErrors (): ValidationError[] {
|
||
return [
|
||
...arrayify(this.errors),
|
||
...this.localErrors,
|
||
...arrayify(this.error),
|
||
].map(message => ({ rule: null, context: null, message }))
|
||
}
|
||
|
||
/**
|
||
* Determines if this formulario element is v-modeled or not.
|
||
*/
|
||
get isVmodeled (): boolean {
|
||
return !!(Object.prototype.hasOwnProperty.call(this.$options.propsData, 'formularioValue') &&
|
||
this._events &&
|
||
Array.isArray(this._events.input) &&
|
||
this._events.input.length)
|
||
}
|
||
|
||
/**
|
||
* Determines if the field should show it's error (if it has one)
|
||
*/
|
||
get showValidationErrors (): boolean {
|
||
return this.showErrors || this.formShouldShowErrors || this.behavioralErrorVisibility
|
||
}
|
||
|
||
@Watch('$attrs', { deep: true })
|
||
onAttrsChanged (value) {
|
||
this.updateLocalAttributes(value)
|
||
}
|
||
|
||
@Watch('proxy')
|
||
onProxyChanged (newValue, oldValue) {
|
||
this.performValidation()
|
||
if (!this.isVmodeled && !shallowEqualObjects(newValue, oldValue)) {
|
||
this.context.model = newValue
|
||
}
|
||
}
|
||
|
||
@Watch('formularioValue')
|
||
onFormularioValueChanged (newValue, oldValue) {
|
||
if (this.isVmodeled && !shallowEqualObjects(newValue, oldValue)) {
|
||
this.context.model = newValue
|
||
}
|
||
}
|
||
|
||
@Watch('showValidationErrors', { immediate: true })
|
||
onShowValidationErrorsChanged (val) {
|
||
this.$emit('error-visibility', val)
|
||
}
|
||
|
||
created () {
|
||
this.applyInitialValue()
|
||
if (this.formularioRegister && typeof this.formularioRegister === 'function') {
|
||
this.formularioRegister(this.nameOrFallback, this)
|
||
}
|
||
if (!this.disableErrors && typeof this.observeErrors === 'function') {
|
||
this.observeErrors({ callback: this.setErrors, type: 'input', field: this.nameOrFallback })
|
||
}
|
||
this.updateLocalAttributes(this.$attrs)
|
||
this.performValidation()
|
||
}
|
||
|
||
// noinspection JSUnusedGlobalSymbols
|
||
beforeDestroy () {
|
||
if (!this.disableErrors && typeof this.removeErrorObserver === 'function') {
|
||
this.removeErrorObserver(this.setErrors)
|
||
}
|
||
if (typeof this.formularioDeregister === 'function') {
|
||
this.formularioDeregister(this.nameOrFallback)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Defines the model used throughout the existing context.
|
||
* @param {object} context
|
||
*/
|
||
defineModel (context) {
|
||
return Object.defineProperty(context, 'model', {
|
||
get: this.modelGetter.bind(this),
|
||
set: this.modelSetter.bind(this),
|
||
})
|
||
}
|
||
|
||
/**
|
||
* Get the value from a model.
|
||
*/
|
||
modelGetter () {
|
||
const model = this.isVmodeled ? 'formularioValue' : 'proxy'
|
||
if (this[model] === undefined) {
|
||
return ''
|
||
}
|
||
return this[model]
|
||
}
|
||
|
||
/**
|
||
* Set the value from a model.
|
||
*/
|
||
modelSetter (value) {
|
||
if (!shallowEqualObjects(value, this.proxy)) {
|
||
this.proxy = value
|
||
}
|
||
this.$emit('input', value)
|
||
if (this.context.name && typeof this.formularioSetter === 'function') {
|
||
this.formularioSetter(this.context.name, value)
|
||
}
|
||
}
|
||
|
||
/**
|
||
* Bound into the context object.
|
||
*/
|
||
blurHandler () {
|
||
this.$emit('blur')
|
||
if (this.errorBehavior === 'blur') {
|
||
this.behavioralErrorVisibility = true
|
||
}
|
||
}
|
||
|
||
getInitialValue () {
|
||
if (has(this.$options.propsData, 'value')) {
|
||
return this.value
|
||
} else if (has(this.$options.propsData, 'formularioValue')) {
|
||
return this.formularioValue
|
||
}
|
||
return ''
|
||
}
|
||
|
||
applyInitialValue () {
|
||
// This should only be run immediately on created and ensures that the
|
||
// proxy and the model are both the same before any additional registration.
|
||
if (!shallowEqualObjects(this.context.model, this.proxy)) {
|
||
this.context.model = this.proxy
|
||
}
|
||
}
|
||
|
||
updateLocalAttributes (value) {
|
||
if (!shallowEqualObjects(value, this.localAttributes)) {
|
||
this.localAttributes = value
|
||
}
|
||
}
|
||
|
||
performValidation () {
|
||
let rules = parseRules(this.validation, this.$formulario.rules(this.parsedValidationRules))
|
||
// Add in ruleRegistry rules. These are added directly via injection from
|
||
// children and not part of the standard validation rule set.
|
||
rules = this.ruleRegistry.length ? this.ruleRegistry.concat(rules) : rules
|
||
this.pendingValidation = this.runRules(rules)
|
||
.then(messages => this.didValidate(messages))
|
||
return this.pendingValidation
|
||
}
|
||
|
||
runRules (rules) {
|
||
const run = ([rule, args, ruleName]) => {
|
||
let res = rule({
|
||
value: this.context.model,
|
||
getFormValues: this.getFormValues.bind(this),
|
||
name: this.context.name
|
||
}, ...args)
|
||
res = (res instanceof Promise) ? res : Promise.resolve(res)
|
||
return res.then(result => result ? false : this.getMessageObject(ruleName, args))
|
||
}
|
||
|
||
return new Promise(resolve => {
|
||
const resolveGroups = (groups, allMessages = []) => {
|
||
const ruleGroup = groups.shift()
|
||
if (Array.isArray(ruleGroup) && ruleGroup.length) {
|
||
Promise.all(ruleGroup.map(run))
|
||
.then(messages => messages.filter(m => !!m))
|
||
.then(messages => {
|
||
messages = Array.isArray(messages) ? messages : []
|
||
// The rule passed or its a non-bailing group, and there are additional groups to check, continue
|
||
if ((!messages.length || !ruleGroup.bail) && groups.length) {
|
||
return resolveGroups(groups, allMessages.concat(messages))
|
||
}
|
||
return resolve(allMessages.concat(messages))
|
||
})
|
||
} else {
|
||
resolve([])
|
||
}
|
||
}
|
||
resolveGroups(groupBails(rules))
|
||
})
|
||
}
|
||
|
||
didValidate (messages) {
|
||
const validationChanged = !shallowEqualObjects(messages, this.validationErrors)
|
||
this.validationErrors = messages
|
||
if (validationChanged) {
|
||
const errorObject = this.getErrorObject()
|
||
this.$emit('validation', errorObject)
|
||
if (this.formularioFieldValidation && typeof this.formularioFieldValidation === 'function') {
|
||
this.formularioFieldValidation(errorObject)
|
||
}
|
||
}
|
||
}
|
||
|
||
getMessageObject (ruleName, args) {
|
||
const context = {
|
||
args,
|
||
name: this.mergedValidationName,
|
||
value: this.context.model,
|
||
vm: this,
|
||
formValues: this.getFormValues()
|
||
}
|
||
const message = this.getMessageFunc(ruleName)(context)
|
||
|
||
return {
|
||
rule: ruleName,
|
||
context,
|
||
message,
|
||
}
|
||
}
|
||
|
||
getMessageFunc (ruleName) {
|
||
ruleName = snakeToCamel(ruleName)
|
||
if (this.messages && typeof this.messages[ruleName] !== 'undefined') {
|
||
switch (typeof this.messages[ruleName]) {
|
||
case 'function':
|
||
return this.messages[ruleName]
|
||
case 'string':
|
||
case 'boolean':
|
||
return () => this.messages[ruleName]
|
||
}
|
||
}
|
||
return (context) => this.$formulario.validationMessage(ruleName, context, this)
|
||
}
|
||
|
||
hasValidationErrors () {
|
||
return new Promise(resolve => {
|
||
this.$nextTick(() => {
|
||
this.pendingValidation.then(() => resolve(!!this.validationErrors.length))
|
||
})
|
||
})
|
||
}
|
||
|
||
getValidationErrors () {
|
||
return new Promise(resolve => {
|
||
this.$nextTick(() => this.pendingValidation.then(() => resolve(this.getErrorObject())))
|
||
})
|
||
}
|
||
|
||
getErrorObject () {
|
||
return {
|
||
name: this.context.nameOrFallback || this.context.name,
|
||
errors: this.validationErrors.filter(s => typeof s === 'object'),
|
||
hasErrors: !!this.validationErrors.length
|
||
}
|
||
}
|
||
|
||
setErrors (errors) {
|
||
this.localErrors = arrayify(errors)
|
||
}
|
||
|
||
registerRule (rule, args, ruleName, message = null) {
|
||
if (!this.ruleRegistry.some(r => r[2] === ruleName)) {
|
||
// These are the raw rule format since they will be used directly.
|
||
this.ruleRegistry.push([rule, args, ruleName])
|
||
if (message !== null) {
|
||
this.messageRegistry[ruleName] = message
|
||
}
|
||
}
|
||
}
|
||
|
||
removeRule (key) {
|
||
const ruleIndex = this.ruleRegistry.findIndex(r => r[2] === key)
|
||
if (ruleIndex >= 0) {
|
||
this.ruleRegistry.splice(ruleIndex, 1)
|
||
delete this.messageRegistry[key]
|
||
}
|
||
}
|
||
}
|
||
</script>
|