refactor(color-picker): ensure mode switches based on color value by RylanBot · Pull Request #3572 · Tencent/tdesign-vue

RylanBot · 2025-04-17T05:27:17Z

🤔 这个 PR 的性质是？

🔗 相关 Issue

💡 需求背景和解决方案

Tip

以下出现的双栏截图和视频，左边均是有问题的版本，右边是预期合理的版本

1. PC 端统一修复➕重构

序号	描述	类型
1.1	「渐变」切回「单色」模式	① CSS 中的色值仍保留渐变时的格式，未按预期转换为 rgba ② 新增最近使用颜色仍为渐变色，未更新为单色 #3566
1.2	自动根据当前数值切换模式	① 🐛 Trigger Input 【视频 1-2-1】 / Tencent/tdesign-vue-next#3486 / Tencent/tdesign-vue-next#2821 ② ♻️ 最近使用颜色、预设颜色【视频 1-2-2】
1.3	透明通道	① 🐛 Trigger Input 无法同步透明度值【视频 1-3-1】 ② ♻️ 优化格式化返回值，例如 RGB 转为 RGBA，HSL 转为 HSLA 等
1.4	colorModes = {['linear-gradient']}	当用户仅使用渐变模式时，预设颜色中过滤非渐变的色值
1.5	Trigger Input	① 由于之前的逻辑是先检查用户输入色值是否有效，再决定是否更新 → 导致无法直接删除某个字母，只能整体粘贴替换，现在移除验证 ② 移除 onBlur 事件，避免与 onChange 重复触发 ③ onChange 回调传入 `context: { color: ColorObject; trigger: 'input' }`，符合文档标注的 TS 类型，避免返回给用户一个 undefined 或合成事件

📝 更新日志

refactor(ColorPicker): 自动根据「触发器 / 最近颜色 / 预设颜色」的色值进行切换单色和渐变模式；只开启渐变模式时，过滤「预设颜色 / 当前颜色」中的非渐变色值；新增 format HEX8，移除 HSB；使用渐变模式的业务请注意此变更 ⚠️
fix(ColorPicker): 开启透明通道时的返回值格式化异常
本条 PR 不需要纳入 Changelog

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项。⚠️

文档已补充或无须补充
代码演示已提供或无须提供
TypeScript 定义已补充或无须补充
Changelog 已提供或无须提供

pkg-pr-new · 2025-04-17T05:32:38Z

Open in StackBlitz

npm i https://pkg.pr.new/tdesign-vue@3572

commit: 598e354

github-actions · 2025-04-17T05:32:56Z

Copilot

Pull Request Overview

This PR refactors the color-picker component to ensure that it switches modes automatically based on the current color value while also addressing value formatting and event handling refinements.

In trigger.tsx, the onBlur event has been replaced with onChange and the handleChange logic has been simplified.
In panel/index.tsx, a new getModeByColor function is introduced to determine the mode from the input color, with corresponding updates to watch, mode change, and color-setting functions.

Reviewed Changes

Copilot reviewed 3 out of 4 changed files in this pull request and generated 2 comments.

File	Description
src/color-picker/trigger.tsx	Simplifies handleChange and changes the event trigger from onBlur to onChange.
src/color-picker/panel/index.tsx	Implements automatic mode switching using getModeByColor and refines color formatting.

Files not reviewed (1)

test/snap/snapshots/ssr.test.js.snap: Language not supported

src/color-picker/trigger.tsx

src/color-picker/panel/index.tsx

liweijie0812 · 2025-04-24T16:16:51Z

/update-common

src/color-picker/color-picker.md

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

src/color-picker/color-picker.md

src/color-picker/type.ts

src/color-picker/props.ts

…mode

) * refactor(color-picker): ensure mode switches based on color value * fix(color-picker): ensure gradient and alpha values update correctly * chore: update snapshots * fix(color-picker): update alpha format handling * fix(color-picker): ensure `onChange` includes `color` and `trigger` * fix(color-picker): avoid color update failure in controlled mode * chore: update common * refactor(color-picker): replace logic with functions from common repo * fix(color-picker): incorrect format mapping * chore(color-picker): remove `onClear` * chore: update submodule * docs(color-picker): remove the undeveloped `clear` event * chore: update snapshots * refactor(color-picker): remove unnecessary logic * chore: update snapshot * refactor(color-picker): exclude non-gradient values in gradient-only mode * docs(color-picker): update types and remove undeveloped props * fix(radio-group): highlight failure --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

* chore: add CHANGELOG (#3569) * chore(submodule): update _common (#3571) * refactor(upload): missing custom fail text implemention (#3574) * chore: update snapshots (#3575) * chore: update snapshots * chore: update snapshot --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * feat(Icon): upgrade tdesign-icons-vue to 0.3.5 (#3577) * feat(select): add option removal handling for multiple selection (#3582) (#3584) * feat(select): add option removal handling for multiple selection (#3582) * chore: naming * chore: naming --------- Co-authored-by: wū yāng <uyarnchen@gmail.com> * fix(Select): 修复valueType:object与keys同时设置时的绑定值错误 (#3583) * refactor(color-picker): ensure mode switches based on color value (#3572) * refactor(color-picker): ensure mode switches based on color value * fix(color-picker): ensure gradient and alpha values update correctly * chore: update snapshots * fix(color-picker): update alpha format handling * fix(color-picker): ensure `onChange` includes `color` and `trigger` * fix(color-picker): avoid color update failure in controlled mode * chore: update common * refactor(color-picker): replace logic with functions from common repo * fix(color-picker): incorrect format mapping * chore(color-picker): remove `onClear` * chore: update submodule * docs(color-picker): remove the undeveloped `clear` event * chore: update snapshots * refactor(color-picker): remove unnecessary logic * chore: update snapshot * refactor(color-picker): exclude non-gradient values in gradient-only mode * docs(color-picker): update types and remove undeveloped props * fix(radio-group): highlight failure --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * fix(tag): allow title rendering without max-width restriction (#3592) * chore(submodule): update _common (#3593) * fix(docs): add English component import for Guide (#3595) * feat(tag-input): show move cursor when draggable (#3594) * feat(tag-input): show move cursor when draggable * chore: update snapshot --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * docs: update Chinese title for Dark Mode (#3596) * feat(InputNumber): add `enableRound` support to `decimalPlaces` prop (#3601) * chore(ci): generation vue pkg templates (#3603) * chore(ci): generation vue pkg templates * fix: change package manager from pnpm to npm in template generation script * fix: update package manager to pnpm in workflow and template generation script * 更新 pkg-pr-new.yml * 更新 pkg-pr-new-generate-template.mjs * 更新 pkg-pr-new-generate-template.mjs * 更新 pkg-pr-new-generate-template.mjs * 更新 pkg-pr-new-generate-template.mjs * chore: update diff --------- Co-authored-by: liweijie0812 <674416404@qq.com> * chore: optimize CHANGELOG.md file size (#3606) * chore: optimize CHANGELOG.md file size * chore: update typos config * docs: A new contributor graph that evaluates community activities from all dimensions (#3605) * docs: A new contributor graph that evaluates community activities from all dimensions. * chore: update params * chore: update params * Update README-zh_CN.md * Update README.md * Update README-zh_CN.md --------- Co-authored-by: wū yāng <uyarnchen@gmail.com> Co-authored-by: liweijie0812 <674416404@qq.com> * fix(drawer): `cancel-btn` and `confirm-btn` type supports `null` (#3612) * chore: pin cssstyle 4.3.1 (#3618) * fix(Table): sync columnCheckboxKeys on close (#3616) * fix(demo-page): remove`undefined` demo path and sort demos (#3615) refactor(demo-page): 重构 demos 页面优化路由监听及渲染逻辑 * chore: fix win run build (#3617) * chore: fix win run build * chore: add @types/node --------- Co-authored-by: Uyarn <uyarnchen@gmail.com> * fix(date-picker): using `popupProps` to control `visible` results in not being able to select time (#3600) * feat(tree): expand-all reactive (#3619) * chore: release 1.12.0 (#3620) * chore: release 1.12.0 * chore: changelog's changes --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> * chore: release 1.12.0-naruto * chore: fix lint * chore: update snapshot --------- Co-authored-by: TDesign bot <93915689+tdesign-bot@users.noreply.github.com> Co-authored-by: ngyyuusora <jiliangsoft@live.com> Co-authored-by: liweijie0812 <674416404@qq.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: richardji202 <69453277+richardji202@users.noreply.github.com> Co-authored-by: MorningUei <747651423@qq.com> Co-authored-by: Rylan <rylanbot@qq.com> Co-authored-by: betavs <34408516+betavs@users.noreply.github.com> Co-authored-by: 阿菜 Cai <jimmyrss1102@gmail.com> Co-authored-by: Shinji-Li <1349021570@qq.com>

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

7ff357b

RylanBot requested review from LoopZhou, chaishi, liweijie0812, maoyiluo, uyarn and xiaosansiji as code owners April 17, 2025 05:27

RylanBot mentioned this pull request Apr 17, 2025

fix(color-picker): improve gradient color parsing and validation Tencent/tdesign-common#2110

Merged

16 tasks

RylanBot force-pushed the refactor/gradient branch from 8487ed1 to c4d679e Compare April 17, 2025 06:00

RylanBot added the WIP work in progress label Apr 18, 2025

RylanBot force-pushed the refactor/gradient branch from 50a1c78 to 52ae2e0 Compare April 20, 2025 01:59

RylanBot mentioned this pull request Apr 20, 2025

[ColorPicker] 添加最近使用颜色异常 #3566

Closed

RylanBot force-pushed the refactor/gradient branch 2 times, most recently from 21efc6b to 64ed394 Compare April 20, 2025 02:57

RylanBot added 2 commits April 20, 2025 11:04

fix(color-picker): ensure gradient and alpha values update correctly

75a1b8c

chore: update snapshots

992bee1

RylanBot force-pushed the refactor/gradient branch from 64ed394 to 992bee1 Compare April 20, 2025 03:06

RylanBot requested a review from Copilot April 20, 2025 16:25

Copilot AI reviewed Apr 20, 2025

View reviewed changes

src/color-picker/trigger.tsx Show resolved Hide resolved

src/color-picker/panel/index.tsx Outdated Show resolved Hide resolved

RylanBot removed the WIP work in progress label Apr 20, 2025

fix(color-picker): update alpha format handling

6894db4

RylanBot force-pushed the refactor/gradient branch 2 times, most recently from 19fdacc to b7ba5f8 Compare April 23, 2025 07:48

fix(color-picker): ensure onChange includes color and trigger

d782ad3

RylanBot force-pushed the refactor/gradient branch from b7ba5f8 to d782ad3 Compare April 23, 2025 08:00

fix(color-picker): avoid color update failure in controlled mode

f037496

chore: update common

69f7c25

github-actions bot and others added 2 commits April 24, 2025 16:17

chore: merge develop

10ca3f1

refactor(color-picker): replace logic with functions from common repo

95c8188

RylanBot force-pushed the refactor/gradient branch from 7d1e809 to e230e0b Compare April 27, 2025 14:04

fix(color-picker): incorrect format mapping

41a3e66

RylanBot force-pushed the refactor/gradient branch from e230e0b to 41a3e66 Compare April 27, 2025 14:20

liweijie0812 reviewed Apr 27, 2025

View reviewed changes

src/color-picker/color-picker.md Show resolved Hide resolved

chore(color-picker): remove onClear

e47a1e1

RylanBot force-pushed the refactor/gradient branch from f8cc7d2 to e47a1e1 Compare April 27, 2025 14:42

chore: update submodule

76e522e

liweijie0812 reviewed Apr 27, 2025

View reviewed changes

src/color-picker/color-picker.en-US.md Show resolved Hide resolved

src/color-picker/color-picker.md Show resolved Hide resolved

src/color-picker/type.ts Show resolved Hide resolved

src/color-picker/props.ts Show resolved Hide resolved

RylanBot added 3 commits April 28, 2025 10:29

docs(color-picker): remove the undeveloped clear event

432d044

chore: update snapshots

51ddee4

refactor(color-picker): remove unnecessary logic

8290490

RylanBot force-pushed the refactor/gradient branch from f63a03b to 8290490 Compare April 28, 2025 06:11

chore: update snapshot

d681c2a

RylanBot force-pushed the refactor/gradient branch from 0fc7388 to d681c2a Compare April 28, 2025 06:49

RylanBot added 3 commits April 28, 2025 19:31

refactor(color-picker): exclude non-gradient values in gradient-only …

d2a76ac

…mode

docs(color-picker): update types and remove undeveloped props

c7b89a3

fix(radio-group): highlight failure

598e354

RylanBot force-pushed the refactor/gradient branch from 87ca5a6 to 598e354 Compare April 28, 2025 11:51

uyarn approved these changes May 6, 2025

View reviewed changes

uyarn merged commit d9fd8ce into develop May 6, 2025
9 checks passed

uyarn deleted the refactor/gradient branch May 6, 2025 04:21

github-actions bot mentioned this pull request Jun 11, 2025

chore: release 1.12.0 #3620

Merged

16 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

refactor(color-picker): ensure mode switches based on color value#3572
uyarn merged 19 commits intodevelopfrom
refactor/gradient

RylanBot commented Apr 17, 2025 •

edited by uyarn

Loading

Uh oh!

pkg-pr-new bot commented Apr 17, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Apr 17, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

liweijie0812 commented Apr 24, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

RylanBot commented Apr 17, 2025 • edited by uyarn Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤔 这个 PR 的性质是？

🔗 相关 Issue

💡 需求背景和解决方案

1. PC 端统一修复➕重构

📝 更新日志

☑️ 请求合并前的自查清单

Uh oh!

pkg-pr-new bot commented Apr 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Apr 17, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

liweijie0812 commented Apr 24, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

RylanBot commented Apr 17, 2025 •

edited by uyarn

Loading

pkg-pr-new bot commented Apr 17, 2025 •

edited

Loading

github-actions bot commented Apr 17, 2025 •

edited

Loading