From 6ee86ac7322d0262d0d8612b72d4e39433997569 Mon Sep 17 00:00:00 2001 From: HIsheR Date: Mon, 26 Oct 2026 19:15:30 +0800 Subject: [PATCH] =?UTF-8?q?iter(g205):=20textField=20=E6=94=AF=E6=8C=81?= =?UTF-8?q?=E5=AF=86=E7=A0=81=E6=98=BE=E9=9A=90=E5=88=87=E6=8D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .ua/index.json | 7 ++++++- llms-full.txt | 3 ++- packages/skin/ui/src/textField.ts | 26 +++++++++++++++++++++++--- packages/skin/ui/src/types.ts | 1 + packages/skin/ui/ua.manifest.json | 5 +++++ 5 files changed, 37 insertions(+), 5 deletions(-) diff --git a/.ua/index.json b/.ua/index.json index 155cf3c..e4c6428 100644 --- a/.ua/index.json +++ b/.ua/index.json @@ -1,6 +1,6 @@ { "$schema": "ui-arch-registry-index/0.1", - "generatedAt": "2026-10-26T11:13:22.375Z", + "generatedAt": "2026-10-26T11:15:10.295Z", "repoRoot": ".", "packages": [ { @@ -410,6 +410,11 @@ "n": "size", "t": "'sm' | 'md' | 'lg'", "d": "高度档位：sm 紧凑 / md 默认 / lg 大触控目标，走 --ua-control-h-* 三档；缺省 md" + }, + { + "n": "password", + "t": "boolean", + "d": "密码框：原生打点渲染，内置「显示/隐藏」切换按钮（aria-label 同步）；缺省普通文本" } ], "example": "const name = signal(''); const el = textField({ value: name, placeholder: '输入名字…', onInput: (v) => console.log(v) })", diff --git a/llms-full.txt b/llms-full.txt index e65cba6..4eda94e 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -1,6 +1,6 @@ # @ui-arch 组件库 Agent 文档（无图形版） -> 自动生成于 2026-10-26T11:13:22.375Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 +> 自动生成于 2026-10-26T11:15:10.295Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。 ## 快速上手 @@ -117,6 +117,7 @@ button({ label: '提交', variant: 'primary', onClick: () => console.log('clicke - clearable（默认 false）：boolean —— 开启后有值即显示一键清空按钮；缺省 false - maxCount：number —— 字数上限：同时设原生 maxlength，并在输入框内侧显示实时计数；缺省不限 - size：'sm' | 'md' | 'lg' —— 高度档位：sm 紧凑 / md 默认 / lg 大触控目标，走 --ua-control-h-* 三档；缺省 md +- password：boolean —— 密码框：原生打点渲染，内置「显示/隐藏」切换按钮（aria-label 同步）；缺省普通文本 示例： diff --git a/packages/skin/ui/src/textField.ts b/packages/skin/ui/src/textField.ts index a9836c9..461bd3b 100644 --- a/packages/skin/ui/src/textField.ts +++ b/packages/skin/ui/src/textField.ts @@ -2,7 +2,7 @@ import { effect, h } from '@ui-arch/frame'; import { addonWrap } from './addons.js'; import type { TextFieldProps } from './types.js'; -/*** 文本输入：value 信号双向绑定，disabled 支持布尔或信号禁用，onInput 为输入回调；prefix/suffix 包附加组，clearable 一键清空，maxCount 显示字数统计 ***/ +/*** 文本输入：value 信号双向绑定，disabled 支持布尔或信号禁用，onInput 为输入回调；prefix/suffix 包附加组，clearable 一键清空，password 密码显隐切换，maxCount 显示字数统计 ***/ export function textField(props: TextFieldProps): HTMLElement { const el = h('input', { class: `ua-input${props.size && props.size !== 'md' ? ` is-${props.size}` : ''}`, placeholder: props.placeholder ?? '', disabled: props.disabled }) as HTMLInputElement; // false/undefined 移除属性，Signal 走响应式 if (props.value) { @@ -38,8 +38,28 @@ export function textField(props: TextFieldProps): HTMLElement { el.addEventListener('input', syncCount); // 用户输入时同步 effect(() => { if (props.value) props.value(); syncCount(); }); // 初始与外部写回时同步（读信号建依赖） } - const suffix = clearBtn || counter - ? h('span', { class: 'ua-input-clear-group' }, clearBtn, counter, props.suffix ?? null) // 清空按钮 / 计数并入后置附加组 + let eyeBtn: HTMLElement | null = null; // 密码显隐按钮；password 未开不创建 + if (props.password) { + el.type = 'password'; // 原生打点渲染，避免自绘遮罩的安全坑 + let shown = false; // 当前是否明文 + eyeBtn = h( + 'button', + { + type: 'button', + class: 'ua-input-clear', // 复用清空按钮样式：同尺寸同位置，零新增 CSS + 'aria-label': '显示密码', + onClick: () => { + shown = !shown; + el.type = shown ? 'text' : 'password'; + eyeBtn!.textContent = shown ? '隐藏' : '显示'; // 文案即状态：按钮永远写「下一步动作」 + eyeBtn!.setAttribute('aria-label', shown ? '隐藏密码' : '显示密码'); + }, + }, + '显示', + ); + } + const suffix = clearBtn || counter || eyeBtn + ? h('span', { class: 'ua-input-clear-group' }, clearBtn, eyeBtn, counter, props.suffix ?? null) // 清空 / 显隐 / 计数并入后置附加组 : props.suffix; return addonWrap(el, props.prefix, suffix); } diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index ac11465..8687c1e 100644 --- a/packages/skin/ui/src/types.ts +++ b/packages/skin/ui/src/types.ts @@ -39,6 +39,7 @@ export interface TextFieldProps { prefix?: string | HTMLElement; // 输入框内侧前置附加块（如图标、货币符）；缺省不渲染 suffix?: string | HTMLElement; // 输入框内侧后置附加块（如单位）；缺省不渲染 clearable?: boolean; // 开启后有值时显示一键清空按钮；缺省不渲染 + password?: boolean; // 密码框：原生打点渲染并内置「显示/隐藏」切换按钮；缺省普通文本 maxCount?: number; // 字数上限；传了即设原生 maxlength 并在输入框内侧显示实时计数 } diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index 6dd5afb..774fd11 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/packages/skin/ui/ua.manifest.json @@ -281,6 +281,11 @@ "n": "size", "t": "'sm' | 'md' | 'lg'", "d": "高度档位：sm 紧凑 / md 默认 / lg 大触控目标，走 --ua-control-h-* 三档；缺省 md" + }, + { + "n": "password", + "t": "boolean", + "d": "密码框：原生打点渲染，内置「显示/隐藏」切换按钮（aria-label 同步）；缺省普通文本" } ], "example": "const name = signal(''); const el = textField({ value: name, placeholder: '输入名字…', onInput: (v) => console.log(v) })",