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

src/color-picker/_usage/props.json

@@ -1,10 +1,4 @@
 [
-  {
-    "name": "closeBtn",
-    "type": "Boolean",
-    "defaultValue": true,
-    "options": []
-  },
   {
     "name": "disabled",
     "type": "Boolean",

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

@@ -8,24 +8,23 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 borderless | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
-closeBtn | String / Boolean / Slot / Function | true | Typescript：`string \| boolean \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 colorModes | Array | ["monochrome", "linear-gradient"] | Typescript：`Array<'monochrome' \| 'linear-gradient'>` | N
 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
-recentColors | Array | [] | used color recently。`.sync` is supported。Typescript：`boolean \| Array<string> \| null` | N
-defaultRecentColors | Array | [] | used color recently。uncontrolled property。Typescript：`boolean \| Array<string> \| null` | N
+recentColors | Array | [] | used color recently。`.sync` is supported。Typescript：`Array<string> \| boolean \| null` | N
+defaultRecentColors | Array | [] | used color recently。uncontrolled property。Typescript：`Array<string> \| boolean \| null` | N
 selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N
 showPrimaryColorPreview | Boolean | true | \- | N
 size | String | medium | options: small/medium/large。Typescript：`SizeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-swatchColors | Array | - | swatch colors。Typescript：`Array<string> \| null` | N
+swatchColors | Array | undefined | swatch colors。Typescript：`Array<string> \| null \| undefined` | N
 value | String | - | color value。`v-model` is supported | N
 defaultValue | String | - | color value。uncontrolled property | N
 onChange | Function |  | Typescript：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`<br/>[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/> | N
+onClear | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
 onPaletteBarChange | Function |  | Typescript：`(context: { color: ColorObject }) => void`<br/>[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/> | N
 onRecentColorsChange | Function |  | Typescript：`(value: Array<string>) => void`<br/> | N
 
@@ -34,5 +33,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

@@ -8,24 +8,23 @@
 -- | -- | -- | -- | --
 borderless | Boolean | false | 无边框模式 | N
 clearable | Boolean | false | 是否可清空 | N
-closeBtn | String / Boolean / Slot / Function | true | 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮。TS 类型：`string \| boolean \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 colorModes | Array | ["monochrome", "linear-gradient"] | 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色。TS 类型：`Array<'monochrome' \| 'linear-gradient'>` | N
 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
-recentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。支持语法糖 `.sync`。TS 类型：`boolean \| Array<string> \| null` | N
-defaultRecentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。非受控属性。TS 类型：`boolean \| Array<string> \| null` | N
+recentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 false 或 null 则完全不显示“最近使用颜色”。支持语法糖 `.sync`。TS 类型：`Array<string> \| boolean \| null` | N
+defaultRecentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 false 或 null 则完全不显示“最近使用颜色”。非受控属性。TS 类型：`Array<string> \| boolean \| null` | N
 selectInputProps | Object | - | 透传 SelectInputProps 筛选器输入框组件全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue/tree/develop/src/color-picker/type.ts) | N
 showPrimaryColorPreview | Boolean | true | 是否展示颜色选择条右侧的颜色预览区域 | N
 size | String | medium | 组件尺寸。可选项：small/medium/large。TS 类型：`SizeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
-swatchColors | Array | - | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array<string> \| null` | N
+swatchColors | Array | undefined | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array<string> \| null \| undefined` | N
 value | String | - | 色值。支持语法糖 `v-model` | N
 defaultValue | String | - | 色值。非受控属性 | N
 onChange | Function |  | TS 类型：`(value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void`<br/>选中的色值发生变化时触发，第一个参数 `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/> | N
+onClear | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>清空按钮点击时触发 | N
 onPaletteBarChange | Function |  | TS 类型：`(context: { color: ColorObject }) => void`<br/>调色板控制器的值变化时触发，`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/> | N
 onRecentColorsChange | Function |  | TS 类型：`(value: Array<string>) => void`<br/>最近使用颜色发生变化时触发 | N
 
@@ -34,5 +33,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';
@@ -27,10 +25,6 @@ export default defineComponent({
     color: {
       type: Object as PropType<Color>,
     },
-    handleFormatModeChange: {
-      type: Function as PropType<TdColorHandler>,
-      default: () => () => {},
-    },
     handleFormatInputChange: {
       type: Function as PropType<TdColorHandler>,
       default: () => () => {},
@@ -48,9 +42,8 @@ export default defineComponent({
      * 格式化类型改变触发
      * @param v
      */
-    const handleModeChange = (v: TdColorPickerProps['format']) => {
+    const handleModeChange = (v: ColorFormat) => {
       formatModel.value = v;
-      props.handleFormatModeChange(v);
     };
 
     return {
@@ -83,8 +76,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}