feat(color-picker): support size and enableMultipleGradient api

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

@@ -10,6 +10,7 @@ closeBtn | String / Boolean / Slot / Function | true | Typescript：`string \| b
 colorModes | Array | ()=> ['monochrome', 'linear-gradient'] | Typescript：`Array<'monochrome' \| 'linear-gradient'>` | N
 disabled | Boolean | - | \- | N
 enableAlpha | Boolean | false | \- | N
+enableMultipleGradient | Boolean | true | \- | N
 format | String | RGB | options：RGB/RGBA/HSL/HSLA/HSB/HSV/HSVA/HEX/CMYK/CSS | N
 inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/color-picker/type.ts) | N
 multiple | Boolean | false | \- | N
@@ -18,6 +19,7 @@ recentColors | Array | [] | used color recently。`v-model:recentColors` is supp
 defaultRecentColors | Array | [] | used color recently。uncontrolled property。Typescript：`boolean \| Array<string>` | N
 selectInputProps | Object | - | Typescript：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue-next/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-next/blob/develop/src/common.ts) | N
 swatchColors | Array | - | swatch colors。Typescript：`Array<string>` | N
 value | String | - | color value。`v-model` and `v-model:value` is supported | N
 defaultValue | String | - | color value。uncontrolled property | N

src/color-picker/color-picker.md

@@ -10,6 +10,7 @@ closeBtn | String / Boolean / Slot / Function | true | 关闭按钮，值为 `tr
 colorModes | Array | ()=> ['monochrome', 'linear-gradient'] | 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色。TS 类型：`Array<'monochrome' \| 'linear-gradient'>` | N
 disabled | Boolean | - | 是否禁用组件 | 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
 inputProps | Object | - | 透传 Input 输入框组件全部属性。TS 类型：`InputProps`，[Input API Documents](./input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/tree/develop/src/color-picker/type.ts) | N
 multiple | Boolean | false | 【开发中】是否允许选中多个颜色 | N
@@ -18,6 +19,7 @@ recentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内
 defaultRecentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。非受控属性。TS 类型：`boolean \| Array<string>` | N
 selectInputProps | Object | - | 透传 SelectInputProps 筛选器输入框组件全部属性。TS 类型：`SelectInputProps`，[SelectInput API Documents](./select-input?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-vue-next/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-next/blob/develop/src/common.ts) | N
 swatchColors | Array | - | 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色。TS 类型：`Array<string>` | N
 value | String | - | 色值。支持语法糖 `v-model` 或 `v-model:value` | N
 defaultValue | String | - | 色值。非受控属性 | N

src/color-picker/color-picker.tsx

@@ -85,6 +85,7 @@ export default defineComponent({
               clearable={this.clearable}
               input-props={this.inputProps}
               onTriggerChange={this.setInnerValue}
+              size={this.size}
             />,
           )}
         </div>

src/color-picker/panel/index.tsx

@@ -320,7 +320,13 @@ export default defineComponent({
       <div class={[`${baseClassName}__panel`, this.disabled ? statusClassNames.disabled : false]}>
         <PanelHeader {...this.$props} mode={this.mode} onModeChange={this.handleModeChange} />
         <div class={[`${baseClassName}__body`]}>
-          {isGradient ? <LinearGradient {...baseProps} onChange={this.handleGradientChange} /> : null}
+          {isGradient ? (
+            <LinearGradient
+              {...baseProps}
+              onChange={this.handleGradientChange}
+              enableMultipleGradient={this.enableMultipleGradient}
+            />
+          ) : null}
 
           <SaturationPanel {...baseProps} onChange={this.handleSatAndValueChange} />
 

src/color-picker/panel/linear-gradient.tsx

@@ -15,6 +15,10 @@ export default defineComponent({
   inheritAttrs: false,
   props: {
     ...baseProps,
+    enableMultipleGradient: {
+      type: Boolean,
+      default: true,
+    },
   },
   setup(props) {
     const baseClassName = useBaseClassName();
@@ -171,7 +175,7 @@ export default defineComponent({
     };
 
     const handleThumbBarClick = (e: MouseEvent) => {
-      if (props.disabled) {
+      if (props.disabled || !props.enableMultipleGradient) {
         return;
       }
       let left = e.clientX - sliderRect.left;

src/color-picker/props.ts

@@ -13,7 +13,7 @@ export default {
   /** 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮 */
   closeBtn: {
     type: [String, Boolean, Function] as PropType<TdColorPickerProps['closeBtn']>,
-    default: true,
+    default: true as TdColorPickerProps['closeBtn'],
   },
   /** 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色 */
   colorModes: {
@@ -24,6 +24,11 @@ export default {
   disabled: Boolean,
   /** 是否开启透明通道 */
   enableAlpha: Boolean,
+  /** 是否允许开启通过点击渐变轴增加渐变梯度，默认开启，关闭时只会存在起始和结束两个颜色 */
+  enableMultipleGradient: {
+    type: Boolean,
+    default: true,
+  },
   /** 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效 */
   format: {
     type: String as PropType<TdColorPickerProps['format']>,
@@ -46,7 +51,7 @@ export default {
   /** 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色” */
   recentColors: {
     type: Array as PropType<TdColorPickerProps['recentColors']>,
-    default: undefined as TdColorPickerProps['recentColors'],
+    default: undefined,
   },
   /** 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”，非受控属性 */
   defaultRecentColors: {
@@ -62,6 +67,15 @@ export default {
     type: Boolean,
     default: true,
   },
+  /** 组件尺寸 */
+  size: {
+    type: String as PropType<TdColorPickerProps['size']>,
+    default: 'medium' as TdColorPickerProps['size'],
+    validator(val: TdColorPickerProps['size']): boolean {
+      if (!val) return true;
+      return ['small', 'medium', 'large'].includes(val);
+    },
+  },
   /** 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色 */
   swatchColors: {
     type: Array as PropType<TdColorPickerProps['swatchColors']>,

src/color-picker/trigger.tsx

@@ -3,6 +3,7 @@ import TInput from '../input';
 import { Color } from './utils';
 import { TdColorPickerProps } from './type';
 import { useBaseClassName } from './hooks';
+import { useCommonClassName } from '../hooks/useConfig';
 
 export default defineComponent({
   name: 'DefaultTrigger',
@@ -34,11 +35,15 @@ export default defineComponent({
         return () => {};
       },
     },
+    size: {
+      type: String as PropType<TdColorPickerProps['size']>,
+      default: 'medium',
+    },
   },
   setup(props) {
     const baseClassName = useBaseClassName();
     const value = ref(props.color);
-
+    const { SIZE: sizeClassNames } = useCommonClassName();
     watch(
       () => [props.color],
       () => (value.value = props.color),
@@ -60,17 +65,24 @@ export default defineComponent({
       baseClassName,
       value,
       handleChange,
+      sizeClassNames,
     };
   },
 
   render() {
-    const { baseClassName } = this;
+    const { baseClassName, sizeClassNames } = this;
+
     const inputSlots = {
       label: () => {
         return (
           <div class={[`${baseClassName}__trigger--default__color`, `${baseClassName}--bg-alpha`]}>
             <span
-              class={['color-inner']}
+              class={[
+                'color-inner',
+                {
+                  [sizeClassNames[this.size]]: this.size !== 'medium',
+                },
+              ]}
               style={{
                 background: this.value,
               }}
@@ -82,11 +94,12 @@ export default defineComponent({
     return (
       <TInput
         clearable={this.clearable}
-        {...this.inputProps}
+        size={this.size}
         v-slots={inputSlots}
         v-model={this.value}
         disabled={this.disabled}
         onBlur={this.handleChange}
+        {...this.inputProps}
       />
     );
   },

src/color-picker/type.ts

@@ -7,7 +7,7 @@
 import { InputProps } from '../input';
 import { PopupProps } from '../popup';
 import { SelectInputProps } from '../select-input';
-import { TNode } from '../common';
+import { TNode, SizeEnum } from '../common';
 
 export interface TdColorPickerProps {
   /**
@@ -34,6 +34,11 @@ export interface TdColorPickerProps {
    * @default false
    */
   enableAlpha?: boolean;
+  /**
+   * 是否允许开启通过点击渐变轴增加渐变梯度，默认开启，关闭时只会存在起始和结束两个颜色
+   * @default true
+   */
+  enableMultipleGradient?: boolean;
   /**
    * 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效
    * @default RGB
@@ -71,6 +76,11 @@ export interface TdColorPickerProps {
    * @default true
    */
   showPrimaryColorPreview?: boolean;
+  /**
+   * 组件尺寸
+   * @default medium
+   */
+  size?: SizeEnum;
   /**
    * 系统预设的颜色样例，值为 `null` 或 `[]` 则不显示系统色，值为 `undefined` 会显示组件内置的系统默认色
    */