feat: remove old form
tanjinzhou
parent
b7f0667638
commit
12b2e67d16
|
|
@ -1 +1 @@
|
|||
Subproject commit 3d86639b4e7361c08ddf3bb56c77e854eecf94e0
|
||||
Subproject commit c5aec8ace772ab39828c9e9e20735509d943a071
|
||||
|
|
@ -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;
|
||||
|
|
@ -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();
|
||||
},
|
||||
};
|
||||
|
|
@ -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>
|
||||
`;
|
||||
|
|
@ -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>
|
||||
`;
|
||||
|
|
@ -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>
|
||||
`;
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
import demoTest from '../../../tests/shared/demoTest';
|
||||
|
||||
demoTest('form', { suffix: 'vue', skip: ['index.vue', 'vuex.vue'] });
|
||||
|
|
@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -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)
|
||||
});
|
||||
});
|
||||
|
|
@ -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();
|
||||
});
|
||||
});
|
||||
|
|
@ -1,2 +0,0 @@
|
|||
export const FIELD_META_PROP = 'data-__meta';
|
||||
export const FIELD_DATA_PROP = 'data-__field';
|
||||
|
|
@ -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;
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import '../../style/index.less';
|
||||
import './index.less';
|
||||
|
||||
// style dependencies
|
||||
import '../../grid/style';
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +0,0 @@
|
|||
// based on rc-form 2.4.8
|
||||
import { createForm, createFormField } from './src/';
|
||||
export { createForm, createFormField };
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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;
|
||||
|
|
@ -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);
|
||||
}
|
||||
|
|
@ -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 };
|
||||
|
|
@ -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;
|
||||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue