fix(steps): [steps] Added the visibleNum prop. #2542
Conversation
chenxi-20
added
documentation
WalkthroughThe changes in this pull request focus on enhancing the Changes
Possibly related PRs
Suggested reviewers
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
github-actions
bot
added
bug
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (4)
examples/sites/demos/pc/app/steps/line-horizontal-composition-api.vue (1)
24-26: Consider improving node naming and documentation.While the added nodes effectively demonstrate the
visible-numfunctionality:
- Multiple nodes named 'BBQ Info' could be confusing for maintenance
- The purpose of these demonstration nodes could be better documented
Consider applying these improvements:
- { name: 'BBQ Info', description: '默认无状态' }, - { name: '隐藏的节点1', description: '我是隐藏的' }, - { name: '隐藏的节点2', description: '我也是隐藏的' } + { name: 'BBQ Info (Default)', description: '默认无状态' }, + // These nodes demonstrate overflow behavior with visible-num=5 + { name: 'Hidden Node 1', description: 'Demonstrates overflow behavior' }, + { name: 'Hidden Node 2', description: 'Demonstrates overflow behavior' }examples/sites/demos/pc/app/steps/line-horizontal.vue (2)
4-4: LGTM! Consider adding a comment to explain the visible-num prop.The implementation correctly demonstrates the visible-num functionality. However, it would be helpful to add a comment explaining that only 5 steps will be visible while 2 are hidden, making the demo more self-documenting.
- <tiny-steps line :data="data1" :visible-num="5" :active="active" @click="advancedClick"></tiny-steps> + <!-- Only shows first 5 steps, hiding the last 2 nodes --> + <tiny-steps line :data="data1" :visible-num="5" :active="active" @click="advancedClick"></tiny-steps>
29-31: Consider using consistent language in node names.While the data structure is correct, the node names mix English and Chinese languages. Consider using consistent naming across all nodes for better maintainability.
- { name: 'BBQ Info', description: '默认无状态' }, - { name: '隐藏的节点1', description: '我是隐藏的' }, - { name: '隐藏的节点2', description: '我也是隐藏的' } + { name: 'BBQ Info', description: 'Default Status' }, + { name: 'Hidden Node 1', description: 'I am hidden' }, + { name: 'Hidden Node 2', description: 'I am also hidden' }examples/sites/demos/pc/app/steps/webdoc/steps.js (1)
14-15: Fix grammar and punctuation in English descriptionThe English description has grammar and punctuation issues:
- "Control" should be lowercase "control"
- Missing comma between clauses
Apply this fix:
- '<p>Use the <code>line</code> property to create a horizontal chain steps, <code>visible-num</code>Control the number of nodes where information is visible.</p>' + '<p>Use the <code>line</code> property to create a horizontal chain steps, <code>visible-num</code> controls the number of nodes where information is visible.</p>'
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (4)
examples/sites/demos/apis/steps.js(1 hunks)examples/sites/demos/pc/app/steps/line-horizontal-composition-api.vue(2 hunks)examples/sites/demos/pc/app/steps/line-horizontal.vue(2 hunks)examples/sites/demos/pc/app/steps/webdoc/steps.js(1 hunks)
🔇 Additional comments (3)
examples/sites/demos/pc/app/steps/line-horizontal-composition-api.vue (1)
4-4: LGTM! Consider adding visible-num to second instance.
The addition of :visible-num="5" prop is implemented correctly. However, I notice that the second tiny-steps instance below doesn't have this prop. Is this intentional?
Let's verify if the second instance should also have this prop by checking other demo files:
examples/sites/demos/pc/app/steps/line-horizontal.vue (1)
4-4: Verify the visible-num prop implementation.
Let's ensure the prop is properly defined in the component and documented.
Also applies to: 30-31
✅ Verification successful
The previous script had an issue with file type recognition. Let's try a broader search to locate the component definition and the prop usage. This will help us verify if the prop is properly implemented.
The previous results show the prop is used in multiple places and appears in documentation. Let's verify its proper definition in the component and check the complete API documentation.
The visible-num prop is properly implemented and documented
The prop is well-defined in the API documentation with:
- Type: Number
- Default value: 5
- Clear description in both Chinese and English
- Supported in both PC and mobile-first modes
- Demo references: 'line-horizontal' (PC) and 'vertical' (mobile-first)
The usage in the code matches the documented specification.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify visible-num prop implementation and documentation
# Check for prop definition in component
echo "Checking for prop definition..."
rg -l "visible-?num" --type vue --type js
# Check for documentation
echo "Checking for documentation..."
rg -l "visible-?num.*prop" --type md
Length of output: 252
Script:
#!/bin/bash
# Search for visible-num prop definition and usage
echo "Searching for visible-num prop..."
rg "visible-?num"
# Search for Steps component definition
echo "Searching for Steps component definition..."
fd -e vue -e js "steps" -I
Length of output: 2330
Script:
#!/bin/bash
# Check the API documentation for visible-num prop definition
echo "Checking API documentation..."
cat examples/sites/demos/apis/steps.js
# Check the Steps component implementation
echo "Looking for Steps component prop definitions..."
rg "props.*visible" -A 5 examples/sites/demos/mobile/app/timeline/steps.vue examples/sites/demos/mobile-first/app/steps/advanced-steps.vue examples/sites/demos/pc/app/steps/advanced-steps.vue
Length of output: 8258
examples/sites/demos/apis/steps.js (1)
190-194: LGTM! Property documentation is clear and complete.
The visible-num property is well documented with:
- Clear descriptions in both languages
- Correct type specification
- Default value
- Mode support for both 'mobile-first' and 'pc'
Let's verify the referenced demos exist:
✅ Verification successful
Demo references are correctly implemented and demonstrate the visible-num property
Both referenced demos properly implement and showcase the visible-num property:
- PC demo (line-horizontal.vue) uses
:visible-num="5"with 7 total nodes - Mobile demo (vertical.vue) uses
:visible-num="4"with 5 total nodes
The property documentation accurately reflects its implementation in both mobile-first and PC modes.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash
# Description: Verify the existence of the referenced demos for visible-num property
# Check for line-horizontal demo in PC mode
echo "Checking PC demo (line-horizontal)..."
fd -t f "line-horizontal.vue" "examples/sites/demos/pc"
# Check for vertical demo in mobile-first mode
echo "Checking mobile-first demo (vertical)..."
fd -t f "vertical.vue" "examples/sites/demos/mobile-first"
Length of output: 519
Script:
#!/bin/bash
# Let's verify the content of these demos to ensure they properly demonstrate the visible-num property
# Check PC demo content
echo "=== PC Demo (line-horizontal) Content ==="
cat "examples/sites/demos/pc/app/steps/line-horizontal.vue"
# Check Mobile demo content
echo -e "\n=== Mobile Demo (vertical) Content ==="
cat "examples/sites/demos/mobile-first/app/steps/vertical.vue"
Length of output: 3018
PR
PR Checklist
Please check if your PR fulfills the following requirements:
PR Type
What kind of change does this PR introduce?
What is the current behavior?
Issue Number: N/A
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit
New Features
visible-numproperty for the steps component, now supporting both mobile and PC modes.Documentation
visible-numproperty and demo items to clarify functionality and usage.