feat: timeline #9
Conversation
WalkthroughAdds a Timeline Vue 3 component and TimelineItem with props, styles, tests, and docs; registers both as a plugin export. Also augments the shared useNamespace hook with a new is(name) helper that returns "is-". Changes
Sequence Diagram(s)sequenceDiagram
participant App as Vue App
participant Plugin as Timeline Plugin
participant Timeline as CTimeline
participant Item as CTimelineItem
participant NS as useNamespace
App->>Plugin: install(app)
Plugin->>App: app.component('CTimeline'), app.component('CTimelineItem')
App->>Timeline: render (slot content includes TimelineItem)
Timeline->>NS: useNamespace('timeline')
Timeline->>Timeline: render <ul> wrapper with slot children
Item->>NS: useNamespace('timeline') for class helpers
Item->>Item: compute classes, node, timestamp based on props/slots
Item-->>Timeline: rendered <li> element
Timeline-->>App: rendered <ul> with children
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~30 minutes
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 inconclusive)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (3)
🚧 Files skipped from review as they are similar to previous changes (1)
🧰 Additional context used🧬 Code graph analysis (1)packages/ccui/ui/timeline/src/timeline.tsx (2)
🔇 Additional comments (6)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (4)
packages/ccui/ui/timeline/src/timeline.tsx (1)
17-18: Consider whether the provide() call is needed.The code provides the Timeline's slots to child components via
TIMELINE_INJECTION_KEY, but the TimelineItem component doesn't appear to inject or use this data. If this is for future extensibility, consider adding a comment explaining the intent. Otherwise, this line could be removed.packages/ccui/ui/timeline/test/timeline.test.ts (2)
12-23: Consider verifying item rendering in this test.The test renders TimelineItem components via slots but only asserts that the container is a UL element. Consider adding assertions to verify that the items were actually rendered (e.g., checking for
.ccui-timeline-itemelements).
26-141: Good prop coverage, but consider adding tests for icon and dot slot.The existing tests cover most TimelineItem props well. However, tests for the
iconprop (both string and Component variants) and the customdotslot are missing. These are important features mentioned in the documentation.Consider adding tests like:
it('should render with string icon', () => { const wrapper = mount(TimelineItem, { props: { icon: 'icon-class-name', }, }) expect(wrapper.find('.ccui-timeline-item__icon').exists()).toBe(true) }) it('should render with custom dot slot', () => { const wrapper = mount(TimelineItem, { slots: { dot: '<div class="custom-dot">Custom</div>', }, }) expect(wrapper.find('.ccui-timeline-item__dot').exists()).toBe(true) expect(wrapper.find('.custom-dot').exists()).toBe(true) })packages/ccui/ui/timeline/index.ts (1)
16-24: Refactor to eliminate code duplication.The install method in the default export (lines 21-22) duplicates the logic from Timeline.install (lines 6-7). This violates the DRY principle and makes maintenance more difficult.
Apply this diff to reuse Timeline.install:
export default { title: 'Timeline 时间线', category: '数据展示', status: '100%', install(app: App): void { - app.component(Timeline.name || 'CTimeline', Timeline) - app.component(TimelineItem.name || 'CTimelineItem', TimelineItem) + Timeline.install(app) }, }
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (9)
packages/ccui/ui/shared/hooks/use-namespace.ts(2 hunks)packages/ccui/ui/timeline/index.ts(1 hunks)packages/ccui/ui/timeline/src/timeline-item.tsx(1 hunks)packages/ccui/ui/timeline/src/timeline-types.ts(1 hunks)packages/ccui/ui/timeline/src/timeline.scss(1 hunks)packages/ccui/ui/timeline/src/timeline.tsx(1 hunks)packages/ccui/ui/timeline/test/timeline.test.ts(1 hunks)packages/docs/components/divider/index.md(1 hunks)packages/docs/components/timeline/index.md(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (3)
packages/ccui/ui/timeline/test/timeline.test.ts (1)
packages/ccui/ui/timeline/index.ts (2)
Timeline(14-14)TimelineItem(14-14)
packages/ccui/ui/timeline/src/timeline.tsx (2)
packages/ccui/ui/timeline/src/timeline-types.ts (2)
timelineProps(4-6)TimelineProps(8-8)packages/ccui/ui/shared/hooks/use-namespace.ts (1)
useNamespace(31-47)
packages/ccui/ui/timeline/src/timeline-item.tsx (2)
packages/ccui/ui/timeline/src/timeline-types.ts (2)
timelineItemProps(13-79)TimelineItemProps(81-81)packages/ccui/ui/shared/hooks/use-namespace.ts (1)
useNamespace(31-47)
🔇 Additional comments (25)
packages/docs/components/divider/index.md (1)
85-85: LGTM! Anchor link case correction.The anchor reference has been corrected to lowercase, which is standard for HTML anchors in Markdown documentation.
packages/ccui/ui/shared/hooks/use-namespace.ts (1)
6-6: LGTM! Useful semantic helper for state classes.The new
is()helper follows the existing BEM naming pattern and provides a clean way to generate semantic state classes (e.g.,is-hollow,is-top). The implementation is straightforward and consistent with the existing API.Also applies to: 39-39, 45-45
packages/ccui/ui/timeline/src/timeline-item.tsx (5)
14-21: LGTM! Clean class composition.The computed property correctly builds the node's CSS classes using BEM naming conventions, with appropriate conditional logic for optional modifiers.
32-43: LGTM! Flexible icon rendering.Correctly handles both string-based icon classes and Vue component icons, with appropriate use of the
h()render function for component icons.
46-63: LGTM! Well-structured node rendering.The rendering logic correctly prioritizes the custom
dotslot over the default node, and properly applies custom colors via inline styles when provided.
66-75: LGTM! Clean timestamp rendering.The timestamp rendering logic is straightforward and correctly respects the
hideTimestampprop with appropriate early return.
77-101: LGTM! Well-structured timeline item.The render function creates a proper timeline item structure with tail, node, and content wrapper. The conditional timestamp placement logic correctly handles both
topandbottompositions.packages/ccui/ui/timeline/src/timeline.scss (5)
3-14: LGTM! Standard timeline container styling.The base styles properly reset list defaults and correctly hide the tail line on the last timeline item for a clean appearance.
16-57: LGTM! Thoughtful center alignment implementation.The center alignment styling uses flexbox and transforms effectively, with appropriate special cases for first and last items to ensure the connecting line appears correctly at boundaries.
60-95: LGTM! Solid timeline item foundation.The base item structure with relative/absolute positioning and the tail implementation using
border-leftfor the connecting line are standard and effective approaches.
97-155: LGTM! Comprehensive node styling system.The node variants cover all the required states with appropriate sizing, hollow styling, and type-based colors. The positioning adjustments for different sizes ensure proper alignment with the tail line.
157-187: LGTM! Complete styling coverage.The custom dot, content, and timestamp styles provide full flexibility for timeline item customization, with appropriate placement-specific margins for timestamps.
packages/ccui/ui/timeline/src/timeline.tsx (1)
10-28: LGTM! Clean container component.The Timeline component provides a simple, well-structured container with proper namespace-based styling. The render logic is straightforward and appropriate for a container component.
packages/ccui/ui/timeline/src/timeline-types.ts (3)
4-10: LGTM! Well-defined type foundation.The empty
timelinePropswith explanatory comment and theTimelineItemTypeunion (including empty string for the default case) are appropriate.
13-42: LGTM! Well-documented and validated props.The timestamp, hideTimestamp, center, and placement props have clear documentation, appropriate types, sensible defaults, and proper validation for the placement prop.
43-81: LGTM! Complete prop definitions.The remaining props (type, color, size, icon, hollow) are properly typed with appropriate validators that match the type constraints. The icon prop correctly supports both string and Component types for flexibility.
packages/docs/components/timeline/index.md (6)
1-47: LGTM! Clear introduction and basic usage.The introduction and basic usage example provide a clear starting point for understanding the Timeline component.
49-89: LGTM! Comprehensive styling examples.The custom node styling demo effectively showcases the various ways to customize timeline nodes (type, color, size, hollow).
91-137: LGTM! Practical timestamp placement example.The custom timestamp demo with placement="top" clearly illustrates when and how to position timestamps above content.
139-179: LGTM! Clear center alignment demo.The vertical center example effectively demonstrates the center prop functionality.
181-220: LGTM! Helpful custom node example.The custom node demo using the dot slot provides a practical example of how to fully customize the timeline node appearance.
230-242: LGTM! Accurate API documentation.The Timeline-Item Props table accurately reflects all the props defined in the implementation, with correct types, options, and defaults.
packages/ccui/ui/timeline/index.ts (3)
1-3: LGTM!The imports are clean and follow standard Vue plugin patterns.
10-12: LGTM!The TimelineItem.install method correctly registers only the TimelineItem component, allowing for standalone usage.
5-8: Code is correct—no action needed.Both Timeline and TimelineItem components have their
nameproperty properly defined ('CTimeline' and 'CTimelineItem' respectively). The fallback names in the install method are defensive programming; they won't be used since the component names are already set.
feat: 新增 Timeline 时间线组件
功能特性
✨ 新增组件
Timeline时间线容器组件TimelineItem时间线项目组件🎨 样式特性
primary、success、warning、danger、infonormal、large）hollow）top、bottom）🌙 主题支持
📚 完整文档
🧪 测试覆盖
技术实现
default、dot）文件变更
Summary by CodeRabbit
New Features
Documentation
Tests