diff --git a/packages/products/tdesign-miniprogram/packages/components/form-item/README.en-US.md b/packages/products/tdesign-miniprogram/packages/components/form-item/README.en-US.md new file mode 100644 index 00000000..431513d9 --- /dev/null +++ b/packages/products/tdesign-miniprogram/packages/components/form-item/README.en-US.md @@ -0,0 +1,21 @@ +:: BASE_DOC :: + +## API + + +### FormItem Props + +name | type | default | description | required +-- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +arrow | Boolean | false | \- | N +for | String | - | \- | N +help | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N +label | String / Slot | '' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N +label-align | String | - | options: left/right/top | N +label-width | String / Number | - | \- | N +name | String | - | \- | N +required-mark | Boolean | undefined | \- | N +rules | Array | - | Typescript：`Array` | N +show-error-message | Boolean | undefined | \- | N diff --git a/packages/products/tdesign-miniprogram/packages/components/form-item/README.md b/packages/products/tdesign-miniprogram/packages/components/form-item/README.md new file mode 100644 index 00000000..9b39dee9 --- /dev/null +++ b/packages/products/tdesign-miniprogram/packages/components/form-item/README.md @@ -0,0 +1,21 @@ +:: BASE_DOC :: + +## API + + +### FormItem Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N +arrow | Boolean | false | 是否显示右侧箭头 | N +for | String | - | label 原生属性 | N +help | String / Slot | - | 表单项说明内容。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N +label | String / Slot | '' | 字段标签名称。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N +label-align | String | - | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign。可选项：left/right/top | N +label-width | String / Number | - | 可以整体设置标签宽度，优先级高于 Form.labelWidth | N +name | String | - | 表单字段名称 | N +required-mark | Boolean | undefined | 是否显示必填符号（*），优先级高于 Form.requiredMark | N +rules | Array | - | 表单字段校验规则。TS 类型：`Array` | N +show-error-message | Boolean | undefined | 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` | N diff --git a/packages/products/tdesign-miniprogram/packages/components/form-item/props.ts b/packages/products/tdesign-miniprogram/packages/components/form-item/props.ts new file mode 100644 index 00000000..e448dac2 --- /dev/null +++ b/packages/products/tdesign-miniprogram/packages/components/form-item/props.ts @@ -0,0 +1,57 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdFormItemProps } from './type'; +const props: TdFormItemProps = { + /** 是否显示右侧箭头 */ + arrow: { + type: Boolean, + value: false, + }, + /** label 原生属性 */ + for: { + type: String, + value: '', + }, + /** 表单项说明内容 */ + help: { + type: String, + }, + /** 字段标签名称 */ + label: { + type: String, + value: '', + }, + /** 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign */ + labelAlign: { + type: String, + }, + /** 可以整体设置标签宽度，优先级高于 Form.labelWidth */ + labelWidth: { + type: null, + }, + /** 表单字段名称 */ + name: { + type: String, + value: '', + }, + /** 是否显示必填符号（*），优先级高于 Form.requiredMark */ + requiredMark: { + type: null, + value: undefined, + }, + /** 表单字段校验规则 */ + rules: { + type: Array, + }, + /** 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` */ + showErrorMessage: { + type: null, + value: undefined, + }, +}; + +export default props; diff --git a/packages/products/tdesign-miniprogram/packages/components/form-item/type.ts b/packages/products/tdesign-miniprogram/packages/components/form-item/type.ts new file mode 100644 index 00000000..0e4547e7 --- /dev/null +++ b/packages/products/tdesign-miniprogram/packages/components/form-item/type.ts @@ -0,0 +1,82 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +export interface TdFormItemProps { + /** + * 是否显示右侧箭头 + * @default false + */ + arrow?: { + type: BooleanConstructor; + value?: boolean; + }; + /** + * label 原生属性 + * @default '' + */ + for?: { + type: StringConstructor; + value?: string; + }; + /** + * 表单项说明内容 + */ + help?: { + type: StringConstructor; + value?: string; + }; + /** + * 字段标签名称 + * @default '' + */ + label?: { + type: StringConstructor; + value?: string; + }; + /** + * 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。默认使用 Form 的对齐方式，优先级高于 Form.labelAlign + */ + labelAlign?: { + type: StringConstructor; + value?: 'left' | 'right' | 'top'; + }; + /** + * 可以整体设置标签宽度，优先级高于 Form.labelWidth + */ + labelWidth?: { + type: null; + value?: string | number; + }; + /** + * 表单字段名称 + * @default '' + */ + name?: { + type: StringConstructor; + value?: string; + }; + /** + * 是否显示必填符号（*），优先级高于 Form.requiredMark + */ + requiredMark?: { + type: BooleanConstructor; + value?: boolean; + }; + /** + * 表单字段校验规则 + */ + rules?: { + type: ArrayConstructor; + value?: Array; + }; + /** + * 校验不通过时，是否显示错误提示信息，优先级高于 `Form.showErrorMessage` + */ + showErrorMessage?: { + type: BooleanConstructor; + value?: boolean; + }; +} diff --git a/packages/products/tdesign-miniprogram/packages/components/form/README.en-US.md b/packages/products/tdesign-miniprogram/packages/components/form/README.en-US.md new file mode 100644 index 00000000..27f4ae29 --- /dev/null +++ b/packages/products/tdesign-miniprogram/packages/components/form/README.en-US.md @@ -0,0 +1,102 @@ +:: BASE_DOC :: + +## API + +### Form Props + +name | type | default | description | required +-- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +colon | Boolean | false | \- | N +data | Object | {} | Typescript：`FormData` | N +disabled | Boolean | undefined | \- | N +error-message | Object | - | Typescript：`FormErrorMessage` | N +label-align | String | right | options: left/right/top | N +label-width | String / Number | '81px' | \- | N +readonly | Boolean | undefined | \- | N +required-mark | Boolean | undefined | \- | N +required-mark-position | String | - | Display position of required symbols。options: left/right | N +reset-type | 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-miniprogram/blob/develop/packages/components/form/type.ts) | N +scroll-to-first-error | String | - | options: ''/smooth/auto | N +show-error-message | Boolean | true | \- | N +submit-with-warning-message | Boolean | false | \- | N + +### Form Events + +name | params | description +-- | -- | -- +reset | `(detail: { e?: FormResetEvent })` | \- +submit | `(context: SubmitContext)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/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-miniprogram/blob/develop/packages/components/form/type.ts)。
`type ValidateResultContext = Omit, 'e'>`
+ +### FormInstanceFunctions 组件实例方法 + +name | params | return | description +-- | -- | -- | -- +clear-validate | `(fields?: Array)` | \- | required +reset | `(params?: FormResetParams)` | \- | required。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts)。
`interface FormResetParams { type?: 'initial' \| 'empty'; fields?: Array }`
+set-validate-message | `(message: FormValidateMessage)` | \- | required。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts)。
`type FormValidateMessage = { [field in keyof FormData]: FormItemValidateMessage[] }`

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

`type ValidateTriggerType = 'blur' \| 'change' \| 'submit' \| 'all'`
+ + +### FormItem Props + +name | type | default | description | required +-- | -- | -- | -- | -- +style | Object | - | CSS(Cascading Style Sheets) | N +custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N +arrow | Boolean | false | \- | N +for | String | - | \- | N +help | String / Slot | - | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N +label | String / Slot | '' | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/common/common.ts) | N +label-align | String | - | options: left/right/top | N +label-width | String / Number | - | \- | N +name | String | - | \- | N +required-mark | Boolean | undefined | \- | N +rules | Array | - | Typescript：`Array` | N +show-error-message | Boolean | undefined | \- | 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-miniprogram/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-miniprogram/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 +required | Boolean | - | \- | N +telnumber | Boolean | - | \- | 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-miniprogram/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-miniprogram/blob/develop/packages/components/form/type.ts) | N +whitespace | Boolean | - | \- | N + +### FormErrorMessage + +name | type | default | description | required +-- | -- | -- | -- | -- +boolean | String | - | \- | N +date | String | - | \- | N +enum | String | - | \- | N +idcard | String | - | \- | N +len | String | - | \- | N +max | String | - | \- | N +min | String | - | \- | N +number | String | - | \- | N +pattern | String | - | \- | N +required | String | - | \- | N +telnumber | String | - | \- | N +url | String | - | \- | N +validator | String | - | \- | N +whitespace | String | - | \- | N diff --git a/packages/products/tdesign-miniprogram/packages/components/form/README.md b/packages/products/tdesign-miniprogram/packages/components/form/README.md new file mode 100644 index 00000000..1e446329 --- /dev/null +++ b/packages/products/tdesign-miniprogram/packages/components/form/README.md @@ -0,0 +1,102 @@ +:: BASE_DOC :: + +## API + +### Form Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +style | Object | - | 样式 | N +custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N +colon | Boolean | false | 是否在表单标签字段右侧显示冒号 | N +data | Object | {} | 表单数据。TS 类型：`FormData` | N +disabled | Boolean | undefined | 是否禁用整个表单 | N +error-message | Object | - | 表单错误信息配置，示例：`{ idcard: '请输入正确的身份证号码', max: '字符长度不能超过 ${max}' }`。TS 类型：`FormErrorMessage` | N +label-align | String | right | 表单字段标签对齐方式：左对齐、右对齐、顶部对齐。可选项：left/right/top | N +label-width | String / Number | '81px' | 可以整体设置label标签宽度，默认为81px | N +readonly | Boolean | undefined | 是否整个表单只读 | N +required-mark | Boolean | undefined | 是否显示必填符号（*），默认显示 | N +required-mark-position | String | - | 表单必填符号（*）显示位置。可选项：left/right | N +reset-type | String | empty | 重置表单的方式，值为 empty 表示重置表单为空，值为 initial 表示重置表单数据为初始值。可选项：empty/initial | N +rules | Object | - | 表单字段校验规则。TS 类型：`FormRules` `type FormRules = { [field in keyof T]?: Array }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/packages/components/form/type.ts) | N +scroll-to-first-error | String | - | 表单校验不通过时，是否自动滚动到第一个校验不通过的字段，平滑滚动或是瞬间直达。值为空则表示不滚动。可选项：''/smooth/auto | N +show-error-message | Boolean | true | 校验不通过时，是否显示错误提示信息，统一控制全部表单项。如果希望控制单个表单项，请给 FormItem 设置该属性 | N +submit-with-warning-message | Boolean | false | 【讨论中】当校验结果只有告警信息时，是否触发 `submit` 提交事件 | N + +### Form Events + +名称 | 参数 | 描述 +-- | -- | -- +reset | `(detail: { e?: FormResetEvent })` | 表单重置时触发 +submit | `(context: SubmitContext)` | 表单提交时触发。其中 `context.validateResult` 表示校验结果，`context.firstError` 表示校验不通过的第一个规则提醒。`context.validateResult` 值为 `true` 表示校验通过；如果校验不通过，`context.validateResult` 值为校验结果列表。
【注意】⚠️ 默认情况，输入框按下 Enter 键会自动触发提交事件，如果希望禁用这个默认行为，可以给输入框添加 enter 事件，并在事件中设置 `e.preventDefault()`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/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-miniprogram/blob/develop/packages/components/form/type.ts)。
`type ValidateResultContext = Omit, 'e'>`
+ +### FormInstanceFunctions 组件实例方法 + +名称 | 参数 | 返回值 | 描述 +-- | -- | -- | -- +clear-validate | `(fields?: Array)` | \- | 必需。清空校验结果。可使用 fields 指定清除部分字段的校验结果，fields 值为空则表示清除所有字段校验结果。清除邮箱校验结果示例：`clearValidate(['email'])` +reset | `(params?: FormResetParams)` | \- | 必需。重置表单，表单里面没有重置按钮`