forked from mengyxu/noob-components
2 changed files with 211 additions and 0 deletions
@ -0,0 +1,167 @@
@@ -0,0 +1,167 @@
|
||||
# Rework table-v2.vue into Comprehensive Demo Page |
||||
|
||||
## Goal |
||||
|
||||
Transform `examples/view/base/table-v2.vue` from a basic demo into a comprehensive, Element Plus-style documentation page that: |
||||
1. Demonstrates every feature/prop of `list-table-v2` |
||||
2. Doubles as automated tests verifying features work correctly and work together |
||||
|
||||
## What list-table-v2 Supports (Feature Inventory) |
||||
|
||||
### Props |
||||
| Prop | Status | Notes | |
||||
|------|--------|-------| |
||||
| `columns` | ✅ | key, dataKey, name, i18n, type, width, minWidth, fixed, align, slot, dict, timestamp, filesize, cellRenderer, headerCellRenderer | |
||||
| `data` | ✅ | Array or page response {data, total} | |
||||
| `page` | ✅ | Pagination | |
||||
| `border` | ✅ | Table borders | |
||||
| `row-key` | ✅ | Row identifier | |
||||
| `height` / `maxHeight` | ✅ | Fixed/max height | |
||||
| `rowHeight` | ✅ | Fixed row height (disables probe) | |
||||
| `estimatedRowHeight` | ✅ | Manual estimate for dynamic height | |
||||
| `headerHeight` | ✅ | Manual header height | |
||||
| `debug` | ✅ | Shows estimated heights | |
||||
| `example` | ✅ | Pagination state {page, size} | |
||||
|
||||
### Events |
||||
| Event | Status | Notes | |
||||
|-------|--------|-------| |
||||
| `@query` | ✅ | Pagination query | |
||||
| `@row-click` | ✅ | Row click | |
||||
| `@cell-click` | ✅ | Cell click | |
||||
| `@selection-change` | ✅ | (interface exists) | |
||||
|
||||
### Slots |
||||
| Slot | Status | Notes | |
||||
|------|--------|-------| |
||||
| `slots[columnKey]` | ✅ | Custom cell content per column | |
||||
| `#default` | ✅ | SearchRow content | |
||||
|
||||
### Custom Renderers |
||||
| Renderer | Status | Notes | |
||||
|----------|--------|-------| |
||||
| `cellRenderer` | ✅ | Per-column JSX function | |
||||
| `headerCellRenderer` | ✅ | Per-column JSX function | |
||||
|
||||
### Auto-probe (Dynamic Height) |
||||
| Feature | Status | Notes | |
||||
|---------|--------|-------| |
||||
| Mini-table probe | ✅ | Measures actual row height | |
||||
| Header height probe | ✅ | Measures actual header height | |
||||
| ResizeObserver | ✅ | Debounced container resize | |
||||
| queueMicrotask | ✅ | Eliminates flicker | |
||||
|
||||
## Demo Sections (Patterned after Element Plus table-v2 docs) |
||||
|
||||
Each section is self-contained with: |
||||
- Clear section title and description |
||||
- Interactive demo |
||||
- Feature validation (pass/fail indicators) |
||||
- Code reference |
||||
|
||||
### Section 1: Basic Usage |
||||
- Data binding (array and page response) |
||||
- Column definition (key, name, i18n, dataKey) |
||||
- Pagination |
||||
- Row click and cell click events |
||||
|
||||
### Section 2: Styling |
||||
- Borders (`border` prop) |
||||
- Column alignment (`align: left/center/right`) |
||||
- Column width distribution (`width`, `minWidth`, flexGrow) |
||||
|
||||
### Section 3: Fixed Columns |
||||
- Fixed left column (`fixed: "left"`) |
||||
- Fixed right column (`fixed: "right"`) |
||||
- Multiple fixed columns |
||||
|
||||
### Section 4: Data Formatting |
||||
- Timestamp formatting (`timestamp: "unix"`) |
||||
- Dictionary lookup (`dict: "key"`) |
||||
- File size formatting (`filesize: true`) |
||||
- Custom formatting function |
||||
|
||||
### Section 5: Custom Cell Renderer |
||||
- Simple text custom cell |
||||
- Rich content (tags, badges) |
||||
- Interactive content (buttons in cells) |
||||
- Custom `cellRenderer` function per column |
||||
- Mini-table synchronization test (CRITICAL: custom renderer must render in probe row) |
||||
|
||||
### Section 6: Custom Header Renderer |
||||
- Simple text header |
||||
- Rich header (with icons) |
||||
- Custom `headerCellRenderer` function per column |
||||
- Mini-table header synchronization test (CRITICAL) |
||||
|
||||
### Section 7: Dynamic Height |
||||
- Auto-probe mode (no rowHeight set) |
||||
- Manual estimate mode (`estimatedRowHeight`) |
||||
- Fixed height mode (`rowHeight` set) |
||||
- Debug info display |
||||
|
||||
### Section 8: Pagination |
||||
- Server-side pagination with `@query` |
||||
- Page size options |
||||
- Total count display |
||||
|
||||
### Section 9: Slot-based Custom Cells |
||||
- `slot: true` per column |
||||
- Parent slot content rendering via `renderSlot` |
||||
|
||||
### Section 10: Combined Features Test |
||||
- All features working together |
||||
- Edge case: custom renderer + fixed columns |
||||
- Edge case: custom renderer + pagination |
||||
- Edge case: custom renderer + dynamic height probe |
||||
|
||||
## Architecture |
||||
|
||||
### File Structure |
||||
``` |
||||
examples/view/base/table-v2.vue # Main demo page |
||||
``` |
||||
|
||||
### Demo Organization Strategy |
||||
Use a tabbed or sectioned layout within a single page: |
||||
- Left sidebar with section navigation |
||||
- Main content area with active demo |
||||
- Each section is self-contained |
||||
|
||||
### Data Strategy |
||||
- Generate realistic mock data (100 rows) |
||||
- Each demo section can override columns/data as needed |
||||
- Shared data generator utility within the file |
||||
|
||||
### Test/Validation Strategy |
||||
Each demo section includes: |
||||
1. Visual demo of the feature |
||||
2. `debug` prop enabled to show internal state |
||||
3. Event handlers that log to console AND display on-page |
||||
4. Explicit "Test" buttons to trigger edge cases |
||||
5. Pass/fail indicators where possible (e.g., "Did resize observer fire?") |
||||
|
||||
## Technical Notes |
||||
|
||||
### Dependencies |
||||
- `lorem-ipsum` (already used for data generation) |
||||
- `element-plus` components used: `el-tabs`, `el-tab-pane`, `el-link`, `el-tag`, `el-button` |
||||
- `noob-mengyxu` components: `ListTableV2`, `SearchRow`, `NoobInput`, `NoobSelect` |
||||
|
||||
### Constraints |
||||
- Must work with existing `ListTableV2` API (no code changes to the component) |
||||
- Must build successfully with `bun run build` |
||||
- Demo page should be readable and navigable |
||||
|
||||
## Acceptance Criteria |
||||
|
||||
- [ ] Page loads with 10+ demo sections |
||||
- [ ] Each feature of list-table-v2 is demonstrated |
||||
- [ ] Custom `cellRenderer` works and syncs with mini-table probe |
||||
- [ ] Custom `headerCellRenderer` works and syncs with mini-table probe |
||||
- [ ] Dynamic height auto-probe works correctly |
||||
- [ ] Fixed columns work correctly |
||||
- [ ] Pagination works correctly |
||||
- [ ] All formatting features work (timestamp, dict, filesize) |
||||
- [ ] Page builds without errors |
||||
- [ ] Console has no errors during demo interaction |
||||
@ -0,0 +1,44 @@
@@ -0,0 +1,44 @@
|
||||
{ |
||||
"id": "table-v2-demo", |
||||
"name": "table-v2-demo", |
||||
"title": "Rework table-v2.vue into comprehensive demo page", |
||||
"description": "", |
||||
"status": "completed", |
||||
"dev_type": null, |
||||
"scope": null, |
||||
"priority": "P2", |
||||
"creator": "hechang27-sprt", |
||||
"assignee": "hechang27-sprt", |
||||
"createdAt": "2026-03-28", |
||||
"completedAt": "2026-03-30", |
||||
"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