diff --git a/antdv-demo b/antdv-demo index 98dbdf437..7875c8b3e 160000 --- a/antdv-demo +++ b/antdv-demo @@ -1 +1 @@ -Subproject commit 98dbdf437a1fbb821db51c5fdbd0e52558b357b0 +Subproject commit 7875c8b3e46c0162afc28f884aca418de72c3534 diff --git a/types/ant-design-vue.d.ts b/types/ant-design-vue.d.ts index 3f31d6d96..40171eb91 100644 --- a/types/ant-design-vue.d.ts +++ b/types/ant-design-vue.d.ts @@ -28,8 +28,6 @@ import { Drawer } from './drawer'; import { Dropdown } from './dropdown/dropdown'; import { Empty } from './empty'; import { Form } from './form/form'; -import { FormModel } from './form-model/form'; -import { Icon } from './icon'; import { Input } from './input/input'; import { InputNumber } from './input-number'; import { Layout } from './layout/layout'; @@ -102,8 +100,6 @@ export { Dropdown, Empty, Form, - FormModel, - Icon, Input, InputNumber, Layout, diff --git a/types/form-model/form-item.d.ts b/types/form-model/form-item.d.ts deleted file mode 100644 index 1ae6721bc..000000000 --- a/types/form-model/form-item.d.ts +++ /dev/null @@ -1,69 +0,0 @@ -// Project: https://github.com/vueComponent/ant-design-vue -// Definitions by: akki-jat -// Definitions: https://github.com/vueComponent/ant-design-vue/types - -import { AntdComponent } from '../component'; -import { Col } from '../grid/col'; - -export declare class FormModelItem extends AntdComponent { - /** - * Used with label, whether to display : after label text. - * @default true - * @type boolean - */ - colon: boolean; - - /** - * The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. - * @type any (string | slot) - */ - extra: any; - - /** - * Used with validateStatus, this option specifies the validation status icon. Recommended to be used only with Input. - * @default false - * @type boolean - */ - hasFeedback: boolean; - - /** - * The prompt message. If not provided, the prompt message will be generated by the validation rule. - * @type any (string | slot) - */ - help: any; - - /** - * Label test - * @type any (string | slot) - */ - label: any; - - /** - * 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 - * @type Col - */ - labelCol: Col; - - /** - * Whether provided or not, it will be generated by the validation rule. - * @default false - * @type boolean - */ - required: boolean; - - /** - * The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' - * @type string - */ - validateStatus: '' | 'success' | 'warning' | 'error' | 'validating'; - - /** - * The layout for input controls, same as labelCol - * @type Col - */ - wrapperCol: Col; - labelAlign: 'left' | 'right'; - prop: string; - rules: object | object[]; - autoLink: boolean; -} diff --git a/types/form-model/form.d.ts b/types/form-model/form.d.ts deleted file mode 100644 index 5c1baf922..000000000 --- a/types/form-model/form.d.ts +++ /dev/null @@ -1,176 +0,0 @@ -// Project: https://github.com/vueComponent/ant-design-vue -// Definitions by: 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 { FormModelItem } from './form-item'; - -declare interface ValidationRule { - trigger?: string; - /** - * validation error message - * @type string - */ - message?: 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; -} - -export declare class FormModel extends AntdComponent { - static Item: typeof FormModelItem; - - /** - * 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 - * @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; - - /** - * change default props colon value of Form.Item (only effective when prop layout is horizontal) - * @type boolean - * @default true - */ - colon: boolean; - - /** - * text align of label of all items - * @type 'left' | 'right' - * @default 'left' - */ - labelAlign: 'left' | 'right'; - - /** - * data of form component - * @type object - */ - model: object; - - /** - * validation rules of form - * @type object - */ - rules: object; - - /** - * Default validate message. And its format is similar with newMessages's returned value - * @type any - */ - validateMessages?: any; - - /** - * whether to trigger validation when the rules prop is changed - * @type Boolean - * @default true - */ - validateOnRuleChange: boolean; - - /** - * validate the whole form. Takes a callback as a param. After validation, - * the callback will be executed with two params: a boolean indicating if the validation has passed, - * and an object containing all fields that fail the validation. Returns a promise if callback is omitted - * @type Function - */ - validate: (callback?: (boolean: boolean, object: Object) => void) => void | Promise; - - /** - * validate one or several form items - * @type Function - */ - validateField: (props: string[] | string, callback: (errorMessage: string) => void) => void; - - /** - * reset all the fields and remove validation result - */ - resetFields: () => void; - - /** - * clear validation message for certain fields. - * The parameter is prop name or an array of prop names of the form items whose validation messages will be removed. - * When omitted, all fields' validation messages will be cleared - * @type string[] | string - */ - clearValidate: (props: string[] | string) => void; -} diff --git a/types/form/form-item.d.ts b/types/form/form-item.d.ts index e872cded3..373b9b625 100644 --- a/types/form/form-item.d.ts +++ b/types/form/form-item.d.ts @@ -4,6 +4,10 @@ import { AntdComponent } from '../component'; import { Col } from '../grid/col'; +import { VNodeChild } from 'vue'; + +export declare type InternalNamePath = (string | number)[]; +export declare type NamePath = string | number | InternalNamePath; export declare class FormItem extends AntdComponent { /** @@ -11,32 +15,32 @@ export declare class FormItem extends AntdComponent { * @default true * @type boolean */ - colon: boolean; + colon?: boolean; /** * The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. * @type any (string | slot) */ - extra: any; + extra?: any; /** * Used with validateStatus, this option specifies the validation status icon. Recommended to be used only with Input. * @default false * @type boolean */ - hasFeedback: boolean; + hasFeedback?: boolean; /** * The prompt message. If not provided, the prompt message will be generated by the validation rule. * @type any (string | slot) */ - help: any; + help?: string | VNodeChild | JSX.Element; /** * Label test * @type any (string | slot) */ - label: any; + label: string | VNodeChild | JSX.Element; /** * 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 @@ -63,5 +67,9 @@ export declare class FormItem extends AntdComponent { */ wrapperCol: Col; labelAlign: 'left' | 'right'; - selfUpdate: boolean; + name?: InternalNamePath; + rules: object | object[]; + autoLink: boolean; + validateFirst?: boolean; + validateTrigger?: string | string[] | false; } diff --git a/types/form/form.d.ts b/types/form/form.d.ts index 8967cde48..c6d39287b 100644 --- a/types/form/form.d.ts +++ b/types/form/form.d.ts @@ -4,51 +4,93 @@ import { AntdComponent } from '../component'; import { Col } from '../grid/col'; -import Vue from 'vue'; import { FormItem } from './form-item'; +export { Options as ScrollOptions } from 'scroll-into-view-if-needed'; -export interface Field { - [fieldName: string]: { - value: any; - errors?: Array; +export declare type InternalNamePath = (string | number)[]; +export declare type NamePath = string | number | InternalNamePath; +export interface ValidateErrorEntity { + values: object; + errorFields: { + name: InternalNamePath; + errors: string[]; + }[]; + outOfDate: boolean; +} + +export declare type ValidateFields = (nameList?: NamePath[]) => Promise; + +declare type ValidateMessage = string | (() => string); +export interface ValidateMessages { + default?: ValidateMessage; + required?: ValidateMessage; + enum?: ValidateMessage; + whitespace?: ValidateMessage; + date?: { + format?: ValidateMessage; + parse?: ValidateMessage; + invalid?: ValidateMessage; + }; + types?: { + string?: ValidateMessage; + method?: ValidateMessage; + array?: ValidateMessage; + object?: ValidateMessage; + number?: ValidateMessage; + date?: ValidateMessage; + boolean?: ValidateMessage; + integer?: ValidateMessage; + float?: ValidateMessage; + regexp?: ValidateMessage; + email?: ValidateMessage; + url?: ValidateMessage; + hex?: ValidateMessage; + }; + string?: { + len?: ValidateMessage; + min?: ValidateMessage; + max?: ValidateMessage; + range?: ValidateMessage; + }; + number?: { + len?: ValidateMessage; + min?: ValidateMessage; + max?: ValidateMessage; + range?: ValidateMessage; + }; + array?: { + len?: ValidateMessage; + min?: ValidateMessage; + max?: ValidateMessage; + range?: ValidateMessage; + }; + pattern?: { + mismatch?: ValidateMessage; }; } - -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; -}; +export declare type RuleType = + | 'string' + | 'number' + | 'boolean' + | 'method' + | 'regexp' + | 'integer' + | 'float' + | 'object' + | 'enum' + | 'date' + | 'url' + | 'hex' + | 'email'; +export declare type RuleObject = BaseRule | ArrayRule; +declare type Validator = ( + rule: any, + value: any, + callback: (error?: string) => void, +) => Promise | void; declare interface ValidationRule { + trigger?: string; /** * validation error message * @type string @@ -116,293 +158,95 @@ declare interface ValidationRule { * 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, - options: ValidateFieldsOptions, - callback: ValidateCallback, - ): void; - validateFields(options: ValidateFieldsOptions, callback: ValidateCallback): void; - validateFields(fieldNames: Array, callback: ValidateCallback): void; - validateFields(fieldNames: Array, options: ValidateFieldsOptions): void; - validateFields(fieldNames: Array): 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, - options: ValidateFieldsOptions, - callback: ValidateCallback, - ): void; - validateFieldsAndScroll(options: ValidateFieldsOptions, callback: ValidateCallback): void; - validateFieldsAndScroll(fieldNames: Array, callback: ValidateCallback): void; - validateFieldsAndScroll(fieldNames: Array, options: ValidateFieldsOptions): void; - validateFieldsAndScroll(fieldNames: Array): 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; + validator?: Validator; } export declare class Form extends AntdComponent { static Item: typeof FormItem; - static create: (options: IformCreateOption) => (WrapedComponent: any) => any; + $props: { + /** + * 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 + * @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; + + /** + * change default props colon value of Form.Item (only effective when prop layout is horizontal) + * @type boolean + * @default true + */ + colon?: boolean; + + /** + * text align of label of all items + * @type 'left' | 'right' + * @default 'left' + */ + labelAlign?: 'left' | 'right'; + + /** + * data of form component + * @type object + */ + model?: object; + + /** + * validation rules of form + * @type object + */ + rules?: object; + + /** + * Default validate message. And its format is similar with newMessages's returned value + * @type any + */ + validateMessages?: ValidateMessages; + + /** + * whether to trigger validation when the rules prop is changed + * @type Boolean + * @default true + */ + validateOnRuleChange?: boolean; + + scrollToFirstError?: boolean; + + validateTrigger?: string | string[] | false; + onFinish?: (values: object) => void; + onFinishFailed?: (errorInfo: ValidateErrorEntity) => void; + }; /** - * 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 + * clear validation message for certain fields. + * The parameter is prop name or an array of prop names of the form items whose validation messages will be removed. + * When omitted, all fields' validation messages will be cleared + * @type string[] | string */ - form: WrappedFormUtils; - + clearValidate: (name: string[] | string) => void; /** - * Hide required mark of all form items - * @default false - * @type boolean + * reset all the fields and remove validation result */ - 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 - * @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; - } + resetFields: (fields?: NamePath[]) => void; + validateFields: ValidateFields; + validate: ValidateFields; + scrollToField: (name: NamePath, options?: ScrollOptions) => void; } diff --git a/types/icon.d.ts b/types/icon.d.ts deleted file mode 100644 index 9ebbd6e8c..000000000 --- a/types/icon.d.ts +++ /dev/null @@ -1,65 +0,0 @@ -// Project: https://github.com/vueComponent/ant-design-vue -// Definitions by: akki-jat -// Definitions: https://github.com/vueComponent/ant-design-vue/types - -import { AntdComponent } from './component'; -import { Component } from 'vue/types/options'; - -export interface IconOptions { - /** - * The URL generated by iconfont.cn project. - * @type string - */ - scriptUrl: string; - - /** - * Define extra properties to the component - * @default {} - * @type object - */ - extraCommonProps?: { [key: string]: any }; -} - -export declare class Icon extends AntdComponent { - static getTwoToneColor(): string; - static setTwoToneColor(colorString: string): void; - static createFromIconfontCN(iconOptions: IconOptions): Icon; - - /** - * Type of the ant design icon - * @type string - */ - type: string; - - /** - * Style properties of icon, like fontSize and color - * @type string - */ - style: string; - - /** - * The component used for the root node. This will override the type property. - * @type Component - */ - component: Component; - - /** - * Rotate icon with animation - * @default false - * @type boolean - */ - spin: boolean; - - /** - * Theme of the ant design icon - * @default 'outlined' - * @type string - */ - theme: 'filled' | 'outlined' | 'twoTone'; - - /** - * Only support the two-tone icon. Specific the primary color. - * @type string - */ - twoToneColor: string; -} diff --git a/types/notification.d.ts b/types/notification.d.ts index 59619f272..aeea64bea 100644 --- a/types/notification.d.ts +++ b/types/notification.d.ts @@ -97,13 +97,13 @@ export interface NotificationConfigOptions { */ top?: string; /** - * custom close icon - * @type VNode | function - */ + * custom close icon + * @type VNode | function + */ closeIcon?: VNodeChild | JSX.Element | Function; } -export interface NotificationApi { +export interface Notification { success(config: NotificationOptions): void; warning(config: NotificationOptions): void; warn(config: NotificationOptions): void; @@ -114,4 +114,3 @@ export interface NotificationApi { close(key: string): void; destroy(): void; } - diff --git a/types/type.ts b/types/type.ts new file mode 100644 index 000000000..303929d1e --- /dev/null +++ b/types/type.ts @@ -0,0 +1,16 @@ +export type Omit = Pick>; +// https://stackoverflow.com/questions/46176165/ways-to-get-string-literal-type-of-array-values-without-enum-overhead +export const tuple = (...args: T) => args; + +export const tupleNum = (...args: T) => args; + +/** + * https://stackoverflow.com/a/59187769 + * Extract the type of an element of an array/tuple without performing indexing + */ +export type ElementOf = T extends (infer E)[] ? E : T extends readonly (infer E)[] ? E : never; + +/** + * https://github.com/Microsoft/TypeScript/issues/29729 + */ +export type LiteralUnion = T | (U & {});