diff --git a/db/TDesign.db b/db/TDesign.db index 4cd1772ac..2c97730e9 100644 Binary files a/db/TDesign.db and b/db/TDesign.db differ diff --git a/packages/products/tdesign-vue-next/packages/components/common.ts b/packages/products/tdesign-vue-next/packages/components/common.ts index 2a381a710..b593c98fe 100644 --- a/packages/products/tdesign-vue-next/packages/components/common.ts +++ b/packages/products/tdesign-vue-next/packages/components/common.ts @@ -41,9 +41,6 @@ export interface UploadDisplayDragEvents { export type ImageEvent = Event; -/** - * 通用全局类型 - * */ export type PlainObject = { [key: string]: any }; export type OptionData = { @@ -63,6 +60,9 @@ export type TreeOptionData = { content?: string | TNode; } & PlainObject; +/** + * 通用全局类型 + * */ export type SizeEnum = 'small' | 'medium' | 'large'; export type ShapeEnum = 'circle' | 'round'; diff --git a/packages/products/tdesign-vue-next/packages/components/form/form.en-US.md b/packages/products/tdesign-vue-next/packages/components/form/form.en-US.md index a05ec596c..0ad722d0e 100644 --- a/packages/products/tdesign-vue-next/packages/components/form/form.en-US.md +++ b/packages/products/tdesign-vue-next/packages/components/form/form.en-US.md @@ -7,10 +7,10 @@ name | type | default | description | required -- | -- | -- | -- | -- colon | Boolean | false | \- | N -data | Object | {} | Typescript:`FormData` | N +data | Object | {} | Typescript: `FormData` | N disabled | Boolean | undefined | \- | N -errorMessage | Object | - | Typescript:`FormErrorMessage` | N -formControlledComponents | Array | - | Typescript:`Array` | N +errorMessage | Object | - | Typescript: `FormErrorMessage` | N +formControlledComponents | Array | - | Typescript: `Array` | N id | String | undefined | native id attribute of the form,which supports being used in conjunction with non-form buttons through the form attribute to trigger form events | N labelAlign | String | right | options: left/right/top | N labelWidth | String / Number | '100px' | \- | N @@ -20,20 +20,20 @@ readonly | Boolean | undefined | \- | N requiredMark | Boolean | true | \- | N requiredMarkPosition | String | left | Display position of required symbols。options: left/right | N resetType | String | empty | options: empty/initial | N -rules | Object | - | Typescript:`FormRules` `type FormRules = { [field in keyof T]?: Array }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts) | N +rules | Object | - | Typescript: `FormRules` `type FormRules = { [field in keyof T]?: Array }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts) | N scrollToFirstError | String | - | options: ''/smooth/auto | N showErrorMessage | Boolean | true | \- | N -statusIcon | Boolean / Slot / Function | undefined | Typescript:`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +statusIcon | Boolean / Slot / Function | undefined | Typescript: `boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N submitWithWarningMessage | Boolean | false | \- | N -onReset | Function | | Typescript:`(context: { e?: FormResetEvent }) => void`
| N -onSubmit | Function | | Typescript:`(context: SubmitContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。
`interface SubmitContext { e?: FormSubmitEvent; validateResult: FormValidateResult; firstError?: string; fields?: any }`

`type FormValidateResult = boolean \| ValidateResultObj`

`type ValidateResultObj = { [key in keyof T]: boolean \| ValidateResultList }`

`type ValidateResultList = Array`

`type AllValidateResult = CustomValidateObj \| ValidateResultType`

`interface ValidateResultType extends FormRule { result: boolean }`

`type ValidateResult = { [key in keyof T]: boolean \| ErrorList }`

`type ErrorList = Array`
| N -onValidate | Function | | Typescript:`(result: ValidateResultContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。
`type ValidateResultContext = Omit, 'e'>`
| N +onReset | Function | | Typescript: `(context: { e?: FormResetEvent }) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +onSubmit | Function | | Typescript: `(context: SubmitContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。
`interface SubmitContext { e?: FormSubmitEvent; validateResult: FormValidateResult; firstError?: string; fields?: any }`

`type FormValidateResult = boolean \| ValidateResultObj`

`type ValidateResultObj = { [key in keyof T]: boolean \| ValidateResultList }`

`type ValidateResultList = Array`

`type AllValidateResult = CustomValidateObj \| ValidateResultType`

`interface ValidateResultType extends FormRule { result: boolean }`

`type ValidateResult = { [key in keyof T]: boolean \| ErrorList }`

`type ErrorList = Array`
| N +onValidate | Function | | Typescript: `(result: ValidateResultContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。
`type ValidateResultContext = Omit, 'e'>`
| N ### Form Events name | params | description -- | -- | -- -reset | `(context: { e?: FormResetEvent })` | \- +reset | `(context: { e?: FormResetEvent })` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) submit | `(context: SubmitContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。
`interface SubmitContext { e?: FormSubmitEvent; validateResult: FormValidateResult; firstError?: string; fields?: any }`

`type FormValidateResult = boolean \| ValidateResultObj`

`type ValidateResultObj = { [key in keyof T]: boolean \| ValidateResultList }`

`type ValidateResultList = Array`

`type AllValidateResult = CustomValidateObj \| ValidateResultType`

`interface ValidateResultType extends FormRule { result: boolean }`

`type ValidateResult = { [key in keyof T]: boolean \| ErrorList }`

`type ErrorList = Array`
validate | `(result: ValidateResultContext)` | [see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。
`type ValidateResultContext = Omit, 'e'>`
@@ -43,7 +43,7 @@ name | params | return | description -- | -- | -- | -- clearValidate | `(fields?: Array)` | \- | required reset | `(params?: FormResetParams)` | \- | required。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。
`interface FormResetParams { type?: 'initial' \| 'empty'; fields?: Array }`
-setValidateMessage | `(message: FormValidateMessage)` | \- | required。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。
`type FormValidateMessage = { [field in keyof FormData]: FormItemValidateMessage[] }`

`interface FormItemValidateMessage { type: 'warning' \| 'error'; message: string }`
+setValidateMessage | `(message: FormValidateMessage)` | \- | required。Sets custom validation results, such as directly displaying remote validation messages. Note: This method must be called after the component is mounted. `FormData` refers to the generic type of form data。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。
`type FormValidateMessage = { [field in keyof FormData]: FormItemValidateMessage[] }`

`interface FormItemValidateMessage { type: 'warning' \| 'error' \| 'success'; message: string }`
submit | `(params?: { showErrorMessage?: boolean })` | \- | required validate | `(params?: FormValidateParams)` | `Promise>` | required。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。
`interface FormValidateParams { fields?: Array; showErrorMessage?: boolean; trigger?: ValidateTriggerType }`

`type ValidateTriggerType = 'blur' \| 'change' \| 'submit' \| 'all'`
validateOnly | `(params?: Pick)` | `Promise>` | required @@ -54,40 +54,40 @@ validateOnly | `(params?: Pick)` | `P name | type | default | description | required -- | -- | -- | -- | -- for | String | - | \- | N -help | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N -label | String / Slot / Function | '' | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +help | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +label | String / Slot / Function | '' | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N labelAlign | String | - | options: left/right/top | N labelWidth | String / Number | - | \- | N name | String | - | \- | N requiredMark | Boolean | undefined | \- | N -rules | Array | - | Typescript:`Array` | N +rules | Array | - | Typescript: `Array` | N showErrorMessage | Boolean | undefined | \- | N -status | String | - | Typescript:`'error' \| 'warning' \| 'success' \| 'validating'` | N -statusIcon | Boolean / Slot / Function | undefined | Typescript:`boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +status | String | - | Typescript: `'error' \| 'warning' \| 'success' \| 'validating'` | N +statusIcon | Boolean / Slot / Function | undefined | Typescript: `boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N successBorder | Boolean | false | \- | N -tips | String / Slot / Function | - | Typescript:`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N +tips | String / Slot / Function | - | Typescript: `string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N ### FormRule name | type | default | description | required -- | -- | -- | -- | -- boolean | Boolean | - | \- | N -date | Boolean / Object | - | Typescript:`boolean \| IsDateOptions` `interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts) | N -email | Boolean / Object | - | Typescript:`boolean \| IsEmailOptions` `import { IsEmailOptions } from 'validator/es/lib/isEmail'`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts) | N -enum | Array | - | Typescript:`Array` | N +date | Boolean / Object | - | Typescript: `boolean \| IsDateOptions` `interface IsDateOptions { format: string; strictMode: boolean; delimiters: string[] }`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts) | N +email | Boolean / Object | - | Typescript: `boolean \| IsEmailOptions` `import { IsEmailOptions } from 'validator/es/lib/isEmail'`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts) | N +enum | Array | - | Typescript: `Array` | N idcard | Boolean | - | \- | N len | Number / Boolean | - | \- | N max | Number / Boolean | - | \- | N message | String | - | \- | N min | Number / Boolean | - | \- | N number | Boolean | - | \- | N -pattern | String / Object | - | Typescript:`RegExp \| string` | N +pattern | String / Object | - | Typescript: `RegExp \| string` | N required | Boolean | - | \- | N telnumber | Boolean | - | \- | N -trigger | String | change | Typescript:`ValidateTriggerType` | N +trigger | String | change | Typescript: `ValidateTriggerType` | N type | String | error | options: error/warning | N -url | Boolean / Object | - | Typescript:`boolean \| IsURLOptions` `import { IsURLOptions } from 'validator/es/lib/isURL'`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts) | N -validator | Function | - | Typescript:`CustomValidator` `type CustomValidator = (val: ValueType) => CustomValidateResolveType \| Promise` `type CustomValidateResolveType = boolean \| CustomValidateObj` `interface CustomValidateObj { result: boolean; message: string; type?: 'error' \| 'warning' \| 'success' }` `type ValueType = any`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts) | N +url | Boolean / Object | - | Typescript: `boolean \| IsURLOptions` `import { IsURLOptions } from 'validator/es/lib/isURL'`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts) | N +validator | Function | - | Typescript: `CustomValidator` `type CustomValidator = (val: ValueType) => CustomValidateResolveType \| Promise` `type CustomValidateResolveType = boolean \| CustomValidateObj` `interface CustomValidateObj { result: boolean; message: string; type?: 'error' \| 'warning' \| 'success' }` `type ValueType = any`。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts) | N whitespace | Boolean | - | \- | N ### FormErrorMessage diff --git a/packages/products/tdesign-vue-next/packages/components/form/form.md b/packages/products/tdesign-vue-next/packages/components/form/form.md index cf598b90c..9a2085673 100644 --- a/packages/products/tdesign-vue-next/packages/components/form/form.md +++ b/packages/products/tdesign-vue-next/packages/components/form/form.md @@ -25,7 +25,7 @@ scrollToFirstError | String | - | 表单校验不通过时,是否自动滚动 showErrorMessage | Boolean | true | 校验不通过时,是否显示错误提示信息,统一控制全部表单项。如果希望控制单个表单项,请给 FormItem 设置该属性 | N statusIcon | Boolean / Slot / Function | undefined | 校验状态图标,值为 `true` 显示默认图标,默认图标有 成功、失败、警告 等,不同的状态图标不同。`statusIcon` 值为 `false`,不显示图标。`statusIcon` 值类型为渲染函数,则可以自定义右侧状态图标。TS 类型:`boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N submitWithWarningMessage | Boolean | false | 【讨论中】当校验结果只有告警信息时,是否触发 `submit` 提交事件 | N -onReset | Function | | TS 类型:`(context: { e?: FormResetEvent }) => void`
表单重置时触发 | N +onReset | Function | | TS 类型:`(context: { e?: FormResetEvent }) => void`
表单重置时触发。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) | N onSubmit | Function | | TS 类型:`(context: SubmitContext) => void`
表单提交时触发。其中 `context.validateResult` 表示校验结果,`context.firstError` 表示校验不通过的第一个规则提醒。`context.validateResult` 值为 `true` 表示校验通过;如果校验不通过,`context.validateResult` 值为校验结果列表。
【注意】⚠️ 默认情况,输入框按下 Enter 键会自动触发提交事件,如果希望禁用这个默认行为,可以给输入框添加 enter 事件,并在事件中设置 `e.preventDefault()`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。
`interface SubmitContext { e?: FormSubmitEvent; validateResult: FormValidateResult; firstError?: string; fields?: any }`

`type FormValidateResult = boolean \| ValidateResultObj`

`type ValidateResultObj = { [key in keyof T]: boolean \| ValidateResultList }`

`type ValidateResultList = Array`

`type AllValidateResult = CustomValidateObj \| ValidateResultType`

`interface ValidateResultType extends FormRule { result: boolean }`

`type ValidateResult = { [key in keyof T]: boolean \| ErrorList }`

`type ErrorList = Array`
| N onValidate | Function | | TS 类型:`(result: ValidateResultContext) => void`
校验结束后触发,result 值为 true 表示校验通过;如果校验不通过,result 值为校验结果列表。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。
`type ValidateResultContext = Omit, 'e'>`
| N @@ -33,7 +33,7 @@ onValidate | Function | | TS 类型:`(result: ValidateResultContext 名称 | 参数 | 描述 -- | -- | -- -reset | `(context: { e?: FormResetEvent })` | 表单重置时触发 +reset | `(context: { e?: FormResetEvent })` | 表单重置时触发。[通用类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/common.ts) submit | `(context: SubmitContext)` | 表单提交时触发。其中 `context.validateResult` 表示校验结果,`context.firstError` 表示校验不通过的第一个规则提醒。`context.validateResult` 值为 `true` 表示校验通过;如果校验不通过,`context.validateResult` 值为校验结果列表。
【注意】⚠️ 默认情况,输入框按下 Enter 键会自动触发提交事件,如果希望禁用这个默认行为,可以给输入框添加 enter 事件,并在事件中设置 `e.preventDefault()`。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。
`interface SubmitContext { e?: FormSubmitEvent; validateResult: FormValidateResult; firstError?: string; fields?: any }`

`type FormValidateResult = boolean \| ValidateResultObj`

`type ValidateResultObj = { [key in keyof T]: boolean \| ValidateResultList }`

`type ValidateResultList = Array`

`type AllValidateResult = CustomValidateObj \| ValidateResultType`

`interface ValidateResultType extends FormRule { result: boolean }`

`type ValidateResult = { [key in keyof T]: boolean \| ErrorList }`

`type ErrorList = Array`
validate | `(result: ValidateResultContext)` | 校验结束后触发,result 值为 true 表示校验通过;如果校验不通过,result 值为校验结果列表。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/blob/develop/packages/components/form/type.ts)。
`type ValidateResultContext = Omit, 'e'>`
@@ -43,7 +43,7 @@ validate | `(result: ValidateResultContext)` | 校验结束后触发 -- | -- | -- | -- clearValidate | `(fields?: Array)` | \- | 必需。清空校验结果。可使用 fields 指定清除部分字段的校验结果,fields 值为空则表示清除所有字段校验结果。清除邮箱校验结果示例:`clearValidate(['email'])` reset | `(params?: FormResetParams)` | \- | 必需。重置表单,表单里面没有重置按钮`