feat(component): AlertGroup component#6143
Conversation
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review infoConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
📝 WalkthroughWalkthroughAdds a new AlertGroup Vue component at src/runtime/components/AlertGroup.vue that renders a list of alerts with stacking/expandable behavior. Props: Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/runtime/components/AlertGroup.vue`:
- Line 53: The collapsed width calculation can go negative for large index
values; update the expression in AlertGroup.vue where width is set (the expanded
? ... : `${100 - index * 3}%` expression) to clamp the percentage to a safe
minimum (e.g., use Math.max to ensure at least 0 or a chosen MIN_PERCENT) so the
resulting CSS is always valid; keep the expanded branch returning '100%' and
apply the clamp to the collapsed branch using the existing index variable.
- Around line 16-23: The AlertGroup component's props declaration (defineProps
in AlertGroup.vue) is missing the class and ui props used elsewhere (props.class
and useComponentUI), which breaks type safety; update the defineProps generic to
include class?: string | Record<string, boolean> (or the same type used across
components) and ui?: ComponentUI (or the shared ui prop type used by
Alert/Badge) and add corresponding defaults in withDefaults so props.class and
props.ui are properly typed and available to the useComponentUI call and any
class overrides.
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/theme/alert-group.ts`:
- Line 6: Add a single trailing newline character after the final closing brace
('}') at the end of alert-group.ts so the file ends with one EOF newline (fixes
the `@stylistic/eol-last` lint failure); ensure there are no extra blank
lines—just one final newline.
ℹ️ Review info
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
playgrounds/nuxt/app/composables/useNavigation.tsplaygrounds/nuxt/app/pages/components/alert-group.vuesrc/runtime/components/AlertGroup.vuesrc/runtime/types/index.tssrc/theme/alert-group.tssrc/theme/index.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- src/runtime/components/AlertGroup.vue
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@playgrounds/nuxt/app/pages/components/alert-group.vue`:
- Around line 1-52: The file uses Vue's reactive() in the <script setup> block
(const attrs = reactive({...})) but never imports it; add an import for reactive
from 'vue' at the top of the script (e.g., import { reactive } from 'vue') so
the reactive symbol used in the const attrs declaration is defined and linting
passes.
|
Closing this, see #6142 (comment) |
2 participants
This is the first time I ever contribute to a open-source library - please correct me if I am missing anything
🔗 Linked issue
Resolves: #6142
❓ Type of change
📚 Description
On a project I am working on we use Alerts are a form of "user tasks" that the user should handle before a deadline.
The UI quickly became crazy when there there more then 2 "user tasks" at the same time. therefore I built a AlertGroup component inspired by how Toasts are stacked when
toasterhasexpand: true.By inspecting the toast and toaster code, found out that i cannot use the same approach with transform translate and position absolute. Therefore this component is using negative margin to move the rest of the elements on the page when the group expands the stacked alerts.
📝 Checklist
👀 Preview