From f9324ddc6abd2a66744209d0b6988c2c4184b0ab Mon Sep 17 00:00:00 2001 From: HIsheR Date: Fri, 23 Oct 2026 16:10:32 +0800 Subject: [PATCH] =?UTF-8?q?iter:=20c02=20textField/textarea=20=E8=A1=A5=20?= =?UTF-8?q?disabled=20=E7=A6=81=E7=94=A8=E6=80=81=EF=BC=88=E5=B8=83?= =?UTF-8?q?=E5=B0=94=E6=88=96=E4=BF=A1=E5=8F=B7=E7=BB=91=E5=AE=9A=EF=BC=89?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .ua/backlog.json | 8 ++++++++ .ua/index.json | 16 +++++++++++++--- .ua/iterations.log | 1 + apps/demo/main.ts | 3 ++- llms-full.txt | 8 +++++--- llms.txt | 4 ++-- packages/skin/ui/src/textField.ts | 4 ++-- packages/skin/ui/src/textarea.ts | 4 ++-- packages/skin/ui/src/types.ts | 2 ++ packages/skin/ui/ua.manifest.json | 14 ++++++++++++-- packages/skin/ui/ui.css | 4 +++- 11 files changed, 52 insertions(+), 16 deletions(-) diff --git a/.ua/backlog.json b/.ua/backlog.json index 1a7c8e0..248802b 100644 --- a/.ua/backlog.json +++ b/.ua/backlog.json @@ -48,6 +48,14 @@ "acceptance": "ButtonProps / CheckboxProps / SwitchProps 新增可选 disabled（boolean | Signal）：静态布尔与信号绑定都支持，禁用时事件不触发、置灰 + not-allowed 光标；demo 表单区加静态禁用与信号联动示例；manifest/文档/llms-full.txt 同步；npm run check 全绿", "status": "done", "notes": "零新增辅助代码：复用 frame h() 对 false/undefined 移除属性、Signal 函数走响应式绑定的既有语义，disabled 透传即可；CSS 补通用禁用态（opacity 0.45 + not-allowed，开关轨道同级置灰）；demo 用同一 locked 信号绑定 switch 的 checked 与 checkbox 的 disabled 展示联动" + }, + { + "id": "c02", + "title": "textField / textarea 补 disabled 禁用态", + "motivation": "输入类组件与 c01 的交互组件对齐，表单只读场景闭环", + "acceptance": "TextFieldProps / TextareaProps 新增可选 disabled（boolean | Signal），禁用时不响应输入、置灰 + not-allowed 光标；demo 禁用示例区补一个信号绑定输入框；manifest/文档/llms-full.txt 同步；npm run check 全绿", + "status": "done", + "notes": "与 c01 同模式：disabled 透传 h() 即得布尔/信号双支持；禁用态 CSS 追加 .ua-input / .ua-textarea；demo 复用 locked 信号联动开关与输入框" } ] } \ No newline at end of file diff --git a/.ua/index.json b/.ua/index.json index ed1f359..d834188 100644 --- a/.ua/index.json +++ b/.ua/index.json @@ -1,6 +1,6 @@ { "$schema": "ui-arch-registry-index/0.1", - "generatedAt": "2026-10-23T08:07:27.570Z", + "generatedAt": "2026-10-23T08:10:07.974Z", "repoRoot": ".", "packages": [ { @@ -143,8 +143,8 @@ "entry": "src/index.ts", "exports": [ "button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用", - "textField(props)：文本输入，value 信号双向绑定", - "textarea(props)：多行输入，value 信号双向绑定", + "textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号禁用", + "textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号禁用", "checkbox(props)：复选框，checked 信号双向绑定，disabled 支持布尔或信号禁用", "switchButton(props)：开关，checked 信号双向绑定，disabled 支持布尔或信号禁用", "select(props)：自绘下拉选择（非原生 select），value 信号双向绑定，点外部 / Esc 关闭，选项弹层带微动画", @@ -258,6 +258,11 @@ "t": "string", "d": "占位文案" }, + { + "n": "disabled", + "t": "boolean | Signal", + "d": "禁用态：布尔直接置位，传信号则动态同步" + }, { "n": "onInput", "t": "(value: string) => void", @@ -293,6 +298,11 @@ "t": "string", "d": "占位文案" }, + { + "n": "disabled", + "t": "boolean | Signal", + "d": "禁用态：布尔直接置位，传信号则动态同步" + }, { "n": "onInput", "t": "(value: string) => void", diff --git a/.ua/iterations.log b/.ua/iterations.log index 4ba7788..bb141e0 100644 --- a/.ua/iterations.log +++ b/.ua/iterations.log @@ -4,3 +4,4 @@ {"time":"2026-10-23T16:00:11+08:00","id":"b04","result":"done","summary":"新增独立 pagination 分页器（page 信号双向绑定 + 省略号折叠 + 键盘可达），dataTable 新增 page 受控桥接实现联动；demo 联动卡片，check 全绿"} {"time":"2026-10-23T16:03:46+08:00","id":"b05","result":"done","summary":"文档站核查确认已 manifest 驱动；补齐默认值信息量缺口：CLI propsTable 新增默认值列（df 字段）+ llms-full 默认标注，16 处默认值提取；check 全绿"} {"time":"2026-10-23T16:08:17+08:00","id":"c01","result":"done","summary":"button/checkbox/switchButton 补 disabled（boolean|Signal），复用 h() 布尔/信号既有语义零辅助代码；CSS 通用禁用态 + demo 信号联动示例；check 全绿"} +{"time":"2026-10-23T16:10:31+08:00","id":"c02","result":"done","summary":"textField/textarea 补 disabled（boolean|Signal），与 c01 同模式；禁用态 CSS 覆盖输入类；demo locked 信号联动；check 全绿"} diff --git a/apps/demo/main.ts b/apps/demo/main.ts index d95b83a..65d3183 100644 --- a/apps/demo/main.ts +++ b/apps/demo/main.ts @@ -113,7 +113,8 @@ const app = h( { class: 'row' }, button({ label: '禁用按钮', variant: 'ghost', disabled: true }), checkbox({ label: '信号禁用的勾选', disabled: locked }), - switchButton({ label: '锁定', checked: locked }), // 关掉开关即解锁上面的勾选框 + switchButton({ label: '锁定', checked: locked }), // 关掉开关即解锁上面的勾选框与输入框 + textField({ placeholder: '锁定后不可输入…', disabled: locked }), ), ), section( diff --git a/llms-full.txt b/llms-full.txt index e2dfe2d..b730ce3 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -1,6 +1,6 @@ # @ui-arch 组件库 Agent 文档（无图形版） -> 自动生成于 2026-10-23T08:07:27.570Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 +> 自动生成于 2026-10-23T08:10:07.974Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。 ## 快速上手 @@ -71,6 +71,7 @@ button({ label: '提交', variant: 'primary', onClick: () => console.log('clicke - value：Signal —— 双向绑定信号：输入写回信号，信号变化写回输入框 - placeholder：string —— 占位文案 +- disabled：boolean | Signal —— 禁用态：布尔直接置位，传信号则动态同步 - onInput（回调）：(value: string) => void —— 输入回调，每次按键触发 示例： @@ -94,6 +95,7 @@ const name = signal(''); const el = textField({ value: name, placeholder: '输 - value：Signal —— 双向绑定信号 - rows（默认 3）：number —— 初始行数；缺省 3 - placeholder：string —— 占位文案 +- disabled：boolean | Signal —— 禁用态：布尔直接置位，传信号则动态同步 - onInput（回调）：(value: string) => void —— 输入回调 示例： @@ -510,8 +512,8 @@ dataTable({ data: users, selectable: true, columns: [{ key: 'name', header: '姓 API 速览： - button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用 -- textField(props)：文本输入，value 信号双向绑定 -- textarea(props)：多行输入，value 信号双向绑定 +- textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号禁用 +- textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号禁用 - checkbox(props)：复选框，checked 信号双向绑定，disabled 支持布尔或信号禁用 - switchButton(props)：开关，checked 信号双向绑定，disabled 支持布尔或信号禁用 - select(props)：自绘下拉选择（非原生 select），value 信号双向绑定，点外部 / Esc 关闭，选项弹层带微动画 diff --git a/llms.txt b/llms.txt index 53e1ca9..dfe6b68 100644 --- a/llms.txt +++ b/llms.txt @@ -48,8 +48,8 @@ - 描述: DOM 皮肤组件库：button / textField / textarea / checkbox / switch / select / radioGroup / card / badge / alert / toast / tooltip / skeleton / spinner / progress / tabs / pagination / modal / form / formItem / dataTable，构建在 @ui-arch/frame 与 @ui-arch/table-core 之上，样式只消费 --ua-* 令牌。 - API: - button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用 - - textField(props)：文本输入，value 信号双向绑定 - - textarea(props)：多行输入，value 信号双向绑定 + - textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号禁用 + - textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号禁用 - checkbox(props)：复选框，checked 信号双向绑定，disabled 支持布尔或信号禁用 - switchButton(props)：开关，checked 信号双向绑定，disabled 支持布尔或信号禁用 - select(props)：自绘下拉选择（非原生 select），value 信号双向绑定，点外部 / Esc 关闭，选项弹层带微动画 diff --git a/packages/skin/ui/src/textField.ts b/packages/skin/ui/src/textField.ts index 55d6d13..b2db21e 100644 --- a/packages/skin/ui/src/textField.ts +++ b/packages/skin/ui/src/textField.ts @@ -1,9 +1,9 @@ import { effect, h } from '@ui-arch/frame'; import type { TextFieldProps } from './types.js'; -/*** 文本输入：value 信号双向绑定，onInput 为输入回调 ***/ +/*** 文本输入：value 信号双向绑定，disabled 支持布尔或信号禁用，onInput 为输入回调 ***/ export function textField(props: TextFieldProps): HTMLInputElement { - const el = h('input', { class: 'ua-input', placeholder: props.placeholder ?? '' }) as HTMLInputElement; + const el = h('input', { class: 'ua-input', placeholder: props.placeholder ?? '', disabled: props.disabled }) as HTMLInputElement; // false/undefined 移除属性，Signal 走响应式 if (props.value) { const signal = props.value; el.addEventListener('input', () => signal(el.value)); // 用户输入写回信号 diff --git a/packages/skin/ui/src/textarea.ts b/packages/skin/ui/src/textarea.ts index 6d83756..593875b 100644 --- a/packages/skin/ui/src/textarea.ts +++ b/packages/skin/ui/src/textarea.ts @@ -1,9 +1,9 @@ import { effect, h } from '@ui-arch/frame'; import type { TextareaProps } from './types.js'; -/*** 多行输入：value 信号双向绑定，onInput 为输入回调 ***/ +/*** 多行输入：value 信号双向绑定，disabled 支持布尔或信号禁用，onInput 为输入回调 ***/ export function textarea(props: TextareaProps): HTMLTextAreaElement { - const el = h('textarea', { class: 'ua-textarea', rows: props.rows ?? 3, placeholder: props.placeholder ?? '' }) as HTMLTextAreaElement; + const el = h('textarea', { class: 'ua-textarea', rows: props.rows ?? 3, placeholder: props.placeholder ?? '', disabled: props.disabled }) as HTMLTextAreaElement; // false/undefined 移除属性，Signal 走响应式 if (props.value) { const signal = props.value; el.addEventListener('input', () => signal(el.value)); // 用户输入写回信号 diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index b427363..faecced 100644 --- a/packages/skin/ui/src/types.ts +++ b/packages/skin/ui/src/types.ts @@ -20,6 +20,7 @@ export interface ButtonProps { export interface TextFieldProps { placeholder?: string; // 占位文案 value?: Signal; // 双向绑定的信号 + disabled?: boolean | Signal; // 禁用态：布尔直接置位，传信号则动态同步 onInput?: (value: string) => void; // 输入回调 } @@ -81,6 +82,7 @@ export interface TextareaProps { placeholder?: string; // 占位文案 rows?: number; // 行数；缺省 3 value?: Signal; // 双向绑定的信号 + disabled?: boolean | Signal; // 禁用态：布尔直接置位，传信号则动态同步 onInput?: (value: string) => void; // 输入回调 } diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index 8a40467..b2cf451 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/packages/skin/ui/ua.manifest.json @@ -14,8 +14,8 @@ "entry": "src/index.ts", "exports": [ "button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用", - "textField(props)：文本输入，value 信号双向绑定", - "textarea(props)：多行输入，value 信号双向绑定", + "textField(props)：文本输入，value 信号双向绑定，disabled 支持布尔或信号禁用", + "textarea(props)：多行输入，value 信号双向绑定，disabled 支持布尔或信号禁用", "checkbox(props)：复选框，checked 信号双向绑定，disabled 支持布尔或信号禁用", "switchButton(props)：开关，checked 信号双向绑定，disabled 支持布尔或信号禁用", "select(props)：自绘下拉选择（非原生 select），value 信号双向绑定，点外部 / Esc 关闭，选项弹层带微动画", @@ -129,6 +129,11 @@ "t": "string", "d": "占位文案" }, + { + "n": "disabled", + "t": "boolean | Signal", + "d": "禁用态：布尔直接置位，传信号则动态同步" + }, { "n": "onInput", "t": "(value: string) => void", @@ -164,6 +169,11 @@ "t": "string", "d": "占位文案" }, + { + "n": "disabled", + "t": "boolean | Signal", + "d": "禁用态：布尔直接置位，传信号则动态同步" + }, { "n": "onInput", "t": "(value: string) => void", diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index 00cedbe..10a22bd 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -776,7 +776,9 @@ /* —— 通用禁用态：置灰 + 禁用光标 —— */ .ua-btn:disabled, .ua-checkbox:disabled, -.ua-switch-input:disabled { +.ua-switch-input:disabled, +.ua-input:disabled, +.ua-textarea:disabled { opacity: 0.45; cursor: not-allowed; }