diff --git a/antdv-demo b/antdv-demo
index 3d86639b4..c5aec8ace 160000
--- a/antdv-demo
+++ b/antdv-demo
@@ -1 +1 @@
-Subproject commit 3d86639b4e7361c08ddf3bb56c77e854eecf94e0
+Subproject commit c5aec8ace772ab39828c9e9e20735509d943a071
diff --git a/components/form-old/Form.jsx b/components/form-old/Form.jsx
deleted file mode 100755
index 22dd38637..000000000
--- a/components/form-old/Form.jsx
+++ /dev/null
@@ -1,287 +0,0 @@
-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;
diff --git a/components/form-old/FormItem.jsx b/components/form-old/FormItem.jsx
deleted file mode 100644
index 64744fb08..000000000
--- a/components/form-old/FormItem.jsx
+++ /dev/null
@@ -1,520 +0,0 @@
-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();
- },
-};
diff --git a/components/form-old/__tests__/__snapshots__/demo.test.js.snap b/components/form-old/__tests__/__snapshots__/demo.test.js.snap
deleted file mode 100644
index 97fd53963..000000000
--- a/components/form-old/__tests__/__snapshots__/demo.test.js.snap
+++ /dev/null
@@ -1,849 +0,0 @@
-// 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>
-`;
diff --git a/components/form-old/__tests__/__snapshots__/index.test.js.snap b/components/form-old/__tests__/__snapshots__/index.test.js.snap
deleted file mode 100644
index dbf9b20e9..000000000
--- a/components/form-old/__tests__/__snapshots__/index.test.js.snap
+++ /dev/null
@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Form Form.Item should support data-*、aria-* and custom attribute 1`] = `
-<form class="ant-form ant-form-horizontal">
- <div class="ant-row ant-form-item" data-text="123" aria-hidden="true" cccc="bbbb">
- <div class="ant-col ant-form-item-control-wrapper">
- <div class="ant-form-item-control"><span class="ant-form-item-children">text</span>
- <!---->
- </div>
- </div>
- </div>
-</form>
-`;
diff --git a/components/form-old/__tests__/__snapshots__/message.test.js.snap b/components/form-old/__tests__/__snapshots__/message.test.js.snap
deleted file mode 100644
index 253e24811..000000000
--- a/components/form-old/__tests__/__snapshots__/message.test.js.snap
+++ /dev/null
@@ -1,27 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Form should display custom message 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-form-item-label"><label for="account" title="Account" class="">Account</label></div>
- <div class="ant-col ant-form-item-control-wrapper">
- <div class="ant-form-item-control has-error"><span class="ant-form-item-children"><input data-__meta="[object Object]" data-__field="[object Object]" id="account" class=""></span>
- <div class="ant-form-explain"><span class="">Account does not exist, <a rel="noopener noreferrer" href="https://www.alipay.com/" target="_blank">Forgot account?</a></span></div>
- </div>
- </div>
- </div>
-</form>
-`;
-
-exports[`Form should display two message 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-form-item-label"><label for="account" title="Account" class="">Account</label></div>
- <div class="ant-col ant-form-item-control-wrapper">
- <div class="ant-form-item-control has-error"><span class="ant-form-item-children"><input data-__meta="[object Object]" data-__field="[object Object]" id="account" class=""></span>
- <div class="ant-form-explain">Error message 1 Error message 2</div>
- </div>
- </div>
- </div>
-</form>
-`;
diff --git a/components/form-old/__tests__/demo.test.js b/components/form-old/__tests__/demo.test.js
deleted file mode 100644
index e5338b89c..000000000
--- a/components/form-old/__tests__/demo.test.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import demoTest from '../../../tests/shared/demoTest';
-
-demoTest('form', { suffix: 'vue', skip: ['index.vue', 'vuex.vue'] });
diff --git a/components/form-old/__tests__/index.test.js b/components/form-old/__tests__/index.test.js
deleted file mode 100644
index 4f3ce113a..000000000
--- a/components/form-old/__tests__/index.test.js
+++ /dev/null
@@ -1,57 +0,0 @@
-import { mount } from '@vue/test-utils';
-import Form from '..';
-import mountTest from '../../../tests/shared/mountTest';
-
-describe('Form', () => {
- mountTest(Form);
- mountTest(Form.Item);
-
- it('Form.Item should support data-*、aria-* and custom attribute', () => {
- const wrapper = mount({
- render() {
- return (
- <Form>
- <Form.Item data-text="123" aria-hidden="true" cccc="bbbb">
- text
- </Form.Item>
- </Form>
- );
- },
- });
- expect(wrapper.html()).toMatchSnapshot();
- });
-
- it('hideRequiredMark', () => {
- const wrapper = mount(Form, {
- props: {
- hideRequiredMark: true,
- },
- });
- expect(wrapper.classes()).toContain('ant-form-hide-required-mark');
- });
-
- describe('wrappedComponentRef', () => {
- it('get component ref', () => {
- const TestForm = {
- data() {
- return {
- __TESTFORM__: true,
- };
- },
- render() {
- return <Form />;
- },
- };
- const Wrapped = Form.create()(TestForm);
- let form;
- mount(Wrapped, {
- props: {
- wrappedComponentRef: node => {
- form = node;
- },
- },
- });
- expect(form._data.__TESTFORM__).toBe(true);
- });
- });
-});
diff --git a/components/form-old/__tests__/label.test.js b/components/form-old/__tests__/label.test.js
deleted file mode 100644
index 797829d9c..000000000
--- a/components/form-old/__tests__/label.test.js
+++ /dev/null
@@ -1,223 +0,0 @@
-import { mount } from '@vue/test-utils';
-import Form from '..';
-import { asyncExpect } from '@/tests/utils';
-
-describe('Form', () => {
- // Mock of `querySelector`
- const originQuerySelector = HTMLElement.prototype.querySelector;
- HTMLElement.prototype.querySelector = function querySelector(str) {
- const match = str.match(/^\[id=('|")(.*)('|")]$/);
- const id = match && match[2];
-
- // Use origin logic
- if (id) {
- const [input] = this.getElementsByTagName('input');
- if (input && input.id === id) {
- return input;
- }
- }
-
- return originQuerySelector.call(this, str);
- };
-
- afterAll(() => {
- HTMLElement.prototype.querySelector = originQuerySelector;
- });
- it('should remove duplicated user input colon', () => {
- const wrapper = mount({
- render() {
- return (
- <Form>
- <Form.Item label="label:">input</Form.Item>
- <Form.Item label="label：">input</Form.Item>
- </Form>
- );
- },
- });
- expect(
- wrapper
- .findAll('.ant-form-item-label label')
- .at(0)
- .text(),
- ).not.toContain(':');
- expect(
- wrapper
- .findAll('.ant-form-item-label label')
- .at(1)
- .text(),
- ).not.toContain('：');
- });
-
- it('should not remove duplicated user input colon when props colon is false', () => {
- const wrapper = mount({
- render() {
- return (
- <Form>
- <Form.Item label="label:" colon={false}>
- input
- </Form.Item>
- <Form.Item label="label：" colon={false}>
- input
- </Form.Item>
- </Form>
- );
- },
- });
- expect(
- wrapper
- .findAll('.ant-form-item-label label')
- .at(0)
- .text(),
- ).toContain(':');
- expect(
- wrapper
- .findAll('.ant-form-item-label label')
- .at(1)
- .text(),
- ).toContain('：');
- });
-
- it('should not remove duplicated user input colon when layout is vertical', () => {
- const wrapper = mount({
- render() {
- return (
- <Form layout="vertical">
- <Form.Item label="label:">input</Form.Item>
- <Form.Item label="label：">input</Form.Item>
- </Form>
- );
- },
- });
- expect(
- wrapper
- .findAll('.ant-form-item-label label')
- .at(0)
- .text(),
- ).toContain(':');
- expect(
- wrapper
- .findAll('.ant-form-item-label label')
- .at(1)
- .text(),
- ).toContain('：');
- });
-
- it('should has dom with .ant-form-item-control-wrapper', () => {
- const formItemLayout = {
- labelCol: { span: 6 },
- wrapperCol: { span: 14 },
- };
- const wrapper = mount({
- render() {
- return (
- <Form>
- <Form.Item {...{ props: { ...formItemLayout } }}>input</Form.Item>
- <Form.Item>input</Form.Item>
- </Form>
- );
- },
- });
- expect(wrapper.findAll('.ant-form-item-control-wrapper').length).toBe(2);
- expect(wrapper.findAll('.ant-form-item-control-wrapper.ant-col-14').length).toBe(1);
- });
-
- // https://github.com/ant-design/ant-design/issues/7351
- it('focus correct input when click label', async () => {
- const Form1 = Form.create()({
- render() {
- return (
- <Form>
- <Form.Item label="label 1">{this.form.getFieldDecorator('test')(<input />)}</Form.Item>
- </Form>
- );
- },
- });
- const Form2 = Form.create()({
- render() {
- return (
- <Form>
- <Form.Item label="label 2">{this.form.getFieldDecorator('test2')(<input />)}</Form.Item>
- </Form>
- );
- },
- });
-
- const wrapper = mount(
- {
- render() {
- return (
- <div>
- <Form1 />
- <Form2 />
- </div>
- );
- },
- },
- { sync: false },
- );
- await asyncExpect(() => {
- wrapper
- .findAll({ name: 'AForm' })
- .at(0)
- .findAll('label')
- .at(0)
- .trigger('click');
- });
- await asyncExpect(() => {
- expect(
- wrapper
- .findAll({ name: 'AForm' })
- .at(0)
- .findAll('input')
- .at(0).element,
- ).toBe(document.activeElement);
- });
- await asyncExpect(() => {
- wrapper
- .findAll({ name: 'AForm' })
- .at(1)
- .findAll('label')
- .at(0)
- .trigger('click');
- });
- await asyncExpect(() => {
- expect(
- wrapper
- .findAll({ name: 'AForm' })
- .at(1)
- .findAll('input')
- .at(0).element,
- ).toBe(document.activeElement);
- });
- });
-
- // https://github.com/ant-design/ant-design/issues/7693
- it('should not throw error when is not a valid id', async () => {
- const Form1 = Form.create()({
- render() {
- return (
- <Form>
- <Form.Item label="label 1">
- {this.form.getFieldDecorator('member[0].name.firstname')(<input />)}
- </Form.Item>
- </Form>
- );
- },
- });
-
- const wrapper = mount(Form1, { sync: false, attachTo: 'body' });
- await asyncExpect(() => {
- expect(() => {
- wrapper
- .find({ name: 'AForm' })
- .findAll('label')
- .at(0)
- .trigger('click');
- }).not.toThrow();
- });
- // 不合法id时，document.activeElement没有正确更新
- // await asyncExpect(() => {
- // expect(wrapper.find({ name: 'AForm' }).findAll('input').at(0).element).toBe(document.activeElement)
- // }, 0)
- });
-});
diff --git a/components/form-old/__tests__/message.test.js b/components/form-old/__tests__/message.test.js
deleted file mode 100644
index da7f34e52..000000000
--- a/components/form-old/__tests__/message.test.js
+++ /dev/null
@@ -1,78 +0,0 @@
-import { mount } from '@vue/test-utils';
-import { asyncExpect } from '@/tests/utils';
-import Form from '..';
-
-describe('Form', () => {
- it('should display two message', async () => {
- const rules = [
- {
- pattern: /^\w+$/,
- message: 'Error message 1',
- },
- {
- pattern: /^\w+$/,
- message: 'Error message 2',
- },
- ];
- let myForm;
- const Form1 = Form.create()({
- render() {
- myForm = this.form;
- return (
- <Form>
- <Form.Item label="Account">
- {this.form.getFieldDecorator('account', { initialValue: '+=-/', rules })(<input />)}
- </Form.Item>
- </Form>
- );
- },
- });
-
- const wrapper = mount(Form1, {
- sync: false,
- });
- await asyncExpect(() => {
- myForm.validateFields();
- });
-
- wrapper.vm.$forceUpdate();
- expect(wrapper.html()).toMatchSnapshot();
- });
-
- it('should display custom message', () => {
- let myForm;
- const Form1 = Form.create()({
- created() {
- myForm = this.form;
- },
- render() {
- const rules = [
- {
- pattern: /^$/,
- message: (
- <span>
- Account does not exist,{' '}
- <a rel="noopener noreferrer" href="https://www.alipay.com/" target="_blank">
- Forgot account?
- </a>
- </span>
- ),
- },
- ];
- return (
- <Form>
- <Form.Item label="Account">
- {this.form.getFieldDecorator('account', { initialValue: 'antd', rules })(<input />)}
- </Form.Item>
- </Form>
- );
- },
- });
-
- const wrapper = mount(Form1);
- myForm.validateFields();
-
- wrapper.vm.$forceUpdate();
- expect(wrapper.html()).toMatchSnapshot();
- });
-});
diff --git a/components/form-old/constants.jsx b/components/form-old/constants.jsx
deleted file mode 100644
index bff641291..000000000
--- a/components/form-old/constants.jsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export const FIELD_META_PROP = 'data-__meta';
-export const FIELD_DATA_PROP = 'data-__field';
diff --git a/components/form-old/index.jsx b/components/form-old/index.jsx
deleted file mode 100644
index b5c0b1602..000000000
--- a/components/form-old/index.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-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;
diff --git a/components/form-old/style/index.js b/components/form-old/style/index.js
deleted file mode 100644
index 30c84ff81..000000000
--- a/components/form-old/style/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import '../../style/index.less';
-import './index.less';
-
-// style dependencies
-import '../../grid/style';
diff --git a/components/form-old/style/index.less b/components/form-old/style/index.less
deleted file mode 100644
index 1967010e3..000000000
--- a/components/form-old/style/index.less
+++ /dev/null
@@ -1,653 +0,0 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-@import '../../input/style/mixin';
-@import '../../button/style/mixin';
-@import '../../grid/style/mixin';
-@import './mixin';
-
-@form-prefix-cls: ~'@{ant-prefix}-form';
-@form-component-height: @input-height-base;
-@form-component-max-height: @input-height-lg;
-@form-feedback-icon-size: @font-size-base;
-@form-help-margin-top: (@form-component-height - @form-component-max-height) / 2 + 2px;
-@form-explain-font-size: @font-size-base;
-// Extends additional 1px to fix precision issue.
-// https://github.com/ant-design/ant-design/issues/12803
-// https://github.com/ant-design/ant-design/issues/8220
-@form-explain-precision: 1px;
-@form-explain-height: floor(@form-explain-font-size * @line-height-base);
-
-.@{form-prefix-cls} {
- .reset-component;
- .reset-form;
-}
-
-.@{form-prefix-cls}-item-required::before {
- display: inline-block;
- margin-right: 4px;
- color: @label-required-color;
- font-size: @font-size-base;
- font-family: SimSun, sans-serif;
- line-height: 1;
- content: '*';
- .@{form-prefix-cls}-hide-required-mark & {
- display: none;
- }
-}
-
-.@{form-prefix-cls}-item-label > label {
- color: @label-color;
-
- &::after {
- & when (@form-item-trailing-colon=true) {
- content: ':';
- }
- & when not (@form-item-trailing-colon=true) {
- content: ' ';
- }
-
- position: relative;
- top: -0.5px;
- margin: 0 @form-item-label-colon-margin-right 0 @form-item-label-colon-margin-left;
- }
-
- &.@{form-prefix-cls}-item-no-colon::after {
- content: ' ';
- }
-}
-
-// Form items
-// You should wrap labels and controls in .@{form-prefix-cls}-item for optimum spacing
-.@{form-prefix-cls}-item {
- label {
- position: relative;
-
- > .@{iconfont-css-prefix} {
- font-size: @font-size-base;
- vertical-align: top;
- }
- }
-
- .reset-component;
-
- margin-bottom: @form-item-margin-bottom;
- vertical-align: top;
-
- &-control {
- position: relative;
- line-height: @form-component-max-height;
- .clearfix;
- }
-
- &-children {
- position: relative;
- }
-
- &-with-help {
- margin-bottom: max(0, @form-item-margin-bottom - @form-explain-height - @form-help-margin-top);
- }
-
- &-label {
- display: inline-block;
- overflow: hidden;
- line-height: @form-component-max-height - 0.0001px;
- white-space: nowrap;
- text-align: right;
- vertical-align: middle;
-
- &-left {
- text-align: left;
- }
- }
-
- .@{ant-prefix}-switch {
- margin: 2px 0 4px;
- }
-}
-
-.@{form-prefix-cls}-explain,
-.@{form-prefix-cls}-extra {
- clear: both;
- min-height: @form-explain-height + @form-explain-precision;
- margin-top: @form-help-margin-top;
- color: @text-color-secondary;
- font-size: @form-explain-font-size;
- line-height: @line-height-base;
- transition: color 0.3s @ease-out; // sync input color transition
-}
-
-.@{form-prefix-cls}-explain {
- margin-bottom: -@form-explain-precision;
-}
-
-.@{form-prefix-cls}-extra {
- padding-top: 4px;
-}
-
-.@{form-prefix-cls}-text {
- display: inline-block;
- padding-right: 8px;
-}
-
-.@{form-prefix-cls}-split {
- display: block;
- text-align: center;
-}
-
-form {
- .has-feedback {
- .@{ant-prefix}-input {
- padding-right: @input-padding-horizontal-base + @input-affix-width;
- }
-
- // https://github.com/ant-design/ant-design/issues/19884
- .@{ant-prefix}-input-affix-wrapper {
- .@{ant-prefix}-input-suffix {
- padding-right: 18px;
- }
- .@{ant-prefix}-input {
- padding-right: @input-padding-horizontal-base + @input-affix-width * 2;
- }
- &.@{ant-prefix}-input-affix-wrapper-input-with-clear-btn {
- .@{ant-prefix}-input {
- padding-right: @input-padding-horizontal-base + @input-affix-width * 3;
- }
- }
- }
-
- // Fix overlapping between feedback icon and <Select>'s arrow.
- // https://github.com/ant-design/ant-design/issues/4431
- > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
- > .@{ant-prefix}-select .@{ant-prefix}-select-selection__clear,
- :not(.@{ant-prefix}-input-group-addon) > .@{ant-prefix}-select .@{ant-prefix}-select-arrow,
- :not(.@{ant-prefix}-input-group-addon)
- > .@{ant-prefix}-select
- .@{ant-prefix}-select-selection__clear {
- right: (@form-component-height / 2) + @form-feedback-icon-size - 2px;
- }
- > .@{ant-prefix}-select .@{ant-prefix}-select-selection-selected-value,
- :not(.@{ant-prefix}-input-group-addon)
- > .@{ant-prefix}-select
- .@{ant-prefix}-select-selection-selected-value {
- padding-right: 42px;
- }
-
- .@{ant-prefix}-cascader-picker {
- &-arrow {
- margin-right: (@form-component-height / 2) + @form-feedback-icon-size - 13px;
- }
- &-clear {
- right: (@form-component-height / 2) + @form-feedback-icon-size - 2px;
- }
- }
-
- // Fix issue: https://github.com/ant-design/ant-design/issues/7854
- .@{ant-prefix}-input-search:not(.@{ant-prefix}-input-search-enter-button) {
- .@{ant-prefix}-input-suffix {
- right: (@form-component-height / 2) + @form-feedback-icon-size - 2px;
- }
- }
-
- // Fix issue: https://github.com/ant-design/ant-design/issues/4783
- .@{ant-prefix}-calendar-picker,
- .@{ant-prefix}-time-picker {
- &-icon,
- &-clear {
- right: (@form-component-height / 2) + @form-feedback-icon-size - 2px;
- }
- }
- }
-
- .@{ant-prefix}-mentions,
- textarea.@{ant-prefix}-input {
- height: auto;
- margin-bottom: 4px;
- }
-
- // input[type=file]
- .@{ant-prefix}-upload {
- background: transparent;
- }
-
- input[type='radio'],
- input[type='checkbox'] {
- width: 14px;
- height: 14px;
- }
-
- // Radios and checkboxes on same line
- .@{ant-prefix}-radio-inline,
- .@{ant-prefix}-checkbox-inline {
- display: inline-block;
- margin-left: 8px;
- font-weight: normal;
- vertical-align: middle;
- cursor: pointer;
-
- &:first-child {
- margin-left: 0;
- }
- }
-
- .@{ant-prefix}-checkbox-vertical,
- .@{ant-prefix}-radio-vertical {
- display: block;
- }
-
- .@{ant-prefix}-checkbox-vertical + .@{ant-prefix}-checkbox-vertical,
- .@{ant-prefix}-radio-vertical + .@{ant-prefix}-radio-vertical {
- margin-left: 0;
- }
-
- .@{ant-prefix}-input-number {
- + .@{form-prefix-cls}-text {
- margin-left: 8px;
- }
- &-handler-wrap {
- z-index: 2; // https://github.com/ant-design/ant-design/issues/6289
- }
- }
-
- .@{ant-prefix}-select,
- .@{ant-prefix}-cascader-picker {
- width: 100%;
- }
-
- // Don't impact select inside input group
- .@{ant-prefix}-input-group .@{ant-prefix}-select,
- .@{ant-prefix}-input-group .@{ant-prefix}-cascader-picker {
- width: auto;
- }
-
- // fix input with addon position. https://github.com/ant-design/ant-design/issues/8243
- :not(.@{ant-prefix}-input-group-wrapper) > .@{ant-prefix}-input-group,
- .@{ant-prefix}-input-group-wrapper {
- display: inline-block;
- vertical-align: middle;
- }
-
- // https://github.com/ant-design/ant-design/issues/20616
- &:not(.@{form-prefix-cls}-vertical) {
- :not(.@{ant-prefix}-input-group-wrapper) > .@{ant-prefix}-input-group,
- .@{ant-prefix}-input-group-wrapper {
- position: relative;
- top: -1px;
- }
- }
-}
-
-// Form layout
-//== Vertical Form
-.make-vertical-layout-label() {
- display: block;
- margin: @form-vertical-label-margin;
- padding: @form-vertical-label-padding;
- line-height: @line-height-base;
- white-space: initial;
- text-align: left;
-
- label::after {
- display: none;
- }
-}
-
-.make-vertical-layout() {
- .@{form-prefix-cls}-item-label,
- .@{form-prefix-cls}-item-control-wrapper {
- display: block;
- width: 100%;
- }
- .@{form-prefix-cls}-item-label {
- .make-vertical-layout-label();
- }
-}
-
-.@{form-prefix-cls}-vertical .@{form-prefix-cls}-item-label,
- // when labelCol is 24, it is a vertical form
-.@{ant-prefix}-col-24.@{form-prefix-cls}-item-label,
-.@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label {
- .make-vertical-layout-label();
-}
-
-.@{form-prefix-cls}-vertical {
- .@{form-prefix-cls}-item {
- padding-bottom: 8px;
- }
- .@{form-prefix-cls}-item-control {
- line-height: @line-height-base;
- }
- .@{form-prefix-cls}-explain {
- margin-top: 2px;
- margin-bottom: -4px - @form-explain-precision;
- }
- .@{form-prefix-cls}-extra {
- margin-top: 2px;
- margin-bottom: -4px;
- }
-}
-
-@media (max-width: @screen-xs-max) {
- .make-vertical-layout();
- .@{ant-prefix}-col-xs-24.@{form-prefix-cls}-item-label {
- .make-vertical-layout-label();
- }
-}
-
-@media (max-width: @screen-sm-max) {
- .@{ant-prefix}-col-sm-24.@{form-prefix-cls}-item-label {
- .make-vertical-layout-label();
- }
-}
-
-@media (max-width: @screen-md-max) {
- .@{ant-prefix}-col-md-24.@{form-prefix-cls}-item-label {
- .make-vertical-layout-label();
- }
-}
-
-@media (max-width: @screen-lg-max) {
- .@{ant-prefix}-col-lg-24.@{form-prefix-cls}-item-label {
- .make-vertical-layout-label();
- }
-}
-
-@media (max-width: @screen-xl-max) {
- .@{ant-prefix}-col-xl-24.@{form-prefix-cls}-item-label {
- .make-vertical-layout-label();
- }
-}
-
-//== Inline Form
-.@{form-prefix-cls}-inline {
- .@{form-prefix-cls}-item {
- display: inline-block;
- margin-right: 16px;
- margin-bottom: 0;
-
- &-with-help {
- margin-bottom: @form-item-margin-bottom;
- }
-
- > .@{form-prefix-cls}-item-control-wrapper,
- > .@{form-prefix-cls}-item-label {
- display: inline-block;
- vertical-align: top;
- }
- }
-
- .@{form-prefix-cls}-text {
- display: inline-block;
- }
-
- .has-feedback {
- display: inline-block;
- }
-}
-
-// Validation state
-.has-success,
-.has-warning,
-.has-error,
-.is-validating {
- &.has-feedback .@{form-prefix-cls}-item-children-icon {
- position: absolute;
- top: 50%;
- right: 0;
- z-index: 1;
- width: @form-component-height;
- height: 20px;
- margin-top: -10px;
- font-size: @form-feedback-icon-size;
- line-height: 20px;
- text-align: center;
- visibility: visible;
- animation: zoomIn 0.3s @ease-out-back;
- pointer-events: none;
-
- & svg {
- position: absolute;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- margin: auto;
- }
- }
-}
-
-.has-success {
- &.has-feedback .@{form-prefix-cls}-item-children-icon {
- color: @success-color;
- animation-name: diffZoomIn1 !important;
- }
-}
-
-.has-warning {
- .form-control-validation(@warning-color; @warning-color; @form-warning-input-bg;);
-
- &.has-feedback .@{form-prefix-cls}-item-children-icon {
- color: @warning-color;
- animation-name: diffZoomIn3 !important;
- }
-
- //select
- .@{ant-prefix}-select {
- &-selection {
- border-color: @warning-color;
- &:hover {
- border-color: @warning-color;
- }
- }
- &-open .@{ant-prefix}-select-selection,
- &-focused .@{ant-prefix}-select-selection {
- .active(@warning-color);
- }
- }
-
- // arrow and icon
- .@{ant-prefix}-calendar-picker-icon::after,
- .@{ant-prefix}-time-picker-icon::after,
- .@{ant-prefix}-picker-icon::after,
- .@{ant-prefix}-select-arrow,
- .@{ant-prefix}-cascader-picker-arrow {
- color: @warning-color;
- }
-
- //input-number, timepicker
- .@{ant-prefix}-input-number,
- .@{ant-prefix}-time-picker-input {
- border-color: @warning-color;
- &-focused,
- &:focus {
- .active(@warning-color);
- }
- &:not([disabled]):hover {
- border-color: @warning-color;
- }
- }
-
- .@{ant-prefix}-cascader-picker {
- &:focus .@{ant-prefix}-cascader-input {
- .active(@warning-color);
- }
- &:hover .@{ant-prefix}-cascader-input {
- border-color: @warning-color;
- }
- }
-}
-
-.has-error {
- .form-control-validation(@error-color; @error-color; @form-error-input-bg;);
-
- &.has-feedback .@{form-prefix-cls}-item-children-icon {
- color: @error-color;
- animation-name: diffZoomIn2 !important;
- }
-
- //select
- .@{ant-prefix}-select {
- &-selection {
- border-color: @error-color;
- &:hover {
- border-color: @error-color;
- }
- }
- &-open .@{ant-prefix}-select-selection,
- &-focused .@{ant-prefix}-select-selection {
- .active(@error-color);
- }
- }
-
- .@{ant-prefix}-select.@{ant-prefix}-select-auto-complete {
- .@{ant-prefix}-input:focus {
- border-color: @error-color;
- }
- }
-
- .@{ant-prefix}-input-group-addon .@{ant-prefix}-select {
- &-selection {
- border-color: transparent;
- box-shadow: none;
- }
- }
-
- // arrow and icon
- .@{ant-prefix}-calendar-picker-icon::after,
- .@{ant-prefix}-time-picker-icon::after,
- .@{ant-prefix}-picker-icon::after,
- .@{ant-prefix}-select-arrow,
- .@{ant-prefix}-cascader-picker-arrow {
- color: @error-color;
- }
-
- //input-number, timepicker
- .@{ant-prefix}-input-number,
- .@{ant-prefix}-time-picker-input {
- border-color: @error-color;
- &-focused,
- &:focus {
- .active(@error-color);
- }
- &:not([disabled]):hover {
- border-color: @error-color;
- }
- }
- .@{ant-prefix}-mention-wrapper {
- .@{ant-prefix}-mention-editor {
- &,
- &:not([disabled]):hover {
- border-color: @error-color;
- }
- }
- &.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor,
- .@{ant-prefix}-mention-editor:not([disabled]):focus {
- .active(@error-color);
- }
- }
-
- .@{ant-prefix}-cascader-picker {
- &:focus .@{ant-prefix}-cascader-input {
- .active(@error-color);
- }
- &:hover .@{ant-prefix}-cascader-input {
- border-color: @error-color;
- }
- }
-
- // transfer
- .@{ant-prefix}-transfer {
- &-list {
- border-color: @error-color;
-
- &-search:not([disabled]) {
- border-color: @input-border-color;
-
- &:hover {
- .hover();
- }
-
- &:focus {
- .active();
- }
- }
- }
- }
-}
-
-.is-validating {
- &.has-feedback .@{form-prefix-cls}-item-children-icon {
- display: inline-block;
- color: @primary-color;
- }
-}
-
-.@{ant-prefix}-advanced-search-form {
- .@{form-prefix-cls}-item {
- margin-bottom: @form-item-margin-bottom;
-
- &-with-help {
- margin-bottom: @form-item-margin-bottom - @form-explain-height - @form-help-margin-top;
- }
- }
-}
-
-.show-help-motion(@className, @keyframeName, @duration: @animation-duration-slow) {
- .make-motion(@className, @keyframeName, @duration);
- .@{className}-enter,
- .@{className}-appear {
- opacity: 0;
- animation-timing-function: @ease-in-out;
- }
- .@{className}-leave {
- animation-timing-function: @ease-in-out;
- }
-}
-
-.show-help-motion(show-help, antShowHelp, 0.3s);
-
-@keyframes antShowHelpIn {
- 0% {
- transform: translateY(-5px);
- opacity: 0;
- }
- 100% {
- transform: translateY(0);
- opacity: 1;
- }
-}
-
-@keyframes antShowHelpOut {
- to {
- transform: translateY(-5px);
- opacity: 0;
- }
-}
-
-// need there different zoom animation
-// otherwise won't trigger anim
-@keyframes diffZoomIn1 {
- 0% {
- transform: scale(0);
- }
- 100% {
- transform: scale(1);
- }
-}
-
-@keyframes diffZoomIn2 {
- 0% {
- transform: scale(0);
- }
- 100% {
- transform: scale(1);
- }
-}
-
-@keyframes diffZoomIn3 {
- 0% {
- transform: scale(0);
- }
- 100% {
- transform: scale(1);
- }
-}
diff --git a/components/form-old/style/mixin.less b/components/form-old/style/mixin.less
deleted file mode 100644
index 34fc912ee..000000000
--- a/components/form-old/style/mixin.less
+++ /dev/null
@@ -1,126 +0,0 @@
-@import '../../input/style/mixin';
-
-.form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) {
- .@{ant-prefix}-form-explain,
- .@{ant-prefix}-form-split {
- color: @text-color;
- }
- // 输入框的不同校验状态
- .@{ant-prefix}-input {
- &,
- &:hover {
- background-color: @background-color;
- border-color: @border-color;
- }
-
- &:focus {
- .active(@border-color);
- }
-
- &:not([disabled]):hover {
- border-color: @border-color;
- }
- }
-
- .@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input {
- .active(@border-color);
- }
-
- // Input prefix
- .@{ant-prefix}-input-affix-wrapper {
- .@{ant-prefix}-input {
- &,
- &:hover {
- background-color: @background-color;
- border-color: @border-color;
- }
-
- &:focus {
- .active(@border-color);
- }
- }
-
- &:hover .@{ant-prefix}-input:not(.@{ant-prefix}-input-disabled) {
- border-color: @border-color;
- }
- }
-
- .@{ant-prefix}-input-prefix {
- color: @text-color;
- }
-
- .@{ant-prefix}-input-group-addon {
- color: @text-color;
- background-color: @background-color;
- border-color: @border-color;
- }
-
- .has-feedback {
- color: @text-color;
- }
-}
-
-// Reset form styles
-// -----------------------------
-// Based on Bootstrap framework
-.reset-form() {
- legend {
- display: block;
- width: 100%;
- margin-bottom: 20px;
- padding: 0;
- color: @text-color-secondary;
- font-size: @font-size-lg;
- line-height: inherit;
- border: 0;
- border-bottom: @border-width-base @border-style-base @border-color-base;
- }
-
- label {
- font-size: @font-size-base;
- }
-
- input[type='search'] {
- box-sizing: border-box;
- }
-
- // Position radios and checkboxes better
- input[type='radio'],
- input[type='checkbox'] {
- line-height: normal;
- }
-
- input[type='file'] {
- display: block;
- }
-
- // Make range inputs behave like textual form controls
- input[type='range'] {
- display: block;
- width: 100%;
- }
-
- // Make multiple select elements height not fixed
- select[multiple],
- select[size] {
- height: auto;
- }
-
- // Focus for file, radio, and checkbox
- input[type='file']:focus,
- input[type='radio']:focus,
- input[type='checkbox']:focus {
- outline: thin dotted;
- outline: 5px auto -webkit-focus-ring-color;
- outline-offset: -2px;
- }
-
- // Adjust output element
- output {
- display: block;
- padding-top: 15px;
- color: @input-color;
- font-size: @font-size-base;
- line-height: @line-height-base;
- }
-}
diff --git a/components/vc-form/index.js b/components/vc-form/index.js
deleted file mode 100644
index 3f4db0e6f..000000000
--- a/components/vc-form/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-// based on rc-form 2.4.8
-import { createForm, createFormField } from './src/';
-export { createForm, createFormField };
diff --git a/components/vc-form/src/createBaseForm.jsx b/components/vc-form/src/createBaseForm.jsx
deleted file mode 100644
index b150ea83d..000000000
--- a/components/vc-form/src/createBaseForm.jsx
+++ /dev/null
@@ -1,765 +0,0 @@
-import AsyncValidator from 'async-validator';
-import warning from 'warning';
-import get from 'lodash/get';
-import set from 'lodash/set';
-import eq from 'lodash/eq';
-import omit from 'lodash/omit';
-import createFieldsStore from './createFieldsStore';
-import { cloneElement } from '../../_util/vnode';
-import BaseMixin from '../../_util/BaseMixin';
-import {
- getOptionProps,
- getEvents,
- slotHasProp,
- getComponentName,
- getListeners,
-} from '../../_util/props-util';
-import PropTypes from '../../_util/vue-types';
-
-import {
- argumentContainer,
- identity,
- normalizeValidateRules,
- getValidateTriggers,
- getValueFromEvent,
- hasRules,
- getParams,
- isEmptyObject,
- flattenArray,
-} from './utils';
-
-const DEFAULT_TRIGGER = 'change';
-
-function createBaseForm(option = {}, mixins = []) {
- const {
- validateMessages,
- onFieldsChange,
- onValuesChange,
- mapProps = identity,
- mapPropsToFields,
- fieldNameProp,
- fieldMetaProp,
- fieldDataProp,
- formPropName = 'form',
- name: formName,
- props = {},
- templateContext,
- } = option;
- return function decorate(WrappedComponent) {
- let formProps = {};
- if (Array.isArray(props)) {
- props.forEach(prop => {
- formProps[prop] = PropTypes.any;
- });
- } else {
- formProps = props;
- }
- const Form = {
- mixins: [BaseMixin, ...mixins],
- props: {
- ...formProps,
- wrappedComponentRef: PropTypes.func.def(() => {}),
- },
- data() {
- const fields = mapPropsToFields && mapPropsToFields(this.$props);
- this.fieldsStore = createFieldsStore(fields || {});
- this.templateContext = templateContext;
- this.instances = {};
- this.cachedBind = {};
- this.clearedFieldMetaCache = {};
- this.formItems = {};
- this.renderFields = {};
- this.domFields = {};
-
- // HACK: https://github.com/ant-design/ant-design/issues/6406
- [
- 'getFieldsValue',
- 'getFieldValue',
- 'setFieldsInitialValue',
- 'getFieldsError',
- 'getFieldError',
- 'isFieldValidating',
- 'isFieldsValidating',
- 'isFieldsTouched',
- 'isFieldTouched',
- ].forEach(key => {
- this[key] = (...args) => {
- return this.fieldsStore[key](...args);
- };
- });
-
- return {
- submitting: false,
- };
- },
- watch: templateContext
- ? {}
- : {
- $props: {
- handler(nextProps) {
- if (mapPropsToFields) {
- this.fieldsStore.updateFields(mapPropsToFields(nextProps));
- }
- },
- deep: true,
- },
- },
- mounted() {
- this.cleanUpUselessFields();
- },
- updated() {
- // form updated add for template v-decorator
- this.cleanUpUselessFields();
- },
- methods: {
- updateFields(fields = {}) {
- this.fieldsStore.updateFields(mapPropsToFields(fields));
- if (templateContext) {
- templateContext.$forceUpdate();
- }
- },
- onCollectCommon(name, action, args) {
- const fieldMeta = this.fieldsStore.getFieldMeta(name);
- if (fieldMeta[action]) {
- fieldMeta[action](...args);
- } else if (fieldMeta.originalProps && fieldMeta.originalProps[action]) {
- fieldMeta.originalProps[action](...args);
- }
- const value = fieldMeta.getValueFromEvent
- ? fieldMeta.getValueFromEvent(...args)
- : getValueFromEvent(...args);
- if (onValuesChange && value !== this.fieldsStore.getFieldValue(name)) {
- const valuesAll = this.fieldsStore.getAllValues();
- const valuesAllSet = {};
- valuesAll[name] = value;
- Object.keys(valuesAll).forEach(key => set(valuesAllSet, key, valuesAll[key]));
- onValuesChange(
- {
- [formPropName]: this.getForm(),
- ...this.$props,
- },
- set({}, name, value),
- valuesAllSet,
- );
- }
- const field = this.fieldsStore.getField(name);
- return { name, field: { ...field, value, touched: true }, fieldMeta };
- },
-
- onCollect(name_, action, ...args) {
- const { name, field, fieldMeta } = this.onCollectCommon(name_, action, args);
- const { validate } = fieldMeta;
- this.fieldsStore.setFieldsAsDirty();
- const newField = {
- ...field,
- dirty: hasRules(validate),
- };
- this.setFields({
- [name]: newField,
- });
- },
-
- onCollectValidate(name_, action, ...args) {
- const { field, fieldMeta } = this.onCollectCommon(name_, action, args);
- const newField = {
- ...field,
- dirty: true,
- };
- this.fieldsStore.setFieldsAsDirty();
- this.validateFieldsInternal([newField], {
- action,
- options: {
- firstFields: !!fieldMeta.validateFirst,
- },
- });
- },
-
- getCacheBind(name, action, fn) {
- if (!this.cachedBind[name]) {
- this.cachedBind[name] = {};
- }
- const cache = this.cachedBind[name];
- if (!cache[action] || cache[action].oriFn !== fn) {
- cache[action] = {
- fn: fn.bind(this, name, action),
- oriFn: fn,
- };
- }
- return cache[action].fn;
- },
-
- getFieldDecorator(name, fieldOption, formItem) {
- const { props, ...restProps } = this.getFieldProps(name, fieldOption);
- this.formItems[name] = formItem;
- return fieldElem => {
- // We should put field in record if it is rendered
- this.renderFields[name] = true;
-
- const fieldMeta = this.fieldsStore.getFieldMeta(name);
- const originalProps = getOptionProps(fieldElem);
- const originalEvents = getEvents(fieldElem);
- if (process.env.NODE_ENV !== 'production') {
- const valuePropName = fieldMeta.valuePropName;
- warning(
- !slotHasProp(fieldElem, valuePropName),
- `\`getFieldDecorator\` will override \`${valuePropName}\`, ` +
- `so please don't set \`${valuePropName} and v-model\` directly ` +
- `and use \`setFieldsValue\` to set it.`,
- );
- warning(
- !(
- !slotHasProp(fieldElem, valuePropName) &&
- valuePropName in originalProps &&
- !(fieldOption && 'initialValue' in fieldOption)
- ),
- `${getComponentName(
- fieldElem.componentOptions,
- )} \`default value\` can not collect, ` +
- ` please use \`option.initialValue\` to set default value.`,
- );
- const defaultValuePropName = `default${valuePropName[0].toUpperCase()}${valuePropName.slice(
- 1,
- )}`;
- warning(
- !slotHasProp(fieldElem, defaultValuePropName),
- `\`${defaultValuePropName}\` is invalid ` +
- `for \`getFieldDecorator\` will set \`${valuePropName}\`,` +
- ` please use \`option.initialValue\` instead.`,
- );
- }
- fieldMeta.originalProps = originalProps;
- // fieldMeta.ref = fieldElem.data && fieldElem.data.ref
- const newProps = {
- props: {
- ...props,
- ...this.fieldsStore.getFieldValuePropValue(fieldMeta),
- },
- ...restProps,
- };
- newProps.domProps.value = newProps.props.value;
- const newEvents = {};
- Object.keys(newProps.on).forEach(key => {
- if (originalEvents[key]) {
- const triggerEvents = newProps.on[key];
- newEvents[key] = (...args) => {
- originalEvents[key](...args);
- triggerEvents(...args);
- };
- } else {
- newEvents[key] = newProps.on[key];
- }
- });
- return cloneElement(fieldElem, { ...newProps, on: newEvents });
- };
- },
-
- getFieldProps(name, usersFieldOption = {}) {
- if (!name) {
- throw new Error('Must call `getFieldProps` with valid name string!');
- }
- if (process.env.NODE_ENV !== 'production') {
- warning(
- this.fieldsStore.isValidNestedFieldName(name),
- `One field name cannot be part of another, e.g. \`a\` and \`a.b\`. Check field: ${name}`,
- );
- warning(
- !('exclusive' in usersFieldOption),
- '`option.exclusive` of `getFieldProps`|`getFieldDecorator` had been remove.',
- );
- }
-
- delete this.clearedFieldMetaCache[name];
-
- const fieldOption = {
- name,
- trigger: DEFAULT_TRIGGER,
- valuePropName: 'value',
- validate: [],
- ...usersFieldOption,
- };
-
- const { rules, trigger, validateTrigger = trigger, validate } = fieldOption;
-
- const fieldMeta = this.fieldsStore.getFieldMeta(name);
- if ('initialValue' in fieldOption) {
- fieldMeta.initialValue = fieldOption.initialValue;
- }
-
- const inputProps = {
- ...this.fieldsStore.getFieldValuePropValue(fieldOption),
- // ref: name,
- };
- const inputListeners = {};
- const inputAttrs = {};
- if (fieldNameProp) {
- inputProps[fieldNameProp] = formName ? `${formName}_${name}` : name;
- }
-
- const validateRules = normalizeValidateRules(validate, rules, validateTrigger);
- const validateTriggers = getValidateTriggers(validateRules);
- validateTriggers.forEach(action => {
- if (inputListeners[action]) return;
- inputListeners[action] = this.getCacheBind(name, action, this.onCollectValidate);
- });
-
- // make sure that the value will be collect
- if (trigger && validateTriggers.indexOf(trigger) === -1) {
- inputListeners[trigger] = this.getCacheBind(name, trigger, this.onCollect);
- }
-
- const meta = {
- ...fieldMeta,
- ...fieldOption,
- validate: validateRules,
- };
- this.fieldsStore.setFieldMeta(name, meta);
- if (fieldMetaProp) {
- inputAttrs[fieldMetaProp] = meta;
- }
-
- if (fieldDataProp) {
- inputAttrs[fieldDataProp] = this.fieldsStore.getField(name);
- }
- // This field is rendered, record it
- this.renderFields[name] = true;
- return {
- props: omit(inputProps, ['id']),
- // id: inputProps.id,
- domProps: {
- value: inputProps.value,
- },
- attrs: {
- ...inputAttrs,
- id: inputProps.id,
- },
- directives: [
- {
- name: 'ant-ref',
- value: this.getCacheBind(name, `${name}__ref`, this.saveRef),
- },
- ],
- on: inputListeners,
- };
- },
-
- getFieldInstance(name) {
- return this.instances[name];
- },
-
- getRules(fieldMeta, action) {
- const actionRules = fieldMeta.validate
- .filter(item => {
- return !action || item.trigger.indexOf(action) >= 0;
- })
- .map(item => item.rules);
- return flattenArray(actionRules);
- },
-
- setFields(maybeNestedFields, callback) {
- const fields = this.fieldsStore.flattenRegisteredFields(maybeNestedFields);
- this.fieldsStore.setFields(fields);
- const changedFields = Object.keys(fields).reduce(
- (acc, name) => set(acc, name, this.fieldsStore.getField(name)),
- {},
- );
- if (onFieldsChange) {
- const changedFields = Object.keys(fields).reduce(
- (acc, name) => set(acc, name, this.fieldsStore.getField(name)),
- {},
- );
- onFieldsChange(this, changedFields, this.fieldsStore.getNestedAllFields());
- }
- const formContext = templateContext || this;
- let allUpdate = false;
- Object.keys(changedFields).forEach(key => {
- let formItem = this.formItems[key];
- formItem = typeof formItem === 'function' ? formItem() : formItem;
- if (formItem && formItem.itemSelfUpdate) {
- formItem.$forceUpdate();
- } else {
- allUpdate = true;
- }
- });
- if (allUpdate) {
- formContext.$forceUpdate();
- }
- this.$nextTick(() => {
- callback && callback();
- });
- },
-
- setFieldsValue(changedValues, callback) {
- const { fieldsMeta } = this.fieldsStore;
- const values = this.fieldsStore.flattenRegisteredFields(changedValues);
- const newFields = Object.keys(values).reduce((acc, name) => {
- const isRegistered = fieldsMeta[name];
- if (process.env.NODE_ENV !== 'production') {
- warning(
- isRegistered,
- 'Cannot use `setFieldsValue` until ' +
- 'you use `getFieldDecorator` or `getFieldProps` to register it.',
- );
- }
- if (isRegistered) {
- const value = values[name];
- acc[name] = {
- value,
- };
- }
- return acc;
- }, {});
- this.setFields(newFields, callback);
- if (onValuesChange) {
- const allValues = this.fieldsStore.getAllValues();
- onValuesChange(
- {
- [formPropName]: this.getForm(),
- ...this.$props,
- },
- changedValues,
- allValues,
- );
- }
- },
-
- saveRef(name, _, component) {
- if (!component) {
- const fieldMeta = this.fieldsStore.getFieldMeta(name);
- if (!fieldMeta.preserve) {
- // after destroy, delete data
- this.clearedFieldMetaCache[name] = {
- field: this.fieldsStore.getField(name),
- meta: fieldMeta,
- };
- this.clearField(name);
- }
- delete this.domFields[name];
- return;
- }
- this.domFields[name] = true;
- this.recoverClearedField(name);
- // const fieldMeta = this.fieldsStore.getFieldMeta(name)
- // if (fieldMeta) {
- // const ref = fieldMeta.ref
- // if (ref) {
- // if (typeof ref === 'string') {
- // throw new Error(`can not set ref string for ${name}`)
- // }
- // ref(component)
- // }
- // }
- this.instances[name] = component;
- },
-
- cleanUpUselessFields() {
- const fieldList = this.fieldsStore.getAllFieldsName();
- const removedList = fieldList.filter(field => {
- const fieldMeta = this.fieldsStore.getFieldMeta(field);
- return !this.renderFields[field] && !this.domFields[field] && !fieldMeta.preserve;
- });
- if (removedList.length) {
- removedList.forEach(this.clearField);
- }
- this.renderFields = {};
- },
-
- clearField(name) {
- this.fieldsStore.clearField(name);
- delete this.instances[name];
- delete this.cachedBind[name];
- },
-
- resetFields(ns) {
- const newFields = this.fieldsStore.resetFields(ns);
- if (Object.keys(newFields).length > 0) {
- this.setFields(newFields);
- }
- if (ns) {
- const names = Array.isArray(ns) ? ns : [ns];
- names.forEach(name => delete this.clearedFieldMetaCache[name]);
- } else {
- this.clearedFieldMetaCache = {};
- }
- },
-
- recoverClearedField(name) {
- if (this.clearedFieldMetaCache[name]) {
- this.fieldsStore.setFields({
- [name]: this.clearedFieldMetaCache[name].field,
- });
- this.fieldsStore.setFieldMeta(name, this.clearedFieldMetaCache[name].meta);
- delete this.clearedFieldMetaCache[name];
- }
- },
-
- validateFieldsInternal(fields, { fieldNames, action, options = {} }, callback) {
- const allRules = {};
- const allValues = {};
- const allFields = {};
- const alreadyErrors = {};
- fields.forEach(field => {
- const name = field.name;
- if (options.force !== true && field.dirty === false) {
- if (field.errors) {
- set(alreadyErrors, name, { errors: field.errors });
- }
- return;
- }
- const fieldMeta = this.fieldsStore.getFieldMeta(name);
- const newField = {
- ...field,
- };
- newField.errors = undefined;
- newField.validating = true;
- newField.dirty = true;
- allRules[name] = this.getRules(fieldMeta, action);
- allValues[name] = newField.value;
- allFields[name] = newField;
- });
- this.setFields(allFields);
- // in case normalize
- Object.keys(allValues).forEach(f => {
- allValues[f] = this.fieldsStore.getFieldValue(f);
- });
- if (callback && isEmptyObject(allFields)) {
- callback(
- isEmptyObject(alreadyErrors) ? null : alreadyErrors,
- this.fieldsStore.getFieldsValue(fieldNames),
- );
- return;
- }
- const validator = new AsyncValidator(allRules);
- if (validateMessages) {
- validator.messages(validateMessages);
- }
- validator.validate(allValues, options, errors => {
- const errorsGroup = {
- ...alreadyErrors,
- };
- if (errors && errors.length) {
- errors.forEach(e => {
- const errorFieldName = e.field;
- let fieldName = errorFieldName;
-
- // Handle using array validation rule.
- // ref: https://github.com/ant-design/ant-design/issues/14275
- Object.keys(allRules).some(ruleFieldName => {
- const rules = allRules[ruleFieldName] || [];
-
- // Exist if match rule
- if (ruleFieldName === errorFieldName) {
- fieldName = ruleFieldName;
- return true;
- }
-
- // Skip if not match array type
- if (
- rules.every(({ type }) => type !== 'array') &&
- errorFieldName.indexOf(ruleFieldName) !== 0
- ) {
- return false;
- }
-
- // Exist if match the field name
- const restPath = errorFieldName.slice(ruleFieldName.length + 1);
- if (/^\d+$/.test(restPath)) {
- fieldName = ruleFieldName;
- return true;
- }
-
- return false;
- });
-
- const field = get(errorsGroup, fieldName);
- if (typeof field !== 'object' || Array.isArray(field)) {
- set(errorsGroup, fieldName, { errors: [] });
- }
- const fieldErrors = get(errorsGroup, fieldName.concat('.errors'));
- fieldErrors.push(e);
- });
- }
- const expired = [];
- const nowAllFields = {};
- Object.keys(allRules).forEach(name => {
- const fieldErrors = get(errorsGroup, name);
- const nowField = this.fieldsStore.getField(name);
- // avoid concurrency problems
- if (!eq(nowField.value, allValues[name])) {
- expired.push({
- name,
- });
- } else {
- nowField.errors = fieldErrors && fieldErrors.errors;
- nowField.value = allValues[name];
- nowField.validating = false;
- nowField.dirty = false;
- nowAllFields[name] = nowField;
- }
- });
- this.setFields(nowAllFields);
- if (callback) {
- if (expired.length) {
- expired.forEach(({ name }) => {
- const fieldErrors = [
- {
- message: `${name} need to revalidate`,
- field: name,
- },
- ];
- set(errorsGroup, name, {
- expired: true,
- errors: fieldErrors,
- });
- });
- }
-
- callback(
- isEmptyObject(errorsGroup) ? null : errorsGroup,
- this.fieldsStore.getFieldsValue(fieldNames),
- );
- }
- });
- },
-
- validateFields(ns, opt, cb) {
- const pending = new Promise((resolve, reject) => {
- const { names, options } = getParams(ns, opt, cb);
- let { callback } = getParams(ns, opt, cb);
- if (!callback || typeof callback === 'function') {
- const oldCb = callback;
- callback = (errors, values) => {
- if (oldCb) {
- oldCb(errors, values);
- } else if (errors) {
- reject({ errors, values });
- } else {
- resolve(values);
- }
- };
- }
- const fieldNames = names
- ? this.fieldsStore.getValidFieldsFullName(names)
- : this.fieldsStore.getValidFieldsName();
- const fields = fieldNames
- .filter(name => {
- const fieldMeta = this.fieldsStore.getFieldMeta(name);
- return hasRules(fieldMeta.validate);
- })
- .map(name => {
- const field = this.fieldsStore.getField(name);
- field.value = this.fieldsStore.getFieldValue(name);
- return field;
- });
- if (!fields.length) {
- callback(null, this.fieldsStore.getFieldsValue(fieldNames));
- return;
- }
- if (!('firstFields' in options)) {
- options.firstFields = fieldNames.filter(name => {
- const fieldMeta = this.fieldsStore.getFieldMeta(name);
- return !!fieldMeta.validateFirst;
- });
- }
- this.validateFieldsInternal(
- fields,
- {
- fieldNames,
- options,
- },
- callback,
- );
- });
- pending.catch(e => {
- if (console.error && process.env.NODE_ENV !== 'production') {
- console.error(e);
- }
- return e;
- });
- return pending;
- },
-
- isSubmitting() {
- if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
- warning(
- false,
- '`isSubmitting` is deprecated. ' +
- "Actually, it's more convenient to handle submitting status by yourself.",
- );
- }
- return this.submitting;
- },
-
- submit(callback) {
- if (process.env.NODE_ENV !== 'production' && process.env.NODE_ENV !== 'test') {
- warning(
- false,
- '`submit` is deprecated. ' +
- "Actually, it's more convenient to handle submitting status by yourself.",
- );
- }
- const fn = () => {
- this.setState({
- submitting: false,
- });
- };
- this.setState({
- submitting: true,
- });
- callback(fn);
- },
- },
-
- render() {
- const { $slots, $scopedSlots } = this;
- const formProps = {
- [formPropName]: this.getForm(),
- };
- const { wrappedComponentRef, ...restProps } = getOptionProps(this);
- const wrappedComponentProps = {
- props: mapProps.call(this, {
- ...formProps,
- ...restProps,
- }),
- on: getListeners(this),
- ref: 'WrappedComponent',
- directives: [
- {
- name: 'ant-ref',
- value: wrappedComponentRef,
- },
- ],
- };
- if (Object.keys($scopedSlots).length) {
- wrappedComponentProps.scopedSlots = $scopedSlots;
- }
- const slotsKey = Object.keys($slots);
- return WrappedComponent ? (
- <WrappedComponent {...wrappedComponentProps}>
- {slotsKey.length
- ? slotsKey.map(name => {
- return <template slot={name}>{$slots[name]}</template>;
- })
- : null}
- </WrappedComponent>
- ) : null;
- },
- };
- if (!WrappedComponent) return Form;
- if (Array.isArray(WrappedComponent.props)) {
- const newProps = {};
- WrappedComponent.props.forEach(prop => {
- newProps[prop] = PropTypes.any;
- });
- newProps[formPropName] = Object;
- WrappedComponent.props = newProps;
- } else {
- WrappedComponent.props = WrappedComponent.props || {};
- if (!(formPropName in WrappedComponent.props)) {
- WrappedComponent.props[formPropName] = Object;
- }
- }
- return argumentContainer(Form, WrappedComponent);
- };
-}
-
-export default createBaseForm;
diff --git a/components/vc-form/src/createDOMForm.jsx b/components/vc-form/src/createDOMForm.jsx
deleted file mode 100644
index 2d301269c..000000000
--- a/components/vc-form/src/createDOMForm.jsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import scrollIntoView from 'dom-scroll-into-view';
-import has from 'lodash/has';
-import createBaseForm from './createBaseForm';
-import { mixin as formMixin } from './createForm';
-import { getParams } from './utils';
-
-function computedStyle(el, prop) {
- const getComputedStyle = window.getComputedStyle;
- const style =
- // If we have getComputedStyle
- getComputedStyle
- ? // Query it
- // TODO: From CSS-Query notes, we might need (node, null) for FF
- getComputedStyle(el)
- : // Otherwise, we are in IE and use currentStyle
- el.currentStyle;
- if (style) {
- return style[
- // Switch to camelCase for CSSOM
- // DEV: Grabbed from jQuery
- // https://github.com/jquery/jquery/blob/1.9-stable/src/css.js#L191-L194
- // https://github.com/jquery/jquery/blob/1.9-stable/src/core.js#L593-L597
- prop.replace(/-(\w)/gi, (word, letter) => {
- return letter.toUpperCase();
- })
- ];
- }
- return undefined;
-}
-
-function getScrollableContainer(n) {
- let node = n;
- let nodeName;
- /* eslint no-cond-assign:0 */
- while ((nodeName = node.nodeName.toLowerCase()) !== 'body') {
- const overflowY = computedStyle(node, 'overflowY');
- // https://stackoverflow.com/a/36900407/3040605
- if (
- node !== n &&
- (overflowY === 'auto' || overflowY === 'scroll') &&
- node.scrollHeight > node.clientHeight
- ) {
- return node;
- }
- node = node.parentNode;
- }
- return nodeName === 'body' ? node.ownerDocument : node;
-}
-
-const mixin = {
- methods: {
- getForm() {
- return {
- ...formMixin.methods.getForm.call(this),
- validateFieldsAndScroll: this.validateFieldsAndScroll,
- };
- },
-
- validateFieldsAndScroll(ns, opt, cb) {
- const { names, callback, options } = getParams(ns, opt, cb);
-
- const newCb = (error, values) => {
- if (error) {
- const validNames = this.fieldsStore.getValidFieldsName();
- let firstNode;
- let firstTop;
- validNames.forEach(name => {
- if (has(error, name)) {
- const instance = this.getFieldInstance(name);
- if (instance) {
- const node = instance.$el || instance.elm;
- const top = node.getBoundingClientRect().top;
- if (node.type !== 'hidden' && (firstTop === undefined || firstTop > top)) {
- firstTop = top;
- firstNode = node;
- }
- }
- }
- });
-
- if (firstNode) {
- const c = options.container || getScrollableContainer(firstNode);
- scrollIntoView(firstNode, c, {
- onlyScrollIfNeeded: true,
- ...options.scroll,
- });
- }
- }
-
- if (typeof callback === 'function') {
- callback(error, values);
- }
- };
-
- return this.validateFields(names, options, newCb);
- },
- },
-};
-
-function createDOMForm(option) {
- return createBaseForm(
- {
- ...option,
- },
- [mixin],
- );
-}
-
-export default createDOMForm;
diff --git a/components/vc-form/src/createFieldsStore.jsx b/components/vc-form/src/createFieldsStore.jsx
deleted file mode 100644
index 5d263fae3..000000000
--- a/components/vc-form/src/createFieldsStore.jsx
+++ /dev/null
@@ -1,269 +0,0 @@
-import set from 'lodash/set';
-import createFormField, { isFormField } from './createFormField';
-import { hasRules, flattenFields, getErrorStrs, startsWith } from './utils';
-
-function partOf(a, b) {
- return b.indexOf(a) === 0 && ['.', '['].indexOf(b[a.length]) !== -1;
-}
-
-function internalFlattenFields(fields) {
- return flattenFields(
- fields,
- (_, node) => isFormField(node),
- 'You must wrap field data with `createFormField`.',
- );
-}
-
-class FieldsStore {
- constructor(fields) {
- this.fields = internalFlattenFields(fields);
- this.fieldsMeta = {};
- }
-
- updateFields(fields) {
- this.fields = internalFlattenFields(fields);
- }
-
- flattenRegisteredFields(fields) {
- const validFieldsName = this.getAllFieldsName();
- return flattenFields(
- fields,
- path => validFieldsName.indexOf(path) >= 0,
- `You cannot set a form field before rendering a field associated with the value. You can use \`getFieldDecorator(id, options)\` instead \`v-decorator="[id, options]"\` to register it before render.`,
- );
- }
-
- setFieldsInitialValue = initialValues => {
- const flattenedInitialValues = this.flattenRegisteredFields(initialValues);
- const fieldsMeta = this.fieldsMeta;
- Object.keys(flattenedInitialValues).forEach(name => {
- if (fieldsMeta[name]) {
- this.setFieldMeta(name, {
- ...this.getFieldMeta(name),
- initialValue: flattenedInitialValues[name],
- });
- }
- });
- };
-
- setFields(fields) {
- const fieldsMeta = this.fieldsMeta;
- const nowFields = {
- ...this.fields,
- ...fields,
- };
- const nowValues = {};
- Object.keys(fieldsMeta).forEach(f => {
- nowValues[f] = this.getValueFromFields(f, nowFields);
- });
- Object.keys(nowValues).forEach(f => {
- const value = nowValues[f];
- const fieldMeta = this.getFieldMeta(f);
- if (fieldMeta && fieldMeta.normalize) {
- const nowValue = fieldMeta.normalize(
- value,
- this.getValueFromFields(f, this.fields),
- nowValues,
- );
- if (nowValue !== value) {
- nowFields[f] = {
- ...nowFields[f],
- value: nowValue,
- };
- }
- }
- });
- this.fields = nowFields;
- }
-
- resetFields(ns) {
- const { fields } = this;
- const names = ns ? this.getValidFieldsFullName(ns) : this.getAllFieldsName();
- return names.reduce((acc, name) => {
- const field = fields[name];
- if (field && 'value' in field) {
- acc[name] = {};
- }
- return acc;
- }, {});
- }
-
- setFieldMeta(name, meta) {
- this.fieldsMeta[name] = meta;
- }
-
- setFieldsAsDirty() {
- Object.keys(this.fields).forEach(name => {
- const field = this.fields[name];
- const fieldMeta = this.fieldsMeta[name];
- if (field && fieldMeta && hasRules(fieldMeta.validate)) {
- this.fields[name] = {
- ...field,
- dirty: true,
- };
- }
- });
- }
-
- getFieldMeta(name) {
- this.fieldsMeta[name] = this.fieldsMeta[name] || {};
- return this.fieldsMeta[name];
- }
-
- getValueFromFields(name, fields) {
- const field = fields[name];
- if (field && 'value' in field) {
- return field.value;
- }
- const fieldMeta = this.getFieldMeta(name);
- return fieldMeta && fieldMeta.initialValue;
- }
-
- getAllValues = () => {
- const { fieldsMeta, fields } = this;
- return Object.keys(fieldsMeta).reduce(
- (acc, name) => set(acc, name, this.getValueFromFields(name, fields)),
- {},
- );
- };
-
- getValidFieldsName() {
- const { fieldsMeta } = this;
- return fieldsMeta
- ? Object.keys(fieldsMeta).filter(name => !this.getFieldMeta(name).hidden)
- : [];
- }
-
- getAllFieldsName() {
- const { fieldsMeta } = this;
- return fieldsMeta ? Object.keys(fieldsMeta) : [];
- }
-
- getValidFieldsFullName(maybePartialName) {
- const maybePartialNames = Array.isArray(maybePartialName)
- ? maybePartialName
- : [maybePartialName];
- return this.getValidFieldsName().filter(fullName =>
- maybePartialNames.some(
- partialName =>
- fullName === partialName ||
- (startsWith(fullName, partialName) &&
- ['.', '['].indexOf(fullName[partialName.length]) >= 0),
- ),
- );
- }
-
- getFieldValuePropValue(fieldMeta) {
- const { name, getValueProps, valuePropName } = fieldMeta;
- const field = this.getField(name);
- const fieldValue = 'value' in field ? field.value : fieldMeta.initialValue;
- if (getValueProps) {
- return getValueProps(fieldValue);
- }
- return { [valuePropName]: fieldValue };
- }
-
- getField(name) {
- return {
- ...this.fields[name],
- name,
- };
- }
-
- getNotCollectedFields() {
- const fieldsName = this.getValidFieldsName();
- return fieldsName
- .filter(name => !this.fields[name])
- .map(name => ({
- name,
- dirty: false,
- value: this.getFieldMeta(name).initialValue,
- }))
- .reduce((acc, field) => set(acc, field.name, createFormField(field)), {});
- }
-
- getNestedAllFields() {
- return Object.keys(this.fields).reduce(
- (acc, name) => set(acc, name, createFormField(this.fields[name])),
- this.getNotCollectedFields(),
- );
- }
-
- getFieldMember(name, member) {
- return this.getField(name)[member];
- }
-
- getNestedFields(names, getter) {
- const fields = names || this.getValidFieldsName();
- return fields.reduce((acc, f) => set(acc, f, getter(f)), {});
- }
-
- getNestedField(name, getter) {
- const fullNames = this.getValidFieldsFullName(name);
- if (
- fullNames.length === 0 || // Not registered
- (fullNames.length === 1 && fullNames[0] === name) // Name already is full name.
- ) {
- return getter(name);
- }
- const isArrayValue = fullNames[0][name.length] === '[';
- const suffixNameStartIndex = isArrayValue ? name.length : name.length + 1;
- return fullNames.reduce(
- (acc, fullName) => set(acc, fullName.slice(suffixNameStartIndex), getter(fullName)),
- isArrayValue ? [] : {},
- );
- }
-
- getFieldsValue = names => {
- return this.getNestedFields(names, this.getFieldValue);
- };
-
- getFieldValue = name => {
- const { fields } = this;
- return this.getNestedField(name, fullName => this.getValueFromFields(fullName, fields));
- };
-
- getFieldsError = names => {
- return this.getNestedFields(names, this.getFieldError);
- };
-
- getFieldError = name => {
- return this.getNestedField(name, fullName =>
- getErrorStrs(this.getFieldMember(fullName, 'errors')),
- );
- };
-
- isFieldValidating = name => {
- return this.getFieldMember(name, 'validating');
- };
-
- isFieldsValidating = ns => {
- const names = ns || this.getValidFieldsName();
- return names.some(n => this.isFieldValidating(n));
- };
-
- isFieldTouched = name => {
- return this.getFieldMember(name, 'touched');
- };
-
- isFieldsTouched = ns => {
- const names = ns || this.getValidFieldsName();
- return names.some(n => this.isFieldTouched(n));
- };
-
- // @private
- // BG: `a` and `a.b` cannot be use in the same form
- isValidNestedFieldName(name) {
- const names = this.getAllFieldsName();
- return names.every(n => !partOf(n, name) && !partOf(name, n));
- }
-
- clearField(name) {
- delete this.fields[name];
- delete this.fieldsMeta[name];
- }
-}
-
-export default function createFieldsStore(fields) {
- return new FieldsStore(fields);
-}
diff --git a/components/vc-form/src/createForm.jsx b/components/vc-form/src/createForm.jsx
deleted file mode 100644
index cab1c2c20..000000000
--- a/components/vc-form/src/createForm.jsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import createBaseForm from './createBaseForm';
-
-export const mixin = {
- methods: {
- getForm() {
- return {
- getFieldsValue: this.fieldsStore.getFieldsValue,
- getFieldValue: this.fieldsStore.getFieldValue,
- getFieldInstance: this.getFieldInstance,
- setFieldsValue: this.setFieldsValue,
- setFields: this.setFields,
- setFieldsInitialValue: this.fieldsStore.setFieldsInitialValue,
- getFieldDecorator: this.getFieldDecorator,
- getFieldProps: this.getFieldProps,
- getFieldsError: this.fieldsStore.getFieldsError,
- getFieldError: this.fieldsStore.getFieldError,
- isFieldValidating: this.fieldsStore.isFieldValidating,
- isFieldsValidating: this.fieldsStore.isFieldsValidating,
- isFieldsTouched: this.fieldsStore.isFieldsTouched,
- isFieldTouched: this.fieldsStore.isFieldTouched,
- isSubmitting: this.isSubmitting,
- submit: this.submit,
- validateFields: this.validateFields,
- resetFields: this.resetFields,
- };
- },
- },
-};
-
-function createForm(options) {
- return createBaseForm(options, [mixin]);
-}
-
-export default createForm;
diff --git a/components/vc-form/src/createFormField.jsx b/components/vc-form/src/createFormField.jsx
deleted file mode 100644
index 2519ea520..000000000
--- a/components/vc-form/src/createFormField.jsx
+++ /dev/null
@@ -1,16 +0,0 @@
-class Field {
- constructor(fields) {
- Object.assign(this, fields);
- }
-}
-
-export function isFormField(obj) {
- return obj instanceof Field;
-}
-
-export default function createFormField(field) {
- if (isFormField(field)) {
- return field;
- }
- return new Field(field);
-}
diff --git a/components/vc-form/src/index.jsx b/components/vc-form/src/index.jsx
deleted file mode 100644
index 09c39f72b..000000000
--- a/components/vc-form/src/index.jsx
+++ /dev/null
@@ -1,10 +0,0 @@
-// export this package's api
-import createForm from './createForm';
-import createFormField from './createFormField';
-import formShape from './propTypes';
-import Vue from 'vue';
-import ref from 'vue-ref';
-
-Vue.use(ref, { name: 'ant-ref' });
-
-export { createFormField, formShape, createForm };
diff --git a/components/vc-form/src/propTypes.js b/components/vc-form/src/propTypes.js
deleted file mode 100644
index 5338d63fb..000000000
--- a/components/vc-form/src/propTypes.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import PropTypes from '../../_util/vue-types';
-
-const formShape = PropTypes.shape({
- getFieldsValue: PropTypes.func,
- getFieldValue: PropTypes.func,
- getFieldInstance: PropTypes.func,
- setFieldsValue: PropTypes.func,
- setFields: PropTypes.func,
- setFieldsInitialValue: PropTypes.func,
- getFieldDecorator: PropTypes.func,
- getFieldProps: PropTypes.func,
- getFieldsError: PropTypes.func,
- getFieldError: PropTypes.func,
- isFieldValidating: PropTypes.func,
- isFieldsValidating: PropTypes.func,
- isFieldsTouched: PropTypes.func,
- isFieldTouched: PropTypes.func,
- isSubmitting: PropTypes.func,
- submit: PropTypes.func,
- validateFields: PropTypes.func,
- resetFields: PropTypes.func,
-}).loose;
-
-export default formShape;
diff --git a/components/vc-form/src/utils.js b/components/vc-form/src/utils.js
deleted file mode 100644
index 67f50c8bd..000000000
--- a/components/vc-form/src/utils.js
+++ /dev/null
@@ -1,151 +0,0 @@
-import warning from 'warning';
-
-function getDisplayName(WrappedComponent) {
- return WrappedComponent.name || 'WrappedComponent';
-}
-
-export function argumentContainer(Container, WrappedComponent) {
- /* eslint no-param-reassign:0 */
- Container.name = `Form_${getDisplayName(WrappedComponent)}`;
- Container.WrappedComponent = WrappedComponent;
- Container.props = { ...Container.props, ...WrappedComponent.props };
- return Container;
-}
-
-export function identity(obj) {
- return obj;
-}
-
-export function flattenArray(arr) {
- return Array.prototype.concat.apply([], arr);
-}
-
-export function treeTraverse(path = '', tree, isLeafNode, errorMessage, callback) {
- if (isLeafNode(path, tree)) {
- callback(path, tree);
- } else if (tree === undefined || tree === null) {
- // Do nothing
- } else if (Array.isArray(tree)) {
- tree.forEach((subTree, index) =>
- treeTraverse(`${path}[${index}]`, subTree, isLeafNode, errorMessage, callback),
- );
- } else {
- // It's object and not a leaf node
- if (typeof tree !== 'object') {
- warning(false, errorMessage);
- return;
- }
- Object.keys(tree).forEach(subTreeKey => {
- const subTree = tree[subTreeKey];
- treeTraverse(
- `${path}${path ? '.' : ''}${subTreeKey}`,
- subTree,
- isLeafNode,
- errorMessage,
- callback,
- );
- });
- }
-}
-
-export function flattenFields(maybeNestedFields, isLeafNode, errorMessage) {
- const fields = {};
- treeTraverse(undefined, maybeNestedFields, isLeafNode, errorMessage, (path, node) => {
- fields[path] = node;
- });
- return fields;
-}
-
-export function normalizeValidateRules(validate, rules, validateTrigger) {
- const validateRules = validate.map(item => {
- const newItem = {
- ...item,
- trigger: item.trigger || [],
- };
- if (typeof newItem.trigger === 'string') {
- newItem.trigger = [newItem.trigger];
- }
- return newItem;
- });
- if (rules) {
- validateRules.push({
- trigger: validateTrigger ? [].concat(validateTrigger) : [],
- rules,
- });
- }
- return validateRules;
-}
-
-export function getValidateTriggers(validateRules) {
- return validateRules
- .filter(item => !!item.rules && item.rules.length)
- .map(item => item.trigger)
- .reduce((pre, curr) => pre.concat(curr), []);
-}
-
-export function getValueFromEvent(e) {
- // To support custom element
- if (!e || !e.target) {
- return e;
- }
- const { target } = e;
- return target.type === 'checkbox' ? target.checked : target.value;
-}
-
-export function getErrorStrs(errors) {
- if (errors) {
- return errors.map(e => {
- if (e && e.message) {
- return e.message;
- }
- return e;
- });
- }
- return errors;
-}
-
-export function getParams(ns, opt, cb) {
- let names = ns;
- let options = opt;
- let callback = cb;
- if (cb === undefined) {
- if (typeof names === 'function') {
- callback = names;
- options = {};
- names = undefined;
- } else if (Array.isArray(names)) {
- if (typeof options === 'function') {
- callback = options;
- options = {};
- } else {
- options = options || {};
- }
- } else {
- callback = options;
- options = names || {};
- names = undefined;
- }
- }
- return {
- names,
- options,
- callback,
- };
-}
-
-export function isEmptyObject(obj) {
- return Object.keys(obj).length === 0;
-}
-
-export function hasRules(validate) {
- if (validate) {
- return validate.some(item => {
- return item.rules && item.rules.length;
- });
- }
- return false;
-}
-
-export function startsWith(str, prefix) {
- return str.lastIndexOf(prefix, 0) === 0;
-}