\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.77010345,{"description":1999,"labels":2000,"number":2007,"owner":1991,"repository":1991,"state":1993,"title":2008,"updated_at":2009,"url":2010,"score":2011},"### Describe the feature\r\n\r\nI'm reaching out with a suggestion that might enhance the documentation, particularly for those looking to disable code splitting. We recently came across a method to inline dynamic imports through the Rollup configuration, effectively disabling code splitting. This was discovered in a ViteJS discussion ([Reference here](https://github.com/vitejs/vite/discussions/13925#discussioncomment-7709077)):\r\n\r\n```typescript\r\nbuild: {\r\n rollupOptions: {\r\n output: {\r\n inlineDynamicImports: true\r\n }\r\n }\r\n}\r\n```\r\n\r\nComing forth to this solution took us a considerable amount of time. A search in the Nuxt documentation for \"code splitting\" yielded few results. Including this information in the Nuxt documentation could significantly improve the developer experience, making this knowledge more readily accessible.\r\n\r\nThere are practical scenarios, such as ensuring seamless access for mobile users with unstable internet connections, where disabling code splitting can be beneficial. Although code splitting with dynamic imports provides some fantastic optimizations, ensuring that the entire page content is downloaded and ready on the first load can be crucial in these situations. I do understand, that there are [ways to handle these errors](https://nuxt.com/docs/getting-started/error-handling#errors-with-js-chunks), but unfortunately, as the application grows, it just creates too much room for error.\r\n\r\nI must admit my understanding of the implications of setting `inlineDynamicImports` to `true` is not comprehensive. One of our applications, deployed as a static single-page app, benefits from this setting, but I'm uncertain about its effects in other build configurations. I would greatly appreciate if someone could provide further insight on this.\r\n\r\nAdditionally, I would like your opinion on the best section within the Nuxt documentation to include this information, ensuring it's easily found by those who need it.\r\n\r\nLooking forward to your thoughts and guidance on this matter.\r\n\r\n### Additional information\r\n\r\n- [X] Would you be willing to help implement this feature?\r\n- [ ] Could this feature be implemented as a module?\r\n\r\n### Final checks\r\n\r\n- [X] Read the [contribution guide](https://nuxt.com/docs/community/contribution).\r\n- [X] Check existing [discussions](https://github.com/nuxt/nuxt/discussions) and [issues](https://github.com/nuxt/nuxt/issues).",[2001,2004],{"name":2002,"color":2003},"documentation","5319e7",{"name":2005,"color":2006},"discussion","538de2",24539,"Docs: Suggestion for documenting disabling code splitting","2024-06-30T11:06:44Z","https://github.com/nuxt/nuxt/issues/24539",0.7712714,{"description":2013,"labels":2014,"number":2021,"owner":1991,"repository":1992,"state":1993,"title":2022,"updated_at":2023,"url":2024,"score":2025},"### Environment\n\n------------------------------\n- Operating System: Linux\n- Node Version: v20.12.0\n- Nuxt Version: 3.16.0\n- CLI Version: 3.22.5\n- Nitro Version: 2.11.6\n- Package Manager: pnpm@8.15.6\n- Builder: -\n- User Config: modules, devtools, compatibilityDate, future\n- Runtime Modules: @nuxt/ui@3.0.0\n- Build Modules: -\n------------------------------\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/nuxt-ui3-n3sxks\n\n### Description\n\nIf you put a Switch inside a Tooltip, the Switch loses styling.\n```\n\u003CUTooltip text=\"tooltip text\">\n \u003CUSwitch label=\"switch label\" />\n\u003C/UTooltip>\n```\n\nThe reason is that both the tooltip and the switch are dependent on the `data-state` property of the element. Switch creates two divs around the button (which `data-state` it follows) but the tooltip targets the same button thus causing problems. The fix would be that the tooltip would use the `data-state` of the outermost switch container div.\n\nWorkaround is to put the switch inside a div like this:\n```\n\u003CUTooltip text=\"tooltip text\">\n \u003Cdiv>\n \u003CUSwitch label=\"switch label\" />\n \u003C/div>\n\u003C/UTooltip>\n```\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2015,2018],{"name":2016,"color":2017},"bug","d73a4a",{"name":2019,"color":2020},"v3","49DCB8",3599,"Switch inside a Tooltip loses styling","2025-03-18T11:56:03Z","https://github.com/nuxt/ui/issues/3599",0.7718195,{"description":2027,"labels":2028,"number":2032,"owner":1991,"repository":2033,"state":1993,"title":2034,"updated_at":2035,"url":2036,"score":2037},"Im trying to use country-icons dynamically based on input, but Im having issues.\n\n```\n\u003Cscript setup lang=\"ts\">\nimport { Icon } from '#components'\n\nconst props = defineProps\u003C{\n country: string\n}>()\n\nconst icon = computed(() => {\n const icon = props?.country.toLowerCase()\n if (icon == 'northern ireland') {\n return 'ireland'\n }\n return icon\n})\nconst FlagIcon = h(Icon, { name: 'twemoji:flag-' + icon.value, size: 18 })\n\n\u003C/script>\n\u003Ctemplate>\n \u003CFlagIcon />\n\u003C/template>\n```\n\nThis is working when loading the page SSR, but navigating to the page results in errors like this:\n`DR5f3n0Z.js:52 [Icon] failed to load icon 'twemoji:flag-hungary'`\n\nHow can I create the icon names dynamically?",[2029],{"name":2030,"color":2031},"need-repro","A50BA3",321,"icon","Dynamic icon name","2024-12-12T08:54:20Z","https://github.com/nuxt/icon/issues/321",0.77285063,{"description":2039,"labels":2040,"number":2042,"owner":1991,"repository":1992,"state":2043,"title":2044,"updated_at":2045,"url":2046,"score":2047},"### Environment\r\n\r\n```\r\n------------------------------\r\n- Operating System: Darwin\r\n- Node Version: v21.6.1\r\n- Nuxt Version: 3.13.1\r\n- CLI Version: 3.13.1\r\n- Nitro Version: 2.9.7\r\n- Package Manager: bun@1.1.26\r\n- Builder: -\r\n- User Config: compatibilityDate, devtools, modules\r\n- Runtime Modules: @nuxt/ui@2.18.4\r\n- Build Modules: -\r\n------------------------------\r\n```\r\n\r\n### Version\r\n\r\n2.18.4\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/MickL/nuxtui-colors-bug\r\n\r\n### Description\r\n\r\nWhen the color prop is created dynamically, some css styles are not generated, especially for subtle and soft variants:\r\n\r\nFor example, `subtle` badges dont have correct border color and the background colors are missing:\r\n\r\n\u003Cimg width=\"237\" alt=\"Bildschirmfoto 2024-09-14 um 18 47 17\" src=\"https://github.com/user-attachments/assets/a3dd5d73-02ae-43d5-96ff-3ef67342cb1d\">\r\n\r\nIt should look like this:\r\n\r\n\u003Cimg width=\"236\" alt=\"Bildschirmfoto 2024-09-14 um 18 46 37\" src=\"https://github.com/user-attachments/assets/7fd2bd00-f2c2-40ed-a7f8-23ec07266d29\">\r\n\r\nIn my reproduction repo I used a table:\r\n```\r\n \u003CUTable :columns :rows>\r\n \u003Ctemplate #colors-data=\"{row}\">\r\n \u003CUBadge :color=\"row.color\" variant=\"subtle\">Subtle Badge\u003C/UBadge>\r\n \u003CUButton :color=\"row.color\" variant=\"soft\">Soft Button\u003C/UButton>\r\n \u003C/template>\r\n \u003C/UTable>\r\n```",[2041],{"name":2016,"color":2017},2199,"closed","Missing tailwind classes for dynamic colors","2024-09-23T10:31:05Z","https://github.com/nuxt/ui/issues/2199",0.6879248,{"description":2049,"labels":2050,"number":2051,"owner":1991,"repository":2052,"state":2043,"title":2053,"updated_at":2054,"url":2055,"score":2056},"[nuxi build](https://nuxt.com/docs/api/commands/build) is missing the docs for `--preset`\r\n\r\nSource: https://github.com/nuxt/cli/blob/main/src/commands/build.ts#L22",[],1556,"nuxt.com","docs: nuxi build missing `--preset` option","2024-04-12T22:06:13Z","https://github.com/nuxt/nuxt.com/issues/1556",0.7199091,{"description":2058,"labels":2059,"number":2063,"owner":1991,"repository":1992,"state":2043,"title":2064,"updated_at":2065,"url":2066,"score":2067},"### Description\n\nWhen using a Table component, it would be a cool feature to allow the items to be modified in place and an event emitted. There arent really many good solutions for this in Vue ecosystem, that I know of. \n\n### Additional context\n\n_No response_",[2060],{"name":2061,"color":2062},"enhancement","a2eeef",2168,"Make an inplace editable table","2024-09-11T14:14:15Z","https://github.com/nuxt/ui/issues/2168",0.7457207,{"description":2069,"labels":2070,"number":2073,"owner":1991,"repository":1992,"state":2043,"title":2074,"updated_at":2075,"url":2076,"score":2077},"### Description\n\nAs it is today, when you change the neutral color on dark mode, the whole background changes, which I personally love.\n\nI think it would be nice if that happened on light mode as well. So instead of using #fff, using neutral-50.\n\nWould that make sense?\n\nI'm willing to contribute if this suggestion is accepted.\n\n### Additional context\n\n_No response_",[2071,2072],{"name":2061,"color":2062},{"name":2019,"color":2020},3189,"Change light-mode body bg-color from white to neutral-50","2025-03-08T12:22:25Z","https://github.com/nuxt/ui/issues/3189",0.7469731,{"labels":2079,"number":2089,"owner":1991,"repository":1991,"state":2043,"title":2090,"updated_at":2091,"url":2092,"score":2093},[2080,2083,2086],{"name":2081,"color":2082},"available soon","6de8b0",{"name":2084,"color":2085},"pending triage","E99695",{"name":2087,"color":2088},"2.x","d4c5f9",7605,"Adding multiple times a same module in nuxt.config.js is not working","2023-01-22T15:36:02Z","https://github.com/nuxt/nuxt/issues/7605",0.7500201,{"description":2095,"labels":2096,"number":2098,"owner":1991,"repository":1991,"state":2043,"title":2099,"updated_at":2100,"url":2101,"score":2102},"\r\nthere is my config\r\n```javascript\r\nimport path from 'path'\r\nimport CopyWebpackPlugin from 'copy-webpack-plugin'\r\n\r\nexport default {\r\nbuild: {\r\n extend(config, ctx) {\r\n config.plugins.push(\r\n new CopyWebpackPlugin([\r\n {\r\n from: 'node_modules/mavon-editor/dist/highlightjs',\r\n to: path.join(__dirname, 'static/plugins/highlightjs/')\r\n }\r\n ])\r\n )\r\n\r\n return config\r\n }\r\n }\r\n}\r\n\r\n```\r\n\n\n\u003C!--cmty-->\u003C!--cmty_prevent_hook-->\n\u003Cdiv align=\"right\">\u003Csub>\u003Cem>This question is available on \u003Ca href=\"https://cmty.app/nuxt\">Nuxt\u003C/a> community (\u003Ca href=\"https://cmty.app/nuxt/nuxt.js/issues/c9883\">#c9883\u003C/a>)\u003C/em>\u003C/sub>\u003C/div>",[2097],{"name":2087,"color":2088},6538,"Copy-Webpack-Plugin can not work?","2023-01-18T21:49:16Z","https://github.com/nuxt/nuxt/issues/6538",0.7500731,["Reactive",2104],{},["Set"],["ShallowReactive",2107],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"8x2wEsWNn3TH1QxGCXz2c0zlLJxklFwJypW5fuhyGSo":-1},"/nuxt/ui/2828"]