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

Initial reactivity for FormulateForm

Browse Source
This commit is contained in:
Justin Schroeder 2019-10-08 23:54:16 -04:00
parent 3ad166ac90
commit 942ff41ad9
7 changed files with 453 additions and 106 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

152
dist/formulate.esm.js vendored
View File

@ -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,

152
dist/formulate.min.js vendored
View File

@ -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,

152
dist/formulate.umd.js vendored
View File

@ -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,

53
src/FormulateForm.vue
View File

@ -1,5 +1,56 @@
<template>
<form>
<form
@submit.prevent="formSubmitted"
>
<slot />
</form>
</template>
<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>

18
src/FormulateInput.vue
View File

@ -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 () {

10
src/FormulateInputMixin.js
View File

@ -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
}
}
}

22
src/libs/context.js
View File

@ -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)
}
}