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 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 { initDefaultProps, getSlot } 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,
|
||||
};
|
||||
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']),
|
||||
|
|
@ -63,13 +20,17 @@ export const FormProps = {
|
|||
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,
|
||||
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 = {
|
||||
|
|
@ -97,87 +58,35 @@ export const ValidationRule = {
|
|||
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;
|
||||
// };
|
||||
function isEqualName(name1, name2) {
|
||||
return isEqual(toArray(name1), toArray(name2));
|
||||
}
|
||||
|
||||
const Form = {
|
||||
name: 'AForm',
|
||||
inheritAttrs: false,
|
||||
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();
|
||||
this.fields = [];
|
||||
this.form = undefined;
|
||||
this.lastValidatePromise = null;
|
||||
provide('FormContext', this);
|
||||
},
|
||||
provide() {
|
||||
setup() {
|
||||
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);
|
||||
}
|
||||
}
|
||||
}
|
||||
: () => {},
|
||||
configProvider: inject('configProvider', ConfigConsumerProps),
|
||||
};
|
||||
},
|
||||
inject: {
|
||||
configProvider: { default: () => ConfigConsumerProps },
|
||||
},
|
||||
watch: {
|
||||
form() {
|
||||
this.$forceUpdate();
|
||||
rules() {
|
||||
if (this.validateOnRuleChange) {
|
||||
this.validateFields();
|
||||
}
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
|
|
@ -185,100 +94,186 @@ const Form = {
|
|||
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);
|
||||
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,
|
||||
onSubmit,
|
||||
$slots,
|
||||
autoFormCreate,
|
||||
options = {},
|
||||
} = this;
|
||||
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, {
|
||||
const formClassName = classNames(prefixCls, className, {
|
||||
[`${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 onSubmit={handleSubmit} class={formClassName} {...restProps}>
|
||||
{getSlot(this)}
|
||||
</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 classNames from 'classnames';
|
||||
import find from 'lodash/find';
|
||||
import getTransitionProps from '../_util/getTransitionProps';
|
||||
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 {
|
||||
import hasProp, {
|
||||
initDefaultProps,
|
||||
getComponent,
|
||||
getSlotOptions,
|
||||
isValidElement,
|
||||
getAllChildren,
|
||||
findDOMNode,
|
||||
getComponent,
|
||||
getOptionProps,
|
||||
getEvents,
|
||||
isValidElement,
|
||||
getSlot,
|
||||
} from '../_util/props-util';
|
||||
import getTransitionProps from '../_util/getTransitionProps';
|
||||
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 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';
|
||||
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,
|
||||
|
|
@ -31,227 +33,256 @@ const iconMap = {
|
|||
validating: LoadingOutlined,
|
||||
};
|
||||
|
||||
function noop() {}
|
||||
function getPropByPath(obj, namePathList, strict) {
|
||||
let tempObj = obj;
|
||||
|
||||
function intersperseSpace(list) {
|
||||
return list.reduce((current, item) => [...current, ' ', item], []).slice(1);
|
||||
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,
|
||||
labelCol: PropTypes.shape(ColProps).loose,
|
||||
wrapperCol: PropTypes.shape(ColProps).loose,
|
||||
help: 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,
|
||||
required: PropTypes.bool,
|
||||
colon: PropTypes.bool,
|
||||
fieldDecoratorId: PropTypes.string,
|
||||
fieldDecoratorOptions: PropTypes.object,
|
||||
selfUpdate: 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']),
|
||||
};
|
||||
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,
|
||||
__ANT_NEW_FORM_ITEM: true,
|
||||
props: initDefaultProps(FormItemProps, {
|
||||
hasFeedback: false,
|
||||
autoLink: true,
|
||||
}),
|
||||
setup() {
|
||||
return {
|
||||
isFormItemChildren: inject('isFormItemChildren', false),
|
||||
FormContext: inject('FormContext', {}),
|
||||
decoratorFormProps: inject('decoratorFormProps', {}),
|
||||
collectFormItemContext: inject('collectFormItemContext', noop),
|
||||
configProvider: inject('configProvider', ConfigConsumerProps),
|
||||
FormContext: inject('FormContext', {}),
|
||||
};
|
||||
},
|
||||
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: {
|
||||
itemSelfUpdate() {
|
||||
return !!(this.selfUpdate === undefined ? this.FormContext.selfUpdate : this.selfUpdate);
|
||||
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);
|
||||
this.collectContext();
|
||||
},
|
||||
beforeUpdate() {
|
||||
if (process.env.NODE_ENV !== 'production') {
|
||||
this.collectContext();
|
||||
mounted() {
|
||||
if (this.fieldName) {
|
||||
const { addField } = this.FormContext;
|
||||
addField && addField(this);
|
||||
this.initialValue = cloneDeep(this.fieldValue);
|
||||
}
|
||||
},
|
||||
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.',
|
||||
);
|
||||
const { removeField } = this.FormContext;
|
||||
removeField && removeField(this);
|
||||
},
|
||||
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);
|
||||
}
|
||||
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');
|
||||
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() {
|
||||
const id = this.id || this.getId();
|
||||
const id = this.fieldId;
|
||||
if (!id) {
|
||||
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) {
|
||||
const help = this.getHelpMessage();
|
||||
const children = help ? (
|
||||
|
|
@ -314,17 +327,12 @@ export default {
|
|||
},
|
||||
|
||||
renderValidateWrapper(prefixCls, c1, c2, c3) {
|
||||
const props = this.$props;
|
||||
const onlyControl = this.getOnlyControl;
|
||||
const validateStatus =
|
||||
props.validateStatus === undefined && onlyControl
|
||||
? this.getValidateStatus()
|
||||
: props.validateStatus;
|
||||
const validateStatus = this.validateState;
|
||||
|
||||
let classes = `${prefixCls}-item-control`;
|
||||
if (validateStatus) {
|
||||
classes = classNames(`${prefixCls}-item-control`, {
|
||||
'has-feedback': props.hasFeedback || validateStatus === 'validating',
|
||||
'has-feedback': this.hasFeedback || validateStatus === 'validating',
|
||||
'has-success': validateStatus === 'success',
|
||||
'has-warning': validateStatus === 'warning',
|
||||
'has-error': validateStatus === 'error',
|
||||
|
|
@ -334,7 +342,7 @@ export default {
|
|||
const IconNode = validateStatus && iconMap[validateStatus];
|
||||
|
||||
const icon =
|
||||
props.hasFeedback && IconNode ? (
|
||||
this.hasFeedback && IconNode ? (
|
||||
<span class={`${prefixCls}-item-children-icon`}>
|
||||
<IconNode />
|
||||
</span>
|
||||
|
|
@ -374,9 +382,9 @@ export default {
|
|||
labelCol: contextLabelCol,
|
||||
colon: contextColon,
|
||||
} = this.FormContext;
|
||||
const { labelAlign, labelCol, colon, id, htmlFor } = this;
|
||||
const { labelAlign, labelCol, colon, fieldId, htmlFor } = this;
|
||||
const label = getComponent(this, 'label');
|
||||
const required = this.isRequired();
|
||||
const required = this.isRequired;
|
||||
const mergedLabelCol = labelCol || contextLabelCol || {};
|
||||
|
||||
const mergedLabelAlign = labelAlign || contextLabelAlign;
|
||||
|
|
@ -416,7 +424,7 @@ export default {
|
|||
return label ? (
|
||||
<Col {...colProps}>
|
||||
<label
|
||||
for={htmlFor || id || this.getId()}
|
||||
for={htmlFor || fieldId}
|
||||
class={labelClassName}
|
||||
title={typeof label === 'string' ? label : ''}
|
||||
onClick={this.onLabelClick}
|
||||
|
|
@ -426,28 +434,28 @@ export default {
|
|||
</Col>
|
||||
) : null;
|
||||
},
|
||||
renderChildren(prefixCls) {
|
||||
renderChildren(prefixCls, child) {
|
||||
return [
|
||||
this.renderLabel(prefixCls),
|
||||
this.renderWrapper(
|
||||
prefixCls,
|
||||
this.renderValidateWrapper(
|
||||
prefixCls,
|
||||
this.slotDefault,
|
||||
child,
|
||||
this.renderHelp(prefixCls),
|
||||
this.renderExtra(prefixCls),
|
||||
),
|
||||
),
|
||||
];
|
||||
},
|
||||
renderFormItem() {
|
||||
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);
|
||||
const children = this.renderChildren(prefixCls, child);
|
||||
const itemClassName = {
|
||||
[className]: true,
|
||||
[className]: className,
|
||||
[`${prefixCls}-item`]: true,
|
||||
[`${prefixCls}-item-with-help`]: this.helpShow,
|
||||
};
|
||||
|
|
@ -458,63 +466,33 @@ export default {
|
|||
</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;
|
||||
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();
|
||||
return this.renderFormItem([firstChildren, children.slice(1)]);
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,144 +1,77 @@
|
|||
// 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`] = `
|
||||
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-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 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-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 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-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 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>
|
||||
|
|
@ -146,20 +79,35 @@ exports[`renders ./antdv-demo/docs/form/demo/coordinated.vue correctly 1`] = `
|
|||
</form>
|
||||
`;
|
||||
|
||||
exports[`renders ./antdv-demo/docs/form/demo/customized-form-controls.vue correctly 1`] = `
|
||||
<form class="ant-form ant-form-inline">
|
||||
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-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 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-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-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>
|
||||
|
|
@ -167,7 +115,7 @@ exports[`renders ./antdv-demo/docs/form/demo/customized-form-controls.vue correc
|
|||
</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">
|
||||
<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">
|
||||
|
|
@ -178,7 +126,7 @@ exports[`renders ./antdv-demo/docs/form/demo/dynamic-form-item.vue correctly 1`]
|
|||
</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 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>
|
||||
|
|
@ -186,88 +134,25 @@ exports[`renders ./antdv-demo/docs/form/demo/dynamic-form-item.vue correctly 1`]
|
|||
</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`] = `
|
||||
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" 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 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 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 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>
|
||||
|
|
@ -275,7 +160,7 @@ exports[`renders ./antdv-demo/docs/form/demo/horizontal-login.vue correctly 1`]
|
|||
</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">
|
||||
<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>
|
||||
|
|
@ -317,533 +202,81 @@ exports[`renders ./antdv-demo/docs/form/demo/layout.vue correctly 1`] = `
|
|||
</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`] = `
|
||||
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-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-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"><span class="ant-form-text">
|
||||
China
|
||||
</span></span>
|
||||
<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-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-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>
|
||||
</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-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"><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 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></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-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 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 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-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-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
|
||||
<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-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-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
|
||||
<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-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-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-item-control"><span class="ant-form-item-children"><textarea class="ant-input"></textarea></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 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>
|
||||
`;
|
||||
|
||||
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';
|
||||
|
||||
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 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 { FormProps, 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;
|
||||
Form.install = function(app) {
|
||||
app.component(Form.name, Form);
|
||||
app.component(Form.Item.name, Form.Item);
|
||||
};
|
||||
|
||||
export default Form;
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ import { default as Divider } from './divider';
|
|||
|
||||
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';
|
||||
|
||||
|
|
@ -164,7 +164,7 @@ const components = [
|
|||
DatePicker,
|
||||
Divider,
|
||||
Dropdown,
|
||||
FormModel,
|
||||
Form,
|
||||
Icon,
|
||||
Input,
|
||||
InputNumber,
|
||||
|
|
@ -249,7 +249,7 @@ export {
|
|||
DatePicker,
|
||||
Divider,
|
||||
Dropdown,
|
||||
FormModel,
|
||||
Form,
|
||||
Icon,
|
||||
Input,
|
||||
InputNumber,
|
||||
|
|
|
|||
Loading…
Reference in New Issue