Skip to content

feat(input): support native color picker - #111

Merged
taekchef merged 10 commits into
omdsh-dev:mainfrom
wang-kaopu:feat/input-color-support
Sep 7, 2026
Merged

feat(input): support native color picker#111
taekchef merged 10 commits into
omdsh-dev:mainfrom
wang-kaopu:feat/input-color-support

Conversation

@wang-kaopu

Copy link
Copy Markdown
Collaborator

变更说明

为 GenUI input 组件增加原生颜色选择支持,对应 #103

此前 inputType 白名单仅支持 textemailpassword,即使渲染层已经将 inputType 直接透传给原生 <input>color 仍会在协议校验 / repair 阶段被过滤。

本 PR 增加 inputType: "color" 支持,并继续复用浏览器原生 color picker,不引入额外组件或依赖。

主要改动:

  • GenuiInput.inputType 增加 color
  • runtime INPUT_TYPES 白名单增加 color
  • 保持现有 InputNode 的原生 <input type="color"> 渲染方式
  • color input 继续复用现有 id 持久化和 sibling submitfields 收集机制
  • 将原生 color input 调整为 64 × 40px,避免继承普通文本输入框的全宽样式
  • SKILL 文档补充 color 用法,并约定颜色值使用 #RRGGBB
  • 新增协议校验、repair、原生渲染和 submit fields 回归测试

示例

{
  "type": "input",
  "inputType": "color",
  "label": "主色",
  "id": "c_primary",
  "value": "#1A3A5C"
}

用户选择颜色后,现有 submit 机制会收集:

{
  "fields": {
    "c_primary": "#ff0000"
  }
}

设计取舍

本次仅支持浏览器原生 color picker:

  • 不新增自定义 ColorPicker 组件
  • 不支持 alpha / CSS Color 4 等扩展格式
  • 不实现 issue 中提到的可选 swatch 组件
  • 不新增依赖

保持本次修改为一个最小的协议扩展。

测试

pnpm check

覆盖:

  • inputType: "color" 能通过 runtime validation
  • repair 会保留合法的 color
  • 未支持的 input type 仍会被拒绝
  • 实际渲染为原生 input[type="color"]
  • 修改后的颜色能够进入 sibling submit 的 fields

Closes #103

@wang-kaopu

Copy link
Copy Markdown
Collaborator Author

macOS 原生 color picker 人工验证截图:
图片

@taekchef
taekchef merged commit 435b744 into omdsh-dev:main Sep 7, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

希望 input 组件能支持 inputType: "color"(选颜色场景)

2 participants