Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 15 commits into from
May 6, 2025
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
a19f48d
refactor(color-picker): ensure mode switches based on color value
RylanBot Apr 20, 2025
c3351fb
chore: update snapshots
RylanBot Apr 20, 2025
69294da
fix(color-picker): update alpha format handling
RylanBot Apr 20, 2025
d11c171
fix(color-picker): improve input change handling and validation
RylanBot Apr 20, 2025
f3af3d0
fix(color-picker): avoid color update failure in controlled mode
RylanBot Apr 23, 2025
30f0fc9
chore: update common
github-actions[bot] Apr 24, 2025
752ab98
chore: merge develop
github-actions[bot] Apr 24, 2025
2070475
refactor(color-picker): replace logic with functions from common repo
RylanBot Apr 27, 2025
b3a6c0b
fix(color-picker): correct color update logic
RylanBot Apr 28, 2025
174ecaf
refactor(color-picker): remove unnecessary logic
RylanBot Apr 28, 2025
7d7267c
refactor(color-picker): exclude non-gradient values in gradient-only …
RylanBot Apr 28, 2025
8903b5f
refactor(color-picker): update types and remove undeveloped props
RylanBot Apr 28, 2025
b4f9610
refactor(color-picker): simplify type check in recent colors filtering
RylanBot Apr 28, 2025
cb6f41d
Merge branch 'develop' into fix/color-picker
uyarn May 6, 2025
d33651c
chore: stash changelog [ci skip]
tdesign-bot May 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/common
Open in desktop
Submodule common updated 9 files
+39 −0 docs/mobile/api/slider.en-US.md
+16 −16 docs/mobile/api/slider.md
+30 −10 js/color-picker/color.ts
+132 −4 js/color-picker/constants.ts
+95 −0 js/color-picker/format.ts
+31 −22 js/color-picker/gradient.ts
+3 −0 js/color-picker/index.ts
+33 −0 js/color-picker/types.ts
+36 −5 style/web/components/chat/_index.less
59 changes: 0 additions & 59 deletions packages/components/color-picker/_usage/props.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,4 @@
[
{
"name": "closeBtn",
"type": "Boolean",
"defaultValue": true,
"options": []
},
{
"name": "disabled",
"type": "Boolean",
Expand All @@ -22,58 +16,5 @@
"type": "Boolean",
"defaultValue": true,
"options": []
},
{
"name": "format",
"type": "enum",
"defaultValue": "RGB",
"options": [
{
"label": "RGB",
"value": "RGB"
},
{
"label": "RGBA",
"value": "RGBA"
},
{
"label": "HSL",
"value": "HSL"
},
{
"label": "HSLA",
"value": "HSLA"
},
{
"label": "HSB",
"value": "HSB"
},
{
"label": "HSV",
"value": "HSV"
},
{
"label": "HSVA",
"value": "HSVA"
},
{
"label": "HEX",
"value": "HEX"
},
{
"label": "CMYK",
"value": "CMYK"
},
{
"label": "CSS",
"value": "CSS"
}
]
},
{
"name": "multiple",
"type": "Boolean",
"defaultValue": false,
"options": []
}
]
13 changes: 6 additions & 7 deletions packages/components/color-picker/color-picker.en-US.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,26 @@
:: BASE_DOC ::

## API

### ColorPicker Props

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-next/blob/develop/packages/components/common.ts) | N
colorModes | Array | ["monochrome", "linear-gradient"] | Typescript：`Array<'monochrome' \| 'linear-gradient'>` | N
disabled | Boolean | - | \- | 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-next/blob/develop/packages/components/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-next/blob/develop/packages/components/color-picker/type.ts) | N
recentColors | Array | [] | used color recently。`v-model:recentColors` 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。`v-model:recentColors` 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-next/blob/develop/packages/components/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/packages/components/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` and `v-model:value` 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-next/blob/develop/packages/components/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
Expand Down
13 changes: 6 additions & 7 deletions packages/components/color-picker/color-picker.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,26 @@
:: BASE_DOC ::

## API

### ColorPicker Props

名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
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-next/blob/develop/packages/components/common.ts) | N
colorModes | Array | ["monochrome", "linear-gradient"] | 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色。TS 类型：`Array<'monochrome' \| 'linear-gradient'>` | N
disabled | Boolean | - | 是否禁用组件 | 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-next/blob/develop/packages/components/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-next/blob/develop/packages/components/color-picker/type.ts) | N
recentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。支持语法糖 `v-model:recentColors`。TS 类型：`boolean \| Array<string> \| null` | N
defaultRecentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 null 则完全不显示“最近使用颜色”。非受控属性。TS 类型：`boolean \| Array<string> \| null` | N
recentColors | Array | [] | 最近使用的颜色。值为 [] 表示以组件内部的“最近使用颜色”为准，值长度大于 0 则以该值为准显示“最近使用颜色”。值为 false 或 null 则完全不显示“最近使用颜色”。支持语法糖 `v-model:recentColors`。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-next/blob/develop/packages/components/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/packages/components/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` 或 `v-model:value` | 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-next/blob/develop/packages/components/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
Expand Down
125 changes: 0 additions & 125 deletions packages/components/color-picker/components/format/config.ts
View file
Open in desktop

This file was deleted.

18 changes: 5 additions & 13 deletions packages/components/color-picker/components/format/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import { defineComponent, PropType, ref, watch } from 'vue';
import { upperCase } from 'lodash-es';
import { TdColorPickerProps } from '../../type';
import { Color, getColorFormatOptions } from '@tdesign/common-js/color-picker/index';
import type { TdColorPickerProps } from '../../type';
import props from '../../props';
import { FORMATS } from '@tdesign/common-js/color-picker/constants';
import { Color } from '../../utils';
import { Select as TSelect, Option as TOption } from '../../../select';
import FormatInputs from './inputs';
import { useBaseClassName } from '../../hooks';
Expand All @@ -17,12 +15,6 @@ export default defineComponent({
color: {
type: Object as PropType<Color>,
},
onModeChange: {
type: Function,
default: () => {
return () => {};
},
},
onInputChange: {
type: Function,
default: () => {
Expand All @@ -33,6 +25,7 @@ export default defineComponent({
setup(props) {
const baseClassName = useBaseClassName();
const formatModel = ref<TdColorPickerProps['format']>(props.format);

watch(
() => [props.format],
() => (formatModel.value = props.format),
Expand All @@ -44,7 +37,6 @@ export default defineComponent({
*/
const handleModeChange = (v: TdColorPickerProps['format']) => {
formatModel.value = v;
props.onModeChange(v);
};

return () => {
Expand All @@ -69,8 +61,8 @@ export default defineComponent({
v-model={formatModel.value}
onChange={handleModeChange}
>
{FORMATS.map((item) => (
<TOption key={item} value={item} label={upperCase(item)} style={{ fontSize: '12px' }} />
{getColorFormatOptions(props.enableAlpha).map((item) => (
<TOption key={item} value={item} label={item} style={{ fontSize: '12px' }} />
))}
</TSelect>
</div>
Expand Down
Loading