u

2026-10-13 22:32:50 +08:00
1 parent f3936cec61
commit 15e0ae5b67
@@ -0,0 +1,11 @@
+---
+'@g3soft/ui': patch
+---
+
+G3Table：`checkbox` 列点击后与其它单元格**行为一致**（该格成为当前格）。
+
+- 原先点复选框只切换值：因为 `createCheckbox` 把 `mousedown` 停掉了（换「一次点击就切换」——底座的 mousedown 会先激活行编辑、把节点替换掉，Chromium 因此不派发 `click`，不停就会变成「第一次点击只进编辑、第二次才切换」），底座收不到 mousedown，也就不会像点击其它格那样设选区、激活该行编辑、置当前行。
+- 后果（实测）：值改了、`change` 也抛了，但**整行不高亮、格子没有选中框**，看不出在哪儿改；而且表格里**没有任何选区** —— 接着按 `Tab` / 方向键会从 `(0,0)` 起步、焦点掉到 `body`，键盘用户从复选框出发就走不动。
+- 现在切换后会走**同一条链路**（移动选区 → 底座的 `area-selection-change` → 激活编辑 + 当前行 + 选中框），不再另写一套行为。`EditableContext` 增加可选钩子 `onEditorInteract?(row, col)`（内部接口，未导出为公开 API；不实现时行为与之前一致）。
+- 顺带说明：进入编辑后 `Esc` 会回滚整行（含这次勾选），而 `change` 已经抛给父级 —— 这是本组件既有的「即时提交 + Esc 回滚」语义（`select` 编辑器同理），不是本次改动引入的。
+- 单测锁「切换/键盘 Enter 都通知表格、仅渲染不通知」；真浏览器 e2e 锁「一次点击即切换 + 行高亮 + 选中框 + 能继续 Tab」（关掉同步后用例变红，实测）。
@@ -0,0 +1,12 @@
+---
+'@g3soft/ui': patch
+---
+
+G3Table：修两个编辑态底色/描边的视觉问题（都与「`select` 展开后焦点被移进浮层」有关）。
+
+- **修复：`select` 编辑格的底色会变成选区色（浅蓝）而不是基色。** 编辑格白底的判据原先写在 CSS 的 `td:focus-within` 上，而 `G3Select` 展开时会把 DOM 焦点移进**下拉浮层**（浮层 `Teleport` 到 `body`），那一刻 `:focus-within` 立刻失效，底色退回库的 `td[data-cs-s] { background-color: var(--cs-bgc) }`。症状是「时白时不白」——取决于此刻焦点在触发器还是浮层里；`input` 没有浮层，所以只有 `select` 会这样。
+  - 判据改为编辑器上的标记类（`is-cell-editing`，由内容节点带出，与「按行禁用的灰底」「校验态」同一套路子），`td:has(> …)` 精确命中该格，与焦点在格内 / 浮层 / 换格瞬间落到 `body` 都无关。
+  - 焦点环同样补上这个标记（`:focus-within` 与标记取并集）：编辑格**始终**有环，不再随焦点漂移。
+- **修复：冻结列上的选中格没有选中描边（蓝色边框）。** 冻结列的「行状态叠色」用的是 `box-shadow`，而库的选区描边（`td[data-cs-s]` 的 4 个方向 inset）**也在 `box-shadow` 上** —— 单值属性，只写叠色就会把选中框整体替换掉。非冻结列没有这条规则，所以只有冻结列会缺，很容易被当成「选中态没生效」。现在叠色规则连同选区描边一起写。
+- **冻结列的编辑格不再叠行状态色**：与普通列一致地保持「纯基色 + 焦点环」。否则同一行里冻结列的编辑格带行色、普通列的却是纯色，一眼看得出不一致。
+- 两条都由真浏览器 e2e 锁住（`e2e/table.spec.ts`）：`select` 那条必须在**浮层已夺焦**的状态下断言（否则测不出），冻结列那条断言选中格的 `box-shadow` 里确实含有选区描边色、编辑格带 2px 焦点环。摘掉修复后两条都会红（实测）。
@@ -0,0 +1,17 @@
+---
+'@g3soft/ui': minor
+---
+
+G3Table：序号列固定左侧，并补上 `fixedColShadow`（固定列阴影开关）。
+
+- **序号列（`seq`）现在固定在左侧**：横向滚动时行号不再跟着滚走 —— 序号是「这一行是哪一行」的锚点，恰恰是最不该丢的信息。它由组件注入，业务侧不用配，与选择列（同样是 `fixed: 'left'`）保持一致。
+  - 这是一个**默认行为变化**。原先 `seq` 列会随内容滚动，只有在表格出现横向溢出时才看得出差别；没有溢出时 sticky 不产生任何位移。
+  - 序号列宽度会参与左固定列的吸附位移计算，所以调用方业务列的 `fixed: 'left'` 会自动接在序号列之后，不会出现重叠或空档。
+- 新增 `fixedColShadow`（默认 `false`）：固定列被滚过去的列遮挡时，在边界画一条 10px 渐变。它对应底座的 `fixedColShadow`，此前只能靠 `$attrs` 透传、没有正式 prop（组件 `inheritAttrs: false`，透传虽然生效但不该是公开用法）。默认关是刻意的：纯观感开关，业务觉得这层渐变糊得脏就可以不开；但有左右冻结列时建议打开，否则冻结列与滚过去的列同为白底、紧贴在一起，看不出边界在哪。
+- 文档新增「固定列」一节（`docs/content/ui/data/table.md`）：`fixed` 的取值与位置约束、为什么固定列必须写 `width`、阴影开关该不该开；`seq` 的 API 说明也标注了「固定左侧」。
+- **修复：固定列上的校验态格子被推离本列。** 校验态样式为了让绝对定位的角标有基准，给 `td` 写了 `position: relative`，而固定列 td 的 `position` 是库在用的（被遮挡时 `sticky`，吸附位移以**内联** `left` / `right` 写在 td 上）—— 改成 relative 后那条内联 `left` 变成普通相对位移，整个格子被推开「前面所有左固定列宽度之和」。症状极易误判：只有「固定列 + 校验未通过」的格子位移，看上去就是「错误底色跑到了隔壁两列中间」。现在普通格给 `relative`、固定列保持 `sticky`（sticky 本身就是定位值，角标仍以 td 为基准）。（这两条 `position` 规则随后随「角标整体去掉」一起删除了 —— 成因连根消失，详见 `table-validation-editing-yield`。）
+  - 补了真浏览器几何回归：playground 新增 `table-fixed-wrap`（左固定两列 + 一行空名称 + 列宽总和超出视口），`e2e/table.spec.ts` 断言「错误格与本列表头对齐、滚动后随固定列一起吸附」。去掉修复后该用例会红（实测位移 250px）。
+- **修复：受控调用方「点可编辑格进入编辑」时当前行不高亮**（`:active-row-key` + `@row-click` 那套 fms 写法，点只读格却正常）。根因在浏览器：点可编辑格会挂载编辑器、把 mousedown 命中的 `.cell-display` 替换掉，Chromium 因此**不派发 click**，库的 `row-click` 不触发，调用方那个唯一写入者收不到消息。现在「激活编辑」这条路径（鼠标 / 键盘 / 键盘防抖收尾）**无条件**同步当前行 —— 对这次手势，组件内部是唯一知道发生了什么的代码，不是第二个写入者。同页的 `editRow()` 命令式 API 行为不变。
+- **已知限制（已写进文档）**：固定列与**横向虚拟**同时开启时，快速横向拖动会出现一帧位移 —— 横向虚拟在表体左侧留的占位是异步更新的，滚动到位而占位还是旧宽度的那一帧，左固定列的静态位置被占位推着走（`sticky` 只能往右收、不能往左拉），实测偏 258 → 1628（占位全长）；右固定列偏差 0，所以只有左侧看得见。已试过在 scroll 里提前重算窗口：无效（合成手势下无改善，且表体多出中间态），故不采用。要绝对稳就 `:virtual-x="false"`；根治需上游把左占位挪到固定列之后。
+- **变更：灰底判据从「编辑行里没有编辑器的格子」改为「这一格现在改不了」+ 常驻。** 现在三种情形统一显示灰底（与行是否在编辑无关）：列上没有 `editor`、`editor.disabled === true`、以及 `editor.disabled` 为函数且对该行返回 true（动态条件，如「已放舱后状态不可改」）。前两种走 td 类名（**不注入 customCell**，零运行时开销），第三种由内容节点带标记（只有这些列会被常驻注入）。顺带删掉了旧判据那套「行内是否挂着 input/select 编辑器」的结构性选择器（它只在被点过的那一行可见，且行内有 checkbox 时会误判整行）。「既禁用又校验不过」的格子显示为灰。
+- **修复：悬停 / 当前行时固定列是半透明的。** 库给固定列的是 `background-color: inherit`，而行的 hover / 当前行底色是 alpha 值（`--tr-hover-bgc` = `rgba(0,0,0,.04)`、`--tr-active-bgc` = 皮肤给的 `hsl(... / .15)`）；非固定列继承它没问题（tr 底下是表格基色），冻结列却在**被横滚的列之上**，于是下面的列直接透上来（表现为「编辑行的固定列透字」）。现在冻结列底色写死不透明的 `--td-bgc`，行状态改用**内阴影**叠色（画在背景之上、内容之下，不压库的边框渐变、不需要给 td 加定位），hover 与当前行各一条规则。
@@ -0,0 +1,13 @@
+---
+'@g3soft/ui': patch
+---
+
+G3Table：「不可改的格子」灰底加上前提 —— **这张表里得先有人能编辑**。
+
+- 灰底的语义是「这一格现在改不了」，它靠「旁边有可改的格子」传达意义。原先的判据是逐格看「有没有 `editor`」，于是**纯展示表**（列上都没写 `editor`，文档 7 张 demo 里有 6 张如此）会把**每一格**都标成只读并铺灰 —— 整张表看上去像「禁用状态」，与实际（这是一张正常展示表）不符。
+- 现在两种情况不再铺灰：
+  - 表格里**一个可编辑列都没有**（含「唯一有 editor 的那列 `disabled: true`」）；
+  - `editable="false"`，编辑功能整体关掉。
+  - 判据取「存在**真的可编辑**的列」：`disabled` 写成**函数**的列算可编辑（总有行能改，灰底正是要表达它）。
+- 可编辑表里的行为**不变**：没有 `editor` 的列、`editor.disabled: true` 的列、以及按行禁用的格子照旧常驻灰底（不需要先点开某一行）。
+- 单测锁「按行禁用时展示 span 带 `cell-readonly`」与「总开关关闭时不带」；真浏览器 e2e 用两个新宿主分别锁「纯展示表」与「`editable: false`」都是 0 个灰格，并反向断言可编辑表里仍有灰底（把门控改成恒真时，纯展示表立刻量到 6 个灰格、用例转红，实测）。
@@ -0,0 +1,14 @@
+---
+'@g3soft/ui': minor
+---
+
+G3Table：`Tab` / `Shift+Tab` 在可编辑格之间跳格（修复「select 编辑器里按 Tab 没选中下一个」）。
+
+- **新增键盘跳格**：编辑态下 `Tab` / `Shift+Tab` 提交当前格并落到**下一个 / 上一个可编辑格**——没有 `editor` 的列、以及被 `disabled` 按行禁用的格会被跳过；行尾自动接到下一行的第一个可编辑格，到表格两头则**循环**（Excel / AG Grid 的手感）。全表没有任何可编辑格时不接管，Tab 保持浏览器默认行为。规则落在 `utils/editable.ts` 的 `findAdjacentEditableCell()`，与编辑器的「能不能改」判据同源（`editor` 是否存在 + `disabled` 是否对该行为真），单测覆盖跳过只读列 / 跳过按行禁用 / 跨行回绕 / 两端循环 / 无可编辑格。
+- **修复：`select` 编辑器里按 Tab，焦点跑到页面其它元素上**（表现为「Tab 没有选中下一个」）。根因是 `G3Select` 展开时会把 DOM 焦点移进**下拉浮层**，而浮层 `Teleport` 到 `body` —— 浮层里的 keydown 不经过 `.stk-table`，底座挂在表格容器上的 Tab 导航永远收不到；浏览器只能按文档顺序找下一个可聚焦元素，于是焦点离开表格（实测落到文档开头）。现在表格在 `document` **捕获阶段**接管 Tab，用 ARIA 关联（浮层 id ↔ 触发器 `aria-controls`）把浮层追回它所属的单元格，再经底座的 `setAreaSelection` 移动选区 —— 激活编辑、聚焦编辑器、滚动进视口全部复用既有链路（鼠标点击与键盘跳格走同一条路）。
+- 顺带修掉同一处暴露的另一个问题：原先 `Tab` 走到行尾会落到**只读格**上（`focusCol` 为 null，编辑器不存在），表现为「按 Tab 后焦点凭空消失」，再按一次就掉出表格。新规则只落在能接收焦点的格上。
+- **连按 / 长按 Tab 也不会掉队**：跳格是「改选区 → 激活编辑 → 重挂编辑器 → 聚焦」的异步链路，中间焦点会短暂落在 `body`（旧的编辑器已卸载、新的还没聚焦），且编辑态的 `focusCol` 被防抖推迟。接管里因此做了几件事：起点优先取**选区终点**（每次跳格同步更新，连按时才能一格一格往前走，而不是算回同一格）、换格空档期（200ms）内即使焦点在 `body` 也仍认这记 Tab。
+- **修复：长按 Tab（或从只读列起步连续 Tab）走到第 3 格就掉出表格。** 这一条是用户实测 100% 复现的：点「订舱号」（只读、没有编辑器）那一格，然后一直按着 Tab 往右走，到「起运港」时焦点就跑到页面其它元素上了。成因是底座的导航优化在长按期间调用 `clearActiveEditing()` —— 它**把 `activeEditingRow` 和 `state.editing` 一起置空**，编辑器全卸载、只留一个待激活目标（`pendingEditingTarget`），焦点因此落在 `body`。旧判据要求 `state.editing === true` 且能取到当前行，于是从第 3 下起就把 Tab 当成「不是给表格的」放行了。现在判据接受「待激活目标还在」这一形态（当前行也从它里面取回来），并按「编辑格不在 DOM 里 → 起点取选区」处理：长按期间一格一格继续走，松手后编辑器落到最后一格。
+- **修复：编辑行被虚拟滚动滚出渲染窗口后，按 Tab 会逃出表格**（与按键速度无关，慢速必现）。编辑行 / 编辑列离开渲染窗口时编辑器被虚拟滚动**卸载**，焦点掉到 `body`，而编辑态与选区其实都还在（滚回来就恢复）；此时 Tab 的事件源既不在编辑器也不在浮层，会被判定成「不是给表格的」而放行 → 浏览器按文档顺序把焦点送出表格（实测落到侧边栏菜单上）。现在这种情况会被接管：**把表格滚回编辑行**并继续前进一格。判据严格限定为「编辑格此刻不在 DOM 里」，避免把「点了页面空白再按 Tab」也吞掉。
+- 接管只针对**本表格自己的编辑器**（含它的浮层）：判定靠 DOM 数据属性（`td[data-col-key]`、`tr[data-row-key]`）与编辑态对齐，其余 Tab 一律放行，不影响页面/表单的 Tab 序。
+- 文档（`docs/content/ui/data/table.md`）补「跳格」一节；`e2e/table.spec.ts` 增加真浏览器回归（覆盖「焦点在 select 浮层里按 Tab」这条路径，摘掉接管后用例会红）。
@@ -0,0 +1,13 @@
+---
+'@g3soft/ui': patch
+---
+
+G3Table：校验态视觉调整 —— **去掉右上角 `!` 角标**、**编辑时底色让位**、底色调淡一档。
+
+- **右上角 `!` 角标整体去掉**（实际录入反馈）：它画的 `!` 会压到文字上 —— **右对齐的数字列**最明显（数字正好顶在角标下面）；而为它让位留出的 `padding-right: 14px` 又实打实缩窄了录入区。去掉之后：
+  - 非编辑态的提示只剩**浅底**，编辑态的提示只剩**语义色焦点环 + 红字**；
+  - 顺带删掉三处「给角标让位」的 padding 规则（输入控件 / 展示 span / select 触发器）—— 校验格的内边距现在与普通格完全一致；
+  - 顺带删掉两条「给角标做定位基准」的 `position` 规则（普通格 `relative` / 固定列 `sticky`）。那两条曾把固定列库内联的 `sticky` 偏移变成普通相对位移，是「错误底色跑到隔壁两列中间」那个 bug 的成因 —— 现在连根消失，`td` 上不再由组件写 `position`。
+- **编辑格不再铺校验底色**：底色回到基色，校验信号只留**语义色焦点环 + 红字**（铺着底色时输入区被染色、对比度下降，录入时「看不清」）。判据是编辑器上的 `is-cell-editing` 标记，不是 `:focus-within` —— select 展开时焦点被移进 Teleport 到 body 的浮层，`:focus-within` 会时有时无（焦点环那一节踩过同一个坑）。暗色那两条只覆写 `background-color` 的规则也补上了同一个守卫，避免「亮色下编辑时干净、暗色下仍然染色」。
+- **底色比例调淡一档**（编辑态已不铺底，非编辑态只需够看出差异）：亮色 error 12% → 8%、warning 8% → 5%；暗色 error 8% → 6%、warning 6% → 4%。
+- 真浏览器 e2e 锁三态：未编辑（铺底、`::after` 无内容）→ 编辑（基色底、2px 语义色焦点环）→ 换格后恢复；并断言**校验格与同列普通格的内边距一致**（不再为角标留位）。关掉编辑态守卫该用例会红（实测）。