` 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_",[2014,2017],{"name":2015,"color":2016},"enhancement","a2eeef",{"name":1988,"color":1989},2796,"UTable row click event","2025-01-23T09:56:08Z","https://github.com/nuxt/ui/issues/2796",0.739852,{"description":2024,"labels":2025,"number":2029,"owner":1991,"repository":1992,"state":1993,"title":2030,"updated_at":2031,"url":2032,"score":2033},"### Description\n\nI am not sure what I am missing, I have added a UBadge into a UDashboardCard but the color/design is wrong:\n\n```html\n \u003CUDashboardCard\n v-if=\"hasDealLinked\"\n title=\"Linked Deal\"\n >\n\n \u003CUBadge\n color=\"red\"\n variant=\"subtle\"\n size=\"xs\"\n >\n {{ linkedItems?.deal.name }}\n \u003C/UBadge>\n \u003C/UDashboardCard>\n```\n\n\nnuxt.config.ts\n```Typescript\n ui: {\n global: true,\n safelistColors: ['red'],\n theme: {\n colors: ['primary', 'secondary', 'info', 'success', 'warning', 'error', 'reverse', 'red']\n }\n },\n```\n\nRender is not a subtle one and border color is never red:\n\n\n\nMany thanks for the help\n",[2026],{"name":2027,"color":2028},"question","d876e3",3378,"UBadge Color and variant","2025-02-24T22:23:23Z","https://github.com/nuxt/ui/issues/3378",0.742193,{"description":2035,"labels":2036,"number":2038,"owner":1991,"repository":1992,"state":2039,"title":2040,"updated_at":2041,"url":2042,"score":2043},"### Description\r\n\r\nFrom the documentation, it does not seem apparent, but it is a useful and common feature to have hover animations over each row in the table with a pointer cursor. The convention is to do something (like go to a separate page) if the user clicks anywhere in the entire row.\r\n\r\n```html\r\n\u003Ctemplate>\r\n \u003CUTable :columns=\"columns\" :rows=\"people\" @click=\"handleRowClick\" />\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst handleRowClick = (person: any): void => {\r\n navigateTo(`/people/${person.id}`)\r\n}\r\n\r\nconst columns = [{\r\n key: 'id',\r\n label: 'ID'\r\n}, {\r\n key: 'name',\r\n label: 'User name'\r\n}, {\r\n key: 'title',\r\n label: 'Job position'\r\n}, {\r\n key: 'email',\r\n label: 'Email'\r\n}, {\r\n key: 'role'\r\n}]\r\n\r\nconst people = [{\r\n id: 1,\r\n name: 'Lindsay Walton',\r\n title: 'Front-end Developer',\r\n email: 'lindsay.walton@example.com',\r\n role: 'Member'\r\n}, {\r\n id: 2,\r\n name: 'Courtney Henry',\r\n title: 'Designer',\r\n email: 'courtney.henry@example.com',\r\n role: 'Admin'\r\n}]\r\n\u003C/script>\r\n```\r\n\r\n### Additional context\r\n\r\n_No response_",[2037],{"name":2015,"color":2016},2156,"closed","[UTable] should have a field to enable hover animations and make them clickable","2024-09-10T16:29:52Z","https://github.com/nuxt/ui/issues/2156",0.70949095,{"description":2045,"labels":2046,"number":2049,"owner":1991,"repository":1992,"state":2039,"title":2050,"updated_at":2051,"url":2052,"score":2053},"### Environment\n\n-\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.16.0\n\n### Reproduction\n\n- \n\n### Description\n\nUpgraded all deps to the latest and bam Nuxt 3.16.0 is added. We get errors now as Nuxt UI 3 still ships with\n\n`'@unhead/vue': 1.11.20(vue@3.5.13(typescript@5.8.2))\n`\n\nAs of Nuxt 3.16.0 ships with @unhead2:\nhttps://nuxt.com/blog/v3-16#unhead-v2\n\nActual error:\n`[@nuxt/scripts 9:42:20 PM] ERROR Nuxt Scripts requires Unhead >= 2, you are using v1.11.20. Please run nuxi upgrade --clean to upgrade...`\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2047,2048],{"name":1985,"color":1986},{"name":2003,"color":2004},3513,"Nuxt 3.16.0 - ships with @unhead2","2025-03-10T08:49:36Z","https://github.com/nuxt/ui/issues/3513",0.71011066,{"description":2055,"labels":2056,"number":2059,"owner":1991,"repository":2060,"state":2039,"title":2061,"updated_at":2062,"url":2063,"score":2064},"Blocked by #468 \n\nThis will allow to edit this data on nuxt.com",[2057],{"name":2015,"color":2058},"1ad6ff",563,"nuxt.com","[Docs] Replace `_collections` in `v2` with slots and components","2023-02-15T12:30:48Z","https://github.com/nuxt/nuxt.com/issues/563",0.71064585,{"description":2066,"labels":2067,"number":2059,"owner":1991,"repository":2072,"state":2039,"title":2073,"updated_at":2074,"url":2075,"score":2064},"After upgrading to Nuxt 3.4.3 global components are having issues loading in Vitest test environment. Not sure but I think https://github.com/nuxt/nuxt/pull/20547 is causing this issue.\r\n\r\n```\r\nSyntaxError: At least one \u003Ctemplate> or \u003Cscript> is required in a single file component.\r\n ❯ Object.parse$4 [as parse] ../node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:5269:21\r\n ❯ createDescriptor ../node_modules/@vitejs/plugin-vue/dist/index.mjs:70:43\r\n ❯ transformMain ../node_modules/@vitejs/plugin-vue/dist/index.mjs:2273:34\r\n ❯ TransformContext.transform ../node_modules/@vitejs/plugin-vue/dist/index.mjs:2785:16\r\n ❯ Object.transform ../node_modules/vite/dist/node/chunks/dep-a178814b.js:42877:44\r\n ❯ loadAndTransform ../node_modules/vite/dist/node/chunks/dep-a178814b.js:53334:29\r\n```\r\n\r\n```\r\nSerialized Error: {\r\n \"id\": \"/components/global/Avatar.vue\",\r\n \"plugin\": \"vite:vue\",\r\n \"pluginCode\": \"import { defineAsyncComponent } from \"vue\"\r\nexport default defineAsyncComponent(() => import(\"/components/global/Avatar.vue\").then(r => r.default))\",\r\n}\r\n```",[2068,2069],{"name":1985,"color":1986},{"name":2070,"color":2071},"vitest-environment","b60205","test-utils","Nuxt 3.4.3 global components incompatible","2023-12-02T00:32:11Z","https://github.com/nuxt/test-utils/issues/563",{"description":2077,"labels":2078,"number":2082,"owner":1991,"repository":1992,"state":2039,"title":2083,"updated_at":2084,"url":2085,"score":2086},"### Environment\n\n- Operating System: Windows 10 \n- Node Version: v22.10.0 \n- Nuxt Version: 3.16.0 \n- CLI Version: 3.22.5 \n- Nitro Version: 2.11.5 \n- Package Manager: pnpm@9.15.7 \n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css, meta, ssr, runtimeConfig, ui \n- Runtime Modules: @nuxt/ui@3.0.0-beta.3, @nuxt/icon@1.10.3, @nuxt/fonts@0.11.0, @vueuse/nuxt@12.8.2\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nNuxt UI 3.0\n\n### Reproduction\n\n```\n\u003Ctemplate>\n\u003CUInput\n v-model=\"translation\"\n ref=\"translationField\" \n />\n\u003C/template>\n\n\u003Cscript setup>\nconst translationField = ref(null)\n\nfunction nextCard() {\n translationField.value.focus() // throws: 'focus is not a function'\n \n nextTick(() => {\n translationField.value.focus() // same error\n })\n\n // below works ok\n nextTick(() => {\n const input = translationField.value?.$el?.querySelector('input')\n if (input) {\n input.focus()\n }\n })\n}\n\u003C/script>\n```\n\n\n### Description\nStandard Vue method of using template ref (for setting a focus, here) throws: 'focus() is not a function'\nIn the above code snippet I included workaround (credits to Sonnet 3.5)\nTried it dozen of times and checked this place to see if it has not been solved earlier.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2079,2080,2081],{"name":1985,"color":1986},{"name":2003,"color":2004},{"name":1988,"color":1989},3644,"\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.7140254,{"description":2088,"labels":2089,"number":2092,"owner":1991,"repository":1992,"state":2039,"title":2093,"updated_at":2094,"url":2095,"score":2096},"### Environment\n\nirrelevant\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n\"@nuxt/ui\": \"3.0.0-alpha.9\",\n\n### Reproduction\n\n\n\n\n### Description\n\ncontributes to failing google lighthouse scores for this violation\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2090,2091],{"name":1985,"color":1986},{"name":2003,"color":2004},2725,"UBreadcrumb accessibility issue - Lists do not contain only \u003Cli> elements and script supporting elements (\u003Cscript> and \u003Ctemplate>).","2024-12-05T13:48:54Z","https://github.com/nuxt/ui/issues/2725",0.7167726,["Reactive",2098],{},["Set"],["ShallowReactive",2101],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"nCArfyp5zHEtq6Y6SrstmyTi_0hpQbt-cYgXLUNT0DU":-1},"/nuxt/ui/3775"]