\r\n \u003C/template>\r\n\r\n \u003Ctemplate #description=\"{ description }\">\r\n \u003Cspan v-html=\"description\" />\r\n \u003C/template>\r\n \u003C/UNotifications>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nconst toast = useToast()\r\nconst app = useNuxtApp()\r\n\r\nconst columns = [{\r\n key: \"id\",\r\n label: \"编号\",\r\n class: 'w-16'\r\n}, {\r\n key: \"from\",\r\n label: \"发方\",\r\n class: 'w-[180px]'\r\n}, {\r\n key: \"to\",\r\n label: \"接方\",\r\n class: 'w-[180px]'\r\n\r\n}, {\r\n key: \"type\",\r\n label: \"类型\",\r\n class: 'w-[120px]'\r\n\r\n}, {\r\n key: \"value\",\r\n label: \"金额\",\r\n class: 'w-[120px]'\r\n\r\n}, {\r\n key: \"hash\",\r\n label: \"哈希\",\r\n}\r\n]\r\n\r\nconst people = ref([\r\n /*{\r\n \"id\": 1,\r\n \"from\": { value: '0x11111111fce9647bdf1e7877bf73ce8b0bad1111', class: 'w-[80px]' },\r\n \"to\": '0x22222222fce9647bdf1e7877bf73ce8b0bad2222',\r\n \"type\": 'ETH',\r\n \"value\": '123',\r\n \"hash\": '0x88baba17ca0060d644a72a9460260104eea81e7959445d3500d015ed71875d38',\r\n }*/\r\n])\r\n\r\n\r\n\u003C/script>\r\n\r\n\r\n\u003Cstyle>\r\na {\r\n color: #65a30d;\r\n font-weight: 700;\r\n font-size: 20px;\r\n}\r\n\r\n\r\n\u003C/style>\r\n```\r\n\r\n\r\n\r\nHowever, once there is data, it will be stretched open. How can I fix the header so that the content is partially hidden and drag the header to decide whether to hide or display it? This is too common in daily development and provides a good user experience\r\n\r\n\r\n```vue\r\nconst people = ref([\r\n {\r\n \"id\": 1,\r\n \"from\": { value: '0x11111111fce9647bdf1e7877bf73ce8b0bad1111', class: 'w-[80px]' },\r\n \"to\": '0x22222222fce9647bdf1e7877bf73ce8b0bad2222',\r\n \"type\": 'ETH',\r\n \"value\": '123',\r\n \"hash\": '0x88baba17ca0060d644a72a9460260104eea81e7959445d3500d015ed71875d38',\r\n }\r\n])\r\n```\r\n\r\n",[1984,1987],{"name":1985,"color":1986},"question","d876e3",{"name":1988,"color":1989},"stale","ededed",2092,"nuxt","ui","open","UTable column width","2024-09-29T02:05:59Z","https://github.com/nuxt/ui/issues/2092",0.67641747,{"description":1999,"labels":2000,"number":2001,"owner":1991,"repository":2002,"state":1993,"title":2003,"updated_at":2004,"url":2005,"score":2006},"It would be nice if you could alias and entire collection instead of just an icon.\n\nRight now I do it this way.\n```ts\nconst createIconAliases = (newPrefix: string, iconifyJson: IconifyJSON) => {\n const exisitngPrefix = iconifyJson.prefix;\n const icons = Object.keys(iconifyJson.icons);\n\n return icons.reduce(\n (object, value) => {\n object[`${newPrefix}:${value}`] = `${exisitngPrefix}:${value}`;\n return object;\n },\n {} as Record\u003Cstring, string>,\n );\n};\n```",[],362,"icon","[feature request] Allow aliasing entire collection","2025-02-21T20:10:51Z","https://github.com/nuxt/icon/issues/362",0.7588441,{"description":2008,"labels":2009,"number":2016,"owner":1991,"repository":1992,"state":1993,"title":2017,"updated_at":2018,"url":2019,"score":2020},"### Environment\n\n------------------------------\n- Operating System: Darwin\n- Node Version: v20.18.0\n- Nuxt Version: 3.11.2\n- CLI Version: 3.15.0\n- Nitro Version: 2.9.6\n- Package Manager: pnpm@9.5.0\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxtjs/i18n@8.0.0, @nuxt/ui@2.16.0, @nuxtjs/tailwindcss@6.12.0, @pinia/nuxt@0.5.1, @nuxtjs/google-fonts@3.2.0, @nuxtjs/eslint-module@4.1.0, @nuxt/test-utils/module@3.13.1\n- Build Modules: -\n------------------------------\n\n\n\n### Version\n\nv.2.15.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-ui-1f7znf?file=app.vue,nuxt.config.ts\n\n### Description\n\nWhen providing custom animations through tailwindcss config, some Nuxt UI animations stop working. I have provided an example of a `UButton` with `loading` set in the repro link above.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2010,2013],{"name":2011,"color":2012},"bug","d73a4a",{"name":2014,"color":2015},"triage","ffffff",2732,"Adding custom animations disable Nuxt UI ones","2024-11-22T15:38:35Z","https://github.com/nuxt/ui/issues/2732",0.7591148,{"description":2022,"labels":2023,"number":2030,"owner":1991,"repository":2031,"state":1993,"title":2032,"updated_at":2033,"url":2034,"score":2035},"### Describe the feature\n\nI have a project where I've written multiple test files, each with their own `setup()` inside the top `describe()`\r\n\r\n```ts\r\ndescribe('/api/pen', async () => {\r\n await setup(setupConfig())\r\n...\r\n```\r\n\r\nWhen I run these tests it creates a nuxt instance for each test file, demonstrated here: https://github.com/fumeapp/bio/actions/runs/10505024117/job/29101731333#step:12:48\r\n\r\nI'm not sure if I have this setup incorrectly, or maybe if there was a way to have all test files share the same nuxt instance?\r\n\r\nP.S. I am working on a potential GH action version that will run nuxt in the background and allow a possible setup({host: ...}) version, if i get this working i'll share it.\n\n### Additional information\n\n- [X] Would you be willing to help implement this feature?\n- [ ] Could this feature be implemented as a module?\n\n### Final checks\n\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2024,2027],{"name":2025,"color":2026},"enhancement","a2eeef",{"name":2028,"color":2029},"pending triage","5D08F5",923,"test-utils","Ability to avoid a new nuxt instance for each test file","2024-08-22T09:25:17Z","https://github.com/nuxt/test-utils/issues/923",0.76041627,{"description":2037,"labels":2038,"number":2041,"owner":1991,"repository":1992,"state":1993,"title":2042,"updated_at":2043,"url":2044,"score":2045},"### Environment\n\n- Operating System: Linux\n- Node Version: v18.20.3\n- Nuxt Version: 3.14.159\n- CLI Version: 3.15.0\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.2.3\n- Builder: -\n- User Config: default\n- Runtime Modules: @nuxt/ui@2.19.2\n- Build Modules: -\n\n### Version\n\n2.19.2\n\n### Reproduction\n\nhttps://stackblitz.com/edit/github-kft69t?file=README.md\n\nLive: https://rad-fudge-8ff161.netlify.app/\n\n### Description\n\nSo this is a safari mobile bug only! About the UCarousel. \n\nWhen testing on desktop make sure you change the User Agent to Iphone in Safari. \n\nThe active slide/page is a bit random. You can reproduce by refreshing the page. Sometimes it starts at index 0 but other times at 3 etc. \n\nI tried to make a workaround in the onMounted. But that also does not seems to work. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2039,2040],{"name":2011,"color":2012},{"name":2014,"color":2015},2683,"UCarousel Safari (Mobile only) bug","2025-02-21T13:38:31Z","https://github.com/nuxt/ui/issues/2683",0.7645142,{"description":2047,"labels":2048,"number":92,"owner":1991,"repository":2056,"state":1993,"title":2057,"updated_at":2058,"url":2059,"score":2060},"It's strange, but if the `nuxt.config` file contains `@nuxt/devtools` inside `modules`, the font panel doesn't work.\r\n\r\nhttps://github.com/dungsil/issues/blob/0f11e1fcd386b289835d8d19c6b9199f66aa748c/nuxt-fonts-106/nuxt.config.ts#L6\r\n\r\n\r\n\r\n> ERROR [nuxt-devtools] RPC error on executing \"nuxt-devtools-fonts:getFonts\":\r\n> [birpc] function \"nuxt-devtools-fonts:getFonts\" not found\r\n\r\nReproduction link: https://github.com/dungsil/issues/tree/main/nuxt-fonts-106",[2049,2050,2053],{"name":2011,"color":2012},{"name":2051,"color":2052},"upstream","4E99F0",{"name":2054,"color":2055},"workaround available","CA50F0","fonts","devtools: If the module contains \"@nuxt/devtools\", an error occurs in the Fonts panel.","2024-09-29T01:51:27Z","https://github.com/nuxt/fonts/issues/106",0.7651161,{"description":2062,"labels":2063,"number":2069,"owner":1991,"repository":1992,"state":2070,"title":2071,"updated_at":2072,"url":2073,"score":2074},"### 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```",[2064,2065,2068],{"name":2011,"color":2012},{"name":2066,"color":2067},"v3","49DCB8",{"name":2014,"color":2015},3644,"closed","\u003CUInput> template ref does not work","2025-03-21T13:14:18Z","https://github.com/nuxt/ui/issues/3644",0.7285043,{"description":2076,"labels":2077,"number":2078,"owner":1991,"repository":2002,"state":2070,"title":2079,"updated_at":2080,"url":2081,"score":2082},"My folder structure looks the same as it is described in the documentation (https://nuxt.com/modules/icon#custom-local-collections):\n\n`assets/my-icons/photogrammetry.svg`\n\nHowever, I load content from a json file:\n\n```json\n{\n \"data\": {\n \"0\": {\n \"title\": \"Video- & Photography\",\n \"icon\": \"my-icon:photogrammetry\",\n \"iconColor\": \"text-cyan-400\",\n [...]\n },\n```\n\n... into the component:\n\n```vue\n\u003Cscript setup>\nimport services from \"/public/jsons/services.json\"\n...\n\u003C/script>\n\n\u003Ctemplate>\n[...]\n \u003Cdiv class=\"[ card ] absolute\" :class=\"service.iconColor\">\n \u003CIcon :name=\"service.icon\" :color=\"service.iconColor\" size=\"10rem\" />\n \u003C/div>\n[...]\n\u003C/template>\n```\n\nThe icon (which is and remains black) does not accept any color, while any standard implementation (icon from a downloaded icon set like mdi) does indeed change the color of an icon.\n\n(Just in case this is not an error: What kind of \"treatment\" do I have to apply to make my icon accept color?)",[],307,"custom local collections do not accept props like color","2024-11-23T10:19:42Z","https://github.com/nuxt/icon/issues/307",0.7452585,{"description":2084,"labels":2085,"number":2088,"owner":1991,"repository":1992,"state":2070,"title":2089,"updated_at":2090,"url":2091,"score":2092},"### For what version of Nuxt UI are you asking this question?\n\nv3.0.0-alpha.x\n\n### Description\n\nIs there a way we can add a custom class to the tag `\u003Cth>`, in my case I would like to place `w-28` so that it has a fixed width\n\n\n\n\n",[2086,2087],{"name":1985,"color":1986},{"name":2066,"color":2067},2762,"[v3] Custom class to the tag \u003Cth>","2024-12-09T11:14:42Z","https://github.com/nuxt/ui/issues/2762",0.7518865,{"labels":2094,"number":2104,"owner":1991,"repository":1991,"state":2070,"title":2105,"updated_at":2106,"url":2107,"score":2108},[2095,2098,2099,2101],{"name":2096,"color":2097},"3.x","29bc7f",{"name":2011,"color":2012},{"name":2051,"color":2100},"E8A36D",{"name":2102,"color":2103},"🔨 p3-minor","FBCA04",14438,"Title breaking during page transitions","2023-01-19T17:49:38Z","https://github.com/nuxt/nuxt/issues/14438",0.7567828,["Reactive",2110],{},["Set"],["ShallowReactive",2113],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"JHO2vHThxD8LUop8FirZO0rgB6N7kLxJd0R8HJCmwrY":-1},"/nuxt/ui/3214"]