feat: change formmodel to form
tanjinzhou
parent
ed3c4edf72
commit
6f2fc69e1e
|
|
@ -1,282 +0,0 @@
|
||||||
import { inject, provide } from 'vue';
|
|
||||||
import PropTypes from '../_util/vue-types';
|
|
||||||
import classNames from 'classnames';
|
|
||||||
import { ColProps } from '../grid/Col';
|
|
||||||
import isRegExp from 'lodash/isRegExp';
|
|
||||||
import warning from '../_util/warning';
|
|
||||||
import FormItem from './FormItem';
|
|
||||||
import { initDefaultProps, getSlot } from '../_util/props-util';
|
|
||||||
import { ConfigConsumerProps } from '../config-provider';
|
|
||||||
import { getNamePath, containsNamePath } from './utils/valueUtil';
|
|
||||||
import { defaultValidateMessages } from './utils/messages';
|
|
||||||
import { allPromiseFinish } from './utils/asyncUtil';
|
|
||||||
import { toArray } from './utils/typeUtil';
|
|
||||||
import isEqual from 'lodash/isEqual';
|
|
||||||
import scrollIntoView from 'scroll-into-view-if-needed';
|
|
||||||
|
|
||||||
export const FormProps = {
|
|
||||||
layout: PropTypes.oneOf(['horizontal', 'inline', 'vertical']),
|
|
||||||
labelCol: PropTypes.shape(ColProps).loose,
|
|
||||||
wrapperCol: PropTypes.shape(ColProps).loose,
|
|
||||||
colon: PropTypes.bool,
|
|
||||||
labelAlign: PropTypes.oneOf(['left', 'right']),
|
|
||||||
prefixCls: PropTypes.string,
|
|
||||||
hideRequiredMark: PropTypes.bool,
|
|
||||||
model: PropTypes.object,
|
|
||||||
rules: PropTypes.object,
|
|
||||||
validateMessages: PropTypes.any,
|
|
||||||
validateOnRuleChange: PropTypes.bool,
|
|
||||||
// 提交失败自动滚动到第一个错误字段
|
|
||||||
scrollToFirstError: PropTypes.bool,
|
|
||||||
onFinish: PropTypes.func,
|
|
||||||
onFinishFailed: PropTypes.func,
|
|
||||||
name: PropTypes.name,
|
|
||||||
};
|
|
||||||
|
|
||||||
export const ValidationRule = {
|
|
||||||
/** validation error message */
|
|
||||||
message: PropTypes.string,
|
|
||||||
/** built-in validation type, available options: https://github.com/yiminghe/async-validator#type */
|
|
||||||
type: PropTypes.string,
|
|
||||||
/** indicates whether field is required */
|
|
||||||
required: PropTypes.boolean,
|
|
||||||
/** treat required fields that only contain whitespace as errors */
|
|
||||||
whitespace: PropTypes.boolean,
|
|
||||||
/** validate the exact length of a field */
|
|
||||||
len: PropTypes.number,
|
|
||||||
/** validate the min length of a field */
|
|
||||||
min: PropTypes.number,
|
|
||||||
/** validate the max length of a field */
|
|
||||||
max: PropTypes.number,
|
|
||||||
/** validate the value from a list of possible values */
|
|
||||||
enum: PropTypes.oneOfType([String, PropTypes.arrayOf(String)]),
|
|
||||||
/** validate from a regular expression */
|
|
||||||
pattern: PropTypes.custom(isRegExp),
|
|
||||||
/** transform a value before validation */
|
|
||||||
transform: PropTypes.func,
|
|
||||||
/** custom validate function (Note: callback must be called) */
|
|
||||||
validator: PropTypes.func,
|
|
||||||
};
|
|
||||||
|
|
||||||
function isEqualName(name1, name2) {
|
|
||||||
return isEqual(toArray(name1), toArray(name2));
|
|
||||||
}
|
|
||||||
|
|
||||||
const Form = {
|
|
||||||
name: 'AFormModel',
|
|
||||||
inheritAttrs: false,
|
|
||||||
props: initDefaultProps(FormProps, {
|
|
||||||
layout: 'horizontal',
|
|
||||||
hideRequiredMark: false,
|
|
||||||
colon: true,
|
|
||||||
}),
|
|
||||||
Item: FormItem,
|
|
||||||
created() {
|
|
||||||
this.fields = [];
|
|
||||||
this.form = undefined;
|
|
||||||
this.lastValidatePromise = null;
|
|
||||||
provide('FormContext', this);
|
|
||||||
},
|
|
||||||
setup() {
|
|
||||||
return {
|
|
||||||
configProvider: inject('configProvider', ConfigConsumerProps),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
rules() {
|
|
||||||
if (this.validateOnRuleChange) {
|
|
||||||
this.validateFields();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
vertical() {
|
|
||||||
return this.layout === 'vertical';
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
addField(field) {
|
|
||||||
if (field) {
|
|
||||||
this.fields.push(field);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
removeField(field) {
|
|
||||||
if (field.fieldName) {
|
|
||||||
this.fields.splice(this.fields.indexOf(field), 1);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
handleSubmit(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
e.stopPropagation();
|
|
||||||
this.$emit('submit', e);
|
|
||||||
const res = this.validateFields();
|
|
||||||
res
|
|
||||||
.then(values => {
|
|
||||||
this.$emit('finish', values);
|
|
||||||
})
|
|
||||||
.catch(errors => {
|
|
||||||
this.handleFinishFailed(errors);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
getFieldsByNameList(nameList) {
|
|
||||||
const provideNameList = !!nameList;
|
|
||||||
const namePathList = provideNameList ? toArray(nameList).map(getNamePath) : [];
|
|
||||||
if (!provideNameList) {
|
|
||||||
return this.fields;
|
|
||||||
} else {
|
|
||||||
return this.fields.filter(
|
|
||||||
field => namePathList.findIndex(namePath => isEqualName(namePath, field.fieldName)) > -1,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
resetFields(name) {
|
|
||||||
if (!this.model) {
|
|
||||||
warning(false, 'Form', 'model is required for resetFields to work.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.getFieldsByNameList(name).forEach(field => {
|
|
||||||
field.resetField();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
clearValidate(name) {
|
|
||||||
this.getFieldsByNameList(name).forEach(field => {
|
|
||||||
field.clearValidate();
|
|
||||||
});
|
|
||||||
},
|
|
||||||
handleFinishFailed(errorInfo) {
|
|
||||||
const { scrollToFirstError } = this;
|
|
||||||
this.$emit('finishFailed', errorInfo);
|
|
||||||
if (scrollToFirstError && errorInfo.errorFields.length) {
|
|
||||||
this.scrollToField(errorInfo.errorFields[0].name);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
validate() {
|
|
||||||
return this.validateField(...arguments);
|
|
||||||
},
|
|
||||||
scrollToField(name, options = {}) {
|
|
||||||
const fields = this.getFieldsByNameList([name]);
|
|
||||||
if (fields.length) {
|
|
||||||
const fieldId = fields[0].fieldId;
|
|
||||||
const node = fieldId ? document.getElementById(fieldId) : null;
|
|
||||||
|
|
||||||
if (node) {
|
|
||||||
scrollIntoView(node, {
|
|
||||||
scrollMode: 'if-needed',
|
|
||||||
block: 'nearest',
|
|
||||||
...options,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// eslint-disable-next-line no-unused-vars
|
|
||||||
getFieldsValue(nameList = true) {
|
|
||||||
const values = {};
|
|
||||||
this.fields.forEach(({ fieldName, fieldValue }) => {
|
|
||||||
values[fieldName] = fieldValue;
|
|
||||||
});
|
|
||||||
if (nameList === true) {
|
|
||||||
return values;
|
|
||||||
} else {
|
|
||||||
const res = {};
|
|
||||||
toArray(nameList).forEach(namePath => (res[namePath] = values[namePath]));
|
|
||||||
return res;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
validateFields(nameList, options) {
|
|
||||||
if (!this.model) {
|
|
||||||
warning(false, 'Form', 'model is required for validateFields to work.');
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const provideNameList = !!nameList;
|
|
||||||
const namePathList = provideNameList ? toArray(nameList).map(getNamePath) : [];
|
|
||||||
|
|
||||||
// Collect result in promise list
|
|
||||||
const promiseList = [];
|
|
||||||
|
|
||||||
this.fields.forEach(field => {
|
|
||||||
// Add field if not provide `nameList`
|
|
||||||
if (!provideNameList) {
|
|
||||||
namePathList.push(field.getNamePath());
|
|
||||||
}
|
|
||||||
|
|
||||||
// Skip if without rule
|
|
||||||
if (!field.getRules().length) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const fieldNamePath = field.getNamePath();
|
|
||||||
|
|
||||||
// Add field validate rule in to promise list
|
|
||||||
if (!provideNameList || containsNamePath(namePathList, fieldNamePath)) {
|
|
||||||
const promise = field.validateRules({
|
|
||||||
validateMessages: {
|
|
||||||
...defaultValidateMessages,
|
|
||||||
...this.validateMessages,
|
|
||||||
},
|
|
||||||
...options,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Wrap promise with field
|
|
||||||
promiseList.push(
|
|
||||||
promise
|
|
||||||
.then(() => ({ name: fieldNamePath, errors: [] }))
|
|
||||||
.catch(errors =>
|
|
||||||
Promise.reject({
|
|
||||||
name: fieldNamePath,
|
|
||||||
errors,
|
|
||||||
}),
|
|
||||||
),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const summaryPromise = allPromiseFinish(promiseList);
|
|
||||||
this.lastValidatePromise = summaryPromise;
|
|
||||||
|
|
||||||
const returnPromise = summaryPromise
|
|
||||||
.then(() => {
|
|
||||||
if (this.lastValidatePromise === summaryPromise) {
|
|
||||||
return Promise.resolve(this.getFieldsValue(namePathList));
|
|
||||||
}
|
|
||||||
return Promise.reject([]);
|
|
||||||
})
|
|
||||||
.catch(results => {
|
|
||||||
const errorList = results.filter(result => result && result.errors.length);
|
|
||||||
return Promise.reject({
|
|
||||||
values: this.getFieldsValue(namePathList),
|
|
||||||
errorFields: errorList,
|
|
||||||
outOfDate: this.lastValidatePromise !== summaryPromise,
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
// Do not throw in console
|
|
||||||
returnPromise.catch(e => e);
|
|
||||||
|
|
||||||
return returnPromise;
|
|
||||||
},
|
|
||||||
validateField() {
|
|
||||||
return this.validateFields(...arguments);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
render() {
|
|
||||||
const { prefixCls: customizePrefixCls, hideRequiredMark, layout, handleSubmit } = this;
|
|
||||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
|
||||||
const prefixCls = getPrefixCls('form', customizePrefixCls);
|
|
||||||
const { class: className, onSubmit: originSubmit, ...restProps } = this.$attrs;
|
|
||||||
|
|
||||||
const formClassName = classNames(prefixCls, className, {
|
|
||||||
[`${prefixCls}-horizontal`]: layout === 'horizontal',
|
|
||||||
[`${prefixCls}-vertical`]: layout === 'vertical',
|
|
||||||
[`${prefixCls}-inline`]: layout === 'inline',
|
|
||||||
[`${prefixCls}-hide-required-mark`]: hideRequiredMark,
|
|
||||||
});
|
|
||||||
return (
|
|
||||||
<form onSubmit={handleSubmit} class={formClassName} {...restProps}>
|
|
||||||
{getSlot(this)}
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Form;
|
|
||||||
|
|
@ -1,498 +0,0 @@
|
||||||
import { inject, provide, Transition } from 'vue';
|
|
||||||
import cloneDeep from 'lodash/cloneDeep';
|
|
||||||
import PropTypes from '../_util/vue-types';
|
|
||||||
import classNames from 'classnames';
|
|
||||||
import getTransitionProps from '../_util/getTransitionProps';
|
|
||||||
import Row from '../grid/Row';
|
|
||||||
import Col, { ColProps } from '../grid/Col';
|
|
||||||
import hasProp, {
|
|
||||||
initDefaultProps,
|
|
||||||
findDOMNode,
|
|
||||||
getComponent,
|
|
||||||
getOptionProps,
|
|
||||||
getEvents,
|
|
||||||
isValidElement,
|
|
||||||
getSlot,
|
|
||||||
} from '../_util/props-util';
|
|
||||||
import BaseMixin from '../_util/BaseMixin';
|
|
||||||
import { ConfigConsumerProps } from '../config-provider';
|
|
||||||
import { cloneElement } from '../_util/vnode';
|
|
||||||
import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
|
|
||||||
import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
|
|
||||||
import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
|
|
||||||
import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
|
|
||||||
import { validateRules } from './utils/validateUtil';
|
|
||||||
import { getNamePath } from './utils/valueUtil';
|
|
||||||
import { toArray } from './utils/typeUtil';
|
|
||||||
import { warning } from '../vc-util/warning';
|
|
||||||
|
|
||||||
const iconMap = {
|
|
||||||
success: CheckCircleFilled,
|
|
||||||
warning: ExclamationCircleFilled,
|
|
||||||
error: CloseCircleFilled,
|
|
||||||
validating: LoadingOutlined,
|
|
||||||
};
|
|
||||||
|
|
||||||
function getPropByPath(obj, namePathList, strict) {
|
|
||||||
let tempObj = obj;
|
|
||||||
|
|
||||||
const keyArr = namePathList;
|
|
||||||
let i = 0;
|
|
||||||
try {
|
|
||||||
for (let len = keyArr.length; i < len - 1; ++i) {
|
|
||||||
if (!tempObj && !strict) break;
|
|
||||||
let key = keyArr[i];
|
|
||||||
if (key in tempObj) {
|
|
||||||
tempObj = tempObj[key];
|
|
||||||
} else {
|
|
||||||
if (strict) {
|
|
||||||
throw Error('please transfer a valid name path to form item!');
|
|
||||||
}
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (strict && !tempObj) {
|
|
||||||
throw Error('please transfer a valid name path to form item!');
|
|
||||||
}
|
|
||||||
} catch (error) {
|
|
||||||
console.error('please transfer a valid name path to form item!');
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
o: tempObj,
|
|
||||||
k: keyArr[i],
|
|
||||||
v: tempObj ? tempObj[keyArr[i]] : undefined,
|
|
||||||
};
|
|
||||||
}
|
|
||||||
export const FormItemProps = {
|
|
||||||
id: PropTypes.string,
|
|
||||||
htmlFor: PropTypes.string,
|
|
||||||
prefixCls: PropTypes.string,
|
|
||||||
label: PropTypes.any,
|
|
||||||
help: PropTypes.any,
|
|
||||||
extra: PropTypes.any,
|
|
||||||
labelCol: PropTypes.shape(ColProps).loose,
|
|
||||||
wrapperCol: PropTypes.shape(ColProps).loose,
|
|
||||||
hasFeedback: PropTypes.bool,
|
|
||||||
colon: PropTypes.bool,
|
|
||||||
labelAlign: PropTypes.oneOf(['left', 'right']),
|
|
||||||
prop: PropTypes.oneOfType([Array, String, Number]),
|
|
||||||
name: PropTypes.oneOfType([Array, String, Number]),
|
|
||||||
rules: PropTypes.oneOfType([Array, Object]),
|
|
||||||
autoLink: PropTypes.bool,
|
|
||||||
required: PropTypes.bool,
|
|
||||||
validateFirst: PropTypes.bool,
|
|
||||||
validateStatus: PropTypes.oneOf(['', 'success', 'warning', 'error', 'validating']),
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'AFormModelItem',
|
|
||||||
mixins: [BaseMixin],
|
|
||||||
inheritAttrs: false,
|
|
||||||
__ANT_NEW_FORM_ITEM: true,
|
|
||||||
props: initDefaultProps(FormItemProps, {
|
|
||||||
hasFeedback: false,
|
|
||||||
autoLink: true,
|
|
||||||
}),
|
|
||||||
setup() {
|
|
||||||
return {
|
|
||||||
isFormItemChildren: inject('isFormItemChildren', false),
|
|
||||||
configProvider: inject('configProvider', ConfigConsumerProps),
|
|
||||||
FormContext: inject('FormContext', {}),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
warning(hasProp(this, 'prop'), `\`prop\` is deprecated. Please use \`name\` instead.`);
|
|
||||||
return {
|
|
||||||
validateState: this.validateStatus,
|
|
||||||
validateMessage: '',
|
|
||||||
validateDisabled: false,
|
|
||||||
validator: {},
|
|
||||||
helpShow: false,
|
|
||||||
errors: [],
|
|
||||||
};
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
fieldName() {
|
|
||||||
return this.name || this.prop;
|
|
||||||
},
|
|
||||||
namePath() {
|
|
||||||
return getNamePath(this.fieldName);
|
|
||||||
},
|
|
||||||
fieldId() {
|
|
||||||
if (this.id) {
|
|
||||||
return this.id;
|
|
||||||
} else if (!this.namePath.length) {
|
|
||||||
return undefined;
|
|
||||||
} else {
|
|
||||||
const formName = this.FormContext.name;
|
|
||||||
const mergedId = this.namePath.join('_');
|
|
||||||
return formName ? `${formName}_${mergedId}` : mergedId;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
fieldValue() {
|
|
||||||
const model = this.FormContext.model;
|
|
||||||
if (!model || !this.fieldName) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
return getPropByPath(model, this.namePath, 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 || this.required;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
validateStatus(val) {
|
|
||||||
this.validateState = val;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
provide('isFormItemChildren', true);
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
if (this.fieldName) {
|
|
||||||
const { addField } = this.FormContext;
|
|
||||||
addField && addField(this);
|
|
||||||
this.initialValue = cloneDeep(this.fieldValue);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
beforeUnmount() {
|
|
||||||
const { removeField } = this.FormContext;
|
|
||||||
removeField && removeField(this);
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
getNamePath() {
|
|
||||||
const { fieldName } = this;
|
|
||||||
const { prefixName = [] } = this.FormContext;
|
|
||||||
|
|
||||||
return fieldName !== undefined ? [...prefixName, ...this.namePath] : [];
|
|
||||||
},
|
|
||||||
validateRules(options) {
|
|
||||||
const { validateFirst = false, messageVariables } = this.$props;
|
|
||||||
const { triggerName } = options || {};
|
|
||||||
const namePath = this.getNamePath();
|
|
||||||
|
|
||||||
let filteredRules = this.getRules();
|
|
||||||
if (triggerName) {
|
|
||||||
filteredRules = filteredRules.filter(rule => {
|
|
||||||
const { trigger } = rule;
|
|
||||||
if (!trigger) {
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
const triggerList = toArray(trigger);
|
|
||||||
return triggerList.includes(triggerName);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
if (!filteredRules.length) {
|
|
||||||
return Promise.resolve();
|
|
||||||
}
|
|
||||||
const promise = validateRules(
|
|
||||||
namePath,
|
|
||||||
this.fieldValue,
|
|
||||||
filteredRules,
|
|
||||||
options,
|
|
||||||
validateFirst,
|
|
||||||
messageVariables,
|
|
||||||
);
|
|
||||||
this.validateState = 'validating';
|
|
||||||
this.errors = [];
|
|
||||||
|
|
||||||
promise
|
|
||||||
.catch(e => e)
|
|
||||||
.then((errors = []) => {
|
|
||||||
if (this.validateState === 'validating') {
|
|
||||||
this.validateState = errors.length ? 'error' : 'success';
|
|
||||||
this.validateMessage = errors[0];
|
|
||||||
this.errors = errors;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
return promise;
|
|
||||||
},
|
|
||||||
getRules() {
|
|
||||||
let formRules = this.FormContext.rules;
|
|
||||||
const selfRules = this.rules;
|
|
||||||
const requiredRule =
|
|
||||||
this.required !== undefined ? { required: !!this.required, trigger: 'change' } : [];
|
|
||||||
const prop = getPropByPath(formRules, this.namePath);
|
|
||||||
formRules = formRules ? prop.o[prop.k] || 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 => ({ ...rule }));
|
|
||||||
},
|
|
||||||
onFieldBlur() {
|
|
||||||
this.validateRules({ triggerName: 'blur' });
|
|
||||||
},
|
|
||||||
onFieldChange() {
|
|
||||||
if (this.validateDisabled) {
|
|
||||||
this.validateDisabled = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
this.validateRules({ triggerName: 'change' });
|
|
||||||
},
|
|
||||||
clearValidate() {
|
|
||||||
this.validateState = '';
|
|
||||||
this.validateMessage = '';
|
|
||||||
this.validateDisabled = false;
|
|
||||||
},
|
|
||||||
resetField() {
|
|
||||||
this.validateState = '';
|
|
||||||
this.validateMessage = '';
|
|
||||||
const model = this.FormContext.model || {};
|
|
||||||
const value = this.fieldValue;
|
|
||||||
const prop = getPropByPath(model, this.namePath, 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;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
getHelpMessage() {
|
|
||||||
const help = getComponent(this, 'help');
|
|
||||||
|
|
||||||
return this.validateMessage || help;
|
|
||||||
},
|
|
||||||
|
|
||||||
onLabelClick() {
|
|
||||||
const id = this.fieldId;
|
|
||||||
if (!id) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const formItemNode = findDOMNode(this);
|
|
||||||
const control = formItemNode.querySelector(`[id="${id}"]`);
|
|
||||||
if (control && control.focus) {
|
|
||||||
control.focus();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
onHelpAnimEnd(_key, helpShow) {
|
|
||||||
this.helpShow = helpShow;
|
|
||||||
if (!helpShow) {
|
|
||||||
this.$forceUpdate();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
renderHelp(prefixCls) {
|
|
||||||
const help = this.getHelpMessage();
|
|
||||||
const children = help ? (
|
|
||||||
<div class={`${prefixCls}-explain`} key="help">
|
|
||||||
{help}
|
|
||||||
</div>
|
|
||||||
) : null;
|
|
||||||
if (children) {
|
|
||||||
this.helpShow = !!children;
|
|
||||||
}
|
|
||||||
const transitionProps = getTransitionProps('show-help', {
|
|
||||||
onAfterEnter: () => this.onHelpAnimEnd('help', true),
|
|
||||||
onAfterLeave: () => this.onHelpAnimEnd('help', false),
|
|
||||||
});
|
|
||||||
return (
|
|
||||||
<Transition {...transitionProps} key="help">
|
|
||||||
{children}
|
|
||||||
</Transition>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
renderExtra(prefixCls) {
|
|
||||||
const extra = getComponent(this, 'extra');
|
|
||||||
return extra ? <div class={`${prefixCls}-extra`}>{extra}</div> : null;
|
|
||||||
},
|
|
||||||
|
|
||||||
renderValidateWrapper(prefixCls, c1, c2, c3) {
|
|
||||||
const validateStatus = this.validateState;
|
|
||||||
|
|
||||||
let classes = `${prefixCls}-item-control`;
|
|
||||||
if (validateStatus) {
|
|
||||||
classes = classNames(`${prefixCls}-item-control`, {
|
|
||||||
'has-feedback': this.hasFeedback || validateStatus === 'validating',
|
|
||||||
'has-success': validateStatus === 'success',
|
|
||||||
'has-warning': validateStatus === 'warning',
|
|
||||||
'has-error': validateStatus === 'error',
|
|
||||||
'is-validating': validateStatus === 'validating',
|
|
||||||
});
|
|
||||||
}
|
|
||||||
const IconNode = validateStatus && iconMap[validateStatus];
|
|
||||||
|
|
||||||
const icon =
|
|
||||||
this.hasFeedback && IconNode ? (
|
|
||||||
<span class={`${prefixCls}-item-children-icon`}>
|
|
||||||
<IconNode />
|
|
||||||
</span>
|
|
||||||
) : null;
|
|
||||||
return (
|
|
||||||
<div class={classes}>
|
|
||||||
<span class={`${prefixCls}-item-children`}>
|
|
||||||
{c1}
|
|
||||||
{icon}
|
|
||||||
</span>
|
|
||||||
{c2}
|
|
||||||
{c3}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
|
|
||||||
renderWrapper(prefixCls, children) {
|
|
||||||
const { wrapperCol: contextWrapperCol } = this.isFormItemChildren ? {} : this.FormContext;
|
|
||||||
const { wrapperCol } = this;
|
|
||||||
const mergedWrapperCol = wrapperCol || contextWrapperCol || {};
|
|
||||||
const { style, id, ...restProps } = mergedWrapperCol;
|
|
||||||
const className = classNames(`${prefixCls}-item-control-wrapper`, mergedWrapperCol.class);
|
|
||||||
const colProps = {
|
|
||||||
...restProps,
|
|
||||||
class: className,
|
|
||||||
key: 'wrapper',
|
|
||||||
style,
|
|
||||||
id,
|
|
||||||
};
|
|
||||||
return <Col {...colProps}>{children}</Col>;
|
|
||||||
},
|
|
||||||
|
|
||||||
renderLabel(prefixCls) {
|
|
||||||
const {
|
|
||||||
vertical,
|
|
||||||
labelAlign: contextLabelAlign,
|
|
||||||
labelCol: contextLabelCol,
|
|
||||||
colon: contextColon,
|
|
||||||
} = this.FormContext;
|
|
||||||
const { labelAlign, labelCol, colon, fieldId, htmlFor } = this;
|
|
||||||
const label = getComponent(this, 'label');
|
|
||||||
const required = this.isRequired;
|
|
||||||
const mergedLabelCol = labelCol || contextLabelCol || {};
|
|
||||||
|
|
||||||
const mergedLabelAlign = labelAlign || contextLabelAlign;
|
|
||||||
const labelClsBasic = `${prefixCls}-item-label`;
|
|
||||||
const labelColClassName = classNames(
|
|
||||||
labelClsBasic,
|
|
||||||
mergedLabelAlign === 'left' && `${labelClsBasic}-left`,
|
|
||||||
mergedLabelCol.class,
|
|
||||||
);
|
|
||||||
const {
|
|
||||||
class: labelColClass,
|
|
||||||
style: labelColStyle,
|
|
||||||
id: labelColId,
|
|
||||||
...restProps
|
|
||||||
} = mergedLabelCol;
|
|
||||||
let labelChildren = label;
|
|
||||||
// Keep label is original where there should have no colon
|
|
||||||
const computedColon = colon === true || (contextColon !== false && colon !== false);
|
|
||||||
const haveColon = computedColon && !vertical;
|
|
||||||
// Remove duplicated user input colon
|
|
||||||
if (haveColon && typeof label === 'string' && label.trim() !== '') {
|
|
||||||
labelChildren = label.replace(/[：:]\s*$/, '');
|
|
||||||
}
|
|
||||||
|
|
||||||
const labelClassName = classNames({
|
|
||||||
[`${prefixCls}-item-required`]: required,
|
|
||||||
[`${prefixCls}-item-no-colon`]: !computedColon,
|
|
||||||
});
|
|
||||||
const colProps = {
|
|
||||||
...restProps,
|
|
||||||
class: labelColClassName,
|
|
||||||
key: 'label',
|
|
||||||
style: labelColStyle,
|
|
||||||
id: labelColId,
|
|
||||||
};
|
|
||||||
|
|
||||||
return label ? (
|
|
||||||
<Col {...colProps}>
|
|
||||||
<label
|
|
||||||
for={htmlFor || fieldId}
|
|
||||||
class={labelClassName}
|
|
||||||
title={typeof label === 'string' ? label : ''}
|
|
||||||
onClick={this.onLabelClick}
|
|
||||||
>
|
|
||||||
{labelChildren}
|
|
||||||
</label>
|
|
||||||
</Col>
|
|
||||||
) : null;
|
|
||||||
},
|
|
||||||
renderChildren(prefixCls, child) {
|
|
||||||
return [
|
|
||||||
this.renderLabel(prefixCls),
|
|
||||||
this.renderWrapper(
|
|
||||||
prefixCls,
|
|
||||||
this.renderValidateWrapper(
|
|
||||||
prefixCls,
|
|
||||||
child,
|
|
||||||
this.renderHelp(prefixCls),
|
|
||||||
this.renderExtra(prefixCls),
|
|
||||||
),
|
|
||||||
),
|
|
||||||
];
|
|
||||||
},
|
|
||||||
renderFormItem(child) {
|
|
||||||
const { prefixCls: customizePrefixCls } = this.$props;
|
|
||||||
const { class: className, ...restProps } = this.$attrs;
|
|
||||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
|
||||||
const prefixCls = getPrefixCls('form', customizePrefixCls);
|
|
||||||
const children = this.renderChildren(prefixCls, child);
|
|
||||||
const itemClassName = {
|
|
||||||
[className]: className,
|
|
||||||
[`${prefixCls}-item`]: true,
|
|
||||||
[`${prefixCls}-item-with-help`]: this.helpShow,
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Row class={classNames(itemClassName)} key="row" {...restProps}>
|
|
||||||
{children}
|
|
||||||
</Row>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
render() {
|
|
||||||
const { autoLink } = getOptionProps(this);
|
|
||||||
const children = getSlot(this);
|
|
||||||
let firstChildren = children[0];
|
|
||||||
if (this.fieldName && autoLink && isValidElement(firstChildren)) {
|
|
||||||
const originalEvents = getEvents(firstChildren);
|
|
||||||
const originalBlur = originalEvents.onBlur;
|
|
||||||
const originalChange = originalEvents.onChange;
|
|
||||||
firstChildren = cloneElement(firstChildren, {
|
|
||||||
...(this.fieldId ? { id: this.fieldId } : undefined),
|
|
||||||
onBlur: (...args) => {
|
|
||||||
originalBlur && originalBlur(...args);
|
|
||||||
this.onFieldBlur();
|
|
||||||
},
|
|
||||||
onChange: (...args) => {
|
|
||||||
if (Array.isArray(originalChange)) {
|
|
||||||
for (let i = 0, l = originalChange.length; i < l; i++) {
|
|
||||||
originalChange[i](...args);
|
|
||||||
}
|
|
||||||
} else if (originalChange) {
|
|
||||||
originalChange(...args);
|
|
||||||
}
|
|
||||||
this.onFieldChange();
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return this.renderFormItem([firstChildren, children.slice(1)]);
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
@ -1,282 +0,0 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
|
||||||
|
|
||||||
exports[`renders ./antdv-demo/docs/form-model/demo/basic.md correctly 1`] = `
|
|
||||||
<form class="ant-form ant-form-horizontal">
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity name" class="">Activity name</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity zone" class="">Activity zone</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">please select your zone</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
|
|
||||||
</div></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity time" class="">Activity time</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="min-width: 195px; width: 100%;" type="date"><div class=""><input readonly="true" placeholder="Pick a date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Instant delivery" class="">Instant delivery</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" role="switch" class="ant-switch"><span class="ant-switch-inner"></span></button></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity type" class="">Activity type</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-checkbox-group"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="1"><span class="ant-checkbox-inner"></span></span><span>
|
|
||||||
Online
|
|
||||||
</span></label> <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="2"><span class="ant-checkbox-inner"></span></span><span>
|
|
||||||
Promotion
|
|
||||||
</span></label> <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="3"><span class="ant-checkbox-inner"></span></span><span>
|
|
||||||
Offline
|
|
||||||
</span></label></div></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Resources" class="">Resources</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>
|
|
||||||
Sponsor
|
|
||||||
</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>
|
|
||||||
Venue
|
|
||||||
</span></label></div></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity form" class="">Activity form</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><textarea class="ant-input"></textarea></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Create</span></button><button type="button" class="ant-btn" style="margin-left: 10px;"><span>Cancel</span></button></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`renders ./antdv-demo/docs/form-model/demo/custom-validation.md correctly 1`] = `
|
|
||||||
<form class="ant-form ant-form-horizontal">
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Password" class="">Password</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="password" autocomplete="off" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Confirm" class="">Confirm</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="password" autocomplete="off" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Age" class="">Age</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Submit</span></button><button type="button" class="ant-btn" style="margin-left: 10px;"><span>Reset</span></button></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`renders ./antdv-demo/docs/form-model/demo/dynamic-form-item.md correctly 1`] = `
|
|
||||||
<form class="ant-form ant-form-horizontal">
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-dashed" style="width: 60%;"><span role="img" aria-label="plus" class="anticon anticon-plus"><svg viewBox="64 64 896 896" focusable="false" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span><span>Add field</span></button></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button><button type="button" class="ant-btn" style="margin-left: 10px;"><span>Reset</span></button></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`renders ./antdv-demo/docs/form-model/demo/horizontal-login.md correctly 1`] = `
|
|
||||||
<form class="ant-form ant-form-inline">
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="user" class="anticon anticon-user" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><input placeholder="Username" type="text" class="ant-input"></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="lock" class="anticon anticon-lock" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="lock" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"></path></svg></span></span><input placeholder="Password" type="password" class="ant-input"></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><button disabled="disabled" type="submit" class="ant-btn ant-btn-primary"><span>Log in</span></button></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`renders ./antdv-demo/docs/form-model/demo/layout.md correctly 1`] = `
|
|
||||||
<form class="ant-form ant-form-horizontal">
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Form Layout" class="">Form Layout</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="horizontal"><span class="ant-radio-button-inner"></span></span><span>
|
|
||||||
Horizontal
|
|
||||||
</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="vertical"><span class="ant-radio-button-inner"></span></span><span>
|
|
||||||
Vertical
|
|
||||||
</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="inline"><span class="ant-radio-button-inner"></span></span><span>
|
|
||||||
Inline
|
|
||||||
</span></label></div></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Field A" class="">Field A</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="input placeholder" type="text" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Field B" class="">Field B</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="input placeholder" type="text" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`renders ./antdv-demo/docs/form-model/demo/validation.md correctly 1`] = `
|
|
||||||
<form class="ant-form ant-form-horizontal">
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity name" class="ant-form-item-required">Activity name</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity zone" class="ant-form-item-required">Activity zone</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">please select your zone</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
|
|
||||||
</div></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity time" class="ant-form-item-required">Activity time</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="min-width: 195px; width: 100%;" type="date"><div class=""><input readonly="true" placeholder="Pick a date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Instant delivery" class="">Instant delivery</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" role="switch" class="ant-switch"><span class="ant-switch-inner"></span></button></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity type" class="ant-form-item-required">Activity type</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-checkbox-group"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="1"><span class="ant-checkbox-inner"></span></span><span>
|
|
||||||
Online
|
|
||||||
</span></label> <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="2"><span class="ant-checkbox-inner"></span></span><span>
|
|
||||||
Promotion
|
|
||||||
</span></label> <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="3"><span class="ant-checkbox-inner"></span></span><span>
|
|
||||||
Offline
|
|
||||||
</span></label></div></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Resources" class="ant-form-item-required">Resources</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>
|
|
||||||
Sponsor
|
|
||||||
</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>
|
|
||||||
Venue
|
|
||||||
</span></label></div></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity form" class="ant-form-item-required">Activity form</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><textarea class="ant-input"></textarea></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Create</span></button><button type="button" class="ant-btn" style="margin-left: 10px;"><span>Reset</span></button></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
`;
|
|
||||||
|
|
@ -1,3 +0,0 @@
|
||||||
import demoTest from '../../../tests/shared/demoTest';
|
|
||||||
|
|
||||||
demoTest('form-model');
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
import Form from './Form';
|
|
||||||
|
|
||||||
export { FormProps, ValidationRule } from './Form';
|
|
||||||
export { FormItemProps } from './FormItem';
|
|
||||||
|
|
||||||
/* istanbul ignore next */
|
|
||||||
Form.install = function(app) {
|
|
||||||
app.component(Form.name, Form);
|
|
||||||
app.component(Form.Item.name, Form.Item);
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Form;
|
|
||||||
|
|
@ -0,0 +1,287 @@
|
||||||
|
import PropTypes from '../_util/vue-types';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import { ColProps } from '../grid/Col';
|
||||||
|
import Vue from 'vue';
|
||||||
|
import isRegExp from 'lodash/isRegExp';
|
||||||
|
import warning from '../_util/warning';
|
||||||
|
import createDOMForm from '../vc-form/src/createDOMForm';
|
||||||
|
import createFormField from '../vc-form/src/createFormField';
|
||||||
|
import FormItem from './FormItem';
|
||||||
|
import { FIELD_META_PROP, FIELD_DATA_PROP } from './constants';
|
||||||
|
import { initDefaultProps, getListeners } from '../_util/props-util';
|
||||||
|
import { ConfigConsumerProps } from '../config-provider';
|
||||||
|
|
||||||
|
export const FormCreateOption = {
|
||||||
|
onFieldsChange: PropTypes.func,
|
||||||
|
onValuesChange: PropTypes.func,
|
||||||
|
mapPropsToFields: PropTypes.func,
|
||||||
|
validateMessages: PropTypes.any,
|
||||||
|
withRef: PropTypes.bool,
|
||||||
|
name: PropTypes.string,
|
||||||
|
};
|
||||||
|
|
||||||
|
// function create
|
||||||
|
export const WrappedFormUtils = {
|
||||||
|
/** 获取一组输入控件的值，如不传入参数，则获取全部组件的值 */
|
||||||
|
getFieldsValue: PropTypes.func,
|
||||||
|
/** 获取一个输入控件的值*/
|
||||||
|
getFieldValue: PropTypes.func,
|
||||||
|
/** 设置一组输入控件的值*/
|
||||||
|
setFieldsValue: PropTypes.func,
|
||||||
|
/** 设置一组输入控件的值*/
|
||||||
|
setFields: PropTypes.func,
|
||||||
|
/** 校验并获取一组输入域的值与 Error */
|
||||||
|
validateFields: PropTypes.func,
|
||||||
|
// validateFields(fieldNames: Array<string>, options: Object, callback: ValidateCallback): void;
|
||||||
|
// validateFields(fieldNames: Array<string>, callback: ValidateCallback): void;
|
||||||
|
// validateFields(options: Object, callback: ValidateCallback): void;
|
||||||
|
// validateFields(callback: ValidateCallback): void;
|
||||||
|
// validateFields(): void;
|
||||||
|
/** 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 */
|
||||||
|
validateFieldsAndScroll: PropTypes.func,
|
||||||
|
// validateFieldsAndScroll(fieldNames?: Array<string>, options?: Object, callback?: ValidateCallback): void;
|
||||||
|
// validateFieldsAndScroll(fieldNames?: Array<string>, callback?: ValidateCallback): void;
|
||||||
|
// validateFieldsAndScroll(options?: Object, callback?: ValidateCallback): void;
|
||||||
|
// validateFieldsAndScroll(callback?: ValidateCallback): void;
|
||||||
|
// validateFieldsAndScroll(): void;
|
||||||
|
/** 获取某个输入控件的 Error */
|
||||||
|
getFieldError: PropTypes.func,
|
||||||
|
getFieldsError: PropTypes.func,
|
||||||
|
/** 判断一个输入控件是否在校验状态*/
|
||||||
|
isFieldValidating: PropTypes.func,
|
||||||
|
isFieldTouched: PropTypes.func,
|
||||||
|
isFieldsTouched: PropTypes.func,
|
||||||
|
/** 重置一组输入控件的值与状态，如不传入参数，则重置所有组件 */
|
||||||
|
resetFields: PropTypes.func,
|
||||||
|
|
||||||
|
getFieldDecorator: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const FormProps = {
|
||||||
|
layout: PropTypes.oneOf(['horizontal', 'inline', 'vertical']),
|
||||||
|
labelCol: PropTypes.shape(ColProps).loose,
|
||||||
|
wrapperCol: PropTypes.shape(ColProps).loose,
|
||||||
|
colon: PropTypes.bool,
|
||||||
|
labelAlign: PropTypes.oneOf(['left', 'right']),
|
||||||
|
form: PropTypes.object,
|
||||||
|
// onSubmit: React.FormEventHandler<any>;
|
||||||
|
prefixCls: PropTypes.string,
|
||||||
|
hideRequiredMark: PropTypes.bool,
|
||||||
|
autoFormCreate: PropTypes.func,
|
||||||
|
options: PropTypes.object,
|
||||||
|
selfUpdate: PropTypes.bool,
|
||||||
|
};
|
||||||
|
|
||||||
|
export const ValidationRule = {
|
||||||
|
/** validation error message */
|
||||||
|
message: PropTypes.string,
|
||||||
|
/** built-in validation type, available options: https://github.com/yiminghe/async-validator#type */
|
||||||
|
type: PropTypes.string,
|
||||||
|
/** indicates whether field is required */
|
||||||
|
required: PropTypes.boolean,
|
||||||
|
/** treat required fields that only contain whitespace as errors */
|
||||||
|
whitespace: PropTypes.boolean,
|
||||||
|
/** validate the exact length of a field */
|
||||||
|
len: PropTypes.number,
|
||||||
|
/** validate the min length of a field */
|
||||||
|
min: PropTypes.number,
|
||||||
|
/** validate the max length of a field */
|
||||||
|
max: PropTypes.number,
|
||||||
|
/** validate the value from a list of possible values */
|
||||||
|
enum: PropTypes.oneOfType([String, PropTypes.arrayOf(String)]),
|
||||||
|
/** validate from a regular expression */
|
||||||
|
pattern: PropTypes.custom(isRegExp),
|
||||||
|
/** transform a value before validation */
|
||||||
|
transform: PropTypes.func,
|
||||||
|
/** custom validate function (Note: callback must be called) */
|
||||||
|
validator: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
// export type ValidateCallback = (errors: any, values: any) => void;
|
||||||
|
|
||||||
|
// export type GetFieldDecoratorOptions = {
|
||||||
|
// /** 子节点的值的属性，如 Checkbox 的是 'checked' */
|
||||||
|
// valuePropName?: string;
|
||||||
|
// /** 子节点的初始值，类型、可选值均由子节点决定 */
|
||||||
|
// initialValue?: any;
|
||||||
|
// /** 收集子节点的值的时机 */
|
||||||
|
// trigger?: string;
|
||||||
|
// /** 可以把 onChange 的参数转化为控件的值，例如 DatePicker 可设为：(date, dateString) => dateString */
|
||||||
|
// getValueFromEvent?: (...args: any[]) => any;
|
||||||
|
// /** Get the component props according to field value. */
|
||||||
|
// getValueProps?: (value: any) => any;
|
||||||
|
// /** 校验子节点值的时机 */
|
||||||
|
// validateTrigger?: string | string[];
|
||||||
|
// /** 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) */
|
||||||
|
// rules?: ValidationRule[];
|
||||||
|
// /** 是否和其他控件互斥，特别用于 Radio 单选控件 */
|
||||||
|
// exclusive?: boolean;
|
||||||
|
// /** Normalize value to form component */
|
||||||
|
// normalize?: (value: any, prevValue: any, allValues: any) => any;
|
||||||
|
// /** Whether stop validate on first rule of error for this field. */
|
||||||
|
// validateFirst?: boolean;
|
||||||
|
// /** 是否一直保留子节点的信息 */
|
||||||
|
// preserve?: boolean;
|
||||||
|
// };
|
||||||
|
|
||||||
|
const Form = {
|
||||||
|
name: 'AForm',
|
||||||
|
props: initDefaultProps(FormProps, {
|
||||||
|
layout: 'horizontal',
|
||||||
|
hideRequiredMark: false,
|
||||||
|
colon: true,
|
||||||
|
}),
|
||||||
|
Item: FormItem,
|
||||||
|
createFormField,
|
||||||
|
create: (options = {}) => {
|
||||||
|
return createDOMForm({
|
||||||
|
fieldNameProp: 'id',
|
||||||
|
...options,
|
||||||
|
fieldMetaProp: FIELD_META_PROP,
|
||||||
|
fieldDataProp: FIELD_DATA_PROP,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
createForm(context, options = {}) {
|
||||||
|
const V = Vue;
|
||||||
|
return new V(Form.create({ ...options, templateContext: context })());
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.formItemContexts = new Map();
|
||||||
|
},
|
||||||
|
provide() {
|
||||||
|
return {
|
||||||
|
FormContext: this,
|
||||||
|
// https://github.com/vueComponent/ant-design-vue/issues/446
|
||||||
|
collectFormItemContext:
|
||||||
|
this.form && this.form.templateContext
|
||||||
|
? (c, type = 'add') => {
|
||||||
|
const formItemContexts = this.formItemContexts;
|
||||||
|
const number = formItemContexts.get(c) || 0;
|
||||||
|
if (type === 'delete') {
|
||||||
|
if (number <= 1) {
|
||||||
|
formItemContexts.delete(c);
|
||||||
|
} else {
|
||||||
|
formItemContexts.set(c, number - 1);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (c !== this.form.templateContext) {
|
||||||
|
formItemContexts.set(c, number + 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
: () => {},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
inject: {
|
||||||
|
configProvider: { default: () => ConfigConsumerProps },
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
form() {
|
||||||
|
this.$forceUpdate();
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
vertical() {
|
||||||
|
return this.layout === 'vertical';
|
||||||
|
},
|
||||||
|
},
|
||||||
|
beforeUpdate() {
|
||||||
|
this.formItemContexts.forEach((number, c) => {
|
||||||
|
if (c.$forceUpdate) {
|
||||||
|
c.$forceUpdate();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
updated() {
|
||||||
|
if (this.form && this.form.cleanUpUselessFields) {
|
||||||
|
this.form.cleanUpUselessFields();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onSubmit(e) {
|
||||||
|
if (!getListeners(this).submit) {
|
||||||
|
e.preventDefault();
|
||||||
|
} else {
|
||||||
|
this.$emit('submit', e);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
prefixCls: customizePrefixCls,
|
||||||
|
hideRequiredMark,
|
||||||
|
layout,
|
||||||
|
onSubmit,
|
||||||
|
$slots,
|
||||||
|
autoFormCreate,
|
||||||
|
options = {},
|
||||||
|
} = this;
|
||||||
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||||
|
const prefixCls = getPrefixCls('form', customizePrefixCls);
|
||||||
|
|
||||||
|
const formClassName = classNames(prefixCls, {
|
||||||
|
[`${prefixCls}-horizontal`]: layout === 'horizontal',
|
||||||
|
[`${prefixCls}-vertical`]: layout === 'vertical',
|
||||||
|
[`${prefixCls}-inline`]: layout === 'inline',
|
||||||
|
[`${prefixCls}-hide-required-mark`]: hideRequiredMark,
|
||||||
|
});
|
||||||
|
if (autoFormCreate) {
|
||||||
|
warning(false, 'Form', '`autoFormCreate` is deprecated. please use `form` instead.');
|
||||||
|
const DomForm =
|
||||||
|
this.DomForm ||
|
||||||
|
createDOMForm({
|
||||||
|
fieldNameProp: 'id',
|
||||||
|
...options,
|
||||||
|
fieldMetaProp: FIELD_META_PROP,
|
||||||
|
fieldDataProp: FIELD_DATA_PROP,
|
||||||
|
templateContext: this.$vnode.context,
|
||||||
|
})({
|
||||||
|
provide() {
|
||||||
|
return {
|
||||||
|
decoratorFormProps: this.$props,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
children: $slots.default,
|
||||||
|
formClassName,
|
||||||
|
submit: onSubmit,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
autoFormCreate(this.form);
|
||||||
|
},
|
||||||
|
render() {
|
||||||
|
const { children, formClassName, submit } = this;
|
||||||
|
return (
|
||||||
|
<form onSubmit={submit} class={formClassName}>
|
||||||
|
{children}
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
if (this.domForm) {
|
||||||
|
this.domForm.children = $slots.default;
|
||||||
|
this.domForm.submit = onSubmit;
|
||||||
|
this.domForm.formClassName = formClassName;
|
||||||
|
}
|
||||||
|
this.DomForm = DomForm;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<DomForm
|
||||||
|
wrappedComponentRef={inst => {
|
||||||
|
this.domForm = inst;
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<form onSubmit={onSubmit} class={formClassName}>
|
||||||
|
{$slots.default}
|
||||||
|
</form>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Form;
|
||||||
|
|
@ -0,0 +1,520 @@
|
||||||
|
import { provide, inject, Transition } from 'vue';
|
||||||
|
import PropTypes from '../_util/vue-types';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
import find from 'lodash/find';
|
||||||
|
import Row from '../grid/Row';
|
||||||
|
import Col, { ColProps } from '../grid/Col';
|
||||||
|
import warning from '../_util/warning';
|
||||||
|
import { FIELD_META_PROP, FIELD_DATA_PROP } from './constants';
|
||||||
|
import {
|
||||||
|
initDefaultProps,
|
||||||
|
getComponent,
|
||||||
|
getSlotOptions,
|
||||||
|
isValidElement,
|
||||||
|
getAllChildren,
|
||||||
|
findDOMNode,
|
||||||
|
getSlot,
|
||||||
|
} from '../_util/props-util';
|
||||||
|
import getTransitionProps from '../_util/getTransitionProps';
|
||||||
|
import BaseMixin from '../_util/BaseMixin';
|
||||||
|
import { cloneElement, cloneVNodes } from '../_util/vnode';
|
||||||
|
import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
|
||||||
|
import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
|
||||||
|
import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
|
||||||
|
import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
|
||||||
|
import { ConfigConsumerProps } from '../config-provider';
|
||||||
|
|
||||||
|
const iconMap = {
|
||||||
|
success: CheckCircleFilled,
|
||||||
|
warning: ExclamationCircleFilled,
|
||||||
|
error: CloseCircleFilled,
|
||||||
|
validating: LoadingOutlined,
|
||||||
|
};
|
||||||
|
|
||||||
|
function noop() {}
|
||||||
|
|
||||||
|
function intersperseSpace(list) {
|
||||||
|
return list.reduce((current, item) => [...current, ' ', item], []).slice(1);
|
||||||
|
}
|
||||||
|
export const FormItemProps = {
|
||||||
|
id: PropTypes.string,
|
||||||
|
htmlFor: PropTypes.string,
|
||||||
|
prefixCls: PropTypes.string,
|
||||||
|
label: PropTypes.any,
|
||||||
|
labelCol: PropTypes.shape(ColProps).loose,
|
||||||
|
wrapperCol: PropTypes.shape(ColProps).loose,
|
||||||
|
help: PropTypes.any,
|
||||||
|
extra: PropTypes.any,
|
||||||
|
validateStatus: PropTypes.oneOf(['', 'success', 'warning', 'error', 'validating']),
|
||||||
|
hasFeedback: PropTypes.bool,
|
||||||
|
required: PropTypes.bool,
|
||||||
|
colon: PropTypes.bool,
|
||||||
|
fieldDecoratorId: PropTypes.string,
|
||||||
|
fieldDecoratorOptions: PropTypes.object,
|
||||||
|
selfUpdate: PropTypes.bool,
|
||||||
|
labelAlign: PropTypes.oneOf(['left', 'right']),
|
||||||
|
};
|
||||||
|
function comeFromSlot(vnodes = [], itemVnode) {
|
||||||
|
let isSlot = false;
|
||||||
|
for (let i = 0, len = vnodes.length; i < len; i++) {
|
||||||
|
const vnode = vnodes[i];
|
||||||
|
if (vnode && (vnode === itemVnode || vnode.$vnode === itemVnode)) {
|
||||||
|
isSlot = true;
|
||||||
|
} else {
|
||||||
|
const componentOptions =
|
||||||
|
vnode.componentOptions || (vnode.$vnode && vnode.$vnode.componentOptions);
|
||||||
|
const children = componentOptions ? componentOptions.children : vnode.$children;
|
||||||
|
isSlot = comeFromSlot(children, itemVnode);
|
||||||
|
}
|
||||||
|
if (isSlot) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return isSlot;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AFormItem',
|
||||||
|
mixins: [BaseMixin],
|
||||||
|
inheritAttrs: false,
|
||||||
|
__ANT_FORM_ITEM: true,
|
||||||
|
props: initDefaultProps(FormItemProps, {
|
||||||
|
hasFeedback: false,
|
||||||
|
}),
|
||||||
|
setup() {
|
||||||
|
return {
|
||||||
|
isFormItemChildren: inject('isFormItemChildren', false),
|
||||||
|
FormContext: inject('FormContext', {}),
|
||||||
|
decoratorFormProps: inject('decoratorFormProps', {}),
|
||||||
|
collectFormItemContext: inject('collectFormItemContext', noop),
|
||||||
|
configProvider: inject('configProvider', ConfigConsumerProps),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return { helpShow: false };
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
itemSelfUpdate() {
|
||||||
|
return !!(this.selfUpdate === undefined ? this.FormContext.selfUpdate : this.selfUpdate);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
provide('isFormItemChildren', true);
|
||||||
|
this.collectContext();
|
||||||
|
},
|
||||||
|
beforeUpdate() {
|
||||||
|
if (process.env.NODE_ENV !== 'production') {
|
||||||
|
this.collectContext();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeUnmount() {
|
||||||
|
this.collectFormItemContext(this.$vnode && this.$vnode.context, 'delete');
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const { help, validateStatus } = this.$props;
|
||||||
|
warning(
|
||||||
|
this.getControls(this.slotDefault, true).length <= 1 ||
|
||||||
|
help !== undefined ||
|
||||||
|
validateStatus !== undefined,
|
||||||
|
'Form.Item',
|
||||||
|
'Cannot generate `validateStatus` and `help` automatically, ' +
|
||||||
|
'while there are more than one `getFieldDecorator` in it.',
|
||||||
|
);
|
||||||
|
warning(
|
||||||
|
!this.fieldDecoratorId,
|
||||||
|
'Form.Item',
|
||||||
|
'`fieldDecoratorId` is deprecated. please use `v-decorator={id, options}` instead.',
|
||||||
|
);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
collectContext() {
|
||||||
|
if (this.FormContext.form && this.FormContext.form.templateContext) {
|
||||||
|
const { templateContext } = this.FormContext.form;
|
||||||
|
const vnodes = Object.values(templateContext.$slots || {}).reduce((a, b) => {
|
||||||
|
return [...a, ...b];
|
||||||
|
}, []);
|
||||||
|
const isSlot = comeFromSlot(vnodes, this.$vnode);
|
||||||
|
warning(!isSlot, 'You can not set FormItem from slot, please use slot-scope instead slot');
|
||||||
|
let isSlotScope = false;
|
||||||
|
// 进一步判断是否是通过slot-scope传递
|
||||||
|
if (!isSlot && this.$vnode.context !== templateContext) {
|
||||||
|
isSlotScope = comeFromSlot(this.$vnode.context.$children, templateContext.$vnode);
|
||||||
|
}
|
||||||
|
if (!isSlotScope && !isSlot) {
|
||||||
|
this.collectFormItemContext(this.$vnode.context);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getHelpMessage() {
|
||||||
|
const help = getComponent(this, 'help');
|
||||||
|
const onlyControl = this.getOnlyControl();
|
||||||
|
if (help === undefined && onlyControl) {
|
||||||
|
const errors = this.getField().errors;
|
||||||
|
if (errors) {
|
||||||
|
return intersperseSpace(
|
||||||
|
errors.map((e, index) => {
|
||||||
|
let node = null;
|
||||||
|
if (isValidElement(e)) {
|
||||||
|
node = e;
|
||||||
|
} else if (isValidElement(e.message)) {
|
||||||
|
node = e.message;
|
||||||
|
}
|
||||||
|
return node ? cloneElement(node, { key: index }) : e.message;
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return help;
|
||||||
|
},
|
||||||
|
|
||||||
|
getControls(childrenArray = [], recursively) {
|
||||||
|
let controls = [];
|
||||||
|
for (let i = 0; i < childrenArray.length; i++) {
|
||||||
|
if (!recursively && controls.length > 0) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
const child = childrenArray[i];
|
||||||
|
// if (!child.tag && child.text.trim() === '') {
|
||||||
|
// continue;
|
||||||
|
// }
|
||||||
|
|
||||||
|
if (typeof child.type === 'object' && child.type.__ANT_FORM_ITEM) {
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
const children = getAllChildren(child);
|
||||||
|
const attrs = child.props || {};
|
||||||
|
if (FIELD_META_PROP in attrs) {
|
||||||
|
// And means FIELD_DATA_PROP in child.props, too.
|
||||||
|
controls.push(child);
|
||||||
|
} else if (children) {
|
||||||
|
controls = controls.concat(this.getControls(children, recursively));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return controls;
|
||||||
|
},
|
||||||
|
|
||||||
|
getOnlyControl() {
|
||||||
|
const child = this.getControls(this.slotDefault, false)[0];
|
||||||
|
return child !== undefined ? child : null;
|
||||||
|
},
|
||||||
|
|
||||||
|
getChildAttr(prop) {
|
||||||
|
const child = this.getOnlyControl();
|
||||||
|
let data = {};
|
||||||
|
if (!child) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
debugger;
|
||||||
|
if (child.data) {
|
||||||
|
data = child.data;
|
||||||
|
} else if (child.$vnode && child.$vnode.data) {
|
||||||
|
data = child.$vnode.data;
|
||||||
|
}
|
||||||
|
return data[prop] || data.attrs[prop];
|
||||||
|
},
|
||||||
|
|
||||||
|
getId() {
|
||||||
|
return this.getChildAttr('id');
|
||||||
|
},
|
||||||
|
|
||||||
|
getMeta() {
|
||||||
|
return this.getChildAttr(FIELD_META_PROP);
|
||||||
|
},
|
||||||
|
|
||||||
|
getField() {
|
||||||
|
return this.getChildAttr(FIELD_DATA_PROP);
|
||||||
|
},
|
||||||
|
|
||||||
|
getValidateStatus() {
|
||||||
|
const onlyControl = this.getOnlyControl();
|
||||||
|
if (!onlyControl) {
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
const field = this.getField();
|
||||||
|
if (field.validating) {
|
||||||
|
return 'validating';
|
||||||
|
}
|
||||||
|
if (field.errors) {
|
||||||
|
return 'error';
|
||||||
|
}
|
||||||
|
const fieldValue = 'value' in field ? field.value : this.getMeta().initialValue;
|
||||||
|
if (fieldValue !== undefined && fieldValue !== null && fieldValue !== '') {
|
||||||
|
return 'success';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
},
|
||||||
|
|
||||||
|
// Resolve duplicated ids bug between different forms
|
||||||
|
// https://github.com/ant-design/ant-design/issues/7351
|
||||||
|
onLabelClick() {
|
||||||
|
const id = this.id || this.getId();
|
||||||
|
if (!id) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const formItemNode = findDOMNode(this);
|
||||||
|
const control = formItemNode.querySelector(`[id="${id}"]`);
|
||||||
|
if (control && control.focus) {
|
||||||
|
control.focus();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
onHelpAnimEnd(_key, helpShow) {
|
||||||
|
this.helpShow = helpShow;
|
||||||
|
if (!helpShow) {
|
||||||
|
this.$forceUpdate();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
isRequired() {
|
||||||
|
const { required } = this;
|
||||||
|
if (required !== undefined) {
|
||||||
|
return required;
|
||||||
|
}
|
||||||
|
if (this.getOnlyControl()) {
|
||||||
|
const meta = this.getMeta() || {};
|
||||||
|
const validate = meta.validate || [];
|
||||||
|
|
||||||
|
return validate
|
||||||
|
.filter(item => !!item.rules)
|
||||||
|
.some(item => {
|
||||||
|
return item.rules.some(rule => rule.required);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
},
|
||||||
|
|
||||||
|
renderHelp(prefixCls) {
|
||||||
|
const help = this.getHelpMessage();
|
||||||
|
const children = help ? (
|
||||||
|
<div class={`${prefixCls}-explain`} key="help">
|
||||||
|
{help}
|
||||||
|
</div>
|
||||||
|
) : null;
|
||||||
|
if (children) {
|
||||||
|
this.helpShow = !!children;
|
||||||
|
}
|
||||||
|
const transitionProps = getTransitionProps('show-help', {
|
||||||
|
onAfterEnter: () => this.onHelpAnimEnd('help', true),
|
||||||
|
onAfterLeave: () => this.onHelpAnimEnd('help', false),
|
||||||
|
});
|
||||||
|
return (
|
||||||
|
<Transition {...transitionProps} key="help">
|
||||||
|
{children}
|
||||||
|
</Transition>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
renderExtra(prefixCls) {
|
||||||
|
const extra = getComponent(this, 'extra');
|
||||||
|
return extra ? <div class={`${prefixCls}-extra`}>{extra}</div> : null;
|
||||||
|
},
|
||||||
|
|
||||||
|
renderValidateWrapper(prefixCls, c1, c2, c3) {
|
||||||
|
const props = this.$props;
|
||||||
|
const onlyControl = this.getOnlyControl;
|
||||||
|
const validateStatus =
|
||||||
|
props.validateStatus === undefined && onlyControl
|
||||||
|
? this.getValidateStatus()
|
||||||
|
: props.validateStatus;
|
||||||
|
|
||||||
|
let classes = `${prefixCls}-item-control`;
|
||||||
|
if (validateStatus) {
|
||||||
|
classes = classNames(`${prefixCls}-item-control`, {
|
||||||
|
'has-feedback': props.hasFeedback || validateStatus === 'validating',
|
||||||
|
'has-success': validateStatus === 'success',
|
||||||
|
'has-warning': validateStatus === 'warning',
|
||||||
|
'has-error': validateStatus === 'error',
|
||||||
|
'is-validating': validateStatus === 'validating',
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const IconNode = validateStatus && iconMap[validateStatus];
|
||||||
|
|
||||||
|
const icon =
|
||||||
|
props.hasFeedback && IconNode ? (
|
||||||
|
<span class={`${prefixCls}-item-children-icon`}>
|
||||||
|
<IconNode />
|
||||||
|
</span>
|
||||||
|
) : null;
|
||||||
|
return (
|
||||||
|
<div class={classes}>
|
||||||
|
<span class={`${prefixCls}-item-children`}>
|
||||||
|
{c1}
|
||||||
|
{icon}
|
||||||
|
</span>
|
||||||
|
{c2}
|
||||||
|
{c3}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
renderWrapper(prefixCls, children) {
|
||||||
|
const { wrapperCol: contextWrapperCol } = this.isFormItemChildren ? {} : this.FormContext;
|
||||||
|
const { wrapperCol } = this;
|
||||||
|
const mergedWrapperCol = wrapperCol || contextWrapperCol || {};
|
||||||
|
const { style, id, ...restProps } = mergedWrapperCol;
|
||||||
|
const className = classNames(`${prefixCls}-item-control-wrapper`, mergedWrapperCol.class);
|
||||||
|
const colProps = {
|
||||||
|
...restProps,
|
||||||
|
class: className,
|
||||||
|
key: 'wrapper',
|
||||||
|
style,
|
||||||
|
id,
|
||||||
|
};
|
||||||
|
return <Col {...colProps}>{children}</Col>;
|
||||||
|
},
|
||||||
|
|
||||||
|
renderLabel(prefixCls) {
|
||||||
|
const {
|
||||||
|
vertical,
|
||||||
|
labelAlign: contextLabelAlign,
|
||||||
|
labelCol: contextLabelCol,
|
||||||
|
colon: contextColon,
|
||||||
|
} = this.FormContext;
|
||||||
|
const { labelAlign, labelCol, colon, id, htmlFor } = this;
|
||||||
|
const label = getComponent(this, 'label');
|
||||||
|
const required = this.isRequired();
|
||||||
|
const mergedLabelCol = labelCol || contextLabelCol || {};
|
||||||
|
|
||||||
|
const mergedLabelAlign = labelAlign || contextLabelAlign;
|
||||||
|
const labelClsBasic = `${prefixCls}-item-label`;
|
||||||
|
const labelColClassName = classNames(
|
||||||
|
labelClsBasic,
|
||||||
|
mergedLabelAlign === 'left' && `${labelClsBasic}-left`,
|
||||||
|
mergedLabelCol.class,
|
||||||
|
);
|
||||||
|
const {
|
||||||
|
class: labelColClass,
|
||||||
|
style: labelColStyle,
|
||||||
|
id: labelColId,
|
||||||
|
...restProps
|
||||||
|
} = mergedLabelCol;
|
||||||
|
let labelChildren = label;
|
||||||
|
// Keep label is original where there should have no colon
|
||||||
|
const computedColon = colon === true || (contextColon !== false && colon !== false);
|
||||||
|
const haveColon = computedColon && !vertical;
|
||||||
|
// Remove duplicated user input colon
|
||||||
|
if (haveColon && typeof label === 'string' && label.trim() !== '') {
|
||||||
|
labelChildren = label.replace(/[：:]\s*$/, '');
|
||||||
|
}
|
||||||
|
|
||||||
|
const labelClassName = classNames({
|
||||||
|
[`${prefixCls}-item-required`]: required,
|
||||||
|
[`${prefixCls}-item-no-colon`]: !computedColon,
|
||||||
|
});
|
||||||
|
const colProps = {
|
||||||
|
...restProps,
|
||||||
|
class: labelColClassName,
|
||||||
|
key: 'label',
|
||||||
|
style: labelColStyle,
|
||||||
|
id: labelColId,
|
||||||
|
};
|
||||||
|
|
||||||
|
return label ? (
|
||||||
|
<Col {...colProps}>
|
||||||
|
<label
|
||||||
|
for={htmlFor || id || this.getId()}
|
||||||
|
class={labelClassName}
|
||||||
|
title={typeof label === 'string' ? label : ''}
|
||||||
|
onClick={this.onLabelClick}
|
||||||
|
>
|
||||||
|
{labelChildren}
|
||||||
|
</label>
|
||||||
|
</Col>
|
||||||
|
) : null;
|
||||||
|
},
|
||||||
|
renderChildren(prefixCls) {
|
||||||
|
return [
|
||||||
|
this.renderLabel(prefixCls),
|
||||||
|
this.renderWrapper(
|
||||||
|
prefixCls,
|
||||||
|
this.renderValidateWrapper(
|
||||||
|
prefixCls,
|
||||||
|
this.slotDefault,
|
||||||
|
this.renderHelp(prefixCls),
|
||||||
|
this.renderExtra(prefixCls),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
];
|
||||||
|
},
|
||||||
|
renderFormItem() {
|
||||||
|
const { prefixCls: customizePrefixCls } = this.$props;
|
||||||
|
const { class: className, ...restProps } = this.$attrs;
|
||||||
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||||
|
const prefixCls = getPrefixCls('form', customizePrefixCls);
|
||||||
|
const children = this.renderChildren(prefixCls);
|
||||||
|
const itemClassName = {
|
||||||
|
[className]: true,
|
||||||
|
[`${prefixCls}-item`]: true,
|
||||||
|
[`${prefixCls}-item-with-help`]: this.helpShow,
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Row class={classNames(itemClassName)} key="row" {...restProps}>
|
||||||
|
{children}
|
||||||
|
</Row>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
decoratorOption(vnode) {
|
||||||
|
if (vnode.data && vnode.data.directives) {
|
||||||
|
const directive = find(vnode.data.directives, ['name', 'decorator']);
|
||||||
|
warning(
|
||||||
|
!directive || (directive && Array.isArray(directive.value)),
|
||||||
|
'Form',
|
||||||
|
`Invalid directive: type check failed for directive "decorator". Expected Array, got ${typeof (directive
|
||||||
|
? directive.value
|
||||||
|
: directive)}. At ${vnode.tag}.`,
|
||||||
|
);
|
||||||
|
return directive ? directive.value : null;
|
||||||
|
} else {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
decoratorChildren(vnodes) {
|
||||||
|
const { FormContext } = this;
|
||||||
|
const getFieldDecorator = FormContext.form.getFieldDecorator;
|
||||||
|
for (let i = 0, len = vnodes.length; i < len; i++) {
|
||||||
|
const vnode = vnodes[i];
|
||||||
|
if (getSlotOptions(vnode).__ANT_FORM_ITEM) {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
if (vnode.children) {
|
||||||
|
vnode.children = this.decoratorChildren(cloneVNodes(vnode.children));
|
||||||
|
} else if (vnode.componentOptions && vnode.componentOptions.children) {
|
||||||
|
vnode.componentOptions.children = this.decoratorChildren(
|
||||||
|
cloneVNodes(vnode.componentOptions.children),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
const option = this.decoratorOption(vnode);
|
||||||
|
if (option && option[0]) {
|
||||||
|
vnodes[i] = getFieldDecorator(option[0], option[1], this)(vnode);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return vnodes;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const { decoratorFormProps, fieldDecoratorId, fieldDecoratorOptions = {}, FormContext } = this;
|
||||||
|
let child = getSlot(this);
|
||||||
|
if (decoratorFormProps.form && fieldDecoratorId && child.length) {
|
||||||
|
const getFieldDecorator = decoratorFormProps.form.getFieldDecorator;
|
||||||
|
child[0] = getFieldDecorator(fieldDecoratorId, fieldDecoratorOptions, this)(child[0]);
|
||||||
|
warning(
|
||||||
|
!(child.length > 1),
|
||||||
|
'Form',
|
||||||
|
'`autoFormCreate` just `decorator` then first children. but you can use JSX to support multiple children',
|
||||||
|
);
|
||||||
|
this.slotDefault = child;
|
||||||
|
} else if (FormContext.form) {
|
||||||
|
child = cloneVNodes(child);
|
||||||
|
this.slotDefault = this.decoratorChildren(child);
|
||||||
|
} else {
|
||||||
|
this.slotDefault = child;
|
||||||
|
}
|
||||||
|
return this.renderFormItem();
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
@ -0,0 +1,849 @@
|
||||||
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
|
exports[`renders ./antdv-demo/docs/form/demo/advanced-search.vue correctly 1`] = `
|
||||||
|
<div id="components-form-demo-advanced-search">
|
||||||
|
<form class="ant-advanced-search-form ant-form ant-form-horizontal">
|
||||||
|
<div class="ant-row" style="margin-left: -12px; margin-right: -12px;">
|
||||||
|
<div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-form-item-label"><label for="advanced_search_field-1" title="Field 1" class="ant-form-item-required">Field 1</label></div>
|
||||||
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-1" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-form-item-label"><label for="advanced_search_field-2" title="Field 2" class="ant-form-item-required">Field 2</label></div>
|
||||||
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-2" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-form-item-label"><label for="advanced_search_field-3" title="Field 3" class="ant-form-item-required">Field 3</label></div>
|
||||||
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-3" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-form-item-label"><label for="advanced_search_field-4" title="Field 4" class="ant-form-item-required">Field 4</label></div>
|
||||||
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-4" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-form-item-label"><label for="advanced_search_field-5" title="Field 5" class="ant-form-item-required">Field 5</label></div>
|
||||||
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-5" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-form-item-label"><label for="advanced_search_field-6" title="Field 6" class="ant-form-item-required">Field 6</label></div>
|
||||||
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-6" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: none;">
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-form-item-label"><label for="advanced_search_field-7" title="Field 7" class="ant-form-item-required">Field 7</label></div>
|
||||||
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-7" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: none;">
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-form-item-label"><label for="advanced_search_field-8" title="Field 8" class="ant-form-item-required">Field 8</label></div>
|
||||||
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-8" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: none;">
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-form-item-label"><label for="advanced_search_field-9" title="Field 9" class="ant-form-item-required">Field 9</label></div>
|
||||||
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-9" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: none;">
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-form-item-label"><label for="advanced_search_field-10" title="Field 10" class="ant-form-item-required">Field 10</label></div>
|
||||||
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-10" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row">
|
||||||
|
<div class="ant-col ant-col-24" style="text-align: right;"><button type="submit" class="ant-btn ant-btn-primary"><span>Search</span></button> <button type="button" class="ant-btn" style="margin-left: 8px;"><span>Clear</span></button> <a style="margin-left: 8px; font-size: 12px;">
|
||||||
|
Collapse
|
||||||
|
<span role="img" aria-label="down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></a></div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
<div class="search-result-list">
|
||||||
|
Search Result List
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./antdv-demo/docs/form/demo/coordinated.vue correctly 1`] = `
|
||||||
|
<form class="ant-form ant-form-horizontal">
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-5 ant-form-item-label"><label for="coordinated_note" title="Note" class="ant-form-item-required">Note</label></div>
|
||||||
|
<div class="ant-col ant-col-12 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="coordinated_note" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-5 ant-form-item-label"><label for="coordinated_gender" title="Gender" class="ant-form-item-required">Gender</label></div>
|
||||||
|
<div class="ant-col ant-col-12 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled" data-__meta="[object Object]" data-__field="[object Object]" id="coordinated_gender"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Select a option and change input text above</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
|
||||||
|
</div></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-12 ant-col-offset-5 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./antdv-demo/docs/form/demo/customized-form-controls.vue correctly 1`] = `
|
||||||
|
<form class="ant-form ant-form-inline">
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-form-item-label"><label for="customized_form_controls_price" title="Price" class="">Price</label></div>
|
||||||
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><span data-__meta="[object Object]" data-__field="[object Object]" id="customized_form_controls_price" class=""><input type="text" class="ant-input" style="width: 63%; margin-right: 2%;"> <div tabindex="0" class="ant-select ant-select-enabled" style="width: 32%;"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="RMB" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">RMB</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
|
||||||
|
</div></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./antdv-demo/docs/form/demo/dynamic-form-item.vue correctly 1`] = `
|
||||||
|
<form class="ant-form ant-form-horizontal">
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-dashed" style="width: 60%;"><span role="img" aria-label="plus" class="anticon anticon-plus"><svg viewBox="64 64 896 896" focusable="false" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><defs><style></style></defs><path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path><path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"></path></svg></span><span>Add field</span></button></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./antdv-demo/docs/form/demo/dynamic-rule.vue correctly 1`] = `
|
||||||
|
<form class="ant-form ant-form-horizontal">
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-4 ant-form-item-label"><label for="dynamic_rule_username" title="Name" class="ant-form-item-required">Name</label></div>
|
||||||
|
<div class="ant-col ant-col-8 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="Please input your name" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="dynamic_rule_username" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-4 ant-form-item-label"><label for="dynamic_rule_nickname" title="Nickname" class="">Nickname</label></div>
|
||||||
|
<div class="ant-col ant-col-8 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="Please input your nickname" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="dynamic_rule_nickname" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-8 ant-col-offset-4 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>
|
||||||
|
Nickname is required
|
||||||
|
</span></label></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-8 ant-col-offset-4 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Check</span></button></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./antdv-demo/docs/form/demo/form-in-modal.vue correctly 1`] = `
|
||||||
|
<div><button type="button" class="ant-btn ant-btn-primary"><span>New Collection</span></button>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./antdv-demo/docs/form/demo/global-state.vue correctly 1`] = `
|
||||||
|
<div id="components-form-demo-global-state">
|
||||||
|
<form class="ant-form ant-form-inline">
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-form-item-label"><label for="global_state_username" title="Username" class="ant-form-item-required">Username</label></div>
|
||||||
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="global_state_username" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form> <pre class="language-bash"> {
|
||||||
|
"username": {
|
||||||
|
"value": "benjycui"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</pre>
|
||||||
|
</div>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./antdv-demo/docs/form/demo/horizontal-login.vue correctly 1`] = `
|
||||||
|
<form class="ant-form ant-form-inline">
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="user" class="anticon anticon-user" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><input placeholder="Username" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="horizontal_login_userName" class="ant-input"></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="lock" class="anticon anticon-lock" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="lock" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"></path></svg></span></span><input placeholder="Password" type="password" data-__meta="[object Object]" data-__field="[object Object]" id="horizontal_login_password" class="ant-input"></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Log in</span></button></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./antdv-demo/docs/form/demo/layout.vue correctly 1`] = `
|
||||||
|
<form class="ant-form ant-form-horizontal">
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Form Layout" class="">Form Layout</label></div>
|
||||||
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"><span class="ant-radio-button ant-radio-button-checked"><input type="radio" class="ant-radio-button-input" value="horizontal"><span class="ant-radio-button-inner"></span></span><span>
|
||||||
|
Horizontal
|
||||||
|
</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="vertical"><span class="ant-radio-button-inner"></span></span><span>
|
||||||
|
Vertical
|
||||||
|
</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="inline"><span class="ant-radio-button-inner"></span></span><span>
|
||||||
|
Inline
|
||||||
|
</span></label></div></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Field A" class="">Field A</label></div>
|
||||||
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="input placeholder" type="text" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Field B" class="">Field B</label></div>
|
||||||
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="input placeholder" type="text" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./antdv-demo/docs/form/demo/normal-login.vue correctly 1`] = `
|
||||||
|
<form class="login-form ant-form ant-form-horizontal" id="components-form-demo-normal-login">
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="user" class="anticon anticon-user" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><input placeholder="Username" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="normal_login_userName" class="ant-input"></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="lock" class="anticon anticon-lock" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="lock" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"></path></svg></span></span><input placeholder="Password" type="password" data-__meta="[object Object]" data-__field="[object Object]" id="normal_login_password" class="ant-input"></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input id="normal_login_remember" type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>
|
||||||
|
Remember me
|
||||||
|
</span></label><a href="" class="login-form-forgot">
|
||||||
|
Forgot password
|
||||||
|
</a><button type="submit" class="login-form-button ant-btn ant-btn-primary"><span>Log in</span></button>
|
||||||
|
Or
|
||||||
|
<a href="">
|
||||||
|
register now!
|
||||||
|
</a></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./antdv-demo/docs/form/demo/register.vue correctly 1`] = `
|
||||||
|
<form class="ant-form ant-form-horizontal">
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_email" title="E-mail" class="ant-form-item-required">E-mail</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="register_email" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_password" title="Password" class="ant-form-item-required">Password</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="password" data-__meta="[object Object]" data-__field="[object Object]" id="register_password" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_confirm" title="Confirm Password" class="ant-form-item-required">Confirm Password</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="password" data-__meta="[object Object]" data-__field="[object Object]" id="register_confirm" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_nickname" title="" class="ant-form-item-required"><span>
|
||||||
|
Nickname
|
||||||
|
<span role="img" aria-label="question-circle" class="anticon anticon-question-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="question-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"></path></svg></span></span></label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="register_nickname" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_residence" title="Habitual Residence" class="ant-form-item-required">Habitual Residence</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><span tabindex="0" class="ant-cascader-picker"><input type="text" readonly="true" data-__meta="[object Object]" data-__field="[object Object]" id="register_residence" class="ant-input ant-cascader-input "><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><span role="img" aria-label="close-circle" tabindex="-1" class="anticon anticon-close-circle ant-cascader-picker-clear"><svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="down" class="anticon anticon-down ant-cascader-picker-arrow"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_phone" title="Phone Number" class="ant-form-item-required">Phone Number</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-group-wrapper" style="width: 100%;"><span class="ant-input-wrapper ant-input-group"><span class="ant-input-group-addon"><div tabindex="0" class="ant-select ant-select-enabled" style="width: 70px;" data-__meta="[object Object]" data-__field="[object Object]" id="register_prefix"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="+86" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">
|
||||||
|
+86
|
||||||
|
</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
|
||||||
|
</div></span><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="register_phone" class="ant-input"></span></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_website" title="Website" class="ant-form-item-required">Website</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" data-__meta="[object Object]" data-__field="[object Object]" id="register_website"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><ul><li class="ant-select-search ant-select-search--inline"><div class="ant-select-search__field__wrap"><input placeholder="website" type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror"> </span></div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
|
||||||
|
</div>
|
||||||
|
</div></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_captcha" title="Captcha" class="ant-form-item-required">Captcha</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-row" style="margin-left: -4px; margin-right: -4px;"><div class="ant-col ant-col-12" style="padding-left: 4px; padding-right: 4px;"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="register_captcha" class="ant-input"></div> <div class="ant-col ant-col-12" style="padding-left: 4px; padding-right: 4px;"><button type="button" class="ant-btn"><span>Get captcha</span></button></div>
|
||||||
|
</div></span>
|
||||||
|
<!---->
|
||||||
|
<div class="ant-form-extra">We must make sure that your are a human.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input id="register_agreement" type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>
|
||||||
|
I have read the
|
||||||
|
<a href="">
|
||||||
|
agreement
|
||||||
|
</a></span></label></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Register</span></button></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./antdv-demo/docs/form/demo/time-related-controls.vue correctly 1`] = `
|
||||||
|
<form class="ant-form ant-form-horizontal">
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_date-picker" title="DatePicker" class="ant-form-item-required">DatePicker</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_date-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_date-time-picker" title="DatePicker[showTime]" class="ant-form-item-required">DatePicker[showTime]</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="min-width: 195px;" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_date-time-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_month-picker" title="MonthPicker" class="ant-form-item-required">MonthPicker</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_month-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_range-picker" title="RangePicker" class="ant-form-item-required">RangePicker</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><span tabindex="0" class="ant-calendar-picker" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_range-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_range-time-picker" title="RangePicker[showTime]" class="ant-form-item-required">RangePicker[showTime]</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><span tabindex="0" class="ant-calendar-picker" style="width: 350px;" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_range-time-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_time-picker" title="TimePicker" class="ant-form-item-required">TimePicker</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-time-picker" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_time-picker"><input type="text" placeholder="Select time" class="ant-time-picker-input"><span class="ant-time-picker-icon"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle ant-time-picker-clock-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./antdv-demo/docs/form/demo/validate-other.vue correctly 1`] = `
|
||||||
|
<form class="ant-form ant-form-horizontal" id="components-form-demo-validate-other">
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-6 ant-form-item-label"><label title="Plain Text" class="">Plain Text</label></div>
|
||||||
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-form-text">
|
||||||
|
China
|
||||||
|
</span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_select" title="Select" class="ant-form-item-required">Select</label></div>
|
||||||
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_select"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Please select a country</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
|
||||||
|
</div></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_select-multiple" title="Select[multiple]" class="ant-form-item-required">Select[multiple]</label></div>
|
||||||
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_select-multiple"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Please select favourite colors</div><div><li class="ant-select-search ant-select-search--inline"><div class="ant-select-search__field__wrap"><input autocomplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror"> </span></div>
|
||||||
|
</li>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_input-number" title="InputNumber" class="">InputNumber</label></div>
|
||||||
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-input-number" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_input-number"><div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
|
||||||
|
<div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" autocomplete="off" max="10" min="1" step="1" class="ant-input-number-input"></div>
|
||||||
|
</div><span class="ant-form-text">
|
||||||
|
machines
|
||||||
|
</span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_switch" title="Switch" class="">Switch</label></div>
|
||||||
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" role="switch" class="ant-switch" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_switch"><span class="ant-switch-inner"></span></button></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_slider" title="Slider" class="">Slider</label></div>
|
||||||
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="-1" class="ant-slider ant-slider-with-marks" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_slider"><div class="ant-slider-rail"></div><div class="ant-slider-track" style="left: 0%; width: 0%;"></div><div class="ant-slider-step"><span class="ant-slider-dot ant-slider-dot-active" style="left: 0%;"></span><span class="ant-slider-dot" style="left: 20%;"></span><span class="ant-slider-dot" style="left: 40%;"></span><span class="ant-slider-dot" style="left: 60%;"></span><span class="ant-slider-dot" style="left: 80%;"></span><span class="ant-slider-dot" style="left: 100%;"></span></div>
|
||||||
|
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" class="ant-slider-handle" style="left: 0%; transform: translateX(-50%);"></div>
|
||||||
|
<div class="ant-slider-mark"><span class="ant-slider-mark-text ant-slider-mark-text-active" style="transform: translateX(-50%); left: 0%;">A</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 20%;">B</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 40%;">C</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 60%;">D</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 80%;">E</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 100%;">F</span></div>
|
||||||
|
</div></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_radio-group" title="Radio.Group" class="">Radio.Group</label></div>
|
||||||
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_radio-group"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="a"><span class="ant-radio-inner"></span></span><span>
|
||||||
|
item 1
|
||||||
|
</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="b"><span class="ant-radio-inner"></span></span><span>
|
||||||
|
item 2
|
||||||
|
</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="c"><span class="ant-radio-inner"></span></span><span>
|
||||||
|
item 3
|
||||||
|
</span></label></div></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_radio-button" title="Radio.Button" class="">Radio.Button</label></div>
|
||||||
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_radio-button"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>
|
||||||
|
item 1
|
||||||
|
</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>
|
||||||
|
item 2
|
||||||
|
</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>
|
||||||
|
item 3
|
||||||
|
</span></label></div></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_checkbox-group" title="Checkbox.Group" class="">Checkbox.Group</label></div>
|
||||||
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-checkbox-group" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_checkbox-group" style="width: 100%;"><div class="ant-row"><div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="A"><span class="ant-checkbox-inner"></span></span><span>
|
||||||
|
A
|
||||||
|
</span></label></div>
|
||||||
|
<div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value="B"><span class="ant-checkbox-inner"></span></span><span>
|
||||||
|
B
|
||||||
|
</span></label></div>
|
||||||
|
<div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="C"><span class="ant-checkbox-inner"></span></span><span>
|
||||||
|
C
|
||||||
|
</span></label></div>
|
||||||
|
<div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="D"><span class="ant-checkbox-inner"></span></span><span>
|
||||||
|
D
|
||||||
|
</span></label></div>
|
||||||
|
<div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="E"><span class="ant-checkbox-inner"></span></span><span>
|
||||||
|
E
|
||||||
|
</span></label></div>
|
||||||
|
</div>
|
||||||
|
</div></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_rate" title="Rate" class="">Rate</label></div>
|
||||||
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><ul tabindex="0" role="radiogroup" class="ant-rate" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_rate"><li class="ant-rate-star ant-rate-star-full"><div role="radio" aria-checked="true" aria-posinset="1" aria-setsize="5" tabindex="0"><div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
|
||||||
|
<div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="ant-rate-star ant-rate-star-full">
|
||||||
|
<div role="radio" aria-checked="true" aria-posinset="2" aria-setsize="5" tabindex="0">
|
||||||
|
<div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
|
||||||
|
<div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="ant-rate-star ant-rate-star-full">
|
||||||
|
<div role="radio" aria-checked="true" aria-posinset="3" aria-setsize="5" tabindex="0">
|
||||||
|
<div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
|
||||||
|
<div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="ant-rate-star ant-rate-star-half ant-rate-star-active">
|
||||||
|
<div role="radio" aria-checked="true" aria-posinset="4" aria-setsize="5" tabindex="0">
|
||||||
|
<div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
|
||||||
|
<div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<li class="ant-rate-star ant-rate-star-zero">
|
||||||
|
<div role="radio" aria-checked="false" aria-posinset="5" aria-setsize="5" tabindex="0">
|
||||||
|
<div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
|
||||||
|
<div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_upload" title="Upload" class="">Upload</label></div>
|
||||||
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class=""><div class="ant-upload ant-upload-select ant-upload-select-picture"><!----></div><div class="ant-upload-list ant-upload-list-picture"></div></span></span>
|
||||||
|
<!---->
|
||||||
|
<div class="ant-form-extra">longgggggggggggggggggggggggggggggggggg</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_dragger" title="Dragger" class="">Dragger</label></div>
|
||||||
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="dropbox"><span data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_dragger" class=""><div class="ant-upload ant-upload-drag"><!----></div><div class="ant-upload-list ant-upload-list-text"></div></span></div></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-12 ant-col-offset-6 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./antdv-demo/docs/form/demo/validate-static.vue correctly 1`] = `
|
||||||
|
<form class="ant-form ant-form-horizontal">
|
||||||
|
<div class="ant-row ant-form-item ant-form-item-with-help">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Fail" class="">Fail</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control has-error"><span class="ant-form-item-children"><input placeholder="unavailable choice" type="text" id="error" class="ant-input"></span>
|
||||||
|
<div class="ant-form-explain show-help-enter">Should be combination of numbers & alphabets</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Warning" class="">Warning</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control has-warning"><span class="ant-form-item-children"><input placeholder="Warning" type="text" id="warning" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item ant-form-item-with-help">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Validating" class="">Validating</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control has-feedback is-validating"><span class="ant-form-item-children"><input placeholder="I'm the content is being validated" type="text" id="validating" class="ant-input"><span class="ant-form-item-children-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="anticon-spin"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></span>
|
||||||
|
<div class="ant-form-explain show-help-enter">The information is being validated...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Success" class="">Success</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control has-feedback has-success"><span class="ant-form-item-children"><input placeholder="I'm the content" type="text" id="success" class="ant-input"><span class="ant-form-item-children-icon"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Warning" class="">Warning</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control has-feedback has-warning"><span class="ant-form-item-children"><input placeholder="Warning" type="text" id="warning2" class="ant-input"><span class="ant-form-item-children-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item ant-form-item-with-help">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Fail" class="">Fail</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control has-feedback has-error"><span class="ant-form-item-children"><input placeholder="unavailable choice" type="text" id="error2" class="ant-input"><span class="ant-form-item-children-icon"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></span>
|
||||||
|
<div class="ant-form-explain show-help-enter">Should be combination of numbers & alphabets</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Success" class="">Success</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control has-feedback has-success"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="width: 100%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span><span class="ant-form-item-children-icon"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Warning" class="">Warning</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control has-feedback has-warning"><span class="ant-form-item-children"><span class="ant-time-picker" style="width: 100%;"><input type="text" placeholder="Select time" class="ant-time-picker-input"><span class="ant-time-picker-icon"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle ant-time-picker-clock-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span></span><span class="ant-form-item-children-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Error" class="">Error</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control has-feedback has-error"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Option 1" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">
|
||||||
|
Option 1
|
||||||
|
</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
|
||||||
|
</div><span class="ant-form-item-children-icon"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item ant-form-item-with-help">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Validating" class="">Validating</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control has-feedback is-validating"><span class="ant-form-item-children"><span tabindex="0" class="ant-cascader-picker"><input type="text" readonly="true" class="ant-input ant-cascader-input "><span class="ant-cascader-picker-label"></span><span role="img" aria-label="close-circle" tabindex="-1" class="anticon anticon-close-circle ant-cascader-picker-clear"><svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="down" class="anticon anticon-down ant-cascader-picker-arrow"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span><span class="ant-form-item-children-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="anticon-spin"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></span>
|
||||||
|
<div class="ant-form-explain show-help-enter">The information is being validated...</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item" style="margin-bottom: 0px;">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="inline" class="">inline</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-row ant-form-item ant-form-item-with-help" style="display: inline-block;"><div class="ant-col ant-form-item-control-wrapper"><div class="ant-form-item-control has-error"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="width: 100%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
|
||||||
|
<div class="ant-form-explain show-help-enter">Please select the correct date</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div><span style="display: inline-block; width: 24px; text-align: center;">
|
||||||
|
-
|
||||||
|
</span>
|
||||||
|
<div class="ant-row ant-form-item" style="display: inline-block;">
|
||||||
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="width: 100%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Success" class="">Success</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control has-feedback has-success"><span class="ant-form-item-children"><div class="ant-input-number" style="width: 100%;"><div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
|
||||||
|
<div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="-9007199254740991" autocomplete="off" min="-9007199254740991" step="1" class="ant-input-number-input"></div>
|
||||||
|
</div><span class="ant-form-item-children-icon"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Success" class="">Success</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control has-feedback has-success"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><input placeholder="with allowClear" type="text" class="ant-input"><span class="ant-input-suffix"></span></span><span class="ant-form-item-children-icon"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Warning" class="">Warning</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control has-feedback has-warning"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper ant-input-password"><input placeholder="with input password" type="password" class="ant-input"><span class="ant-input-suffix"><span role="img" aria-label="eye-invisible" tabindex="-1" class="anticon anticon-eye-invisible ant-input-password-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="eye-invisible" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"></path><path d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"></path></svg></span></span></span><span class="ant-form-item-children-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Error" class="">Error</label></div>
|
||||||
|
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control has-feedback has-error"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper ant-input-password"><input placeholder="with input password and allowClear" type="password" class="ant-input"><span class="ant-input-suffix"><span role="img" aria-label="eye-invisible" tabindex="-1" class="anticon anticon-eye-invisible ant-input-password-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="eye-invisible" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"></path><path d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"></path></svg></span></span></span><span class="ant-form-item-children-icon"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
`;
|
||||||
|
|
||||||
|
exports[`renders ./antdv-demo/docs/form/demo/without-form-create.vue correctly 1`] = `
|
||||||
|
<form class="ant-form ant-form-horizontal">
|
||||||
|
<div class="ant-row ant-form-item ant-form-item-with-help">
|
||||||
|
<div class="ant-col ant-col-7 ant-form-item-label"><label title="Prime between 8 & 12" class="">Prime between 8 & 12</label></div>
|
||||||
|
<div class="ant-col ant-col-12 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-input-number"><div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
|
||||||
|
<div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="8" aria-valuemax="12" aria-valuenow="11" autocomplete="off" max="12" min="8" step="1" class="ant-input-number-input"></div>
|
||||||
|
</div></span>
|
||||||
|
<div class="ant-form-explain show-help-enter">A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
`;
|
||||||
|
|
@ -0,0 +1,3 @@
|
||||||
|
import demoTest from '../../../tests/shared/demoTest';
|
||||||
|
|
||||||
|
demoTest('form', { suffix: 'vue', skip: ['index.vue', 'vuex.vue'] });
|
||||||
|
|
@ -0,0 +1,20 @@
|
||||||
|
import Vue from 'vue';
|
||||||
|
import Form from './Form';
|
||||||
|
import ref from 'vue-ref';
|
||||||
|
import FormDecoratorDirective from '../_util/FormDecoratorDirective';
|
||||||
|
|
||||||
|
Vue.use(ref, { name: 'ant-ref' });
|
||||||
|
Vue.use(FormDecoratorDirective);
|
||||||
|
Vue.prototype.$form = Form;
|
||||||
|
|
||||||
|
export { FormProps, FormCreateOption, ValidationRule } from './Form';
|
||||||
|
export { FormItemProps } from './FormItem';
|
||||||
|
|
||||||
|
/* istanbul ignore next */
|
||||||
|
Form.install = function(Vue) {
|
||||||
|
Vue.component(Form.name, Form);
|
||||||
|
Vue.component(Form.Item.name, Form.Item);
|
||||||
|
Vue.prototype.$form = Form;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Form;
|
||||||
|
|
@ -1,61 +1,18 @@
|
||||||
|
import { inject, provide } from 'vue';
|
||||||
import PropTypes from '../_util/vue-types';
|
import PropTypes from '../_util/vue-types';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { ColProps } from '../grid/Col';
|
import { ColProps } from '../grid/Col';
|
||||||
import Vue from 'vue';
|
|
||||||
import isRegExp from 'lodash/isRegExp';
|
import isRegExp from 'lodash/isRegExp';
|
||||||
import warning from '../_util/warning';
|
import warning from '../_util/warning';
|
||||||
import createDOMForm from '../vc-form/src/createDOMForm';
|
|
||||||
import createFormField from '../vc-form/src/createFormField';
|
|
||||||
import FormItem from './FormItem';
|
import FormItem from './FormItem';
|
||||||
import { FIELD_META_PROP, FIELD_DATA_PROP } from './constants';
|
import { initDefaultProps, getSlot } from '../_util/props-util';
|
||||||
import { initDefaultProps, getListeners } from '../_util/props-util';
|
|
||||||
import { ConfigConsumerProps } from '../config-provider';
|
import { ConfigConsumerProps } from '../config-provider';
|
||||||
|
import { getNamePath, containsNamePath } from './utils/valueUtil';
|
||||||
export const FormCreateOption = {
|
import { defaultValidateMessages } from './utils/messages';
|
||||||
onFieldsChange: PropTypes.func,
|
import { allPromiseFinish } from './utils/asyncUtil';
|
||||||
onValuesChange: PropTypes.func,
|
import { toArray } from './utils/typeUtil';
|
||||||
mapPropsToFields: PropTypes.func,
|
import isEqual from 'lodash/isEqual';
|
||||||
validateMessages: PropTypes.any,
|
import scrollIntoView from 'scroll-into-view-if-needed';
|
||||||
withRef: PropTypes.bool,
|
|
||||||
name: PropTypes.string,
|
|
||||||
};
|
|
||||||
|
|
||||||
// function create
|
|
||||||
export const WrappedFormUtils = {
|
|
||||||
/** 获取一组输入控件的值，如不传入参数，则获取全部组件的值 */
|
|
||||||
getFieldsValue: PropTypes.func,
|
|
||||||
/** 获取一个输入控件的值*/
|
|
||||||
getFieldValue: PropTypes.func,
|
|
||||||
/** 设置一组输入控件的值*/
|
|
||||||
setFieldsValue: PropTypes.func,
|
|
||||||
/** 设置一组输入控件的值*/
|
|
||||||
setFields: PropTypes.func,
|
|
||||||
/** 校验并获取一组输入域的值与 Error */
|
|
||||||
validateFields: PropTypes.func,
|
|
||||||
// validateFields(fieldNames: Array<string>, options: Object, callback: ValidateCallback): void;
|
|
||||||
// validateFields(fieldNames: Array<string>, callback: ValidateCallback): void;
|
|
||||||
// validateFields(options: Object, callback: ValidateCallback): void;
|
|
||||||
// validateFields(callback: ValidateCallback): void;
|
|
||||||
// validateFields(): void;
|
|
||||||
/** 与 `validateFields` 相似，但校验完后，如果校验不通过的菜单域不在可见范围内，则自动滚动进可见范围 */
|
|
||||||
validateFieldsAndScroll: PropTypes.func,
|
|
||||||
// validateFieldsAndScroll(fieldNames?: Array<string>, options?: Object, callback?: ValidateCallback): void;
|
|
||||||
// validateFieldsAndScroll(fieldNames?: Array<string>, callback?: ValidateCallback): void;
|
|
||||||
// validateFieldsAndScroll(options?: Object, callback?: ValidateCallback): void;
|
|
||||||
// validateFieldsAndScroll(callback?: ValidateCallback): void;
|
|
||||||
// validateFieldsAndScroll(): void;
|
|
||||||
/** 获取某个输入控件的 Error */
|
|
||||||
getFieldError: PropTypes.func,
|
|
||||||
getFieldsError: PropTypes.func,
|
|
||||||
/** 判断一个输入控件是否在校验状态*/
|
|
||||||
isFieldValidating: PropTypes.func,
|
|
||||||
isFieldTouched: PropTypes.func,
|
|
||||||
isFieldsTouched: PropTypes.func,
|
|
||||||
/** 重置一组输入控件的值与状态，如不传入参数，则重置所有组件 */
|
|
||||||
resetFields: PropTypes.func,
|
|
||||||
|
|
||||||
getFieldDecorator: PropTypes.func,
|
|
||||||
};
|
|
||||||
|
|
||||||
export const FormProps = {
|
export const FormProps = {
|
||||||
layout: PropTypes.oneOf(['horizontal', 'inline', 'vertical']),
|
layout: PropTypes.oneOf(['horizontal', 'inline', 'vertical']),
|
||||||
|
|
@ -63,13 +20,17 @@ export const FormProps = {
|
||||||
wrapperCol: PropTypes.shape(ColProps).loose,
|
wrapperCol: PropTypes.shape(ColProps).loose,
|
||||||
colon: PropTypes.bool,
|
colon: PropTypes.bool,
|
||||||
labelAlign: PropTypes.oneOf(['left', 'right']),
|
labelAlign: PropTypes.oneOf(['left', 'right']),
|
||||||
form: PropTypes.object,
|
|
||||||
// onSubmit: React.FormEventHandler<any>;
|
|
||||||
prefixCls: PropTypes.string,
|
prefixCls: PropTypes.string,
|
||||||
hideRequiredMark: PropTypes.bool,
|
hideRequiredMark: PropTypes.bool,
|
||||||
autoFormCreate: PropTypes.func,
|
model: PropTypes.object,
|
||||||
options: PropTypes.object,
|
rules: PropTypes.object,
|
||||||
selfUpdate: PropTypes.bool,
|
validateMessages: PropTypes.any,
|
||||||
|
validateOnRuleChange: PropTypes.bool,
|
||||||
|
// 提交失败自动滚动到第一个错误字段
|
||||||
|
scrollToFirstError: PropTypes.bool,
|
||||||
|
onFinish: PropTypes.func,
|
||||||
|
onFinishFailed: PropTypes.func,
|
||||||
|
name: PropTypes.name,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const ValidationRule = {
|
export const ValidationRule = {
|
||||||
|
|
@ -97,87 +58,35 @@ export const ValidationRule = {
|
||||||
validator: PropTypes.func,
|
validator: PropTypes.func,
|
||||||
};
|
};
|
||||||
|
|
||||||
// export type ValidateCallback = (errors: any, values: any) => void;
|
function isEqualName(name1, name2) {
|
||||||
|
return isEqual(toArray(name1), toArray(name2));
|
||||||
// export type GetFieldDecoratorOptions = {
|
}
|
||||||
// /** 子节点的值的属性，如 Checkbox 的是 'checked' */
|
|
||||||
// valuePropName?: string;
|
|
||||||
// /** 子节点的初始值，类型、可选值均由子节点决定 */
|
|
||||||
// initialValue?: any;
|
|
||||||
// /** 收集子节点的值的时机 */
|
|
||||||
// trigger?: string;
|
|
||||||
// /** 可以把 onChange 的参数转化为控件的值，例如 DatePicker 可设为：(date, dateString) => dateString */
|
|
||||||
// getValueFromEvent?: (...args: any[]) => any;
|
|
||||||
// /** Get the component props according to field value. */
|
|
||||||
// getValueProps?: (value: any) => any;
|
|
||||||
// /** 校验子节点值的时机 */
|
|
||||||
// validateTrigger?: string | string[];
|
|
||||||
// /** 校验规则，参见 [async-validator](https://github.com/yiminghe/async-validator) */
|
|
||||||
// rules?: ValidationRule[];
|
|
||||||
// /** 是否和其他控件互斥，特别用于 Radio 单选控件 */
|
|
||||||
// exclusive?: boolean;
|
|
||||||
// /** Normalize value to form component */
|
|
||||||
// normalize?: (value: any, prevValue: any, allValues: any) => any;
|
|
||||||
// /** Whether stop validate on first rule of error for this field. */
|
|
||||||
// validateFirst?: boolean;
|
|
||||||
// /** 是否一直保留子节点的信息 */
|
|
||||||
// preserve?: boolean;
|
|
||||||
// };
|
|
||||||
|
|
||||||
const Form = {
|
const Form = {
|
||||||
name: 'AForm',
|
name: 'AForm',
|
||||||
|
inheritAttrs: false,
|
||||||
props: initDefaultProps(FormProps, {
|
props: initDefaultProps(FormProps, {
|
||||||
layout: 'horizontal',
|
layout: 'horizontal',
|
||||||
hideRequiredMark: false,
|
hideRequiredMark: false,
|
||||||
colon: true,
|
colon: true,
|
||||||
}),
|
}),
|
||||||
Item: FormItem,
|
Item: FormItem,
|
||||||
createFormField,
|
|
||||||
create: (options = {}) => {
|
|
||||||
return createDOMForm({
|
|
||||||
fieldNameProp: 'id',
|
|
||||||
...options,
|
|
||||||
fieldMetaProp: FIELD_META_PROP,
|
|
||||||
fieldDataProp: FIELD_DATA_PROP,
|
|
||||||
});
|
|
||||||
},
|
|
||||||
createForm(context, options = {}) {
|
|
||||||
const V = Vue;
|
|
||||||
return new V(Form.create({ ...options, templateContext: context })());
|
|
||||||
},
|
|
||||||
created() {
|
created() {
|
||||||
this.formItemContexts = new Map();
|
this.fields = [];
|
||||||
|
this.form = undefined;
|
||||||
|
this.lastValidatePromise = null;
|
||||||
|
provide('FormContext', this);
|
||||||
},
|
},
|
||||||
provide() {
|
setup() {
|
||||||
return {
|
return {
|
||||||
FormContext: this,
|
configProvider: inject('configProvider', ConfigConsumerProps),
|
||||||
// https://github.com/vueComponent/ant-design-vue/issues/446
|
|
||||||
collectFormItemContext:
|
|
||||||
this.form && this.form.templateContext
|
|
||||||
? (c, type = 'add') => {
|
|
||||||
const formItemContexts = this.formItemContexts;
|
|
||||||
const number = formItemContexts.get(c) || 0;
|
|
||||||
if (type === 'delete') {
|
|
||||||
if (number <= 1) {
|
|
||||||
formItemContexts.delete(c);
|
|
||||||
} else {
|
|
||||||
formItemContexts.set(c, number - 1);
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (c !== this.form.templateContext) {
|
|
||||||
formItemContexts.set(c, number + 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
: () => {},
|
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
inject: {
|
|
||||||
configProvider: { default: () => ConfigConsumerProps },
|
|
||||||
},
|
|
||||||
watch: {
|
watch: {
|
||||||
form() {
|
rules() {
|
||||||
this.$forceUpdate();
|
if (this.validateOnRuleChange) {
|
||||||
|
this.validateFields();
|
||||||
|
}
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
@ -185,100 +94,186 @@ const Form = {
|
||||||
return this.layout === 'vertical';
|
return this.layout === 'vertical';
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
beforeUpdate() {
|
|
||||||
this.formItemContexts.forEach((number, c) => {
|
|
||||||
if (c.$forceUpdate) {
|
|
||||||
c.$forceUpdate();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
updated() {
|
|
||||||
if (this.form && this.form.cleanUpUselessFields) {
|
|
||||||
this.form.cleanUpUselessFields();
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
onSubmit(e) {
|
addField(field) {
|
||||||
if (!getListeners(this).submit) {
|
if (field) {
|
||||||
e.preventDefault();
|
this.fields.push(field);
|
||||||
} else {
|
|
||||||
this.$emit('submit', e);
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
removeField(field) {
|
||||||
|
if (field.fieldName) {
|
||||||
|
this.fields.splice(this.fields.indexOf(field), 1);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handleSubmit(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
e.stopPropagation();
|
||||||
|
this.$emit('submit', e);
|
||||||
|
const res = this.validateFields();
|
||||||
|
res
|
||||||
|
.then(values => {
|
||||||
|
this.$emit('finish', values);
|
||||||
|
})
|
||||||
|
.catch(errors => {
|
||||||
|
this.handleFinishFailed(errors);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getFieldsByNameList(nameList) {
|
||||||
|
const provideNameList = !!nameList;
|
||||||
|
const namePathList = provideNameList ? toArray(nameList).map(getNamePath) : [];
|
||||||
|
if (!provideNameList) {
|
||||||
|
return this.fields;
|
||||||
|
} else {
|
||||||
|
return this.fields.filter(
|
||||||
|
field => namePathList.findIndex(namePath => isEqualName(namePath, field.fieldName)) > -1,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
resetFields(name) {
|
||||||
|
if (!this.model) {
|
||||||
|
warning(false, 'Form', 'model is required for resetFields to work.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.getFieldsByNameList(name).forEach(field => {
|
||||||
|
field.resetField();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
clearValidate(name) {
|
||||||
|
this.getFieldsByNameList(name).forEach(field => {
|
||||||
|
field.clearValidate();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleFinishFailed(errorInfo) {
|
||||||
|
const { scrollToFirstError } = this;
|
||||||
|
this.$emit('finishFailed', errorInfo);
|
||||||
|
if (scrollToFirstError && errorInfo.errorFields.length) {
|
||||||
|
this.scrollToField(errorInfo.errorFields[0].name);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
validate() {
|
||||||
|
return this.validateField(...arguments);
|
||||||
|
},
|
||||||
|
scrollToField(name, options = {}) {
|
||||||
|
const fields = this.getFieldsByNameList([name]);
|
||||||
|
if (fields.length) {
|
||||||
|
const fieldId = fields[0].fieldId;
|
||||||
|
const node = fieldId ? document.getElementById(fieldId) : null;
|
||||||
|
|
||||||
|
if (node) {
|
||||||
|
scrollIntoView(node, {
|
||||||
|
scrollMode: 'if-needed',
|
||||||
|
block: 'nearest',
|
||||||
|
...options,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// eslint-disable-next-line no-unused-vars
|
||||||
|
getFieldsValue(nameList = true) {
|
||||||
|
const values = {};
|
||||||
|
this.fields.forEach(({ fieldName, fieldValue }) => {
|
||||||
|
values[fieldName] = fieldValue;
|
||||||
|
});
|
||||||
|
if (nameList === true) {
|
||||||
|
return values;
|
||||||
|
} else {
|
||||||
|
const res = {};
|
||||||
|
toArray(nameList).forEach(namePath => (res[namePath] = values[namePath]));
|
||||||
|
return res;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
validateFields(nameList, options) {
|
||||||
|
if (!this.model) {
|
||||||
|
warning(false, 'Form', 'model is required for validateFields to work.');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const provideNameList = !!nameList;
|
||||||
|
const namePathList = provideNameList ? toArray(nameList).map(getNamePath) : [];
|
||||||
|
|
||||||
|
// Collect result in promise list
|
||||||
|
const promiseList = [];
|
||||||
|
|
||||||
|
this.fields.forEach(field => {
|
||||||
|
// Add field if not provide `nameList`
|
||||||
|
if (!provideNameList) {
|
||||||
|
namePathList.push(field.getNamePath());
|
||||||
|
}
|
||||||
|
|
||||||
|
// Skip if without rule
|
||||||
|
if (!field.getRules().length) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const fieldNamePath = field.getNamePath();
|
||||||
|
|
||||||
|
// Add field validate rule in to promise list
|
||||||
|
if (!provideNameList || containsNamePath(namePathList, fieldNamePath)) {
|
||||||
|
const promise = field.validateRules({
|
||||||
|
validateMessages: {
|
||||||
|
...defaultValidateMessages,
|
||||||
|
...this.validateMessages,
|
||||||
|
},
|
||||||
|
...options,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Wrap promise with field
|
||||||
|
promiseList.push(
|
||||||
|
promise
|
||||||
|
.then(() => ({ name: fieldNamePath, errors: [] }))
|
||||||
|
.catch(errors =>
|
||||||
|
Promise.reject({
|
||||||
|
name: fieldNamePath,
|
||||||
|
errors,
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
const summaryPromise = allPromiseFinish(promiseList);
|
||||||
|
this.lastValidatePromise = summaryPromise;
|
||||||
|
|
||||||
|
const returnPromise = summaryPromise
|
||||||
|
.then(() => {
|
||||||
|
if (this.lastValidatePromise === summaryPromise) {
|
||||||
|
return Promise.resolve(this.getFieldsValue(namePathList));
|
||||||
|
}
|
||||||
|
return Promise.reject([]);
|
||||||
|
})
|
||||||
|
.catch(results => {
|
||||||
|
const errorList = results.filter(result => result && result.errors.length);
|
||||||
|
return Promise.reject({
|
||||||
|
values: this.getFieldsValue(namePathList),
|
||||||
|
errorFields: errorList,
|
||||||
|
outOfDate: this.lastValidatePromise !== summaryPromise,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// Do not throw in console
|
||||||
|
returnPromise.catch(e => e);
|
||||||
|
|
||||||
|
return returnPromise;
|
||||||
|
},
|
||||||
|
validateField() {
|
||||||
|
return this.validateFields(...arguments);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const {
|
const { prefixCls: customizePrefixCls, hideRequiredMark, layout, handleSubmit } = this;
|
||||||
prefixCls: customizePrefixCls,
|
|
||||||
hideRequiredMark,
|
|
||||||
layout,
|
|
||||||
onSubmit,
|
|
||||||
$slots,
|
|
||||||
autoFormCreate,
|
|
||||||
options = {},
|
|
||||||
} = this;
|
|
||||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||||
const prefixCls = getPrefixCls('form', customizePrefixCls);
|
const prefixCls = getPrefixCls('form', customizePrefixCls);
|
||||||
|
const { class: className, onSubmit: originSubmit, ...restProps } = this.$attrs;
|
||||||
|
|
||||||
const formClassName = classNames(prefixCls, {
|
const formClassName = classNames(prefixCls, className, {
|
||||||
[`${prefixCls}-horizontal`]: layout === 'horizontal',
|
[`${prefixCls}-horizontal`]: layout === 'horizontal',
|
||||||
[`${prefixCls}-vertical`]: layout === 'vertical',
|
[`${prefixCls}-vertical`]: layout === 'vertical',
|
||||||
[`${prefixCls}-inline`]: layout === 'inline',
|
[`${prefixCls}-inline`]: layout === 'inline',
|
||||||
[`${prefixCls}-hide-required-mark`]: hideRequiredMark,
|
[`${prefixCls}-hide-required-mark`]: hideRequiredMark,
|
||||||
});
|
});
|
||||||
if (autoFormCreate) {
|
|
||||||
warning(false, 'Form', '`autoFormCreate` is deprecated. please use `form` instead.');
|
|
||||||
const DomForm =
|
|
||||||
this.DomForm ||
|
|
||||||
createDOMForm({
|
|
||||||
fieldNameProp: 'id',
|
|
||||||
...options,
|
|
||||||
fieldMetaProp: FIELD_META_PROP,
|
|
||||||
fieldDataProp: FIELD_DATA_PROP,
|
|
||||||
templateContext: this.$vnode.context,
|
|
||||||
})({
|
|
||||||
provide() {
|
|
||||||
return {
|
|
||||||
decoratorFormProps: this.$props,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
children: $slots.default,
|
|
||||||
formClassName,
|
|
||||||
submit: onSubmit,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
autoFormCreate(this.form);
|
|
||||||
},
|
|
||||||
render() {
|
|
||||||
const { children, formClassName, submit } = this;
|
|
||||||
return (
|
|
||||||
<form onSubmit={submit} class={formClassName}>
|
|
||||||
{children}
|
|
||||||
</form>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
});
|
|
||||||
if (this.domForm) {
|
|
||||||
this.domForm.children = $slots.default;
|
|
||||||
this.domForm.submit = onSubmit;
|
|
||||||
this.domForm.formClassName = formClassName;
|
|
||||||
}
|
|
||||||
this.DomForm = DomForm;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<DomForm
|
|
||||||
wrappedComponentRef={inst => {
|
|
||||||
this.domForm = inst;
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return (
|
return (
|
||||||
<form onSubmit={onSubmit} class={formClassName}>
|
<form onSubmit={handleSubmit} class={formClassName} {...restProps}>
|
||||||
{$slots.default}
|
{getSlot(this)}
|
||||||
</form>
|
</form>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -1,28 +1,30 @@
|
||||||
import { provide, inject, Transition } from 'vue';
|
import { inject, provide, Transition } from 'vue';
|
||||||
|
import cloneDeep from 'lodash/cloneDeep';
|
||||||
import PropTypes from '../_util/vue-types';
|
import PropTypes from '../_util/vue-types';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import find from 'lodash/find';
|
import getTransitionProps from '../_util/getTransitionProps';
|
||||||
import Row from '../grid/Row';
|
import Row from '../grid/Row';
|
||||||
import Col, { ColProps } from '../grid/Col';
|
import Col, { ColProps } from '../grid/Col';
|
||||||
import warning from '../_util/warning';
|
import hasProp, {
|
||||||
import { FIELD_META_PROP, FIELD_DATA_PROP } from './constants';
|
|
||||||
import {
|
|
||||||
initDefaultProps,
|
initDefaultProps,
|
||||||
getComponent,
|
|
||||||
getSlotOptions,
|
|
||||||
isValidElement,
|
|
||||||
getAllChildren,
|
|
||||||
findDOMNode,
|
findDOMNode,
|
||||||
|
getComponent,
|
||||||
|
getOptionProps,
|
||||||
|
getEvents,
|
||||||
|
isValidElement,
|
||||||
getSlot,
|
getSlot,
|
||||||
} from '../_util/props-util';
|
} from '../_util/props-util';
|
||||||
import getTransitionProps from '../_util/getTransitionProps';
|
|
||||||
import BaseMixin from '../_util/BaseMixin';
|
import BaseMixin from '../_util/BaseMixin';
|
||||||
import { cloneElement, cloneVNodes } from '../_util/vnode';
|
import { ConfigConsumerProps } from '../config-provider';
|
||||||
|
import { cloneElement } from '../_util/vnode';
|
||||||
import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
|
import CheckCircleFilled from '@ant-design/icons-vue/CheckCircleFilled';
|
||||||
import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
|
import ExclamationCircleFilled from '@ant-design/icons-vue/ExclamationCircleFilled';
|
||||||
import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
|
import CloseCircleFilled from '@ant-design/icons-vue/CloseCircleFilled';
|
||||||
import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
|
import LoadingOutlined from '@ant-design/icons-vue/LoadingOutlined';
|
||||||
import { ConfigConsumerProps } from '../config-provider';
|
import { validateRules } from './utils/validateUtil';
|
||||||
|
import { getNamePath } from './utils/valueUtil';
|
||||||
|
import { toArray } from './utils/typeUtil';
|
||||||
|
import { warning } from '../vc-util/warning';
|
||||||
|
|
||||||
const iconMap = {
|
const iconMap = {
|
||||||
success: CheckCircleFilled,
|
success: CheckCircleFilled,
|
||||||
|
|
@ -31,227 +33,256 @@ const iconMap = {
|
||||||
validating: LoadingOutlined,
|
validating: LoadingOutlined,
|
||||||
};
|
};
|
||||||
|
|
||||||
function noop() {}
|
function getPropByPath(obj, namePathList, strict) {
|
||||||
|
let tempObj = obj;
|
||||||
|
|
||||||
function intersperseSpace(list) {
|
const keyArr = namePathList;
|
||||||
return list.reduce((current, item) => [...current, ' ', item], []).slice(1);
|
let i = 0;
|
||||||
|
try {
|
||||||
|
for (let len = keyArr.length; i < len - 1; ++i) {
|
||||||
|
if (!tempObj && !strict) break;
|
||||||
|
let key = keyArr[i];
|
||||||
|
if (key in tempObj) {
|
||||||
|
tempObj = tempObj[key];
|
||||||
|
} else {
|
||||||
|
if (strict) {
|
||||||
|
throw Error('please transfer a valid name path to form item!');
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (strict && !tempObj) {
|
||||||
|
throw Error('please transfer a valid name path to form item!');
|
||||||
|
}
|
||||||
|
} catch (error) {
|
||||||
|
console.error('please transfer a valid name path to form item!');
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
o: tempObj,
|
||||||
|
k: keyArr[i],
|
||||||
|
v: tempObj ? tempObj[keyArr[i]] : undefined,
|
||||||
|
};
|
||||||
}
|
}
|
||||||
export const FormItemProps = {
|
export const FormItemProps = {
|
||||||
id: PropTypes.string,
|
id: PropTypes.string,
|
||||||
htmlFor: PropTypes.string,
|
htmlFor: PropTypes.string,
|
||||||
prefixCls: PropTypes.string,
|
prefixCls: PropTypes.string,
|
||||||
label: PropTypes.any,
|
label: PropTypes.any,
|
||||||
labelCol: PropTypes.shape(ColProps).loose,
|
|
||||||
wrapperCol: PropTypes.shape(ColProps).loose,
|
|
||||||
help: PropTypes.any,
|
help: PropTypes.any,
|
||||||
extra: PropTypes.any,
|
extra: PropTypes.any,
|
||||||
validateStatus: PropTypes.oneOf(['', 'success', 'warning', 'error', 'validating']),
|
labelCol: PropTypes.shape(ColProps).loose,
|
||||||
|
wrapperCol: PropTypes.shape(ColProps).loose,
|
||||||
hasFeedback: PropTypes.bool,
|
hasFeedback: PropTypes.bool,
|
||||||
required: PropTypes.bool,
|
|
||||||
colon: PropTypes.bool,
|
colon: PropTypes.bool,
|
||||||
fieldDecoratorId: PropTypes.string,
|
|
||||||
fieldDecoratorOptions: PropTypes.object,
|
|
||||||
selfUpdate: PropTypes.bool,
|
|
||||||
labelAlign: PropTypes.oneOf(['left', 'right']),
|
labelAlign: PropTypes.oneOf(['left', 'right']),
|
||||||
|
prop: PropTypes.oneOfType([Array, String, Number]),
|
||||||
|
name: PropTypes.oneOfType([Array, String, Number]),
|
||||||
|
rules: PropTypes.oneOfType([Array, Object]),
|
||||||
|
autoLink: PropTypes.bool,
|
||||||
|
required: PropTypes.bool,
|
||||||
|
validateFirst: PropTypes.bool,
|
||||||
|
validateStatus: PropTypes.oneOf(['', 'success', 'warning', 'error', 'validating']),
|
||||||
};
|
};
|
||||||
function comeFromSlot(vnodes = [], itemVnode) {
|
|
||||||
let isSlot = false;
|
|
||||||
for (let i = 0, len = vnodes.length; i < len; i++) {
|
|
||||||
const vnode = vnodes[i];
|
|
||||||
if (vnode && (vnode === itemVnode || vnode.$vnode === itemVnode)) {
|
|
||||||
isSlot = true;
|
|
||||||
} else {
|
|
||||||
const componentOptions =
|
|
||||||
vnode.componentOptions || (vnode.$vnode && vnode.$vnode.componentOptions);
|
|
||||||
const children = componentOptions ? componentOptions.children : vnode.$children;
|
|
||||||
isSlot = comeFromSlot(children, itemVnode);
|
|
||||||
}
|
|
||||||
if (isSlot) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return isSlot;
|
|
||||||
}
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'AFormItem',
|
name: 'AFormItem',
|
||||||
mixins: [BaseMixin],
|
mixins: [BaseMixin],
|
||||||
inheritAttrs: false,
|
inheritAttrs: false,
|
||||||
__ANT_FORM_ITEM: true,
|
__ANT_NEW_FORM_ITEM: true,
|
||||||
props: initDefaultProps(FormItemProps, {
|
props: initDefaultProps(FormItemProps, {
|
||||||
hasFeedback: false,
|
hasFeedback: false,
|
||||||
|
autoLink: true,
|
||||||
}),
|
}),
|
||||||
setup() {
|
setup() {
|
||||||
return {
|
return {
|
||||||
isFormItemChildren: inject('isFormItemChildren', false),
|
isFormItemChildren: inject('isFormItemChildren', false),
|
||||||
FormContext: inject('FormContext', {}),
|
|
||||||
decoratorFormProps: inject('decoratorFormProps', {}),
|
|
||||||
collectFormItemContext: inject('collectFormItemContext', noop),
|
|
||||||
configProvider: inject('configProvider', ConfigConsumerProps),
|
configProvider: inject('configProvider', ConfigConsumerProps),
|
||||||
|
FormContext: inject('FormContext', {}),
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return { helpShow: false };
|
warning(!hasProp(this, 'prop'), `\`prop\` is deprecated. Please use \`name\` instead.`);
|
||||||
|
return {
|
||||||
|
validateState: this.validateStatus,
|
||||||
|
validateMessage: '',
|
||||||
|
validateDisabled: false,
|
||||||
|
validator: {},
|
||||||
|
helpShow: false,
|
||||||
|
errors: [],
|
||||||
|
};
|
||||||
},
|
},
|
||||||
|
|
||||||
computed: {
|
computed: {
|
||||||
itemSelfUpdate() {
|
fieldName() {
|
||||||
return !!(this.selfUpdate === undefined ? this.FormContext.selfUpdate : this.selfUpdate);
|
return this.name || this.prop;
|
||||||
|
},
|
||||||
|
namePath() {
|
||||||
|
return getNamePath(this.fieldName);
|
||||||
|
},
|
||||||
|
fieldId() {
|
||||||
|
if (this.id) {
|
||||||
|
return this.id;
|
||||||
|
} else if (!this.namePath.length) {
|
||||||
|
return undefined;
|
||||||
|
} else {
|
||||||
|
const formName = this.FormContext.name;
|
||||||
|
const mergedId = this.namePath.join('_');
|
||||||
|
return formName ? `${formName}_${mergedId}` : mergedId;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fieldValue() {
|
||||||
|
const model = this.FormContext.model;
|
||||||
|
if (!model || !this.fieldName) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
return getPropByPath(model, this.namePath, 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 || this.required;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
validateStatus(val) {
|
||||||
|
this.validateState = val;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
provide('isFormItemChildren', true);
|
provide('isFormItemChildren', true);
|
||||||
this.collectContext();
|
|
||||||
},
|
},
|
||||||
beforeUpdate() {
|
mounted() {
|
||||||
if (process.env.NODE_ENV !== 'production') {
|
if (this.fieldName) {
|
||||||
this.collectContext();
|
const { addField } = this.FormContext;
|
||||||
|
addField && addField(this);
|
||||||
|
this.initialValue = cloneDeep(this.fieldValue);
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeUnmount() {
|
beforeUnmount() {
|
||||||
this.collectFormItemContext(this.$vnode && this.$vnode.context, 'delete');
|
const { removeField } = this.FormContext;
|
||||||
},
|
removeField && removeField(this);
|
||||||
mounted() {
|
|
||||||
const { help, validateStatus } = this.$props;
|
|
||||||
warning(
|
|
||||||
this.getControls(this.slotDefault, true).length <= 1 ||
|
|
||||||
help !== undefined ||
|
|
||||||
validateStatus !== undefined,
|
|
||||||
'Form.Item',
|
|
||||||
'Cannot generate `validateStatus` and `help` automatically, ' +
|
|
||||||
'while there are more than one `getFieldDecorator` in it.',
|
|
||||||
);
|
|
||||||
warning(
|
|
||||||
!this.fieldDecoratorId,
|
|
||||||
'Form.Item',
|
|
||||||
'`fieldDecoratorId` is deprecated. please use `v-decorator={id, options}` instead.',
|
|
||||||
);
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
collectContext() {
|
getNamePath() {
|
||||||
if (this.FormContext.form && this.FormContext.form.templateContext) {
|
const { fieldName } = this;
|
||||||
const { templateContext } = this.FormContext.form;
|
const { prefixName = [] } = this.FormContext;
|
||||||
const vnodes = Object.values(templateContext.$slots || {}).reduce((a, b) => {
|
|
||||||
return [...a, ...b];
|
return fieldName !== undefined ? [...prefixName, ...this.namePath] : [];
|
||||||
}, []);
|
},
|
||||||
const isSlot = comeFromSlot(vnodes, this.$vnode);
|
validateRules(options) {
|
||||||
warning(!isSlot, 'You can not set FormItem from slot, please use slot-scope instead slot');
|
const { validateFirst = false, messageVariables } = this.$props;
|
||||||
let isSlotScope = false;
|
const { triggerName } = options || {};
|
||||||
// 进一步判断是否是通过slot-scope传递
|
const namePath = this.getNamePath();
|
||||||
if (!isSlot && this.$vnode.context !== templateContext) {
|
|
||||||
isSlotScope = comeFromSlot(this.$vnode.context.$children, templateContext.$vnode);
|
let filteredRules = this.getRules();
|
||||||
}
|
if (triggerName) {
|
||||||
if (!isSlotScope && !isSlot) {
|
filteredRules = filteredRules.filter(rule => {
|
||||||
this.collectFormItemContext(this.$vnode.context);
|
const { trigger } = rule;
|
||||||
}
|
if (!trigger) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
const triggerList = toArray(trigger);
|
||||||
|
return triggerList.includes(triggerName);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
if (!filteredRules.length) {
|
||||||
|
return Promise.resolve();
|
||||||
|
}
|
||||||
|
const promise = validateRules(
|
||||||
|
namePath,
|
||||||
|
this.fieldValue,
|
||||||
|
filteredRules,
|
||||||
|
options,
|
||||||
|
validateFirst,
|
||||||
|
messageVariables,
|
||||||
|
);
|
||||||
|
this.validateState = 'validating';
|
||||||
|
this.errors = [];
|
||||||
|
|
||||||
|
promise
|
||||||
|
.catch(e => e)
|
||||||
|
.then((errors = []) => {
|
||||||
|
if (this.validateState === 'validating') {
|
||||||
|
this.validateState = errors.length ? 'error' : 'success';
|
||||||
|
this.validateMessage = errors[0];
|
||||||
|
this.errors = errors;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return promise;
|
||||||
|
},
|
||||||
|
getRules() {
|
||||||
|
let formRules = this.FormContext.rules;
|
||||||
|
const selfRules = this.rules;
|
||||||
|
const requiredRule =
|
||||||
|
this.required !== undefined ? { required: !!this.required, trigger: 'change' } : [];
|
||||||
|
const prop = getPropByPath(formRules, this.namePath);
|
||||||
|
formRules = formRules ? prop.o[prop.k] || 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 => ({ ...rule }));
|
||||||
|
},
|
||||||
|
onFieldBlur() {
|
||||||
|
this.validateRules({ triggerName: 'blur' });
|
||||||
|
},
|
||||||
|
onFieldChange() {
|
||||||
|
if (this.validateDisabled) {
|
||||||
|
this.validateDisabled = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.validateRules({ triggerName: 'change' });
|
||||||
|
},
|
||||||
|
clearValidate() {
|
||||||
|
this.validateState = '';
|
||||||
|
this.validateMessage = '';
|
||||||
|
this.validateDisabled = false;
|
||||||
|
},
|
||||||
|
resetField() {
|
||||||
|
this.validateState = '';
|
||||||
|
this.validateMessage = '';
|
||||||
|
const model = this.FormContext.model || {};
|
||||||
|
const value = this.fieldValue;
|
||||||
|
const prop = getPropByPath(model, this.namePath, 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;
|
||||||
|
});
|
||||||
},
|
},
|
||||||
getHelpMessage() {
|
getHelpMessage() {
|
||||||
const help = getComponent(this, 'help');
|
const help = getComponent(this, 'help');
|
||||||
const onlyControl = this.getOnlyControl();
|
|
||||||
if (help === undefined && onlyControl) {
|
|
||||||
const errors = this.getField().errors;
|
|
||||||
if (errors) {
|
|
||||||
return intersperseSpace(
|
|
||||||
errors.map((e, index) => {
|
|
||||||
let node = null;
|
|
||||||
if (isValidElement(e)) {
|
|
||||||
node = e;
|
|
||||||
} else if (isValidElement(e.message)) {
|
|
||||||
node = e.message;
|
|
||||||
}
|
|
||||||
return node ? cloneElement(node, { key: index }) : e.message;
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
} else {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return help;
|
return this.validateMessage || help;
|
||||||
},
|
},
|
||||||
|
|
||||||
getControls(childrenArray = [], recursively) {
|
|
||||||
let controls = [];
|
|
||||||
for (let i = 0; i < childrenArray.length; i++) {
|
|
||||||
if (!recursively && controls.length > 0) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
|
|
||||||
const child = childrenArray[i];
|
|
||||||
// if (!child.tag && child.text.trim() === '') {
|
|
||||||
// continue;
|
|
||||||
// }
|
|
||||||
|
|
||||||
if (typeof child.type === 'object' && child.type.__ANT_FORM_ITEM) {
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
const children = getAllChildren(child);
|
|
||||||
const attrs = child.props || {};
|
|
||||||
if (FIELD_META_PROP in attrs) {
|
|
||||||
// And means FIELD_DATA_PROP in child.props, too.
|
|
||||||
controls.push(child);
|
|
||||||
} else if (children) {
|
|
||||||
controls = controls.concat(this.getControls(children, recursively));
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return controls;
|
|
||||||
},
|
|
||||||
|
|
||||||
getOnlyControl() {
|
|
||||||
const child = this.getControls(this.slotDefault, false)[0];
|
|
||||||
return child !== undefined ? child : null;
|
|
||||||
},
|
|
||||||
|
|
||||||
getChildAttr(prop) {
|
|
||||||
const child = this.getOnlyControl();
|
|
||||||
let data = {};
|
|
||||||
if (!child) {
|
|
||||||
return undefined;
|
|
||||||
}
|
|
||||||
debugger;
|
|
||||||
if (child.data) {
|
|
||||||
data = child.data;
|
|
||||||
} else if (child.$vnode && child.$vnode.data) {
|
|
||||||
data = child.$vnode.data;
|
|
||||||
}
|
|
||||||
return data[prop] || data.attrs[prop];
|
|
||||||
},
|
|
||||||
|
|
||||||
getId() {
|
|
||||||
return this.getChildAttr('id');
|
|
||||||
},
|
|
||||||
|
|
||||||
getMeta() {
|
|
||||||
return this.getChildAttr(FIELD_META_PROP);
|
|
||||||
},
|
|
||||||
|
|
||||||
getField() {
|
|
||||||
return this.getChildAttr(FIELD_DATA_PROP);
|
|
||||||
},
|
|
||||||
|
|
||||||
getValidateStatus() {
|
|
||||||
const onlyControl = this.getOnlyControl();
|
|
||||||
if (!onlyControl) {
|
|
||||||
return '';
|
|
||||||
}
|
|
||||||
const field = this.getField();
|
|
||||||
if (field.validating) {
|
|
||||||
return 'validating';
|
|
||||||
}
|
|
||||||
if (field.errors) {
|
|
||||||
return 'error';
|
|
||||||
}
|
|
||||||
const fieldValue = 'value' in field ? field.value : this.getMeta().initialValue;
|
|
||||||
if (fieldValue !== undefined && fieldValue !== null && fieldValue !== '') {
|
|
||||||
return 'success';
|
|
||||||
}
|
|
||||||
return '';
|
|
||||||
},
|
|
||||||
|
|
||||||
// Resolve duplicated ids bug between different forms
|
|
||||||
// https://github.com/ant-design/ant-design/issues/7351
|
|
||||||
onLabelClick() {
|
onLabelClick() {
|
||||||
const id = this.id || this.getId();
|
const id = this.fieldId;
|
||||||
if (!id) {
|
if (!id) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
@ -269,24 +300,6 @@ export default {
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
isRequired() {
|
|
||||||
const { required } = this;
|
|
||||||
if (required !== undefined) {
|
|
||||||
return required;
|
|
||||||
}
|
|
||||||
if (this.getOnlyControl()) {
|
|
||||||
const meta = this.getMeta() || {};
|
|
||||||
const validate = meta.validate || [];
|
|
||||||
|
|
||||||
return validate
|
|
||||||
.filter(item => !!item.rules)
|
|
||||||
.some(item => {
|
|
||||||
return item.rules.some(rule => rule.required);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
return false;
|
|
||||||
},
|
|
||||||
|
|
||||||
renderHelp(prefixCls) {
|
renderHelp(prefixCls) {
|
||||||
const help = this.getHelpMessage();
|
const help = this.getHelpMessage();
|
||||||
const children = help ? (
|
const children = help ? (
|
||||||
|
|
@ -314,17 +327,12 @@ export default {
|
||||||
},
|
},
|
||||||
|
|
||||||
renderValidateWrapper(prefixCls, c1, c2, c3) {
|
renderValidateWrapper(prefixCls, c1, c2, c3) {
|
||||||
const props = this.$props;
|
const validateStatus = this.validateState;
|
||||||
const onlyControl = this.getOnlyControl;
|
|
||||||
const validateStatus =
|
|
||||||
props.validateStatus === undefined && onlyControl
|
|
||||||
? this.getValidateStatus()
|
|
||||||
: props.validateStatus;
|
|
||||||
|
|
||||||
let classes = `${prefixCls}-item-control`;
|
let classes = `${prefixCls}-item-control`;
|
||||||
if (validateStatus) {
|
if (validateStatus) {
|
||||||
classes = classNames(`${prefixCls}-item-control`, {
|
classes = classNames(`${prefixCls}-item-control`, {
|
||||||
'has-feedback': props.hasFeedback || validateStatus === 'validating',
|
'has-feedback': this.hasFeedback || validateStatus === 'validating',
|
||||||
'has-success': validateStatus === 'success',
|
'has-success': validateStatus === 'success',
|
||||||
'has-warning': validateStatus === 'warning',
|
'has-warning': validateStatus === 'warning',
|
||||||
'has-error': validateStatus === 'error',
|
'has-error': validateStatus === 'error',
|
||||||
|
|
@ -334,7 +342,7 @@ export default {
|
||||||
const IconNode = validateStatus && iconMap[validateStatus];
|
const IconNode = validateStatus && iconMap[validateStatus];
|
||||||
|
|
||||||
const icon =
|
const icon =
|
||||||
props.hasFeedback && IconNode ? (
|
this.hasFeedback && IconNode ? (
|
||||||
<span class={`${prefixCls}-item-children-icon`}>
|
<span class={`${prefixCls}-item-children-icon`}>
|
||||||
<IconNode />
|
<IconNode />
|
||||||
</span>
|
</span>
|
||||||
|
|
@ -374,9 +382,9 @@ export default {
|
||||||
labelCol: contextLabelCol,
|
labelCol: contextLabelCol,
|
||||||
colon: contextColon,
|
colon: contextColon,
|
||||||
} = this.FormContext;
|
} = this.FormContext;
|
||||||
const { labelAlign, labelCol, colon, id, htmlFor } = this;
|
const { labelAlign, labelCol, colon, fieldId, htmlFor } = this;
|
||||||
const label = getComponent(this, 'label');
|
const label = getComponent(this, 'label');
|
||||||
const required = this.isRequired();
|
const required = this.isRequired;
|
||||||
const mergedLabelCol = labelCol || contextLabelCol || {};
|
const mergedLabelCol = labelCol || contextLabelCol || {};
|
||||||
|
|
||||||
const mergedLabelAlign = labelAlign || contextLabelAlign;
|
const mergedLabelAlign = labelAlign || contextLabelAlign;
|
||||||
|
|
@ -416,7 +424,7 @@ export default {
|
||||||
return label ? (
|
return label ? (
|
||||||
<Col {...colProps}>
|
<Col {...colProps}>
|
||||||
<label
|
<label
|
||||||
for={htmlFor || id || this.getId()}
|
for={htmlFor || fieldId}
|
||||||
class={labelClassName}
|
class={labelClassName}
|
||||||
title={typeof label === 'string' ? label : ''}
|
title={typeof label === 'string' ? label : ''}
|
||||||
onClick={this.onLabelClick}
|
onClick={this.onLabelClick}
|
||||||
|
|
@ -426,28 +434,28 @@ export default {
|
||||||
</Col>
|
</Col>
|
||||||
) : null;
|
) : null;
|
||||||
},
|
},
|
||||||
renderChildren(prefixCls) {
|
renderChildren(prefixCls, child) {
|
||||||
return [
|
return [
|
||||||
this.renderLabel(prefixCls),
|
this.renderLabel(prefixCls),
|
||||||
this.renderWrapper(
|
this.renderWrapper(
|
||||||
prefixCls,
|
prefixCls,
|
||||||
this.renderValidateWrapper(
|
this.renderValidateWrapper(
|
||||||
prefixCls,
|
prefixCls,
|
||||||
this.slotDefault,
|
child,
|
||||||
this.renderHelp(prefixCls),
|
this.renderHelp(prefixCls),
|
||||||
this.renderExtra(prefixCls),
|
this.renderExtra(prefixCls),
|
||||||
),
|
),
|
||||||
),
|
),
|
||||||
];
|
];
|
||||||
},
|
},
|
||||||
renderFormItem() {
|
renderFormItem(child) {
|
||||||
const { prefixCls: customizePrefixCls } = this.$props;
|
const { prefixCls: customizePrefixCls } = this.$props;
|
||||||
const { class: className, ...restProps } = this.$attrs;
|
const { class: className, ...restProps } = this.$attrs;
|
||||||
const getPrefixCls = this.configProvider.getPrefixCls;
|
const getPrefixCls = this.configProvider.getPrefixCls;
|
||||||
const prefixCls = getPrefixCls('form', customizePrefixCls);
|
const prefixCls = getPrefixCls('form', customizePrefixCls);
|
||||||
const children = this.renderChildren(prefixCls);
|
const children = this.renderChildren(prefixCls, child);
|
||||||
const itemClassName = {
|
const itemClassName = {
|
||||||
[className]: true,
|
[className]: className,
|
||||||
[`${prefixCls}-item`]: true,
|
[`${prefixCls}-item`]: true,
|
||||||
[`${prefixCls}-item-with-help`]: this.helpShow,
|
[`${prefixCls}-item-with-help`]: this.helpShow,
|
||||||
};
|
};
|
||||||
|
|
@ -458,63 +466,33 @@ export default {
|
||||||
</Row>
|
</Row>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
decoratorOption(vnode) {
|
|
||||||
if (vnode.data && vnode.data.directives) {
|
|
||||||
const directive = find(vnode.data.directives, ['name', 'decorator']);
|
|
||||||
warning(
|
|
||||||
!directive || (directive && Array.isArray(directive.value)),
|
|
||||||
'Form',
|
|
||||||
`Invalid directive: type check failed for directive "decorator". Expected Array, got ${typeof (directive
|
|
||||||
? directive.value
|
|
||||||
: directive)}. At ${vnode.tag}.`,
|
|
||||||
);
|
|
||||||
return directive ? directive.value : null;
|
|
||||||
} else {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
decoratorChildren(vnodes) {
|
|
||||||
const { FormContext } = this;
|
|
||||||
const getFieldDecorator = FormContext.form.getFieldDecorator;
|
|
||||||
for (let i = 0, len = vnodes.length; i < len; i++) {
|
|
||||||
const vnode = vnodes[i];
|
|
||||||
if (getSlotOptions(vnode).__ANT_FORM_ITEM) {
|
|
||||||
break;
|
|
||||||
}
|
|
||||||
if (vnode.children) {
|
|
||||||
vnode.children = this.decoratorChildren(cloneVNodes(vnode.children));
|
|
||||||
} else if (vnode.componentOptions && vnode.componentOptions.children) {
|
|
||||||
vnode.componentOptions.children = this.decoratorChildren(
|
|
||||||
cloneVNodes(vnode.componentOptions.children),
|
|
||||||
);
|
|
||||||
}
|
|
||||||
const option = this.decoratorOption(vnode);
|
|
||||||
if (option && option[0]) {
|
|
||||||
vnodes[i] = getFieldDecorator(option[0], option[1], this)(vnode);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return vnodes;
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const { decoratorFormProps, fieldDecoratorId, fieldDecoratorOptions = {}, FormContext } = this;
|
const { autoLink } = getOptionProps(this);
|
||||||
let child = getSlot(this);
|
const children = getSlot(this);
|
||||||
if (decoratorFormProps.form && fieldDecoratorId && child.length) {
|
let firstChildren = children[0];
|
||||||
const getFieldDecorator = decoratorFormProps.form.getFieldDecorator;
|
if (this.fieldName && autoLink && isValidElement(firstChildren)) {
|
||||||
child[0] = getFieldDecorator(fieldDecoratorId, fieldDecoratorOptions, this)(child[0]);
|
const originalEvents = getEvents(firstChildren);
|
||||||
warning(
|
const originalBlur = originalEvents.onBlur;
|
||||||
!(child.length > 1),
|
const originalChange = originalEvents.onChange;
|
||||||
'Form',
|
firstChildren = cloneElement(firstChildren, {
|
||||||
'`autoFormCreate` just `decorator` then first children. but you can use JSX to support multiple children',
|
...(this.fieldId ? { id: this.fieldId } : undefined),
|
||||||
);
|
onBlur: (...args) => {
|
||||||
this.slotDefault = child;
|
originalBlur && originalBlur(...args);
|
||||||
} else if (FormContext.form) {
|
this.onFieldBlur();
|
||||||
child = cloneVNodes(child);
|
},
|
||||||
this.slotDefault = this.decoratorChildren(child);
|
onChange: (...args) => {
|
||||||
} else {
|
if (Array.isArray(originalChange)) {
|
||||||
this.slotDefault = child;
|
for (let i = 0, l = originalChange.length; i < l; i++) {
|
||||||
|
originalChange[i](...args);
|
||||||
|
}
|
||||||
|
} else if (originalChange) {
|
||||||
|
originalChange(...args);
|
||||||
|
}
|
||||||
|
this.onFieldChange();
|
||||||
|
},
|
||||||
|
});
|
||||||
}
|
}
|
||||||
return this.renderFormItem();
|
return this.renderFormItem([firstChildren, children.slice(1)]);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -1,144 +1,77 @@
|
||||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||||
|
|
||||||
exports[`renders ./antdv-demo/docs/form/demo/advanced-search.vue correctly 1`] = `
|
exports[`renders ./antdv-demo/docs/form-model/demo/basic.md correctly 1`] = `
|
||||||
<div id="components-form-demo-advanced-search">
|
|
||||||
<form class="ant-advanced-search-form ant-form ant-form-horizontal">
|
|
||||||
<div class="ant-row" style="margin-left: -12px; margin-right: -12px;">
|
|
||||||
<div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-form-item-label"><label for="advanced_search_field-1" title="Field 1" class="ant-form-item-required">Field 1</label></div>
|
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-1" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-form-item-label"><label for="advanced_search_field-2" title="Field 2" class="ant-form-item-required">Field 2</label></div>
|
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-2" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-form-item-label"><label for="advanced_search_field-3" title="Field 3" class="ant-form-item-required">Field 3</label></div>
|
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-3" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-form-item-label"><label for="advanced_search_field-4" title="Field 4" class="ant-form-item-required">Field 4</label></div>
|
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-4" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-form-item-label"><label for="advanced_search_field-5" title="Field 5" class="ant-form-item-required">Field 5</label></div>
|
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-5" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: block;">
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-form-item-label"><label for="advanced_search_field-6" title="Field 6" class="ant-form-item-required">Field 6</label></div>
|
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-6" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: none;">
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-form-item-label"><label for="advanced_search_field-7" title="Field 7" class="ant-form-item-required">Field 7</label></div>
|
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-7" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: none;">
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-form-item-label"><label for="advanced_search_field-8" title="Field 8" class="ant-form-item-required">Field 8</label></div>
|
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-8" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: none;">
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-form-item-label"><label for="advanced_search_field-9" title="Field 9" class="ant-form-item-required">Field 9</label></div>
|
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-9" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-col ant-col-8" style="padding-left: 12px; padding-right: 12px; display: none;">
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-form-item-label"><label for="advanced_search_field-10" title="Field 10" class="ant-form-item-required">Field 10</label></div>
|
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="placeholder" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="advanced_search_field-10" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row">
|
|
||||||
<div class="ant-col ant-col-24" style="text-align: right;"><button type="submit" class="ant-btn ant-btn-primary"><span>Search</span></button> <button type="button" class="ant-btn" style="margin-left: 8px;"><span>Clear</span></button> <a style="margin-left: 8px; font-size: 12px;">
|
|
||||||
Collapse
|
|
||||||
<span role="img" aria-label="down" class="anticon anticon-down"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></a></div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
<div class="search-result-list">
|
|
||||||
Search Result List
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`renders ./antdv-demo/docs/form/demo/coordinated.vue correctly 1`] = `
|
|
||||||
<form class="ant-form ant-form-horizontal">
|
<form class="ant-form ant-form-horizontal">
|
||||||
<div class="ant-row ant-form-item">
|
<div class="ant-row ant-form-item">
|
||||||
<div class="ant-col ant-col-5 ant-form-item-label"><label for="coordinated_note" title="Note" class="ant-form-item-required">Note</label></div>
|
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity name" class="">Activity name</label></div>
|
||||||
<div class="ant-col ant-col-12 ant-form-item-control-wrapper">
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="coordinated_note" class="ant-input"></span>
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" class="ant-input"></span>
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ant-row ant-form-item">
|
<div class="ant-row ant-form-item">
|
||||||
<div class="ant-col ant-col-5 ant-form-item-label"><label for="coordinated_gender" title="Gender" class="ant-form-item-required">Gender</label></div>
|
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity zone" class="">Activity zone</label></div>
|
||||||
<div class="ant-col ant-col-12 ant-form-item-control-wrapper">
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled" data-__meta="[object Object]" data-__field="[object Object]" id="coordinated_gender"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Select a option and change input text above</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">please select your zone</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
|
||||||
</div></span>
|
</div></span>
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ant-row ant-form-item">
|
<div class="ant-row ant-form-item">
|
||||||
<div class="ant-col ant-col-12 ant-col-offset-5 ant-form-item-control-wrapper">
|
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity time" class="">Activity time</label></div>
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="min-width: 195px; width: 100%;" type="date"><div class=""><input readonly="true" placeholder="Pick a date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Instant delivery" class="">Instant delivery</label></div>
|
||||||
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" role="switch" class="ant-switch"><span class="ant-switch-inner"></span></button></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity type" class="">Activity type</label></div>
|
||||||
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-checkbox-group"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="1"><span class="ant-checkbox-inner"></span></span><span>
|
||||||
|
Online
|
||||||
|
</span></label> <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="2"><span class="ant-checkbox-inner"></span></span><span>
|
||||||
|
Promotion
|
||||||
|
</span></label> <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="3"><span class="ant-checkbox-inner"></span></span><span>
|
||||||
|
Offline
|
||||||
|
</span></label></div></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Resources" class="">Resources</label></div>
|
||||||
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>
|
||||||
|
Sponsor
|
||||||
|
</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>
|
||||||
|
Venue
|
||||||
|
</span></label></div></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity form" class="">Activity form</label></div>
|
||||||
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><textarea class="ant-input"></textarea></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Create</span></button><button type="button" class="ant-btn" style="margin-left: 10px;"><span>Cancel</span></button></span>
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -146,20 +79,35 @@ exports[`renders ./antdv-demo/docs/form/demo/coordinated.vue correctly 1`] = `
|
||||||
</form>
|
</form>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders ./antdv-demo/docs/form/demo/customized-form-controls.vue correctly 1`] = `
|
exports[`renders ./antdv-demo/docs/form-model/demo/custom-validation.md correctly 1`] = `
|
||||||
<form class="ant-form ant-form-inline">
|
<form class="ant-form ant-form-horizontal">
|
||||||
<div class="ant-row ant-form-item">
|
<div class="ant-row ant-form-item">
|
||||||
<div class="ant-col ant-form-item-label"><label for="customized_form_controls_price" title="Price" class="">Price</label></div>
|
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Password" class="">Password</label></div>
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><span data-__meta="[object Object]" data-__field="[object Object]" id="customized_form_controls_price" class=""><input type="text" class="ant-input" style="width: 63%; margin-right: 2%;"> <div tabindex="0" class="ant-select ant-select-enabled" style="width: 32%;"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="RMB" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">RMB</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="password" autocomplete="off" class="ant-input"></span>
|
||||||
</div></span></span>
|
<!---->
|
||||||
<!---->
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="ant-row ant-form-item">
|
<div class="ant-row ant-form-item">
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Confirm" class="">Confirm</label></div>
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="password" autocomplete="off" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Age" class="">Age</label></div>
|
||||||
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" class="ant-input"></span>
|
||||||
|
<!---->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="ant-row ant-form-item">
|
||||||
|
<div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
|
||||||
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Submit</span></button><button type="button" class="ant-btn" style="margin-left: 10px;"><span>Reset</span></button></span>
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -167,7 +115,7 @@ exports[`renders ./antdv-demo/docs/form/demo/customized-form-controls.vue correc
|
||||||
</form>
|
</form>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders ./antdv-demo/docs/form/demo/dynamic-form-item.vue correctly 1`] = `
|
exports[`renders ./antdv-demo/docs/form-model/demo/dynamic-form-item.md correctly 1`] = `
|
||||||
<form class="ant-form ant-form-horizontal">
|
<form class="ant-form ant-form-horizontal">
|
||||||
<div class="ant-row ant-form-item">
|
<div class="ant-row ant-form-item">
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4 ant-form-item-control-wrapper">
|
<div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4 ant-form-item-control-wrapper">
|
||||||
|
|
@ -178,7 +126,7 @@ exports[`renders ./antdv-demo/docs/form/demo/dynamic-form-item.vue correctly 1`]
|
||||||
</div>
|
</div>
|
||||||
<div class="ant-row ant-form-item">
|
<div class="ant-row ant-form-item">
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4 ant-form-item-control-wrapper">
|
<div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4 ant-form-item-control-wrapper">
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button><button type="button" class="ant-btn" style="margin-left: 10px;"><span>Reset</span></button></span>
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -186,88 +134,25 @@ exports[`renders ./antdv-demo/docs/form/demo/dynamic-form-item.vue correctly 1`]
|
||||||
</form>
|
</form>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders ./antdv-demo/docs/form/demo/dynamic-rule.vue correctly 1`] = `
|
exports[`renders ./antdv-demo/docs/form-model/demo/horizontal-login.md correctly 1`] = `
|
||||||
<form class="ant-form ant-form-horizontal">
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label for="dynamic_rule_username" title="Name" class="ant-form-item-required">Name</label></div>
|
|
||||||
<div class="ant-col ant-col-8 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="Please input your name" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="dynamic_rule_username" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label for="dynamic_rule_nickname" title="Nickname" class="">Nickname</label></div>
|
|
||||||
<div class="ant-col ant-col-8 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input placeholder="Please input your nickname" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="dynamic_rule_nickname" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-8 ant-col-offset-4 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>
|
|
||||||
Nickname is required
|
|
||||||
</span></label></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-8 ant-col-offset-4 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Check</span></button></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`renders ./antdv-demo/docs/form/demo/form-in-modal.vue correctly 1`] = `
|
|
||||||
<div><button type="button" class="ant-btn ant-btn-primary"><span>New Collection</span></button>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`renders ./antdv-demo/docs/form/demo/global-state.vue correctly 1`] = `
|
|
||||||
<div id="components-form-demo-global-state">
|
|
||||||
<form class="ant-form ant-form-inline">
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-form-item-label"><label for="global_state_username" title="Username" class="ant-form-item-required">Username</label></div>
|
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="global_state_username" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form> <pre class="language-bash"> {
|
|
||||||
"username": {
|
|
||||||
"value": "benjycui"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</pre>
|
|
||||||
</div>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`renders ./antdv-demo/docs/form/demo/horizontal-login.vue correctly 1`] = `
|
|
||||||
<form class="ant-form ant-form-inline">
|
<form class="ant-form ant-form-inline">
|
||||||
<div class="ant-row ant-form-item">
|
<div class="ant-row ant-form-item">
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="user" class="anticon anticon-user" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><input placeholder="Username" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="horizontal_login_userName" class="ant-input"></span></span>
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="user" class="anticon anticon-user" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><input placeholder="Username" type="text" class="ant-input"></span></span>
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ant-row ant-form-item">
|
<div class="ant-row ant-form-item">
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="lock" class="anticon anticon-lock" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="lock" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"></path></svg></span></span><input placeholder="Password" type="password" data-__meta="[object Object]" data-__field="[object Object]" id="horizontal_login_password" class="ant-input"></span></span>
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="lock" class="anticon anticon-lock" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="lock" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"></path></svg></span></span><input placeholder="Password" type="password" class="ant-input"></span></span>
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ant-row ant-form-item">
|
<div class="ant-row ant-form-item">
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
<div class="ant-col ant-form-item-control-wrapper">
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Log in</span></button></span>
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><button disabled="disabled" type="submit" class="ant-btn ant-btn-primary"><span>Log in</span></button></span>
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -275,7 +160,7 @@ exports[`renders ./antdv-demo/docs/form/demo/horizontal-login.vue correctly 1`]
|
||||||
</form>
|
</form>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders ./antdv-demo/docs/form/demo/layout.vue correctly 1`] = `
|
exports[`renders ./antdv-demo/docs/form-model/demo/layout.md correctly 1`] = `
|
||||||
<form class="ant-form ant-form-horizontal">
|
<form class="ant-form ant-form-horizontal">
|
||||||
<div class="ant-row ant-form-item">
|
<div class="ant-row ant-form-item">
|
||||||
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Form Layout" class="">Form Layout</label></div>
|
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Form Layout" class="">Form Layout</label></div>
|
||||||
|
|
@ -317,533 +202,81 @@ exports[`renders ./antdv-demo/docs/form/demo/layout.vue correctly 1`] = `
|
||||||
</form>
|
</form>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders ./antdv-demo/docs/form/demo/normal-login.vue correctly 1`] = `
|
exports[`renders ./antdv-demo/docs/form-model/demo/validation.md correctly 1`] = `
|
||||||
<form class="login-form ant-form ant-form-horizontal" id="components-form-demo-normal-login">
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="user" class="anticon anticon-user" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="user" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"></path></svg></span></span><input placeholder="Username" type="text" data-__meta="[object Object]" data-__field="[object Object]" id="normal_login_userName" class="ant-input"></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><span class="ant-input-prefix"><span role="img" aria-label="lock" class="anticon anticon-lock" style="color: rgba(0, 0, 0, 0.25);"><svg viewBox="64 64 896 896" focusable="false" data-icon="lock" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M832 464h-68V240c0-70.7-57.3-128-128-128H388c-70.7 0-128 57.3-128 128v224h-68c-17.7 0-32 14.3-32 32v384c0 17.7 14.3 32 32 32h640c17.7 0 32-14.3 32-32V496c0-17.7-14.3-32-32-32zM332 240c0-30.9 25.1-56 56-56h248c30.9 0 56 25.1 56 56v224H332V240zm460 600H232V536h560v304zM484 701v53c0 4.4 3.6 8 8 8h40c4.4 0 8-3.6 8-8v-53a48.01 48.01 0 10-56 0z"></path></svg></span></span><input placeholder="Password" type="password" data-__meta="[object Object]" data-__field="[object Object]" id="normal_login_password" class="ant-input"></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input id="normal_login_remember" type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>
|
|
||||||
Remember me
|
|
||||||
</span></label><a href="" class="login-form-forgot">
|
|
||||||
Forgot password
|
|
||||||
</a><button type="submit" class="login-form-button ant-btn ant-btn-primary"><span>Log in</span></button>
|
|
||||||
Or
|
|
||||||
<a href="">
|
|
||||||
register now!
|
|
||||||
</a></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`renders ./antdv-demo/docs/form/demo/register.vue correctly 1`] = `
|
|
||||||
<form class="ant-form ant-form-horizontal">
|
<form class="ant-form ant-form-horizontal">
|
||||||
<div class="ant-row ant-form-item">
|
<div class="ant-row ant-form-item">
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_email" title="E-mail" class="ant-form-item-required">E-mail</label></div>
|
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity name" class="ant-form-item-required">Activity name</label></div>
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="register_email" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_password" title="Password" class="ant-form-item-required">Password</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="password" data-__meta="[object Object]" data-__field="[object Object]" id="register_password" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_confirm" title="Confirm Password" class="ant-form-item-required">Confirm Password</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="password" data-__meta="[object Object]" data-__field="[object Object]" id="register_confirm" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_nickname" title="" class="ant-form-item-required"><span>
|
|
||||||
Nickname
|
|
||||||
<span role="img" aria-label="question-circle" class="anticon anticon-question-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="question-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M623.6 316.7C593.6 290.4 554 276 512 276s-81.6 14.5-111.6 40.7C369.2 344 352 380.7 352 420v7.6c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8V420c0-44.1 43.1-80 96-80s96 35.9 96 80c0 31.1-22 59.6-56.1 72.7-21.2 8.1-39.2 22.3-52.1 40.9-13.1 19-19.9 41.8-19.9 64.9V620c0 4.4 3.6 8 8 8h48c4.4 0 8-3.6 8-8v-22.7a48.3 48.3 0 0130.9-44.8c59-22.7 97.1-74.7 97.1-132.5.1-39.3-17.1-76-48.3-103.3zM472 732a40 40 0 1080 0 40 40 0 10-80 0z"></path></svg></span></span></label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="register_nickname" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_residence" title="Habitual Residence" class="ant-form-item-required">Habitual Residence</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><span tabindex="0" class="ant-cascader-picker"><input type="text" readonly="true" data-__meta="[object Object]" data-__field="[object Object]" id="register_residence" class="ant-input ant-cascader-input "><span class="ant-cascader-picker-label">Zhejiang / Hangzhou / West Lake</span><span role="img" aria-label="close-circle" tabindex="-1" class="anticon anticon-close-circle ant-cascader-picker-clear"><svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="down" class="anticon anticon-down ant-cascader-picker-arrow"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_phone" title="Phone Number" class="ant-form-item-required">Phone Number</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-input-group-wrapper" style="width: 100%;"><span class="ant-input-wrapper ant-input-group"><span class="ant-input-group-addon"><div tabindex="0" class="ant-select ant-select-enabled" style="width: 70px;" data-__meta="[object Object]" data-__field="[object Object]" id="register_prefix"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="+86" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">
|
|
||||||
+86
|
|
||||||
</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
|
|
||||||
</div></span><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="register_phone" class="ant-input"></span></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_website" title="Website" class="ant-form-item-required">Website</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-combobox ant-select-enabled ant-select-show-search ant-select-auto-complete" data-__meta="[object Object]" data-__field="[object Object]" id="register_website"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><ul><li class="ant-select-search ant-select-search--inline"><div class="ant-select-search__field__wrap"><input placeholder="website" type="text" value="" class="ant-input ant-select-search__field"><span class="ant-select-search__field__mirror"> </span></div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span>
|
|
||||||
</div>
|
|
||||||
</div></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="register_captcha" title="Captcha" class="ant-form-item-required">Captcha</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-row" style="margin-left: -4px; margin-right: -4px;"><div class="ant-col ant-col-12" style="padding-left: 4px; padding-right: 4px;"><input type="text" data-__meta="[object Object]" data-__field="[object Object]" id="register_captcha" class="ant-input"></div> <div class="ant-col ant-col-12" style="padding-left: 4px; padding-right: 4px;"><button type="button" class="ant-btn"><span>Get captcha</span></button></div>
|
|
||||||
</div></span>
|
|
||||||
<!---->
|
|
||||||
<div class="ant-form-extra">We must make sure that your are a human.</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input id="register_agreement" type="checkbox" class="ant-checkbox-input" value=""><span class="ant-checkbox-inner"></span></span><span>
|
|
||||||
I have read the
|
|
||||||
<a href="">
|
|
||||||
agreement
|
|
||||||
</a></span></label></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Register</span></button></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`renders ./antdv-demo/docs/form/demo/time-related-controls.vue correctly 1`] = `
|
|
||||||
<form class="ant-form ant-form-horizontal">
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_date-picker" title="DatePicker" class="ant-form-item-required">DatePicker</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_date-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_date-time-picker" title="DatePicker[showTime]" class="ant-form-item-required">DatePicker[showTime]</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="min-width: 195px;" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_date-time-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_month-picker" title="MonthPicker" class="ant-form-item-required">MonthPicker</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_month-picker"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_range-picker" title="RangePicker" class="ant-form-item-required">RangePicker</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><span tabindex="0" class="ant-calendar-picker" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_range-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_range-time-picker" title="RangePicker[showTime]" class="ant-form-item-required">RangePicker[showTime]</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><span tabindex="0" class="ant-calendar-picker" style="width: 350px;" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_range-time-picker"><span class="ant-calendar-picker-input ant-input"><input readonly="true" placeholder="Start date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-range-picker-separator"> ~ </span><input readonly="true" placeholder="End date" tabindex="-1" class="ant-calendar-range-picker-input"><span class="ant-calendar-picker-icon"></span></span></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-8 ant-form-item-label"><label for="time_related_controls_time-picker" title="TimePicker" class="ant-form-item-required">TimePicker</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-16 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-time-picker" data-__meta="[object Object]" data-__field="[object Object]" id="time_related_controls_time-picker"><input type="text" placeholder="Select time" class="ant-time-picker-input"><span class="ant-time-picker-icon"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle ant-time-picker-clock-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-16 ant-col-sm-offset-8 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`renders ./antdv-demo/docs/form/demo/validate-other.vue correctly 1`] = `
|
|
||||||
<form class="ant-form ant-form-horizontal" id="components-form-demo-validate-other">
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-6 ant-form-item-label"><label title="Plain Text" class="">Plain Text</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-form-text">
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><input type="text" class="ant-input"></span>
|
||||||
China
|
|
||||||
</span></span>
|
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ant-row ant-form-item">
|
<div class="ant-row ant-form-item">
|
||||||
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_select" title="Select" class="ant-form-item-required">Select</label></div>
|
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity zone" class="ant-form-item-required">Activity zone</label></div>
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_select"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Please select a country</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">please select your zone</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
|
||||||
</div></span>
|
</div></span>
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ant-row ant-form-item">
|
<div class="ant-row ant-form-item">
|
||||||
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_select-multiple" title="Select[multiple]" class="ant-form-item-required">Select[multiple]</label></div>
|
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity time" class="ant-form-item-required">Activity time</label></div>
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_select-multiple"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--multiple"><div class="ant-select-selection__rendered"><div unselectable="on" class="ant-select-selection__placeholder" style="display: block; user-select: none;">Please select favourite colors</div><div><li class="ant-select-search ant-select-search--inline"><div class="ant-select-search__field__wrap"><input autocomplete="off" value="" class="ant-select-search__field"><span class="ant-select-search__field__mirror"> </span></div>
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="min-width: 195px; width: 100%;" type="date"><div class=""><input readonly="true" placeholder="Pick a date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
|
||||||
</li>
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
<div class="ant-row ant-form-item">
|
||||||
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_input-number" title="InputNumber" class="">InputNumber</label></div>
|
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Instant delivery" class="">Instant delivery</label></div>
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-input-number" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_input-number"><div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" role="switch" class="ant-switch"><span class="ant-switch-inner"></span></button></span>
|
||||||
<div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="1" aria-valuemax="10" aria-valuenow="3" autocomplete="off" max="10" min="1" step="1" class="ant-input-number-input"></div>
|
|
||||||
</div><span class="ant-form-text">
|
|
||||||
machines
|
|
||||||
</span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_switch" title="Switch" class="">Switch</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" role="switch" class="ant-switch" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_switch"><span class="ant-switch-inner"></span></button></span>
|
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ant-row ant-form-item">
|
<div class="ant-row ant-form-item">
|
||||||
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_slider" title="Slider" class="">Slider</label></div>
|
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity type" class="ant-form-item-required">Activity type</label></div>
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><div tabindex="-1" class="ant-slider ant-slider-with-marks" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_slider"><div class="ant-slider-rail"></div><div class="ant-slider-track" style="left: 0%; width: 0%;"></div><div class="ant-slider-step"><span class="ant-slider-dot ant-slider-dot-active" style="left: 0%;"></span><span class="ant-slider-dot" style="left: 20%;"></span><span class="ant-slider-dot" style="left: 40%;"></span><span class="ant-slider-dot" style="left: 60%;"></span><span class="ant-slider-dot" style="left: 80%;"></span><span class="ant-slider-dot" style="left: 100%;"></span></div>
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-checkbox-group"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="1"><span class="ant-checkbox-inner"></span></span><span>
|
||||||
<div role="slider" tabindex="0" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0" class="ant-slider-handle" style="left: 0%; transform: translateX(-50%);"></div>
|
Online
|
||||||
<div class="ant-slider-mark"><span class="ant-slider-mark-text ant-slider-mark-text-active" style="transform: translateX(-50%); left: 0%;">A</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 20%;">B</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 40%;">C</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 60%;">D</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 80%;">E</span><span class="ant-slider-mark-text" style="transform: translateX(-50%); left: 100%;">F</span></div>
|
</span></label> <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="2"><span class="ant-checkbox-inner"></span></span><span>
|
||||||
</div></span>
|
Promotion
|
||||||
<!---->
|
</span></label> <label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="3"><span class="ant-checkbox-inner"></span></span><span>
|
||||||
</div>
|
Offline
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_radio-group" title="Radio.Group" class="">Radio.Group</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_radio-group"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="a"><span class="ant-radio-inner"></span></span><span>
|
|
||||||
item 1
|
|
||||||
</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="b"><span class="ant-radio-inner"></span></span><span>
|
|
||||||
item 2
|
|
||||||
</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="c"><span class="ant-radio-inner"></span></span><span>
|
|
||||||
item 3
|
|
||||||
</span></label></div></span>
|
</span></label></div></span>
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ant-row ant-form-item">
|
<div class="ant-row ant-form-item">
|
||||||
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_radio-button" title="Radio.Button" class="">Radio.Button</label></div>
|
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Resources" class="ant-form-item-required">Resources</label></div>
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_radio-button"><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="a"><span class="ant-radio-button-inner"></span></span><span>
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-radio-group ant-radio-group-outline ant-radio-group-default"><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="1"><span class="ant-radio-inner"></span></span><span>
|
||||||
item 1
|
Sponsor
|
||||||
</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="b"><span class="ant-radio-button-inner"></span></span><span>
|
</span></label><label class="ant-radio-wrapper"><span class="ant-radio"><input type="radio" class="ant-radio-input" value="2"><span class="ant-radio-inner"></span></span><span>
|
||||||
item 2
|
Venue
|
||||||
</span></label><label class="ant-radio-button-wrapper"><span class="ant-radio-button"><input type="radio" class="ant-radio-button-input" value="c"><span class="ant-radio-button-inner"></span></span><span>
|
|
||||||
item 3
|
|
||||||
</span></label></div></span>
|
</span></label></div></span>
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ant-row ant-form-item">
|
<div class="ant-row ant-form-item">
|
||||||
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_checkbox-group" title="Checkbox.Group" class="">Checkbox.Group</label></div>
|
<div class="ant-col ant-col-4 ant-form-item-label"><label title="Activity form" class="ant-form-item-required">Activity form</label></div>
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
||||||
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><div class="ant-checkbox-group" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_checkbox-group" style="width: 100%;"><div class="ant-row"><div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked"><span class="ant-checkbox ant-checkbox-checked"><input type="checkbox" class="ant-checkbox-input" value="A"><span class="ant-checkbox-inner"></span></span><span>
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><textarea class="ant-input"></textarea></span>
|
||||||
A
|
|
||||||
</span></label></div>
|
|
||||||
<div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper ant-checkbox-wrapper-checked ant-checkbox-wrapper-disabled"><span class="ant-checkbox ant-checkbox-checked ant-checkbox-disabled"><input type="checkbox" disabled="disabled" class="ant-checkbox-input" value="B"><span class="ant-checkbox-inner"></span></span><span>
|
|
||||||
B
|
|
||||||
</span></label></div>
|
|
||||||
<div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="C"><span class="ant-checkbox-inner"></span></span><span>
|
|
||||||
C
|
|
||||||
</span></label></div>
|
|
||||||
<div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="D"><span class="ant-checkbox-inner"></span></span><span>
|
|
||||||
D
|
|
||||||
</span></label></div>
|
|
||||||
<div class="ant-col ant-col-8"><label class="ant-checkbox-wrapper"><span class="ant-checkbox"><input type="checkbox" class="ant-checkbox-input" value="E"><span class="ant-checkbox-inner"></span></span><span>
|
|
||||||
E
|
|
||||||
</span></label></div>
|
|
||||||
</div>
|
|
||||||
</div></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_rate" title="Rate" class="">Rate</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control has-success"><span class="ant-form-item-children"><ul tabindex="0" role="radiogroup" class="ant-rate" data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_rate"><li class="ant-rate-star ant-rate-star-full"><div role="radio" aria-checked="true" aria-posinset="1" aria-setsize="5" tabindex="0"><div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
|
|
||||||
<div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="ant-rate-star ant-rate-star-full">
|
|
||||||
<div role="radio" aria-checked="true" aria-posinset="2" aria-setsize="5" tabindex="0">
|
|
||||||
<div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
|
|
||||||
<div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="ant-rate-star ant-rate-star-full">
|
|
||||||
<div role="radio" aria-checked="true" aria-posinset="3" aria-setsize="5" tabindex="0">
|
|
||||||
<div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
|
|
||||||
<div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="ant-rate-star ant-rate-star-half ant-rate-star-active">
|
|
||||||
<div role="radio" aria-checked="true" aria-posinset="4" aria-setsize="5" tabindex="0">
|
|
||||||
<div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
|
|
||||||
<div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="ant-rate-star ant-rate-star-zero">
|
|
||||||
<div role="radio" aria-checked="false" aria-posinset="5" aria-setsize="5" tabindex="0">
|
|
||||||
<div class="ant-rate-star-first"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
|
|
||||||
<div class="ant-rate-star-second"><span role="img" aria-label="star" class="anticon anticon-star"><svg viewBox="64 64 896 896" focusable="false" data-icon="star" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path></svg></span></div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_upload" title="Upload" class="">Upload</label></div>
|
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class=""><div class="ant-upload ant-upload-select ant-upload-select-picture"><!----></div><div class="ant-upload-list ant-upload-list-picture"></div></span></span>
|
|
||||||
<!---->
|
<!---->
|
||||||
<div class="ant-form-extra">longgggggggggggggggggggggggggggggggggg</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ant-row ant-form-item">
|
<div class="ant-row ant-form-item">
|
||||||
<div class="ant-col ant-col-6 ant-form-item-label"><label for="validate_other_dragger" title="Dragger" class="">Dragger</label></div>
|
<div class="ant-col ant-col-14 ant-col-offset-4 ant-form-item-control-wrapper">
|
||||||
<div class="ant-col ant-col-14 ant-form-item-control-wrapper">
|
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="button" class="ant-btn ant-btn-primary"><span>Create</span></button><button type="button" class="ant-btn" style="margin-left: 10px;"><span>Reset</span></button></span>
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="dropbox"><span data-__meta="[object Object]" data-__field="[object Object]" id="validate_other_dragger" class=""><div class="ant-upload ant-upload-drag"><!----></div><div class="ant-upload-list ant-upload-list-text"></div></span></div></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-12 ant-col-offset-6 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><button type="submit" class="ant-btn ant-btn-primary"><span>Submit</span></button></span>
|
|
||||||
<!---->
|
<!---->
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
`;
|
`;
|
||||||
|
|
||||||
exports[`renders ./antdv-demo/docs/form/demo/validate-static.vue correctly 1`] = `
|
|
||||||
<form class="ant-form ant-form-horizontal">
|
|
||||||
<div class="ant-row ant-form-item ant-form-item-with-help">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Fail" class="">Fail</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control has-error"><span class="ant-form-item-children"><input placeholder="unavailable choice" type="text" id="error" class="ant-input"></span>
|
|
||||||
<div class="ant-form-explain show-help-enter">Should be combination of numbers & alphabets</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Warning" class="">Warning</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control has-warning"><span class="ant-form-item-children"><input placeholder="Warning" type="text" id="warning" class="ant-input"></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item ant-form-item-with-help">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Validating" class="">Validating</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control has-feedback is-validating"><span class="ant-form-item-children"><input placeholder="I'm the content is being validated" type="text" id="validating" class="ant-input"><span class="ant-form-item-children-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="anticon-spin"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></span>
|
|
||||||
<div class="ant-form-explain show-help-enter">The information is being validated...</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Success" class="">Success</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control has-feedback has-success"><span class="ant-form-item-children"><input placeholder="I'm the content" type="text" id="success" class="ant-input"><span class="ant-form-item-children-icon"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Warning" class="">Warning</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control has-feedback has-warning"><span class="ant-form-item-children"><input placeholder="Warning" type="text" id="warning2" class="ant-input"><span class="ant-form-item-children-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item ant-form-item-with-help">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Fail" class="">Fail</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control has-feedback has-error"><span class="ant-form-item-children"><input placeholder="unavailable choice" type="text" id="error2" class="ant-input"><span class="ant-form-item-children-icon"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></span>
|
|
||||||
<div class="ant-form-explain show-help-enter">Should be combination of numbers & alphabets</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Success" class="">Success</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control has-feedback has-success"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="width: 100%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span><span class="ant-form-item-children-icon"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Warning" class="">Warning</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control has-feedback has-warning"><span class="ant-form-item-children"><span class="ant-time-picker" style="width: 100%;"><input type="text" placeholder="Select time" class="ant-time-picker-input"><span class="ant-time-picker-icon"><span role="img" aria-label="clock-circle" class="anticon anticon-clock-circle ant-time-picker-clock-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="clock-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path><path d="M686.7 638.6L544.1 535.5V288c0-4.4-3.6-8-8-8H488c-4.4 0-8 3.6-8 8v275.4c0 2.6 1.2 5 3.3 6.5l165.4 120.6c3.6 2.6 8.6 1.8 11.2-1.7l28.6-39c2.6-3.7 1.8-8.7-1.8-11.2z"></path></svg></span></span></span><span class="ant-form-item-children-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Error" class="">Error</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control has-feedback has-error"><span class="ant-form-item-children"><div tabindex="0" class="ant-select ant-select-enabled"><div role="combobox" aria-autocomplete="list" aria-haspopup="true" aria-controls="test-uuid" class="ant-select-selection ant-select-selection--single"><div class="ant-select-selection__rendered"><div title="Option 1" class="ant-select-selection-selected-value" style="display: block; opacity: 1;">
|
|
||||||
Option 1
|
|
||||||
</div></div><span unselectable="on" class="ant-select-arrow" style="user-select: none;"><span role="img" aria-label="down" class="anticon anticon-down ant-select-arrow-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
|
|
||||||
</div><span class="ant-form-item-children-icon"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item ant-form-item-with-help">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Validating" class="">Validating</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control has-feedback is-validating"><span class="ant-form-item-children"><span tabindex="0" class="ant-cascader-picker"><input type="text" readonly="true" class="ant-input ant-cascader-input "><span class="ant-cascader-picker-label"></span><span role="img" aria-label="close-circle" tabindex="-1" class="anticon anticon-close-circle ant-cascader-picker-clear"><svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span><span role="img" aria-label="down" class="anticon anticon-down ant-cascader-picker-arrow"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span><span class="ant-form-item-children-icon"><span role="img" aria-label="loading" class="anticon anticon-loading"><svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true" class="anticon-spin"><path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"></path></svg></span></span></span>
|
|
||||||
<div class="ant-form-explain show-help-enter">The information is being validated...</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item" style="margin-bottom: 0px;">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="inline" class="">inline</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-row ant-form-item ant-form-item-with-help" style="display: inline-block;"><div class="ant-col ant-form-item-control-wrapper"><div class="ant-form-item-control has-error"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="width: 100%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
|
|
||||||
<div class="ant-form-explain show-help-enter">Please select the correct date</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div><span style="display: inline-block; width: 24px; text-align: center;">
|
|
||||||
-
|
|
||||||
</span>
|
|
||||||
<div class="ant-row ant-form-item" style="display: inline-block;">
|
|
||||||
<div class="ant-col ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><span class="ant-calendar-picker" style="width: 100%;"><div class=""><input readonly="true" placeholder="Select date" class="ant-calendar-picker-input ant-input"><span role="img" aria-label="calendar" class="anticon anticon-calendar ant-calendar-picker-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="calendar" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"></path></svg></span></div></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Success" class="">Success</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control has-feedback has-success"><span class="ant-form-item-children"><div class="ant-input-number" style="width: 100%;"><div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
|
|
||||||
<div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="-9007199254740991" autocomplete="off" min="-9007199254740991" step="1" class="ant-input-number-input"></div>
|
|
||||||
</div><span class="ant-form-item-children-icon"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Success" class="">Success</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control has-feedback has-success"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper"><input placeholder="with allowClear" type="text" class="ant-input"><span class="ant-input-suffix"></span></span><span class="ant-form-item-children-icon"><span role="img" aria-label="check-circle" class="anticon anticon-check-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path></svg></span></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Warning" class="">Warning</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control has-feedback has-warning"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper ant-input-password"><input placeholder="with input password" type="password" class="ant-input"><span class="ant-input-suffix"><span role="img" aria-label="eye-invisible" tabindex="-1" class="anticon anticon-eye-invisible ant-input-password-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="eye-invisible" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"></path><path d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"></path></svg></span></span></span><span class="ant-form-item-children-icon"><span role="img" aria-label="exclamation-circle" class="anticon anticon-exclamation-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="exclamation-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z"></path></svg></span></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="ant-row ant-form-item">
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-5 ant-form-item-label"><label title="Error" class="">Error</label></div>
|
|
||||||
<div class="ant-col ant-col-xs-24 ant-col-sm-12 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control has-feedback has-error"><span class="ant-form-item-children"><span class="ant-input-affix-wrapper ant-input-password"><input placeholder="with input password and allowClear" type="password" class="ant-input"><span class="ant-input-suffix"><span role="img" aria-label="eye-invisible" tabindex="-1" class="anticon anticon-eye-invisible ant-input-password-icon"><svg viewBox="64 64 896 896" focusable="false" data-icon="eye-invisible" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M942.2 486.2Q889.47 375.11 816.7 305l-50.88 50.88C807.31 395.53 843.45 447.4 874.7 512 791.5 684.2 673.4 766 512 766q-72.67 0-133.87-22.38L323 798.75Q408 838 512 838q288.3 0 430.2-300.3a60.29 60.29 0 000-51.5zm-63.57-320.64L836 122.88a8 8 0 00-11.32 0L715.31 232.2Q624.86 186 512 186q-288.3 0-430.2 300.3a60.3 60.3 0 000 51.5q56.69 119.4 136.5 191.41L112.48 835a8 8 0 000 11.31L155.17 889a8 8 0 0011.31 0l712.15-712.12a8 8 0 000-11.32zM149.3 512C232.6 339.8 350.7 258 512 258c54.54 0 104.13 9.36 149.12 28.39l-70.3 70.3a176 176 0 00-238.13 238.13l-83.42 83.42C223.1 637.49 183.3 582.28 149.3 512zm246.7 0a112.11 112.11 0 01146.2-106.69L401.31 546.2A112 112 0 01396 512z"></path><path d="M508 624c-3.46 0-6.87-.16-10.25-.47l-52.82 52.82a176.09 176.09 0 00227.42-227.42l-52.82 52.82c.31 3.38.47 6.79.47 10.25a111.94 111.94 0 01-112 112z"></path></svg></span></span></span><span class="ant-form-item-children-icon"><span role="img" aria-label="close-circle" class="anticon anticon-close-circle"><svg viewBox="64 64 896 896" focusable="false" data-icon="close-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"></path></svg></span></span></span>
|
|
||||||
<!---->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
`;
|
|
||||||
|
|
||||||
exports[`renders ./antdv-demo/docs/form/demo/without-form-create.vue correctly 1`] = `
|
|
||||||
<form class="ant-form ant-form-horizontal">
|
|
||||||
<div class="ant-row ant-form-item ant-form-item-with-help">
|
|
||||||
<div class="ant-col ant-col-7 ant-form-item-label"><label title="Prime between 8 & 12" class="">Prime between 8 & 12</label></div>
|
|
||||||
<div class="ant-col ant-col-12 ant-form-item-control-wrapper">
|
|
||||||
<div class="ant-form-item-control"><span class="ant-form-item-children"><div class="ant-input-number"><div class="ant-input-number-handler-wrap"><span class="ant-input-number-handler ant-input-number-handler-up " unselectable="unselectable" role="button" aria-label="Increase Value"><span role="img" aria-label="up" class="anticon anticon-up ant-input-number-handler-up-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="up" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M890.5 755.3L537.9 269.2c-12.8-17.6-39-17.6-51.7 0L133.5 755.3A8 8 0 00140 768h75c5.1 0 9.9-2.5 12.9-6.6L512 369.8l284.1 391.6c3 4.1 7.8 6.6 12.9 6.6h75c6.5 0 10.3-7.4 6.5-12.7z"></path></svg></span></span><span class="ant-input-number-handler ant-input-number-handler-down " unselectable="unselectable" role="button" aria-label="Decrease Value"><span role="img" aria-label="down" class="anticon anticon-down ant-input-number-handler-down-inner"><svg viewBox="64 64 896 896" focusable="false" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" class=""><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span></div>
|
|
||||||
<div class="ant-input-number-input-wrap"><input role="spinbutton" aria-valuemin="8" aria-valuemax="12" aria-valuenow="11" autocomplete="off" max="12" min="8" step="1" class="ant-input-number-input"></div>
|
|
||||||
</div></span>
|
|
||||||
<div class="ant-form-explain show-help-enter">A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
`;
|
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,3 @@
|
||||||
import demoTest from '../../../tests/shared/demoTest';
|
import demoTest from '../../../tests/shared/demoTest';
|
||||||
|
|
||||||
demoTest('form', { suffix: 'vue', skip: ['index.vue', 'vuex.vue'] });
|
demoTest('form-model');
|
||||||
|
|
|
||||||
|
|
@ -1,20 +1,12 @@
|
||||||
import Vue from 'vue';
|
|
||||||
import Form from './Form';
|
import Form from './Form';
|
||||||
import ref from 'vue-ref';
|
|
||||||
import FormDecoratorDirective from '../_util/FormDecoratorDirective';
|
|
||||||
|
|
||||||
Vue.use(ref, { name: 'ant-ref' });
|
export { FormProps, ValidationRule } from './Form';
|
||||||
Vue.use(FormDecoratorDirective);
|
|
||||||
Vue.prototype.$form = Form;
|
|
||||||
|
|
||||||
export { FormProps, FormCreateOption, ValidationRule } from './Form';
|
|
||||||
export { FormItemProps } from './FormItem';
|
export { FormItemProps } from './FormItem';
|
||||||
|
|
||||||
/* istanbul ignore next */
|
/* istanbul ignore next */
|
||||||
Form.install = function(Vue) {
|
Form.install = function(app) {
|
||||||
Vue.component(Form.name, Form);
|
app.component(Form.name, Form);
|
||||||
Vue.component(Form.Item.name, Form.Item);
|
app.component(Form.Item.name, Form.Item);
|
||||||
Vue.prototype.$form = Form;
|
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Form;
|
export default Form;
|
||||||
|
|
|
||||||
|
|
@ -53,7 +53,7 @@ import { default as Divider } from './divider';
|
||||||
|
|
||||||
import { default as Dropdown } from './dropdown';
|
import { default as Dropdown } from './dropdown';
|
||||||
|
|
||||||
import { default as FormModel } from './form-model';
|
import { default as Form } from './form';
|
||||||
|
|
||||||
import { default as Icon } from './icon';
|
import { default as Icon } from './icon';
|
||||||
|
|
||||||
|
|
@ -164,7 +164,7 @@ const components = [
|
||||||
DatePicker,
|
DatePicker,
|
||||||
Divider,
|
Divider,
|
||||||
Dropdown,
|
Dropdown,
|
||||||
FormModel,
|
Form,
|
||||||
Icon,
|
Icon,
|
||||||
Input,
|
Input,
|
||||||
InputNumber,
|
InputNumber,
|
||||||
|
|
@ -249,7 +249,7 @@ export {
|
||||||
DatePicker,
|
DatePicker,
|
||||||
Divider,
|
Divider,
|
||||||
Dropdown,
|
Dropdown,
|
||||||
FormModel,
|
Form,
|
||||||
Icon,
|
Icon,
|
||||||
Input,
|
Input,
|
||||||
InputNumber,
|
InputNumber,
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue