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,
|
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)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -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
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') }],
|
[{ 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