UNPKG

ant-design-vue

Version:

An enterprise-class UI design language and Vue-based implementation

409 lines (352 loc) 10.9 kB
// Project: https://github.com/vueComponent/ant-design-vue // Definitions by: akki-jat <https://github.com/akki-jat> // Definitions: https://github.com/vueComponent/ant-design-vue/types import { AntdComponent } from '../component'; import { Col } from '../grid/col'; import Vue from 'vue'; import { FormItem } from './form-item'; export interface Field { [fieldName: string]: { value: any; errors?: Array<Error>; }; } export interface FieldValue { [fieldName: string]: any; } /** dom-scroll-into-view 组件配置参数 */ export type DomScrollIntoViewConfig = { /** 是否和左边界对齐 */ alignWithLeft?: boolean; /** 是否和上边界对齐 */ alignWithTop?: boolean; /** 顶部偏移量 */ offsetTop?: number; /** 左侧偏移量 */ offsetLeft?: number; /** 底部偏移量 */ offsetBottom?: number; /** 右侧偏移量 */ offsetRight?: number; /** 是否允许容器水平滚动 */ allowHorizontalScroll?: boolean; /** 当内容可见时是否允许滚动容器 */ onlyScrollIfNeeded?: boolean; }; export type ValidateFieldsOptions = { /** 所有表单域是否在第一个校验规则失败后停止继续校验 */ first?: boolean; /** 指定哪些表单域在第一个校验规则失败后停止继续校验 */ firstFields?: string[]; /** 已经校验过的表单域,在 validateTrigger 再次被触发时是否再次校验 */ force?: boolean; /** 定义 validateFieldsAndScroll 的滚动行为 */ scroll?: DomScrollIntoViewConfig; }; declare interface ValidationRule { /** * validation error message * @type string | Function */ message?: string | (() => string); /** * built-in validation type, available options: https://github.com/yiminghe/async-validator#type * @default 'string' * @type string */ type?: string; /** * indicates whether field is required * @default false * @type boolean */ required?: boolean; /** * treat required fields that only contain whitespace as errors * @default false * @type boolean */ whitespace?: boolean; /** * validate the exact length of a field * @type number */ len?: number; /** * validate the min length of a field * @type number */ min?: number; /** * validate the max length of a field * @type number */ max?: number; /** * validate the value from a list of possible values * @type string | string[] */ enum?: string | string[]; /** * validate from a regular expression * @type boolean */ pattern?: RegExp; /** * transform a value before validation * @type Function */ transform?: (value: any) => any; /** * custom validate function (Note: callback must be called) * @type Function */ validator?: (rule: any, value: any, callback: Function) => any; } declare interface FieldDecoratorOptions { /** * Specify how to get value from event or other onChange arguments * @type Function */ getValueFromEvent?: (...args: any[]) => any; /** * Get the component props according to field value. * @type Function */ getValueProps?: (value: any) => any; /** * You can specify initial value, type, optional value of children node. * (Note: Because Form will test equality with === internally, we recommend to use variable as initialValue, instead of literal) * @default n/a * @type any */ initialValue?: any; /** * Normalize value to form component * @type Function */ normalize?: (value: any, prevValue: any, allValues: any) => any; /** * Includes validation rules. Please refer to "Validation Rules" part for details. * @default n/a * @type ValidationRule[] */ rules?: ValidationRule[]; /** * When to collect the value of children node * @default 'change' * @type string */ trigger?: string; /** * Whether stop validate on first rule of error for this field. * @default false * @type boolean */ validateFirst?: boolean; /** * When to validate the value of children node. * @default 'change' * @type string | string[] */ validateTrigger?: string | string[]; /** * Props of children node, for example, the prop of Switch is 'checked'. * @default 'value' * @type string */ valuePropName?: string; /** * Whether to keep the information of the child node all the time. * @default false * @type boolean */ preserve?: boolean; } export type ValidateCallback = (errors: Error[], values: any) => void; export interface WrappedFormUtils { /** * Two-way binding for form, single file template can be bound using the directive v-decorator. * @type Function */ getFieldDecorator(id: string, options: FieldDecoratorOptions): any; /** * Get the error of a field. * @type Function (Function(name)) */ getFieldError(name: string): object[]; /** * Get the specified fields' error. If you don't specify a parameter, you will get all fields' error. * @type Function (Function([names: string[])) */ getFieldsError(names?: string[]): object; /** * Get the specified fields' values. If you don't specify a parameter, you will get all fields' values. * @type Funtion (Function([fieldNames: string[])) */ getFieldsValue(fieldNames?: string[]): { [field: string]: any }; /** * Get the value of a field. * @type Function (Function(fieldName: string)) */ getFieldValue(fieldName: string): any; /** * Check whether any of fields is touched by getFieldDecorator's options.trigger event * @type Function */ isFieldsTouched(names?: string[]): boolean; /** * Check whether a field is touched by getFieldDecorator's options.trigger event * @type Function ((name: string) => boolean) */ isFieldTouched: Function; /** * Check if the specified field is being validated. * @type Function (Function(name)) */ isFieldValidating(name: string): boolean; /** * Reset the specified fields' value(to initialValue) and status. * If you don't specify a parameter, all the fields will be reset. * @type Function (Function([names: string[]])) */ resetFields(names?: string[]): void; /** * Set value and error state of fields * @type Function */ setFields(field: Field): void; /** * Set the value of a field. * @type Function */ setFieldsValue(fieldValue: FieldValue): void; /** * Validate the specified fields and get theirs values and errors. * If you don't specify the parameter of fieldNames, you will validate all fields. * @type Function */ validateFields( fieldNames: Array<string>, options: ValidateFieldsOptions, callback: ValidateCallback, ): void; validateFields(options: ValidateFieldsOptions, callback: ValidateCallback): void; validateFields(fieldNames: Array<string>, callback: ValidateCallback): void; validateFields(fieldNames: Array<string>, options: ValidateFieldsOptions): void; validateFields(fieldNames: Array<string>): void; validateFields(callback: ValidateCallback): void; validateFields(options: ValidateFieldsOptions): void; validateFields(): void; /** * This function is similar to validateFields, but after validation, if the target field is not in visible area of form, * form will be automatically scrolled to the target field area. * @type Function */ validateFieldsAndScroll( fieldNames: Array<string>, options: ValidateFieldsOptions, callback: ValidateCallback, ): void; validateFieldsAndScroll(options: ValidateFieldsOptions, callback: ValidateCallback): void; validateFieldsAndScroll(fieldNames: Array<string>, callback: ValidateCallback): void; validateFieldsAndScroll(fieldNames: Array<string>, options: ValidateFieldsOptions): void; validateFieldsAndScroll(fieldNames: Array<string>): void; validateFieldsAndScroll(callback: ValidateCallback): void; validateFieldsAndScroll(options: ValidateFieldsOptions): void; validateFieldsAndScroll(): void; } export interface IformCreateOption { /** * Set prefix for the form fields id * @type string */ name?: string; /** * Only supports the use of Form.create({})(CustomizedForm). declare props on form(like vue props) * @type object */ props?: object; /** * Convert props to field value(e.g. reading the values from Redux store). And you must mark returned fields with Form.createFormField. * If you use $form.createForm to create a collector, you can map any data to the Field without being bound by the parent component. * @type Function */ mapPropsToFields?: Function; /** * Default validate message. And its format is similar with newMessages's returned value * @type any */ validateMessages?: any; /** * Specify a function that will be called when the value a Form.Item gets changed. * Usage example: saving the field's value to Redux store. * @type Function (Function(props, fields)) */ onFieldsChange?: (props: any, fields: any) => any; /** * A handler while value of any field is changed * @type Function */ onValuesChange?: (props: any, fields: any) => void; } export declare class Form extends AntdComponent { static Item: typeof FormItem; static create: (options: IformCreateOption) => (WrapedComponent: any) => any; /** * Decorated by Form.create() will be automatically set this.form property, so just pass to form. * If you use the template syntax, you can use this.$form.createForm(this, options) * @default n/a * @type WrappedFormUtils */ form: WrappedFormUtils; /** * Hide required mark of all form items * @default false * @type boolean */ hideRequiredMark: boolean; /** * The layout of label. You can set span offset to something like {span: 3, offset: 12} or sm: {span: 3, offset: 12} same as with <Col> * @type Col */ labelCol: Col; /** * Define form layout * @default 'horizontal' * @type string */ layout: 'horizontal' | 'inline' | 'vertical'; /** * The layout for input controls, same as labelCol * @type Col */ wrapperCol: Col; /** * Automate Form.create, Recommended for use under the template component, and cannot be used with Form.create(). * You should use $form.createForm to instead it after 1.1.9. * @type Function * @deprecated after 1.1.9 */ autoFormCreate: (form: any) => any; /** * The options corresponding to Form.create(options). You should use $form.createForm to instead it after 1.1.9. * @type object * @deprecated after 1.1.9 */ options: object; createForm(context: Vue, options?: IformCreateOption): WrappedFormUtils; /** * Convert props to field value * @param field */ createFormField(field: any): any; colon: boolean; labelAlign: 'left' | 'right'; selfUpdate: boolean; } declare module 'vue/types/vue' { interface Vue { $form: Form; } }