Removes the original source code
This commit is contained in:
Justin Schroeder
parent
778d6b8731
commit
6690ab3576
@ -1,5 +1,5 @@
|
||||
{
|
||||
"name": "@braid/vue-formulate-next",
|
||||
"name": "@braid/vue-formulate",
|
||||
"version": "2.0.0-alpha.1",
|
||||
"description": "The easiest way to build forms in Vue.",
|
||||
"main": "dist/formulate.umd.js",
|
||||
|
||||
@ -1,181 +0,0 @@
|
||||
<template>
|
||||
<form
|
||||
@submit.prevent="submit"
|
||||
class="formulate-form"
|
||||
>
|
||||
<slot />
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {equals, reduce} from '../utils'
|
||||
import cloneDeep from 'clone-deep'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
module: {
|
||||
type: [String, Boolean],
|
||||
default: function () {
|
||||
return this.$formulate.options.vuexModule
|
||||
}
|
||||
},
|
||||
initial: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
behavior: {
|
||||
type: String,
|
||||
default: 'blur'
|
||||
},
|
||||
showErrors: {
|
||||
type: [Boolean, Object],
|
||||
default: () => ({})
|
||||
},
|
||||
errors: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
},
|
||||
prevent: {
|
||||
type: String,
|
||||
default: 'validation'
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
parentIdentifier: 'vue-formulate-wrapper-element',
|
||||
forceErrors: null,
|
||||
fieldInitials: {},
|
||||
whenFinishedValidating: Promise.resolve()
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
m () {
|
||||
return `${this.module ? this.module + '/' : ''}`
|
||||
},
|
||||
hasErrors () {
|
||||
return this.$store.getters[`${this.m}hasErrors`][this.name] || false
|
||||
},
|
||||
hasValidationErrors () {
|
||||
return this.$store.getters[`${this.m}hasValidationErrors`][this.name] || false
|
||||
},
|
||||
values () {
|
||||
return cloneDeep(this.$store.getters[`${this.m}formValues`][this.name] || {})
|
||||
},
|
||||
storeErrors () {
|
||||
return this.$store.getters[`${this.m}formErrors`][this.name] || {}
|
||||
},
|
||||
validationErrors () {
|
||||
return this.$store.getters[`${this.m}formValidationErrors`][this.name] || {}
|
||||
},
|
||||
fields () {
|
||||
return this.$store.getters[`${this.m}formMeta`][this.name] || []
|
||||
},
|
||||
shouldShowErrors () {
|
||||
if (this.forceErrors === false || this.forceErrors === true) {
|
||||
return this.forceErrors
|
||||
}
|
||||
if (this.showErrors === false || this.showErrors === true) {
|
||||
return this.showErrors
|
||||
}
|
||||
return this.behavior === 'live'
|
||||
},
|
||||
mergedInitial () {
|
||||
return Object.assign({}, this.initial, this.fieldInitials)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
mergedInitial () {
|
||||
this.hydrate(this.mergedInitial)
|
||||
},
|
||||
values () {
|
||||
this.updateFormValidation()
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.hydrate(this.mergedInitial)
|
||||
},
|
||||
mounted () {
|
||||
this.hydrate(this.mergedInitial)
|
||||
},
|
||||
methods: {
|
||||
registerField (field, data) {
|
||||
this.$store.commit(`${this.m}setFieldMeta`, {form: this.name, field, data})
|
||||
if (data.type !== 'submit') {
|
||||
this.$store.commit(`${this.m}setFieldValue`, {
|
||||
field,
|
||||
value: this.mergedInitial.hasOwnProperty(field) ? this.mergedInitial[field] : undefined,
|
||||
form: this.name
|
||||
})
|
||||
}
|
||||
},
|
||||
async deregisterField (field) {
|
||||
await this.whenFinishedValidating
|
||||
this.$store.commit(`${this.m}removeField`, {
|
||||
form: this.name,
|
||||
field
|
||||
})
|
||||
},
|
||||
hydrate (values) {
|
||||
for (let field of this.fields) {
|
||||
if (field.type !== 'submit' && typeof this.values[field.name] === 'undefined') {
|
||||
this.$store.commit(`${this.m}setFieldValue`, {
|
||||
field: field.name,
|
||||
value: values[field.name],
|
||||
form: this.name
|
||||
})
|
||||
}
|
||||
}
|
||||
},
|
||||
setInitial (field, value) {
|
||||
this.fieldInitials = Object.assign({}, this.fieldInitials, {[field]: value})
|
||||
},
|
||||
update (change) {
|
||||
this.$store.commit(`${this.m}setFieldValue`, Object.assign(change, {
|
||||
form: this.name
|
||||
}))
|
||||
},
|
||||
updateFieldErrors (change) {
|
||||
this.$store.commit(`${this.m}setFieldErrors`, Object.assign(change, {
|
||||
form: this.name
|
||||
}))
|
||||
},
|
||||
updateFieldValidationErrors (change) {
|
||||
this.$store.commit(`${this.m}setFieldValidationErrors`, Object.assign(change, {
|
||||
form: this.name
|
||||
}))
|
||||
},
|
||||
async validateField ({field, validation, label}) {
|
||||
let errors = await this.$formulate.validationErrors({
|
||||
field,
|
||||
value: this.values[field],
|
||||
label
|
||||
}, validation, this.values)
|
||||
if (!equals(errors || [], (this.validationErrors[field] || []))) {
|
||||
if (this.fields.find(f => f.name === field)) {
|
||||
this.updateFieldValidationErrors({field, errors: errors || []})
|
||||
}
|
||||
}
|
||||
return errors
|
||||
},
|
||||
async updateFormValidation () {
|
||||
await this.whenFinishedValidating
|
||||
this.whenFinishedValidating = Promise.all(this.fields.map(async field => this.validateField({
|
||||
field: field.name,
|
||||
validation: field.validation,
|
||||
label: field.validationLabel || field.label || field.name
|
||||
})))
|
||||
},
|
||||
submit () {
|
||||
if ((this.prevent === 'validation' && this.hasValidationErrors) || (this.prevent === 'any' && this.hasErrors)) {
|
||||
this.forceErrors = true
|
||||
} else {
|
||||
this.$emit('submit', Object.assign({}, this.values))
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,458 +0,0 @@
|
||||
<template>
|
||||
<div :class="classes">
|
||||
<slot name="prefix" />
|
||||
<div
|
||||
class="formulate-element-input-wrapper"
|
||||
:data-type="type"
|
||||
:data-classification="classification"
|
||||
:data-is-disabled="disabled"
|
||||
>
|
||||
<!-- TEXT STYLE INPUTS -->
|
||||
<label
|
||||
:for="id"
|
||||
v-text="label"
|
||||
v-if="label && (!isBoxInput || optionList.length > 1)"
|
||||
/>
|
||||
<input
|
||||
ref="input"
|
||||
:class="elementClasses"
|
||||
:type="type"
|
||||
:name="name"
|
||||
v-model="val"
|
||||
v-bind="attributes"
|
||||
v-if="isTextInput"
|
||||
@blur="setBlurState"
|
||||
@focus="setFocusState"
|
||||
:disabled="disabled"
|
||||
:step="step"
|
||||
>
|
||||
<textarea
|
||||
ref="textarea"
|
||||
:class="elementClasses"
|
||||
:type="type"
|
||||
:name="name"
|
||||
v-model="val"
|
||||
v-bind="attributes"
|
||||
v-if="isTextareaInput"
|
||||
@blur="setBlurState"
|
||||
@focus="setFocusState"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
<!-- BUTTON INPUTS -->
|
||||
<button
|
||||
:type="type"
|
||||
:class="elementClasses"
|
||||
v-if="isButtonInput"
|
||||
:disabled="disabled || (type === 'submit' && (form.hasErrors && form.behavior === 'live'))"
|
||||
>
|
||||
<slot
|
||||
v-if="$slots.button"
|
||||
name="button"
|
||||
/>
|
||||
<span
|
||||
v-text="label || name"
|
||||
v-else
|
||||
/>
|
||||
</button>
|
||||
<!-- SELECT INPUTS -->
|
||||
<select
|
||||
v-bind="attributes"
|
||||
v-if="isSelectInput"
|
||||
:class="elementClasses"
|
||||
:name="name"
|
||||
v-model="val"
|
||||
@blur="setBlurState"
|
||||
@focus="setFocusState"
|
||||
:disabled="disabled"
|
||||
>
|
||||
<template
|
||||
v-if="!optionGroups"
|
||||
>
|
||||
<option
|
||||
v-for="option in optionList"
|
||||
:value="option.value"
|
||||
:key="option.id"
|
||||
v-bind="option.attributes || {}"
|
||||
v-text="option.label"
|
||||
/>
|
||||
</template>
|
||||
<template
|
||||
v-else
|
||||
>
|
||||
<optgroup
|
||||
v-for="(list, label) in optionGroups"
|
||||
:key="label"
|
||||
:label="label"
|
||||
>
|
||||
<option
|
||||
v-for="option in createOptionList(list)"
|
||||
:value="option.value"
|
||||
:key="option.value"
|
||||
v-bind="option.attributes || {}"
|
||||
v-text="option.label"
|
||||
/>
|
||||
</optgroup>
|
||||
</template>
|
||||
</select>
|
||||
<!-- BOX INPUTS -->
|
||||
<div
|
||||
class="formulate-element-box-input-wrap"
|
||||
v-if="isBoxInput"
|
||||
>
|
||||
<div
|
||||
class="formulate-element-box-input-group"
|
||||
v-for="option in optionList"
|
||||
:key="option.id"
|
||||
>
|
||||
<input
|
||||
type="radio"
|
||||
:class="elementClasses"
|
||||
:name="name"
|
||||
:id="option.id"
|
||||
:value="option.value"
|
||||
:key="`${option.id}-input`"
|
||||
v-bind="attributes"
|
||||
v-model="val"
|
||||
v-if="type === 'radio'"
|
||||
@blur="setBlurState"
|
||||
@focus="setFocusState"
|
||||
:disabled="disabled || option.disabled"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:class="elementClasses"
|
||||
:name="name"
|
||||
:id="option.id"
|
||||
:value="option.value"
|
||||
:key="`${option.id}-input`"
|
||||
v-bind="attributes"
|
||||
v-model="val"
|
||||
v-if="type === 'checkbox'"
|
||||
@blur="setBlurState"
|
||||
@focus="setFocusState"
|
||||
:disabled="disabled || option.disabled"
|
||||
>
|
||||
<label
|
||||
:for="option.id"
|
||||
:key="`${option.id}-label`"
|
||||
v-text="option.label"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- CUSTOM SLOT INPUTS -->
|
||||
<slot v-if="hasCustomInput" />
|
||||
|
||||
<!-- UNSUPPORTED INPUT -->
|
||||
<div
|
||||
style="background-color: red; color: white"
|
||||
v-if="isUnsupportedInput"
|
||||
v-text="`Unsupported field type: “${type}”.`"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
class="formulate-help"
|
||||
v-if="help"
|
||||
v-text="help"
|
||||
/>
|
||||
<transition
|
||||
name="formulate-errors"
|
||||
>
|
||||
<transition-group
|
||||
tag="ul"
|
||||
name="formulate-error-list"
|
||||
class="formulate-errors"
|
||||
v-if="shouldShowErrors && localAndValidationErrors.length"
|
||||
>
|
||||
<li
|
||||
v-for="error in localAndValidationErrors"
|
||||
v-text="error"
|
||||
:key="error"
|
||||
/>
|
||||
</transition-group>
|
||||
</transition>
|
||||
<slot name="suffix" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {inputTypes, equals, reduce, filter} from '../utils'
|
||||
import shortid from 'shortid'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
type: {
|
||||
type: [String, Boolean],
|
||||
default: 'text'
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
initial: {
|
||||
type: [String, Number, Boolean],
|
||||
default: false
|
||||
},
|
||||
validation: {
|
||||
type: [String, Boolean],
|
||||
default: false
|
||||
},
|
||||
errors: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
label: {
|
||||
type: [String, Boolean],
|
||||
default: false
|
||||
},
|
||||
id: {
|
||||
type: [String],
|
||||
default: () => shortid.generate()
|
||||
},
|
||||
min: {
|
||||
type: [String, Number, Boolean],
|
||||
default: () => false
|
||||
},
|
||||
max: {
|
||||
type: [String, Number, Boolean],
|
||||
default: () => false
|
||||
},
|
||||
maxlength: {
|
||||
type: [String, Number, Boolean],
|
||||
default: () => false
|
||||
},
|
||||
pattern: {
|
||||
type: [String, Number, Boolean],
|
||||
default: () => false
|
||||
},
|
||||
minlength: {
|
||||
type: [String, Number, Boolean],
|
||||
default: () => false
|
||||
},
|
||||
placeholder: {
|
||||
type: [String, Number, Boolean],
|
||||
default: () => false
|
||||
},
|
||||
step: {
|
||||
type: [String, Number, Boolean],
|
||||
default: () => false
|
||||
},
|
||||
options: {
|
||||
type: [Object, Array],
|
||||
default: () => []
|
||||
},
|
||||
optionGroups: {
|
||||
type: [Boolean, Object],
|
||||
default: false,
|
||||
validator: function (value) {
|
||||
if (value === false) {
|
||||
return true
|
||||
} else if (typeof value === 'boolean') {
|
||||
return false
|
||||
}
|
||||
return true
|
||||
}
|
||||
},
|
||||
multiple: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
showErrors: {
|
||||
type: [Object, Boolean],
|
||||
default: () => ({})
|
||||
},
|
||||
validationLabel: {
|
||||
type: [String, Boolean],
|
||||
default: false
|
||||
},
|
||||
elementClasses: {
|
||||
type: [String, Array, Object],
|
||||
default: () => {}
|
||||
},
|
||||
disabled: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
help: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
errorBlurState: false,
|
||||
focusState: false
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
classification () {
|
||||
if (this.isTextInput) return 'text'
|
||||
if (this.isTextareaInput) return 'textarea'
|
||||
if (this.isBoxInput) return 'box'
|
||||
if (this.isButtonInput) return 'button'
|
||||
if (this.isSelectInput) return 'select'
|
||||
if (this.hasCustomInput) return 'custom'
|
||||
return 'unsupported'
|
||||
},
|
||||
hasCustomInput () {
|
||||
return (this.$slots.default && this.$slots.default.length)
|
||||
},
|
||||
isTextInput () {
|
||||
return !this.hasCustomInput && inputTypes.text.includes(this.type)
|
||||
},
|
||||
isTextareaInput () {
|
||||
return !this.hasCustomInput && inputTypes.textarea.includes(this.type)
|
||||
},
|
||||
isButtonInput () {
|
||||
return !this.hasCustomInput && inputTypes.button.includes(this.type)
|
||||
},
|
||||
isSelectInput () {
|
||||
return !this.hasCustomInput && inputTypes.select.includes(this.type)
|
||||
},
|
||||
isBoxInput () {
|
||||
return !this.hasCustomInput && inputTypes.box.includes(this.type)
|
||||
},
|
||||
isUnsupportedInput () {
|
||||
return (!this.hasCustomInput && !this.isTextInput && !this.isButtonInput && !this.isSelectInput && !this.isBoxInput && !this.isTextareaInput)
|
||||
},
|
||||
form () {
|
||||
let parent = this.$parent
|
||||
while (parent && parent.$data && parent.$data.parentIdentifier !== 'vue-formulate-wrapper-element') {
|
||||
parent = parent.$parent
|
||||
}
|
||||
if (!parent.$data || parent.$data.parentIdentifier !== 'vue-formulate-wrapper-element') {
|
||||
throw new Error('FormulateElement has no FormulateWrapper element')
|
||||
}
|
||||
return parent
|
||||
},
|
||||
values () {
|
||||
return this.form.values
|
||||
},
|
||||
value () {
|
||||
let value = this.values[this.name]
|
||||
if (value === undefined) {
|
||||
switch (this.type) {
|
||||
case 'color':
|
||||
return '#000000'
|
||||
case 'checkbox':
|
||||
if (this.optionList.length > 1) {
|
||||
return []
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
return value
|
||||
},
|
||||
module () {
|
||||
return this.form.$props['module']
|
||||
},
|
||||
formName () {
|
||||
return this.form.$props['name']
|
||||
},
|
||||
classes () {
|
||||
return {
|
||||
'formulate-element': true,
|
||||
[`formulate-element--type--${this.type}`]: true,
|
||||
'formulate-element--has-value': !!this.value,
|
||||
'formulate-element--has-errors': this.localAndValidationErrors.length && this.shouldShowErrors,
|
||||
'formulate-element--has-prefix': !!this.$slots.prefix,
|
||||
'formulate-element--has-suffix': !!this.$slots.suffix,
|
||||
'formulate-element--has-focus': !!this.focusState
|
||||
}
|
||||
},
|
||||
validationErrors () {
|
||||
return this.form.validationErrors[this.name] || []
|
||||
},
|
||||
storeErrors () {
|
||||
return this.form.storeErrors[this.name] || []
|
||||
},
|
||||
formErrors () {
|
||||
return this.form.errors[this.name] || []
|
||||
},
|
||||
localAndValidationErrors () {
|
||||
return this.errors.concat(this.validationErrors).concat(this.formErrors)
|
||||
},
|
||||
shouldShowErrors () {
|
||||
let show = this.form.shouldShowErrors
|
||||
if (this.form.behavior === 'blur') {
|
||||
show = show || this.errorBlurState
|
||||
}
|
||||
if (this.showErrors === false || this.showErrors === true) {
|
||||
show = this.showErrors
|
||||
}
|
||||
return show
|
||||
},
|
||||
attributes () {
|
||||
return ['min', 'max', 'minlength', 'maxlength', 'placeholder', 'id', 'multiple', 'pattern']
|
||||
.filter(prop => this[prop] !== false)
|
||||
.reduce((attributes, attr) => {
|
||||
attributes[attr] = this[attr]
|
||||
return attributes
|
||||
}, {})
|
||||
},
|
||||
optionList () {
|
||||
return this.createOptionList(this.options)
|
||||
},
|
||||
val: {
|
||||
set (value) {
|
||||
this.form.update({field: this.name, value})
|
||||
if (this.isTextInput) {
|
||||
this.$refs.input.value = value
|
||||
}
|
||||
},
|
||||
get () {
|
||||
return this.value
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
localAndValidationErrors () {
|
||||
if (!equals(this.localAndValidationErrors, this.storeErrors)) {
|
||||
this.form.updateFieldErrors({
|
||||
field: this.name,
|
||||
errors: this.localAndValidationErrors
|
||||
})
|
||||
}
|
||||
},
|
||||
initial () {
|
||||
this.form.update({field: this.name, value: this.initial})
|
||||
}
|
||||
},
|
||||
created () {
|
||||
if (typeof window === 'undefined') {
|
||||
this.register()
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.register()
|
||||
},
|
||||
beforeDestroy () {
|
||||
this.form.deregisterField(this.name)
|
||||
},
|
||||
methods: {
|
||||
register () {
|
||||
this.form.registerField(
|
||||
this.name,
|
||||
filter(this.$props, (prop, value) => ['name', 'type', 'id', 'label', 'validation', 'validationLabel'].includes(prop))
|
||||
)
|
||||
if (this.initial !== false) {
|
||||
this.form.setInitial(this.name, this.initial)
|
||||
}
|
||||
},
|
||||
setBlurState () {
|
||||
this.errorBlurState = true
|
||||
this.focusState = false
|
||||
},
|
||||
setFocusState () {
|
||||
this.focusState = true
|
||||
},
|
||||
createOptionList (options) {
|
||||
if (!Array.isArray(options)) {
|
||||
return reduce(options, (options, value, label) => options.concat({value, label, id: shortid.generate()}), [])
|
||||
} else if (Array.isArray(options) && !options.length) {
|
||||
return [{value: this.name, label: (this.label || this.name), id: shortid.generate()}]
|
||||
}
|
||||
return options
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -1,7 +0,0 @@
|
||||
export default {
|
||||
required: ({label, value}) => `${label} is required`,
|
||||
email: ({label, value}) => `${label} is invalid.`,
|
||||
confirmed: ({label, value}) => `${label} does not match the confirmation field.`,
|
||||
number: ({label, value}) => `${label} is not a number`,
|
||||
default: ({label, value}) => `This field is invalid.`
|
||||
}
|
||||
@ -1,115 +0,0 @@
|
||||
import FormulateGroup from './components/Formulate'
|
||||
import FormulateElement from './components/FormulateElement'
|
||||
import DefaultRules from './rules'
|
||||
import DefaultErrors from './errors'
|
||||
|
||||
class Formulate {
|
||||
/**
|
||||
* Initialize vue-formulate.
|
||||
*/
|
||||
constructor () {
|
||||
this.defaultOptions = {
|
||||
registerComponents: true,
|
||||
tags: {
|
||||
Formulate: 'formulate',
|
||||
FormulateElement: 'formulate-element'
|
||||
},
|
||||
errors: {},
|
||||
rules: {},
|
||||
vuexModule: false
|
||||
}
|
||||
this.errors = DefaultErrors
|
||||
this.rules = DefaultRules
|
||||
}
|
||||
|
||||
/**
|
||||
* Install vue-formulate as an instance of Vue.
|
||||
* @param {Vue} Vue
|
||||
*/
|
||||
install (Vue, options = {}) {
|
||||
Vue.prototype.$formulate = this
|
||||
options = Object.assign(this.defaultOptions, options)
|
||||
if (options.registerComponents) {
|
||||
Vue.component(options.tags.Formulate, FormulateGroup)
|
||||
Vue.component(options.tags.FormulateElement, FormulateElement)
|
||||
}
|
||||
if (options.errors) {
|
||||
this.errors = Object.assign(this.errors, options.errors)
|
||||
}
|
||||
if (options.rules) {
|
||||
this.rules = Object.assign(this.rules, options.rules)
|
||||
}
|
||||
this.options = options
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a string of rules parse them out to relevant pieces/parts
|
||||
* @param {string} rulesString
|
||||
*/
|
||||
parseRules (rulesString) {
|
||||
return rulesString.split('|')
|
||||
.map(rule => rule.trim())
|
||||
.map(rule => rule.match(/([a-zA-Z0-9]+)\((.*)?\)/) || [null, rule, ''])
|
||||
.map(([ruleString, rule, args]) => Object.assign({}, {rule}, args ? {
|
||||
args: args.split(',').map(arg => arg.trim())
|
||||
} : {args: []}))
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the function that generates a validation error message for a given
|
||||
* validation rule.
|
||||
* @param {string} rule
|
||||
*/
|
||||
errorFactory (rule) {
|
||||
return this.errors[rule] ? this.errors[rule] : this.errors['default']
|
||||
}
|
||||
|
||||
/**
|
||||
* Given a particular field, value, validation rules, and form values
|
||||
* perform asynchronous field validation.
|
||||
* @param {Object} validatee
|
||||
* @param {string} rulesString
|
||||
* @param {Object} values
|
||||
*/
|
||||
async validationErrors ({field, value, label}, rulesString, values) {
|
||||
return rulesString ? Promise.all(
|
||||
this.parseRules(rulesString)
|
||||
.map(({rule, args}) => {
|
||||
if (typeof this.rules[rule] !== 'function') {
|
||||
throw new Error(`Validation rule is invalid: ${rule}`)
|
||||
}
|
||||
return this.rules[rule]({field, value, label, error: this.errorFactory(rule), values}, ...args)
|
||||
})
|
||||
).then(responses => responses.reduce((errors, error) => {
|
||||
return error ? (Array.isArray(errors) ? errors.concat(error) : [error]) : errors
|
||||
}, false)) : false
|
||||
}
|
||||
}
|
||||
const formulate = new Formulate()
|
||||
export default formulate
|
||||
export * from './store'
|
||||
|
||||
/**
|
||||
* Mapper to allow bindings to the vuex store for custom fields.
|
||||
* @param {Object} definitions
|
||||
*/
|
||||
export const mapModels = (definitions) => {
|
||||
const models = {}
|
||||
for (let mapTo in definitions) {
|
||||
let [form, field] = definitions[mapTo].split('/')
|
||||
models[mapTo] = {
|
||||
set (value) {
|
||||
let m = formulate.options.vuexModule ? `${formulate.options.vuexModule}/` : ''
|
||||
this.$store.commit(`${m}setFieldValue`, {form, field, value})
|
||||
},
|
||||
get () {
|
||||
let m = formulate.options.vuexModule ? `${formulate.options.vuexModule}/` : ''
|
||||
if (this.$store.getters[`${m}formValues`][form]) {
|
||||
return this.$store.getters[`${m}formValues`][form][field]
|
||||
}
|
||||
return ''
|
||||
}
|
||||
}
|
||||
}
|
||||
return models
|
||||
}
|
||||
@ -1,41 +0,0 @@
|
||||
export default {
|
||||
/**
|
||||
* Validate a required field.
|
||||
* @param {Object} field
|
||||
* @param {string} label
|
||||
*/
|
||||
async required ({value, error}) {
|
||||
return (!value || (Array.isArray(value) && !value.length)) ? error(...arguments) : false
|
||||
},
|
||||
|
||||
/**
|
||||
* Validates the field contains only numbers
|
||||
* @param {Object} field
|
||||
* @param {string} label
|
||||
*/
|
||||
async number ({value, error}) {
|
||||
return isNaN(value) ? error(...arguments) : false
|
||||
},
|
||||
|
||||
/**
|
||||
* Validate email addresses
|
||||
* @param {Object} field
|
||||
* @param {string} label
|
||||
*/
|
||||
async email ({value, error}) {
|
||||
// eslint-disable-next-line
|
||||
var re = /^(?:[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&'*+/=?^_`{|}~-]+)*|"(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21\x23-\x5b\x5d-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])*")@(?:(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?|\[(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?|[a-z0-9-]*[a-z0-9]:(?:[\x01-\x08\x0b\x0c\x0e-\x1f\x21-\x5a\x53-\x7f]|\\[\x01-\x09\x0b\x0c\x0e-\x7f])+)\])$/;
|
||||
return (value && !re.test(value.toLowerCase())) ? error(...arguments) : false
|
||||
},
|
||||
|
||||
/**
|
||||
* Check if a particular field is matches another field in the form.
|
||||
* @param {Object} field
|
||||
* @param {string} label
|
||||
* @param {string} confirmField (uses `${field}_confirmation` by default)
|
||||
*/
|
||||
async confirmed ({field, value, error, values}, confirmField) {
|
||||
confirmField = confirmField || `${field}_confirmation`
|
||||
return (value && value !== values[confirmField]) ? error(...arguments) : false
|
||||
}
|
||||
}
|
||||
112
src~v1/store.js
112
src~v1/store.js
@ -1,112 +0,0 @@
|
||||
import {map, reduce, filter} from './utils'
|
||||
|
||||
/**
|
||||
* Curried function for creating the formState
|
||||
* @param {Object} options
|
||||
*/
|
||||
export const formulateState = (options = {}) => () => Object.assign({
|
||||
values: {},
|
||||
errors: {},
|
||||
validationErrors: {},
|
||||
meta: {}
|
||||
}, options)
|
||||
|
||||
/**
|
||||
* Function for creating the formGetters
|
||||
* @param {string} module
|
||||
* @param {Object} getters
|
||||
*/
|
||||
export const formulateGetters = (moduleName = '', getters = {}) => Object.assign({
|
||||
formValues (state) {
|
||||
return state.values
|
||||
},
|
||||
formErrors (state) {
|
||||
return state.errors
|
||||
},
|
||||
formValidationErrors (state) {
|
||||
return state.validationErrors
|
||||
},
|
||||
formMeta (state) {
|
||||
return reduce(state.meta, (forms, form, fields) => {
|
||||
forms[form] = reduce(fields, (arr, field, data) => arr.concat(data), [])
|
||||
return forms
|
||||
}, {})
|
||||
},
|
||||
hasErrors (state) {
|
||||
return map(state.errors, (form, errors) => {
|
||||
return reduce(errors, (hasErrors, field, errors) => hasErrors || !!errors.length, false)
|
||||
})
|
||||
},
|
||||
hasValidationErrors (state) {
|
||||
return map(state.validationErrors, (form, errors) => {
|
||||
return reduce(errors, (hasErrors, field, errors) => hasErrors || !!errors.length, false)
|
||||
})
|
||||
}
|
||||
}, getters)
|
||||
|
||||
/**
|
||||
* Function for creating the formActions
|
||||
* @param {string} moduleName
|
||||
* @param {Object} actions
|
||||
*/
|
||||
export const formulateActions = (moduleName = '', actions = {}) => Object.assign({
|
||||
}, actions)
|
||||
|
||||
/**
|
||||
* Function for creating the formMutations
|
||||
* @param {Object} mutations
|
||||
*/
|
||||
export const formulateMutations = (mutations = {}) => Object.assign({
|
||||
setFieldValue (state, {form, field, value}) {
|
||||
state.values = Object.assign({}, state.values, {
|
||||
[form]: Object.assign({}, state.values[form] || {}, {[field]: value})
|
||||
})
|
||||
},
|
||||
setFieldErrors (state, {form, field, errors}) {
|
||||
state.errors = Object.assign({}, state.errors, {
|
||||
[form]: Object.assign({}, state.errors[form] || {}, {[field]: errors})
|
||||
})
|
||||
},
|
||||
setFieldValidationErrors (state, {form, field, errors}) {
|
||||
state.validationErrors = Object.assign({}, state.validationErrors, {
|
||||
[form]: Object.assign({}, state.validationErrors[form] || {}, {[field]: errors})
|
||||
})
|
||||
},
|
||||
setFieldMeta (state, {form, field, data}) {
|
||||
state.meta = Object.assign({}, state.meta, {
|
||||
[form]: Object.assign({}, state.meta[form] || {}, {[field]: data})
|
||||
})
|
||||
},
|
||||
resetForm (state, form) {
|
||||
if (state.values[form]) {
|
||||
state.values = Object.assign({}, state.values, {
|
||||
[form]: map(state.values[form], (key, value) => undefined)
|
||||
})
|
||||
}
|
||||
},
|
||||
removeField (state, {form, field}) {
|
||||
for (let group in state) {
|
||||
if (state[group][form] && state[group][form].hasOwnProperty(field)) {
|
||||
state[group][form] = filter(state[group][form], (key, value) => key !== field)
|
||||
}
|
||||
}
|
||||
},
|
||||
removeFieldValidationErrors (state, {form, field}) {
|
||||
state.validationErrors = Object.assign({}, state.validationErrors, {
|
||||
[form]: filter(state.validationErrors[form] || {}, key => key !== field)
|
||||
})
|
||||
}
|
||||
}, mutations)
|
||||
|
||||
/**
|
||||
* Function for exposing a full vuex module.
|
||||
* @param {string} moduleName
|
||||
* @param {Object} validation
|
||||
*/
|
||||
export const formulateModule = (moduleName) => ({
|
||||
state: formulateState(),
|
||||
getters: formulateGetters(moduleName),
|
||||
actions: formulateActions(moduleName),
|
||||
mutations: formulateMutations(),
|
||||
namespaced: true
|
||||
})
|
||||
@ -1,95 +0,0 @@
|
||||
import cloneDeep from 'clone-deep'
|
||||
|
||||
/**
|
||||
* Compare the equality of two arrays.
|
||||
* @param {Array} arr1
|
||||
* @param {Array} arr2
|
||||
*/
|
||||
export function equals (arr1, arr2) {
|
||||
var length = arr1.length
|
||||
if (length !== arr2.length) return false
|
||||
for (var i = 0; i < length; i++) {
|
||||
if (arr1[i] !== arr2[i]) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
/**
|
||||
* Function to map over an object.
|
||||
* @param {Object} obj An object to map over
|
||||
* @param {Function} callback
|
||||
*/
|
||||
export function map (original, callback) {
|
||||
let obj = cloneDeep(original)
|
||||
for (let key in obj) {
|
||||
obj[key] = callback(key, obj[key])
|
||||
}
|
||||
return obj
|
||||
}
|
||||
|
||||
/**
|
||||
* Function to filter an object's properties
|
||||
* @param {Object} original
|
||||
* @param {Function} callback
|
||||
*/
|
||||
export function filter (original, callback) {
|
||||
let obj = {}
|
||||
for (let key in original) {
|
||||
if (callback(key, original[key])) {
|
||||
obj[key] = original[key]
|
||||
}
|
||||
}
|
||||
return obj
|
||||
}
|
||||
|
||||
/**
|
||||
* Function to reduce an object's properties
|
||||
* @param {Object} original
|
||||
* @param {Function} callback
|
||||
* @param {*} accumulator
|
||||
*/
|
||||
export function reduce (original, callback, accumulator) {
|
||||
for (let key in original) {
|
||||
accumulator = callback(accumulator, key, original[key])
|
||||
}
|
||||
return accumulator
|
||||
}
|
||||
|
||||
/**
|
||||
* Comprehensive list of input types supported.
|
||||
*/
|
||||
export const inputTypes = {
|
||||
text: [
|
||||
'text',
|
||||
'email',
|
||||
'number',
|
||||
'color',
|
||||
'date',
|
||||
'datetime-local',
|
||||
'hidden',
|
||||
'month',
|
||||
'password',
|
||||
'range',
|
||||
'search',
|
||||
'tel',
|
||||
'time',
|
||||
'url',
|
||||
'week'
|
||||
],
|
||||
button: [
|
||||
'submit',
|
||||
'button'
|
||||
],
|
||||
select: [
|
||||
'select'
|
||||
],
|
||||
box: [
|
||||
'radio',
|
||||
'checkbox'
|
||||
],
|
||||
textarea: [
|
||||
'textarea'
|
||||
]
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user