\n\n\u003C!-- if we want to hide, we can let slot do the work, or maybe consider adding a properties to hide it. It's more shorter -->\n\u003CUInput type=\"password\">\n \u003Ctemplate #trailing>\u003C/template>\n\u003C/UInput>\n\n\u003C!-- compared to what we must do now as the documentation say -->\n\u003Ctemplate>\n \u003CUInput\n v-model=\"password\"\n placeholder=\"Password\"\n :type=\"show ? 'text' : 'password'\"\n :ui=\"{ trailing: 'pe-1' }\"\n >\n \u003Ctemplate #trailing>\n \u003CUButton\n color=\"neutral\"\n variant=\"link\"\n size=\"sm\"\n :icon=\"show ? 'i-lucide-eye-off' : 'i-lucide-eye'\"\n aria-label=\"show ? 'Hide password' : 'Show password'\"\n :aria-pressed=\"show\"\n aria-controls=\"password\"\n @click=\"show = !show\"\n />\n \u003C/template>\n \u003C/UInput>\n\u003C/template>\n\n\u003Cscript setup lang=\"ts\">\nconst show = ref(false)\nconst password = ref('password')\n\u003C/script>\n```",[2049,2050],{"name":1988,"color":1989},{"name":1991,"color":1992},2806,"input: add toggle password button automatically for type password","2024-12-02T17:21:42Z","https://github.com/nuxt/ui/issues/2806",0.7057844,{"description":2057,"labels":2058,"number":2063,"owner":1994,"repository":1995,"state":2032,"title":2064,"updated_at":2065,"url":2066,"score":2067},"### Description\n\nWould like to modify the default dark mode appearance of the UInput component.\n\nThe first name field is unstyled. The last name field shows my attempt to add styles, but to no effect. \n\nThe v2 component apparently had a `inputClass` that allowed the text and background color to be styled. \n\nIs there a v3 equivalent?\n\nThanks\n\nPS. the password fields are both also unstyled -- they just seem to have a different behaviors dependent on whether any text has been entered.\n\n```\n\u003Ctemplate>\n \u003CUContainer class=\"z-10 max-w-md py-10\">\n \u003CUCard class=\"bg-slate-200 shadow-md dark:bg-slate-600\">\n\n \u003Ctemplate #header>\n \u003Cspan class=\"text-center text-xl font-semibold text-gray-900 dark:text-white\">Sign up\u003C/span>\n \u003C/template>\n\n \u003CUForm\n :state=\"formState\"\n :schema=\"signUpSchema\"\n class=\"space-y-4\"\n @submit=\"onSubmit\">\n \u003Cdiv class=\"flex\">\n \u003CUFormField\n label=\"First Name\"\n name=\"firstName\"\n class=\"mr-3 flex-4\">\n \u003CUInput\n v-model=\"formState.firstName\"\n type=\"text\"\n placeholder=\"First Name\"\n icon=\"i-heroicons-user-solid\"/>\n \u003C/UFormField>\n \u003CUFormField\n label=\"Last Name\"\n name=\"lastName\"\n class=\"flex-5\">\n \u003CUInput\n v-model=\"formState.lastName\"\n type=\"text\"\n placeholder=\"Last Name\"\n icon=\"i-heroicons-user-solid\"\n class=\"text-gray-900 dark:text-white\" /> \u003C!-- has no effect -->\n \u003C/UFormField>\n \u003C/div>\n ...\n```\n\n",[2059,2062],{"name":2060,"color":2061},"question","d876e3",{"name":1991,"color":1992},3136,"Q: how to style the text and background color of the UInput component?","2025-01-18T00:58:37Z","https://github.com/nuxt/ui/issues/3136",0.70606244,{"description":2069,"labels":2070,"number":2076,"owner":1994,"repository":1995,"state":2032,"title":2077,"updated_at":2078,"url":2079,"score":2080},"### Description\n\nHello there! thank you all for this awesome library! I'm using the pro version to leverage the Dashboard components, which have been very useful so far, but I'm currently in need of something like this:\n\n\n\nThe idea is to have a NavBar on top of all DashboardPanels across all pages. As far as I can understand the documentation, both DashboardNavbar and DashboardToolbar can only be used inside of a DashboardPanel, but would it be possible to somehow achieve this without breaking the way that the Dashboard components interact with each other? \n\nIn version 2 I kinda went around by just nesting a DashboardPanel inside of a main one (Placed in the layout file) which the Navbar inside it, and then I placed the `\u003Cslot />` for the rest of the content, which could be either 1 or more DashboardPanels.\n\nThanks in advance!",[2071,2072,2073],{"name":2060,"color":2061},{"name":1991,"color":1992},{"name":2074,"color":2075},"pro","5BD3CB",3627,"How to add a persistent Navbar on top of all DashboardPanels inside of a DashboardGroup?","2025-03-19T20:53:14Z","https://github.com/nuxt/ui/issues/3627",0.7087431,{"description":2082,"labels":2083,"number":2086,"owner":1994,"repository":1995,"state":2032,"title":2087,"updated_at":2088,"url":2089,"score":2090},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.15.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.21.1\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.7.0\n- Builder: -\n- User Config: devtools, modules, gtag, runtimeConfig, mdc, app, nitro, serverMiddleware, css, ui, future, compatibilityDate\n- Runtime Modules: @nuxt/ui@3.0.0-alpha.10, @nuxt/eslint@1.0.1, @nuxtjs/mdc@0.13.5, @vueuse/nuxt@12.5.0, nuxt-gtag@3.0.2\n- Build Modules: -\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.0-alpha.10\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/epic-cdn-6dgx4q \n\n### Description\n\ncode here:\n```vue\n\u003Ctemplate>\n \u003CUTooltip text=\"Copy\">\n \u003CUButton color=\"neutral\" variant=\"ghost\" size=\"xs\" icon=\"i-lucide-copy\" />\n \u003C/UTooltip>\n \u003CUTooltip text=\"Delete\">\n \u003CUButton color=\"neutral\" variant=\"ghost\" size=\"xs\" icon=\"i-lucide-trash-2\" />\n \u003C/UTooltip>\n \u003CUDropdownMenu size=\"sm\" :items=\"exportItems\">\n \u003CUTooltip text=\"Export as...\">\n \u003CUButton color=\"neutral\" variant=\"ghost\" size=\"xs\" icon=\"i-lucide-file-down\" />\n \u003C/UTooltip>\n \u003C/UDropdownMenu>\n\u003C/template>\n\u003Cscript setup>\n const exportItems = [\n [\n {\n label: 'Export as...',\n type: 'label'\n },\n ],\n [\n {\n label: 'Markdown',\n onSelect () {\n \n }\n },\n {\n label: 'Plain Text',\n onSelect () {\n \n }\n },\n ]\n]\n\u003C/script>\n```\nin this case, UDropdownMenu can not work, if remove UTooltip element, it works.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2084,2085],{"name":2028,"color":2041},{"name":1991,"color":1992},3339,"DropdownMenu cannot be nested with Tooltip components","2025-02-19T15:23:15Z","https://github.com/nuxt/ui/issues/3339",0.718614,{"description":2092,"labels":2093,"number":2095,"owner":1994,"repository":1995,"state":2032,"title":2096,"updated_at":2097,"url":2098,"score":2099},"### For what version of Nuxt UI are you suggesting this?\n\nv2.17.0\n\n### Description\n\nI want to set styles for other elements based on the activation state of the `ULink` component, but it was unexpectedly difficult. First, I didn't find relevant content in the [documentation](https://ui.nuxt.com/components/link) of the `ULink` component. It wasn't until I found this [issue](https://github.com/nuxt/ui/issues/1718) that I learned that I could get the activation state through `v-slot={isActive}`. Secondly, I can't directly set the `data-*` attribute for the `ULink` component to save the value of isActive, because this will prompt a ts error and the rendered `a` tag will not contain attributes, so I have to add another HTML tag as a child element of the `ULink` component to indirectly add the `data-*` attribute. \n\n### Additional context\n\n_No response_",[2094],{"name":1988,"color":1989},2726,"Use `data-*` to add activation state to `ULink`","2024-12-05T13:48:55Z","https://github.com/nuxt/ui/issues/2726",0.72272575,["Reactive",2101],{},["Set"],["ShallowReactive",2104],{"TRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"YkV8lIX4WiqSjGCK8fR52ypD8hoVY9F9V1MfuZgKOPQ":-1},"/nuxt/ui/3079"]