feat(popconfirm): [popconfirm] enable message slot #3176
Conversation
WalkthroughThe pull request updates the popconfirm component by revising its slot API. The existing footer slot’s description is corrected, and a new message slot is introduced with multi-language documentation and support for both 'pc' and 'mobile-first' modes. Additionally, new demo components, tests, and web documentation entries have been added to showcase the custom message slot usage. The core popconfirm component is updated to render message content via a named slot with a fallback to the default message value. Changes
Possibly related PRs
Suggested reviewers
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/apis/popconfirm.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/popconfirm/slot-message-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/pc/app/popconfirm/slot-message.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)
📜 Recent review detailsConfiguration used: CodeRabbit UI 📒 Files selected for processing (5)
🚧 Files skipped from review as they are similar to previous changes (5)
🪧 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 (
|
WalkthroughThis pull request introduces a new feature to the Changes
|
| @@ -0,0 +1,22 @@ | |||
| <template> | |||
| <div> | |||
| <tiny-popconfirm :title="title" :message="message" ref="popconfirmRef"> | |||
There was a problem hiding this comment.
Ensure that the message prop is correctly passed and utilized within the tiny-popconfirm component to avoid potential rendering issues.
| @@ -0,0 +1,30 @@ | |||
| <template> | |||
| <div> | |||
| <tiny-popconfirm :title="title" :message="message" ref="popconfirm"> | |||
There was a problem hiding this comment.
Ensure that the message prop is correctly passed and utilized within the tiny-popconfirm component to avoid potential rendering issues.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
examples/sites/demos/pc/app/popconfirm/slot-message-composition-api.vue (1)
14-22: Composition API implementation looks good.The script setup implements all necessary variables as reactive refs and imports the required components. Note that
popconfirmRefis defined but not used in the current implementation - this is fine if it's intended for future use or demonstration purposes.Consider adding comments to explain the purpose of
popconfirmRefif it's intended for future functionality.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
examples/sites/demos/apis/popconfirm.js(1 hunks)examples/sites/demos/pc/app/popconfirm/slot-message-composition-api.vue(1 hunks)examples/sites/demos/pc/app/popconfirm/slot-message.spec.ts(1 hunks)examples/sites/demos/pc/app/popconfirm/slot-message.vue(1 hunks)examples/sites/demos/pc/app/popconfirm/webdoc/popconfirm.js(1 hunks)packages/vue/src/popconfirm/src/pc.vue(1 hunks)
🔇 Additional comments (8)
examples/sites/demos/pc/app/popconfirm/slot-message.vue (2)
1-12: Looks good, demonstrates the new message slot effectively.The template structure clearly shows how to use the message slot to customize the content of a popconfirm component. The implementation uses proper slot naming conventions and demonstrates the feature with a clear example.
14-30: Component implementation is clean and properly structured.The script section correctly imports the necessary components, registers them, and provides the data properties needed for the demo. The custom message text is properly defined as a separate data property.
examples/sites/demos/pc/app/popconfirm/slot-message.spec.ts (1)
1-11: Test case effectively validates the custom message slot.The test appropriately navigates to the demo page, locates the popconfirm component, and verifies that it contains the expected custom message text. The implementation follows Playwright testing best practices with proper locator usage and expectations.
examples/sites/demos/pc/app/popconfirm/webdoc/popconfirm.js (1)
81-92: Documentation for the new message slot is well-structured.The added demo entry follows the existing pattern and includes proper localization for both names and descriptions. The documentation clearly explains the purpose of the message slot and references the appropriate demo file.
packages/vue/src/popconfirm/src/pc.vue (1)
30-32: Great implementation of the message slot with proper fallback.The change effectively introduces a named slot for customizing the message content while maintaining backward compatibility by using the original message prop as a fallback. This pattern follows Vue.js best practices for slot implementation.
examples/sites/demos/pc/app/popconfirm/slot-message-composition-api.vue (1)
1-12: Well-structured template for demonstrating the message slot.The template correctly showcases the usage of the new message slot feature in the popconfirm component, with proper reference slot implementation for the trigger button.
examples/sites/demos/apis/popconfirm.js (2)
165-165: Improved description accuracy.The English description for the footer slot has been updated from "default slot" to "footer slot", which more accurately reflects its purpose.
171-182: New message slot properly documented.The new message slot has been correctly added to the API documentation with appropriate descriptions in both Chinese and English. The slot is configured to work in both PC and mobile-first modes, and links to the correct demo example.
4bd911a to
4b9e892
Compare
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: #3129
What is the new behavior?
Does this PR introduce a breaking change?
Other information
Summary by CodeRabbit