feat(CheckboxGroup): add keys props

TDesignOteam · Oct 9, 2024 · dfc0bae · dfc0bae
1 parent d88314c
commit dfc0bae
Show file tree

Hide file tree

Showing 15 changed files with 267 additions and 107 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
diff --git a/...gram/src/checkbox/checkbox-group-props.ts → ...n-miniprogram/src/checkbox-group/props.ts b/...gram/src/checkbox/checkbox-group-props.ts → ...n-miniprogram/src/checkbox-group/props.ts
@@ -6,11 +6,15 @@
 
 import { TdCheckboxGroupProps } from './type';
 const props: TdCheckboxGroupProps = {
-  /** 是否禁用组件 */
-  disabled: {
+  /** 是否开启无边框模式 */
+  borderless: {
     type: Boolean,
     value: false,
   },
+  /** 用来定义 value / label 在 `options` 中对应的字段别名 */
+  keys: {
+    type: Object,
+  },
   /** 支持最多选中的数量 */
   max: {
     type: Number,
@@ -26,11 +30,6 @@ const props: TdCheckboxGroupProps = {
     type: Array,
     value: [],
   },
-  /** 自定义组件样式 */
-  style: {
-    type: String,
-    value: '',
-  },
   /** 选中值 */
   value: {
     type: Array,

diff --git a/packages/products/tdesign-miniprogram/src/checkbox-group/type.ts b/packages/products/tdesign-miniprogram/src/checkbox-group/type.ts
@@ -0,0 +1,75 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { KeysType } from '../common/common';
+
+export interface TdCheckboxGroupProps<T = CheckboxGroupValue> {
+  /**
+   * 是否开启无边框模式
+   * @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<CheckboxOption>;
+  };
+  /**
+   * 选中值
+   * @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<string | number | boolean>;
diff --git 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<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

diff --git 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<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

diff --git 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
@@ -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<CheckboxOption>;
+  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<string | number>;
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
@@ -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<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