2020-10-10 22:45:28 +03:00
|
|
|
|
import { VueConstructor } from 'vue'
|
2020-10-11 11:41:32 +03:00
|
|
|
|
|
2020-10-22 10:47:53 +03:00
|
|
|
|
import { has } from '@/libs/utils'
|
|
|
|
|
import rules from '@/validation/rules'
|
|
|
|
|
import messages from '@/validation/messages'
|
2020-10-14 08:43:17 +03:00
|
|
|
|
import merge from '@/utils/merge'
|
2020-10-09 22:58:28 +03:00
|
|
|
|
|
2020-10-10 22:45:28 +03:00
|
|
|
|
import FormularioForm from '@/FormularioForm.vue'
|
|
|
|
|
import FormularioInput from '@/FormularioInput.vue'
|
2020-10-11 11:41:32 +03:00
|
|
|
|
import FormularioGrouping from '@/FormularioGrouping.vue'
|
2020-10-10 22:45:28 +03:00
|
|
|
|
|
2020-10-22 16:37:57 +03:00
|
|
|
|
import {
|
|
|
|
|
ValidationContext,
|
|
|
|
|
ValidationRule,
|
|
|
|
|
} from '@/validation/types'
|
2020-10-10 22:45:28 +03:00
|
|
|
|
|
|
|
|
|
interface FormularioOptions {
|
2020-10-18 16:41:57 +03:00
|
|
|
|
rules?: any;
|
|
|
|
|
validationMessages?: any;
|
2020-10-10 22:45:28 +03:00
|
|
|
|
}
|
2020-05-22 14:22:56 +03:00
|
|
|
|
|
2020-10-09 22:58:28 +03:00
|
|
|
|
// noinspection JSUnusedGlobalSymbols
|
2020-05-22 14:22:56 +03:00
|
|
|
|
/**
|
|
|
|
|
* The base formulario library.
|
|
|
|
|
*/
|
2020-10-11 11:41:32 +03:00
|
|
|
|
export default class Formulario {
|
2020-10-10 22:45:28 +03:00
|
|
|
|
public options: FormularioOptions
|
|
|
|
|
public idRegistry: { [name: string]: number }
|
|
|
|
|
|
2020-05-22 14:22:56 +03:00
|
|
|
|
constructor () {
|
2020-10-22 10:47:53 +03:00
|
|
|
|
this.options = {
|
2020-05-22 14:22:56 +03:00
|
|
|
|
rules,
|
2020-10-22 10:47:53 +03:00
|
|
|
|
validationMessages: messages,
|
2020-05-22 14:22:56 +03:00
|
|
|
|
}
|
|
|
|
|
this.idRegistry = {}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Install vue formulario, and register it’s components.
|
|
|
|
|
*/
|
2020-10-22 10:47:53 +03:00
|
|
|
|
install (Vue: VueConstructor, options?: FormularioOptions): void {
|
2020-05-22 14:22:56 +03:00
|
|
|
|
Vue.prototype.$formulario = this
|
2020-10-22 16:37:57 +03:00
|
|
|
|
Vue.component('FormularioForm', FormularioForm)
|
|
|
|
|
Vue.component('FormularioGrouping', FormularioGrouping)
|
|
|
|
|
Vue.component('FormularioInput', FormularioInput)
|
|
|
|
|
|
2020-05-22 14:22:56 +03:00
|
|
|
|
this.extend(options || {})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Produce a deterministically generated id based on the sequence by which it
|
|
|
|
|
* was requested. This should be *theoretically* the same SSR as client side.
|
|
|
|
|
* However, SSR and deterministic ids can be very challenging, so this
|
|
|
|
|
* implementation is open to community review.
|
|
|
|
|
*/
|
2020-10-22 10:47:53 +03:00
|
|
|
|
nextId (vm: Vue): string {
|
2020-05-22 14:22:56 +03:00
|
|
|
|
const path = vm.$route && vm.$route.path ? vm.$route.path : false
|
|
|
|
|
const pathPrefix = path ? vm.$route.path.replace(/[/\\.\s]/g, '-') : 'global'
|
2020-10-14 15:15:39 +03:00
|
|
|
|
if (!has(this.idRegistry, pathPrefix)) {
|
2020-05-22 14:22:56 +03:00
|
|
|
|
this.idRegistry[pathPrefix] = 0
|
|
|
|
|
}
|
2020-10-22 16:37:57 +03:00
|
|
|
|
return `formulario-${pathPrefix}-${++this.idRegistry[pathPrefix]}`
|
2020-05-22 14:22:56 +03:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Given a set of options, apply them to the pre-existing options.
|
|
|
|
|
*/
|
2020-10-22 10:47:53 +03:00
|
|
|
|
extend (extendWith: FormularioOptions): Formulario {
|
2020-05-22 14:22:56 +03:00
|
|
|
|
if (typeof extendWith === 'object') {
|
2020-10-22 10:47:53 +03:00
|
|
|
|
this.options = merge(this.options, extendWith)
|
2020-05-22 14:22:56 +03:00
|
|
|
|
return this
|
|
|
|
|
}
|
|
|
|
|
throw new Error(`VueFormulario extend() should be passed an object (was ${typeof extendWith})`)
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Get validation rules by merging any passed in with global rules.
|
|
|
|
|
*/
|
2020-10-22 10:47:53 +03:00
|
|
|
|
rules (rules: Record<string, ValidationRule> = {}): () => Record<string, ValidationRule> {
|
2020-05-22 14:22:56 +03:00
|
|
|
|
return { ...this.options.rules, ...rules }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/**
|
|
|
|
|
* Get the validation message for a particular error.
|
|
|
|
|
*/
|
2020-10-22 10:47:53 +03:00
|
|
|
|
validationMessage (rule: string, context: ValidationContext, vm: Vue): string {
|
2020-10-10 22:45:28 +03:00
|
|
|
|
if (has(this.options.validationMessages, rule)) {
|
|
|
|
|
return this.options.validationMessages[rule](vm, context)
|
2020-05-25 12:49:49 +03:00
|
|
|
|
} else {
|
2020-10-10 22:45:28 +03:00
|
|
|
|
return this.options.validationMessages.default(vm, context)
|
2020-05-25 12:49:49 +03:00
|
|
|
|
}
|
2020-05-22 14:22:56 +03:00
|
|
|
|
}
|
|
|
|
|
}
|