docs(checkbox): mobile-react checkbox文档对齐mobile-vue

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<TNode \| String>`。[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`<br/> | 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<CheckboxOption>` `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<string \| number \| boolean>`。[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<string \| number \| boolean>`。[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`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/> | N

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<TNode \| String>`。[通用类型定义](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`<br/>值变化时触发 | 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<CheckboxOption>` `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<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/checkbox/type.ts) | N
+defaultValue | Array | [] | 选中值。非受控属性。TS 类型：`T` `type CheckboxGroupValue = Array<string \| number \| boolean>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/checkbox/type.ts) | N
+onChange | Function | | TS 类型：`(value: T, context: CheckboxGroupChangeContext) => void`<br/>值变化时触发。`context.current` 表示当前变化的数据项，如果是全选则为空；`context.type` 表示引起选中数据变化的是选中或是取消选中，`context.option` 表示当前变化的数据项。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/checkbox/type.ts)。<br/>`interface CheckboxGroupChangeContext { e: Event; current: string \| number; option: CheckboxOption \| TdCheckboxProps; type: 'check' \| 'uncheck' }`<br/> | N

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: [],
+};

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<TNode | String>;
+ /**
+ * 是否为半选
+ * @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<HTMLInputElement> }) => void;
+}
+
+export interface TdCheckboxGroupProps<T = CheckboxGroupValue> {
+ /**
+ * 是否禁用组件。优先级：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<CheckboxOption>;
+ /**
+ * 选中值
+ * @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<string | number | boolean>;
+
+export interface CheckboxGroupChangeContext {
+ e: Event;
+ current: string | number;
+ option: CheckboxOption | TdCheckboxProps;
+ type: 'check' | 'uncheck';
+}

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`<br/>值变化时触发 | N
 

packages/products/tdesign-mobile-vue/src/checkbox/props.ts

@@ -76,7 +76,7 @@ export default {
  return ['left', 'right'].includes(val);
  },
  },
- /** 【暂不支持】只读状态 */
+ /** 只读状态 */
  readonly: Boolean,
  /** 多选框的值 */
  value: {

packages/products/tdesign-mobile-vue/src/checkbox/type.ts

@@ -83,7 +83,7 @@ export interface TdCheckboxProps {
  */
  placement?: 'left' | 'right';
  /**
- * 【暂不支持】只读状态
+ * 只读状态
  * @default false
  */
  readonly?: boolean;