From e270e099034d9976497e2dfedf287c71bffac85e Mon Sep 17 00:00:00 2001 From: HIsheR Date: Mon, 26 Oct 2026 12:13:56 +0800 Subject: [PATCH] =?UTF-8?q?iter(g50):=20=E6=96=B0=E5=A2=9E=20datePicker=20?= =?UTF-8?q?=E6=97=A5=E6=9C=9F=E9=80=89=E6=8B=A9=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .ua/index.json | 50 +++++++++- AGENTS.md | 2 +- ARCHITECTURE.md | 2 +- README.md | 8 +- apps/demo/main.ts | 14 +++ llms-full.txt | 30 +++++- llms.txt | 1 + packages/skin/ui/src/datePicker.ts | 150 ++++++++++++++++++++++++++++ packages/skin/ui/src/index.ts | 1 + packages/skin/ui/src/types.ts | 10 ++ packages/skin/ui/ua.manifest.json | 48 ++++++++- packages/skin/ui/ui.css | 154 +++++++++++++++++++++++++++++ 12 files changed, 460 insertions(+), 10 deletions(-) create mode 100644 packages/skin/ui/src/datePicker.ts diff --git a/.ua/index.json b/.ua/index.json index d33306d..6fec7cb 100644 --- a/.ua/index.json +++ b/.ua/index.json @@ -1,6 +1,6 @@ { "$schema": "ui-arch-registry-index/0.1", - "generatedAt": "2026-10-26T04:12:36.698Z", + "generatedAt": "2026-10-26T04:13:49.611Z", "repoRoot": ".", "packages": [ { @@ -191,7 +191,8 @@ "transfer(props)：穿梭框，左右两栏勾选后整体搬运，targetKeys 信号双向绑定，两栏各自搜索与全选（含半选），禁用条目不参与搬运也不可勾选", "cascader(props)：级联选择，多列联动面板（悬停下钻 / 点击提交），value 为路径数组信号，changeOnSelect 允许停在中间层，全键盘可操作", "splitter(props)：可拖拽分栏容器，分隔条支持指针拖拽 / 方向键微调 / 双击复位，sizes 为百分比数组信号", - "autoComplete(props)：输入联想，输入即过滤候选、↑↓ 环形高亮 / Enter 选中 / Esc 收起，options 可传函数做远程联想" + "autoComplete(props)：输入联想，输入即过滤候选、↑↓ 环形高亮 / Enter 选中 / Esc 收起，options 可传函数做远程联想", + "datePicker(props)：日期选择，单月网格 + 翻月 / 今天快捷键，value 为 YYYY-MM-DD 信号，min/max 闭区间限制，方向键逐日逐周可导航" ], "keyTypes": [ "ButtonProps", @@ -2252,6 +2253,51 @@ "options 传函数时每次输入都会用当前关键字调用，可在此发起远程请求并返回新数组", "value 传信号即受控：外部写入会同步回填输入框内容" ] + }, + { + "id": "datePicker", + "title": "日期选择 DatePicker", + "demo": "sec-datepicker", + "props": [ + { + "n": "value", + "t": "Signal", + "d": "选中日期（YYYY-MM-DD）信号；不传则内部维护" + }, + { + "n": "placeholder", + "t": "string", + "d": "未选时占位文案；缺省「请选择日期」" + }, + { + "n": "min", + "t": "string", + "d": "最早可选日期（含，YYYY-MM-DD）；更早的日置灰不可点" + }, + { + "n": "max", + "t": "string", + "d": "最晚可选日期（含，YYYY-MM-DD）；更晚的日置灰不可点" + }, + { + "n": "disabled", + "t": "boolean | Signal", + "d": "禁用触发器" + }, + { + "n": "onChange", + "t": "(date: string) => void", + "d": "选中回调（点击日期或 Enter）" + } + ], + "example": "datePicker({ value: dateVal, min: '2026-10-20', max: '2026-10-31', onChange: (d) => toast.success(d) })", + "steps": [ + "点触发器展开当月网格，打开时视图自动对准已选日期（无选中则今天）", + "‹ › 翻月，底部「今天」一键跳今天并提交；今天用描边标记、选中用实心底色", + "键盘：←→ 逐日、↑↓ 逐周、PageUp/PageDown 逐月、Enter 提交，跨月会自动翻页", + "min / max 为闭区间，越界日期置灰不可点也不可键盘选中", + "value 传信号即受控；Esc 收起（与弹窗/抽屉共用逐层关闭栈）" + ] } ] }, diff --git a/AGENTS.md b/AGENTS.md index 0682caa..cfd54b8 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -21,7 +21,7 @@ - `packages/core/table-core`（@ui-arch/table-core）：Headless 表格逻辑内核 - `packages/core/frame`（@ui-arch/frame）：signal + hyperscript 微框架 -- `packages/skin/ui`（@ui-arch/ui）：48 个 DOM 组件（表单 / 反馈 / 浮层 / 导航 / 表格），样式只消费令牌 +- `packages/skin/ui`（@ui-arch/ui）：49 个 DOM 组件（表单 / 反馈 / 浮层 / 导航 / 表格），样式只消费令牌 - `packages/design/tokens`（@ui-arch/tokens）：设计令牌 - `packages/tools/cli`（@ui-arch/cli）：`ua` 命令行 + MCP 注册表服务（private） - `apps/demo`（@ui-arch/demo）：交互演示，产物 apps/demo/dist/demo.html diff --git a/ARCHITECTURE.md b/ARCHITECTURE.md index cf0d0cf..62e3def 100644 --- a/ARCHITECTURE.md +++ b/ARCHITECTURE.md @@ -34,7 +34,7 @@ ui-arch-mvp/ │ │ ├── table-core/ # 表格状态内核 │ │ └── frame/ # 信号 + hyperscript 微框架 │ ├── skin/ # 皮肤层（DOM 组件，可发布） -│ │ └── ui/ # 48 个组件 + ui.css +│ │ └── ui/ # 49 个组件 + ui.css │ ├── design/ # 资产层（可发布） │ │ └── tokens/ # --ua-* 设计令牌 │ └── tools/ # 工程层（private，不发布） diff --git a/README.md b/README.md index e75ffa8..8e6d2e8 100644 --- a/README.md +++ b/README.md @@ -11,13 +11,13 @@ npm run demo # 打开演示：apps/demo/dist/demo.html npm run docs # 生成人类文档站 apps/docs/index.html + Agent 全量文档 llms-full.txt ``` -## 组件（共 48 个） +## 组件（共 49 个） -accordion · alert · autoComplete · avatar · badge · breadcrumb · button · carousel · card · cascader · checkbox · dataTable · descriptions · divider · drawer · empty · form · image · inputNumber · list · menu · modal · notification · pagination · popover · progress · radioGroup · rate · result · segmented · select · skeleton · slider · spinner · splitter · statistic · stepper · switchButton · tabs · tag · textField · textarea · timeline · toast · tooltip · transfer · tree · upload +accordion · alert · autoComplete · avatar · badge · breadcrumb · button · carousel · card · cascader · checkbox · dataTable · datePicker · descriptions · divider · drawer · empty · form · image · inputNumber · list · menu · modal · notification · pagination · popover · progress · radioGroup · rate · result · segmented · select · skeleton · slider · spinner · splitter · statistic · stepper · switchButton · tabs · tag · textField · textarea · timeline · toast · tooltip · transfer · tree · upload -分组：表单（button / textField / inputNumber / textarea / checkbox / switchButton / select / radioGroup / slider / rate / autoComplete / segmented / upload / form + formItem / transfer / cascader）、反馈（alert / toast / notification / result / spinner / progress / skeleton / badge / empty / statistic）、浮层（tooltip / popover / modal / drawer / menu）、导航（tabs / breadcrumb / pagination / accordion / stepper / tree）、数据展示（dataTable / descriptions / card / list / timeline / tag / avatar / image / carousel）、其他（divider / splitter）。 +分组：表单（button / textField / inputNumber / textarea / checkbox / switchButton / select / radioGroup / slider / rate / autoComplete / datePicker / segmented / upload / form + formItem / transfer / cascader）、反馈（alert / toast / notification / result / spinner / progress / skeleton / badge / empty / statistic）、浮层（tooltip / popover / modal / drawer / menu）、导航（tabs / breadcrumb / pagination / accordion / stepper / tree）、数据展示（dataTable / descriptions / card / list / timeline / tag / avatar / image / carousel）、其他（divider / splitter）。 ## 可访问性约定 @@ -31,7 +31,7 @@ accordion · alert · autoComplete · avatar · badge · breadcrumb · button · |---|---| | `packages/core/frame` | @ui-arch/frame：signal / computed / effect + hyperscript（无虚拟 DOM） | | `packages/core/table-core` | @ui-arch/table-core：headless 表格（filter → sort → paginate 派生管线） | -| `packages/skin/ui` | @ui-arch/ui：48 个 DOM 组件 + ui.css（只消费 `--ua-*` 令牌） | +| `packages/skin/ui` | @ui-arch/ui：49 个 DOM 组件 + ui.css（只消费 `--ua-*` 令牌） | | `packages/design/tokens` | @ui-arch/tokens：设计令牌（暗色只换值不换名） | | `packages/tools/cli` | @ui-arch/cli：`ua` 命令行与 stdio MCP server | | `apps/demo` | 交互演示（esbuild 打包成单文件） | diff --git a/apps/demo/main.ts b/apps/demo/main.ts index d1a8f5a..3aef082 100644 --- a/apps/demo/main.ts +++ b/apps/demo/main.ts @@ -19,6 +19,7 @@ import { cascader, checkbox, dataTable, + datePicker, transfer, descriptions, divider, @@ -186,6 +187,7 @@ const listPick = signal(''); // 列表点击选中的条目标题 const slideIndex = signal(0); // 轮播当前下标（外部受控演示） const cascaderPath = signal(['east', 'sh']); // 级联选择路径（外部受控演示） const splitSizes = signal([35, 65]); // 分栏比例（外部受控演示） +const dateVal = signal('2026-10-26'); // 日期选择值（外部受控演示） const acValue = signal(''); // 自动补全输入值（外部受控演示） const treePick = signal('core'); // 树形选中节点 key const transferKeys = signal(['a11y']); // 穿梭框右侧集合（外部受控演示） @@ -683,6 +685,18 @@ const content = h( button({ label: '错误（可关）', variant: 'danger', onClick: () => notification({ title: '保存失败', description: '服务端返回 500，请稍后重试', variant: 'danger' }) }), ), ), + section( + 'sec-datepicker', + '日期选择', + 'datePicker：单月网格，翻月 / 今天 / ←→↑↓ 逐日逐周 / PageUp↓ 逐月，Esc 收起；min/max 闭区间置灰越界日。', + h( + 'div', + { class: 'row' }, + datePicker({ value: dateVal, onChange: (d) => toast.success(`已选 ${d}`) }), + datePicker({ placeholder: '只能选 10 月下旬', min: '2026-10-20', max: '2026-10-31' }), + h('span', { class: 'out' }, () => (dateVal() ? `当前日期：${dateVal()}` : '未选择')), + ), + ), section( 'sec-autocomplete', '自动补全', diff --git a/llms-full.txt b/llms-full.txt index 79411c2..2982980 100644 --- a/llms-full.txt +++ b/llms-full.txt @@ -1,6 +1,6 @@ # @ui-arch 组件库 Agent 文档（无图形版） -> 自动生成于 2026-10-26T04:12:36.698Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 +> 自动生成于 2026-10-26T04:13:49.611Z，数据源：各包 ua.manifest.json，勿手改。人类版文档站：apps/docs/index.html。 > 组件 = 普通函数，传 props 返回 DOM；状态用 signal 双向绑定：读 signal() 写 signal(v)。 ## 快速上手 @@ -1284,6 +1284,33 @@ autoComplete({ value: acValue, placeholder: '输入组件名', options: [{ value 现场演示：apps/docs/demo.html#sec-autocomplete +### datePicker — 日期选择 DatePicker + +参数： + +- value：Signal —— 选中日期（YYYY-MM-DD）信号；不传则内部维护 +- placeholder：string —— 未选时占位文案；缺省「请选择日期」 +- min：string —— 最早可选日期（含，YYYY-MM-DD）；更早的日置灰不可点 +- max：string —— 最晚可选日期（含，YYYY-MM-DD）；更晚的日置灰不可点 +- disabled：boolean | Signal —— 禁用触发器 +- onChange：(date: string) => void —— 选中回调（点击日期或 Enter） + +示例： + +``` +datePicker({ value: dateVal, min: '2026-10-20', max: '2026-10-31', onChange: (d) => toast.success(d) }) +``` + +手把手： + +1. 点触发器展开当月网格，打开时视图自动对准已选日期（无选中则今天） +2. ‹ › 翻月，底部「今天」一键跳今天并提交；今天用描边标记、选中用实心底色 +3. 键盘：←→ 逐日、↑↓ 逐周、PageUp/PageDown 逐月、Enter 提交，跨月会自动翻页 +4. min / max 为闭区间，越界日期置灰不可点也不可键盘选中 +5. value 传信号即受控；Esc 收起（与弹窗/抽屉共用逐层关闭栈） + +现场演示：apps/docs/demo.html#sec-datepicker + API 速览： - button(props)：按钮，variant = primary | ghost | danger，disabled 支持布尔或信号禁用；type 缺省 button（表单内不隐式提交） @@ -1336,6 +1363,7 @@ API 速览： - cascader(props)：级联选择，多列联动面板（悬停下钻 / 点击提交），value 为路径数组信号，changeOnSelect 允许停在中间层，全键盘可操作 - splitter(props)：可拖拽分栏容器，分隔条支持指针拖拽 / 方向键微调 / 双击复位，sizes 为百分比数组信号 - autoComplete(props)：输入联想，输入即过滤候选、↑↓ 环形高亮 / Enter 选中 / Esc 收起，options 可传函数做远程联想 +- datePicker(props)：日期选择，单月网格 + 翻月 / 今天快捷键，value 为 YYYY-MM-DD 信号，min/max 闭区间限制，方向键逐日逐周可导航 一行用法： diff --git a/llms.txt b/llms.txt index e500850..4dfe49a 100644 --- a/llms.txt +++ b/llms.txt @@ -97,6 +97,7 @@ - cascader(props)：级联选择，多列联动面板（悬停下钻 / 点击提交），value 为路径数组信号，changeOnSelect 允许停在中间层，全键盘可操作 - splitter(props)：可拖拽分栏容器，分隔条支持指针拖拽 / 方向键微调 / 双击复位，sizes 为百分比数组信号 - autoComplete(props)：输入联想，输入即过滤候选、↑↓ 环形高亮 / Enter 选中 / Esc 收起，options 可传函数做远程联想 + - datePicker(props)：日期选择，单月网格 + 翻月 / 今天快捷键，value 为 YYYY-MM-DD 信号，min/max 闭区间限制，方向键逐日逐周可导航 - 用法: `const checked = signal(false); checkbox({ label: '同意', checked }); const open = signal(false); modal({ title: '确认', open }, '内容')` - 约定: 皮肤不持有业务状态，一律委托 headless 内核或调用方信号 - 约定: 表单类组件统一约定：*Props.value/checked/active 为 Signal 双向绑定，onChange/onInput 为回调 diff --git a/packages/skin/ui/src/datePicker.ts b/packages/skin/ui/src/datePicker.ts new file mode 100644 index 0000000..c97fb67 --- /dev/null +++ b/packages/skin/ui/src/datePicker.ts @@ -0,0 +1,150 @@ +import { effect, h, signal } from '@ui-arch/frame'; +import type { Signal } from '@ui-arch/frame'; +import { pushOverlay } from './overlay.js'; +import { flip } from './position.js'; +import type { DatePickerProps } from './types.js'; + +const pad = (n: number): string => String(n).padStart(2, '0'); // 两位补零 +const fmt = (y: number, m: number, d: number): string => `${y}-${pad(m + 1)}-${pad(d)}`; // 拼成 YYYY-MM-DD +const parse = (s: string): [number, number, number] | null => { + const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(s); + return m ? [Number(m[1]), Number(m[2]) - 1, Number(m[3])] : null; // 非法串返回 null，调用方回落到今天 +}; +const today = (): [number, number, number] => { + const d = new Date(); + return [d.getFullYear(), d.getMonth(), d.getDate()]; +}; +const shiftDay = (key: string, delta: number): string => { + const p = parse(key) ?? today(); + const d = new Date(p[0], p[1], p[2] + delta); + return fmt(d.getFullYear(), d.getMonth(), d.getDate()); +}; + +/*** 日期选择：单月网格 + 上下月翻页 + 今天快捷键，value 信号双向绑定，方向键/PageUp/PageDown 可导航 ***/ +export function datePicker(props: DatePickerProps): HTMLElement { + // —— 状态集中声明 —— + const value: Signal = props.value ?? signal(''); // 已选日期 + const open = signal(false); // 弹层开合 + const place = signal<'top' | 'bottom'>('bottom'); // 实际方位 + const initial = parse(value()) ?? today(); // 初始视图：跟随已选，否则今天 + const view = signal<[number, number]>([initial[0], initial[1]]); // 当前展示的年月 + const focus = signal(value() || fmt(...today())); // 键盘焦点日 + let releaseEsc: (() => void) | null = null; // Esc 栈注销函数 + + const grid = h('div', { class: 'ua-datepicker-grid', role: 'grid' }) as HTMLElement; + const label = h('span', { class: 'ua-datepicker-label' }) as HTMLElement; + const head = h( + 'div', + { class: 'ua-datepicker-head' }, + h('button', { type: 'button', class: 'ua-datepicker-nav', 'aria-label': '上一月', onClick: () => turn(-1) }, '‹'), + label, + h('button', { type: 'button', class: 'ua-datepicker-nav', 'aria-label': '下一月', onClick: () => turn(1) }, '›'), + ); + const pop = h( + 'div', + { class: () => `ua-datepicker-pop${open() ? ' ua-open' : ''}${place() === 'top' ? ' is-flip' : ''}` }, + head, + h('div', { class: 'ua-datepicker-week' }, ...['日', '一', '二', '三', '四', '五', '六'].map((w) => h('span', {}, w))), + grid, + h('div', { class: 'ua-datepicker-foot' }, h('button', { type: 'button', class: 'ua-datepicker-today', onClick: () => commit(fmt(...today())) }, '今天')), + ) as HTMLElement; + + /*** 翻月：只改视图，不改已选值；跨年自动进位 ***/ + function turn(delta: number): void { + const [y, m] = view(); + const d = new Date(y, m + delta, 1); + view([d.getFullYear(), d.getMonth()]); + } + + /*** 提交：写值 + 回调 + 收起 + 焦点归还触发器 ***/ + function commit(date: string): void { + value(date); + props.onChange?.(date); + open(false); + trigger.focus(); + } + + /*** 是否越界：min / max 为闭区间，缺省视为不限制 ***/ + const outOfRange = (date: string): boolean => (props.min ? date < props.min : false) || (props.max ? date > props.max : false); + + /*** 重绘网格：前置空位对齐星期、今天/选中/焦点分别打标 ***/ + function render(): void { + const [y, m] = view(); + const lead = new Date(y, m, 1).getDay(); // 当月 1 号是周几 + const total = new Date(y, m + 1, 0).getDate(); // 当月天数 + const cells: HTMLElement[] = []; + for (let i = 0; i < lead; i++) cells.push(h('span', { class: 'ua-datepicker-blank' })); // 月初留白 + for (let d = 1; d <= total; d++) { + const date = fmt(y, m, d); + const dead = outOfRange(date); + const cls = `ua-datepicker-day${date === value() ? ' is-selected' : ''}${date === fmt(...today()) ? ' is-today' : ''}${dead ? ' is-disabled' : ''}`; + cells.push( + h('button', { + type: 'button', + class: cls, + role: 'gridcell', + tabindex: date === focus() ? '0' : '-1', // 漫游 tabindex：只有焦点日可 Tab 进入 + 'aria-selected': String(date === value()), + disabled: dead, + 'aria-label': date, + onClick: () => commit(date), + }, String(d)), + ); + } + grid.replaceChildren(...cells); + label.textContent = `${y} 年 ${m + 1} 月`; + requestAnimationFrame(() => { + if (!open()) return; // 卫语句：收起时不抢焦点 + (grid.querySelector('.ua-datepicker-day[tabindex="0"]') as HTMLElement | null)?.focus(); + }); + } + + const trigger = h( + 'button', + { + type: 'button', + class: 'ua-datepicker-trigger', + 'aria-haspopup': 'dialog', + 'aria-expanded': () => String(open()), + disabled: props.disabled, + onClick: () => { + if (!open()) { + const p = parse(value()) ?? today(); // 打开时视图对准已选日期（无选则今天） + view([p[0], p[1]]); + focus(value() || fmt(...p)); + } + open(!open()); + }, + }, + h('span', { class: () => `ua-datepicker-value${value() ? '' : ' is-empty'}` }, () => value() || props.placeholder || '请选择日期'), + h('span', { class: 'ua-datepicker-caret', 'aria-hidden': 'true' }, '▤'), + ); + const root = h('div', { class: () => `ua-datepicker${open() ? ' ua-open' : ''}` }, trigger, pop) as HTMLElement; + + // 键盘：←→ 逐日、↑↓ 逐周、PageUp/PageDown 逐月、Enter 提交，Esc 交给弹层栈 + pop.addEventListener('keydown', (e: KeyboardEvent) => { + const step: Record = { ArrowLeft: -1, ArrowRight: 1, ArrowUp: -7, ArrowDown: 7 }; + if (step[e.key]) { + e.preventDefault(); + const next = shiftDay(focus(), step[e.key]); + const p = parse(next) ?? today(); + focus(next); + if (p[0] !== view()[0] || p[1] !== view()[1]) view([p[0], p[1]]); // 跨月自动翻页 + render(); + return; + } + if (e.key === 'PageUp' || e.key === 'PageDown') { e.preventDefault(); turn(e.key === 'PageUp' ? -1 : 1); return; } + if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (!outOfRange(focus())) commit(focus()); } + }); + document.addEventListener('click', (e) => { + if (root.contains(e.target as Node)) return; // 卫语句：组件内点击不处理 + open(false); + }); + effect(render); // 依赖 view / value / focus + effect(() => { + if (open()) releaseEsc ??= pushOverlay(() => { open(false); trigger.focus(); }); // 入栈逐层关闭 + else { releaseEsc?.(); releaseEsc = null; } + }); + effect(() => { if (open()) place(flip(trigger, pop, 'bottom')); }); // 空间不足自动翻转 + return root; +} diff --git a/packages/skin/ui/src/index.ts b/packages/skin/ui/src/index.ts index 9fa0cae..74d2e4e 100644 --- a/packages/skin/ui/src/index.ts +++ b/packages/skin/ui/src/index.ts @@ -48,3 +48,4 @@ export { transfer } from './transfer.js'; export { cascader } from './cascader.js'; export { splitter } from './splitter.js'; export { autoComplete } from './autoComplete.js'; +export { datePicker } from './datePicker.js'; diff --git a/packages/skin/ui/src/types.ts b/packages/skin/ui/src/types.ts index a8fe1b0..b56ad94 100644 --- a/packages/skin/ui/src/types.ts +++ b/packages/skin/ui/src/types.ts @@ -541,4 +541,14 @@ export interface AutoCompleteProps { onSelect?: (option: AutoCompleteOption) => void; // 选中回调（点击或 Enter） } +/*** 日期选择入参 ***/ +export interface DatePickerProps { + value?: Signal; // 选中日期（YYYY-MM-DD）；不传则内部维护 + placeholder?: string; // 未选时占位文案；缺省「请选择日期」 + min?: string; // 最早可选日期（含）；早于此的日置灰 + max?: string; // 最晚可选日期（含）；晚于此的日置灰 + disabled?: boolean | Signal; // 禁用触发器 + onChange?: (date: string) => void; // 选中回调（点击或 Enter） +} + export type { ColumnDef, RowKey }; // 再导出常用内核类型，方便调用方 diff --git a/packages/skin/ui/ua.manifest.json b/packages/skin/ui/ua.manifest.json index 16ac4fd..319a67b 100644 --- a/packages/skin/ui/ua.manifest.json +++ b/packages/skin/ui/ua.manifest.json @@ -62,7 +62,8 @@ "transfer(props)：穿梭框，左右两栏勾选后整体搬运，targetKeys 信号双向绑定，两栏各自搜索与全选（含半选），禁用条目不参与搬运也不可勾选", "cascader(props)：级联选择，多列联动面板（悬停下钻 / 点击提交），value 为路径数组信号，changeOnSelect 允许停在中间层，全键盘可操作", "splitter(props)：可拖拽分栏容器，分隔条支持指针拖拽 / 方向键微调 / 双击复位，sizes 为百分比数组信号", - "autoComplete(props)：输入联想，输入即过滤候选、↑↓ 环形高亮 / Enter 选中 / Esc 收起，options 可传函数做远程联想" + "autoComplete(props)：输入联想，输入即过滤候选、↑↓ 环形高亮 / Enter 选中 / Esc 收起，options 可传函数做远程联想", + "datePicker(props)：日期选择，单月网格 + 翻月 / 今天快捷键，value 为 YYYY-MM-DD 信号，min/max 闭区间限制，方向键逐日逐周可导航" ], "keyTypes": [ "ButtonProps", @@ -2123,6 +2124,51 @@ "options 传函数时每次输入都会用当前关键字调用，可在此发起远程请求并返回新数组", "value 传信号即受控：外部写入会同步回填输入框内容" ] + }, + { + "id": "datePicker", + "title": "日期选择 DatePicker", + "demo": "sec-datepicker", + "props": [ + { + "n": "value", + "t": "Signal", + "d": "选中日期（YYYY-MM-DD）信号；不传则内部维护" + }, + { + "n": "placeholder", + "t": "string", + "d": "未选时占位文案；缺省「请选择日期」" + }, + { + "n": "min", + "t": "string", + "d": "最早可选日期（含，YYYY-MM-DD）；更早的日置灰不可点" + }, + { + "n": "max", + "t": "string", + "d": "最晚可选日期（含，YYYY-MM-DD）；更晚的日置灰不可点" + }, + { + "n": "disabled", + "t": "boolean | Signal", + "d": "禁用触发器" + }, + { + "n": "onChange", + "t": "(date: string) => void", + "d": "选中回调（点击日期或 Enter）" + } + ], + "example": "datePicker({ value: dateVal, min: '2026-10-20', max: '2026-10-31', onChange: (d) => toast.success(d) })", + "steps": [ + "点触发器展开当月网格，打开时视图自动对准已选日期（无选中则今天）", + "‹ › 翻月，底部「今天」一键跳今天并提交；今天用描边标记、选中用实心底色", + "键盘：←→ 逐日、↑↓ 逐周、PageUp/PageDown 逐月、Enter 提交，跨月会自动翻页", + "min / max 为闭区间，越界日期置灰不可点也不可键盘选中", + "value 传信号即受控；Esc 收起（与弹窗/抽屉共用逐层关闭栈）" + ] } ] } diff --git a/packages/skin/ui/ui.css b/packages/skin/ui/ui.css index be86f82..f5524e2 100644 --- a/packages/skin/ui/ui.css +++ b/packages/skin/ui/ui.css @@ -2809,3 +2809,157 @@ button.ua-step-dot:hover { .ua-autocomplete-input, .ua-autocomplete-opt { transition: none; } } +.ua-datepicker { + position: relative; + display: inline-block; + min-width: 200px; +} +.ua-datepicker-trigger { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--ua-space-1); + width: 100%; + padding: 8px var(--ua-space-2); + font-size: var(--ua-font-size-sm); + color: var(--ua-color-text); + background: var(--ua-color-surface); + border: 1px solid var(--ua-color-border); + border-radius: var(--ua-radius-sm); + cursor: pointer; + transition: border-color 0.15s ease, box-shadow 0.15s ease; +} +.ua-datepicker-trigger:hover { + border-color: var(--ua-color-accent); +} +.ua-datepicker-trigger:disabled { + opacity: 0.5; + cursor: not-allowed; +} +.ua-datepicker.ua-open .ua-datepicker-trigger { + border-color: var(--ua-color-accent); + box-shadow: 0 0 0 3px color-mix(in srgb, var(--ua-color-accent) 18%, transparent); +} +.ua-datepicker-value.is-empty { + color: var(--ua-color-text-muted); +} +.ua-datepicker-caret { + font-size: 11px; + color: var(--ua-color-text-muted); +} +.ua-datepicker-pop { + position: absolute; + z-index: 40; + display: none; + width: 264px; + margin-top: 6px; + padding: var(--ua-space-2); + border: 1px solid var(--ua-color-border); + border-radius: var(--ua-radius-md); + background: var(--ua-color-surface); + box-shadow: 0 12px 28px rgba(0, 0, 0, 0.18); +} +.ua-datepicker-pop.ua-open { + display: block; + animation: ua-dp-in 0.15s ease both; +} +.ua-datepicker-pop.is-flip { + margin-top: 0; + margin-bottom: 6px; +} +.ua-datepicker-head { + display: flex; + align-items: center; + justify-content: space-between; + gap: var(--ua-space-1); + margin-bottom: var(--ua-space-1); +} +.ua-datepicker-label { + font-size: var(--ua-font-size-sm); + font-weight: 600; + color: var(--ua-color-text); +} +.ua-datepicker-nav { + width: 24px; + height: 24px; + font-size: 14px; + line-height: 1; + color: var(--ua-color-text); + background: transparent; + border: 1px solid var(--ua-color-border); + border-radius: var(--ua-radius-sm); + cursor: pointer; + transition: border-color 0.15s ease, color 0.15s ease; +} +.ua-datepicker-nav:hover { + color: var(--ua-color-accent); + border-color: var(--ua-color-accent); +} +.ua-datepicker-week { + display: grid; + grid-template-columns: repeat(7, 1fr); + font-size: var(--ua-font-size-sm); + color: var(--ua-color-text-muted); + text-align: center; +} +.ua-datepicker-grid { + display: grid; + grid-template-columns: repeat(7, 1fr); + gap: 2px; + margin-top: 2px; +} +.ua-datepicker-blank { + height: 28px; +} +.ua-datepicker-day { + height: 28px; + font-size: var(--ua-font-size-sm); + color: var(--ua-color-text); + background: transparent; + border: none; + border-radius: var(--ua-radius-sm); + cursor: pointer; + transition: background 0.15s ease, color 0.15s ease; +} +.ua-datepicker-day:hover:not(:disabled) { + background: color-mix(in srgb, var(--ua-color-accent) 10%, transparent); +} +.ua-datepicker-day.is-today { + box-shadow: inset 0 0 0 1px var(--ua-color-accent); +} +.ua-datepicker-day.is-selected { + color: var(--ua-color-accent-contrast); + background: var(--ua-color-accent); + font-weight: 600; +} +.ua-datepicker-day:disabled { + opacity: 0.35; + cursor: not-allowed; +} +.ua-datepicker-day:focus-visible { + outline: 2px solid var(--ua-color-accent); + outline-offset: -2px; +} +.ua-datepicker-foot { + display: flex; + justify-content: flex-end; + margin-top: var(--ua-space-1); +} +.ua-datepicker-today { + padding: 4px var(--ua-space-1); + font-size: var(--ua-font-size-sm); + color: var(--ua-color-accent); + background: transparent; + border: none; + cursor: pointer; +} +@keyframes ua-dp-in { + from { opacity: 0; transform: translateY(-4px); } + to { opacity: 1; transform: translateY(0); } +} +@media (prefers-reduced-motion: reduce) { + .ua-datepicker-pop.ua-open { animation: none; } + .ua-datepicker-trigger, + .ua-datepicker-day, + .ua-datepicker-nav { transition: none; } +}