feat(ColorPicker): added attributes such as usePopup

packages/products/tdesign-miniprogram/src/color-picker/README.en-US.md

@@ -8,16 +8,21 @@ 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
+auto-close | Boolean | true | \- | N
 enable-alpha | Boolean | false | \- | N
 format | String | RGB | options: RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N
+popup-props | Object | {} | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts) | N
 swatch-colors | Array | - | swatch colors。Typescript：`Array<string> \| null` | N
 type | String | base | options: base/multiple。Typescript：`TypeEnum ` `type TypeEnum = 'base' \| 'multiple'`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts) | N
+use-popup | Boolean | false | \- | N
 value | String | - | color value | N
 default-value | String | undefined | color value。uncontrolled property | N
+visible | Boolean | false | \- | N
 
 ### ColorPicker Events
 
 name | params | description
 -- | -- | --
 change | `(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger })` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-hue-bar' \| 'palette-alpha-bar' \| 'preset' `<br/>
+close | `(trigger: ColorPickerTrigger)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/>
 palette-bar-change | `(detail: { color: ColorObject })` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts)。<br/>`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; value: number;}`<br/>

packages/products/tdesign-miniprogram/src/color-picker/README.md

@@ -8,16 +8,21 @@
 -- | -- | -- | -- | --
 style | Object | - | 样式 | N
 custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
+auto-close | Boolean | true | 自动关闭。在点击遮罩层时自动关闭，不需要手动设置 visible | N
 enable-alpha | Boolean | false | 是否开启透明通道 | N
 format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效。可选项：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N
+popup-props | Object | {} | popupProps透传。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts) | N
 swatch-colors | Array | - | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array<string> \| null` | N
 type | String | base | 颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容。可选项：base/multiple。TS 类型：`TypeEnum ` `type TypeEnum = 'base' \| 'multiple'`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts) | N
+use-popup | Boolean | false | 是否使用弹出层包裹颜色选择器 | N
 value | String | - | 色值 | N
 default-value | String | undefined | 色值。非受控属性 | N
+visible | Boolean | false | 是否显示颜色选择器。`usePopup` 为 true 时有效 | N
 
 ### ColorPicker Events
 
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger })` | 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-hue-bar' \| 'palette-alpha-bar' \| 'preset' `<br/>
+close | `(trigger: ColorPickerTrigger)` | 关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/>
 palette-bar-change | `(detail: { color: ColorObject })` | 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/color-picker/type.ts)。<br/>`interface ColorObject { alpha: number; css: string; hex: string; hex8: string; hsl: string; hsla: string; hsv: string; hsva: string; rgb: string; rgba: string; value: number;}`<br/>

packages/products/tdesign-miniprogram/src/color-picker/props.ts

@@ -6,6 +6,11 @@
 
 import { TdColorPickerProps } from './type';
 const props: TdColorPickerProps = {
+  /** 自动关闭。在点击遮罩层时自动关闭，不需要手动设置 visible */
+  autoClose: {
+    type: Boolean,
+    value: true,
+  },
   /** 是否开启透明通道 */
   enableAlpha: {
     type: Boolean,
@@ -16,6 +21,11 @@ const props: TdColorPickerProps = {
     type: String,
     value: 'RGB',
   },
+  /** popupProps透传 */
+  popupProps: {
+    type: Object,
+    value: {},
+  },
   /** 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色 */
   swatchColors: {
     type: Array,
@@ -25,6 +35,11 @@ const props: TdColorPickerProps = {
     type: String,
     value: 'base',
   },
+  /** 是否使用弹出层包裹颜色选择器 */
+  usePopup: {
+    type: Boolean,
+    value: false,
+  },
   /** 色值 */
   value: {
     type: String,
@@ -35,6 +50,11 @@ const props: TdColorPickerProps = {
     type: String,
     value: '',
   },
+  /** 是否显示颜色选择器。`usePopup` 为 true 时有效 */
+  visible: {
+    type: Boolean,
+    value: false,
+  },
 };
 
 export default props;

packages/products/tdesign-miniprogram/src/color-picker/type.ts

@@ -4,7 +4,17 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
+import { PopupProps } from '../popup/index';
+
 export interface TdColorPickerProps {
+  /**
+   * 自动关闭。在点击遮罩层时自动关闭，不需要手动设置 visible
+   * @default true
+   */
+  autoClose?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 是否开启透明通道
    * @default false
@@ -21,6 +31,14 @@ export interface TdColorPickerProps {
     type: StringConstructor;
     value?: 'RGB' | 'RGBA' | 'HSL' | 'HSLA' | 'HSB' | 'HSV' | 'HSVA' | 'HEX' | 'CMYK' | 'CSS';
   };
+  /**
+   * popupProps透传
+   * @default {}
+   */
+  popupProps?: {
+    type: ObjectConstructor;
+    value?: PopupProps;
+  };
   /**
    * 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色
    */
@@ -36,6 +54,14 @@ export interface TdColorPickerProps {
     type: StringConstructor;
     value?: TypeEnum;
   };
+  /**
+   * 是否使用弹出层包裹颜色选择器
+   * @default false
+   */
+  usePopup?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
   /**
    * 色值
    * @default ''
@@ -52,6 +78,14 @@ export interface TdColorPickerProps {
     type: StringConstructor;
     value?: string;
   };
+  /**
+   * 是否显示颜色选择器。`usePopup` 为 true 时有效
+   * @default false
+   */
+  visible?: {
+    type: BooleanConstructor;
+    value?: boolean;
+  };
 }
 
 export type TypeEnum = 'base' | 'multiple';