forked from mengyxu/noob-components
6 changed files with 131 additions and 0 deletions
@ -0,0 +1,6 @@
@@ -0,0 +1,6 @@
|
||||
{"file": ".claude/commands/trellis/finish-work.md", "reason": "Finish work checklist"} |
||||
{"file": ".claude/commands/trellis/check.md", "reason": "Code quality check spec"} |
||||
{"file": ".trellis/spec/packages-base/index.md", "reason": "Review package-level export conventions for ListTableV2 changes."} |
||||
{"file": ".trellis/spec/frontend/component-guidelines.md", "reason": "Verify column flex behavior still matches table-v2 guidance."} |
||||
{"file": ".trellis/spec/frontend/quality-guidelines.md", "reason": "Run the expected package build/lint checks for the fix."} |
||||
{"file": ".trellis/spec/guides/code-reuse-thinking-guide.md", "reason": "Confirm no duplicate width logic was introduced."} |
||||
@ -0,0 +1 @@
@@ -0,0 +1 @@
|
||||
{"file": ".claude/commands/trellis/check.md", "reason": "Code quality check spec"} |
||||
@ -0,0 +1,6 @@
@@ -0,0 +1,6 @@
|
||||
{"file": ".trellis/workflow.md", "reason": "Project workflow and conventions"} |
||||
{"file": ".trellis/spec/frontend/index.md", "reason": "Frontend development guide"} |
||||
{"file": ".trellis/spec/packages-base/index.md", "reason": "Base component export and package conventions for ListTableV2."} |
||||
{"file": ".trellis/spec/frontend/quality-guidelines.md", "reason": "Build/test expectations for package changes and example verification."} |
||||
{"file": ".trellis/spec/frontend/component-guidelines.md", "reason": "Element Plus table-v2 and column flex distribution guidance."} |
||||
{"file": ".trellis/spec/guides/code-reuse-thinking-guide.md", "reason": "Reuse existing column width logic instead of adding a parallel mechanism."} |
||||
@ -0,0 +1,53 @@
@@ -0,0 +1,53 @@
|
||||
# Observations |
||||
|
||||
## Exported Component Path |
||||
|
||||
- The live `ListTableV2` used by the examples page is exported from [packages/base/index.ts](../../../../packages/base/index.ts) via `./data/list-table-v2/list-table-v2.vue`. |
||||
- Earlier styling work had touched a different file, `packages/base/data/list-table-v2.vue`, which is not the component currently exported to the examples app. |
||||
|
||||
## Section 8 Fixed Row Height Behavior |
||||
|
||||
- Section 8 of the demo page uses plain columns without explicit widths. |
||||
- In the exported component, fixed row height mode had not originally changed the width path directly, but row-height handling and width/render behavior were easy to confuse because the exported implementation diverged from the older wrapper file. |
||||
|
||||
## Wrapping Logic |
||||
|
||||
- There is no explicit semantic classifier for “wrappable” vs “unwrappable” values. |
||||
- For normal body cells, width estimation uses shrink-wrap text measurement, which is effectively an unwrapped width preference. |
||||
- For normal body cells, row-height estimation uses wrapped text measurement at the current column width. |
||||
- Rendered body cells are wrappable by default through CSS: |
||||
- `white-space: normal` |
||||
- `word-break: break-word` |
||||
- Header text is explicitly non-wrapping through CSS: |
||||
- `white-space: nowrap` |
||||
- Custom renderer / slot cells are not text-measured with pretext; they use fallback height behavior instead. |
||||
|
||||
## Minimum Width Logic |
||||
|
||||
- If a column has explicit `width`, runtime style sets: |
||||
- `width = explicitWidth` |
||||
- `minWidth = explicitWidth` |
||||
- `maxWidth = explicitWidth` |
||||
- If a column has explicit `minWidth`, that value becomes the computed `minWidth`. |
||||
- Otherwise, automatic `minWidth` is derived from measured text statistics: |
||||
- measure shrink-wrap width of header text |
||||
- measure shrink-wrap width of sampled cell text |
||||
- compute `mean` and `variance` |
||||
- set `minWidth = max(mean - 2 * sqrt(variance), MIN_BASE_WIDTH) + CELL_PADDING` |
||||
- This means auto `minWidth` is a statistical lower bound, not the width of the longest value. |
||||
- If computed config is unavailable, the runtime fallback path uses `col.minWidth ?? 120` with a floor of `50px`. |
||||
|
||||
## Timestamp Width Bug Root Cause |
||||
|
||||
- Timestamp columns were rendered using formatted values, but width estimation had been measuring raw values. |
||||
- Example: |
||||
- rendered timestamp looked like `2026-04-08 12:34:56` |
||||
- width estimation measured the raw Unix value like `1712579696` |
||||
- This mismatch caused timestamp columns to be under-sized relative to their actual displayed content. |
||||
- The discrepancy between section 1 and section 4 timestamp-related widths came from the width hook deriving stats from sampled measured values, combined with the mismatch between raw and formatted text. |
||||
|
||||
## Fix Applied During This Session |
||||
|
||||
- `usePretextColumnWidths` now accepts `formatCellValue` so width estimation uses the same displayed text as the rendered cell. |
||||
- The exported `ListTableV2` passes its `formatCellValue` implementation into the width hook. |
||||
- Scoped lint passed on the touched table-v2 files after this change. |
||||
@ -0,0 +1,20 @@
@@ -0,0 +1,20 @@
|
||||
# Fix table-v2 default flex columns in fixed row height mode |
||||
|
||||
## Goal |
||||
Ensure `ListTableV2` keeps default columns flex-sized in fixed row height mode so columns expand to fill available width unless an explicit fixed width is configured. |
||||
|
||||
## Requirements |
||||
- Preserve default flex sizing for non-fixed columns with no explicit `width`. |
||||
- Do not let fixed row height mode remove or bypass the flex sizing contract. |
||||
- Keep explicit column widths authoritative when a width is configured. |
||||
- Verify the section 8 demo case reflects the expected cell/header flex behavior. |
||||
|
||||
## Acceptance Criteria |
||||
- [ ] In section 8 of the demo page, default columns expose flex sizing behavior and fill remaining width. |
||||
- [ ] Columns with explicit widths still use their fixed width behavior. |
||||
- [ ] Fixed row height mode does not change default column sizing semantics. |
||||
|
||||
## Technical Notes |
||||
- Primary component is expected to be under `packages/base/data/list-table-v2.vue`. |
||||
- Check whether `el-table-v2` column construction and the cell/header CSS/render path diverge in fixed-height mode. |
||||
- Reuse existing column width logic rather than introducing a parallel sizing mechanism. |
||||
@ -0,0 +1,45 @@
@@ -0,0 +1,45 @@
|
||||
{ |
||||
"id": "fix-table-v2-flex-columns", |
||||
"name": "fix-table-v2-flex-columns", |
||||
"title": "Fix table-v2 default flex columns in fixed row height mode", |
||||
"description": "", |
||||
"status": "completed", |
||||
"dev_type": "frontend", |
||||
"scope": null, |
||||
"package": null, |
||||
"priority": "P2", |
||||
"creator": "hechang27-sprt", |
||||
"assignee": "hechang27-sprt", |
||||
"createdAt": "2026-04-08", |
||||
"completedAt": "2026-04-08", |
||||
"branch": null, |
||||
"base_branch": "dev", |
||||
"worktree_path": null, |
||||
"current_phase": 0, |
||||
"next_action": [ |
||||
{ |
||||
"phase": 1, |
||||
"action": "implement" |
||||
}, |
||||
{ |
||||
"phase": 2, |
||||
"action": "check" |
||||
}, |
||||
{ |
||||
"phase": 3, |
||||
"action": "finish" |
||||
}, |
||||
{ |
||||
"phase": 4, |
||||
"action": "create-pr" |
||||
} |
||||
], |
||||
"commit": null, |
||||
"pr_url": null, |
||||
"subtasks": [], |
||||
"children": [], |
||||
"parent": null, |
||||
"relatedFiles": [], |
||||
"notes": "", |
||||
"meta": {} |
||||
} |
||||
Loading…
Reference in new issue