1
0
mirror of synced 2024-11-22 21:36:04 +03:00
vue-formulario/src/Formulario.ts

94 lines
2.9 KiB
TypeScript
Raw Normal View History

import { VueConstructor } from 'vue'
import { has } from '@/libs/utils'
import rules from '@/validation/rules'
import messages from '@/validation/messages'
import merge from '@/utils/merge'
2020-10-09 22:58:28 +03:00
import FormularioForm from '@/FormularioForm.vue'
import FormularioInput from '@/FormularioInput.vue'
import FormularioGrouping from '@/FormularioGrouping.vue'
import {
ValidationContext,
ValidationRule,
} from '@/validation/types'
interface FormularioOptions {
rules?: any;
validationMessages?: any;
}
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.
*/
export default class Formulario {
public options: FormularioOptions
public idRegistry: { [name: string]: number }
2020-05-22 14:22:56 +03:00
constructor () {
this.options = {
2020-05-22 14:22:56 +03:00
rules,
validationMessages: messages,
2020-05-22 14:22:56 +03:00
}
this.idRegistry = {}
}
/**
* Install vue formulario, and register its components.
*/
install (Vue: VueConstructor, options?: FormularioOptions): void {
2020-05-22 14:22:56 +03:00
Vue.prototype.$formulario = this
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.
*/
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'
if (!has(this.idRegistry, pathPrefix)) {
2020-05-22 14:22:56 +03:00
this.idRegistry[pathPrefix] = 0
}
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.
*/
extend (extendWith: FormularioOptions): Formulario {
2020-05-22 14:22:56 +03:00
if (typeof extendWith === 'object') {
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.
*/
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.
*/
validationMessage (rule: string, context: ValidationContext, vm: Vue): string {
if (has(this.options.validationMessages, rule)) {
return this.options.validationMessages[rule](vm, context)
} else {
return this.options.validationMessages.default(vm, context)
}
2020-05-22 14:22:56 +03:00
}
}