feat(ScrollArea): Add leading/trailing slots#6201
Conversation
… rendering - Introduced `#leading` and `#trailing` slots to the ScrollArea component, allowing for customizable content before and after the scrollable items. - Updated examples and documentation to demonstrate the new slot functionality. - Enhanced loading state handling in the infinite scroll example.
mikenewbon
force-pushed
the
feat/scroll-area-slots
branch
from
bd366bd to
91eb932
Compare
📝 WalkthroughWalkthroughThis change introduces leading and trailing slot support to the ScrollArea component. The core component file ( Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
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.
🧹 Nitpick comments (1)
test/components/ScrollArea.spec.ts (1)
29-29: Keep explicit per-item default-slot coverage in the matrix.Line 29 currently validates default-slot rendering without
items. Consider adding a separate case withpropsso per-item slot props (item,index) remain directly covered.♻️ Suggested test matrix tweak
- ['with default slot', { slots: { default: () => 'Default slot' } }], + ['with default slot and items', { props, slots: { default: ({ item }) => item.name } }], + ['with default slot (no items)', { slots: { default: () => 'Default slot' } }],🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@test/components/ScrollArea.spec.ts` at line 29, Add an explicit matrix case that covers per-item default-slot props by duplicating the existing "with default slot" entry but adding props: { items: [...] } and replacing the slot factory to accept and assert item/index (e.g., slots: { default: (item, index) => /* use item/index in output or assertions */ }). Locate the current matrix entry "with default slot" (slots: { default: () => 'Default slot' }) in ScrollArea.spec.ts and add a new case like "with default slot and items" that passes a small items array so the test verifies per-item slot props are exercised.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In `@test/components/ScrollArea.spec.ts`:
- Line 29: Add an explicit matrix case that covers per-item default-slot props
by duplicating the existing "with default slot" entry but adding props: { items:
[...] } and replacing the slot factory to accept and assert item/index (e.g.,
slots: { default: (item, index) => /* use item/index in output or assertions */
}). Locate the current matrix entry "with default slot" (slots: { default: () =>
'Default slot' }) in ScrollArea.spec.ts and add a new case like "with default
slot and items" that passes a small items array so the test verifies per-item
slot props are exercised.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 2e151a0f-1a74-4c2c-9244-4a732bdb09fc
⛔ Files ignored due to path filters (2)
test/components/__snapshots__/ScrollArea-vue.spec.ts.snapis excluded by!**/*.snaptest/components/__snapshots__/ScrollArea.spec.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (6)
docs/app/components/content/examples/scroll-area/ScrollAreaInfiniteScrollExample.vuedocs/app/components/content/examples/scroll-area/ScrollAreaLeadingTrailingExample.vuedocs/content/docs/2.components/scroll-area.mdplaygrounds/nuxt/app/pages/components/scroll-area.vuesrc/runtime/components/ScrollArea.vuetest/components/ScrollArea.spec.ts
commit: |
1 participant
❓ Type of change
📚 Description
Adds #leading and #trailing named slots to ScrollArea, allowing content to be rendered before and after the scroll items inside the scroll container.
Why: Currently, when using the virtualize, the default slot is consumed per-item — there's no way to inject content like headers, footers, or loading indicators within the scrollable area. These slots fill that gap without breaking changes.
📝 Checklist