\n \u003C/template>\n\n \u003Ctemplate #item=\"{ item }\">\n \u003Cspan v-text=\"item.label\" />\n \u003C/template>\n\u003C/UDropdownMenu>\n```",[3137,3140],{"name":3138,"color":3139},"question","d876e3",{"name":3141,"color":3142},"v3","49DCB8",4636,"nuxt","ui","open","DropdownMenu keyboard interaction handling","2025-07-31T06:44:47Z","https://github.com/nuxt/ui/issues/4636",0.73876494,{"description":3152,"labels":3153,"number":3158,"owner":3144,"repository":3145,"state":3146,"title":3159,"updated_at":3160,"url":3161,"score":3162},"### Description\n\nDiscovering **Nuxt UI** and **Nuxt UI Pro** has been one of the highlights of 2024 for me. These libraries have saved me countless hours while delivering polished, tested, and consistent components that elevate the aesthetic and functional quality of my projects. I admire the exceptional work being done by @benjamincanac and the team, particularly with the ambitious mission of rewriting the library to embrace both TailwindCSS v4 and Reka UI within Nuxt UI v3.\n\nOne of the standout features in v3 has been the integration of **TanStack Tables** into the `UTable` component, adding to tables many new features and possibilities. However, after some usage in real-world scenarios, I’ve noticed a gap: a wider variety of input components.\n\nI know that v3 is still in alpha, but I’d like to propose a new initiative for a future release, which I’m calling \"**The Inputs Update**\". This RFP could focus on identifying and implementing input components that would further enhance the library’s usability and versatility.\n\nAdditionally, this aligns with a prior suggestion to categorize form-related components separately within the documentation (#3019).\n\n## New Components\n\n- [ ] **`UInputCurrency`**\nWhile `UInputNumber` provides basic formatting options, a dedicated `UInputCurrency` component would offer enhanced functionality for handling monetary inputs, especially in scenarios requiring localized formatting.\n\n _Related: #1704_\n\n- [ ] **`UInputColor`**\nCurrently, there is an [example](https://ui3.nuxt.dev/getting-started#as-a-color-chooser) in `UColorPicker`, but it feels verbose and lacks certain key features, such as a text input for users to paste HEX or RGB values. \u003Cbr>\u003Cimg width=\"168\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/3c11e311-aaa0-4db1-995f-80b15f04ceb7\" />\n\n- [ ] **`UInputEditor`**\nSince Reka UI lacks a native editor component, I recommend integrating a third-party solution like [Quill](https://quilljs.com) or [TipTap](https://tiptap.dev) (which already offers Nuxt/Vue support). Although previously dismissed by the author, this feature remains highly requested by the community. \u003Cbr>\u003Cimg width=\"1009\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/4862e9e8-4769-4bd3-a40e-bc89cea5d1a1\" />\n_Related: #2698, #1889, #791_\n\n- [ ] **`UInputTime`**\nImplement the `TimeField` component from Reka UI, this component could support single and range-based time selection.\n_Related: #3089, #3969, #4634_ \u003Cbr>\u003Cimg width=\"175\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7e338f95-eae3-4ef8-81cc-b3db28553b4e\" />\n\n- [ ] **`UInputDate`**\nImplementation of Reka UI’s `DatePicker` and `DateRangePicker`. \u003Cbr>\u003Cimg width=\"608\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/fcae5c2d-50ed-4b8b-ac89-b3272626fd48\" />\n_Related: #2524, #2873_\n\n- [ ] **`UInputDateTime`**\nA hybrid component combining `UInputDate` and `UInputTime` for scenarios requiring both date and time inputs. \u003Cbr>\u003Cimg width=\"303\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/2372467f-ca86-44a0-9667-6dc3ffa43247\" />\n\n- [ ] **`UInputMonth`**\nIdeal for cases where users need to select a combination of month and year. \u003Cbr>\u003Cimg width=\"249\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/7ee72087-0d58-47ca-b0f7-b5c239148d91\" />\n\n- [ ] **`UInputYear`**\nA simpler component for year-only selection. \u003Cbr>\u003Cimg width=\"247\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/a841c974-43b7-42a1-ac3c-7fb42e85fafc\" />\n\n- [ ] **`UInputMask`**\nMasked inputs are indispensable for formatting fields like postal codes or national IDs. I suggest leveraging [Vue The Mask](https://github.com/vuejs-tips/vue-the-mask) for implementation. \u003Cbr>\u003Cimg width=\"316\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/b2a3150f-a29e-40ad-96c1-32a63b3bd9ac\" />\n_Related: #1303, #510_\n\n- [ ] **`UInputPhone`**\nA phone input with internationalization support, much like `LocaleSelect` (which already displays flags and country names). The [libphonenumber-js](https://www.npmjs.com/package/libphonenumber-js) library could serve as the foundation. \u003Cbr>\u003Cimg width=\"312\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/893a1bf3-130c-49da-b41e-8ebf468569a4\" />\n_Related: #2815_\n\n## Updates to Existing Components\n\n- [ ] **`UPinInput → UInputPin`**\nRename the existing `UPinInput` component to align with the naming convention used across other input components.\n\n- [ ] **`UInput / UTextarea`**\nAdd a native character counter via a `counter` property, configurable using the `min` and/or `max` attributes. Currently, there is an [example](https://ui3.nuxt.dev/components/input#with-character-limit) for this functionality, but a native implementation would improve the developer experience.\n\n### Additional context\n\n_No response_",[3154,3157],{"name":3155,"color":3156},"feature","A27AF6",{"name":3141,"color":3142},3094,"[RFP] The Inputs Update","2025-07-31T02:45:34Z","https://github.com/nuxt/ui/issues/3094",0.7410223,{"description":3164,"labels":3165,"number":3177,"owner":3144,"repository":3145,"state":3178,"title":3179,"updated_at":3180,"url":3181,"score":3182},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nMuch like in https://github.com/nuxt/ui/issues/1387, I have a need to listen for clicks on `\u003CUTable />` rows. `@select` brings you part of the way there, but doesn't make it easy to get access to the full underlying event, for example to check if the user is holding the \u003Ckey>Ctrl\u003C/key>.\n\nSimilarly, even with `@select` I can't see any easy way to focus the table rows using keyboard input. \n\n### Additional context\n\n_No response_",[3166,3169,3172,3175],{"name":3167,"color":3168},"enhancement","a2eeef",{"name":3170,"color":3171},"triage","ffffff",{"name":3173,"color":3174},"closed-by-bot","ededed",{"name":3176,"color":3174},"stale",2796,"closed","UTable row click event","2025-06-18T09:05:27Z","https://github.com/nuxt/ui/issues/2796",0.6328587,{"description":3184,"labels":3185,"number":3190,"owner":3144,"repository":3145,"state":3178,"title":3191,"updated_at":3192,"url":3193,"score":3194},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nTo control the rows of the table, I need a slot for them. For instance, if I want to implement a reorder feature using drag and drop, I require a \u003Ctr> element to loop through.\n\n### Additional context\n\n_No response_",[3186,3187,3188,3189],{"name":3167,"color":3168},{"name":3170,"color":3171},{"name":3173,"color":3174},{"name":3176,"color":3174},2685,"[UTable] Add the functionality to include a slot for all \u003Ctr> elements, as well as a 'default' slot.","2025-06-18T09:05:45Z","https://github.com/nuxt/ui/issues/2685",0.6817255,{"description":3196,"labels":3197,"number":3202,"owner":3144,"repository":3145,"state":3178,"title":3203,"updated_at":3204,"url":3205,"score":3206},"### For what version of Nuxt UI are you asking this question?\n\nv2.x\n\n### Description\n\nI'm wondering if there is an event (similar to ``@select``) for hovering over a table row?\n\nI want to show a popover panel upon hovering over a row\n\nMy current workaround is to insert an action column, and wrap it in a ``UPopover`` component. But preferably, the entire row should act as a trigger\n\nAny suggestions?\n\n```\n\u003Ctemplate #preview-data=\"{ row }\">\n \u003CUPopover \n mode=\"hover\" \n :open-delay=\"300\" \n :disabled=\"isMounted && !grid.sm\"\n :ui=\"{\n ring: 'dark:ring-gray-700'\n }\"\n >\n \u003CUButton icon=\"i-heroicons-identification-20-solid\" color=\"purple\" square />\n\n \u003Ctemplate #panel>\n \u003CRegioloketPreview \n :data=\"row\"\n />\n \u003C/template>\n \u003C/UPopover>\n \u003C/template>\n\n```\n\n",[3198,3199,3201],{"name":3138,"color":3139},{"name":3200,"color":3171},"wontfix-v2",{"name":3141,"color":3142},2435,"@hover event for UTable rows","2025-07-01T14:32:16Z","https://github.com/nuxt/ui/issues/2435",0.68457633,{"description":3208,"labels":3209,"number":3213,"owner":3144,"repository":3145,"state":3178,"title":3214,"updated_at":3215,"url":3216,"score":3217},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nI'm using a Table in my project to display a list of \"Items\" with a summary of their properties. To view the full details of an item, users can click on a row to navigate to a detailed page for that item.\n\nCurrently, I'm using the `@select` event to handle row clicks and navigate to the details page. However, this approach doesn’t support opening the details page in a new tab when users right-click or middle-click on a row.\n\nIs there a way to make each row behave more like a link to support this functionality? Or is there any possibility of adding support for this in a future update?\n\nThank you!\n\n\n### Additional context\n\n_No response_",[3210,3211,3212],{"name":3167,"color":3168},{"name":3200,"color":3171},{"name":3141,"color":3142},2492,"[Feature request] Add link compatibility with Table row","2025-07-01T12:18:07Z","https://github.com/nuxt/ui/issues/2492",0.70412993,{"description":3219,"labels":3220,"number":3224,"owner":3144,"repository":3145,"state":3178,"title":3225,"updated_at":3226,"url":3227,"score":3228},"### Description\n\nHello,\n\nI've spent the last couple of hours trying to implement right-click functionality on UTable rows. I've reviewed existing issues but couldn't find a solution that fits this need.\n\nWhat I want to achieve is to show a UContextMenu with actions related to the clicked row when the user right-clicks on it.\n\nCurrently, there is no way I could find to detect right-click events on individual rows along with their row data. If UTable had a #row slot or a dedicated @click.right event that provides the clicked row’s data, this would be easily achievable.\n\nIf there is any workaround or method to implement this right-click behavior on rows with access to row data, I would really appreciate if someone could share it.\n\nThank you!\n\n\n\n### Additional context\n\n_No response_",[3221,3222,3223],{"name":3167,"color":3168},{"name":3141,"color":3142},{"name":3170,"color":3171},4259,"Add support for @click.right event on UTable rows to enable context menus","2025-07-01T11:16:40Z","https://github.com/nuxt/ui/issues/4259",0.71035624,{"description":3230,"labels":3231,"number":3233,"owner":3144,"repository":3145,"state":3178,"title":3234,"updated_at":3235,"url":3236,"score":3237},"### For what version of Nuxt UI are you suggesting this?\n\nv2\n\n### Description\n\nPlease export `UTable` types in '#ui/types' too (Rows/Columns types).\nThanks\n\n### Additional context\n\n_No response_",[3232],{"name":3167,"color":3168},2373,"UTable types","2024-10-15T09:05:21Z","https://github.com/nuxt/ui/issues/2373",0.7158529,{"description":3239,"labels":3240,"number":3245,"owner":3144,"repository":3145,"state":3178,"title":3246,"updated_at":3247,"url":3248,"score":3249},"### For what version of Nuxt UI are you suggesting this?\n\nv2.x\n\n### Description\n\nHi I would like to have within the component UselectMenu emit the event \"scroll\" \nwith the following properties: \n```\n{\n target: HTMLElement, \n currentTarget: HTMLElement, \n scrollTop: number,\n scrollHeight: number, \n clientHeight: number, \n}\n```\n\n to dynamically remote search items through an api and append it dynamically to my USelectMenu to create an infinite scroll. \n\nThis feature would be great in both version :)\n\n### Additional context\n\n_No response_",[3241,3242,3243,3244],{"name":3167,"color":3168},{"name":3170,"color":3171},{"name":3173,"color":3174},{"name":3176,"color":3174},2793,"add an emit \"scroll\" event for USelectMenu","2025-06-18T09:05:29Z","https://github.com/nuxt/ui/issues/2793",0.72350854,{"description":3251,"labels":3252,"number":3256,"owner":3144,"repository":3145,"state":3178,"title":3257,"updated_at":3258,"url":3259,"score":3260},"### Description\n\nCurrently, the table component (\u003Cutable>) in NuxtUI lacks the ability to set colspan and rowspan for cells within the table. Adding this feature would enhance the capability and flexibility in structuring more complex table data.\n\n### Additional context\n\n_No response_",[3253,3254,3255],{"name":3167,"color":3168},{"name":3200,"color":3171},{"name":3141,"color":3142},1651,"Add colspan and rowspan support for table","2025-07-01T12:05:52Z","https://github.com/nuxt/ui/issues/1651",0.72612834,["Reactive",3262],{},["Set"],["ShallowReactive",3265],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fp_99x49iftwIrsN8niai8IM0HpI9fkz91RX7R2e58oM":-1},"/nuxt/ui/2851"]