From d39ca17e45cb5957bd9b9916b6e904993e660bc5 Mon Sep 17 00:00:00 2001
From: Zaytsev Kirill <zaytsev.cmath10@gmail.com>
Date: Thu, 30 Sep 2021 12:33:54 +0300
Subject: [PATCH] feat!: Added property "unregisterBehavior" to FormularioField
 to control value unset behavior on field component removal

Defaults to "none" which means value will not be unset and path will not be remove
---
 src/FormularioField.vue           |  5 ++++-
 src/FormularioForm.vue            | 11 ++++++++---
 src/enum.ts                       |  4 ++++
 test/unit/FormularioField.test.js | 33 +++++++++++++++++++++++++++++++
 4 files changed, 49 insertions(+), 4 deletions(-)
 create mode 100644 src/enum.ts

diff --git a/src/FormularioField.vue b/src/FormularioField.vue
index 28f93c7..86f15f2 100644
--- a/src/FormularioField.vue
+++ b/src/FormularioField.vue
@@ -32,6 +32,8 @@ import {
     Empty,
 } from '@/types'
 
+import { UNREGISTER_BEHAVIOR } from '@/enum'
+
 const VALIDATION_BEHAVIOR = {
     DEMAND: 'demand',
     LIVE: 'live',
@@ -72,6 +74,7 @@ export default class FormularioField extends Vue {
     @Prop({ default: () => <T, U>(value: U|T): U|T => value }) modelSetConverter!: ModelSetConverter
 
     @Prop({ default: 'div' }) tag!: string
+    @Prop({ default: UNREGISTER_BEHAVIOR.NONE }) unregisterBehavior!: string
 
     public proxy: unknown = this.hasModel ? this.value : ''
 
@@ -156,7 +159,7 @@ export default class FormularioField extends Vue {
      */
     public beforeDestroy (): void {
         if (typeof this.__FormularioForm_unregister === 'function') {
-            this.__FormularioForm_unregister(this.fullPath)
+            this.__FormularioForm_unregister(this.fullPath, this.unregisterBehavior)
         }
     }
 
diff --git a/src/FormularioForm.vue b/src/FormularioForm.vue
index 5fd9e87..63db09a 100644
--- a/src/FormularioForm.vue
+++ b/src/FormularioForm.vue
@@ -27,6 +27,8 @@ import {
 import { FormularioField } from '@/types'
 import { Violation } from '@/validation/validator'
 
+import { UNREGISTER_BEHAVIOR } from '@/enum'
+
 const update = (state: Record<string, unknown>, path: string, value: unknown): Record<string, unknown> => {
     if (value === undefined) {
         return unset(state, path) as Record<string, unknown>
@@ -88,11 +90,14 @@ export default class FormularioForm extends Vue {
     }
 
     @Provide('__FormularioForm_unregister')
-    private unregister (path: string): void {
+    private unregister (path: string, behavior: string): void {
         if (this.registry.has(path)) {
             this.registry.delete(path)
-            this.proxy = unset(this.proxy, path) as Record<string, unknown>
-            this.emitInput()
+
+            if (behavior === UNREGISTER_BEHAVIOR.UNSET) {
+                this.proxy = unset(this.proxy, path) as Record<string, unknown>
+                this.emitInput()
+            }
         }
     }
 
diff --git a/src/enum.ts b/src/enum.ts
new file mode 100644
index 0000000..795fc22
--- /dev/null
+++ b/src/enum.ts
@@ -0,0 +1,4 @@
+export const UNREGISTER_BEHAVIOR = {
+    NONE: 'none',
+    UNSET: 'unset',
+}
diff --git a/test/unit/FormularioField.test.js b/test/unit/FormularioField.test.js
index 6acc99f..68500d1 100644
--- a/test/unit/FormularioField.test.js
+++ b/test/unit/FormularioField.test.js
@@ -286,4 +286,37 @@ describe('FormularioField', () => {
             [{ date: new Date('2001-05-12') }],
         ])
     })
+
+    test('unregister behavior', async () => {
+        const wrapper = mount({
+            props: {
+                formExists: {
+                    type: Boolean,
+                    default: true,
+                }
+            },
+            data: () => ({ state: { fieldA: '', fieldB: '' } }),
+            watch: {
+                state () {
+                    this.$emit('updated', this.state)
+                },
+            },
+            template: `
+                <div>
+                    <FormularioForm v-if="formExists" v-model="state">
+                        <FormularioField name="fieldA" />
+                        <FormularioField name="fieldB" unregister-behavior="unset" />
+                    </FormularioForm>
+                </div>
+            `,
+        })
+
+        await wrapper.vm.$nextTick()
+
+        wrapper.setProps({ formExists: false })
+
+        await wrapper.vm.$nextTick()
+
+        expect(wrapper.emitted('updated')).toEqual([[{ fieldA: '' }]])
+    })
 })