refactor(color-picker): ensure mode switches based on color value

src/color-picker/color-picker.en-US.md

@@ -13,7 +13,7 @@ colorModes | Array | ["monochrome", "linear-gradient"] | Typescript：`Array<'mo
 disabled | Boolean | undefined | \- | N
 enableAlpha | Boolean | false | \- | N
 enableMultipleGradient | Boolean | true | \- | N
-format | String | RGB | options: RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N
+format | String | RGB | When `enableAlpha` is true, `HEX8/RGBA/HSLA/HSVA` are valid。options: HEX/HEX8/RGB/RGBA/HSL/HSLA/HSV/HSVA/CMYK/CSS | N
 inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N
 multiple | Boolean | false | \- | N
 popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N
@@ -34,5 +34,6 @@ onRecentColorsChange | Function |  | Typescript：`(value: Array<string>) => voi
 name | params | description
 -- | -- | --
 change | `(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger })` | [see more ts definition](https://github.com/Tencent/tdesign-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/>
+clear | `(context: { e: MouseEvent })` | \-
 palette-bar-change | `(context: { color: ColorObject })` | [see more ts definition](https://github.com/Tencent/tdesign-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; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }`<br/>
 recent-colors-change | `(value: Array<string>)` | \-

src/color-picker/color-picker.md

@@ -13,7 +13,7 @@ colorModes | Array | ["monochrome", "linear-gradient"] | 颜色模式选择。
 disabled | Boolean | undefined | 是否禁用组件 | N
 enableAlpha | Boolean | false | 是否开启透明通道 | N
 enableMultipleGradient | Boolean | true | 是否允许开启通过点击渐变轴增加渐变梯度，默认开启，关闭时只会存在起始和结束两个颜色 | N
-format | String | RGB | 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效。可选项：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N
+format | String | RGB | 格式化色值。`enableAlpha` 为真时，`HEX8/RGBA/HSLA/HSVA` 有效。可选项：HEX/HEX8/RGB/RGBA/HSL/HSLA/HSV/HSVA/CMYK/CSS | N
 inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N
 multiple | Boolean | false | 【开发中】是否允许选中多个颜色 | N
 popupProps | Object | - | 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N
@@ -34,5 +34,6 @@ onRecentColorsChange | Function |  | TS 类型：`(value: Array<string>) => void
 名称 | 参数 | 描述
 -- | -- | --
 change | `(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger })` | 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源。[详细类型定义](https://github.com/Tencent/tdesign-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/>
+clear | `(context: { e: MouseEvent })` | 清空按钮点击时触发
 palette-bar-change | `(context: { color: ColorObject })` | 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值。[详细类型定义](https://github.com/Tencent/tdesign-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; saturation: number; value: number; isGradient: boolean; linearGradient?: string; }`<br/>
 recent-colors-change | `(value: Array<string>)` | 最近使用颜色发生变化时触发

src/color-picker/panel/format/index.tsx

@@ -1,12 +1,10 @@
 import {
   defineComponent, PropType, ref, watch,
 } from '@vue/composition-api';
-import { upperCase } from 'lodash-es';
 import { TdColorHandler } from '../../../color-picker/interfaces';
 import { TdColorPickerProps } from '../../type';
 import props from '../../props';
-import { FORMATS } from '../../../_common/js/color-picker/constants';
-import { Color } from '../../utils';
+import { Color, type ColorFormat, getColorFormatOptions } from '../../utils';
 import { Select as TSelect, Option as TOption } from '../../../select';
 import { Input as TInput } from '../../../input';
 import FormatInputs from './inputs';
@@ -48,7 +46,7 @@ export default defineComponent({
      * 格式化类型改变触发
      * @param v
      */
-    const handleModeChange = (v: TdColorPickerProps['format']) => {
+    const handleModeChange = (v: ColorFormat) => {
       formatModel.value = v;
       props.handleFormatModeChange(v);
     };
@@ -83,8 +81,8 @@ export default defineComponent({
             onChange={handleModeChange}
             disabled={this.disabled}
           >
-            {FORMATS.map((item) => (
-              <t-option key={item} value={item} label={upperCase(item)} style={{ fontSize: '12px' }} />
+            {getColorFormatOptions(this.enableAlpha).map((item) => (
+              <t-option key={item} value={item} label={item} style={{ fontSize: '12px' }} />
             ))}
           </t-select>
         </div>

src/color-picker/panel/format/inputs.tsx

@@ -1,14 +1,13 @@
 import {
-  computed, defineComponent, PropType, reactive, watch,
+  defineComponent, PropType, reactive, watch,
 } from '@vue/composition-api';
 import { throttle } from 'lodash-es';
 import { TdColorHandler } from '../../interfaces';
 import props from '../../props';
-import { Color } from '../../utils';
+import { Color, getColorFormatInputs, getColorFormatMap } from '../../utils';
 import { Select as TSelect, Option as TOption } from '../../../select';
 import TInput from '../../../input';
 import TInputNumber from '../../../input-number';
-import { FORMAT_INPUT_CONFIG } from './config';
 
 export default defineComponent({
   name: 'FormatInputs',
@@ -30,21 +29,6 @@ export default defineComponent({
     },
   },
   setup(props) {
-    const inputConfigs = computed(() => {
-      const configs = [...FORMAT_INPUT_CONFIG[props.format]];
-      if (props.enableAlpha) {
-        configs.push({
-          type: 'inputNumber',
-          key: 'a',
-          min: 0,
-          max: 100,
-          format: (value: number) => `${value}%`,
-          flex: 1.15,
-        });
-      }
-      return configs;
-    });
-
     // 这些值需要初始化一下
     const modelValues = reactive<any>({
       r: 0,
@@ -64,51 +48,20 @@ export default defineComponent({
     });
     const lastModelValue = reactive<any>({});
 
-    /**
-     * 获取不同格式的输入输出值
-     * @param type 'encode' | 'decode'
-     * @returns
-     */
-    const getFormatColorMap = (type: 'encode' | 'decode') => {
-      const { color } = props;
-      if (type === 'encode') {
-        return {
-          HSV: color.getHsva(),
-          HSL: color.getHsla(),
-          RGB: color.getRgba(),
-          CMYK: color.getCmyk(),
-          CSS: {
-            css: color.css,
-          },
-          HEX: {
-            hex: color.hex,
-          },
-        };
-      }
-      // decode
-      return {
-        HSV: Color.object2color(modelValues, 'HSV'),
-        HSL: Color.object2color(modelValues, 'HSL'),
-        RGB: Color.object2color(modelValues, 'RGB'),
-        CMYK: Color.object2color(modelValues, 'CMYK'),
-        CSS: modelValues.css,
-        HEX: modelValues.hex,
-      };
-    };
-
-    // 更新modelValues
     const updateModelValue = () => {
       const { format, color } = props;
-      const values: any = getFormatColorMap('encode')[format];
+      const values = getColorFormatMap(color, 'encode')[format];
+      // @ts-ignore
       values.a = Math.round(color.alpha * 100);
       Object.keys(values).forEach((key) => {
+        // @ts-ignore
         modelValues[key] = values[key];
+        // @ts-ignore
         lastModelValue[key] = values[key];
       });
     };
 
     updateModelValue();
-
     const throttleUpdate = throttle(updateModelValue, 100);
 
     watch(() => {
@@ -119,16 +72,26 @@ export default defineComponent({
     }, throttleUpdate);
 
     const handleChange = (key: string, v: number | string) => {
-      if (v === lastModelValue[key]) {
-        return;
+      if (v === lastModelValue[key]) return;
+
+      if (key === 'a') {
+        // 透明通道
+        // eslint-disable-next-line vue/no-mutating-props, no-param-reassign
+        props.color.alpha = (v as number) / 100;
+      } else if (key === 'hex' || key === 'css') {
+        // 纯字符串类型的格式
+        props.color.update(v as string);
+      } else {
+        // 需要进一步转换的格式
+        props.color.update(Color.object2color(modelValues, props.format));
       }
-      const value = getFormatColorMap('decode')[props.format];
-      props.handleFormatInputChange(value, modelValues.a / 100, key, v);
+
+      const value = getColorFormatMap(props.color, 'decode')[props.format];
+      props.handleFormatInputChange(value, props.color.alpha, key, v);
     };
 
     return {
       modelValues,
-      inputConfigs,
       handleChange,
     };
   },
@@ -138,7 +101,7 @@ export default defineComponent({
     };
     return (
       <div class="input-group">
-        {this.inputConfigs.map((config) => (
+        {getColorFormatInputs(this.format, this.enableAlpha).map((config) => (
           <div
             class="input-group__item"
             key={config.key}