From 76a7880d0ced058d00b03b93e9c25edcb41e9b23 Mon Sep 17 00:00:00 2001 From: Uyarn Date: Fri, 5 May 2023 16:32:49 +0800 Subject: [PATCH] feat(colorpicker): support size and enableMultipleGradient api --- src/_common | 2 +- src/color-picker/color-picker.en-US.md | 2 ++ src/color-picker/color-picker.md | 2 ++ src/color-picker/color-picker.tsx | 1 + src/color-picker/panel/index.tsx | 8 +++++++- src/color-picker/panel/linear-gradient.tsx | 6 +++++- src/color-picker/props.ts | 18 ++++++++++++++++-- src/color-picker/trigger.tsx | 21 +++++++++++++++++---- src/color-picker/type.ts | 12 +++++++++++- 9 files changed, 62 insertions(+), 10 deletions(-) diff --git a/src/_common b/src/_common index 88fb3d0a5c..664e903598 160000 --- a/src/_common +++ b/src/_common @@ -1 +1 @@ -Subproject commit 88fb3d0a5ce26eebd1e0a46d41aef08a274ea637 +Subproject commit 664e90359872e91f454aa0047e80ed62641be449 diff --git a/src/color-picker/color-picker.en-US.md b/src/color-picker/color-picker.en-US.md index 0801544c9a..317b66ee65 100644 --- a/src/color-picker/color-picker.en-US.md +++ b/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` | 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` | N value | String | - | color value。`v-model` and `v-model:value` is supported | N defaultValue | String | - | color value。uncontrolled property | N diff --git a/src/color-picker/color-picker.md b/src/color-picker/color-picker.md index df7a2580fb..8b3881dedd 100644 --- a/src/color-picker/color-picker.md +++ b/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` | 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` | N value | String | - | 色值。支持语法糖 `v-model` 或 `v-model:value` | N defaultValue | String | - | 色值。非受控属性 | N diff --git a/src/color-picker/color-picker.tsx b/src/color-picker/color-picker.tsx index 59180fbe24..97edf857a4 100644 --- a/src/color-picker/color-picker.tsx +++ b/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} />, )} diff --git a/src/color-picker/panel/index.tsx b/src/color-picker/panel/index.tsx index f0970acf3c..5ad2aac0b7 100644 --- a/src/color-picker/panel/index.tsx +++ b/src/color-picker/panel/index.tsx @@ -320,7 +320,13 @@ export default defineComponent({
- {isGradient ? : null} + {isGradient ? ( + + ) : null} diff --git a/src/color-picker/panel/linear-gradient.tsx b/src/color-picker/panel/linear-gradient.tsx index 9d3398dbe7..d40b328586 100644 --- a/src/color-picker/panel/linear-gradient.tsx +++ b/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; diff --git a/src/color-picker/props.ts b/src/color-picker/props.ts index a13afbe240..3439034af0 100644 --- a/src/color-picker/props.ts +++ b/src/color-picker/props.ts @@ -13,7 +13,7 @@ export default { /** 关闭按钮，值为 `true` 显示默认关闭按钮；值为 `false` 或 `undefined` 则不显示关闭按钮；值类型为函数，则表示自定义关闭按钮 */ closeBtn: { type: [String, Boolean, Function] as PropType, - 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, @@ -46,7 +51,7 @@ export default { /** 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色” */ recentColors: { type: Array as PropType, - 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, + 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, diff --git a/src/color-picker/trigger.tsx b/src/color-picker/trigger.tsx index e94bd5cbd8..6856140caf 100644 --- a/src/color-picker/trigger.tsx +++ b/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, + 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 (
); }, diff --git a/src/color-picker/type.ts b/src/color-picker/type.ts index a31cd81c3d..ceeee532f3 100644 --- a/src/color-picker/type.ts +++ b/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` 会显示组件内置的系统默认色 */