Skip to content

feat(Listbox): new component#6307

Merged
benjamincanac merged 15 commits intonuxt:v4from
J-Michalek:feat/listbox
Apr 22, 2026
Merged

feat(Listbox): new component#6307
benjamincanac merged 15 commits intonuxt:v4from
J-Michalek:feat/listbox

Conversation

@J-Michalek
Copy link
Copy Markdown
Contributor

🔗 Linked issue

Resolves #6214

❓ Type of change

  • 📖 Documentation (updates to the documentation or readme)
  • 🐞 Bug fix (a non-breaking change that fixes an issue)
  • 👌 Enhancement (improving an existing functionality)
  • ✨ New feature (a non-breaking change that adds functionality)
  • 🧹 Chore (updates to the build process or auxiliary tools and libraries)
  • ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Implementation of a Listbox component based on RekaUI's Listbox component.

📝 Checklist

  • I have linked an issue or discussion.
  • I have updated the documentation accordingly.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 6, 2026

Note

Reviews paused

It 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 reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review
📝 Walkthrough

Walkthrough

Adds a new Listbox feature: a runtime Listbox Vue component with typed props, single/multiple selection, search (Fuse) support, optional virtualization, form-field integration, emits/slots/types, and theming. Introduces a listbox theme module and re-export, extensive locale messages.listbox entries across many languages, documentation and multiple example/demo SFCs (avatar, description, multiple, virtualize, transfer-list), a playground page, unit tests for Listbox behavior and form integration, and a small test helper update to register UListbox.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name Status Explanation Resolution
Linked Issues check ❓ Inconclusive The PR implements a Listbox component, but the linked issue #6214 specifically requests a PickList/TransferList component for moving items between two lists. The PR includes a transfer list example but the primary deliverable is a base Listbox, not the requested TransferList feature. Clarify whether this Listbox component satisfies issue #6214 or if additional TransferList-specific features are still needed. The PR provides a foundation (ListboxTransferListExample) but may not fully address the original request.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed The title clearly and concisely describes the main feature: implementing a new Listbox component. It follows conventional commits format and accurately reflects the primary change.
Description check ✅ Passed The PR description is related to the changeset, mentioning implementation based on RekaUI's Listbox and referencing issue #6214. Documentation updates are noted.
Out of Scope Changes check ✅ Passed All changes are scoped to implementing the Listbox component: component code, examples, documentation, locale translations, theme configuration, and tests. No unrelated modifications detected.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

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

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Note

Due to the large number of review comments, Critical, Major severity comments were prioritized as inline comments.

🧹 Nitpick comments (3)
src/runtime/locale/en.ts (1)

98-102: Keep ellipsis style consistent in English locale copy.

Line 101 uses "Search..." while the file mostly uses "…" for search placeholders.

💡 Suggested tweak
     listbox: {
       noData: 'No data',
       noMatch: 'No matching data',
-      search: 'Search...'
+      search: 'Search…'
     },
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/runtime/locale/en.ts` around lines 98 - 102, The English locale entry
listbox.search currently uses three ASCII dots ("Search...") which is
inconsistent with the file's use of the single-character ellipsis; update the
value of listbox.search to use the Unicode ellipsis character ("Search…") so it
matches the existing style across the locale file.
src/runtime/components/Listbox.vue (1)

15-28: Naming collision between ListboxItem interface and Reka UI component.

The exported ListboxItem interface (line 15) is shadowed by the Reka UI ListboxItem component import (line 135). While this works due to TypeScript's separate type/value namespaces, it can cause confusion when reading the code and may lead to issues if someone tries to use the interface in the setup script.

Consider renaming the interface to avoid ambiguity:

♻️ Suggested rename
-export interface ListboxItem {
+export interface ListboxItemData {
   label?: string
   description?: string
   // ...
 }

-export interface ListboxProps<T extends ListboxItem = ListboxItem, M extends boolean = false>
+export interface ListboxProps<T extends ListboxItemData = ListboxItemData, M extends boolean = false>

This would require updating all references throughout the file and exports.

Also applies to: 135-135

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/runtime/components/Listbox.vue` around lines 15 - 28, The exported
interface ListboxItem conflicts by name with the Reka UI ListboxItem component;
rename the interface (e.g. ListboxItemType or ListboxData) and update all
references and exports to the new name (including any uses in props, emits, or
other type annotations), ensure the Reka UI component import remains unchanged,
and run a project-wide replace for ListboxItem -> ListboxItemType only where it
refers to the type (not the component) to avoid breaking the component import.
test/components/Listbox.spec.ts (1)

59-74: Consider documenting why aria-input-field-name rule is disabled.

The accessibility test disables the aria-input-field-name rule. If this is due to a known limitation or intentional design choice with ListboxRoot, a brief comment explaining the reason would help future maintainers understand this isn't an oversight.

📝 Suggested documentation
   it('passes accessibility tests', async () => {
     const wrapper = await mountSuspended(Listbox, {
       props: {
         ...props,
         modelValue: items[0]
       },
       attrs: {
         ariaLabel: 'Countries'
       }
     })
+    // Disable aria-input-field-name: ListboxRoot uses a different ARIA pattern
+    // that doesn't require input-field-name labeling
     expect(await axe(wrapper.element, {
       rules: {
         'aria-input-field-name': { enabled: false }
       }
     })).toHaveNoViolations()
   })
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@test/components/Listbox.spec.ts` around lines 59 - 74, Add a brief comment
above the accessibility test in Listbox.spec.ts explaining why the axe rule
'aria-input-field-name' is disabled (e.g., known limitation or intentional
behavior of ListboxRoot/Listbox component when using ariaLabel or custom
labeling), so future maintainers know this is deliberate; reference the test
block that mounts Listbox with props/modelValue and attrs. Ensure the comment
names the exact rule ('aria-input-field-name') and the component (Listbox or
ListboxRoot) and states the reason or a link to an issue/PR if applicable.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Minor comments:
In `@src/runtime/locale/ar.ts`:
- Around line 104-108: The listbox object in the Arabic locale currently
contains English strings; update the listbox property (keys: noData, noMatch,
search) in the ar locale module to use Arabic translations (e.g., replace 'No
data', 'No matching data', 'Search...' with appropriate Arabic strings), ensure
the strings are UTF-8 encoded and suitable for RTL display, and keep the key
names unchanged so consumers (listbox.noData, listbox.noMatch, listbox.search)
continue to work.

In `@src/runtime/locale/az.ts`:
- Around line 103-107: The listbox object currently contains English strings;
replace them with Azerbaijani translations for the keys listbox.noData,
listbox.noMatch, and listbox.search in src/runtime/locale/az.ts. Update values
so noData uses an Azerbaijani phrase for "No data", noMatch for "No matching
data", and search for an Azerbaijani placeholder equivalent to "Search..." while
preserving the existing key names and surrounding object structure.

In `@src/runtime/locale/be.ts`:
- Around line 103-107: The Belarusian locale's listbox object currently contains
English strings; update the listbox entry in src/runtime/locale/be.ts (the
object named listbox with keys noData, noMatch, search) to use Belarusian
translations instead of 'No data', 'No matching data', and 'Search...'. Replace
each value with the appropriate Belarusian text (e.g., "Няма дадзеных" for
noData, "Няма адпаведных дадзеных" for noMatch, and "Пошук…" for search)
preserving the object key names and existing file structure.

In `@src/runtime/locale/bg.ts`:
- Around line 103-107: Replace the English placeholders in the listbox object
with Bulgarian strings: update listbox.noData to "Няма данни", listbox.noMatch
to "Няма съвпадения" and listbox.search to "Търсене..." so the bg locale uses
proper Bulgarian copy for these entries.

In `@src/runtime/locale/bn.ts`:
- Around line 103-107: The listbox messages in the Bengali locale are still in
English; update the listbox object by translating the string values for the keys
noData, noMatch, and search into Bengali (replace 'No data', 'No matching data',
and 'Search...' with appropriate Bengali equivalents) so the bn locale is fully
localized; modify the listbox entry in src/runtime/locale/bn.ts (keys:
listbox.noData, listbox.noMatch, listbox.search) to use the Bengali
translations.

In `@src/runtime/locale/ca.ts`:
- Around line 103-107: The listbox strings are still in English; replace the
values in the listbox object (listbox.noData, listbox.noMatch, listbox.search)
with the Catalan translations used in the selectMenu namespace to ensure
consistency (copy the same strings from selectMenu.noData, selectMenu.noMatch,
selectMenu.search). Update the listbox object so its entries match the
selectMenu translations exactly and run a quick lint/format to keep style
consistent.

In `@src/runtime/locale/ckb.ts`:
- Around line 104-108: Replace the English strings in the listbox object with
Kurdish (ckb) translations: update the listbox.noData key to a Kurdish phrase
(e.g., "هیچ داتایەک نییە"), listbox.noMatch to a Kurdish phrase for "no matching
data" (e.g., "هیچ داتایەکی پەیوەندیدار نەدۆزرایەوە"), and listbox.search to
"گەڕان..." so the listbox object (keys noData, noMatch, search) in ckb.ts is
fully localized.

In `@src/runtime/locale/cs.ts`:
- Around line 103-107: The listbox messages are still in English; update the
`listbox` object entries so `noData` becomes "Žádná data", `noMatch` becomes
"Žádná shoda", and `search` becomes "Hledat…" to match other Czech translations
(refer to the `listbox` keys `noData`, `noMatch`, `search` in
src/runtime/locale/cs.ts).

In `@src/runtime/locale/da.ts`:
- Around line 103-107: The listbox object uses English strings; update the keys
in the listbox object (listbox.noData, listbox.noMatch, listbox.search) to
Danish consistent with other keys (use "Ingen data" for noData, "Ingen matchende
data" for noMatch, and "Søg…" for search) so the translations match
commandPalette/selectMenu style and characters.

In `@src/runtime/locale/de_ch.ts`:
- Around line 103-107: Replace the English Listbox strings in the de-CH locale's
listbox object: update the values for the keys noData, noMatch and search so
they are translated to Swiss German (e.g., noData -> "Keine Daten", noMatch ->
"Keine passenden Daten", search -> "Suchen..."); modify the listbox object in
src/runtime/locale/de_ch.ts where these keys are defined (listbox.noData,
listbox.noMatch, listbox.search).

In `@src/runtime/locale/de.ts`:
- Around line 103-107: The listbox object in the German locale (listbox with
keys noData, noMatch, search) currently contains English placeholders; update
those values to proper German translations (e.g., noData -> "Keine Daten",
noMatch -> "Keine übereinstimmenden Daten" or shorter "Keine Treffer", search ->
"Suchen..." or "Suche...") while keeping the same keys (listbox.noData,
listbox.noMatch, listbox.search) and surrounding structure intact so the de
locale exports remain valid.

In `@src/runtime/locale/el.ts`:
- Around line 103-107: The el locale's listbox object currently contains English
strings; replace the values in the listbox object (listbox.noData,
listbox.noMatch, listbox.search) with Greek text so the Greek locale is
consistent—use appropriate translations such as "Χωρίς δεδομένα" for noData,
"Δεν βρέθηκαν αποτελέσματα" for noMatch, and "Αναζήτηση..." for search.

In `@src/runtime/locale/es.ts`:
- Around line 103-107: The listbox translations are left in English; update the
listbox object (key: listbox) so its string values match the Spanish
translations used in selectMenu (use 'Sin datos' for noData, 'No hay
coincidencias' for noMatch, and 'Buscar...' for search) ensuring consistency
with the selectMenu namespace translations.

In `@src/runtime/locale/et.ts`:
- Around line 103-107: The listbox messages in the Estonian locale are currently
in English; update the object properties listbox.noData, listbox.noMatch, and
listbox.search in the et locale to their Estonian equivalents (e.g., replace 'No
data', 'No matching data', 'Search...' with appropriate Estonian translations)
so the et file uses consistent localized strings.

In `@src/runtime/locale/eu.ts`:
- Around line 103-107: Update the listbox translations to Basque by replacing
the English strings for the keys listbox.noData, listbox.noMatch, and
listbox.search with Basque equivalents; set listbox.noData to "Daturik gabe",
listbox.noMatch to "Ez da datu bat ere aurkitu", and listbox.search to "Bilatu…"
so they match the style used in commandPalette and selectMenu.

In `@src/runtime/locale/fa_ir.ts`:
- Around line 104-108: The listbox translations are still in English—update the
listbox object (keys listbox.noData, listbox.noMatch, listbox.search) to use
Persian strings consistent with the rest of the file; specifically replace 'No
data' with 'داده‌ای موجود نیست', 'No matching data' with 'داده‌ای یافت نشد', and
'Search...' with 'جستجو…' (use the same ellipsis character as other keys like
selectMenu.search).

In `@src/runtime/locale/fi.ts`:
- Around line 103-107: Replace the English strings in the exported listbox
object with Finnish translations: update listbox.noData to "Ei tietoja",
listbox.noMatch to "Ei tuloksia" and listbox.search to "Haku..." so the fi
locale is fully localized; locate the listbox object in the fi locale module and
change those three string values accordingly.

In `@src/runtime/locale/fr.ts`:
- Around line 103-107: The listbox localization entries are still in English;
update the listbox object keys noData, noMatch, and search in
src/runtime/locale/fr.ts (the listbox block) to their French equivalents —
replace "No data" with "Aucune donnée", "No matching data" with "Aucune donnée
correspondante" (or "Aucune correspondance"), and "Search..." with
"Rechercher..." so the locale file contains proper French translations.

In `@src/runtime/locale/gl.ts`:
- Around line 103-107: The listbox localization is using English strings;
replace the values for the listbox object keys (listbox.noData, listbox.noMatch,
listbox.search) with Galician translations: use "Sen datos" for noData, "Non hai
datos que coincidan" (or "Non hai datos coincidentes") for noMatch, and
"Buscar..." for search so the listbox messages are localized into Galician.

In `@src/runtime/locale/he.ts`:
- Around line 104-108: The listbox localization in the he locale contains
English placeholders; update the listbox object (keys noData, noMatch, search)
in src/runtime/locale/he.ts to Hebrew strings (e.g. noData -> "אין נתונים",
noMatch -> "אין תוצאות תואמות" or "אין נתונים תואמים", search -> "חפש...") so
the Hebrew locale no longer mixes languages.

In `@src/runtime/locale/hi.ts`:
- Around line 103-107: Translate the English strings inside the exported locale
object's listbox property in hi.ts so they are fully in Hindi: replace
listbox.noData, listbox.noMatch, and listbox.search with appropriate Hindi
phrases while preserving the keys (listbox, noData, noMatch, search) and
surrounding structure so the object shape remains unchanged.

In `@src/runtime/locale/hr.ts`:
- Around line 103-107: The Croatian locale file exports a listbox object with
English strings (listbox.noData, listbox.noMatch, listbox.search); replace those
English values with Croatian translations (e.g., "Nema podataka" for noData,
"Nema odgovarajućih podataka" for noMatch, and "Pretraži..." for search) so the
hr locale is fully localized; update the values in the listbox object inside the
hr locale export.

In `@src/runtime/locale/hu.ts`:
- Around line 103-107: The Hungarian locale file has the English strings under
the listbox object (keys listbox.noData, listbox.noMatch, listbox.search);
replace those English values with their Hungarian translations so the hu locale
is consistent (update the listbox object in src/runtime/locale/hu.ts to provide
Hungarian text for noData, noMatch and search).

In `@src/runtime/locale/hy.ts`:
- Around line 103-107: The listbox object in the Armenian locale still contains
English strings; update the listbox entries (listbox.noData, listbox.noMatch,
listbox.search) in src/runtime/locale/hy.ts to Armenian equivalents—for example
replace 'No data' with 'Տվյալներ չկան', 'No matching data' with 'Համապատասխան
տվյալներ չգտնվեցին', and 'Search...' with 'Փնտրել...' so the hy locale is fully
localized.

In `@src/runtime/locale/id.ts`:
- Around line 103-107: Replace the English strings in the listbox object (keys
listbox.noData, listbox.noMatch, listbox.search) with Indonesian equivalents
matching the rest of the file — use "Tidak ada data" for noData, "Tidak ada data
yang cocok" for noMatch, and "Cari…" for search — so listbox messages are
localized consistently with commandPalette and selectMenu.

In `@src/runtime/locale/is.ts`:
- Around line 103-107: The listbox messages are still in English; translate the
values for the listbox object keys (listbox.noData, listbox.noMatch,
listbox.search) into Icelandic consistent with the rest of this locale file;
update the string values for noData, noMatch and search with the proper
Icelandic translations (e.g., “Engin gögn”, “Engin samsvörun við gögn” and
“Leita…”) so the listbox UI shows Icelandic text.

In `@src/runtime/locale/it.ts`:
- Around line 103-107: The listbox translations are still in English; update the
listbox object (keys noData, noMatch, search) to use the same Italian strings
used in the selectMenu namespace (e.g., mirror selectMenu.noData,
selectMenu.noMatch, selectMenu.search) so listbox matches the rest of the file's
Italian localization.

In `@src/runtime/locale/ja.ts`:
- Around line 103-107: The listbox entries in the ja locale (the listbox object
with keys listbox.noData, listbox.noMatch, and listbox.search) are still
English; replace those values with appropriate Japanese translations (e.g.,
"データがありません" for noData, "一致するデータがありません" for noMatch, and "検索..." for search),
preserving the same keys and string types so the rest of the code uses the
localized strings correctly.

In `@src/runtime/locale/ka.ts`:
- Around line 105-109: In src/runtime/locale/ka.ts update the listbox object
entries to Georgian text: replace listbox.noData with "მონაცემები არ არის",
listbox.noMatch with "შესაბამისი მონაცემები არ არის", and listbox.search with
"ძიება..." so the keys (listbox, noData, noMatch, search) use consistent
Georgian translations.

In `@src/runtime/locale/kk.ts`:
- Around line 103-107: The listbox object in the kk locale contains English
placeholder strings; replace the values for keys noData, noMatch, and search
inside the listbox object (symbols: listbox.noData, listbox.noMatch,
listbox.search) with their Kazakh equivalents so the kk locale is consistent for
Kazakh users.

In `@src/runtime/locale/km.ts`:
- Around line 103-107: The listbox object in src/runtime/locale/km.ts contains
English values for keys listbox.noData, listbox.noMatch, and listbox.search;
replace those three English strings with the Khmer strings already used
elsewhere in this file (reuse the same Khmer values assigned to the
corresponding noData, noMatch, and search keys elsewhere in the km locale) so
the UI remains fully localized.

In `@src/runtime/locale/ko.ts`:
- Around line 103-107: The listbox entries (listbox.noData, listbox.noMatch,
listbox.search) are still in English; update them to use the same Korean
translations as the selectMenu namespace (copy selectMenu.noData,
selectMenu.noMatch, selectMenu.search) so listbox matches the rest of the ko.ts
localization file and maintains consistent wording.

In `@src/runtime/locale/ky.ts`:
- Around line 103-107: The listbox messages are still in English; replace the
values for the listbox object keys (noData, noMatch, search) with Kyrgyz
translations consistent with the rest of the file — e.g., set noData to
"Маалымат жок", noMatch to "Жооп келген маалымат жок", and search to "Издөө...";
update the listbox object where it is defined so the UI shows Kyrgyz text.

In `@src/runtime/locale/lb.ts`:
- Around line 103-107: Replace the English listbox messages with Luxembourgish
translations by updating the listbox object keys: set listbox.noData to "Keng
Donnéeën", listbox.noMatch to "Keng entspriechend Donnéeën", and listbox.search
to "Sichen.." so they match existing locale phrasing used by commandPalette and
selectMenu.

In `@src/runtime/locale/lo.ts`:
- Around line 103-107: The listbox translations are still in English; update the
listbox object (keys noData, noMatch, search) to use the Lao strings already
used in selectMenu (copy the same values from selectMenu.noData,
selectMenu.noMatch, selectMenu.search) so listbox matches the rest of the locale
file and is fully translated.

In `@src/runtime/locale/lt.ts`:
- Around line 103-107: The listbox block in the lt locale uses English strings;
replace the English values for the listbox keys (listbox.noData,
listbox.noMatch, listbox.search) with Lithuanian translations: set
listbox.noData to "Nėra duomenų", listbox.noMatch to "Nėra atitinkančių
duomenų", and listbox.search to "Ieškoti..." so the lt.ts locale is fully
localized.

In `@src/runtime/locale/mn.ts`:
- Around line 103-107: The listbox labels in src/runtime/locale/mn.ts are still
in English; update the listbox object keys (noData, noMatch, search) to
Mongolian translations—set listbox.noData to "Өгөгдөл байхгүй", listbox.noMatch
to "Тохирох өгөгдөл байхгүй", and listbox.search to "Хайх..." so the Mongolian
locale is properly localized.

In `@src/runtime/locale/ms.ts`:
- Around line 103-107: The Malay locale file defines a "listbox" object with
English strings; replace the values of listbox.noData, listbox.noMatch, and
listbox.search in the ms export with proper Malay translations (e.g., "Tiada
data" for noData, "Tiada padanan data" or similar for noMatch, and "Cari..." for
search) so the ms locale is fully localized—update the listbox object in
src/runtime/locale/ms.ts accordingly.

In `@src/runtime/locale/nb_no.ts`:
- Around line 103-107: The listbox messages are still in English; update the
listbox object (keys listbox.noData, listbox.noMatch, listbox.search) to
Norwegian Bokmål translations consistent with the file's style—e.g., set noData
to "Ingen data", noMatch to "Ingen samsvarende data" (or "Ingen treff"), and
search to "Søk…" using the typographic ellipsis character to match other keys
like selectMenu.search. Ensure only the string values change and preserve the
existing key names and object structure.

In `@src/runtime/locale/nl.ts`:
- Around line 103-107: The listbox translations are still in English; update the
listbox object keys (listbox.noData, listbox.noMatch, listbox.search) to use the
Dutch strings consistent with the rest of the file (e.g., use "Geen gegevens"
for noData, "Geen overeenkomende gegevens" for noMatch, and "Zoeken…" for
search) so all messages in the listbox section are properly localized in nl.ts.

In `@src/runtime/locale/pl.ts`:
- Around line 103-107: The listbox translations are still in English; update the
listbox object (the listbox symbol) to use the same Polish strings as the
selectMenu namespace: change noData to the selectMenu equivalent (e.g., "Brak
danych"), noMatch to "Brak pasujących danych", and search to "Szukaj..." so the
listbox localization matches selectMenu.

In `@src/runtime/locale/pt_br.ts`:
- Around line 103-107: The listbox object currently contains English strings;
update the values in the listbox property (listbox.noData, listbox.noMatch,
listbox.search) to Portuguese (Brazil) — e.g. replace 'No data' with 'Sem
dados', 'No matching data' with 'Nenhum dado correspondente', and 'Search...'
with 'Pesquisar...' so they match the rest of the pt-BR locale.

In `@src/runtime/locale/pt.ts`:
- Around line 103-107: The Portuguese locale's listbox strings are still in
English; update the object properties listbox.noData, listbox.noMatch, and
listbox.search in the pt locale to their Portuguese translations (e.g., "Sem
dados" / "Nenhum dado correspondente" / "Pesquisar...") so they match the rest
of the pt messages; locate the listbox block in the pt export and replace the
English values with the appropriate Portuguese strings.

In `@src/runtime/locale/ro.ts`:
- Around line 103-107: Replace the English listbox values with Romanian text in
the ro locale: update the listbox object's keys noData, noMatch, and search
inside src/runtime/locale/ro.ts so they read appropriate Romanian phrases (e.g.,
"Fără date" for noData, "Niciun rezultat" or "Nu există date corespunzătoare"
for noMatch, and "Caută..." for search) ensuring the listbox translations are
fully localized.

In `@src/runtime/locale/ru.ts`:
- Around line 103-107: The listbox messages in the ru locale are still in
English; update the listbox object (keys noData, noMatch, search) in
src/runtime/locale/ru.ts to Russian equivalents (e.g., "Нет данных", "Нет
совпадающих данных", "Поиск...") so they match the rest of the Russian
localization.

In `@src/runtime/locale/sk.ts`:
- Around line 103-107: The listbox messages (listbox.noData, listbox.noMatch,
listbox.search) are still in English; replace their values with the
corresponding Slovak translations used in the selectMenu namespace (use the same
strings as selectMenu.noData, selectMenu.noMatch, selectMenu.search) so listbox
matches the rest of the Slovak locale.

In `@src/runtime/locale/sl.ts`:
- Around line 103-107: The listbox translations are in English; update the
listbox object (listbox) to use the same Slovenian strings as selectMenu (e.g.,
replace 'No data', 'No matching data', 'Search...' with the corresponding
selectMenu translations such as selectMenu.noData, selectMenu.noMatch,
selectMenu.search) so listbox entries match the existing Slovenian localization
in selectMenu.

In `@src/runtime/locale/sq.ts`:
- Around line 103-107: The listbox strings in the Albanian locale are still in
English; update the listbox translations by replacing listbox.noData,
listbox.noMatch, and listbox.search in sq.ts with Albanian text (e.g., "Nuk ka
të dhëna" for noData, "Asnjë rezultat përputhës" for noMatch, and "Kërko..." for
search) so the keys are localized consistently with the rest of the file.

In `@src/runtime/locale/sv.ts`:
- Around line 103-107: Replace the English listbox messages with Swedish
translations by updating the listbox object keys (listbox.noData,
listbox.noMatch, listbox.search) to their Swedish equivalents: set noData to
"Inga data", noMatch to "Ingen matchning" (or "Inga matchande data" to match
tone in selectMenu), and search to "Sök..."; ensure you modify the listbox block
(symbol: listbox) in src/runtime/locale/sv.ts to keep translations consistent
with selectMenu.

In `@src/runtime/locale/th.ts`:
- Around line 103-107: The listbox block in the Thai locale currently contains
English strings; update the `listbox` object in src/runtime/locale/th.ts by
replacing the values for `noData`, `noMatch`, and `search` with Thai
translations (e.g., `noData`: "ไม่มีข้อมูล", `noMatch`: "ไม่พบข้อมูลที่ตรงกัน",
`search`: "ค้นหา...") so the `listbox` messages are localized; keep the same
keys (`listbox`, `noData`, `noMatch`, `search`) unchanged.

In `@src/runtime/locale/tj.ts`:
- Around line 103-107: The Tajik locale object contains an untranslated listbox
block; update the listbox keys in src/runtime/locale/tj.ts so that
listbox.noData, listbox.noMatch, and listbox.search are translated into Tajik
(replace the English strings 'No data', 'No matching data', 'Search...' with
appropriate Tajik equivalents) while preserving the key names and object
structure.

In `@src/runtime/locale/tr.ts`:
- Around line 103-107: Translate the English listbox messages into Turkish by
replacing the values for the listbox object keys (noData, noMatch, search) in
the existing locale export; update the strings for listbox.noData,
listbox.noMatch, and listbox.search with appropriate Turkish translations while
preserving the property names and surrounding structure in the tr locale module.

In `@src/runtime/locale/ug_cn.ts`:
- Around line 104-108: Replace the English placeholders in the ug-CN locale's
listbox object by providing Uyghur translations for the keys noData, noMatch,
and search: set noData to "مالۇمات يوق", noMatch to "ماس كېلىدىغان مالۇمات يوق",
and search to "ئىزدەش..." so the listbox translations in the ug_CN export are
localized.

In `@src/runtime/locale/uk.ts`:
- Around line 103-107: The listbox messages (the listbox object with keys
noData, noMatch, search) are still in English; replace their values with
Ukrainian translations — e.g., set noData to "Немає даних", noMatch to "Нічого
не знайдено" (or "Немає співпадінь") and search to "Пошук..." — by updating the
listbox object in src/runtime/locale/uk.ts so the three keys contain the
Ukrainian strings.

In `@src/runtime/locale/ur.ts`:
- Around line 104-108: The messages.listbox object currently contains English
strings; replace them with Urdu translations for the keys noData, noMatch and
search so the locale is consistent (update the listbox property inside the
exported messages object in ur.ts, e.g., change messages.listbox.noData,
messages.listbox.noMatch and messages.listbox.search to their Urdu equivalents).

In `@src/runtime/locale/uz.ts`:
- Around line 103-107: Replace the English placeholders in the Uzbek locale's
listbox object by translating the three keys listbox.noData, listbox.noMatch,
and listbox.search into Uzbek; update those string values so the UI strings are
fully localized (e.g., provide Uzbek equivalents for "No data", "No matching
data", and "Search...") while keeping the keys and object structure unchanged.

In `@src/runtime/locale/vi.ts`:
- Around line 103-107: The vi locale's listbox object currently contains English
strings; replace the values for listbox.noData, listbox.noMatch, and
listbox.search in the vi export with proper Vietnamese translations (e.g.,
"Không có dữ liệu", "Không có dữ liệu phù hợp", "Tìm kiếm...") so the vi locale
is fully localized; update the listbox object in src/runtime/locale/vi.ts (keys:
listbox.noData, listbox.noMatch, listbox.search).

In `@src/runtime/locale/zh_cn.ts`:
- Around line 103-107: Translate the English strings in the listbox object to
Simplified Chinese by replacing the values of the keys noData, noMatch, and
search in the listbox export (listbox.noData, listbox.noMatch, listbox.search)
with appropriate Chinese text (e.g., "无数据", "无匹配数据", "搜索...") so they match the
rest of the zh_cn locale translations.

In `@src/runtime/locale/zh_tw.ts`:
- Around line 103-107: The listbox translations in the zh-TW locale are still in
English; update the listbox object (keys noData, noMatch, search inside the
exported locale in zh_tw.ts) to proper Traditional Chinese strings (e.g., "沒有資料"
for noData, "找不到相符的資料" for noMatch, and "搜尋..." for search) so the UI is fully
localized.

---

Nitpick comments:
In `@src/runtime/components/Listbox.vue`:
- Around line 15-28: The exported interface ListboxItem conflicts by name with
the Reka UI ListboxItem component; rename the interface (e.g. ListboxItemType or
ListboxData) and update all references and exports to the new name (including
any uses in props, emits, or other type annotations), ensure the Reka UI
component import remains unchanged, and run a project-wide replace for
ListboxItem -> ListboxItemType only where it refers to the type (not the
component) to avoid breaking the component import.

In `@src/runtime/locale/en.ts`:
- Around line 98-102: The English locale entry listbox.search currently uses
three ASCII dots ("Search...") which is inconsistent with the file's use of the
single-character ellipsis; update the value of listbox.search to use the Unicode
ellipsis character ("Search…") so it matches the existing style across the
locale file.

In `@test/components/Listbox.spec.ts`:
- Around line 59-74: Add a brief comment above the accessibility test in
Listbox.spec.ts explaining why the axe rule 'aria-input-field-name' is disabled
(e.g., known limitation or intentional behavior of ListboxRoot/Listbox component
when using ariaLabel or custom labeling), so future maintainers know this is
deliberate; reference the test block that mounts Listbox with props/modelValue
and attrs. Ensure the comment names the exact rule ('aria-input-field-name') and
the component (Listbox or ListboxRoot) and states the reason or a link to an
issue/PR if applicable.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: f8443934-a74f-4692-b0d6-ae40991502d3

📥 Commits

Reviewing files that changed from the base of the PR and between faf6fbe and c13dc6c.

⛔ Files ignored due to path filters (2)
  • test/components/__snapshots__/Listbox-vue.spec.ts.snap is excluded by !**/*.snap
  • test/components/__snapshots__/Listbox.spec.ts.snap is excluded by !**/*.snap
📒 Files selected for processing (77)
  • docs/app/components/content/examples/form/FormExampleElements.vue
  • docs/app/components/content/examples/listbox/ListboxAvatarExample.vue
  • docs/app/components/content/examples/listbox/ListboxDescriptionExample.vue
  • docs/app/components/content/examples/listbox/ListboxModelValueExample.vue
  • docs/app/components/content/examples/listbox/ListboxMultipleExample.vue
  • docs/app/components/content/examples/listbox/ListboxTransferListExample.vue
  • docs/app/components/content/examples/listbox/ListboxVirtualizeExample.vue
  • docs/content/docs/2.components/listbox.md
  • playgrounds/nuxt/app/composables/useNavigation.ts
  • playgrounds/nuxt/app/pages/components/listbox.vue
  • src/runtime/components/Listbox.vue
  • src/runtime/locale/ar.ts
  • src/runtime/locale/az.ts
  • src/runtime/locale/be.ts
  • src/runtime/locale/bg.ts
  • src/runtime/locale/bn.ts
  • src/runtime/locale/ca.ts
  • src/runtime/locale/ckb.ts
  • src/runtime/locale/cs.ts
  • src/runtime/locale/da.ts
  • src/runtime/locale/de.ts
  • src/runtime/locale/de_ch.ts
  • src/runtime/locale/el.ts
  • src/runtime/locale/en.ts
  • src/runtime/locale/es.ts
  • src/runtime/locale/et.ts
  • src/runtime/locale/eu.ts
  • src/runtime/locale/fa_ir.ts
  • src/runtime/locale/fi.ts
  • src/runtime/locale/fr.ts
  • src/runtime/locale/gl.ts
  • src/runtime/locale/he.ts
  • src/runtime/locale/hi.ts
  • src/runtime/locale/hr.ts
  • src/runtime/locale/hu.ts
  • src/runtime/locale/hy.ts
  • src/runtime/locale/id.ts
  • src/runtime/locale/is.ts
  • src/runtime/locale/it.ts
  • src/runtime/locale/ja.ts
  • src/runtime/locale/ka.ts
  • src/runtime/locale/kk.ts
  • src/runtime/locale/km.ts
  • src/runtime/locale/ko.ts
  • src/runtime/locale/ky.ts
  • src/runtime/locale/lb.ts
  • src/runtime/locale/lo.ts
  • src/runtime/locale/lt.ts
  • src/runtime/locale/mn.ts
  • src/runtime/locale/ms.ts
  • src/runtime/locale/nb_no.ts
  • src/runtime/locale/nl.ts
  • src/runtime/locale/pl.ts
  • src/runtime/locale/pt.ts
  • src/runtime/locale/pt_br.ts
  • src/runtime/locale/ro.ts
  • src/runtime/locale/ru.ts
  • src/runtime/locale/sk.ts
  • src/runtime/locale/sl.ts
  • src/runtime/locale/sq.ts
  • src/runtime/locale/sv.ts
  • src/runtime/locale/th.ts
  • src/runtime/locale/tj.ts
  • src/runtime/locale/tr.ts
  • src/runtime/locale/ug_cn.ts
  • src/runtime/locale/uk.ts
  • src/runtime/locale/ur.ts
  • src/runtime/locale/uz.ts
  • src/runtime/locale/vi.ts
  • src/runtime/locale/zh_cn.ts
  • src/runtime/locale/zh_tw.ts
  • src/runtime/types/index.ts
  • src/runtime/types/locale.ts
  • src/theme/index.ts
  • src/theme/listbox.ts
  • test/components/Listbox.spec.ts
  • test/utils/form.ts

@pkg-pr-new
Copy link
Copy Markdown

pkg-pr-new Bot commented Apr 6, 2026

npm i https://pkg.pr.new/@nuxt/ui@6307

commit: 8e9f7db

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 9

🧹 Nitpick comments (2)
src/runtime/components/Listbox.vue (2)

9-9: Split the ../types import into one-per-line import type statements.

Line 9 groups four types into a single declaration, which breaks the repo’s TS/Vue import rule.

♻️ Suggested cleanup
-import type { AvatarProps, ChipProps, IconProps, InputProps } from '../types'
+import type { AvatarProps } 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/Listbox.vue` at line 9, The grouped type import
"import type { AvatarProps, ChipProps, IconProps, InputProps } from '../types'"
should be split into separate single-line type imports; replace that single
statement with four lines each using "import type" for AvatarProps, ChipProps,
IconProps, and InputProps so each type is imported on its own line (locate the
import in Listbox.vue and update the import for AvatarProps, ChipProps,
IconProps, InputProps accordingly).

150-159: Use the shared Reka prop-forwarding helpers here.

This wrapper hand-threads the forwarded root props into <ListboxRoot>, which is exactly the drift reactivePick + useForwardPropsEmits is meant to avoid for new Reka-based components.

Based on learnings, "Use reactivePick and useForwardPropsEmits to forward Reka UI props in components".

Also applies to: 207-221

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@src/runtime/components/Listbox.vue` around lines 150 - 159, The component is
manually hand-threading forwarded root props into ListboxRoot; replace that
pattern by using the shared Reka helpers: create props via
defineProps/withDefaults as you already do, then in setup call
reactivePick(props, forwardPropsKeys) (or the project's equivalent) and
useForwardPropsEmits(props, emits) to produce the forwarded props/emits object,
and pass that object into <ListboxRoot> instead of manually mapping each prop;
update the places where manual forwarding occurs (the current props handling and
the other forwarding site) to use reactivePick and useForwardPropsEmits so
forwarding is consistent and reactive.
🤖 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/Listbox.vue`:
- Around line 200-202: The virtualization estimate is using props.size instead
of the resolved form field size, causing default 'md' to be used when size is
inherited; update the defu return call so getEstimateSize uses the resolved size
(size.value from useFormField) instead of props.size, leaving other args
(filteredItems.value, props.descriptionKey, slots['item-description']) unchanged
so offsets reflect the actual rendered form size.
- Around line 297-300: The v-for on RekaListboxItem uses the loop index as the
:key which causes unstable identity when filteredItems changes (e.g., on
searchTerm updates); change the key to a stable unique identifier from the item
(for example use item.id or another unique property such as item.value) in the
RekaListboxItem v-for, and ensure every item in filteredItems has that unique
property so Vue can correctly preserve component identity and avoid stale
highlight/internal state.
- Around line 82-86: The searchable prop type is misleading because
Omit<InputProps, 'modelValue' | 'defaultValue'> suggests placeholder/icon from
that object will be honored, but the template binds explicit placeholder/icon
after v-bind which overrides them; either update the type to exclude placeholder
and icon (e.g., remove those keys from the Omit so searchable?: boolean |
Omit<InputProps,'modelValue'|'defaultValue'|'placeholder'|'icon'>) or change the
template binding in Listbox.vue (the element using v-bind="searchable") so the
spread happens first and explicit :placeholder and :icon use a coalescing
pattern (e.g., :placeholder="placeholder ?? searchable.placeholder" and similar
for icon) to let object values win when dedicated props are unset.

In `@src/runtime/locale/ca.ts`:
- Around line 103-107: The listbox object currently hardcodes English strings;
update listbox to reuse the locale's existing translations by assigning
listbox.noData, listbox.noMatch, and listbox.search to the locale's existing
noData / noMatch / search values (i.e., reference the already-defined keys
rather than new English literals), so the Listbox uses the same translated
strings as the rest of this locale.

In `@src/runtime/locale/he.ts`:
- Around line 104-108: The listbox object in src/runtime/locale/he.ts currently
hardcodes English strings; replace them to reuse the module's existing Hebrew
translations by assigning the module-level keys instead of literals—i.e., set
listbox.noData = noData, listbox.noMatch = noMatch, and listbox.search = search
so the Listbox uses the locale's existing translations rather than the English
hardcoded values.

In `@src/runtime/locale/it.ts`:
- Around line 103-107: The listbox object currently uses English literals for
noData/noMatch/search; replace those hardcoded strings by reusing this locale’s
existing translations for noData, noMatch and search (i.e., set listbox.noData,
listbox.noMatch and listbox.search to reference the already-defined
noData/noMatch/search keys in the same locale object rather than new English
strings) so the Listbox renders the correct Italian text.

In `@src/runtime/locale/lo.ts`:
- Around line 103-107: The listbox object currently hardcodes English strings;
replace those literals with references to the locale's existing translations so
they reuse the same copies (i.e., set listbox.noData, listbox.noMatch and
listbox.search to use the module's existing noData, noMatch and search values
instead of the English literals). Locate the listbox object and update its
noData/noMatch/search entries to reference the top-level noData, noMatch and
search symbols in this locale file so the UI is consistently localized.

In `@src/runtime/locale/ro.ts`:
- Around line 103-107: Replace the hard-coded English strings in the listbox
object with the locale's existing translations by referencing the
already-defined keys for noData, noMatch and search in this locale file (use the
same identifiers used elsewhere in this module rather than literal 'No data'/'No
matching data'/'Search…'); update the listbox property so it assigns
listbox.noData = <existing noData key>, listbox.noMatch = <existing noMatch
key>, and listbox.search = <existing search key> to ensure the Listbox reuses
the locale's translations.

In `@src/runtime/locale/ug_cn.ts`:
- Around line 104-108: The listbox object currently hardcodes English strings;
replace those with the locale's existing keys so the same translations are used.
Specifically, in the ug_cn locale export update listbox to reuse the existing
noData, noMatch and search values (e.g., set listbox.noData to the module's
noData key, listbox.noMatch to noMatch, and listbox.search to search) instead of
the English literals so the UI is consistently localized.

---

Nitpick comments:
In `@src/runtime/components/Listbox.vue`:
- Line 9: The grouped type import "import type { AvatarProps, ChipProps,
IconProps, InputProps } from '../types'" should be split into separate
single-line type imports; replace that single statement with four lines each
using "import type" for AvatarProps, ChipProps, IconProps, and InputProps so
each type is imported on its own line (locate the import in Listbox.vue and
update the import for AvatarProps, ChipProps, IconProps, InputProps
accordingly).
- Around line 150-159: The component is manually hand-threading forwarded root
props into ListboxRoot; replace that pattern by using the shared Reka helpers:
create props via defineProps/withDefaults as you already do, then in setup call
reactivePick(props, forwardPropsKeys) (or the project's equivalent) and
useForwardPropsEmits(props, emits) to produce the forwarded props/emits object,
and pass that object into <ListboxRoot> instead of manually mapping each prop;
update the places where manual forwarding occurs (the current props handling and
the other forwarding site) to use reactivePick and useForwardPropsEmits so
forwarding is consistent and reactive.
🪄 Autofix (Beta)

❌ Autofix failed (check again to retry)

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: cd4aebb4-9591-4e9c-9c26-ff6b2da85d0c

📥 Commits

Reviewing files that changed from the base of the PR and between c13dc6c and 45fd66d.

📒 Files selected for processing (61)
  • src/runtime/components/Listbox.vue
  • src/runtime/locale/ar.ts
  • src/runtime/locale/az.ts
  • src/runtime/locale/be.ts
  • src/runtime/locale/bg.ts
  • src/runtime/locale/bn.ts
  • src/runtime/locale/ca.ts
  • src/runtime/locale/ckb.ts
  • src/runtime/locale/cs.ts
  • src/runtime/locale/da.ts
  • src/runtime/locale/de.ts
  • src/runtime/locale/de_ch.ts
  • src/runtime/locale/el.ts
  • src/runtime/locale/en.ts
  • src/runtime/locale/es.ts
  • src/runtime/locale/et.ts
  • src/runtime/locale/eu.ts
  • src/runtime/locale/fa_ir.ts
  • src/runtime/locale/fi.ts
  • src/runtime/locale/fr.ts
  • src/runtime/locale/gl.ts
  • src/runtime/locale/he.ts
  • src/runtime/locale/hi.ts
  • src/runtime/locale/hr.ts
  • src/runtime/locale/hu.ts
  • src/runtime/locale/hy.ts
  • src/runtime/locale/id.ts
  • src/runtime/locale/is.ts
  • src/runtime/locale/it.ts
  • src/runtime/locale/ja.ts
  • src/runtime/locale/ka.ts
  • src/runtime/locale/kk.ts
  • src/runtime/locale/km.ts
  • src/runtime/locale/ko.ts
  • src/runtime/locale/ky.ts
  • src/runtime/locale/lb.ts
  • src/runtime/locale/lo.ts
  • src/runtime/locale/lt.ts
  • src/runtime/locale/mn.ts
  • src/runtime/locale/ms.ts
  • src/runtime/locale/nb_no.ts
  • src/runtime/locale/nl.ts
  • src/runtime/locale/pl.ts
  • src/runtime/locale/pt.ts
  • src/runtime/locale/pt_br.ts
  • src/runtime/locale/ro.ts
  • src/runtime/locale/ru.ts
  • src/runtime/locale/sk.ts
  • src/runtime/locale/sl.ts
  • src/runtime/locale/sq.ts
  • src/runtime/locale/sv.ts
  • src/runtime/locale/th.ts
  • src/runtime/locale/tj.ts
  • src/runtime/locale/tr.ts
  • src/runtime/locale/ug_cn.ts
  • src/runtime/locale/uk.ts
  • src/runtime/locale/ur.ts
  • src/runtime/locale/uz.ts
  • src/runtime/locale/vi.ts
  • src/runtime/locale/zh_cn.ts
  • src/runtime/locale/zh_tw.ts
✅ Files skipped from review due to trivial changes (24)
  • src/runtime/locale/sv.ts
  • src/runtime/locale/az.ts
  • src/runtime/locale/hu.ts
  • src/runtime/locale/hy.ts
  • src/runtime/locale/is.ts
  • src/runtime/locale/lb.ts
  • src/runtime/locale/de_ch.ts
  • src/runtime/locale/ms.ts
  • src/runtime/locale/en.ts
  • src/runtime/locale/es.ts
  • src/runtime/locale/bn.ts
  • src/runtime/locale/gl.ts
  • src/runtime/locale/ka.ts
  • src/runtime/locale/nb_no.ts
  • src/runtime/locale/pl.ts
  • src/runtime/locale/fi.ts
  • src/runtime/locale/sl.ts
  • src/runtime/locale/uz.ts
  • src/runtime/locale/sq.ts
  • src/runtime/locale/mn.ts
  • src/runtime/locale/zh_cn.ts
  • src/runtime/locale/vi.ts
  • src/runtime/locale/sk.ts
  • src/runtime/locale/nl.ts
🚧 Files skipped from review as they are similar to previous changes (30)
  • src/runtime/locale/de.ts
  • src/runtime/locale/ar.ts
  • src/runtime/locale/da.ts
  • src/runtime/locale/ko.ts
  • src/runtime/locale/hr.ts
  • src/runtime/locale/bg.ts
  • src/runtime/locale/el.ts
  • src/runtime/locale/be.ts
  • src/runtime/locale/id.ts
  • src/runtime/locale/hi.ts
  • src/runtime/locale/tr.ts
  • src/runtime/locale/fr.ts
  • src/runtime/locale/ru.ts
  • src/runtime/locale/ja.ts
  • src/runtime/locale/zh_tw.ts
  • src/runtime/locale/pt_br.ts
  • src/runtime/locale/lt.ts
  • src/runtime/locale/ky.ts
  • src/runtime/locale/km.ts
  • src/runtime/locale/ur.ts
  • src/runtime/locale/uk.ts
  • src/runtime/locale/pt.ts
  • src/runtime/locale/tj.ts
  • src/runtime/locale/et.ts
  • src/runtime/locale/th.ts
  • src/runtime/locale/eu.ts
  • src/runtime/locale/kk.ts
  • src/runtime/locale/ckb.ts
  • src/runtime/locale/cs.ts
  • src/runtime/locale/fa_ir.ts

Comment thread src/runtime/components/Listbox.vue Outdated
Comment thread src/runtime/components/Listbox.vue Outdated
Comment thread src/runtime/components/Listbox.vue Outdated
Comment thread src/runtime/locale/ca.ts
Comment thread src/runtime/locale/he.ts
Comment thread src/runtime/locale/it.ts
Comment thread src/runtime/locale/lo.ts
Comment thread src/runtime/locale/ro.ts
Comment thread src/runtime/locale/ug_cn.ts
@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 6, 2026

Note

Autofix is a beta feature. Expect some limitations and changes as we gather feedback and continue to improve it.

Autofix skipped. No unresolved CodeRabbit review comments with fix instructions found.

@benjamincanac benjamincanac changed the title feat(components): implement new Listbox component feat(Listbox): new component Apr 6, 2026
Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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/runtime/locale/en.ts`:
- Line 129: The test is using ASCII dots while the locale's thinking string uses
the ellipsis character: update the assertion in ChatReasoning.spec.ts that
currently uses text: 'Thinking...' to use the locale's ellipsis form text:
'Thinking…' so it matches the value defined by the thinking entry in the locale
(src/runtime/locale/en.ts).
🪄 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: d21bcee5-cac4-4d89-9132-b7d426a43c0c

📥 Commits

Reviewing files that changed from the base of the PR and between 89f78bf and 3f930e1.

📒 Files selected for processing (61)
  • src/runtime/locale/ar.ts
  • src/runtime/locale/az.ts
  • src/runtime/locale/be.ts
  • src/runtime/locale/bg.ts
  • src/runtime/locale/bn.ts
  • src/runtime/locale/ca.ts
  • src/runtime/locale/ckb.ts
  • src/runtime/locale/cs.ts
  • src/runtime/locale/da.ts
  • src/runtime/locale/de.ts
  • src/runtime/locale/de_ch.ts
  • src/runtime/locale/el.ts
  • src/runtime/locale/en.ts
  • src/runtime/locale/es.ts
  • src/runtime/locale/et.ts
  • src/runtime/locale/eu.ts
  • src/runtime/locale/fa_ir.ts
  • src/runtime/locale/fi.ts
  • src/runtime/locale/fr.ts
  • src/runtime/locale/gl.ts
  • src/runtime/locale/he.ts
  • src/runtime/locale/hi.ts
  • src/runtime/locale/hr.ts
  • src/runtime/locale/hu.ts
  • src/runtime/locale/hy.ts
  • src/runtime/locale/id.ts
  • src/runtime/locale/is.ts
  • src/runtime/locale/it.ts
  • src/runtime/locale/ja.ts
  • src/runtime/locale/ka.ts
  • src/runtime/locale/kk.ts
  • src/runtime/locale/km.ts
  • src/runtime/locale/ko.ts
  • src/runtime/locale/ky.ts
  • src/runtime/locale/lb.ts
  • src/runtime/locale/lo.ts
  • src/runtime/locale/lt.ts
  • src/runtime/locale/mn.ts
  • src/runtime/locale/ms.ts
  • src/runtime/locale/nb_no.ts
  • src/runtime/locale/nl.ts
  • src/runtime/locale/pl.ts
  • src/runtime/locale/pt.ts
  • src/runtime/locale/pt_br.ts
  • src/runtime/locale/ro.ts
  • src/runtime/locale/ru.ts
  • src/runtime/locale/sk.ts
  • src/runtime/locale/sl.ts
  • src/runtime/locale/sq.ts
  • src/runtime/locale/sv.ts
  • src/runtime/locale/th.ts
  • src/runtime/locale/tj.ts
  • src/runtime/locale/tr.ts
  • src/runtime/locale/ug_cn.ts
  • src/runtime/locale/uk.ts
  • src/runtime/locale/ur.ts
  • src/runtime/locale/uz.ts
  • src/runtime/locale/vi.ts
  • src/runtime/locale/zh_cn.ts
  • src/runtime/locale/zh_tw.ts
  • src/runtime/types/locale.ts
✅ Files skipped from review due to trivial changes (38)
  • src/runtime/locale/hu.ts
  • src/runtime/locale/sk.ts
  • src/runtime/locale/lb.ts
  • src/runtime/locale/ko.ts
  • src/runtime/locale/hr.ts
  • src/runtime/locale/lt.ts
  • src/runtime/locale/nl.ts
  • src/runtime/locale/da.ts
  • src/runtime/locale/km.ts
  • src/runtime/locale/es.ts
  • src/runtime/locale/sv.ts
  • src/runtime/locale/bg.ts
  • src/runtime/locale/he.ts
  • src/runtime/locale/ms.ts
  • src/runtime/locale/ar.ts
  • src/runtime/locale/sq.ts
  • src/runtime/locale/gl.ts
  • src/runtime/locale/pl.ts
  • src/runtime/locale/kk.ts
  • src/runtime/locale/zh_tw.ts
  • src/runtime/locale/ja.ts
  • src/runtime/locale/mn.ts
  • src/runtime/locale/ro.ts
  • src/runtime/locale/fa_ir.ts
  • src/runtime/locale/zh_cn.ts
  • src/runtime/locale/tr.ts
  • src/runtime/locale/bn.ts
  • src/runtime/locale/az.ts
  • src/runtime/locale/be.ts
  • src/runtime/locale/uk.ts
  • src/runtime/locale/vi.ts
  • src/runtime/locale/nb_no.ts
  • src/runtime/locale/uz.ts
  • src/runtime/locale/ky.ts
  • src/runtime/locale/it.ts
  • src/runtime/locale/is.ts
  • src/runtime/locale/ur.ts
  • src/runtime/locale/de_ch.ts
🚧 Files skipped from review as they are similar to previous changes (18)
  • src/runtime/locale/hy.ts
  • src/runtime/locale/ka.ts
  • src/runtime/types/locale.ts
  • src/runtime/locale/ru.ts
  • src/runtime/locale/hi.ts
  • src/runtime/locale/sl.ts
  • src/runtime/locale/ca.ts
  • src/runtime/locale/cs.ts
  • src/runtime/locale/pt_br.ts
  • src/runtime/locale/th.ts
  • src/runtime/locale/el.ts
  • src/runtime/locale/ug_cn.ts
  • src/runtime/locale/eu.ts
  • src/runtime/locale/id.ts
  • src/runtime/locale/ckb.ts
  • src/runtime/locale/pt.ts
  • src/runtime/locale/lo.ts
  • src/runtime/locale/et.ts

Comment thread src/runtime/locale/en.ts
Copy link
Copy Markdown
Member

@benjamincanac benjamincanac left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@J-Michalek I've made a few changes, feel free to double check (sorry for the commit messages).

return
}

if (props.modelModifiers?.trim && (typeof value === 'string' || value === null || value === undefined)) {
Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The handling of modelModifiers seems to be duplicated a few times in the codebase, perhaps we should extract it into a function/composable.

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let's do this in another PR!

@J-Michalek
Copy link
Copy Markdown
Contributor Author

@benjamincanac Just a nitpick here, otherwise LGTM!

@benjamincanac benjamincanac merged commit 00c1651 into nuxt:v4 Apr 22, 2026
18 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

v4 #4488

Projects

None yet

Development

Successfully merging this pull request may close these issues.

PickList/TransferList: new component

2 participants