feat: add useAlertContext for Alert component

[mynetfan]

• 新增Alert的子组件中获取弹窗上下文的能力

close: #5946

Summary by CodeRabbit

• New Features
  • Enhanced alert interactions with context-aware confirmation and cancellation actions.
  • Improved prompt behavior for smoother and more intuitive user input.
• Documentation
  • Expanded guidance on using alert components, including instructions for leveraging custom content areas.
  • Added clear notes on live-update limitations when alerts are open.
• Refactor
  • Streamlined content rendering to deliver a cleaner and more consistent display.

[changeset-bot]

⚠️ No Changeset found

Latest commit: dd96099

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

Walkthrough

This set of changes enhances the Alert component by adding a new context mechanism that injects confirm and cancel methods. Documentation is updated to describe the new useAlertContext hook and its methods, and the prompt demo now uses this hook to trigger confirmation (e.g., on Enter key press). Additionally, the internal handling of static content in prompts and content rendering for line breaks are simplified, and module exports are updated to be more explicit.

Changes

Files	Change Summary
docs/src/.../vben-alert.md docs/src/.../prompt/index.vue	Updated documentation: added a new useAlertContext section with method details (doConfirm, doCancel) and enhanced the prompt demo to use the hook for handling confirmation actions.
packages/@core/ui-kit/.../alert/AlertBuilder.ts	Simplified static content handling in the prompt by directly using VbenRenderContent with the appropriate props.
packages/@core/ui-kit/.../alert/alert.ts	Introduced a new AlertContext type and useAlertContext function; created alert context using createContext for managing alert actions.
packages/@core/ui-kit/.../alert/alert.vue	Implemented new doCancel and doConfirm functions in the Alert component, provided via context; minor style adjustment in the description section.
packages/@core/ui-kit/.../alert/index.ts	Refactored exports: removed wildcard export in favor of explicit type exports and added export of useAlertContext.
packages/@core/ui-kit/.../render-content.vue	Updated content rendering: replaced a traditional for loop with a for‑of loop and switched from <span> to <p> elements for each line, with conditional <br> logic commented out.

Sequence Diagram(s)

sequenceDiagram
    participant U as User
    participant IC as Input Component
    participant AC as Alert Context
    participant A as Alert Component

    U->>IC: Presses Enter key
    IC->>AC: Retrieves alert context via useAlertContext()
    AC->>A: Calls doConfirm() method
    A-->>AC: Emits 'confirm' event and closes alert

Loading

Assessment against linked issues

Objective	Addressed	Explanation
Provide injectable confirm and cancel methods (#5946)	✅
Enable prompt to support Enter key confirmation via injected callbacks (#5946)	✅

Possibly related PRs

• fix: improve prompt component #5879: Enhancements to the alert context and methods for handling confirmation actions are closely related.
• docs: docs modal z-index fixed, update alert docs #5930: Documentation updates for the useAlertContext hook and its methods align with these changes.
• feat: alert support customize footer #5940: Modifications to the Alert component, including added methods and properties, complement the current updates.

Suggested reviewers

• anncwb
• jinmao88
• vince292007

Poem

I'm a little rabbit, hopping on the code trail,
With alert context and clear prompts that never fail.
I cheer for doConfirm as I nibble my carrot 🥕,
And doCancel keeps things calm without a quarrel.
Coding in rhythm, my whiskers dance in delight!
Hop on, fellow coders—our alerts now shine bright!

✨ Finishing Touches

• 📝 Generate Docstrings

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

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)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai plan to trigger planning for file edits and PR creation.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue (1)

34-38: Improved content rendering with paragraph elements

This change improves how multiline content is rendered by using paragraph elements instead of spans. The code is also more modern, using a for-of loop with entries(). The commented out BR tags suggest a deliberate change in the spacing model.

Consider removing the commented code entirely rather than leaving it commented out, as it's cleaner and the git history will preserve the previous implementation if needed.

 for (const [i, line] of lines.entries()) {
   result.push(h('p', { key: i }, line));
-  // if (i < lines.length - 1) {
-  //   result.push(h('br'));
-  // }
 }

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9700150 and dd96099.

📒 Files selected for processing (7)

• docs/src/components/common-ui/vben-alert.md (2 hunks)
• docs/src/demos/vben-alert/prompt/index.vue (2 hunks)
• packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts (2 hunks)
• packages/@core/ui-kit/popup-ui/src/alert/alert.ts (2 hunks)
• packages/@core/ui-kit/popup-ui/src/alert/alert.vue (3 hunks)
• packages/@core/ui-kit/popup-ui/src/alert/index.ts (1 hunks)
• packages/@core/ui-kit/shadcn-ui/src/components/render-content/render-content.vue (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (5)

• GitHub Check: post-update (ubuntu-latest)
• GitHub Check: post-update (windows-latest)
• GitHub Check: Check (windows-latest)
• GitHub Check: Lint (windows-latest)
• GitHub Check: Test (windows-latest)

🔇 Additional comments (15)

packages/@core/ui-kit/popup-ui/src/alert/AlertBuilder.ts (1)

10-10: Improved content rendering implementation

The changes here streamline how content is rendered in the vbenPrompt function by utilizing the VbenRenderContent component with the renderBr property. This creates a more consistent approach to handling content rendering and simplifies the code.

Also applies to: 149-149

packages/@core/ui-kit/popup-ui/src/alert/index.ts (1)

1-7: Better export pattern implementation

This change replaces what was likely a wildcard export with explicit named exports, which is a better practice. It clearly defines the public API and makes it easier for consumers to understand what's available from this module. Adding the export of useAlertContext is essential for the new functionality being introduced.

packages/@core/ui-kit/popup-ui/src/alert/alert.vue (3)

31-32: Added import for context provider

Importing the provideAlertContext function is necessary for the new context functionality being introduced.

---

93-107: Added alert context with confirm/cancel methods

These changes implement the core functionality described in the PR objectives - allowing child components to access the alert context. The doCancel and doConfirm functions provide a clean API for triggering alert actions from child components.

This is a valuable enhancement that improves component composability and flexibility.

---

174-175: Removed margin class from content container

Removing the mb-6 class changes the spacing in the alert dialog. This might be intentional to improve the layout when using the new context functionality.

Verify that this styling change doesn't adversely affect the appearance of alerts in various scenarios.

docs/src/demos/vben-alert/prompt/index.vue (3)

4-4: Added useAlertContext import

The import adds the new alert context hook which allows child components to interact with the containing Alert component.

---

23-45: Enhanced implementation with alert context

The refactored implementation is well structured and demonstrates the new useAlertContext feature effectively. The functional component approach allows for retrieving the alert context and implementing the Enter key handler for form submission, which improves user experience.

Good practices demonstrated:

• Retrieving context with proper comments explaining usage limitations
• Using Vue's h function for clean functional component creation
• Adding keyboard accessibility with Enter key support
• Structuring the input with meaningful prefix and styling

---

46-46: Updated content description

The content description now clearly explains the purpose of the dialog and mentions the new Enter key functionality, which helps users understand how to interact with the component.

packages/@core/ui-kit/popup-ui/src/alert/alert.ts (4)

5-6: Added createContext import

The import of createContext from the shadcn-ui package is appropriate for implementing the context pattern needed for the alert component.

---

76-84: Well-defined AlertContext type

The AlertContext type is clearly defined with properly documented methods for cancel and confirm operations. This provides a strong type foundation for the context implementation.

---

86-88: Context creation

The context is properly created using the createContext function with a descriptive identifier, following best practices for context implementation.

---

89-99: Well-implemented useAlertContext hook

The useAlertContext function includes proper error handling for cases when it's used outside an AlertProvider. The thorough JSDoc documentation helps developers understand its purpose and usage.

docs/src/components/common-ui/vben-alert.md (3)

15-19: Added HMR limitations note

The tip note clearly informs users about Hot Module Replacement limitations, which is valuable information for developers using these components during development.

---

41-46: Added useAlertContext documentation

The documentation clearly explains the purpose of the useAlertContext hook and its limitations. This provides developers with the necessary information to use the feature correctly.

---

47-52: Well-structured methods documentation

The methods table provides a clear overview of the available methods with their types and version requirements. This format makes it easy for developers to understand what functionality is available through the context.