",[2865,2868],{"name":2866,"color":2867},"question","d876e3",{"name":2869,"color":2870},"v3","49DCB8",3947,"nuxt","ui","open","Unexpected drawer behavior when dragging content area (jumpy collapse & horizontal scroll flickering)","2025-04-21T09:17:02Z","https://github.com/nuxt/ui/issues/3947",0.6740474,{"description":2880,"labels":2881,"number":2884,"owner":2872,"repository":2873,"state":2874,"title":2885,"updated_at":2886,"url":2887,"score":2888},"### Description\n\nHi, I'm having a hard time applying transition to dark / light background.\n\nMy `main.css` file is as follows.\n\nChanging the background color from `slate` to `stone`, for example, works fine.\n\nThe problem is just for the light / dark theme transition.\n\n```\n:root {\n --ui-bg: var(--ui-color-neutral-100);\n}\n\n.dark {\n --ui-bg: var(--ui-color-neutral-900);\n}\n\n@layer base {\n body {\n @apply transition-colors duration-1000;\n }\n}\n```\n\nHere is the function that changes the theme:\n\n```\nconst isDark = computed({\n get() {\n return colorMode.value === 'dark';\n },\n set() {\n colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark';\n },\n});\n```\n\nAny help would be appreciated, thanks!\n",[2882,2883],{"name":2866,"color":2867},{"name":2869,"color":2870},3645,"Applying transition-colors to light / dark theme","2025-03-21T16:20:57Z","https://github.com/nuxt/ui/issues/3645",0.69433105,{"description":2890,"labels":2891,"number":2899,"owner":2872,"repository":2873,"state":2874,"title":2900,"updated_at":2901,"url":2902,"score":2903},"### Environment\n\nnode22, nuxtui300-b3 and nuxt3\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv.3.0.0-beta3\n\n### Reproduction\n\nYou can reproduce from the components page for modal and drawer. Open the drawer, the bottom drawer appears, and rest of page shifts from removal of scrollbar. Same does not occur on the modal component.\n\n### Description\n\nThe modal component properly handles overflow and prevents shifting of the main page layout when open. The drawer component does not. Would like to see the drawer prevent layout shift from the scroll bar removal, like is done on the modals. \n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2892,2895,2896],{"name":2893,"color":2894},"bug","d73a4a",{"name":2869,"color":2870},{"name":2897,"color":2898},"triage","ffffff",3523,"Drawer shifts layout unlike modal","2025-03-23T17:40:06Z","https://github.com/nuxt/ui/issues/3523",0.6954876,{"description":2905,"labels":2906,"number":2912,"owner":2872,"repository":2873,"state":2874,"title":2913,"updated_at":2914,"url":2915,"score":2916},"### Description\n\nWould be nice to add the possibility to set the position of the loading icon in the `UButton`. Now it replaces the leading icon, but when the trailing icon is used this leads to a behavior that in my opinion is undesidered in the majority of cases. \nThe idea would be a prop like that:\n```ts\nloading-position: 'leading' | 'trailing' | 'auto'\n```\nwhere `auto` should place the loader where the button icon is placed, leading otherwise.\n\n### Additional context\n\n_No response_",[2907,2910,2911],{"name":2908,"color":2909},"enhancement","a2eeef",{"name":2869,"color":2870},{"name":2897,"color":2898},3419,"Add `loading-position` to `UButton`","2025-03-02T12:16:32Z","https://github.com/nuxt/ui/issues/3419",0.6978338,{"description":2918,"labels":2919,"number":2923,"owner":2872,"repository":2873,"state":2874,"title":2924,"updated_at":2925,"url":2926,"score":2927},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.14.0\n- Nuxt Version: 3.16.2\n- CLI Version: 3.24.1\n- Nitro Version: 2.11.9\n- Package Manager: bun@1.2.8\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css\n- Runtime Modules: @nuxt/eslint@1.3.0, @nuxt/fonts@0.11.1, @nuxt/icon@1.12.0, @nuxt/ui@3.0.2, @pinia/nuxt@0.11.0\n- Build Modules: -\n\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.0.2\n\n### Reproduction\n\nI tried running this code from `playground-vue`:\n\n```\n\u003CUModal>\n \u003CUButton>Open\u003C/UButton>\n \u003Ctemplate #body>\n \u003CUSelectMenu :items=\"items\" :search-input=\"{ autofocus: false }\" />\n \u003C/template>\n\u003C/UModal>\n```\n\n\n### Description\n\nselect menu's search input always autofocus inside modal, even when the autofocus is set to false.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2920,2921,2922],{"name":2893,"color":2894},{"name":2869,"color":2870},{"name":2897,"color":2898},3933,"SelectMenu's autofocus doesn't work inside Modal","2025-04-19T06:22:26Z","https://github.com/nuxt/ui/issues/3933",0.7100828,{"description":2929,"labels":2930,"number":2933,"owner":2872,"repository":2873,"state":2934,"title":2935,"updated_at":2936,"url":2937,"score":2938},"### Description\n\nThe light mode defaults for Select are pretty good. Not as good for dark mode. How can I at least modify the background and text color of the popup list for dark mode? What is the recommended approach?\n\n\n",[2931,2932],{"name":2866,"color":2867},{"name":2869,"color":2870},3595,"closed","How can I improve the dark style of USelect","2025-03-18T20:19:24Z","https://github.com/nuxt/ui/issues/3595",0.69019014,{"description":2940,"labels":2941,"number":2944,"owner":2872,"repository":2873,"state":2934,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### Description\n\nIt's shorter and can save traffic.\n\n### Additional context\n\n_No response_",[2942,2943],{"name":2908,"color":2909},{"name":2869,"color":2870},3250,"Use `foo-(--bar)` instead of `foo-[var(--bar)]` for tailwindcss classes","2025-02-07T10:24:17Z","https://github.com/nuxt/ui/issues/3250",0.6922043,{"description":2950,"labels":2951,"number":2957,"owner":2872,"repository":2873,"state":2934,"title":2958,"updated_at":2959,"url":2960,"score":2961},"### Description\n\nIf you use the Checkbox like Vue states (https://vuejs.org/guide/essentials/forms#checkbox), you can use multiple checkboxes and have multiple values selected.\n\nBut it only toggles them all to true or false...\n\n\u003Cimg width=\"253\" alt=\"Image\" src=\"https://github.com/user-attachments/assets/754fc93a-b16d-475c-8b29-9896a165b5f9\" />\n\n(true here displays the \"array\" value)\n\nReka has array support\n\nhttps://reka-ui.com/docs/components/checkbox#anatomy\n\nBut it seems not implemented, right?",[2952,2955,2956],{"name":2953,"color":2954},"duplicate","cfd3d7",{"name":2866,"color":2867},{"name":2869,"color":2870},3438,"Multiple checkboxes (like Vue form binding states)","2025-03-03T17:02:02Z","https://github.com/nuxt/ui/issues/3438",0.6963631,{"description":2963,"labels":2964,"number":2967,"owner":2872,"repository":2873,"state":2934,"title":2968,"updated_at":2969,"url":2970,"score":2971},"### Environment\n\n- Operating System: Darwin\n- Node Version: v22.12.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.22.2\n- Nitro Version: 2.10.4\n- Package Manager: pnpm@8.14.1\n- Builder: -\n- User Config: devtools, future, compatibilityDate, typescript, modules, components, ui, css, vite, formkit\n- Runtime Modules: @nuxt/icon@1.10.3, @formkit/nuxt@1.6.9, @nuxt/image@1.9.0, @vueuse/nuxt@12.5.0, @nuxt/ui@3.0.0-alpha.13\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-alpha.13\n\n### Reproduction\n\n--\n\n### Description\n\nAccording to the documentation, the Button component accepts props `active` which theoretically should force an `active` state for the button - unfortunately adding this does not change anything. \nIn addition, there is a lack of styles and support for the active button (as is the case with links) \n\nWhat I would like to achieve: \nI want the navigation menu to consist of links that visually look like buttons, in addition, I would like the button (if it is under the address to which it leads) to be active (visually distinguished from the other buttons)\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2965,2966],{"name":2893,"color":2894},{"name":2869,"color":2870},3417,"No option to set button as active, no styles for active buttons","2025-03-08T21:49:08Z","https://github.com/nuxt/ui/issues/3417",0.6985358,{"description":2973,"labels":2974,"number":2978,"owner":2872,"repository":2873,"state":2934,"title":2979,"updated_at":2980,"url":2981,"score":2982},"### Environment\n\n- Operating System: Darwin\n- Node Version: v20.11.0\n- Nuxt Version: 3.15.4\n- CLI Version: 3.22.2\n- Nitro Version: 2.10.4\n- Package Manager: npm@10.2.4\n- Builder: -\n- User Config: compatibilityDate, devtools, modules, css\n- Runtime Modules: @nuxt/ui@3.0.0-beta.2\n- Build Modules: -\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\n3.0.0-beta.2\n\n### Reproduction\n\nHere's a demo (https://codesandbox.io/p/devbox/nuxtui3-bug-3432-sphrpl)\n\n**index.vue**\n```\n\u003Ctemplate>\n \u003CUContainer>\n \u003CFooModal @some-action=\"fnHandleAction\" /> \u003Cbr />\n \u003CUButton @click=\"fnOpenModal\">Open FooModal from code\u003C/UButton>\n \u003C/UContainer>\n\u003C/template>\n\n\u003Cscript lang=\"ts\" setup>\n import { FooModal } from '#components';\n\n const overlay = useOverlay();\n\n const foo = overlay.create(FooModal);\n\n const fnOpenModal = async () => {\n foo.open();\n };\n\n const fnHandleAction = (action) => {\n console.log(\"Handle FooModal action: \", action);\n };\n\u003C/script>\n```\n\n**FooModal**\n```\n\u003Ctemplate>\n \u003CUModal v-model:open=\"open\" title=\"Foobar\">\n \u003CUButton label=\"Open FooModal from modal\" color=\"neutral\" variant=\"subtle\" />\n\n \u003Ctemplate #body>\n \u003CUButton @click=\"click()\" >Submit\u003C/UButton>\n \u003C/template>\n \u003C/UModal>\n\u003C/template>\n\n\u003Cscript lang=\"ts\" setup>\n const open = ref(false);\n\n const emits = defineEmits(['some-action']);\n\n const click = () => {\n console.log(\"clicked from inside the modal\");\n emits('some-action', 'closing'); //emits does not work if Modal opened using useOverlay.\n open.value = false; //closing modal does not work if Modal opened using useOverlay.\n };\n\u003C/script>\n```\n\n### Description\n\nHello Nuxt UI team,\n\nThank you for providing a high-quality UI library. I truly appreciate the effort you put into creating and maintaining it.\n\nI have encountered an issue while using `UModal` in my application. The modal is used to create and/or update database entries, and it needs to be opened in two different ways:\n\n1. Via a `UButton` that is always present on the screen (provided by the modal itself).\n2. Programmatically, through a link in a dropdown menu, using `useOverlay`.\n\nWhen the modal is opened using the first method, everything works as expected. However, when it is opened programmatically using the second method, the modal does not behave the same way. Specifically:\n\n- I am unable to trigger an `emit` to notify the parent component that the update was successful.\n- The modal does not close properly using the `open.value = false` technique.\n\nI am unsure if this behavior is intentional or a bug. I was under the impression that `UModal` and `useOverlay` should work seamlessly together and exhibit consistent behavior. Could you please confirm whether this is a valid concern?\n\nThank you for your time and attention to this matter. I look forward to your guidance.\n\n**Note**: You'll also notice that the button within the modal appears on the screen when opened using `useOverlay`. It would be helpful if it could be hidden automatically, but I believe this is something I can control easily. As such, I do not consider this to be a bug.\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2975,2976,2977],{"name":2893,"color":2894},{"name":2869,"color":2870},{"name":2897,"color":2898},3432,"UModal and useOverlay compatibility Issue","2025-03-11T13:57:03Z","https://github.com/nuxt/ui/issues/3432",0.70066845,["Reactive",2984],{},["Set"],["ShallowReactive",2987],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fdHPkz9GCxvwlqYmpYOlwJuslnvJnus71omt2U5C-Wr0":-1},"/nuxt/ui/2277"]