feat(color-picker): add enableMultipleGradient api (#2260)

* feat(color-picker): add enableMultipleGradient api

* feat(time-picker): add context param in pick callback event

src/color-picker/_example/panel.vue

@@ -20,6 +20,7 @@
         @change="handleChange"
         @palette-bar-change="handlePaletteChange"
         @recent-colors-change="handleRecentColorsChange"
+        :enable-multiple-gradient="false"
       /></t-space>
   </t-space>
 </template>

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/tree/develop/src/color-picker/type.ts) | N
 multiple | Boolean | false | \- | 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/tree/develop/src/color-picker/type.ts) | N
 multiple | Boolean | false | 【开发中】是否允许选中多个颜色 | N

src/color-picker/panel/index.tsx

@@ -343,7 +343,12 @@ export default defineComponent({
         />
         <div class={[`${baseClassName}__body`]}>
           {isGradient ? (
-            <linear-gradient color={this.color} disabled={this.disabled} handleChange={this.handleGradientChange} />
+            <linear-gradient
+              color={this.color}
+              disabled={this.disabled}
+              handleChange={this.handleGradientChange}
+              enableMultipleGradient={this.enableMultipleGradient}
+            />
           ) : null}
           <saturation-panel color={this.color} disabled={this.disabled} handleChange={this.handleSatAndValueChange} />
           <div class={[`${baseClassName}__sliders-wrapper`]}>

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

@@ -19,6 +19,10 @@ export default defineComponent({
   inheritAttrs: false,
   props: {
     ...baseProps,
+    enableMultipleGradient: {
+      type: Boolean,
+      default: true,
+    },
   },
   setup(props) {
     const baseClassName = useBaseClassName();
@@ -177,7 +181,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

@@ -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']>,

src/color-picker/type.ts

@@ -34,6 +34,11 @@ export interface TdColorPickerProps {
    * @default false
    */
   enableAlpha?: boolean;
+  /**
+   * 是否允许开启通过点击渐变轴增加渐变梯度，默认开启，关闭时只会存在起始和结束两个颜色
+   * @default true
+   */
+  enableMultipleGradient?: boolean;
   /**
    * 格式化色值。`enableAlpha` 为真时，`RGBA/HSLA/HSVA` 等值有效
    * @default RGB

src/dropdown/dropdown.tsx

@@ -19,6 +19,7 @@ export default defineComponent({
       if (props.hideAfterItemClick) {
         isPopupVisible.value = false;
         props.popupProps?.onVisibleChange?.(false, context);
+        props.popupProps?.['on-visible-change']?.(false, context);
       }
       props?.onClick?.(data, context);
       emit('click', data, context);
@@ -27,6 +28,7 @@ export default defineComponent({
     const handleVisibleChange = (visible: boolean, context: PopupVisibleChangeContext) => {
       isPopupVisible.value = visible;
       props.popupProps?.onVisibleChange?.(visible, context);
+      props.popupProps?.['on-visible-change']?.(visible, context);
     };
 
     return {
@@ -41,7 +43,7 @@ export default defineComponent({
       disabled: this.disabled,
       placement: this.placement,
       trigger: this.trigger,
-      ...omit(this.popupProps, 'onVisibleChange'),
+      ...omit(this.popupProps, ['onVisibleChange', 'on-visible-change']),
       overlayInnerClassName: [
         this.dropdownClass,
         (this.popupProps as TdDropdownProps['popupProps'])?.overlayInnerClassName,

src/time-picker/_example/hms.vue

@@ -21,7 +21,7 @@ export default {
       console.log('close');
     },
     pick(v) {
-      console.log(v, 'vv');
+      console.log(v);
     },
   },
 };

src/time-picker/panel/single-panel.tsx

@@ -177,7 +177,7 @@ export default defineComponent({
       return distance;
     };
 
-    const handleScroll = (col: EPickerCols) => {
+    const handleScroll = (col: EPickerCols, e: MouseEvent) => {
       let val: number | string;
       let formattedVal: string;
       if (!props.isShowPanel) return;
@@ -226,7 +226,7 @@ export default defineComponent({
           formattedVal = dayjsValue.value.format(format.value);
         }
       }
-      if (formattedVal !== value.value) props.onChange?.(formattedVal);
+      if (formattedVal !== value.value) props.onChange?.(formattedVal, e);
       if (distance !== scrollTop) {
         const scrollCtrl = (ctx.refs as any)[`${col}Col`];
 
@@ -255,7 +255,7 @@ export default defineComponent({
       });
     };
 
-    const handleTimeItemClick = (col: EPickerCols, el: string | number, idx: number) => {
+    const handleTimeItemClick = (col: EPickerCols, el: string | number, idx: number, e: MouseEvent) => {
       if (!timeItemCanUsed(col, el)) return;
       if (timeArr.includes(col)) {
         if (
@@ -270,9 +270,9 @@ export default defineComponent({
       } else {
         const currentHour = dayjsValue.value.hour();
         if (el === AM && currentHour >= 12) {
-          props.onChange?.(dayjsValue.value.hour(currentHour - 12).format(format.value));
+          props.onChange?.(dayjsValue.value.hour(currentHour - 12).format(format.value), e);
         } else if (el === PM && currentHour < 12) {
-          props.onChange?.(dayjsValue.value.hour(currentHour + 12).format(format.value));
+          props.onChange?.(dayjsValue.value.hour(currentHour + 12).format(format.value), e);
         }
       }
     };
@@ -344,7 +344,7 @@ export default defineComponent({
             key={`${col}_${idx}`}
             ref={`${col}Col`}
             class={`${this.panelClassName}-body-scroll`}
-            onScroll={debounce(() => this.handleScroll(col), 50)}
+            onScroll={debounce((e) => this.handleScroll(col, e), 50)}
           >
             {this.getColList(col).map((el) => (
               <li
@@ -356,7 +356,7 @@ export default defineComponent({
                     [`${this.classPrefix}-is-current`]: this.isCurrent(col, el),
                   },
                 ]}
-                onClick={() => this.handleTimeItemClick(col, el, idx)}
+                onClick={(e: MouseEvent) => this.handleTimeItemClick(col, el, idx, e)}
               >
                 {/* eslint-disable-next-line no-nested-ternary */}
                 {timeArr.includes(col)

src/time-picker/panel/time-picker-panel.tsx

@@ -50,10 +50,10 @@ export default defineComponent({
       triggerScroll.value = false;
     };
 
-    const handleChange = (v: string) => {
+    const handleChange = (v: string, e: MouseEvent) => {
       // 触发onPick事件
-      props.onPick?.(v);
-      ctx.emit('pick', v); // 处理直接使用panel的场景 支持@/v-on语法
+      props.onPick?.(v, e);
+      ctx.emit('pick', v, e); // 处理直接使用panel的场景 支持@/v-on语法
 
       props.onChange?.(v);
       ctx.emit('change', v); // 处理直接使用panel的场景 支持@/v-on语法

src/time-picker/props.ts

@@ -45,9 +45,19 @@ export default {
   presets: {
     type: Object as PropType<TdTimePickerProps['presets']>,
   },
+  /** 尺寸 */
+  size: {
+    type: String as PropType<TdTimePickerProps['size']>,
+    default: 'medium' as TdTimePickerProps['size'],
+    validator(val: TdTimePickerProps['size']): boolean {
+      if (!val) return true;
+      return ['small', 'medium', 'large'].includes(val);
+    },
+  },
   /** 输入框状态 */
   status: {
     type: String as PropType<TdTimePickerProps['status']>,
+    default: 'default' as TdTimePickerProps['status'],
     validator(val: TdTimePickerProps['status']): boolean {
       if (!val) return true;
       return ['default', 'success', 'warning', 'error'].includes(val);
@@ -64,12 +74,12 @@ export default {
   },
   /** 选中值 */
   value: {
-    type: String,
+    type: String as PropType<TdTimePickerProps['value']>,
     default: '',
   },
   /** 选中值，非受控属性 */
   defaultValue: {
-    type: String,
+    type: String as PropType<TdTimePickerProps['defaultValue']>,
     default: '',
   },
   /** 当输入框失去焦点时触发，value 表示组件当前有效值 */

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

@@ -8,15 +8,17 @@ name | type | default | description | required
 allowInput | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
 disableTime | Function | - | Typescript：`(h: number, m: number, s: number) => Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number> }>` | N
-disabled | Boolean | false | \- | N
+disabled | Boolean | - | \- | N
 format | String | HH:mm:ss | \- | N
 hideDisabledTime | Boolean | true | \- | N
 inputProps | Object | - | Typescript：`InputProps`，[Input API Documents](./input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
 placeholder | String | undefined | \- | N
 popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
 presets | Object | - | Typescript：`PresetTime` `interface PresetTime { [presetName: string]: TimePickerValue \| (() => TimePickerValue) }`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
 size | String | medium | options：small/medium/large | N
+status | String | default | options：default/success/warning/error | N
 steps | Array | [1, 1, 1] | Typescript：`Array<string \| number>` | N
+tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 value | String | - | `v-model` is supported。Typescript：`TimePickerValue` `type TimePickerValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
 defaultValue | String | - | uncontrolled property。Typescript：`TimePickerValue` `type TimePickerValue = string`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
 onBlur | Function |  | Typescript：`(context: { value: TimePickerValue; e: FocusEvent }) => void`<br/> | N
@@ -25,7 +27,7 @@ onClose | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/>
 onFocus | Function |  | Typescript：`(context: { value: TimePickerValue; e: FocusEvent }) => void`<br/> | N
 onInput | Function |  | Typescript：`(context: { value: TimePickerValue; e: InputEvent }) => void`<br/> | N
 onOpen | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
-onPick | Function |  | Typescript：`(value: TimePickerValue) => void`<br/> | N
+onPick | Function |  | Typescript：`(value: TimePickerValue, context: { e: MouseEvent }) => void`<br/> | N
 
 ### TimePicker Events
 
@@ -37,7 +39,7 @@ close | `(context: { e: MouseEvent })` | \-
 focus | `(context: { value: TimePickerValue; e: FocusEvent })` | \-
 input | `(context: { value: TimePickerValue; e: InputEvent })` | \-
 open | `(context: { e: MouseEvent })` | \-
-pick | `(value: TimePickerValue)` | \-
+pick | `(value: TimePickerValue, context: { e: MouseEvent })` | \-
 
 ### TimeRangePicker Props
 
@@ -46,22 +48,24 @@ name | type | default | description | required
 allowInput | Boolean | false | \- | N
 clearable | Boolean | false | \- | N
 disableTime | Function | - | Typescript：`(h: number, m: number, s: number, context: { partial: TimeRangePickerPartial }) =>Partial<{ hour: Array<number>, minute: Array<number>, second: Array<number> }>` `type TimeRangePickerPartial = 'start' \| 'end'`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
-disabled | Boolean / Array | false | Typescript：`boolean \| Array<boolean>` | N
+disabled | Boolean / Array | - | Typescript：`boolean \| Array<boolean>` | N
 format | String | HH:mm:ss | \- | N
 hideDisabledTime | Boolean | true | \- | N
 placeholder | String / Array | undefined | Typescript：`string \| Array<string>` | N
 popupProps | Object | - | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
 presets | Object | - | Typescript：`PresetTimeRange` `interface PresetTimeRange { [presetRageName: string]: TimeRangeValue \| (() => TimeRangeValue)}`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
 rangeInputProps | Object | - | Typescript：`RangeInputProps`，[RangeInput API Documents](./range-input?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
 size | String | medium | options：small/medium/large | N
+status | String | default | options：default/success/warning/error | N
 steps | Array | [1, 1, 1] | Typescript：`Array<string \| number>` | N
+tips | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-vue/blob/develop/src/common.ts) | N
 value | Array | - | `v-model` is supported。Typescript：`TimeRangeValue` `type TimeRangeValue = Array<string>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
 defaultValue | Array | - | uncontrolled property。Typescript：`TimeRangeValue` `type TimeRangeValue = Array<string>`。[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts) | N
 onBlur | Function |  | Typescript：`(context: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial })  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/> | N
 onChange | Function |  | Typescript：`(value: TimeRangeValue) => void`<br/> | N
 onFocus | Function |  | Typescript：`(context?: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial })  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/> | N
 onInput | Function |  | Typescript：`(context: { value: TimeRangeValue; e?: InputEvent; position?: TimeRangePickerPartial  })  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/> | N
-onPick | Function |  | Typescript：`(value: TimeRangeValue, context: { position?: TimeRangePickerPartial }) => void`<br/> | N
+onPick | Function |  | Typescript：`(value: TimeRangeValue, context: { e: MouseEvent, position?: TimeRangePickerPartial }) => void`<br/> | N
 
 ### TimeRangePicker Events
 
@@ -71,4 +75,4 @@ blur | `(context: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangeP
 change | `(value: TimeRangeValue)` | \-
 focus | `(context?: { value: TimeRangeValue; e?: FocusEvent; position?: TimeRangePickerPartial }) ` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/>
 input | `(context: { value: TimeRangeValue; e?: InputEvent; position?: TimeRangePickerPartial  }) ` | [see more ts definition](https://github.com/Tencent/tdesign-vue/tree/develop/src/time-picker/type.ts)。<br/>`type TimeRangePickerPartial = 'start' \| 'end'`<br/>
-pick | `(value: TimeRangeValue, context: { position?: TimeRangePickerPartial })` | \-
+pick | `(value: TimeRangeValue, context: { e: MouseEvent, position?: TimeRangePickerPartial })` | \-