docs: [anchor] Add offsetTop API documentation and optimize example documentation #3298
Conversation
WalkthroughThe changes introduce a new Changes
Sequence Diagram(s)sequenceDiagram
participant U as User
participant A as TinyAnchor Component
participant B as Browser
U->>A: Click "顶部偏移量" link
A->>A: Read offset-top prop (500)
A->>B: Calculate and adjust scroll position by offset-top
B-->>A: Update URL hash to "#offset-top"
A-->>U: Render updated view
Poem
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
examples/sites/demos/pc/app/anchor/basic-usage-composition-api.vueOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. examples/sites/demos/apis/anchor.jsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team. examples/sites/demos/pc/app/anchor/basic-usage.spec.tsOops! Something went wrong! :( ESLint: 8.57.1 ESLint couldn't find the plugin "eslint-plugin-vue". (The package "eslint-plugin-vue" was not found when loaded as a Node module from the directory "".) It's likely that the plugin isn't installed correctly. Try reinstalling by running the following: The plugin "eslint-plugin-vue" was referenced from the config file in ".eslintrc.js » @antfu/eslint-config » @antfu/eslint-config-vue". If you still can't figure out the problem, please stop by https://eslint.org/chat/help to chat with the team.
Tip ⚡💬 Agentic Chat (Pro Plan, General Availability)
✨ Finishing Touches
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. 🪧 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 (
|
Walkthrough此PR为Anchor组件增加了 Changes
|
![petercat-assistant[bot]](https://avatars.githubusercontent.com/in/875736?s=60&v=4){kind=small}
|
|
||
| await expect(hash2).not.toEqual(hash1) | ||
| await expect(hash2).toContain('#demonstrate') | ||
| await expect(hash2).toEqual(hash1) |
There was a problem hiding this comment.
The test expectation has been changed from not.toEqual to toEqual, which might affect the test logic. Please ensure this change is intentional and aligns with the desired test behavior.
WalkthroughThis PR adds the Changes
|
chenxi-20
changed the title
![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
🧹 Nitpick comments (3)
examples/sites/demos/pc/app/anchor/offset-top.vue (1)
1-44: New demo for offset-top functionality created using Options API.This new component demonstrates the offsetTop property with a value of 500, showing how to adjust the scroll position of the anchor component.
However, I noticed that the property is camelCased as
:offsetTop="500"while in other files it's kebab-cased as:offset-top="500". While both may work due to Vue's automatic case conversion, it's best to keep naming conventions consistent across all demo files.- <tiny-anchor :links="links" :offsetTop="500"></tiny-anchor> + <tiny-anchor :links="links" :offset-top="500"></tiny-anchor>examples/sites/demos/pc/app/anchor/webdoc/anchor.js (1)
149-162: Appropriate feature documentation for offset-topThe feature documentation for offset-top is complete and consistent with the other feature entries. It correctly:
- Specifies the feature ID and name
- Sets the support value to true
- Provides a clear description
- Links to the relevant API and demo
Note: The comment on line 149 ("// 在features数组中添加新的特性说明") could be removed as it's not necessary in the final code.
- // 在features数组中添加新的特性说明 { id: 'offset-top',examples/sites/demos/apis/anchor.js (1)
59-73: Well-documented API property for offset-topThe API documentation for the offset-top property is thorough and follows the same structure as other properties. It correctly:
- Defines the property name, type, and default value
- Provides clear descriptions in both Chinese and English explaining the property's purpose
- Includes metadata about the stable version (3.19.0)
- Specifies the applicable mode (pc)
- Links to the corresponding demo
The comment on line 59 ("// 添加offset-top属性文档") could be removed as it's not necessary in the final code.
- // 添加offset-top属性文档 { name: 'offset-top',
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (12)
examples/sites/demos/apis/anchor.js(1 hunks)examples/sites/demos/pc/app/anchor/basic-usage-composition-api.vue(1 hunks)examples/sites/demos/pc/app/anchor/basic-usage.spec.ts(1 hunks)examples/sites/demos/pc/app/anchor/basic-usage.vue(1 hunks)examples/sites/demos/pc/app/anchor/change-composition-api.vue(1 hunks)examples/sites/demos/pc/app/anchor/change.vue(1 hunks)examples/sites/demos/pc/app/anchor/is-affix-composition-api.vue(1 hunks)examples/sites/demos/pc/app/anchor/is-affix.vue(1 hunks)examples/sites/demos/pc/app/anchor/offset-top-composition-api.vue(1 hunks)examples/sites/demos/pc/app/anchor/offset-top.spec.ts(1 hunks)examples/sites/demos/pc/app/anchor/offset-top.vue(1 hunks)examples/sites/demos/pc/app/anchor/webdoc/anchor.js(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: PR E2E Test (pnpm test:e2e3)
🔇 Additional comments (11)
examples/sites/demos/pc/app/anchor/basic-usage-composition-api.vue (1)
13-38: Link structure improved and new offset-top functionality added.The links array has been restructured for better organization and now includes a new entry for the 'offset-top' functionality. This change aligns with the PR objectives to enhance the documentation for the offsetTop API.
examples/sites/demos/pc/app/anchor/offset-top-composition-api.vue (1)
1-36: New demo for offset-top functionality created using Composition API.This component correctly demonstrates the offset-top property using Composition API. The property is properly kebab-cased as
:offset-top="500", which aligns with Vue's recommended property naming convention for templates.examples/sites/demos/pc/app/anchor/change-composition-api.vue (1)
9-35: Link structure improved and offset-top entry added.The links array has been restructured for better organization, removing the nested structure and adding the new 'offset-top' entry. This change is consistent with the modifications made in other files and improves the overall documentation structure.
examples/sites/demos/pc/app/anchor/change.vue (1)
15-39: Good restructuring of links arrayThe changes you've made to the
linksarray are good. You've successfully flattened the structure, making it more straightforward, and added the newoffset-topentry. This restructuring makes the navigation data easier to understand and aligns with the changes in other anchor-related files.examples/sites/demos/pc/app/anchor/offset-top.spec.ts (1)
1-19: Well-structured test for the offset-top featureThe test for the new offset-top feature is well-structured and comprehensive. It correctly:
- Sets up error handling to catch any unexpected exceptions
- Navigates to the specific anchor page
- Tests interaction with different links
- Verifies that the hash changes appropriately
The test effectively validates that the new offset-top functionality works as expected.
examples/sites/demos/pc/app/anchor/webdoc/anchor.js (1)
45-56: Good documentation for the offset-top demoThe demo documentation for the offset-top feature is well-structured and provides clear descriptions in both Chinese and English. The description appropriately explains how to use the
offset-topproperty to set the offset from the top of the anchor.examples/sites/demos/pc/app/anchor/basic-usage.spec.ts (2)
8-8: Updated link name matches the new navigation structure.The link name has been changed from '演示' to '基本用法' to align with the flattened navigation structure where the first link now directly represents the basic usage example.
15-16: Test expectations updated correctly to match new navigation behavior.The test expectations have been properly updated to reflect the new navigation structure:
- Now expecting hash2 to equal hash1 since clicking the same page link shouldn't change the hash
- Hash expectation has been updated from '#demonstrate' to '#basic-usage' to match the new link structure
These changes align well with the updated navigation design where we're now directly on the basic-usage page.
examples/sites/demos/pc/app/anchor/is-affix-composition-api.vue (1)
17-41: Navigation structure improved with flattened links array and new offset-top option.The links array has been restructured by:
- Removing the nested 'demonstrate' parent object with its children array
- Flattening the navigation structure with direct entries
- Adding a new entry for 'offset-top' to showcase the new functionality
This is a positive change that simplifies the code structure while adding the new feature documentation.
examples/sites/demos/pc/app/anchor/is-affix.vue (1)
23-47: Navigation structure improved with flattened links array and new offset-top option.The links array has been restructured by:
- Removing the nested 'demonstrate' parent object with its children array
- Flattening the navigation structure with direct entries
- Adding a new entry for 'offset-top' to showcase the new functionality
This simplification makes the code more maintainable while adding documentation for the new feature.
examples/sites/demos/pc/app/anchor/basic-usage.vue (1)
22-46: Navigation structure improved with flattened links array and new offset-top option.The links array has been restructured by:
- Removing the nested 'demonstrate' parent object with its children array
- Flattening the navigation structure with direct entries
- Adding a new entry for 'offset-top' to showcase the new functionality
This change simplifies the code structure and consistently adds the new offset-top feature documentation across all anchor examples.
chenxi-20
changed the title
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
Refactor
Tests