refactor: Moved components options to components classes, additional typehints

src/FormularioForm.vue

@@ -17,10 +17,12 @@ import {
     Watch,
 } from 'vue-property-decorator'
 import { arrayify, getNested, has, setNested, shallowEqualObjects } from './libs/utils'
+import { ObjectType } from '@/common.types'
 import Registry from './libs/registry'
 import FormSubmission from './FormSubmission'
+import FormularioInput from '@/FormularioInput.vue'
 
-@Component()
+@Component
 export default class FormularioForm extends Vue {
     @Provide() formularioFieldValidation (errorObject) {
         return this.$emit('validation', errorObject)
@@ -37,16 +39,16 @@ export default class FormularioForm extends Vue {
         this.errorObservers = this.errorObservers.filter(obs => obs.callback !== observer)
     }
 
-    @Prop({
-        type: [String, Boolean],
-        default: false
-    }) public readonly name!: string | boolean
-
     @Model('input', {
         type: Object,
         default: () => ({})
     }) readonly formularioValue!: Object
 
+    @Prop({
+        type: [String, Boolean],
+        default: false
+    }) public readonly name!: string | boolean
+
     @Prop({
         type: [Object, Boolean],
         default: false
@@ -173,8 +175,7 @@ export default class FormularioForm extends Vue {
         this.$formulario.deregister(this)
     }
 
-    // @TODO: Check FormularioForm, seems need an interface
+    public register (field: string, component: FormularioInput) {
-    public register (field: string, component: FormularioForm) {
         this.registry.register(field, component)
     }
 
@@ -229,6 +230,7 @@ export default class FormularioForm extends Vue {
 
     setFieldValue (field, value) {
         if (value === undefined) {
+            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             const { [field]: value, ...proxy } = this.proxy
             this.proxy = proxy
         } else {
@@ -238,7 +240,7 @@ export default class FormularioForm extends Vue {
     }
 
     hasValidationErrors () {
-        return Promise.all(this.registry.reduce((resolvers, cmp, name) => {
+        return Promise.all(this.registry.reduce((resolvers, cmp) => {
             resolvers.push(cmp.performValidation() && cmp.getValidationErrors())
             return resolvers
         }, [])).then(errorObjects => errorObjects.some(item => item.hasErrors))
@@ -259,13 +261,15 @@ export default class FormularioForm extends Vue {
         })
     }
 
-    setValues (values) {
+    setValues (values: ObjectType) {
         // Collect all keys, existing and incoming
         const keys = Array.from(new Set(Object.keys(values).concat(Object.keys(this.proxy))))
         keys.forEach(field => {
+            const fieldComponent = this.registry.get(field) as FormularioInput
+
             if (this.registry.has(field) &&
                 !shallowEqualObjects(getNested(values, field), getNested(this.proxy, field)) &&
-                !shallowEqualObjects(getNested(values, field), this.registry.get(field).proxy)
+                !shallowEqualObjects(getNested(values, field), fieldComponent.proxy)
             ) {
                 this.setFieldValue(field, getNested(values, field))
                 this.registry.get(field).context.model = getNested(values, field)

src/FormularioGrouping.vue

@@ -9,25 +9,24 @@
 
 <script lang="ts">
 import Vue from 'vue'
-import { Component, Prop } from 'vue-property-decorator'
+import {
+    Component,
+    Inject,
+    Prop,
+    Provide,
+} from 'vue-property-decorator'
 
-@Component({
+@Component
-    provide () {
-        return {
-            path: this.groupPath,
-        }
-    },
-
-    inject: ['path'],
-})
 export default class FormularioGrouping extends Vue {
+    @Inject({ default: '' }) path!: string
+
     @Prop({ required: true })
     readonly name!: string
 
     @Prop({ default: false })
     readonly isArrayItem!: boolean
 
-    get groupPath () {
+    @Provide('path') get groupPath (): string {
         if (this.isArrayItem) {
             return `${this.path}[${this.name}]`
         }

src/FormularioInput.vue

@@ -34,29 +34,15 @@ const ERROR_BEHAVIOR = {
     SUBMIT: 'submit',
 }
 
-@Component({
+@Component({ inheritAttrs: false })
-    inheritAttrs: false,
-
-    props: {
-        imageBehavior: {
-            type: String,
-            default: 'preview'
-        },
-
-        uploader: {
-            type: [Function, Object, Boolean],
-            default: false
-        },
-    },
-})
 export default class FormularioInput extends Vue {
-    @Inject({ default: undefined }) formularioSetter!: Function | undefined
+    @Inject({ default: undefined }) formularioSetter!: Function|undefined
     @Inject({ default: () => () => ({}) }) formularioFieldValidation!: Function
-    @Inject({ default: undefined }) formularioRegister!: Function | undefined
+    @Inject({ default: undefined }) formularioRegister!: Function|undefined
-    @Inject({ default: undefined }) formularioDeregister!: Function | undefined
+    @Inject({ default: undefined }) formularioDeregister!: Function|undefined
     @Inject({ default: () => () => ({}) }) getFormValues!: Function
-    @Inject({ default: undefined }) observeErrors!: Function | undefined
+    @Inject({ default: undefined }) observeErrors!: Function|undefined
-    @Inject({ default: undefined }) removeErrorObserver!: Function | undefined
+    @Inject({ default: undefined }) removeErrorObserver!: Function|undefined
     @Inject({ default: '' }) path!: string
 
     @Provide() formularioRegisterRule = this.registerRule
@@ -69,10 +55,10 @@ export default class FormularioInput extends Vue {
     @Prop({
         type: [String, Number, Boolean],
         default: false,
-    }) id!: string | number | boolean
+    }) id!: string|number|boolean
 
     @Prop({ default: 'text' }) type!: string
-    @Prop({ required: true }) name: string | boolean
+    @Prop({ required: true }) name: string|boolean
     @Prop({ default: false }) value!: any
 
     @Prop({
@@ -83,7 +69,7 @@ export default class FormularioInput extends Vue {
     @Prop({
         type: [String, Boolean],
         default: false,
-    }) validationName!: string | boolean
+    }) validationName!: string|boolean
 
     @Prop({
         type: Object,
@@ -98,7 +84,7 @@ export default class FormularioInput extends Vue {
     @Prop({
         type: [Array, String, Boolean],
         default: false,
-    }) errors!: [] | string | boolean
+    }) errors!: []|string|boolean
 
     @Prop({
         type: String,
@@ -108,9 +94,11 @@ export default class FormularioInput extends Vue {
 
     @Prop({ default: false }) showErrors!: boolean
     @Prop({ default: false }) disableErrors!: boolean
-    @Prop({ default: false }) uploadUrl!: string | boolean
-    @Prop({ default: 'live' }) uploadBehavior!: string
     @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 = {}
@@ -119,7 +107,7 @@ export default class FormularioInput extends Vue {
     behavioralErrorVisibility: boolean = this.errorBehavior === 'live'
     formShouldShowErrors: boolean = false
     validationErrors: [] = []
-    pendingValidation: Promise = Promise.resolve()
+    pendingValidation: Promise<any> = Promise.resolve()
     // These registries are used for injected messages registrants only (mostly internal).
     ruleRegistry: [] = []
     messageRegistry: ObjectType = {}

src/libs/registry.ts

@@ -117,7 +117,7 @@ export default class Registry {
      * @param {function} callback
      * @param accumulator
      */
-    reduce (callback: Function, accumulator: any) {
+    reduce<U> (callback: Function, accumulator: U): U {
         this.registry.forEach((component, field) => {
             accumulator = callback(accumulator, component, field)
         })