From 95224596003c9d1bcb610816dae97bc79a5e537e Mon Sep 17 00:00:00 2001 From: Justin Schroeder Date: Tue, 5 Nov 2019 10:52:05 -0500 Subject: [PATCH] Adds a internalFormModelProxy to FormulateForm to allow two way model bindings --- dist/formulate.esm.js | 32 ++++++++++++++++---------------- dist/formulate.min.js | 32 ++++++++++++++++---------------- dist/formulate.umd.js | 32 ++++++++++++++++---------------- src/FormulateForm.vue | 32 ++++++++++++++++---------------- test/FormulateForm.test.js | 2 +- 5 files changed, 65 insertions(+), 65 deletions(-) diff --git a/dist/formulate.esm.js b/dist/formulate.esm.js index cfc587a..8c69fc0 100644 --- a/dist/formulate.esm.js +++ b/dist/formulate.esm.js @@ -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; diff --git a/dist/formulate.min.js b/dist/formulate.min.js index e3092d3..1ac8959 100644 --- a/dist/formulate.min.js +++ b/dist/formulate.min.js @@ -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; diff --git a/dist/formulate.umd.js b/dist/formulate.umd.js index 31a4ff5..216a36d 100644 --- a/dist/formulate.umd.js +++ b/dist/formulate.umd.js @@ -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; diff --git a/src/FormulateForm.vue b/src/FormulateForm.vue index 11ebc87..3483e71 100644 --- a/src/FormulateForm.vue +++ b/src/FormulateForm.vue @@ -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 diff --git a/test/FormulateForm.test.js b/test/FormulateForm.test.js index 40c7a23..a443d5c 100644 --- a/test/FormulateForm.test.js +++ b/test/FormulateForm.test.js @@ -123,6 +123,6 @@ describe('FormulateForm', () => { default: '' } }) - expect(wrapper.emitted().input[0]).toEqual([{ testinput: 'override-data' }]) + expect(wrapper.emitted().input[wrapper.emitted().input.length - 1]).toEqual([{ testinput: 'override-data' }]) }) })