From dfc0baea0377185be59f966701633c9c9a5da075 Mon Sep 17 00:00:00 2001 From: anlyyao Date: Wed, 9 Oct 2024 17:13:46 +0800 Subject: [PATCH] feat(CheckboxGroup): add keys props --- db/TDesign.db | Bin 1003520 -> 1003520 bytes .../props.ts} | 13 +- .../src/checkbox-group/type.ts | 75 ++++++++++ .../src/checkbox/README.en-US.md | 3 +- .../src/checkbox/README.md | 3 +- .../tdesign-miniprogram/src/checkbox/props.ts | 41 +++--- .../tdesign-miniprogram/src/checkbox/type.ts | 139 +++++++++++++----- .../src/checkbox/checkbox.en-US.md | 1 + .../src/checkbox/checkbox.md | 1 + .../tdesign-mobile-react/src/checkbox/type.ts | 6 +- .../src/checkbox/checkbox-group-props.ts | 4 + .../src/checkbox/checkbox.en-US.md | 1 + .../src/checkbox/checkbox.md | 1 + .../tdesign-mobile-vue/src/checkbox/type.ts | 6 +- packages/scripts/api.json | 80 +++++----- 15 files changed, 267 insertions(+), 107 deletions(-) rename packages/products/tdesign-miniprogram/src/{checkbox/checkbox-group-props.ts => checkbox-group/props.ts} (85%) create mode 100644 packages/products/tdesign-miniprogram/src/checkbox-group/type.ts diff --git a/db/TDesign.db b/db/TDesign.db index 4a8e31344dc76fff430ae9958a44178982941f86..e3fef10536353efc52b6fb8ad8229c65828e4151 100644 GIT binary patch delta 331 zcmZozVB4_3c7ilx-9#B@);b2gvaZIIttpHPW@2g&(P0E)rtKj*%o~Kc_!;gn@MrN|<=sD>$AMXD zvSGu9?Kd2llh~OU7`EGZFgLTZGzoPmw;%Rp24WTLS90&%#4F6Zo#NPygP@w`BW_8GISr0a)}> A!T { + /** + * 是否开启无边框模式 + * @default false + */ + borderless?: { + type: BooleanConstructor; + value?: boolean; + }; + /** + * 用来定义 value / label 在 `options` 中对应的字段别名 + */ + keys?: { + type: ObjectConstructor; + value?: KeysType; + }; + /** + * 支持最多选中的数量 + */ + max?: { + type: NumberConstructor; + value?: number; + }; + /** + * 统一设置内部复选框 HTML 属性 + * @default '' + */ + name?: { + type: StringConstructor; + value?: string; + }; + /** + * 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」 + * @default [] + */ + options?: { + type: ArrayConstructor; + value?: Array; + }; + /** + * 选中值 + * @default [] + */ + value?: { + type: ArrayConstructor; + value?: T; + }; + /** + * 选中值，非受控属性 + * @default [] + */ + defaultValue?: { + type: ArrayConstructor; + value?: T; + }; +} + +export type CheckboxOption = string | number | CheckboxOptionObj; + +export interface CheckboxOptionObj { + label?: string; + value?: string | number; + disabled?: boolean; + checkAll?: true; +} + +export type CheckboxGroupValue = Array; diff --git a/packages/products/tdesign-miniprogram/src/checkbox/README.en-US.md b/packages/products/tdesign-miniprogram/src/checkbox/README.en-US.md index 49930ccc4..c3c743d47 100644 --- a/packages/products/tdesign-miniprogram/src/checkbox/README.en-US.md +++ b/packages/products/tdesign-miniprogram/src/checkbox/README.en-US.md @@ -31,6 +31,7 @@ value | String / Number / Boolean | - | value of checkbox。Typescript：`string name | params | description -- | -- | -- change | `(checked: boolean, context: { value: boolean\|number\|string, label: boolean\|number\|string })` | \- + ### Checkbox External Classes className | Description @@ -49,7 +50,7 @@ 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 borderless | Boolean | false | \- | N -disabled | Boolean | - | \- | N +keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N max | Number | undefined | \- | N name | String | - | \- | N options | Array | [] | Typescript：`Array` `type CheckboxOption = string \| number \| CheckboxOptionObj` `interface CheckboxOptionObj { label?: string; value?: string \| number; disabled?: boolean; checkAll?: true }`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N diff --git a/packages/products/tdesign-miniprogram/src/checkbox/README.md b/packages/products/tdesign-miniprogram/src/checkbox/README.md index b83456bbe..260d884ad 100644 --- a/packages/products/tdesign-miniprogram/src/checkbox/README.md +++ b/packages/products/tdesign-miniprogram/src/checkbox/README.md @@ -31,6 +31,7 @@ value | String / Number / Boolean | - | 多选框的值。TS 类型：`string \| 名称 | 参数 | 描述 -- | -- | -- change | `(checked: boolean, context: { value: boolean\|number\|string, label: boolean\|number\|string })` | 值变化时触发。`context` 表示当前点击项内容。 + ### Checkbox External Classes 类名 | 描述 @@ -49,7 +50,7 @@ t-class-label | 标签样式类 style | Object | - | 样式 | N custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N borderless | Boolean | false | 是否开启无边框模式 | N -disabled | Boolean | - | 是否禁用组件，默认为 false。 CheckboxGroup.disabled < Checkbox.disabled ，后续新增 Form 组件后，Form.disabled 优先级最低 | N +keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | 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 { label?: string; value?: string \| number; disabled?: boolean; checkAll?: true }`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/checkbox-group/type.ts) | N diff --git a/packages/products/tdesign-miniprogram/src/checkbox/props.ts b/packages/products/tdesign-miniprogram/src/checkbox/props.ts index 96ac13cd1..2ca950974 100644 --- a/packages/products/tdesign-miniprogram/src/checkbox/props.ts +++ b/packages/products/tdesign-miniprogram/src/checkbox/props.ts @@ -6,10 +6,15 @@ import { TdCheckboxProps } from './type'; const props: TdCheckboxProps = { - /** 多选框和内容相对位置 */ - align: { - type: String, - value: 'left', + /** 是否为块级元素 */ + block: { + type: Boolean, + value: true, + }, + /** 是否开启无边框模式 */ + borderless: { + type: Boolean, + value: false, }, /** 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 */ checkAll: { @@ -26,11 +31,6 @@ const props: TdCheckboxProps = { type: Boolean, value: false, }, - /** 多选框颜色 */ - color: { - type: String, - value: '#0052d9', - }, /** 多选框内容 */ content: { type: String, @@ -39,18 +39,15 @@ const props: TdCheckboxProps = { contentDisabled: { type: Boolean, }, - /** 是否禁用组件 */ + /** 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled */ disabled: { - type: Boolean, + type: null, value: undefined, }, - /** 组件类名，分别用于设置 组件外层、多选框图标、主文案、内容 等元素类名 */ - externalClasses: { - type: Array, - }, - /** 自定义选中图标和非选中图标。示例：[选中态图标地址，非选中态图标地址] */ + /** 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标 */ icon: { - type: Array, + type: null, + value: 'circle', }, /** 是否为半选 */ indeterminate: { @@ -76,16 +73,16 @@ const props: TdCheckboxProps = { type: String, value: '', }, + /** 多选框和内容相对位置 */ + placement: { + type: String, + value: 'left', + }, /** 只读状态 */ readonly: { type: Boolean, value: false, }, - /** 自定义组件样式 */ - style: { - type: String, - value: '', - }, /** 多选框的值 */ value: { type: null, diff --git a/packages/products/tdesign-miniprogram/src/checkbox/type.ts b/packages/products/tdesign-miniprogram/src/checkbox/type.ts index cc6aab640..a351312dc 100644 --- a/packages/products/tdesign-miniprogram/src/checkbox/type.ts +++ b/packages/products/tdesign-miniprogram/src/checkbox/type.ts @@ -4,71 +4,136 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ -export interface TdCheckboxGroupProps { +export interface TdCheckboxProps { /** - * 是否禁用组件 + * 是否为块级元素 + * @default true + */ + block?: { + type: BooleanConstructor; + value?: boolean; + }; + /** + * 是否开启无边框模式 + * @default false + */ + borderless?: { + type: BooleanConstructor; + value?: boolean; + }; + /** + * 用于标识是否为「全选选项」。单独使用无效，需在 CheckboxGroup 中使用 * @default false */ + checkAll?: { + type: BooleanConstructor; + value?: boolean; + }; + /** + * 是否选中 + * @default false + */ + checked?: { + type: BooleanConstructor; + value?: boolean; + }; + /** + * 是否选中，非受控属性 + * @default false + */ + defaultChecked?: { + type: BooleanConstructor; + value?: boolean; + }; + /** + * 多选框内容 + */ + content?: { + type: StringConstructor; + value?: string; + }; + /** + * 是否禁用组件内容（content）触发选中 + */ + contentDisabled?: { + type: BooleanConstructor; + value?: boolean; + }; + /** + * 是否禁用组件。如果父组件存在 CheckboxGroup，默认值由 CheckboxGroup.disabled 控制。优先级：Checkbox.disabled > CheckboxGroup.disabled > Form.disabled + */ disabled?: { type: BooleanConstructor; value?: boolean; }; /** - * 支持最多选中的数量 + * 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标 + * @default 'circle' */ - max?: { - type: NumberConstructor; - value?: number; + icon?: { + type: null; + value?: 'circle' | 'line' | 'rectangle' | string[]; }; /** - * 统一设置内部复选框 HTML 属性 - * @default '' + * 是否为半选 + * @default false */ - name?: { + indeterminate?: { + type: BooleanConstructor; + value?: boolean; + }; + /** + * 主文案 + */ + label?: { type: StringConstructor; value?: string; }; /** - * 以配置形式设置子元素。示例1：`['北京', '上海']` ，示例2: `[{ label: '全选', checkAll: true }, { label: '上海', value: 'shanghai' }]`。checkAll 值为 true 表示当前选项为「全选选项」 - * @default [] + * 内容最大行数限制 + * @default 5 + */ + maxContentRow?: { + type: NumberConstructor; + value?: number; + }; + /** + * 主文案最大行数限制 + * @default 3 */ - options?: { - type: ArrayConstructor; - value?: Array; + maxLabelRow?: { + type: NumberConstructor; + value?: number; }; /** - * 自定义组件样式 + * HTML 元素原生属性 * @default '' */ - style?: { + name?: { type: StringConstructor; value?: string; }; /** - * 选中值 - * @default [] + * 多选框和内容相对位置 + * @default left */ - value?: { - type: ArrayConstructor; - value?: CheckboxGroupValue; + placement?: { + type: StringConstructor; + value?: 'left' | 'right'; }; /** - * 选中值，非受控属性 - * @default [] + * 只读状态 + * @default false */ - defaultValue?: { - type: ArrayConstructor; - value?: CheckboxGroupValue; + readonly?: { + type: BooleanConstructor; + value?: boolean; + }; + /** + * 多选框的值 + */ + value?: { + type: null; + value?: string | number | boolean; }; } - -export type CheckboxOption = string | number | CheckboxOptionObj; - -export interface CheckboxOptionObj { - label?: string; - value?: string | number; - disabled?: boolean; - checkAll?: true; -} - -export type CheckboxGroupValue = Array; 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 index e1adbb0c8..e0b566e25 100644 --- a/packages/products/tdesign-mobile-react/src/checkbox/checkbox.en-US.md +++ b/packages/products/tdesign-mobile-react/src/checkbox/checkbox.en-US.md @@ -36,6 +36,7 @@ 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 +keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | 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 diff --git a/packages/products/tdesign-mobile-react/src/checkbox/checkbox.md b/packages/products/tdesign-mobile-react/src/checkbox/checkbox.md index 4d28a84b5..09167579f 100644 --- a/packages/products/tdesign-mobile-react/src/checkbox/checkbox.md +++ b/packages/products/tdesign-mobile-react/src/checkbox/checkbox.md @@ -36,6 +36,7 @@ onChange | Function | | TS 类型：`(checked: boolean, context: { e: ChangeEve className | String | - | 类名 | N style | Object | - | 样式，TS 类型：`React.CSSProperties` | N disabled | Boolean | undefined | 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled | N +keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | 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 diff --git a/packages/products/tdesign-mobile-react/src/checkbox/type.ts b/packages/products/tdesign-mobile-react/src/checkbox/type.ts index e4a0137c2..c004823e5 100644 --- a/packages/products/tdesign-mobile-react/src/checkbox/type.ts +++ b/packages/products/tdesign-mobile-react/src/checkbox/type.ts @@ -4,7 +4,7 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ -import { TNode } from '../common'; +import { TNode, KeysType } from '../common'; import { ChangeEvent } from 'react'; export interface TdCheckboxProps { @@ -103,6 +103,10 @@ export interface TdCheckboxGroupProps { * 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled */ disabled?: boolean; + /** + * 用来定义 value / label 在 `options` 中对应的字段别名 + */ + keys?: KeysType; /** * 支持最多选中的数量 */ diff --git a/packages/products/tdesign-mobile-vue/src/checkbox/checkbox-group-props.ts b/packages/products/tdesign-mobile-vue/src/checkbox/checkbox-group-props.ts index a5362a203..f10dcb49b 100644 --- a/packages/products/tdesign-mobile-vue/src/checkbox/checkbox-group-props.ts +++ b/packages/products/tdesign-mobile-vue/src/checkbox/checkbox-group-props.ts @@ -13,6 +13,10 @@ export default { type: Boolean, default: undefined, }, + /** 用来定义 value / label 在 `options` 中对应的字段别名 */ + keys: { + type: Object as PropType, + }, /** 支持最多选中的数量 */ max: { type: Number, diff --git a/packages/products/tdesign-mobile-vue/src/checkbox/checkbox.en-US.md b/packages/products/tdesign-mobile-vue/src/checkbox/checkbox.en-US.md index f278982e8..9cb90ed60 100644 --- a/packages/products/tdesign-mobile-vue/src/checkbox/checkbox.en-US.md +++ b/packages/products/tdesign-mobile-vue/src/checkbox/checkbox.en-US.md @@ -37,6 +37,7 @@ change | `(checked: boolean, context: { e: Event })` | \- name | type | default | description | required -- | -- | -- | -- | -- disabled | Boolean | undefined | \- | N +keys | Object | - | Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | 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-vue/tree/develop/src/checkbox/type.ts) | N diff --git a/packages/products/tdesign-mobile-vue/src/checkbox/checkbox.md b/packages/products/tdesign-mobile-vue/src/checkbox/checkbox.md index e4ab7cefc..3b9e93910 100644 --- a/packages/products/tdesign-mobile-vue/src/checkbox/checkbox.md +++ b/packages/products/tdesign-mobile-vue/src/checkbox/checkbox.md @@ -37,6 +37,7 @@ change | `(checked: boolean, context: { e: Event })` | 值变化时触发 名称 | 类型 | 默认值 | 描述 | 必传 -- | -- | -- | -- | -- disabled | Boolean | undefined | 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled | N +keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | 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-vue/tree/develop/src/checkbox/type.ts) | N diff --git a/packages/products/tdesign-mobile-vue/src/checkbox/type.ts b/packages/products/tdesign-mobile-vue/src/checkbox/type.ts index eb1241677..6c430b0f4 100644 --- a/packages/products/tdesign-mobile-vue/src/checkbox/type.ts +++ b/packages/products/tdesign-mobile-vue/src/checkbox/type.ts @@ -4,7 +4,7 @@ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC * */ -import { TNode } from '../common'; +import { TNode, KeysType } from '../common'; export interface TdCheckboxProps { /** @@ -102,6 +102,10 @@ export interface TdCheckboxGroupProps { * 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled */ disabled?: boolean; + /** + * 用来定义 value / label 在 `options` 中对应的字段别名 + */ + keys?: KeysType; /** * 支持最多选中的数量 */ diff --git a/packages/scripts/api.json b/packages/scripts/api.json index f6a6035e1..993fec186 100644 --- a/packages/scripts/api.json +++ b/packages/scripts/api.json @@ -25452,43 +25452,6 @@ "Boolean" ] }, - { - "id": 1408, - "platform_framework": [ - "64" - ], - "component": "Checkbox", - "field_category": 1, - "field_name": "externalClasses", - "field_type": [ - "16" - ], - "field_default_value": "", - "field_enum": "", - "field_desc_zh": "组件类名，分别用于设置 组件外层、多选框图标、主文案、内容 等元素类名", - "field_desc_en": null, - "field_required": 0, - "event_input": "", - "create_time": "2021-08-06 05:41:46", - "update_time": "2022-04-07 03:27:28", - "event_output": null, - "custom_field_type": "['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border']", - "syntactic_sugar": null, - "readonly": 1, - "html_attribute": 0, - "trigger_elements": "", - "deprecated": 0, - "version": null, - "test_description": null, - "support_default_value": 0, - "field_category_text": "Props", - "platform_framework_text": [ - "Miniprogram" - ], - "field_type_text": [ - "Array" - ] - }, { "id": 1409, "platform_framework": [ @@ -26426,6 +26389,49 @@ "Boolean" ] }, + { + "id": 1728464703, + "platform_framework": [ + "8", + "16", + "32", + "64" + ], + "component": "CheckboxGroup", + "field_category": 1, + "field_name": "keys", + "field_type": [ + "8" + ], + "field_default_value": "", + "field_enum": "", + "field_desc_zh": "用来定义 value / label 在 `options` 中对应的字段别名", + "field_desc_en": null, + "field_required": 0, + "event_input": "", + "create_time": "2024-10-09 09:05:03", + "update_time": "2024-10-09 09:05:03", + "event_output": null, + "custom_field_type": "KeysType", + "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)", + "React(Mobile)", + "Angular(Mobile)", + "Miniprogram" + ], + "field_type_text": [ + "Object" + ] + }, { "id": 1689498234, "platform_framework": [