\n \u003C/template>\n\n \u003Ctemplate #right>\n \u003CUColorModeButton />\n\n \u003CUButton\n to=\"https://github.com/nuxt/ui\"\n target=\"_blank\"\n icon=\"i-simple-icons-github\"\n color=\"gray\"\n variant=\"ghost\"\n />\n \u003C/template>\n\u003Ctemplate>\n\n\n \u003Ctemplate #panel>\n \u003CUNavigationTree :links=\"menus\" />\n \u003Cdiv class=\"flex items-center justify-between gap-x-[20px] mt-[20px]\">\n \u003CUButton class=\"flex-1 flex items-center justify-center\" @click=\"onLogin\">login\u003C/UButton>\n \u003CUButton class=\"flex-1 flex items-center justify-center\" @click=\"onRegister\"\n >register\u003C/UButton\n >\n \u003C/div>\n \u003C/template>\n \u003C/UHeader>`",[2865],{"name":2866,"color":2867},"question","d876e3",4244,"nuxt","ui","open","Clicking on any area when opening the UModal component in UHeader will cause the panel to be closed","2025-05-28T14:43:17Z","https://github.com/nuxt/ui/issues/4244",0.7307184,{"description":2877,"labels":2878,"number":2888,"owner":2869,"repository":2870,"state":2871,"title":2889,"updated_at":2890,"url":2891,"score":2892},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v23.11.0`\n- Nuxt Version: `3.17.4`\n- CLI Version: `3.25.1`\n- Nitro Version: `2.11.12`\n- Package Manager: `pnpm@10.11.0`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nNuxt\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/devbox/condescending-euclid-k9r7nc\n\n### Description\n\nWhen a Modal is in a ButtonGroup, all buttons inside the Modal (including the X button) are styled as elements directly in the ButtonGroup\n\n```vue\n\n\u003Ctemplate>\n \u003CUButtonGroup>\n \u003CUInput placeholder=\"Search...\" />\n \u003CUModal>\n \u003CUButton color=\"neutral\" variant=\"outline\">\n Open modal\n \u003C/UButton>\n\n \u003Ctemplate #body>\n \u003CUButton label=\"button1\" />\n \u003CUButton label=\"button2\" />\n \u003CUButton label=\"button3\" />\n \u003C/template>\n \u003C/UModal>\n \u003C/UButtonGroup>\n\u003C/template>\n```\n\n\n\nAlso, size and orientation affect the buttons inside the modal\n\n```vue\n\u003Ctemplate>\n \u003CUButtonGroup orientation=\"vertical\" size=\"lg\">\n ...\n \u003C/UButtonGroup>\n\u003C/template>\n```\n\n\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[2879,2882,2885],{"name":2880,"color":2881},"bug","d73a4a",{"name":2883,"color":2884},"v3","49DCB8",{"name":2886,"color":2887},"triage","ffffff",4242,"[ButtonGroup] Nested buttons are also styled as if they were directly placed","2025-05-28T10:43:07Z","https://github.com/nuxt/ui/issues/4242",0.76603466,{"description":2894,"labels":2895,"number":2898,"owner":2869,"repository":2870,"state":2871,"title":2899,"updated_at":2900,"url":2901,"score":2902},"### Description\n\nhttps://github.com/user-attachments/assets/80bfa1b6-a5ee-4d58-84cc-0a282d3a6cb7\n\n### DeleteModal.vue\n\n```\n\u003Cscript setup lang=\"ts\">\ninterface Props {\n title: string\n description: string\n loading?: boolean\n}\n\nwithDefaults(defineProps\u003CProps>(), {\n loading: false\n})\n\nconst emit = defineEmits\u003C{\n close: [boolean]\n}>()\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUModal :title=\"title\" :description=\"description\">\n \u003Ctemplate #body>\n \u003Cdiv class=\"flex justify-end gap-2\">\n \u003CUButton\n label=\"Cancel\"\n color=\"neutral\"\n variant=\"subtle\"\n size=\"md\"\n @click=\"emit('close', false)\"\n />\n \u003CUButton\n label=\"Delete\"\n color=\"error\"\n variant=\"solid\"\n loading-auto\n :loading=\"loading\"\n size=\"md\"\n @click=\"emit('close', true)\"\n />\n \u003C/div>\n \u003C/template>\n \u003C/UModal>\n\u003C/template>\n```\n\n### NotesListModal.vue\n\n```\n\u003Cscript setup lang=\"ts\">\nimport { UserModalsNoteFormModal as NoteFormModal, DeleteModal } from '#components'\n\nconst overlay = useOverlay()\n\nconst { getUserNotes } = useGetRequest()\nconst { deleteNote } = useDeleteRequest()\nconst { user, UserNotes } = storeToRefs(useUserStore())\n\nconst isLoading = ref(false)\nconst isDeleting = ref(false)\n\nasync function openDeleteModal(id: number) {\n const instance = overlay.create(DeleteModal).open({\n title: 'Delete this note',\n description: 'Are you sure, this action cannot be undone.',\n })\n\n const confirm = await instance.result\n\n if (confirm) {\n await handleDelete(id)\n }\n}\n\nasync function handleDelete(id: number) {\n isDeleting.value = true\n try {\n const response = await deleteNote(id)\n if (response.status_code !== 200) return\n const index = UserNotes.value.findIndex(note => note.id === id)\n if (index !== -1) UserNotes.value?.splice(index, 1)\n } catch (error) {\n console.error('Error:', error)\n } finally {\n isDeleting.value = false\n }\n}\n\nonMounted(async () => {\n if (user.value?.id) {\n isLoading.value = true\n try {\n const response = await getUserNotes(user.value.id)\n if (response.status_code !== 200) return\n UserNotes.value = response.data.data\n } catch (err) {\n console.error(err)\n } finally {\n isLoading.value = false\n }\n }\n})\n\u003C/script>\n\n\u003Ctemplate>\n \u003CUModal :dismissible=\"false\" title=\"Show all notes\">\n \u003Ctemplate #body>\n \u003Cdiv v-if=\"isLoading\" class=\"flex justify-center\">\n \u003CUIcon name=\"i-lucide:loader-circle\" class=\"size-8 animate-spin\" />\n \u003C/div>\n \u003Cdiv v-else class=\"flex flex-col space-y-3\">\n \u003Cdiv v-for=\"note in UserNotes\" :key=\"`note-${note.id}`\" class=\"p-2.5 bg-[var(--ui-bg-elevated)]\">\n \u003Cp class=\"text-highlighted ltr:first-letter:uppercase\">\n {{ note.title }}\n \u003C/p>\n \u003Cspan class=\"text-sm text-muted inline-block ltr:first-letter:uppercase\">{{ note.body }}\u003C/span>\n \u003Cdiv class=\"flex items-center justify-between space-x-3\">\n \u003Cspan class=\"text-sm text-highlighted font-light inline-block\">{{ note.created_at?.split('T')[0] }}\u003C/span>\n \u003Cdiv class=\"flex items-center\">\n \u003CUButton icon=\"i-lucide:edit\" variant=\"link\" size=\"md\" @click=\"overlay.create(NoteFormModal).open({ mode: 'edit', noteId: note.id })\" />\n \u003CUButton icon=\"i-lucide:trash-2\" color=\"error\" variant=\"link\" size=\"md\" @click=\"openDeleteModal(note.id)\" />\n \u003C/div>\n \u003C/div>\n \u003C/div>\n \u003C/div>\n \u003C/template>\n \u003Ctemplate #footer>\n \u003CUButton\n label=\"Add new note\"\n icon=\"i-lucide-plus\"\n color=\"neutral\"\n variant=\"outline\"\n block\n @click=\"overlay.create(NoteFormModal).open({ mode: 'create' })\"\n />\n \u003C/template>\n \u003C/UModal>\n\u003C/template>\n```",[2896,2897],{"name":2866,"color":2867},{"name":2883,"color":2884},4249,"Show loading on delete button and close modal after deletion finishes","2025-05-28T21:02:41Z","https://github.com/nuxt/ui/issues/4249",0.78679496,{"description":2904,"labels":2905,"number":2911,"owner":2869,"repository":2870,"state":2871,"title":2912,"updated_at":2913,"url":2914,"score":2915},"### Description\n\nHello,\n\nI've spent the last couple of hours trying to implement right-click functionality on UTable rows. I've reviewed existing issues but couldn't find a solution that fits this need.\n\nWhat I want to achieve is to show a UContextMenu with actions related to the clicked row when the user right-clicks on it.\n\nCurrently, there is no way I could find to detect right-click events on individual rows along with their row data. If UTable had a #row slot or a dedicated @click.right event that provides the clicked row’s data, this would be easily achievable.\n\nIf there is any workaround or method to implement this right-click behavior on rows with access to row data, I would really appreciate if someone could share it.\n\nThank you!\n\n\n\n### Additional context\n\n_No response_",[2906,2909,2910],{"name":2907,"color":2908},"enhancement","a2eeef",{"name":2883,"color":2884},{"name":2886,"color":2887},4259,"Add support for @click.right event on UTable rows to enable context menus","2025-05-30T14:35:19Z","https://github.com/nuxt/ui/issues/4259",0.796525,{"description":2917,"labels":2918,"number":2924,"owner":2869,"repository":2870,"state":2925,"title":2926,"updated_at":2927,"url":2928,"score":2929},"### Description\n\nA toggle button would be very useful. The closest thing we have is radio group or checkbox group. \nInspired by:\n[VBtnToggle](https://vuetifyjs.com/en/components/button-groups/)\n[VChipGroup](https://vuetifyjs.com/en/components/chip-groups/#usage)\n\nSimilar functionality could be achieved on RadioGroup by making unchecking possible (so null values are selectable)\nAND/OR\nBy adding a v-model to the button component, and model-active variants (so you can change the color, varient, icon, etc when checked). The model would be either a Boolean or an array of values similar to Vuetify.\n\n### Additional context\n\n_No response_",[2919,2922,2923],{"name":2920,"color":2921},"duplicate","cfd3d7",{"name":2907,"color":2908},{"name":2883,"color":2884},4246,"closed","[Button] Toggle / V-Model","2025-05-28T17:19:55Z","https://github.com/nuxt/ui/issues/4246",0.7501222,{"description":2931,"labels":2932,"number":2935,"owner":2869,"repository":2870,"state":2925,"title":2936,"updated_at":2937,"url":2938,"score":2939},"### Description\n\nCan the width of the modal be customized? Currently, I set it globally through the `app\\assets\\css\\main.css` file. However, if I only want to modify the width of a single component, I can't find the place to do it. I tried adding `w-[1000px]` to `UModal`, but it didn't work.\n\n\n\n\n",[2933,2934],{"name":2866,"color":2867},{"name":2883,"color":2884},3041,"Can the width of the modal be customized?","2025-01-08T09:31:14Z","https://github.com/nuxt/ui/issues/3041",0.77200675,{"labels":2941,"number":2945,"owner":2869,"repository":2869,"state":2925,"title":2946,"updated_at":2947,"url":2948,"score":2949},[2942],{"name":2943,"color":2944},"2.x","d4c5f9",7387,"mounted hook called twice when using component in page","2023-01-18T15:36:09Z","https://github.com/nuxt/nuxt/issues/7387",0.7731058,{"description":2951,"labels":2952,"number":2955,"owner":2869,"repository":2870,"state":2925,"title":2956,"updated_at":2957,"url":2958,"score":2959},"### Environment\n\n- Operating System: Darwin\n- Node Version: v23.4.0\n- Nuxt Version: 3.16.1\n- CLI Version: 3.23.1\n- Nitro Version: 2.11.7\n- Package Manager: bun@1.2.5\n- Builder: -\n- User Config: devtools, modules, imports, components, css, compatibilityDate, experimental, future\n- Runtime Modules: @nuxt/ui@3.0.0\n- Build Modules: -\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/recursing-browser-klwx46\n\n### Description\n\nWhen a `SelectMenu` is wrapped in a custom component which is then consumed by `FormField` validation is triggered for an instant before the component goes back to its valid state.\n\nI've tried to debug a bit and I think it's related to the fact that the `SelectMenu` uses `Input` and that input is firing a `change` event because it uses `useFormField`, even though that particular input should not be considered the \"form field\" in this instance.\n\n### Additional context\n\nhttps://github.com/user-attachments/assets/75e8c84f-612e-48f0-bf9e-dcc1fe95ffcd\n\nI'd like to open a PR and fix this myself but I'm not sure what the best approach it. Maybe `Input` could take a prop that allows it to not fire form events? i.e. `ignore-form-events=\"true\"` so the SelectMenu would use it. This could also apply for other components that use primitive form inputs inside them (Command, InputMenu) etc.\n\n### Logs\n\n```shell-script\n\n```",[2953,2954],{"name":2880,"color":2881},{"name":2883,"color":2884},3736,"[USelectMenu] Validation events are triggered before change when wrapped in a custom component","2025-05-14T17:24:48Z","https://github.com/nuxt/ui/issues/3736",0.7772813,{"description":2961,"labels":2962,"number":2965,"owner":2869,"repository":2966,"state":2925,"title":2967,"updated_at":2968,"url":2969,"score":2970},"",[2963],{"name":2907,"color":2964},"1ad6ff",277,"nuxt.com","Command palettes modals should always have first element selected","2023-02-15T12:32:03Z","https://github.com/nuxt/nuxt.com/issues/277",0.77946335,{"description":2972,"labels":2973,"number":2965,"owner":2869,"repository":2974,"state":2925,"title":2975,"updated_at":2976,"url":2977,"score":2970},"https://github.com/nuxt-community/laravel-echo-module/blob/main/test/basic.test.ts#L12",[],"test-utils","renderAndGetWindow type not found","2023-12-02T00:13:07Z","https://github.com/nuxt/test-utils/issues/277",["Reactive",2979],{},["Set"],["ShallowReactive",2982],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fYlTHcJqjaQWv2cTUgzacJ4IzSYdBuPejZdpl0QJymuU":-1},"/nuxt/ui/3187"]