From 942ff41ad95640f7ff20d940e966267cb491662e Mon Sep 17 00:00:00 2001 From: Justin Schroeder Date: Tue, 8 Oct 2019 23:54:16 -0400 Subject: [PATCH] Initial reactivity for FormulateForm --- dist/formulate.esm.js | 152 +++++++++++++++++++++++++++++-------- dist/formulate.min.js | 152 +++++++++++++++++++++++++++++-------- dist/formulate.umd.js | 152 +++++++++++++++++++++++++++++-------- src/FormulateForm.vue | 53 ++++++++++++- src/FormulateInput.vue | 18 ++++- src/FormulateInputMixin.js | 10 +-- src/libs/context.js | 22 +++++- 7 files changed, 453 insertions(+), 106 deletions(-) diff --git a/dist/formulate.esm.js b/dist/formulate.esm.js index c404d9a..4692b1f 100644 --- a/dist/formulate.esm.js +++ b/dist/formulate.esm.js @@ -152,6 +152,7 @@ var context = { } return defineModel.call(this, Object.assign({}, {type: this.type, value: this.value, + name: this.nameOrFallback, classification: this.classification, component: this.component, id: this.id || this.defaultId, @@ -160,6 +161,7 @@ var context = { attributes: this.elementAttributes}, this.typeContext)) }, + nameOrFallback: nameOrFallback, typeContext: typeContext, elementAttributes: elementAttributes, logicalLabelPosition: logicalLabelPosition @@ -222,6 +224,19 @@ function logicalLabelPosition () { } } +/** + * Return the element’s name, or select a fallback. + */ +function nameOrFallback () { + if (this.name === true) { + return ((this.type) + "_" + (this.elementAttributes.id)) + } + if (this.name === false) { + return false + } + return this.name +} + /** * Given an object or array of options, create an array of objects with label, * value, and id. @@ -260,7 +275,7 @@ function modelGetter () { if (this.type === 'checkbox' && !Array.isArray(this.formulateValue) && this.options) { return [] } - if (this.formulateValue === false) { + if (!this.formulateValue) { return '' } return this.formulateValue @@ -271,6 +286,9 @@ function modelGetter () { **/ function modelSetter (value) { this.$emit('input', value); + if (this.context.name && typeof this.formulateFormSetter === 'function') { + this.formulateFormSetter(this.context.name, value); + } } // @@ -278,6 +296,10 @@ function modelSetter (value) { var script = { name: 'FormulateInput', inheritAttrs: false, + inject: { + formulateFormSetter: { default: undefined }, + formulateFormRegister: { default: undefined } + }, model: { prop: 'formulateValue', event: 'input' @@ -287,14 +309,18 @@ var script = { type: String, default: 'text' }, + name: { + type: [Boolean, String], + default: true + }, + /* eslint-disable */ formulateValue: { - type: [String, Number, Object, Boolean, Array], - default: '' + default: undefined }, value: { - type: [String, Number, Object, Boolean, Array], default: false }, + /* eslint-enable */ options: { type: [Object, Array, Boolean], default: false @@ -347,6 +373,9 @@ var script = { } }, created: function created () { + if (this.formulateFormRegister && typeof this.formulateFormRegister === 'function') { + this.formulateFormRegister(this.name, this); + } this.updateLocalAttributes(this.$attrs); }, mounted: function mounted () { @@ -554,14 +583,85 @@ __vue_render__._withStripped = true; undefined ); +// +// +// +// +// +// +// +// + +var script$1 = { + provide: function 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: function () { return ({}); } + } + }, + data: function data () { + return { + registry: {} + } + }, + computed: { + formModel: { + get: function get () { + return this.formulateValue + }, + set: function set (value) { + this.$emit('input', value); + } + } + }, + methods: { + setFieldValue: function setFieldValue (field, value) { + var obj; + + this.formModel = Object.assign({}, this.formulateValue, ( obj = {}, obj[field] = value, obj )); + }, + register: function register (field, component) { + this.registry[field] = component; + } + } +}; + /* script */ +var __vue_script__$1 = script$1; /* template */ var __vue_render__$1 = function() { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; - return _c("form", [_vm._t("default")], 2) + return _c( + "form", + { + on: { + submit: function($event) { + $event.preventDefault(); + return _vm.formSubmitted($event) + } + } + }, + [_vm._t("default")], + 2 + ) }; var __vue_staticRenderFns__$1 = []; __vue_render__$1._withStripped = true; @@ -583,7 +683,7 @@ __vue_render__$1._withStripped = true; var FormulateForm = normalizeComponent_1( { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 }, __vue_inject_styles__$1, - {}, + __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, @@ -606,7 +706,7 @@ __vue_render__$1._withStripped = true; // function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; } -var script$1 = { +var script$2 = { name: 'FormulateInputGroup', props: { context: { @@ -644,7 +744,7 @@ var script$1 = { }; /* script */ -var __vue_script__$1 = script$1; +var __vue_script__$2 = script$2; /* template */ var __vue_render__$2 = function() { @@ -699,7 +799,7 @@ __vue_render__$2._withStripped = true; var FormulateInputGroup = normalizeComponent_1( { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 }, __vue_inject_styles__$2, - __vue_script__$1, + __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, @@ -711,18 +811,10 @@ __vue_render__$2._withStripped = true; * Default base for input components. */ var FormulateInputMixin = { - model: { - prop: 'formulateValue', - event: 'input' - }, props: { context: { type: Object, required: true - }, - formulateValue: { - type: [Object, Array, Boolean, String, Number], - default: '' } }, computed: { @@ -736,20 +828,20 @@ var FormulateInputMixin = { return this.context.attributes || {} }, hasValue: function hasValue () { - return !!this.model + return !!this.context.model } } }; // -var script$2 = { +var script$3 = { name: 'FormulateInputBox', mixins: [FormulateInputMixin] }; /* script */ -var __vue_script__$2 = script$2; +var __vue_script__$3 = script$3; /* template */ var __vue_render__$3 = function() { @@ -901,7 +993,7 @@ __vue_render__$3._withStripped = true; var FormulateInputBox = normalizeComponent_1( { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 }, __vue_inject_styles__$3, - __vue_script__$2, + __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, @@ -911,13 +1003,13 @@ __vue_render__$3._withStripped = true; // -var script$3 = { +var script$4 = { name: 'FormulateInputText', mixins: [FormulateInputMixin] }; /* script */ -var __vue_script__$3 = script$3; +var __vue_script__$4 = script$4; /* template */ var __vue_render__$4 = function() { @@ -1056,7 +1148,7 @@ __vue_render__$4._withStripped = true; var FormulateInputText = normalizeComponent_1( { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 }, __vue_inject_styles__$4, - __vue_script__$3, + __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, @@ -1066,7 +1158,7 @@ __vue_render__$4._withStripped = true; // -var script$4 = { +var script$5 = { name: 'FormulateInputSelect', mixins: [FormulateInputMixin], computed: { @@ -1083,7 +1175,7 @@ var script$4 = { }; /* script */ -var __vue_script__$4 = script$4; +var __vue_script__$5 = script$5; /* template */ var __vue_render__$5 = function() { @@ -1213,7 +1305,7 @@ __vue_render__$5._withStripped = true; var FormulateInputSelect = normalizeComponent_1( { render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 }, __vue_inject_styles__$5, - __vue_script__$4, + __vue_script__$5, __vue_scope_id__$5, __vue_is_functional_template__$5, __vue_module_identifier__$5, @@ -1223,13 +1315,13 @@ __vue_render__$5._withStripped = true; // -var script$5 = { +var script$6 = { name: 'FormulateInputTextArea', mixins: [FormulateInputMixin] }; /* script */ -var __vue_script__$5 = script$5; +var __vue_script__$6 = script$6; /* template */ var __vue_render__$6 = function() { @@ -1292,7 +1384,7 @@ __vue_render__$6._withStripped = true; var FormulateInputTextArea = normalizeComponent_1( { render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 }, __vue_inject_styles__$6, - __vue_script__$5, + __vue_script__$6, __vue_scope_id__$6, __vue_is_functional_template__$6, __vue_module_identifier__$6, diff --git a/dist/formulate.min.js b/dist/formulate.min.js index 0b2cd7e..6a71e0a 100644 --- a/dist/formulate.min.js +++ b/dist/formulate.min.js @@ -155,6 +155,7 @@ var Formulate = (function (exports, isPlainObject, nanoid) { } return defineModel.call(this, Object.assign({}, {type: this.type, value: this.value, + name: this.nameOrFallback, classification: this.classification, component: this.component, id: this.id || this.defaultId, @@ -163,6 +164,7 @@ var Formulate = (function (exports, isPlainObject, nanoid) { attributes: this.elementAttributes}, this.typeContext)) }, + nameOrFallback: nameOrFallback, typeContext: typeContext, elementAttributes: elementAttributes, logicalLabelPosition: logicalLabelPosition @@ -225,6 +227,19 @@ var Formulate = (function (exports, isPlainObject, nanoid) { } } + /** + * Return the element’s name, or select a fallback. + */ + function nameOrFallback () { + if (this.name === true) { + return ((this.type) + "_" + (this.elementAttributes.id)) + } + if (this.name === false) { + return false + } + return this.name + } + /** * Given an object or array of options, create an array of objects with label, * value, and id. @@ -263,7 +278,7 @@ var Formulate = (function (exports, isPlainObject, nanoid) { if (this.type === 'checkbox' && !Array.isArray(this.formulateValue) && this.options) { return [] } - if (this.formulateValue === false) { + if (!this.formulateValue) { return '' } return this.formulateValue @@ -274,6 +289,9 @@ var Formulate = (function (exports, isPlainObject, nanoid) { **/ function modelSetter (value) { this.$emit('input', value); + if (this.context.name && typeof this.formulateFormSetter === 'function') { + this.formulateFormSetter(this.context.name, value); + } } // @@ -281,6 +299,10 @@ var Formulate = (function (exports, isPlainObject, nanoid) { var script = { name: 'FormulateInput', inheritAttrs: false, + inject: { + formulateFormSetter: { default: undefined }, + formulateFormRegister: { default: undefined } + }, model: { prop: 'formulateValue', event: 'input' @@ -290,14 +312,18 @@ var Formulate = (function (exports, isPlainObject, nanoid) { type: String, default: 'text' }, + name: { + type: [Boolean, String], + default: true + }, + /* eslint-disable */ formulateValue: { - type: [String, Number, Object, Boolean, Array], - default: '' + default: undefined }, value: { - type: [String, Number, Object, Boolean, Array], default: false }, + /* eslint-enable */ options: { type: [Object, Array, Boolean], default: false @@ -350,6 +376,9 @@ var Formulate = (function (exports, isPlainObject, nanoid) { } }, created: function created () { + if (this.formulateFormRegister && typeof this.formulateFormRegister === 'function') { + this.formulateFormRegister(this.name, this); + } this.updateLocalAttributes(this.$attrs); }, mounted: function mounted () { @@ -557,14 +586,85 @@ var Formulate = (function (exports, isPlainObject, nanoid) { undefined ); + // + // + // + // + // + // + // + // + + var script$1 = { + provide: function 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: function () { return ({}); } + } + }, + data: function data () { + return { + registry: {} + } + }, + computed: { + formModel: { + get: function get () { + return this.formulateValue + }, + set: function set (value) { + this.$emit('input', value); + } + } + }, + methods: { + setFieldValue: function setFieldValue (field, value) { + var obj; + + this.formModel = Object.assign({}, this.formulateValue, ( obj = {}, obj[field] = value, obj )); + }, + register: function register (field, component) { + this.registry[field] = component; + } + } + }; + /* script */ + var __vue_script__$1 = script$1; /* template */ var __vue_render__$1 = function() { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; - return _c("form", [_vm._t("default")], 2) + return _c( + "form", + { + on: { + submit: function($event) { + $event.preventDefault(); + return _vm.formSubmitted($event) + } + } + }, + [_vm._t("default")], + 2 + ) }; var __vue_staticRenderFns__$1 = []; __vue_render__$1._withStripped = true; @@ -586,7 +686,7 @@ var Formulate = (function (exports, isPlainObject, nanoid) { var FormulateForm = normalizeComponent_1( { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 }, __vue_inject_styles__$1, - {}, + __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, @@ -609,7 +709,7 @@ var Formulate = (function (exports, isPlainObject, nanoid) { // function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; } - var script$1 = { + var script$2 = { name: 'FormulateInputGroup', props: { context: { @@ -647,7 +747,7 @@ var Formulate = (function (exports, isPlainObject, nanoid) { }; /* script */ - var __vue_script__$1 = script$1; + var __vue_script__$2 = script$2; /* template */ var __vue_render__$2 = function() { @@ -702,7 +802,7 @@ var Formulate = (function (exports, isPlainObject, nanoid) { var FormulateInputGroup = normalizeComponent_1( { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 }, __vue_inject_styles__$2, - __vue_script__$1, + __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, @@ -714,18 +814,10 @@ var Formulate = (function (exports, isPlainObject, nanoid) { * Default base for input components. */ var FormulateInputMixin = { - model: { - prop: 'formulateValue', - event: 'input' - }, props: { context: { type: Object, required: true - }, - formulateValue: { - type: [Object, Array, Boolean, String, Number], - default: '' } }, computed: { @@ -739,20 +831,20 @@ var Formulate = (function (exports, isPlainObject, nanoid) { return this.context.attributes || {} }, hasValue: function hasValue () { - return !!this.model + return !!this.context.model } } }; // - var script$2 = { + var script$3 = { name: 'FormulateInputBox', mixins: [FormulateInputMixin] }; /* script */ - var __vue_script__$2 = script$2; + var __vue_script__$3 = script$3; /* template */ var __vue_render__$3 = function() { @@ -904,7 +996,7 @@ var Formulate = (function (exports, isPlainObject, nanoid) { var FormulateInputBox = normalizeComponent_1( { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 }, __vue_inject_styles__$3, - __vue_script__$2, + __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, @@ -914,13 +1006,13 @@ var Formulate = (function (exports, isPlainObject, nanoid) { // - var script$3 = { + var script$4 = { name: 'FormulateInputText', mixins: [FormulateInputMixin] }; /* script */ - var __vue_script__$3 = script$3; + var __vue_script__$4 = script$4; /* template */ var __vue_render__$4 = function() { @@ -1059,7 +1151,7 @@ var Formulate = (function (exports, isPlainObject, nanoid) { var FormulateInputText = normalizeComponent_1( { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 }, __vue_inject_styles__$4, - __vue_script__$3, + __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, @@ -1069,7 +1161,7 @@ var Formulate = (function (exports, isPlainObject, nanoid) { // - var script$4 = { + var script$5 = { name: 'FormulateInputSelect', mixins: [FormulateInputMixin], computed: { @@ -1086,7 +1178,7 @@ var Formulate = (function (exports, isPlainObject, nanoid) { }; /* script */ - var __vue_script__$4 = script$4; + var __vue_script__$5 = script$5; /* template */ var __vue_render__$5 = function() { @@ -1216,7 +1308,7 @@ var Formulate = (function (exports, isPlainObject, nanoid) { var FormulateInputSelect = normalizeComponent_1( { render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 }, __vue_inject_styles__$5, - __vue_script__$4, + __vue_script__$5, __vue_scope_id__$5, __vue_is_functional_template__$5, __vue_module_identifier__$5, @@ -1226,13 +1318,13 @@ var Formulate = (function (exports, isPlainObject, nanoid) { // - var script$5 = { + var script$6 = { name: 'FormulateInputTextArea', mixins: [FormulateInputMixin] }; /* script */ - var __vue_script__$5 = script$5; + var __vue_script__$6 = script$6; /* template */ var __vue_render__$6 = function() { @@ -1295,7 +1387,7 @@ var Formulate = (function (exports, isPlainObject, nanoid) { var FormulateInputTextArea = normalizeComponent_1( { render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 }, __vue_inject_styles__$6, - __vue_script__$5, + __vue_script__$6, __vue_scope_id__$6, __vue_is_functional_template__$6, __vue_module_identifier__$6, diff --git a/dist/formulate.umd.js b/dist/formulate.umd.js index 502bbe3..ec9e009 100644 --- a/dist/formulate.umd.js +++ b/dist/formulate.umd.js @@ -158,6 +158,7 @@ } return defineModel.call(this, Object.assign({}, {type: this.type, value: this.value, + name: this.nameOrFallback, classification: this.classification, component: this.component, id: this.id || this.defaultId, @@ -166,6 +167,7 @@ attributes: this.elementAttributes}, this.typeContext)) }, + nameOrFallback: nameOrFallback, typeContext: typeContext, elementAttributes: elementAttributes, logicalLabelPosition: logicalLabelPosition @@ -228,6 +230,19 @@ } } + /** + * Return the element’s name, or select a fallback. + */ + function nameOrFallback () { + if (this.name === true) { + return ((this.type) + "_" + (this.elementAttributes.id)) + } + if (this.name === false) { + return false + } + return this.name + } + /** * Given an object or array of options, create an array of objects with label, * value, and id. @@ -266,7 +281,7 @@ if (this.type === 'checkbox' && !Array.isArray(this.formulateValue) && this.options) { return [] } - if (this.formulateValue === false) { + if (!this.formulateValue) { return '' } return this.formulateValue @@ -277,6 +292,9 @@ **/ function modelSetter (value) { this.$emit('input', value); + if (this.context.name && typeof this.formulateFormSetter === 'function') { + this.formulateFormSetter(this.context.name, value); + } } // @@ -284,6 +302,10 @@ var script = { name: 'FormulateInput', inheritAttrs: false, + inject: { + formulateFormSetter: { default: undefined }, + formulateFormRegister: { default: undefined } + }, model: { prop: 'formulateValue', event: 'input' @@ -293,14 +315,18 @@ type: String, default: 'text' }, + name: { + type: [Boolean, String], + default: true + }, + /* eslint-disable */ formulateValue: { - type: [String, Number, Object, Boolean, Array], - default: '' + default: undefined }, value: { - type: [String, Number, Object, Boolean, Array], default: false }, + /* eslint-enable */ options: { type: [Object, Array, Boolean], default: false @@ -353,6 +379,9 @@ } }, created: function created () { + if (this.formulateFormRegister && typeof this.formulateFormRegister === 'function') { + this.formulateFormRegister(this.name, this); + } this.updateLocalAttributes(this.$attrs); }, mounted: function mounted () { @@ -560,14 +589,85 @@ undefined ); + // + // + // + // + // + // + // + // + + var script$1 = { + provide: function 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: function () { return ({}); } + } + }, + data: function data () { + return { + registry: {} + } + }, + computed: { + formModel: { + get: function get () { + return this.formulateValue + }, + set: function set (value) { + this.$emit('input', value); + } + } + }, + methods: { + setFieldValue: function setFieldValue (field, value) { + var obj; + + this.formModel = Object.assign({}, this.formulateValue, ( obj = {}, obj[field] = value, obj )); + }, + register: function register (field, component) { + this.registry[field] = component; + } + } + }; + /* script */ + var __vue_script__$1 = script$1; /* template */ var __vue_render__$1 = function() { var _vm = this; var _h = _vm.$createElement; var _c = _vm._self._c || _h; - return _c("form", [_vm._t("default")], 2) + return _c( + "form", + { + on: { + submit: function($event) { + $event.preventDefault(); + return _vm.formSubmitted($event) + } + } + }, + [_vm._t("default")], + 2 + ) }; var __vue_staticRenderFns__$1 = []; __vue_render__$1._withStripped = true; @@ -589,7 +689,7 @@ var FormulateForm = normalizeComponent_1( { render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 }, __vue_inject_styles__$1, - {}, + __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, @@ -612,7 +712,7 @@ // function objectWithoutProperties (obj, exclude) { var target = {}; for (var k in obj) if (Object.prototype.hasOwnProperty.call(obj, k) && exclude.indexOf(k) === -1) target[k] = obj[k]; return target; } - var script$1 = { + var script$2 = { name: 'FormulateInputGroup', props: { context: { @@ -650,7 +750,7 @@ }; /* script */ - var __vue_script__$1 = script$1; + var __vue_script__$2 = script$2; /* template */ var __vue_render__$2 = function() { @@ -705,7 +805,7 @@ var FormulateInputGroup = normalizeComponent_1( { render: __vue_render__$2, staticRenderFns: __vue_staticRenderFns__$2 }, __vue_inject_styles__$2, - __vue_script__$1, + __vue_script__$2, __vue_scope_id__$2, __vue_is_functional_template__$2, __vue_module_identifier__$2, @@ -717,18 +817,10 @@ * Default base for input components. */ var FormulateInputMixin = { - model: { - prop: 'formulateValue', - event: 'input' - }, props: { context: { type: Object, required: true - }, - formulateValue: { - type: [Object, Array, Boolean, String, Number], - default: '' } }, computed: { @@ -742,20 +834,20 @@ return this.context.attributes || {} }, hasValue: function hasValue () { - return !!this.model + return !!this.context.model } } }; // - var script$2 = { + var script$3 = { name: 'FormulateInputBox', mixins: [FormulateInputMixin] }; /* script */ - var __vue_script__$2 = script$2; + var __vue_script__$3 = script$3; /* template */ var __vue_render__$3 = function() { @@ -907,7 +999,7 @@ var FormulateInputBox = normalizeComponent_1( { render: __vue_render__$3, staticRenderFns: __vue_staticRenderFns__$3 }, __vue_inject_styles__$3, - __vue_script__$2, + __vue_script__$3, __vue_scope_id__$3, __vue_is_functional_template__$3, __vue_module_identifier__$3, @@ -917,13 +1009,13 @@ // - var script$3 = { + var script$4 = { name: 'FormulateInputText', mixins: [FormulateInputMixin] }; /* script */ - var __vue_script__$3 = script$3; + var __vue_script__$4 = script$4; /* template */ var __vue_render__$4 = function() { @@ -1062,7 +1154,7 @@ var FormulateInputText = normalizeComponent_1( { render: __vue_render__$4, staticRenderFns: __vue_staticRenderFns__$4 }, __vue_inject_styles__$4, - __vue_script__$3, + __vue_script__$4, __vue_scope_id__$4, __vue_is_functional_template__$4, __vue_module_identifier__$4, @@ -1072,7 +1164,7 @@ // - var script$4 = { + var script$5 = { name: 'FormulateInputSelect', mixins: [FormulateInputMixin], computed: { @@ -1089,7 +1181,7 @@ }; /* script */ - var __vue_script__$4 = script$4; + var __vue_script__$5 = script$5; /* template */ var __vue_render__$5 = function() { @@ -1219,7 +1311,7 @@ var FormulateInputSelect = normalizeComponent_1( { render: __vue_render__$5, staticRenderFns: __vue_staticRenderFns__$5 }, __vue_inject_styles__$5, - __vue_script__$4, + __vue_script__$5, __vue_scope_id__$5, __vue_is_functional_template__$5, __vue_module_identifier__$5, @@ -1229,13 +1321,13 @@ // - var script$5 = { + var script$6 = { name: 'FormulateInputTextArea', mixins: [FormulateInputMixin] }; /* script */ - var __vue_script__$5 = script$5; + var __vue_script__$6 = script$6; /* template */ var __vue_render__$6 = function() { @@ -1298,7 +1390,7 @@ var FormulateInputTextArea = normalizeComponent_1( { render: __vue_render__$6, staticRenderFns: __vue_staticRenderFns__$6 }, __vue_inject_styles__$6, - __vue_script__$5, + __vue_script__$6, __vue_scope_id__$6, __vue_is_functional_template__$6, __vue_module_identifier__$6, diff --git a/src/FormulateForm.vue b/src/FormulateForm.vue index 20d8b51..79e2aed 100644 --- a/src/FormulateForm.vue +++ b/src/FormulateForm.vue @@ -1,5 +1,56 @@ + + diff --git a/src/FormulateInput.vue b/src/FormulateInput.vue index c6a1458..bf40a09 100644 --- a/src/FormulateInput.vue +++ b/src/FormulateInput.vue @@ -46,11 +46,14 @@ import context from './libs/context' import { shallowEqualObjects } from './libs/utils' import nanoid from 'nanoid' -import library from './libs/library' export default { name: 'FormulateInput', inheritAttrs: false, + inject: { + formulateFormSetter: { default: undefined }, + formulateFormRegister: { default: undefined } + }, model: { prop: 'formulateValue', event: 'input' @@ -60,14 +63,18 @@ export default { type: String, default: 'text' }, + name: { + type: [Boolean, String], + default: true + }, + /* eslint-disable */ formulateValue: { - type: [String, Number, Object, Boolean, Array], - default: '' + default: undefined }, value: { - type: [String, Number, Object, Boolean, Array], default: false }, + /* eslint-enable */ options: { type: [Object, Array, Boolean], default: false @@ -122,6 +129,9 @@ export default { } }, created () { + if (this.formulateFormRegister && typeof this.formulateFormRegister === 'function') { + this.formulateFormRegister(this.name, this) + } this.updateLocalAttributes(this.$attrs) }, mounted () { diff --git a/src/FormulateInputMixin.js b/src/FormulateInputMixin.js index df713e2..9d5c4bd 100644 --- a/src/FormulateInputMixin.js +++ b/src/FormulateInputMixin.js @@ -2,18 +2,10 @@ * Default base for input components. */ export default { - model: { - prop: 'formulateValue', - event: 'input' - }, props: { context: { type: Object, required: true - }, - formulateValue: { - type: [Object, Array, Boolean, String, Number], - default: '' } }, computed: { @@ -27,7 +19,7 @@ export default { return this.context.attributes || {} }, hasValue () { - return !!this.model + return !!this.context.model } } } diff --git a/src/libs/context.js b/src/libs/context.js index ebf9eed..d351faa 100644 --- a/src/libs/context.js +++ b/src/libs/context.js @@ -1,5 +1,5 @@ import nanoid from 'nanoid' -import { reduce, map } from './utils' +import { map } from './utils' /** * For a single instance of an input, export all of the context needed to fully @@ -14,6 +14,7 @@ export default { return defineModel.call(this, { type: this.type, value: this.value, + name: this.nameOrFallback, classification: this.classification, component: this.component, id: this.id || this.defaultId, @@ -23,6 +24,7 @@ export default { ...this.typeContext }) }, + nameOrFallback, typeContext, elementAttributes, logicalLabelPosition @@ -83,6 +85,19 @@ function logicalLabelPosition () { } } +/** + * Return the element’s name, or select a fallback. + */ +function nameOrFallback () { + if (this.name === true) { + return `${this.type}_${this.elementAttributes.id}` + } + if (this.name === false) { + return false + } + return this.name +} + /** * Given an object or array of options, create an array of objects with label, * value, and id. @@ -121,7 +136,7 @@ function modelGetter () { if (this.type === 'checkbox' && !Array.isArray(this.formulateValue) && this.options) { return [] } - if (this.formulateValue === false) { + if (!this.formulateValue) { return '' } return this.formulateValue @@ -132,4 +147,7 @@ function modelGetter () { **/ function modelSetter (value) { this.$emit('input', value) + if (this.context.name && typeof this.formulateFormSetter === 'function') { + this.formulateFormSetter(this.context.name, value) + } }