* Adds support form FormulateError form errors * Adds support for form-errors prop Also includes tests for both named-form-errors as well, form-errors prop, positioning form errors with the <FormulateErrors /> component, and allowing multiple <FormulateErrors /> * Adds form error support, error handling, and supporting tests * Remove unused util functions * fixes bug that resulted in validation failing if run more than once Credit to @luan-nk-nguyen for discovering the bug Co-authored-by: Andrew Boyd <andrew@wearebraid.com>
63 lines
1.4 KiB
Vue
63 lines
1.4 KiB
Vue
<template>
|
|
<div class="formulate-input-group">
|
|
<component
|
|
:is="subComponent"
|
|
v-for="optionContext in optionsWithContext"
|
|
:key="optionContext.id"
|
|
v-model="context.model"
|
|
v-bind="optionContext"
|
|
:disable-errors="true"
|
|
class="formulate-input-group-item"
|
|
@blur="context.blurHandler"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'FormulateInputGroup',
|
|
props: {
|
|
context: {
|
|
type: Object,
|
|
required: true
|
|
}
|
|
},
|
|
computed: {
|
|
options () {
|
|
return this.context.options || []
|
|
},
|
|
subComponent () {
|
|
// @todo - rough-in for future flexible input-groups
|
|
return 'FormulateInput'
|
|
},
|
|
optionsWithContext () {
|
|
const {
|
|
// The following are a list of items to pull out of the context object
|
|
options,
|
|
labelPosition,
|
|
attributes: { id, ...groupApplicableAttributes },
|
|
classification,
|
|
blurHandler,
|
|
performValidation,
|
|
hasValidationErrors,
|
|
component,
|
|
hasLabel,
|
|
...context
|
|
} = this.context
|
|
return this.options.map(option => this.groupItemContext(
|
|
context,
|
|
option,
|
|
groupApplicableAttributes
|
|
))
|
|
}
|
|
},
|
|
methods: {
|
|
groupItemContext (context, option, groupAttributes) {
|
|
const optionAttributes = {}
|
|
const ctx = Object.assign({}, context, option, groupAttributes, optionAttributes)
|
|
return ctx
|
|
}
|
|
}
|
|
}
|
|
</script>
|