feat(color-picker): update mobile-vue color-picker props

packages/products/tdesign-mobile-vue/src/color-picker/color-picker.en-US.md

@@ -8,15 +8,25 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 autoClose | Boolean | true | \- | N
 clearable | Boolean | false | \- | N
+enableAlpha | Boolean | false | \- | N
 footer | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+format | String | RGB | options: RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N
 header | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 popupProps | Object | {} | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts) | N
+swatchColors | 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-mobile-vue/tree/develop/src/color-picker/type.ts) | N
 usePopup | Boolean | false | \- | N
+value | String | - | color value。`v-model` and `v-model:value` is supported | N
+defaultValue | String | - | color value。uncontrolled property | N
 visible | Boolean | false | \- | N
+onChange | Function |  | Typescript：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `<br/> | N
 onClose | Function |  | Typescript：`(trigger: ColorPickerTrigger) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/> | N
+onPaletteBarChange | Function |  | Typescript：`(context: { color: ColorObject }) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/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/> | N
 
 ### ColorPicker Events
 
 name | params | description
 -- | -- | --
+change | `(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger })` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `<br/>
 close | `(trigger: ColorPickerTrigger)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/>
+palette-bar-change | `(context: { color: ColorObject })` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/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-mobile-vue/src/color-picker/color-picker.md

@@ -8,15 +8,25 @@
 -- | -- | -- | -- | --
 autoClose | Boolean | true | 自动关闭。在点击遮罩层时自动关闭，不需要手动设置 visible | N
 clearable | Boolean | false | 是否可清空 | N
+enableAlpha | Boolean | false | 是否开启透明通道 | N
 footer | Slot / Function | - | 底部插槽，仅在 `usePopup` 为 `true` 时有效。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效。可选项：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N
 header | Slot / Function | - | 顶部插槽，仅在 `usePopup` 为 `true` 时有效。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 popupProps | Object | {} | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts) | N
+swatchColors | 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-mobile-vue/tree/develop/src/color-picker/type.ts) | N
 usePopup | Boolean | false | 是否使用弹出层包裹颜色选择器 | N
+value | String | - | 色值。支持语法糖 `v-model` 或 `v-model:value` | N
+defaultValue | String | - | 色值。非受控属性 | N
 visible | Boolean | false | 是否显示颜色选择器。`usePopup` 为 true 时有效 | N
+onChange | Function |  | TS 类型：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`<br/>选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `<br/> | N
 onClose | Function |  | TS 类型：`(trigger: ColorPickerTrigger) => void`<br/>关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/> | N
+onPaletteBarChange | Function |  | TS 类型：`(context: { color: ColorObject }) => void`<br/>调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/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/> | N
 
 ### ColorPicker Events
 
 名称 | 参数 | 描述
 -- | -- | --
+change | `(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger })` | 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerChangeTrigger = 'palette-saturation-brightness' \| 'palette-saturation' \| 'palette-brightness' \| 'palette-hue-bar' \| 'palette-alpha-bar' \| 'input' \| 'preset' \| 'recent' `<br/>
 close | `(trigger: ColorPickerTrigger)` | 关闭按钮时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/color-picker/type.ts)。<br/>`type ColorPickerTrigger = 'overlay'`<br/>
+palette-bar-change | `(context: { color: ColorObject })` | 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/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-mobile-vue/src/color-picker/props.ts

@@ -15,10 +15,21 @@ export default {
   },
   /** 是否可清空 */
   clearable: Boolean,
+  /** 是否开启透明通道 */
+  enableAlpha: Boolean,
   /** 底部插槽，仅在 `usePopup` 为 `true` 时有效 */
   footer: {
     type: Function as PropType<TdColorPickerProps['footer']>,
   },
+  /** 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效 */
+  format: {
+    type: String as PropType<TdColorPickerProps['format']>,
+    default: 'RGB' as TdColorPickerProps['format'],
+    validator(val: TdColorPickerProps['format']): boolean {
+      if (!val) return true;
+      return ['RGB', 'RGBA', 'HSL', 'HSLA', 'HSB', 'HSV', 'HSVA', 'HEX', 'CMYK', 'CSS'].includes(val);
+    },
+  },
   /** 顶部插槽，仅在 `usePopup` 为 `true` 时有效 */
   header: {
     type: Function as PropType<TdColorPickerProps['header']>,
@@ -28,10 +39,41 @@ export default {
     type: Object as PropType<TdColorPickerProps['popupProps']>,
     default: () => ({}),
   },
+  /** 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色 */
+  swatchColors: {
+    type: Array as PropType<TdColorPickerProps['swatchColors']>,
+  },
+  /** 颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容 */
+  type: {
+    type: String as PropType<TdColorPickerProps['type']>,
+    default: 'base' as TdColorPickerProps['type'],
+    validator(val: TdColorPickerProps['type']): boolean {
+      if (!val) return true;
+      return ['base', 'multiple'].includes(val);
+    },
+  },
   /** 是否使用弹出层包裹颜色选择器 */
   usePopup: Boolean,
+  /** 色值 */
+  value: {
+    type: String,
+    default: undefined,
+  },
+  modelValue: {
+    type: String,
+    default: undefined,
+  },
+  /** 色值，非受控属性 */
+  defaultValue: {
+    type: String,
+    default: '',
+  },
   /** 是否显示颜色选择器。`usePopup` 为 true 时有效 */
   visible: Boolean,
+  /** 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源 */
+  onChange: Function as PropType<TdColorPickerProps['onChange']>,
   /** 关闭按钮时触发 */
   onClose: Function as PropType<TdColorPickerProps['onClose']>,
+  /** 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值 */
+  onPaletteBarChange: Function as PropType<TdColorPickerProps['onPaletteBarChange']>,
 };

packages/products/tdesign-mobile-vue/src/color-picker/type.ts

@@ -18,10 +18,20 @@ export interface TdColorPickerProps {
    * @default false
    */
   clearable?: boolean;
+  /**
+   * 是否开启透明通道
+   * @default false
+   */
+  enableAlpha?: boolean;
   /**
    * 底部插槽，仅在 `usePopup` 为 `true` 时有效
    */
   footer?: TNode;
+  /**
+   * 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效
+   * @default RGB
+   */
+  format?: 'RGB' | 'RGBA' | 'HSL' | 'HSLA' | 'HSB' | 'HSV' | 'HSVA' | 'HEX' | 'CMYK' | 'CSS';
   /**
    * 顶部插槽，仅在 `usePopup` 为 `true` 时有效
    */
@@ -31,20 +41,78 @@ export interface TdColorPickerProps {
    * @default {}
    */
   popupProps?: PopupProps;
+  /**
+   * 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色
+   */
+  swatchColors?: Array<string> | null;
+  /**
+   * 颜色选择器类型。（base 表示仅展示系统预设内容; multiple 表示展示色板和系统预设内容
+   * @default base
+   */
+  type?: TypeEnum;
   /**
    * 是否使用弹出层包裹颜色选择器
    * @default false
    */
   usePopup?: boolean;
+  /**
+   * 色值
+   * @default ''
+   */
+  value?: string;
+  /**
+   * 色值，非受控属性
+   * @default ''
+   */
+  defaultValue?: string;
+  /**
+   * 色值
+   * @default ''
+   */
+  modelValue?: string;
   /**
    * 是否显示颜色选择器。`usePopup` 为 true 时有效
    * @default false
    */
   visible?: boolean;
+  /**
+   * 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源
+   */
+  onChange?: (value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void;
   /**
    * 关闭按钮时触发
    */
   onClose?: (trigger: ColorPickerTrigger) => void;
+  /**
+   * 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值
+   */
+  onPaletteBarChange?: (context: { color: ColorObject }) => void;
 }
 
+export type TypeEnum = 'base' | 'multiple';
+
+export type ColorPickerChangeTrigger =
+  | 'palette-saturation-brightness'
+  | 'palette-saturation'
+  | 'palette-brightness'
+  | 'palette-hue-bar'
+  | 'palette-alpha-bar'
+  | 'input'
+  | 'preset'
+  | 'recent';
+
 export type ColorPickerTrigger = 'overlay';
+
+export interface ColorObject {
+  alpha: number;
+  css: string;
+  hex: string;
+  hex8: string;
+  hsl: string;
+  hsla: string;
+  hsv: string;
+  hsva: string;
+  rgb: string;
+  rgba: string;
+  value: number;
+}

packages/scripts/api.json

@@ -29082,6 +29082,7 @@
         "1",
         "2",
         "4",
+        "8",
         "16",
         "64"
       ],
@@ -29114,6 +29115,7 @@
         "Vue(PC)",
         "React(PC)",
         "Angular(PC)",
+        "Vue(Mobile)",
         "React(Mobile)",
         "Miniprogram"
       ],
@@ -29248,6 +29250,7 @@
         "1",
         "2",
         "4",
+        "8",
         "16",
         "64"
       ],
@@ -29280,6 +29283,7 @@
         "Vue(PC)",
         "React(PC)",
         "Angular(PC)",
+        "Vue(Mobile)",
         "React(Mobile)",
         "Miniprogram"
       ],
@@ -29662,6 +29666,7 @@
         "1",
         "2",
         "4",
+        "8",
         "16",
         "64"
       ],
@@ -29694,6 +29699,7 @@
         "Vue(PC)",
         "React(PC)",
         "Angular(PC)",
+        "Vue(Mobile)",
         "React(Mobile)",
         "Miniprogram"
       ],
@@ -29704,6 +29710,7 @@
     {
       "id": 1705294739,
       "platform_framework": [
+        "8",
         "16",
         "64"
       ],
@@ -29733,6 +29740,7 @@
       "support_default_value": 0,
       "field_category_text": "Props",
       "platform_framework_text": [
+        "Vue(Mobile)",
         "React(Mobile)",
         "Miniprogram"
       ],
@@ -29825,6 +29833,7 @@
     {
       "id": 1705294511,
       "platform_framework": [
+        "8",
         "16",
         "64"
       ],
@@ -29854,6 +29863,7 @@
       "support_default_value": 1,
       "field_category_text": "Props",
       "platform_framework_text": [
+        "Vue(Mobile)",
         "React(Mobile)",
         "Miniprogram"
       ],
@@ -29910,6 +29920,7 @@
         "1",
         "2",
         "4",
+        "8",
         "16"
       ],
       "component": "ColorPicker",
@@ -29939,6 +29950,7 @@
         "Vue(PC)",
         "React(PC)",
         "Angular(PC)",
+        "Vue(Mobile)",
         "React(Mobile)"
       ],
       "field_type_text": []
@@ -30055,6 +30067,7 @@
     {
       "id": 1705394290,
       "platform_framework": [
+        "8",
         "16",
         "64"
       ],
@@ -30082,6 +30095,7 @@
       "support_default_value": 0,
       "field_category_text": "Events",
       "platform_framework_text": [
+        "Vue(Mobile)",
         "React(Mobile)",
         "Miniprogram"
       ],