Open
Conversation
Contributor
|
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:
📝 WalkthroughWalkthroughAdds per-item badge support across select components and documentation. Types Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 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}
Contributor
There was a problem hiding this comment.
Actionable comments posted: 3
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/runtime/components/Select.vue (1)
168-170:⚠️ Potential issue | 🔴 CriticalMissing
UBadgeimport will cause runtime error.The template uses
<UBadge>(lines 387-395) but the component is never imported. The existing imports includeUIcon,UAvatar, andUChip, butUBadgeis absent.🐛 Proposed fix: Add UBadge import
import UIcon from './Icon.vue' import UAvatar from './Avatar.vue' import UChip from './Chip.vue' +import UBadge from './Badge.vue'Also applies to: 387-395
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/runtime/components/Select.vue` around lines 168 - 170, The Select.vue template references the UBadge component but it is not imported; add an import for UBadge alongside the existing imports (UIcon, UAvatar, UChip) so the component is registered and available to the template, e.g., import UBadge from './Badge.vue' and ensure UBadge is included in the component registrations used by Select.vue.docs/content/docs/2.components/select.md (1)
719-735:⚠️ Potential issue | 🟡 MinorDocumentation contains copy-paste errors from the avatar section.
Lines 729-735 contain notes that reference "avatar" instead of "badge":
- Line 730: "the avatar is computed from the value property" — should describe badge behavior
- Line 734: "display the selected avatar" — should say "badge"
These appear to be copied from the "With avatar in items" section without updating.
📝 Proposed fix
::component-example --- collapse: true name: 'select-items-badge-example' --- +:: -::note -In this example, the avatar is computed from the value property of the selected item. -:: ::tip -You can also use the `#leading` slot to display the selected avatar. +You can also use the `#leading` slot to display the selected badge. ::Or remove the note entirely if it doesn't apply to the badge example.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/content/docs/2.components/select.md` around lines 719 - 735, The note text in the "With badge in items" example wrongly references "avatar" (copied from the avatar section); update the note lines so they reference badge behavior instead (e.g., "the badge is computed from the `value` property of the selected item") and change the tip to "display the selected badge" (or remove the note entirely if it doesn't apply), updating the strings surrounding the `badge` property and `#leading` slot mentions accordingly.
🧹 Nitpick comments (1)
src/runtime/components/SelectMenu.vue (1)
557-557: Consider renamingdata-slotto match existing slot naming.For consistency with
Select.vueand theitemBadgeslot key,data-slot="itemBadge"is a better fit thanitemLeadingBadge.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/runtime/components/SelectMenu.vue` at line 557, Rename the data-slot attribute value from "itemLeadingBadge" to "itemBadge" in SelectMenu.vue so it aligns with the existing slot naming used in Select.vue and the itemBadge slot key; locate the element using the data-slot="itemLeadingBadge" occurrence in SelectMenu.vue and change it to data-slot="itemBadge" (and update any related references or tests that expect the old key).
🤖 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/SelectMenu.vue`:
- Line 7: The grouped type import on SelectMenu.vue that currently imports
AvatarProps, ButtonProps, ChipProps, IconProps, InputProps, LinkPropsKeys, and
BadgeProps in a single line should be split into individual import type lines —
create one `import type { X }` statement per type (e.g., import type {
AvatarProps }, import type { ButtonProps }, etc.) so each type import is on its
own line and conforms to the project's coding guideline; update the existing
import statement accordingly by replacing the single grouped import with
separate lines for AvatarProps, ButtonProps, ChipProps, IconProps, InputProps,
LinkPropsKeys, and BadgeProps.
- Around line 552-556: The badge visibility check currently uses a truthy test
(isSelectItem(item) && item.badge) which hides numeric 0; change the condition
to a nullish check like isSelectItem(item) && item.badge != null (or item.badge
!== null && item.badge !== undefined) in the SelectMenu.vue template so numeric
0 is rendered; keep the existing v-bind handling for string/number badges
(item.badge) as-is.
In `@test/components/SelectMenu.spec.ts`:
- Around line 40-45: The test builds itemsWithBadge with badge objects using
content: 'B' which doesn't match the BadgeProps used by the Badge component;
update the badge object to use label instead of content (i.e., change { color:
'primary', variant: 'solid', size: 'sm', content: 'B' } to use label: 'B') so
tests align with Badge.vue's BadgeProps and SelectMenu.spec.ts expectations.
---
Outside diff comments:
In `@docs/content/docs/2.components/select.md`:
- Around line 719-735: The note text in the "With badge in items" example
wrongly references "avatar" (copied from the avatar section); update the note
lines so they reference badge behavior instead (e.g., "the badge is computed
from the `value` property of the selected item") and change the tip to "display
the selected badge" (or remove the note entirely if it doesn't apply), updating
the strings surrounding the `badge` property and `#leading` slot mentions
accordingly.
In `@src/runtime/components/Select.vue`:
- Around line 168-170: The Select.vue template references the UBadge component
but it is not imported; add an import for UBadge alongside the existing imports
(UIcon, UAvatar, UChip) so the component is registered and available to the
template, e.g., import UBadge from './Badge.vue' and ensure UBadge is included
in the component registrations used by Select.vue.
---
Nitpick comments:
In `@src/runtime/components/SelectMenu.vue`:
- Line 557: Rename the data-slot attribute value from "itemLeadingBadge" to
"itemBadge" in SelectMenu.vue so it aligns with the existing slot naming used in
Select.vue and the itemBadge slot key; locate the element using the
data-slot="itemLeadingBadge" occurrence in SelectMenu.vue and change it to
data-slot="itemBadge" (and update any related references or tests that expect
the old key).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 25ad8597-a784-4846-84b5-082c2306c7a5
⛔ Files ignored due to path filters (4)
test/components/__snapshots__/Select-vue.spec.ts.snapis excluded by!**/*.snaptest/components/__snapshots__/Select.spec.ts.snapis excluded by!**/*.snaptest/components/__snapshots__/SelectMenu-vue.spec.ts.snapis excluded by!**/*.snaptest/components/__snapshots__/SelectMenu.spec.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (11)
docs/app/components/content/examples/select-menu/SelectMenuItemsBadgeExample.vuedocs/app/components/content/examples/select/SelectItemsBadgeExample.vuedocs/content/docs/2.components/select-menu.mddocs/content/docs/2.components/select.mdplaygrounds/nuxt/app/pages/components/select-menu.vueplaygrounds/nuxt/app/pages/components/select.vuesrc/runtime/components/Select.vuesrc/runtime/components/SelectMenu.vuesrc/theme/select.tstest/components/Select.spec.tstest/components/SelectMenu.spec.ts
zAlweNy26
force-pushed
the
feat/select-badge
branch
from
99aefa2 to
8abe777
Compare
Contributor
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
docs/content/docs/2.components/select.md (1)
729-735:⚠️ Potential issue | 🟡 MinorUpdate stale note/tip copy to match the badge example.
The text still references avatar (Lines 729 and 734) in the new badge section.
Suggested wording fix
-::note -In this example, the avatar is computed from the `value` property of the selected item. -:: +::note +In this example, the badge is computed from the `value` property of the selected item. +:: ::tip -You can also use the `#leading` slot to display the selected avatar. +You can also use the `#leading` slot to display the selected badge. ::🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/content/docs/2.components/select.md` around lines 729 - 735, Update the stale copy in the note and tip blocks so they reference "badge" instead of "avatar": change the note text "In this example, the avatar is computed from the `value` property of the selected item." to mention the badge is computed from `value`, and change the tip "You can also use the `#leading` slot to display the selected avatar." to say "selected badge" (keeping the `#leading` slot reference). Ensure both occurrences in the select.md note and tip blocks are updated to match the badge example.
🧹 Nitpick comments (1)
src/runtime/components/Select.vue (1)
7-7: Split the grouped type import into one symbol per line.Line 7 currently groups multiple type imports in one statement; this conflicts with the repository rule.
Suggested refactor
-import type { AvatarProps, BadgeProps, ChipProps, IconProps, InputProps } from '../types' +import type { AvatarProps } from '../types' +import type { BadgeProps } from '../types' +import type { ChipProps } from '../types' +import type { IconProps } from '../types' +import type { InputProps } from '../types'As per coding guidelines, "Always use separate type imports with
import type { X }on its own line".🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/runtime/components/Select.vue` at line 7, Split the grouped type import on Select.vue into separate single-line `import type` statements: replace the single import that lists AvatarProps, BadgeProps, ChipProps, IconProps, and InputProps with five distinct lines each importing one of those types (e.g., `import type { AvatarProps }` etc.) so each type is imported on its own line per repository rules; keep the module path '../types' for each import.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/content/docs/2.components/select-menu.md`:
- Around line 850-858: The new example block starting with "::component-example"
(name: 'select-menu-items-badge-example') is missing its closing "::" delimiter
before the subsequent "::tip" block; close the component example by adding the
missing terminating "::" right after the example metadata/content so the "::tip"
(and the `#leading` slot note) are properly separate and the document renders
correctly.
- Around line 639-653: Update the new docs section to use SelectMenu-specific
names: replace the reference to "Select" with "SelectMenu" (the section heading
or description that currently says "Use the `badge` prop to show a
[Badge](/docs/components/badge) inside the Select") and change the external type
from `SelectItem[]` to `SelectMenuItem[]` in the externalTypes declaration so
the docs match the SelectMenu component API.
In `@docs/content/docs/2.components/select.md`:
- Around line 723-729: The ::component-example directive block starting with
"::component-example" and the frontmatter block ("---" ... "---") is not closed;
add a closing "::" line immediately after the frontmatter block so the
component-example directive is properly terminated (i.e., ensure the
"::component-example" block is closed with "::" following the concluding "---").
In `@src/runtime/components/Select.vue`:
- Around line 389-396: The v-if currently hides falsy numeric badges like 0 and
the variant uses "outline" instead of the documented default "soft"; update the
badge visibility to check explicitly for null/undefined (e.g., use item.badge
!== null && item.badge !== undefined) so 0 is preserved, and change the badge
prop variant from "outline" to "soft" in the Select.vue block that renders the
badge (references: isSelectItem, item.badge, and the variant prop).
---
Outside diff comments:
In `@docs/content/docs/2.components/select.md`:
- Around line 729-735: Update the stale copy in the note and tip blocks so they
reference "badge" instead of "avatar": change the note text "In this example,
the avatar is computed from the `value` property of the selected item." to
mention the badge is computed from `value`, and change the tip "You can also use
the `#leading` slot to display the selected avatar." to say "selected badge"
(keeping the `#leading` slot reference). Ensure both occurrences in the
select.md note and tip blocks are updated to match the badge example.
---
Nitpick comments:
In `@src/runtime/components/Select.vue`:
- Line 7: Split the grouped type import on Select.vue into separate single-line
`import type` statements: replace the single import that lists AvatarProps,
BadgeProps, ChipProps, IconProps, and InputProps with five distinct lines each
importing one of those types (e.g., `import type { AvatarProps }` etc.) so each
type is imported on its own line per repository rules; keep the module path
'../types' for each import.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: e59f0ef2-6e3b-4b72-a119-e5d6cdcf0eba
⛔ Files ignored due to path filters (4)
test/components/__snapshots__/Select-vue.spec.ts.snapis excluded by!**/*.snaptest/components/__snapshots__/Select.spec.ts.snapis excluded by!**/*.snaptest/components/__snapshots__/SelectMenu-vue.spec.ts.snapis excluded by!**/*.snaptest/components/__snapshots__/SelectMenu.spec.ts.snapis excluded by!**/*.snap
📒 Files selected for processing (11)
docs/app/components/content/examples/select-menu/SelectMenuItemsBadgeExample.vuedocs/app/components/content/examples/select/SelectItemsBadgeExample.vuedocs/content/docs/2.components/select-menu.mddocs/content/docs/2.components/select.mdplaygrounds/nuxt/app/pages/components/select-menu.vueplaygrounds/nuxt/app/pages/components/select.vuesrc/runtime/components/Select.vuesrc/runtime/components/SelectMenu.vuesrc/theme/select.tstest/components/Select.spec.tstest/components/SelectMenu.spec.ts
✅ Files skipped from review due to trivial changes (3)
- test/components/SelectMenu.spec.ts
- docs/app/components/content/examples/select/SelectItemsBadgeExample.vue
- playgrounds/nuxt/app/pages/components/select-menu.vue
🚧 Files skipped from review as they are similar to previous changes (4)
- playgrounds/nuxt/app/pages/components/select.vue
- src/theme/select.ts
- test/components/Select.spec.ts
- src/runtime/components/SelectMenu.vue
Contributor
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 `@docs/content/docs/2.components/select.md`:
- Around line 719-729: The avatar-specific note/tip text was left immediately
after the "With badge in items" section, causing avatar guidance to appear under
the badge example; locate the "With badge in items" header and the adjacent
example block (component example named 'select-items-badge-example') and either
move the avatar note/tip back to the avatar example section or replace that text
with badge-specific guidance (e.g., describing badge usage and behavior) so the
note/tip content matches the "select-items-badge-example" context.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: ada3d6d9-1a99-43d7-8212-3e3a9160498c
📒 Files selected for processing (3)
docs/content/docs/2.components/select-menu.mddocs/content/docs/2.components/select.mdsrc/runtime/components/Select.vue
🚧 Files skipped from review as they are similar to previous changes (1)
- src/runtime/components/Select.vue
Contributor
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
docs/content/docs/2.components/select.md (1)
65-75:⚠️ Potential issue | 🟡 MinorAdd missing
badgeproperty to the items documentation.The list of available properties for item objects is missing the
badgeproperty that was added in this PR. Additionally, theuiproperty type listing should includeitemBadgeanditemBadgeSizeto match the actualSelectItemtype definition.📝 Proposed additions
- `label?: string`{lang="ts-type"} - [`value?: string`{lang="ts-type"}](`#value-key`) - [`type?: "label" | "separator" | "item"`{lang="ts-type"}](`#with-items-type`) - [`icon?: string`{lang="ts-type"}](`#with-icons-in-items`) - [`avatar?: AvatarProps`{lang="ts-type"}](`#with-avatar-in-items`) - [`chip?: ChipProps`{lang="ts-type"}](`#with-chip-in-items`) +- [`badge?: string | number | BadgeProps`{lang="ts-type"}](`#with-badge-in-items`) - `disabled?: boolean`{lang="ts-type"} - `class?: any`{lang="ts-type"} -- `ui?: { label?: ClassNameValue, separator?: ClassNameValue, item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue }`{lang="ts-type"} +- `ui?: { label?: ClassNameValue, separator?: ClassNameValue, item?: ClassNameValue, itemLeadingIcon?: ClassNameValue, itemLeadingAvatarSize?: ClassNameValue, itemLeadingAvatar?: ClassNameValue, itemLeadingChipSize?: ClassNameValue, itemLeadingChip?: ClassNameValue, itemLabel?: ClassNameValue, itemTrailing?: ClassNameValue, itemTrailingIcon?: ClassNameValue, itemBadge?: ClassNameValue, itemBadgeSize?: ClassNameValue }`{lang="ts-type"}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/content/docs/2.components/select.md` around lines 65 - 75, Update the item-properties docs to reflect the SelectItem type: add the missing top-level badge property (e.g., badge?: string | BadgeProps) to the list of item object properties and extend the ui mapping to include itemBadge and itemBadgeSize keys so the documented ui fields match the actual SelectItem type definition; update the list near the items block that defines label, value, type, icon, avatar, chip, disabled, class, ui to include badge and to show ui contains itemBadge and itemBadgeSize.
🧹 Nitpick comments (1)
docs/content/docs/2.components/select.md (1)
510-556: Consider relocating the Badge section for structural consistency.Unlike
avatarandicon, which can be used both as Select component props and on individual items,badgeis only available on items. Placing this section before the "Examples" heading creates inconsistency with the documentation structure, where preceding sections document Select component props.The description "Use the
badgeprop to show a Badge inside the Select" may also mislead users into thinkingbadgeis a component-level prop.Options:
Preferred: Remove this section entirely since the "With badge in items" example (lines 727-740) already documents this feature appropriately in the Examples section.
Alternative: Update the description to clarify this is an item-level property:
### Badge You can use the `badge` property on items to display a [Badge](/docs/components/badge) inside the Select dropdown.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/content/docs/2.components/select.md` around lines 510 - 556, Remove the standalone "### Badge" section that incorrectly presents `badge` as a Select prop (the block starting with "### Badge" and the following ::component-code example), because the item-level badge is already documented in the "With badge in items" example; alternatively, if you prefer to keep it, change the heading text and first sentence to clarify it's an item-level property (e.g., "You can use the `badge` property on items to display a Badge inside the Select dropdown") so it no longer implies a component prop.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Outside diff comments:
In `@docs/content/docs/2.components/select.md`:
- Around line 65-75: Update the item-properties docs to reflect the SelectItem
type: add the missing top-level badge property (e.g., badge?: string |
BadgeProps) to the list of item object properties and extend the ui mapping to
include itemBadge and itemBadgeSize keys so the documented ui fields match the
actual SelectItem type definition; update the list near the items block that
defines label, value, type, icon, avatar, chip, disabled, class, ui to include
badge and to show ui contains itemBadge and itemBadgeSize.
---
Nitpick comments:
In `@docs/content/docs/2.components/select.md`:
- Around line 510-556: Remove the standalone "### Badge" section that
incorrectly presents `badge` as a Select prop (the block starting with "###
Badge" and the following ::component-code example), because the item-level badge
is already documented in the "With badge in items" example; alternatively, if
you prefer to keep it, change the heading text and first sentence to clarify
it's an item-level property (e.g., "You can use the `badge` property on items to
display a Badge inside the Select dropdown") so it no longer implies a component
prop.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 61f7b14d-3a2d-42c4-acce-c7088c372d49
📒 Files selected for processing (1)
docs/content/docs/2.components/select.md
commit: |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🔗 Linked issue
Resolves #5949
❓ Type of change
📚 Description
Adds a badge property to the
SelectandSelectMenucomponents📝 Checklist