feat(tag): add color api

TDesignOteam · Mar 14, 2024 · 197fc1b · 197fc1b
1 parent bb4d767
commit 197fc1b
Show file tree

Hide file tree

Showing 18 changed files with 543 additions and 40 deletions.
diff --git a/db/TDesign.db b/db/TDesign.db
diff --git a/packages/products/tdesign-react/src/tag/defaultProps.ts b/packages/products/tdesign-react/src/tag/defaultProps.ts
@@ -2,7 +2,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TdTagProps, TdCheckTagProps } from './type';
+import { TdTagProps, TdCheckTagProps, TdCheckTagGroupProps } from './type';
 
 export const tagDefaultProps: TdTagProps = {
   closable: false,
@@ -15,3 +15,5 @@ export const tagDefaultProps: TdTagProps = {
 };
 
 export const checkTagDefaultProps: TdCheckTagProps = { disabled: false, size: 'medium' };
+
+export const checkTagGroupDefaultProps: TdCheckTagGroupProps = { multiple: false, defaultValue: [] };
diff --git a/packages/products/tdesign-react/src/tag/tag.en-US.md b/packages/products/tdesign-react/src/tag/tag.en-US.md
@@ -6,32 +6,52 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 closable | Boolean | false | \- | N
+color | String | - | self-defined tag color  | N
 content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | false | \- | N
 icon | TElement | undefined | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 maxWidth | String / Number | - | \- | N
-shape | String | square | options：square/round/mark | N
-size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-theme | String | default | options：default/primary/warning/danger/success | N
-variant | String | dark | options：dark/light/outline/light-outline | N
+shape | String | square | options: square/round/mark | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+theme | String | default | options: default/primary/warning/danger/success | N
+variant | String | dark | options: dark/light/outline/light-outline | N
 onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onClose | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 
+
 ### CheckTag Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，Typescript：`React.CSSProperties` | N
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
 checked | Boolean | - | \- | N
 defaultChecked | Boolean | - | uncontrolled property | N
+checkedProps | Object | - | used to set checked tag props。Typescript：`TdTagProps` | N
 children | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 content | TNode | - | Typescript：`string \| number \| string[] \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | false | \- | N
-size | String | medium | options：small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-onChange | Function |  | Typescript：`(checked: boolean) => void`<br/> | N
+size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
+uncheckedProps | Object | - | used to set unchecked tag props。Typescript：`TdTagProps` | N
+value | String / Number | - | tag unique key | N
+onChange | Function |  | Typescript：`(checked: boolean, context: CheckTagChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
 onClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
+
+
+### CheckTagGroup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+checkedProps | Object | - | used to set checked tag props。Typescript：`TdTagProps` | N
+multiple | Boolean | false | allow to select multiple tags | N
+options | Array | - | tag list。Typescript：`CheckTagGroupOption[]` `interface CheckTagGroupOption extends TdCheckTagProps { label: string \| TNode; value: string \| number }`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N
+uncheckedProps | Object | - | used to set unchecked tag props。Typescript：`TdTagProps` | N
+value | Array | [] | selected tag value list。Typescript：`CheckTagGroupValue` `type CheckTagGroupValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N
+defaultValue | Array | [] | selected tag value list。uncontrolled property。Typescript：`CheckTagGroupValue` `type CheckTagGroupValue = Array<string \| number>`。[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N
+onChange | Function |  | Typescript：`(value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。<br/>`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
diff --git a/packages/products/tdesign-react/src/tag/tag.md b/packages/products/tdesign-react/src/tag/tag.md
@@ -4,12 +4,13 @@
 
 ### Tag Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 children | TNode | - | 组件子元素，同 `content`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 closable | Boolean | false | 标签是否可关闭 | N
+color | String | - | 自定义标签颜色 | N
 content | TNode | - | 组件子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N
 icon | TElement | undefined | 标签中的图标，可自定义图标呈现。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
@@ -21,17 +22,36 @@ variant | String | dark | 标签风格变体。可选项：dark/light/outline/li
 onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击时触发 | N
 onClose | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>如果关闭按钮存在，点击关闭按钮时触发 | N
 
+
 ### CheckTag Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 checked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态 | N
 defaultChecked | Boolean | - | 标签选中的状态，默认风格（theme=default）才有选中态。非受控属性 | N
+checkedProps | Object | - | 透传标签选中态属性。TS 类型：`TdTagProps` | N
 children | TNode | - | 组件子元素。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 content | TNode | - | 组件子元素；传入数组时：[选中内容，非选中内容]。TS 类型：`string \| number \| string[] \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
 disabled | Boolean | false | 标签禁用态，失效标签不能触发事件。默认风格（theme=default）才有禁用态 | N
 size | String | medium | 标签尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts) | N
-onChange | Function |  | TS 类型：`(checked: boolean) => void`<br/>状态切换时触发 | N
+uncheckedProps | Object | - | 透传标签未选态属性。TS 类型：`TdTagProps` | N
+value | String / Number | - | 标签唯一标识，一般用于标签组场景，单个可选择标签无需设置 | N
+onChange | Function |  | TS 类型：`(checked: boolean, context: CheckTagChangeContext) => void`<br/>状态切换时触发。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。<br/>`interface CheckTagChangeContext { e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
 onClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击标签时触发 | N
+
+
+### CheckTagGroup Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+checkedProps | Object | - | 透传标签选中态属性。TS 类型：`TdTagProps` | N
+multiple | Boolean | false | 是否支持选中多个标签 | N
+options | Array | - | 标签选项列表。TS 类型：`CheckTagGroupOption[]` `interface CheckTagGroupOption extends TdCheckTagProps { label: string \| TNode; value: string \| number }`。[通用类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N
+uncheckedProps | Object | - | 透传标签未选态属性。TS 类型：`TdTagProps` | N
+value | Array | [] | 选中标签值。TS 类型：`CheckTagGroupValue` `type CheckTagGroupValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N
+defaultValue | Array | [] | 选中标签值。非受控属性。TS 类型：`CheckTagGroupValue` `type CheckTagGroupValue = Array<string \| number>`。[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts) | N
+onChange | Function |  | TS 类型：`(value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void`<br/>[详细类型定义](https://github.com/Tencent/tdesign-react/blob/develop/src/tag/type.ts)。<br/>`interface CheckTagGroupChangeContext { type: 'check' \| 'uncheck'; e: MouseEvent \| KeyboardEvent; value: string \| number }`<br/> | N
diff --git a/packages/products/tdesign-react/src/tag/type.ts b/packages/products/tdesign-react/src/tag/type.ts
@@ -5,7 +5,7 @@
  * */
 
 import { TNode, TElement, SizeEnum } from '../common';
-import { MouseEvent } from 'react';
+import { MouseEvent, KeyboardEvent } from 'react';
 
 export interface TdTagProps {
   /**
@@ -17,6 +17,11 @@ export interface TdTagProps {
    * @default false
    */
   closable?: boolean;
+  /**
+   * 自定义标签颜色
+   * @default ''
+   */
+  color?: string;
   /**
    * 组件子元素
    */
@@ -73,6 +78,10 @@ export interface TdCheckTagProps {
    * 标签选中的状态，默认风格（theme=default）才有选中态，非受控属性
    */
   defaultChecked?: boolean;
+  /**
+   * 透传标签选中态属性
+   */
+  checkedProps?: TdTagProps;
   /**
    * 组件子元素
    */
@@ -91,12 +100,72 @@ export interface TdCheckTagProps {
    * @default medium
    */
   size?: SizeEnum;
+  /**
+   * 透传标签未选态属性
+   */
+  uncheckedProps?: TdTagProps;
+  /**
+   * 标签唯一标识，一般用于标签组场景，单个可选择标签无需设置
+   */
+  value?: string | number;
   /**
    * 状态切换时触发
    */
-  onChange?: (checked: boolean) => void;
+  onChange?: (checked: boolean, context: CheckTagChangeContext) => void;
   /**
    * 点击标签时触发
    */
   onClick?: (context: { e: MouseEvent<HTMLSpanElement> }) => void;
 }
+
+export interface TdCheckTagGroupProps {
+  /**
+   * 透传标签选中态属性
+   */
+  checkedProps?: TdTagProps;
+  /**
+   * 是否支持选中多个标签
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * 标签选项列表
+   */
+  options?: CheckTagGroupOption[];
+  /**
+   * 透传标签未选态属性
+   */
+  uncheckedProps?: TdTagProps;
+  /**
+   * 选中标签值
+   * @default []
+   */
+  value?: CheckTagGroupValue;
+  /**
+   * 选中标签值，非受控属性
+   * @default []
+   */
+  defaultValue?: CheckTagGroupValue;
+  /**
+   * null
+   */
+  onChange?: (value: CheckTagGroupValue, context: CheckTagGroupChangeContext) => void;
+}
+
+export interface CheckTagChangeContext {
+  e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>;
+  value: string | number;
+}
+
+export interface CheckTagGroupOption extends TdCheckTagProps {
+  label: string | TNode;
+  value: string | number;
+}
+
+export type CheckTagGroupValue = Array<string | number>;
+
+export interface CheckTagGroupChangeContext {
+  type: 'check' | 'uncheck';
+  e: MouseEvent<HTMLDivElement> | KeyboardEvent<HTMLDivElement>;
+  value: string | number;
+}
diff --git a/packages/products/tdesign-vue-next/src/tag/check-tag-group-props.ts b/packages/products/tdesign-vue-next/src/tag/check-tag-group-props.ts
@@ -0,0 +1,41 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdCheckTagGroupProps } from '../tag/type';
+import { PropType } from 'vue';
+
+export default {
+  /** 透传标签选中态属性 */
+  checkedProps: {
+    type: Object as PropType<TdCheckTagGroupProps['checkedProps']>,
+  },
+  /** 是否支持选中多个标签 */
+  multiple: Boolean,
+  /** 标签选项列表 */
+  options: {
+    type: Array as PropType<TdCheckTagGroupProps['options']>,
+  },
+  /** 透传标签未选态属性 */
+  uncheckedProps: {
+    type: Object as PropType<TdCheckTagGroupProps['uncheckedProps']>,
+  },
+  /** 选中标签值 */
+  value: {
+    type: Array as PropType<TdCheckTagGroupProps['value']>,
+    default: undefined as TdCheckTagGroupProps['value'],
+  },
+  modelValue: {
+    type: Array as PropType<TdCheckTagGroupProps['value']>,
+    default: undefined as TdCheckTagGroupProps['value'],
+  },
+  /** 选中标签值，非受控属性 */
+  defaultValue: {
+    type: Array as PropType<TdCheckTagGroupProps['defaultValue']>,
+    default: (): TdCheckTagGroupProps['defaultValue'] => [],
+  },
+  /** null */
+  onChange: Function as PropType<TdCheckTagGroupProps['onChange']>,
+};
diff --git a/packages/products/tdesign-vue-next/src/tag/check-tag-props.ts b/packages/products/tdesign-vue-next/src/tag/check-tag-props.ts
@@ -19,6 +19,10 @@ export default {
   },
   /** 标签选中的状态，默认风格（theme=default）才有选中态，非受控属性 */
   defaultChecked: Boolean,
+  /** 透传标签选中态属性 */
+  checkedProps: {
+    type: Object as PropType<TdCheckTagProps['checkedProps']>,
+  },
   /** 组件子元素；传入数组时：[选中内容，非选中内容] */
   content: {
     type: [String, Number, Array, Function] as PropType<TdCheckTagProps['content']>,
@@ -38,6 +42,14 @@ export default {
       return ['small', 'medium', 'large'].includes(val);
     },
   },
+  /** 透传标签未选态属性 */
+  uncheckedProps: {
+    type: Object as PropType<TdCheckTagProps['uncheckedProps']>,
+  },
+  /** 标签唯一标识，一般用于标签组场景，单个可选择标签无需设置 */
+  value: {
+    type: [String, Number] as PropType<TdCheckTagProps['value']>,
+  },
   /** 状态切换时触发 */
   onChange: Function as PropType<TdCheckTagProps['onChange']>,
   /** 点击标签时触发 */

diff --git a/packages/products/tdesign-vue-next/src/tag/props.ts b/packages/products/tdesign-vue-next/src/tag/props.ts
@@ -10,6 +10,11 @@ import { PropType } from 'vue';
 export default {
   /** 标签是否可关闭 */
   closable: Boolean,
+  /** 自定义标签颜色 */
+  color: {
+    type: String,
+    default: '',
+  },
   /** 组件子元素 */
   content: {
     type: [String, Function] as PropType<TdTagProps['content']>,