fix: Nested fields assignment, classes computed prop removed, additional typehints

src/FormularioForm.vue

@@ -1,8 +1,5 @@
 <template>
-    <form
-        :class="classes"
-        @submit.prevent="formSubmitted"
-    >
+    <form @submit.prevent="formSubmitted">
         <slot :errors="mergedFormErrors" />
     </form>
 </template>
@@ -78,13 +75,6 @@ export default class FormularioForm extends Vue {
 
     namedFieldErrors: Object = {}
 
-    get classes () {
-        return {
-            'formulario-form': true,
-            [`formulario-form--${this.name}`]: !!this.name
-        }
-    }
-
     get mergedFormErrors () {
         return this.formErrors.concat(this.namedErrors)
     }
@@ -118,7 +108,7 @@ export default class FormularioForm extends Vue {
     }
 
     get isVmodeled () {
-        return !!(Object.prototype.hasOwnProperty.call(this.$options.propsData, 'formularioValue') &&
+        return !!(has(this.$options.propsData, 'formularioValue') &&
             this._events &&
             Array.isArray(this._events.input) &&
             this._events.input.length)
@@ -248,14 +238,14 @@ export default class FormularioForm extends Vue {
 
     showErrors () {
         this.childrenShouldShowErrors = true
-        this.registry.map(input => {
+        this.registry.forEach((input: FormularioInput) => {
             input.formShouldShowErrors = true
         })
     }
 
     hideErrors () {
         this.childrenShouldShowErrors = false
-        this.registry.map(input => {
+        this.registry.forEach((input: FormularioInput) => {
             input.formShouldShowErrors = false
             input.behavioralErrorVisibility = false
         })
@@ -265,14 +255,26 @@ export default class FormularioForm extends Vue {
         // 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.hasNested(field)) {
+                this.registry.getNested(field).forEach((registryField, registryKey) => {
+                    if (
+                        !shallowEqualObjects(
+                            getNested(values, registryKey),
+                            getNested(this.proxy, registryKey)
+                        )
+                    ) {
+                        this.setFieldValue(registryKey, getNested(values, registryKey))
+                    }
 
-            if (this.registry.has(field) &&
-                !shallowEqualObjects(getNested(values, field), getNested(this.proxy, field)) &&
-                !shallowEqualObjects(getNested(values, field), fieldComponent.proxy)
-            ) {
-                this.setFieldValue(field, getNested(values, field))
-                this.registry.get(field).context.model = getNested(values, field)
+                    if (
+                        !shallowEqualObjects(
+                            getNested(values, registryKey),
+                            this.registry.get(registryKey).proxy
+                        )
+                    ) {
+                        this.registry.get(registryKey).context.model = getNested(values, registryKey)
+                    }
+                })
             }
         })
         this.applyInitialValues()

src/FormularioInput.vue

@@ -58,7 +58,7 @@ export default class FormularioInput extends Vue {
     }) 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({
@@ -359,7 +359,7 @@ export default class FormularioInput extends Vue {
     /**
      * Bound into the context object.
      */
-    blurHandler () {
+    blurHandler (): void {
         this.$emit('blur')
         if (this.errorBehavior === 'blur') {
             this.behavioralErrorVisibility = true
@@ -367,9 +367,9 @@ export default class FormularioInput extends Vue {
     }
 
     getInitialValue () {
-        if (has(this.$options.propsData, 'value')) {
+        if (has(this.$options.propsData as ObjectType, 'value')) {
             return this.value
-        } else if (has(this.$options.propsData, 'formularioValue')) {
+        } else if (has(this.$options.propsData as ObjectType, 'formularioValue')) {
             return this.formularioValue
         }
         return ''

src/libs/registry.ts

@@ -49,6 +49,19 @@ export default class Registry {
         return this.registry.has(key)
     }
 
+    /**
+     * Check if the registry has elements, that equals or nested given key
+     */
+    hasNested (key: string) {
+        for (const i of this.registry.keys()) {
+            if (i === key || i.includes(key + '.')) {
+                return true
+            }
+        }
+
+        return false
+    }
+
     /**
      * Get a particular registry value.
      */
@@ -56,15 +69,39 @@ export default class Registry {
         return this.registry.get(key)
     }
 
+    /**
+     * Get registry value for key or nested to given key
+     */
+    getNested (key: string) {
+        const result = new Map()
+
+        for (const i of this.registry.keys()) {
+            if (i === key || i.includes(key + '.')) {
+                result.set(i, this.registry.get(i))
+            }
+        }
+
+        return result
+    }
+
     /**
      * Map over the registry (recursively).
      */
-    map (callback: Function) {
+    map (mapper: Function) {
         const value = {}
-        this.registry.forEach((component, field) => Object.assign(value, { [field]: callback(component, field) }))
+        this.registry.forEach((component, field) => Object.assign(value, { [field]: mapper(component, field) }))
         return value
     }
 
+    /**
+     * Map over the registry (recursively).
+     */
+    forEach (callback: Function) {
+        this.registry.forEach((component, field) => {
+            callback(component, field)
+        })
+    }
+
     /**
      * Return the keys of the registry.
      */

src/libs/utils.ts

@@ -30,13 +30,12 @@ export function shallowEqualObjects (objA: any, objB: any) {
 
     const aKeys = Object.keys(objA)
     const bKeys = Object.keys(objB)
-    const len = aKeys.length
 
-    if (bKeys.length !== len) {
+    if (bKeys.length !== aKeys.length) {
         return false
     }
 
-    for (let i = 0; i < len; i++) {
+    for (let i = 0; i < aKeys.length; i++) {
         const key = aKeys[i]
 
         if (objA[key] !== objB[key]) {

test/unit/FormularioForm.test.js

@@ -308,12 +308,14 @@ describe('FormularioForm', () => {
             template: `
             <div>
                 <FormularioForm
+                    class="formulario-form formulario-form--login"
                     name="login"
                     v-slot="vSlot"
                 >
                     <span v-for="error in vSlot.errors">{{ error }}</span>
                 </FormularioForm>
                 <FormularioForm
+                    class="formulario-form formulario-form--register"
                     name="register"
                     v-slot="vSlot"
                 >
@@ -335,12 +337,14 @@ describe('FormularioForm', () => {
             template: `
             <div>
                 <FormularioForm
+                    class="formulario-form formulario-form--login"
                     name="login"
                     v-slot="vSlot"
                 >
                     <span v-for="error in vSlot.errors">{{ error }}</span>
                 </FormularioForm>
                 <FormularioForm
+                    class="formulario-form formulario-form--register"
                     name="register"
                     v-slot="vSlot"
                 >