Skip to content

[犀牛鸟]feat(ColorPicker): Add input-less trigger support - #6766

Open
tjujingzong wants to merge 3 commits into
Tencent:developfrom
tjujingzong:develop
Open

[犀牛鸟]feat(ColorPicker): Add input-less trigger support#6766
tjujingzong wants to merge 3 commits into
Tencent:developfrom
tjujingzong:develop

Conversation

@tjujingzong

@tjujingzong tjujingzong commented Jul 1, 2026

Copy link
Copy Markdown

⚠️ Related Tencent/tdesign-common#2587

🤔 这个 PR 的性质是?

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

close Tencent/tdesign-common#2567

💡 需求背景和解决方案

ColorPicker 需要支持只展示颜色色块、不展示色值输入框的触发器形态,用于不需要直接编辑色值、
只通过面板选择颜色的场景。

本次为 Vue Next ColorPicker 新增 isInput API:

  • isInput 类型为 boolean
  • 默认值为 true,保持现有展示色值输入框的行为不变
  • isInputfalse 时,触发器仅展示颜色色块,隐藏颜色值输入内容
  • 保留原有 Input 结构,不影响弹出层触发、禁用态、清空等现有交互
  • 补充中英文 API 文档、no-input 示例和单元测试

用法示例:

<t-color-picker v-model="color" :is-input="false" />

📝 更新日志

tdesign-vue-next

  • feat(ColorPicker): support input-less trigger style

@tdesign-vue-next/chat

@tdesign-vue-next/nuxt

@tdesign-vue-next/auto-import-resolver

请求合并前的自查清单

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

@tdesign-bot

tdesign-bot commented Jul 2, 2026

Copy link
Copy Markdown
Collaborator

TDesign Component Site Preview Open

Component Preview
tdesign-vue-next 完成
@tdesign-vue-next/chat 完成

@pkg-pr-new

pkg-pr-new Bot commented Jul 2, 2026

Copy link
Copy Markdown
  • tdesign-vue-next-demo

    npm i https://pkg.pr.new/@tdesign-vue-next/auto-import-resolver@6766
    
    npm i https://pkg.pr.new/tdesign-vue-next@6766
    
    npm i https://pkg.pr.new/@tdesign-vue-next/chat@6766
    
    npm i https://pkg.pr.new/@tdesign-vue-next/nuxt@6766
    

commit: 1bd3270

@Wesley-0808 Wesley-0808 changed the title [ColorPicker] Add input-less trigger support [犀牛鸟][ColorPicker] Add input-less trigger support Jul 20, 2026
@Wesley-0808 Wesley-0808 changed the title [犀牛鸟][ColorPicker] Add input-less trigger support [犀牛鸟]feat(ColorPicker): Add input-less trigger support Jul 20, 2026
@uyarn

uyarn commented Jul 29, 2026

Copy link
Copy Markdown
Collaborator

@tjujingzong

Copy link
Copy Markdown
Author

preview: https://stackblitz.com/edit/tmtf9vy6-pdnzdhgy?file=src%2FDemo.vue

Thanks for the preview. I checked it locally together with the changes from Tencent/tdesign-common#2587.

The behavior works as expected locally:

  • the first ColorPicker keeps the default input display;
  • the second one uses :is-input="false" and only shows the color swatch;
  • clicking the swatch still opens the color picker panel normally.

The StackBlitz preview currently uses the existing tdesign-common version, so it does not include the styles added in Tencent/tdesign-common#2587. That is why the color value is still visible in the preview.

Here is my local test result:
image

Could you please confirm whether this cross-repository implementation is acceptable, or whether you prefer the hiding behavior to be implemented directly in tdesign-vue-next?

@uyarn uyarn added the 💭 discussion we are discussing label Jul 29, 2026
@uyarn

uyarn commented Jul 29, 2026

Copy link
Copy Markdown
Collaborator

/update-common 2587

@uyarn

uyarn commented Jul 29, 2026

Copy link
Copy Markdown
Collaborator

preview: https://stackblitz.com/edit/tmtf9vy6-pdnzdhgy?file=src%2FDemo.vue

Thanks for the preview. I checked it locally together with the changes from Tencent/tdesign-common#2587.

The behavior works as expected locally:

  • the first ColorPicker keeps the default input display;
  • the second one uses :is-input="false" and only shows the color swatch;
  • clicking the swatch still opens the color picker panel normally.

The StackBlitz preview currently uses the existing tdesign-common version, so it does not include the styles added in Tencent/tdesign-common#2587. That is why the color value is still visible in the preview.

Here is my local test result: image

Could you please confirm whether this cross-repository implementation is acceptable, or whether you prefer the hiding behavior to be implemented directly in tdesign-vue-next?

We will uniformly point everyone's PR's common submodule to the corresponding common PR branch, so we can checkout your rendered changes in the preview link

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

💭 discussion we are discussing

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[ColorPicker] 支持无文字输入框样式

3 participants