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:
parent
db298475d5
commit
d39ca17e45
@ -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)
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
4
src/enum.ts
Normal file
4
src/enum.ts
Normal file
@ -0,0 +1,4 @@
|
||||
export const UNREGISTER_BEHAVIOR = {
|
||||
NONE: 'none',
|
||||
UNSET: 'unset',
|
||||
}
|
@ -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: '' }]])
|
||||
})
|
||||
})
|
||||
|
Loading…
Reference in New Issue
Block a user