RetailCRM-Mirror/vue-formulario
1
0
Fork 0
mirror of synced 2024-11-25 23:06:02 +03:00
Code Issues Projects Releases Wiki Activity

Adds a internalFormModelProxy to FormulateForm to allow two way model bindings

Browse Source
This commit is contained in:
Justin Schroeder 2019-11-05 10:52:05 -05:00
parent c736f818af
commit 9522459600
5 changed files with 65 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
dist/formulate.esm.js vendored
View File

@ -622,18 +622,11 @@ var script$1 = {
},
data: function data () {
return {
registry: {}
registry: {},
internalFormModelProxy: {}
}
},
computed: {
formModel: {
get: function get () {
return this.formulateValue
},
set: function set (value) {
this.$emit('input', value);
}
},
hasFormulateValue: function hasFormulateValue () {
return this.formulateValue && typeof this.formulateValue === 'object'
},
@ -652,24 +645,31 @@ var script$1 = {
typeof newValue === 'object'
) {
for (var field in newValue) {
if (this.registry.hasOwnProperty(field) && !shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy)) {
// If the value of the formulateValue changed (probably as a prop)
// and it doesn't match the internal proxied value of the registered
// component, we set it explicitly. Its important we check the
// model proxy here since the model itself is not fully synchronous.
if (this.registry.hasOwnProperty(field) &&
!shallowEqualObjects(newValue[field], this.internalFormModelProxy[field]) &&
!shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy[field])
) {
this.setFieldValue(field, newValue[field]);
this.registry[field].context.model = newValue[field];
}
}
}
},
deep: true
deep: true,
immediate: false
}
},
created: function created () {
if (this.$options.propsData.hasOwnProperty('formulateValue')) {
this.internalFormModelProxy = Object.assign({}, this.formulateValue);
}
},
methods: {
setFieldValue: function setFieldValue (field, value) {
var obj;
this.formModel = Object.assign({}, this.formulateValue, ( obj = {}, obj[field] = value, obj ));
Object.assign(this.internalFormModelProxy, ( obj = {}, obj[field] = value, obj ));
this.$emit('input', Object.assign({}, this.internalFormModelProxy));
},
register: function register (field, component) {
this.registry[field] = component;

32
dist/formulate.min.js vendored
View File

@ -625,18 +625,11 @@ var Formulate = (function (exports, isPlainObject, nanoid) {
},
data: function data () {
return {
registry: {}
registry: {},
internalFormModelProxy: {}
}
},
computed: {
formModel: {
get: function get () {
return this.formulateValue
},
set: function set (value) {
this.$emit('input', value);
}
},
hasFormulateValue: function hasFormulateValue () {
return this.formulateValue && typeof this.formulateValue === 'object'
},
@ -655,24 +648,31 @@ var Formulate = (function (exports, isPlainObject, nanoid) {
typeof newValue === 'object'
) {
for (var field in newValue) {
if (this.registry.hasOwnProperty(field) && !shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy)) {
// If the value of the formulateValue changed (probably as a prop)
// and it doesn't match the internal proxied value of the registered
// component, we set it explicitly. Its important we check the
// model proxy here since the model itself is not fully synchronous.
if (this.registry.hasOwnProperty(field) &&
!shallowEqualObjects(newValue[field], this.internalFormModelProxy[field]) &&
!shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy[field])
) {
this.setFieldValue(field, newValue[field]);
this.registry[field].context.model = newValue[field];
}
}
}
},
deep: true
deep: true,
immediate: false
}
},
created: function created () {
if (this.$options.propsData.hasOwnProperty('formulateValue')) {
this.internalFormModelProxy = Object.assign({}, this.formulateValue);
}
},
methods: {
setFieldValue: function setFieldValue (field, value) {
var obj;
this.formModel = Object.assign({}, this.formulateValue, ( obj = {}, obj[field] = value, obj ));
Object.assign(this.internalFormModelProxy, ( obj = {}, obj[field] = value, obj ));
this.$emit('input', Object.assign({}, this.internalFormModelProxy));
},
register: function register (field, component) {
this.registry[field] = component;

32
dist/formulate.umd.js vendored
View File

@ -628,18 +628,11 @@
},
data: function data () {
return {
registry: {}
registry: {},
internalFormModelProxy: {}
}
},
computed: {
formModel: {
get: function get () {
return this.formulateValue
},
set: function set (value) {
this.$emit('input', value);
}
},
hasFormulateValue: function hasFormulateValue () {
return this.formulateValue && typeof this.formulateValue === 'object'
},
@ -658,24 +651,31 @@
typeof newValue === 'object'
) {
for (var field in newValue) {
if (this.registry.hasOwnProperty(field) && !shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy)) {
// If the value of the formulateValue changed (probably as a prop)
// and it doesn't match the internal proxied value of the registered
// component, we set it explicitly. Its important we check the
// model proxy here since the model itself is not fully synchronous.
if (this.registry.hasOwnProperty(field) &&
!shallowEqualObjects(newValue[field], this.internalFormModelProxy[field]) &&
!shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy[field])
) {
this.setFieldValue(field, newValue[field]);
this.registry[field].context.model = newValue[field];
}
}
}
},
deep: true
deep: true,
immediate: false
}
},
created: function created () {
if (this.$options.propsData.hasOwnProperty('formulateValue')) {
this.internalFormModelProxy = Object.assign({}, this.formulateValue);
}
},
methods: {
setFieldValue: function setFieldValue (field, value) {
var obj;
this.formModel = Object.assign({}, this.formulateValue, ( obj = {}, obj[field] = value, obj ));
Object.assign(this.internalFormModelProxy, ( obj = {}, obj[field] = value, obj ));
this.$emit('input', Object.assign({}, this.internalFormModelProxy));
},
register: function register (field, component) {
this.registry[field] = component;

32
src/FormulateForm.vue
View File

@ -33,18 +33,11 @@ export default {
},
data () {
return {
registry: {}
registry: {},
internalFormModelProxy: {}
}
},
computed: {
formModel: {
get () {
return this.formulateValue
},
set (value) {
this.$emit('input', value)
}
},
hasFormulateValue () {
return this.formulateValue && typeof this.formulateValue === 'object'
},
@ -63,22 +56,29 @@ export default {
typeof newValue === 'object'
) {
for (const field in newValue) {
if (this.registry.hasOwnProperty(field) && !shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy)) {
// If the value of the formulateValue changed (probably as a prop)
// and it doesn't match the internal proxied value of the registered
// component, we set it explicitly. Its important we check the
// model proxy here since the model itself is not fully synchronous.
if (this.registry.hasOwnProperty(field) &&
!shallowEqualObjects(newValue[field], this.internalFormModelProxy[field]) &&
!shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy[field])
) {
this.setFieldValue(field, newValue[field])
this.registry[field].context.model = newValue[field]
}
}
}
},
deep: true
deep: true,
immediate: false
}
},
created () {
if (this.$options.propsData.hasOwnProperty('formulateValue')) {
this.internalFormModelProxy = Object.assign({}, this.formulateValue)
}
},
methods: {
setFieldValue (field, value) {
this.formModel = Object.assign({}, this.formulateValue, { [field]: value })
Object.assign(this.internalFormModelProxy, { [field]: value })
this.$emit('input', Object.assign({}, this.internalFormModelProxy))
},
register (field, component) {
this.registry[field] = component

2
test/FormulateForm.test.js
View File

@ -123,6 +123,6 @@ describe('FormulateForm', () => {
default: '<FormulateInput type="text" name="testinput" formulate-value="override-data" />'
}
})
expect(wrapper.emitted().input[0]).toEqual([{ testinput: 'override-data' }])
expect(wrapper.emitted().input[wrapper.emitted().input.length - 1]).toEqual([{ testinput: 'override-data' }])
})
})