first
This commit is contained in:
Ivan
8
packages/form/index.js
Normal file
8
packages/form/index.js
Normal file
@@ -0,0 +1,8 @@
|
||||
import ElForm from './src/form';
|
||||
|
||||
/* istanbul ignore next */
|
||||
ElForm.install = function(Vue) {
|
||||
Vue.component(ElForm.name, ElForm);
|
||||
};
|
||||
|
||||
export default ElForm;
|
||||
319
packages/form/src/form-item.vue
Normal file
319
packages/form/src/form-item.vue
Normal file
@@ -0,0 +1,319 @@
|
||||
<template>
|
||||
<div class="el-form-item" :class="[{
|
||||
'el-form-item--feedback': elForm && elForm.statusIcon,
|
||||
'is-error': validateState === 'error',
|
||||
'is-validating': validateState === 'validating',
|
||||
'is-success': validateState === 'success',
|
||||
'is-required': isRequired || required,
|
||||
'is-no-asterisk': elForm && elForm.hideRequiredAsterisk
|
||||
},
|
||||
sizeClass ? 'el-form-item--' + sizeClass : ''
|
||||
]">
|
||||
<label-wrap
|
||||
:is-auto-width="labelStyle && labelStyle.width === 'auto'"
|
||||
:update-all="form.labelWidth === 'auto'">
|
||||
<label :for="labelFor" class="el-form-item__label" :style="labelStyle" v-if="label || $slots.label">
|
||||
<slot name="label">{{label + form.labelSuffix}}</slot>
|
||||
</label>
|
||||
</label-wrap>
|
||||
<div class="el-form-item__content" :style="contentStyle">
|
||||
<slot></slot>
|
||||
<transition name="el-zoom-in-top">
|
||||
<slot
|
||||
v-if="validateState === 'error' && showMessage && form.showMessage"
|
||||
name="error"
|
||||
:error="validateMessage">
|
||||
<div
|
||||
class="el-form-item__error"
|
||||
:class="{
|
||||
'el-form-item__error--inline': typeof inlineMessage === 'boolean'
|
||||
? inlineMessage
|
||||
: (elForm && elForm.inlineMessage || false)
|
||||
}"
|
||||
>
|
||||
{{validateMessage}}
|
||||
</div>
|
||||
</slot>
|
||||
</transition>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AsyncValidator from 'async-validator';
|
||||
import emitter from 'element-ui/src/mixins/emitter';
|
||||
import objectAssign from 'element-ui/src/utils/merge';
|
||||
import { noop, getPropByPath } from 'element-ui/src/utils/util';
|
||||
import LabelWrap from './label-wrap';
|
||||
export default {
|
||||
name: 'ElFormItem',
|
||||
|
||||
componentName: 'ElFormItem',
|
||||
|
||||
mixins: [emitter],
|
||||
|
||||
provide() {
|
||||
return {
|
||||
elFormItem: this
|
||||
};
|
||||
},
|
||||
|
||||
inject: ['elForm'],
|
||||
|
||||
props: {
|
||||
label: String,
|
||||
labelWidth: String,
|
||||
prop: String,
|
||||
required: {
|
||||
type: Boolean,
|
||||
default: undefined
|
||||
},
|
||||
rules: [Object, Array],
|
||||
error: String,
|
||||
validateStatus: String,
|
||||
for: String,
|
||||
inlineMessage: {
|
||||
type: [String, Boolean],
|
||||
default: ''
|
||||
},
|
||||
showMessage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
size: String
|
||||
},
|
||||
components: {
|
||||
// use this component to calculate auto width
|
||||
LabelWrap
|
||||
},
|
||||
watch: {
|
||||
error: {
|
||||
immediate: true,
|
||||
handler(value) {
|
||||
this.validateMessage = value;
|
||||
this.validateState = value ? 'error' : '';
|
||||
}
|
||||
},
|
||||
validateStatus(value) {
|
||||
this.validateState = value;
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
labelFor() {
|
||||
return this.for || this.prop;
|
||||
},
|
||||
labelStyle() {
|
||||
const ret = {};
|
||||
if (this.form.labelPosition === 'top') return ret;
|
||||
const labelWidth = this.labelWidth || this.form.labelWidth;
|
||||
if (labelWidth) {
|
||||
ret.width = labelWidth;
|
||||
}
|
||||
return ret;
|
||||
},
|
||||
contentStyle() {
|
||||
const ret = {};
|
||||
const label = this.label;
|
||||
if (this.form.labelPosition === 'top' || this.form.inline) return ret;
|
||||
if (!label && !this.labelWidth && this.isNested) return ret;
|
||||
const labelWidth = this.labelWidth || this.form.labelWidth;
|
||||
if (labelWidth === 'auto') {
|
||||
if (this.labelWidth === 'auto') {
|
||||
ret.marginLeft = this.computedLabelWidth;
|
||||
} else if (this.form.labelWidth === 'auto') {
|
||||
ret.marginLeft = this.elForm.autoLabelWidth;
|
||||
}
|
||||
} else {
|
||||
ret.marginLeft = labelWidth;
|
||||
}
|
||||
return ret;
|
||||
},
|
||||
form() {
|
||||
let parent = this.$parent;
|
||||
let parentName = parent.$options.componentName;
|
||||
while (parentName !== 'ElForm') {
|
||||
if (parentName === 'ElFormItem') {
|
||||
this.isNested = true;
|
||||
}
|
||||
parent = parent.$parent;
|
||||
parentName = parent.$options.componentName;
|
||||
}
|
||||
return parent;
|
||||
},
|
||||
fieldValue() {
|
||||
const model = this.form.model;
|
||||
if (!model || !this.prop) { return; }
|
||||
|
||||
let path = this.prop;
|
||||
if (path.indexOf(':') !== -1) {
|
||||
path = path.replace(/:/, '.');
|
||||
}
|
||||
|
||||
return getPropByPath(model, path, true).v;
|
||||
},
|
||||
isRequired() {
|
||||
let rules = this.getRules();
|
||||
let isRequired = false;
|
||||
|
||||
if (rules && rules.length) {
|
||||
rules.every(rule => {
|
||||
if (rule.required) {
|
||||
isRequired = true;
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
return isRequired;
|
||||
},
|
||||
_formSize() {
|
||||
return this.elForm.size;
|
||||
},
|
||||
elFormItemSize() {
|
||||
return this.size || this._formSize;
|
||||
},
|
||||
sizeClass() {
|
||||
return this.elFormItemSize || (this.$ELEMENT || {}).size;
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
validateState: '',
|
||||
validateMessage: '',
|
||||
validateDisabled: false,
|
||||
validator: {},
|
||||
isNested: false,
|
||||
computedLabelWidth: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
validate(trigger, callback = noop) {
|
||||
this.validateDisabled = false;
|
||||
const rules = this.getFilteredRule(trigger);
|
||||
if ((!rules || rules.length === 0) && this.required === undefined) {
|
||||
callback();
|
||||
return true;
|
||||
}
|
||||
|
||||
this.validateState = 'validating';
|
||||
|
||||
const descriptor = {};
|
||||
if (rules && rules.length > 0) {
|
||||
rules.forEach(rule => {
|
||||
delete rule.trigger;
|
||||
});
|
||||
}
|
||||
descriptor[this.prop] = rules;
|
||||
|
||||
const validator = new AsyncValidator(descriptor);
|
||||
const model = {};
|
||||
|
||||
model[this.prop] = this.fieldValue;
|
||||
|
||||
validator.validate(model, { firstFields: true }, (errors, invalidFields) => {
|
||||
this.validateState = !errors ? 'success' : 'error';
|
||||
this.validateMessage = errors ? errors[0].message : '';
|
||||
|
||||
callback(this.validateMessage, invalidFields);
|
||||
this.elForm && this.elForm.$emit('validate', this.prop, !errors, this.validateMessage || null);
|
||||
});
|
||||
},
|
||||
clearValidate() {
|
||||
this.validateState = '';
|
||||
this.validateMessage = '';
|
||||
this.validateDisabled = false;
|
||||
},
|
||||
resetField() {
|
||||
this.validateState = '';
|
||||
this.validateMessage = '';
|
||||
|
||||
let model = this.form.model;
|
||||
let value = this.fieldValue;
|
||||
let path = this.prop;
|
||||
if (path.indexOf(':') !== -1) {
|
||||
path = path.replace(/:/, '.');
|
||||
}
|
||||
|
||||
let prop = getPropByPath(model, path, true);
|
||||
|
||||
this.validateDisabled = true;
|
||||
if (Array.isArray(value)) {
|
||||
prop.o[prop.k] = [].concat(this.initialValue);
|
||||
} else {
|
||||
prop.o[prop.k] = this.initialValue;
|
||||
}
|
||||
|
||||
// reset validateDisabled after onFieldChange triggered
|
||||
this.$nextTick(() => {
|
||||
this.validateDisabled = false;
|
||||
});
|
||||
|
||||
this.broadcast('ElTimeSelect', 'fieldReset', this.initialValue);
|
||||
},
|
||||
getRules() {
|
||||
let formRules = this.form.rules;
|
||||
const selfRules = this.rules;
|
||||
const requiredRule = this.required !== undefined ? { required: !!this.required } : [];
|
||||
|
||||
const prop = getPropByPath(formRules, this.prop || '');
|
||||
formRules = formRules ? (prop.o[this.prop || ''] || prop.v) : [];
|
||||
|
||||
return [].concat(selfRules || formRules || []).concat(requiredRule);
|
||||
},
|
||||
getFilteredRule(trigger) {
|
||||
const rules = this.getRules();
|
||||
|
||||
return rules.filter(rule => {
|
||||
if (!rule.trigger || trigger === '') return true;
|
||||
if (Array.isArray(rule.trigger)) {
|
||||
return rule.trigger.indexOf(trigger) > -1;
|
||||
} else {
|
||||
return rule.trigger === trigger;
|
||||
}
|
||||
}).map(rule => objectAssign({}, rule));
|
||||
},
|
||||
onFieldBlur() {
|
||||
this.validate('blur');
|
||||
},
|
||||
onFieldChange() {
|
||||
if (this.validateDisabled) {
|
||||
this.validateDisabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.validate('change');
|
||||
},
|
||||
updateComputedLabelWidth(width) {
|
||||
this.computedLabelWidth = width ? `${width}px` : '';
|
||||
},
|
||||
addValidateEvents() {
|
||||
const rules = this.getRules();
|
||||
|
||||
if (rules.length || this.required !== undefined) {
|
||||
this.$on('el.form.blur', this.onFieldBlur);
|
||||
this.$on('el.form.change', this.onFieldChange);
|
||||
}
|
||||
},
|
||||
removeValidateEvents() {
|
||||
this.$off();
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (this.prop) {
|
||||
this.dispatch('ElForm', 'el.form.addField', [this]);
|
||||
|
||||
let initialValue = this.fieldValue;
|
||||
if (Array.isArray(initialValue)) {
|
||||
initialValue = [].concat(initialValue);
|
||||
}
|
||||
Object.defineProperty(this, 'initialValue', {
|
||||
value: initialValue
|
||||
});
|
||||
|
||||
this.addValidateEvents();
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.dispatch('ElForm', 'el.form.removeField', [this]);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
182
packages/form/src/form.vue
Normal file
182
packages/form/src/form.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<template>
|
||||
<form class="el-form" :class="[
|
||||
labelPosition ? 'el-form--label-' + labelPosition : '',
|
||||
{ 'el-form--inline': inline }
|
||||
]">
|
||||
<slot></slot>
|
||||
</form>
|
||||
</template>
|
||||
<script>
|
||||
import objectAssign from 'element-ui/src/utils/merge';
|
||||
|
||||
export default {
|
||||
name: 'ElForm',
|
||||
|
||||
componentName: 'ElForm',
|
||||
|
||||
provide() {
|
||||
return {
|
||||
elForm: this
|
||||
};
|
||||
},
|
||||
|
||||
props: {
|
||||
model: Object,
|
||||
rules: Object,
|
||||
labelPosition: String,
|
||||
labelWidth: String,
|
||||
labelSuffix: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
inline: Boolean,
|
||||
inlineMessage: Boolean,
|
||||
statusIcon: Boolean,
|
||||
showMessage: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
size: String,
|
||||
disabled: Boolean,
|
||||
validateOnRuleChange: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
hideRequiredAsterisk: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
rules() {
|
||||
// remove then add event listeners on form-item after form rules change
|
||||
this.fields.forEach(field => {
|
||||
field.removeValidateEvents();
|
||||
field.addValidateEvents();
|
||||
});
|
||||
|
||||
if (this.validateOnRuleChange) {
|
||||
this.validate(() => {});
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
autoLabelWidth() {
|
||||
if (!this.potentialLabelWidthArr.length) return 0;
|
||||
const max = Math.max(...this.potentialLabelWidthArr);
|
||||
return max ? `${max}px` : '';
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: [],
|
||||
potentialLabelWidthArr: [] // use this array to calculate auto width
|
||||
};
|
||||
},
|
||||
created() {
|
||||
this.$on('el.form.addField', (field) => {
|
||||
if (field) {
|
||||
this.fields.push(field);
|
||||
}
|
||||
});
|
||||
/* istanbul ignore next */
|
||||
this.$on('el.form.removeField', (field) => {
|
||||
if (field.prop) {
|
||||
this.fields.splice(this.fields.indexOf(field), 1);
|
||||
}
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
resetFields() {
|
||||
if (!this.model) {
|
||||
console.warn('[Element Warn][Form]model is required for resetFields to work.');
|
||||
return;
|
||||
}
|
||||
this.fields.forEach(field => {
|
||||
field.resetField();
|
||||
});
|
||||
},
|
||||
clearValidate(props = []) {
|
||||
const fields = props.length
|
||||
? (typeof props === 'string'
|
||||
? this.fields.filter(field => props === field.prop)
|
||||
: this.fields.filter(field => props.indexOf(field.prop) > -1)
|
||||
) : this.fields;
|
||||
fields.forEach(field => {
|
||||
field.clearValidate();
|
||||
});
|
||||
},
|
||||
validate(callback) {
|
||||
if (!this.model) {
|
||||
console.warn('[Element Warn][Form]model is required for validate to work!');
|
||||
return;
|
||||
}
|
||||
|
||||
let promise;
|
||||
// if no callback, return promise
|
||||
if (typeof callback !== 'function' && window.Promise) {
|
||||
promise = new window.Promise((resolve, reject) => {
|
||||
callback = function(valid) {
|
||||
valid ? resolve(valid) : reject(valid);
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
let valid = true;
|
||||
let count = 0;
|
||||
// 如果需要验证的fields为空，调用验证时立刻返回callback
|
||||
if (this.fields.length === 0 && callback) {
|
||||
callback(true);
|
||||
}
|
||||
let invalidFields = {};
|
||||
this.fields.forEach(field => {
|
||||
field.validate('', (message, field) => {
|
||||
if (message) {
|
||||
valid = false;
|
||||
}
|
||||
invalidFields = objectAssign({}, invalidFields, field);
|
||||
if (typeof callback === 'function' && ++count === this.fields.length) {
|
||||
callback(valid, invalidFields);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
if (promise) {
|
||||
return promise;
|
||||
}
|
||||
},
|
||||
validateField(props, cb) {
|
||||
props = [].concat(props);
|
||||
const fields = this.fields.filter(field => props.indexOf(field.prop) !== -1);
|
||||
if (!fields.length) {
|
||||
console.warn('[Element Warn]please pass correct props!');
|
||||
return;
|
||||
}
|
||||
|
||||
fields.forEach(field => {
|
||||
field.validate('', cb);
|
||||
});
|
||||
},
|
||||
getLabelWidthIndex(width) {
|
||||
const index = this.potentialLabelWidthArr.indexOf(width);
|
||||
// it's impossible
|
||||
if (index === -1) {
|
||||
throw new Error('[ElementForm]unpected width ', width);
|
||||
}
|
||||
return index;
|
||||
},
|
||||
registerLabelWidth(val, oldVal) {
|
||||
if (val && oldVal) {
|
||||
const index = this.getLabelWidthIndex(oldVal);
|
||||
this.potentialLabelWidthArr.splice(index, 1, val);
|
||||
} else if (val) {
|
||||
this.potentialLabelWidthArr.push(val);
|
||||
}
|
||||
},
|
||||
deregisterLabelWidth(val) {
|
||||
const index = this.getLabelWidthIndex(val);
|
||||
this.potentialLabelWidthArr.splice(index, 1);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
78
packages/form/src/label-wrap.vue
Normal file
78
packages/form/src/label-wrap.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<script>
|
||||
|
||||
export default {
|
||||
props: {
|
||||
isAutoWidth: Boolean,
|
||||
updateAll: Boolean
|
||||
},
|
||||
|
||||
inject: ['elForm', 'elFormItem'],
|
||||
|
||||
render() {
|
||||
const slots = this.$slots.default;
|
||||
if (!slots) return null;
|
||||
if (this.isAutoWidth) {
|
||||
const autoLabelWidth = this.elForm.autoLabelWidth;
|
||||
const style = {};
|
||||
if (autoLabelWidth && autoLabelWidth !== 'auto') {
|
||||
const marginLeft = parseInt(autoLabelWidth, 10) - this.computedWidth;
|
||||
if (marginLeft) {
|
||||
style.marginLeft = marginLeft + 'px';
|
||||
}
|
||||
}
|
||||
return (<div class="el-form-item__label-wrap" style={style}>
|
||||
{ slots }
|
||||
</div>);
|
||||
} else {
|
||||
return slots[0];
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
getLabelWidth() {
|
||||
if (this.$el && this.$el.firstElementChild) {
|
||||
const computedWidth = window.getComputedStyle(this.$el.firstElementChild).width;
|
||||
return Math.ceil(parseFloat(computedWidth));
|
||||
} else {
|
||||
return 0;
|
||||
}
|
||||
},
|
||||
updateLabelWidth(action = 'update') {
|
||||
if (this.$slots.default && this.isAutoWidth && this.$el.firstElementChild) {
|
||||
if (action === 'update') {
|
||||
this.computedWidth = this.getLabelWidth();
|
||||
} else if (action === 'remove') {
|
||||
this.elForm.deregisterLabelWidth(this.computedWidth);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
computedWidth(val, oldVal) {
|
||||
if (this.updateAll) {
|
||||
this.elForm.registerLabelWidth(val, oldVal);
|
||||
this.elFormItem.updateComputedLabelWidth(val);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
computedWidth: 0
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.updateLabelWidth('update');
|
||||
},
|
||||
|
||||
updated() {
|
||||
this.updateLabelWidth('update');
|
||||
},
|
||||
|
||||
beforeDestroy() {
|
||||
this.updateLabelWidth('remove');
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Reference in New Issue
Block a user