RetailCRM-Mirror/vue-formulario
1
0
Fork 0
mirror of synced 2024-11-22 13:26:06 +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 () { data: function data () {
return { return {
registry: {} registry: {},
internalFormModelProxy: {}
} }
}, },
computed: { computed: {
formModel: {
get: function get () {
return this.formulateValue
},
set: function set (value) {
this.$emit('input', value);
}
},
hasFormulateValue: function hasFormulateValue () { hasFormulateValue: function hasFormulateValue () {
return this.formulateValue && typeof this.formulateValue === 'object' return this.formulateValue && typeof this.formulateValue === 'object'
}, },
@ -652,24 +645,31 @@ var script$1 = {
typeof newValue === 'object' typeof newValue === 'object'
) { ) {
for (var field in newValue) { for (var field in newValue) {
if (this.registry.hasOwnProperty(field) && !shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy)) { if (this.registry.hasOwnProperty(field) &&
// If the value of the formulateValue changed (probably as a prop) !shallowEqualObjects(newValue[field], this.internalFormModelProxy[field]) &&
// and it doesn't match the internal proxied value of the registered !shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy[field])
// component, we set it explicitly. Its important we check the ) {
// model proxy here since the model itself is not fully synchronous. this.setFieldValue(field, newValue[field]);
this.registry[field].context.model = 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: { methods: {
setFieldValue: function setFieldValue (field, value) { setFieldValue: function setFieldValue (field, value) {
var obj; 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) { register: function register (field, component) {
this.registry[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 () { data: function data () {
return { return {
registry: {} registry: {},
internalFormModelProxy: {}
} }
}, },
computed: { computed: {
formModel: {
get: function get () {
return this.formulateValue
},
set: function set (value) {
this.$emit('input', value);
}
},
hasFormulateValue: function hasFormulateValue () { hasFormulateValue: function hasFormulateValue () {
return this.formulateValue && typeof this.formulateValue === 'object' return this.formulateValue && typeof this.formulateValue === 'object'
}, },
@ -655,24 +648,31 @@ var Formulate = (function (exports, isPlainObject, nanoid) {
typeof newValue === 'object' typeof newValue === 'object'
) { ) {
for (var field in newValue) { for (var field in newValue) {
if (this.registry.hasOwnProperty(field) && !shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy)) { if (this.registry.hasOwnProperty(field) &&
// If the value of the formulateValue changed (probably as a prop) !shallowEqualObjects(newValue[field], this.internalFormModelProxy[field]) &&
// and it doesn't match the internal proxied value of the registered !shallowEqualObjects(newValue[field], this.registry[field].internalModelProxy[field])
// component, we set it explicitly. Its important we check the ) {
// model proxy here since the model itself is not fully synchronous. this.setFieldValue(field, newValue[field]);
this.registry[field].context.model = 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: { methods: {
setFieldValue: function setFieldValue (field, value) { setFieldValue: function setFieldValue (field, value) {
var obj; 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) { register: function register (field, component) {
this.registry[field] = component; this.registry[field] = component;

32
dist/formulate.umd.js vendored
View File

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

32
src/FormulateForm.vue
View File

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