1
0
mirror of synced 2024-11-21 21:06:04 +03:00

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
This commit is contained in:
Zaytsev Kirill 2021-09-30 12:33:54 +03:00
parent db298475d5
commit d39ca17e45
4 changed files with 49 additions and 4 deletions

View File

@ -32,6 +32,8 @@ import {
Empty, Empty,
} from '@/types' } from '@/types'
import { UNREGISTER_BEHAVIOR } from '@/enum'
const VALIDATION_BEHAVIOR = { const VALIDATION_BEHAVIOR = {
DEMAND: 'demand', DEMAND: 'demand',
LIVE: 'live', 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: () => <T, U>(value: U|T): U|T => value }) modelSetConverter!: ModelSetConverter
@Prop({ default: 'div' }) tag!: string @Prop({ default: 'div' }) tag!: string
@Prop({ default: UNREGISTER_BEHAVIOR.NONE }) unregisterBehavior!: string
public proxy: unknown = this.hasModel ? this.value : '' public proxy: unknown = this.hasModel ? this.value : ''
@ -156,7 +159,7 @@ export default class FormularioField extends Vue {
*/ */
public beforeDestroy (): void { public beforeDestroy (): void {
if (typeof this.__FormularioForm_unregister === 'function') { if (typeof this.__FormularioForm_unregister === 'function') {
this.__FormularioForm_unregister(this.fullPath) this.__FormularioForm_unregister(this.fullPath, this.unregisterBehavior)
} }
} }

View File

@ -27,6 +27,8 @@ import {
import { FormularioField } from '@/types' import { FormularioField } from '@/types'
import { Violation } from '@/validation/validator' import { Violation } from '@/validation/validator'
import { UNREGISTER_BEHAVIOR } from '@/enum'
const update = (state: Record<string, unknown>, path: string, value: unknown): Record<string, unknown> => { const update = (state: Record<string, unknown>, path: string, value: unknown): Record<string, unknown> => {
if (value === undefined) { if (value === undefined) {
return unset(state, path) as Record<string, unknown> return unset(state, path) as Record<string, unknown>
@ -88,11 +90,14 @@ export default class FormularioForm extends Vue {
} }
@Provide('__FormularioForm_unregister') @Provide('__FormularioForm_unregister')
private unregister (path: string): void { private unregister (path: string, behavior: string): void {
if (this.registry.has(path)) { if (this.registry.has(path)) {
this.registry.delete(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()
}
} }
} }

4
src/enum.ts Normal file
View File

@ -0,0 +1,4 @@
export const UNREGISTER_BEHAVIOR = {
NONE: 'none',
UNSET: 'unset',
}

View File

@ -286,4 +286,37 @@ describe('FormularioField', () => {
[{ date: new Date('2001-05-12') }], [{ 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: '' }]])
})
}) })