diff --git a/db/TDesign.db b/db/TDesign.db index 0c6e65cfc..473b6c658 100644 Binary files a/db/TDesign.db and b/db/TDesign.db differ diff --git a/packages/products/tdesign-mobile-react/src/checkbox/checkbox.en-US.md b/packages/products/tdesign-mobile-react/src/checkbox/checkbox.en-US.md new file mode 100644 index 000000000..e1adbb0c8 --- /dev/null +++ b/packages/products/tdesign-mobile-react/src/checkbox/checkbox.en-US.md @@ -0,0 +1,44 @@ +:: BASE_DOC :: + +## API + +### Checkbox Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +block | Boolean | true | \- | N +borderless | Boolean | false | \- | N +checkAll | Boolean | false | \- | N +checked | Boolean | false | \- | N +defaultChecked | Boolean | false | uncontrolled property | N +children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +contentDisabled | Boolean | - | \- | N +disabled | Boolean | undefined | \- | N +icon | String / Boolean / Array | 'circle' | Typescript：`'circle' \| 'line' \| 'rectangle' \| boolean \| Array`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +indeterminate | Boolean | false | \- | N +label | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +maxContentRow | Number | 5 | \- | N +maxLabelRow | Number | 3 | \- | N +name | String | - | \- | N +placement | String | left | options: left/right | N +readonly | Boolean | false | \- | N +value | String / Number / Boolean | - | value of checkbox。Typescript：`string \| number \| boolean` | N +onChange | Function | | Typescript：`(checked: boolean, context: { e: ChangeEvent }) => void`
| N + + +### CheckboxGroup Props + +name | type | default | description | required +-- | -- | -- | -- | -- +className | String | - | className of component | N +style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N +disabled | Boolean | undefined | \- | N +max | Number | undefined | \- | N +name | String | - | \- | N +options | Array | - | Typescript：`Array` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj extends TdCheckboxProps { text?: string; }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/checkbox/type.ts) | N +value | Array | [] | Typescript：`T` `type CheckboxGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/checkbox/type.ts) | N +defaultValue | Array | [] | uncontrolled property。Typescript：`T` `type CheckboxGroupValue = Array`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/checkbox/type.ts) | N +onChange | Function | | Typescript：`(value: T, context: CheckboxGroupChangeContext) => void`
[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/checkbox/type.ts)。
`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`
| N diff --git a/packages/products/tdesign-mobile-react/src/checkbox/checkbox.md b/packages/products/tdesign-mobile-react/src/checkbox/checkbox.md new file mode 100644 index 000000000..4d28a84b5 --- /dev/null +++ b/packages/products/tdesign-mobile-react/src/checkbox/checkbox.md @@ -0,0 +1,44 @@ +:: BASE_DOC :: + +## API + +### Checkbox Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +block | Boolean | true | 是否为块级元素 | N +borderless | Boolean | false | 是否开启无边框模式 | N +checkAll | Boolean | false | 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 | N +checked | Boolean | false | 是否选中 | N +defaultChecked | Boolean | false | 是否选中。非受控属性 | N +children | TNode | - | 多选框内容，同 label。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +content | TNode | - | 多选框内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +contentDisabled | Boolean | - | 是否禁用组件内容（content）触发选中 | N +disabled | Boolean | undefined | 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled | N +icon | String / Boolean / Array | 'circle' | 自定义选中图标和非选中图标。使用 Array 时表示：[选中态图标，非选中态图标]。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标。。TS 类型：`'circle' \| 'line' \| 'rectangle' \| boolean \| Array`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +indeterminate | Boolean | false | 是否为半选 | N +label | TNode | - | 主文案。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N +maxContentRow | Number | 5 | 内容最大行数限制 | N +maxLabelRow | Number | 3 | 主文案最大行数限制 | N +name | String | - | HTML 元素原生属性 | N +placement | String | left | 多选框和内容相对位置。可选项：left/right | N +readonly | Boolean | false | 只读状态 | N +value | String / Number / Boolean | - | 多选框的值。TS 类型：`string \| number \| boolean` | N +onChange | Function | | TS 类型：`(checked: boolean, context: { e: ChangeEvent }) => void`
值变化时触发 | N + + +### CheckboxGroup Props + +名称 | 类型 | 默认值 | 描述 | 必传 +-- | -- | -- | -- | -- +className | String | - | 类名 | N +style | Object | - | 样式，TS 类型：`React.CSSProperties` | N +disabled | Boolean | undefined | 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled | N +max | Number | undefined | 支持最多选中的数量 | N +name | String | - | 统一设置内部复选框 HTML 属性 | N +options | Array | - | 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」。TS 类型：`Array` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj extends TdCheckboxProps { text?: string; }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/checkbox/type.ts) | N +value | Array | [] | 选中值。TS 类型：`T` `type CheckboxGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/checkbox/type.ts) | N +defaultValue | Array | [] | 选中值。非受控属性。TS 类型：`T` `type CheckboxGroupValue = Array`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/checkbox/type.ts) | N +onChange | Function | | TS 类型：`(value: T, context: CheckboxGroupChangeContext) => void`
值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中，`context.option` 表示当前变化的数据项。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/checkbox/type.ts)。
`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`
| N diff --git a/packages/products/tdesign-mobile-react/src/checkbox/defaultProps.ts b/packages/products/tdesign-mobile-react/src/checkbox/defaultProps.ts new file mode 100644 index 000000000..1a8107993 --- /dev/null +++ b/packages/products/tdesign-mobile-react/src/checkbox/defaultProps.ts @@ -0,0 +1,25 @@ +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TdCheckboxProps, TdCheckboxGroupProps } from './type'; + +export const checkboxDefaultProps: TdCheckboxProps = { + block: true, + borderless: false, + checkAll: false, + defaultChecked: false, + disabled: undefined, + icon: 'circle', + indeterminate: false, + maxContentRow: 5, + maxLabelRow: 3, + placement: 'left', + readonly: false, +}; + +export const checkboxGroupDefaultProps: TdCheckboxGroupProps = { + disabled: undefined, + max: undefined, + defaultValue: [], +}; diff --git a/packages/products/tdesign-mobile-react/src/checkbox/type.ts b/packages/products/tdesign-mobile-react/src/checkbox/type.ts new file mode 100644 index 000000000..e4a0137c2 --- /dev/null +++ b/packages/products/tdesign-mobile-react/src/checkbox/type.ts @@ -0,0 +1,148 @@ +/* eslint-disable */ + +/** + * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC + * */ + +import { TNode } from '../common'; +import { ChangeEvent } from 'react'; + +export interface TdCheckboxProps { + /** + * 是否为块级元素 + * @default true + */ + block?: boolean; + /** + * 是否开启无边框模式 + * @default false + */ + borderless?: boolean; + /** + * 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 + * @default false + */ + checkAll?: boolean; + /** + * 是否选中 + * @default false + */ + checked?: boolean; + /** + * 是否选中，非受控属性 + * @default false + */ + defaultChecked?: boolean; + /** + * 多选框内容，同 label + */ + children?: TNode; + /** + * 多选框内容 + */ + content?: TNode; + /** + * 是否禁用组件内容（content）触发选中 + */ + contentDisabled?: boolean; + /** + * 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled + */ + disabled?: boolean; + /** + * 自定义选中图标和非选中图标。使用 Array 时表示：[选中态图标，非选中态图标]。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标。 + * @default 'circle' + */ + icon?: 'circle' | 'line' | 'rectangle' | boolean | Array; + /** + * 是否为半选 + * @default false + */ + indeterminate?: boolean; + /** + * 主文案 + */ + label?: TNode; + /** + * 内容最大行数限制 + * @default 5 + */ + maxContentRow?: number; + /** + * 主文案最大行数限制 + * @default 3 + */ + maxLabelRow?: number; + /** + * HTML 元素原生属性 + * @default '' + */ + name?: string; + /** + * 多选框和内容相对位置 + * @default left + */ + placement?: 'left' | 'right'; + /** + * 只读状态 + * @default false + */ + readonly?: boolean; + /** + * 多选框的值 + */ + value?: string | number | boolean; + /** + * 值变化时触发 + */ + onChange?: (checked: boolean, context: { e: ChangeEvent }) => void; +} + +export interface TdCheckboxGroupProps { + /** + * 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled + */ + disabled?: boolean; + /** + * 支持最多选中的数量 + */ + max?: number; + /** + * 统一设置内部复选框 HTML 属性 + * @default '' + */ + name?: string; + /** + * 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」 + */ + options?: Array; + /** + * 选中值 + * @default [] + */ + value?: T; + /** + * 选中值，非受控属性 + * @default [] + */ + defaultValue?: T; + /** + * 值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中，`context.option` 表示当前变化的数据项 + */ + onChange?: (value: T, context: CheckboxGroupChangeContext) => void; +} + +export type CheckboxOption = string | number | CheckboxOptionObj; + +export interface CheckboxOptionObj extends TdCheckboxProps { + text?: string; +} + +export type CheckboxGroupValue = Array; + +export interface CheckboxGroupChangeContext { + e: Event; + current: string | number; + option: CheckboxOption | TdCheckboxProps; + type: 'check' | 'uncheck'; +} diff --git a/packages/products/tdesign-mobile-vue/src/checkbox/checkbox.md b/packages/products/tdesign-mobile-vue/src/checkbox/checkbox.md index d09821de6..e4ab7cefc 100644 --- a/packages/products/tdesign-mobile-vue/src/checkbox/checkbox.md +++ b/packages/products/tdesign-mobile-vue/src/checkbox/checkbox.md @@ -21,7 +21,7 @@ maxContentRow | Number | 5 | 内容最大行数限制 | N maxLabelRow | Number | 3 | 主文案最大行数限制 | N name | String | - | HTML 元素原生属性 | N placement | String | left | 多选框和内容相对位置。可选项：left/right | N -readonly | Boolean | false | 【暂不支持】只读状态 | N +readonly | Boolean | false | 只读状态 | N value | String / Number / Boolean | - | 多选框的值。TS 类型：`string \| number \| boolean` | N onChange | Function | | TS 类型：`(checked: boolean, context: { e: Event }) => void`
值变化时触发 | N diff --git a/packages/products/tdesign-mobile-vue/src/checkbox/props.ts b/packages/products/tdesign-mobile-vue/src/checkbox/props.ts index 8386954ea..e074986a7 100644 --- a/packages/products/tdesign-mobile-vue/src/checkbox/props.ts +++ b/packages/products/tdesign-mobile-vue/src/checkbox/props.ts @@ -76,7 +76,7 @@ export default { return ['left', 'right'].includes(val); }, }, - /** 【暂不支持】只读状态 */ + /** 只读状态 */ readonly: Boolean, /** 多选框的值 */ value: { diff --git a/packages/products/tdesign-mobile-vue/src/checkbox/type.ts b/packages/products/tdesign-mobile-vue/src/checkbox/type.ts index 383c901be..eb1241677 100644 --- a/packages/products/tdesign-mobile-vue/src/checkbox/type.ts +++ b/packages/products/tdesign-mobile-vue/src/checkbox/type.ts @@ -83,7 +83,7 @@ export interface TdCheckboxProps { */ placement?: 'left' | 'right'; /** - * 【暂不支持】只读状态 + * 只读状态 * @default false */ readonly?: boolean; diff --git a/packages/scripts/api.json b/packages/scripts/api.json index 552ec4f2d..e66d77fec 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -25898,6 +25898,7 @@ "1", "2", "4", + "8", "16", "32", "64" @@ -25923,7 +25924,7 @@ "html_attribute": 0, "trigger_elements": "", "deprecated": 0, - "version": null, + "version": "", "test_description": null, "support_default_value": 0, "field_category_text": "Props", @@ -25931,6 +25932,7 @@ "Vue(PC)", "React(PC)", "Angular(PC)", + "Vue(Mobile)", "React(Mobile)", "Angular(Mobile)", "Miniprogram" @@ -25939,51 +25941,12 @@ "Boolean" ] }, - { - "id": 1712578906, - "platform_framework": [ - "8" - ], - "component": "Checkbox", - "field_category": 1, - "field_name": "readonly", - "field_type": [ - "4" - ], - "field_default_value": "false", - "field_enum": "", - "field_desc_zh": "【暂不支持】只读状态", - "field_desc_en": null, - "field_required": 0, - "event_input": "", - "create_time": "2024-04-08 12:21:46", - "update_time": "2024-04-08 12:21:46", - "event_output": null, - "custom_field_type": null, - "syntactic_sugar": null, - "readonly": 1, - "html_attribute": 0, - "trigger_elements": "", - "deprecated": 0, - "version": "", - "test_description": null, - "support_default_value": 0, - "field_category_text": "Props", - "platform_framework_text": [ - "Vue(Mobile)" - ], - "field_type_text": [ - "Boolean" - ] - }, { "id": 1707208468, "platform_framework": [ "1", "2", - "4", - "16", - "32" + "4" ], "component": "Checkbox", "field_category": 1, @@ -26013,9 +25976,7 @@ "platform_framework_text": [ "Vue(PC)", "React(PC)", - "Angular(PC)", - "React(Mobile)", - "Angular(Mobile)" + "Angular(PC)" ], "field_type_text": [ "String" @@ -26382,7 +26343,6 @@ { "id": 3521, "platform_framework": [ - "16", "32", "64" ], @@ -26412,7 +26372,6 @@ "support_default_value": 0, "field_category_text": "Props", "platform_framework_text": [ - "React(Mobile)", "Angular(Mobile)", "Miniprogram" ], @@ -26779,8 +26738,7 @@ { "id": 1233, "platform_framework": [ - "2", - "16" + "2" ], "component": "CheckboxGroup", "field_category": 2, @@ -26806,8 +26764,7 @@ "support_default_value": 0, "field_category_text": "Events", "platform_framework_text": [ - "React(PC)", - "React(Mobile)" + "React(PC)" ], "field_type_text": [] }, @@ -26847,7 +26804,8 @@ { "id": 1712648151, "platform_framework": [ - "8" + "8", + "16" ], "component": "CheckboxGroup", "field_category": 2, @@ -26873,7 +26831,8 @@ "support_default_value": 0, "field_category_text": "Events", "platform_framework_text": [ - "Vue(Mobile)" + "Vue(Mobile)", + "React(Mobile)" ], "field_type_text": [] },