2019-10-07 17:24:30 +03:00
|
|
|
<template>
|
2019-10-09 06:54:16 +03:00
|
|
|
<form
|
|
|
|
@submit.prevent="formSubmitted"
|
|
|
|
>
|
2019-10-07 17:24:30 +03:00
|
|
|
<slot />
|
|
|
|
</form>
|
|
|
|
</template>
|
2019-10-09 06:54:16 +03:00
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
provide () {
|
|
|
|
return {
|
|
|
|
formulateFormSetter: this.setFieldValue,
|
|
|
|
formulateFormRegister: this.register
|
|
|
|
}
|
|
|
|
},
|
|
|
|
name: 'FormulateForm',
|
|
|
|
model: {
|
|
|
|
prop: 'formulateValue',
|
|
|
|
event: 'input'
|
|
|
|
},
|
|
|
|
props: {
|
|
|
|
name: {
|
|
|
|
type: [String, Boolean],
|
|
|
|
default: false
|
|
|
|
},
|
|
|
|
formulateValue: {
|
|
|
|
type: Object,
|
|
|
|
default: () => ({})
|
|
|
|
}
|
|
|
|
},
|
|
|
|
data () {
|
|
|
|
return {
|
|
|
|
registry: {}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
computed: {
|
|
|
|
formModel: {
|
|
|
|
get () {
|
|
|
|
return this.formulateValue
|
|
|
|
},
|
|
|
|
set (value) {
|
|
|
|
this.$emit('input', value)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
setFieldValue (field, value) {
|
|
|
|
this.formModel = Object.assign({}, this.formulateValue, { [field]: value })
|
|
|
|
},
|
|
|
|
register (field, component) {
|
|
|
|
this.registry[field] = component
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</script>
|