diff --git a/.trellis/tasks/archive/2026-03/03-28-table-v2-demo/prd.md b/.trellis/tasks/archive/2026-03/03-28-table-v2-demo/prd.md new file mode 100644 index 0000000..ecca79b --- /dev/null +++ b/.trellis/tasks/archive/2026-03/03-28-table-v2-demo/prd.md @@ -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 diff --git a/.trellis/tasks/archive/2026-03/03-28-table-v2-demo/task.json b/.trellis/tasks/archive/2026-03/03-28-table-v2-demo/task.json new file mode 100644 index 0000000..7fd6458 --- /dev/null +++ b/.trellis/tasks/archive/2026-03/03-28-table-v2-demo/task.json @@ -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": {} +} \ No newline at end of file