feat(checkbox-group): 新增keys可配置options的value和label的别名 (#3154)

* feat(checkbox-group): 新增keys可配置options的value和label

* 新增keys可配置options的value和label

* feat: 格式化代码

* feat(CheckboxGroup): add keys props

* feat(CheckboxGroup): add keys props

---------

Co-authored-by: hxh <1047739781>

src/checkbox-group/checkbox-group.ts

@@ -117,7 +117,7 @@ export default class CheckBoxGroup extends SuperComponent {
     },
 
     initWithOptions() {
-      const { options, value } = this.data;
+      const { options, value, keys } = this.data;
 
       if (!options?.length || !Array.isArray(options)) return;
 
@@ -129,7 +129,12 @@ export default class CheckBoxGroup extends SuperComponent {
               value: item,
               checked: value?.includes(item),
             }
-          : { ...item, checked: value?.includes(item.value) };
+          : {
+              ...item,
+              label: item[keys?.label ?? 'label'],
+              value: item[keys?.value ?? 'value'],
+              checked: value?.includes(item[keys?.value ?? 'value']),
+            };
       });
 
       this.setData({

src/checkbox-group/props.ts

@@ -11,9 +11,14 @@ const props: TdCheckboxGroupProps = {
     type: Boolean,
     value: false,
   },
-  /** 是否禁用组件，默认为 false。 CheckboxGroup.disabled < Checkbox.disabled ，后续新增 Form 组件后，Form.disabled 优先级最低 */
+  /** 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled */
   disabled: {
-    type: Boolean,
+    type: null,
+    value: undefined,
+  },
+  /** 用来定义 value / label 在 `options` 中对应的字段别名 */
+  keys: {
+    type: Object,
   },
   /** 支持最多选中的数量 */
   max: {

src/checkbox-group/type.ts

@@ -4,6 +4,8 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { KeysType } from '../common/common';
+
 export interface TdCheckboxGroupProps<T = CheckboxGroupValue> {
   /**
    * 是否开启无边框模式
@@ -14,12 +16,19 @@ export interface TdCheckboxGroupProps<T = CheckboxGroupValue> {
     value?: boolean;
   };
   /**
-   * 是否禁用组件，默认为 false。 CheckboxGroup.disabled < Checkbox.disabled ，后续新增 Form 组件后，Form.disabled 优先级最低
+   * 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.disabled
    */
   disabled?: {
     type: BooleanConstructor;
     value?: boolean;
   };
+  /**
+   * 用来定义 value / label 在 `options` 中对应的字段别名
+   */
+  keys?: {
+    type: ObjectConstructor;
+    value?: KeysType;
+  };
   /**
    * 支持最多选中的数量
    */

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,6 +50,8 @@ 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 | undefined | \- | 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<CheckboxOption>` `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

src/checkbox/README.md

@@ -96,6 +96,7 @@ value | String / Number / Boolean | - | 多选框的值。TS 类型：`string \|
 名称 | 参数 | 描述
 -- | -- | --
 change | `(checked: boolean, context: { value: boolean\|number\|string, label: boolean\|number\|string })` | 值变化时触发。`context` 表示当前点击项内容。
+
 ### Checkbox External Classes
 
 类名 | 描述
@@ -114,6 +115,8 @@ t-class-label | 标签样式类
 style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
 borderless | Boolean | false | 是否开启无边框模式 | N
+disabled | Boolean | undefined | 是否禁用组件。优先级：Form.disabled < CheckboxGroup.disabled < Checkbox.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<CheckboxOption>` `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
@@ -125,7 +128,6 @@ default-value | Array | undefined | 选中值。非受控属性。TS 类型：`T
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: CheckboxGroupValue, context: { value: boolean\|number\|string, label: boolean\|number\|string })` | 值变化时触发。`context` 表示当前点击项内容。
-
 ### CSS Variables
 
 组件提供了下列 CSS 变量，可用于自定义样式。

src/checkbox/props.ts

@@ -44,10 +44,6 @@ const props: TdCheckboxProps = {
     type: null,
     value: undefined,
   },
-  /** 组件类名，分别用于设置 组件外层、多选框图标、主文案、内容 等元素类名 */
-  externalClasses: {
-    type: Array,
-  },
   /** 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标 */
   icon: {
     type: null,

src/checkbox/type.ts

@@ -66,13 +66,6 @@ export interface TdCheckboxProps {
     type: BooleanConstructor;
     value?: boolean;
   };
-  /**
-   * 组件类名，分别用于设置 组件外层、多选框图标、主文案、内容 等元素类名
-   */
-  externalClasses?: {
-    type: ArrayConstructor;
-    value?: ['t-class', 't-class-icon', 't-class-label', 't-class-content', 't-class-border'];
-  };
   /**
    * 自定义选中图标和非选中图标。使用 Array 时表示：`[选中态图标，非选中态图标，半选中态图标]`。使用 String 时，值为 circle 表示填充圆形图标、值为 line 表示描边型图标、值为 rectangle 表示填充矩形图标
    * @default 'circle'