\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>`",[3222,3223,3226],{"name":3166,"color":3167},{"name":3224,"color":3225},"closed-by-bot","ededed",{"name":3227,"color":3225},"stale",4244,"Clicking on any area when opening the UModal component in UHeader will cause the panel to be closed","2025-08-20T02:08:36Z","https://github.com/nuxt/ui/issues/4244",0.720462,{"description":3234,"labels":3235,"number":3239,"owner":3155,"repository":3156,"state":3214,"title":3240,"updated_at":3241,"url":3242,"score":3243},"### Environment\r\n\r\n------------------------------\r\n- Operating System: Linux\r\n- Node Version: v18.20.3\r\n- Nuxt Version: 3.12.1\r\n- CLI Version: 3.12.0\r\n- Nitro Version: 2.9.6\r\n- Package Manager: pnpm@8.15.6\r\n- Builder: -\r\n- User Config: modules\r\n- Runtime Modules: @nuxt/ui@2.17.0\r\n- Build Modules: -\r\n------------------------------\r\n\r\n### Version\r\n\r\nv2.17.0\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-ui-5movd8?file=app.vue\r\n(Test on mobile or open Devtools and toggle device mode.)\r\n\r\n### Description\r\n\r\nWhen two or more `UModal` are using `preventClose` prop doesn't allow to interact with the elements of the modal on top when in touch mode.\r\n\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Logs\r\n\r\n_No response_",[3236,3237,3238],{"name":3146,"color":3147},{"name":3224,"color":3225},{"name":3227,"color":3225},1932,"`UModal` preventClose doesn't allow to interact with elements","2025-06-19T02:12:17Z","https://github.com/nuxt/ui/issues/1932",0.7318922,{"description":3245,"labels":3246,"number":3250,"owner":3155,"repository":3156,"state":3214,"title":3251,"updated_at":3252,"url":3253,"score":3254},"### Environment\n\n- Operating System: `Darwin`\n- Node Version: `v18.20.8`\n- Nuxt Version: `-`\n- CLI Version: `3.25.1`\n- Nitro Version: `-`\n- Package Manager: `npm@10.8.2`\n- Builder: `-`\n- User Config: `-`\n- Runtime Modules: `-`\n- Build Modules: `-`\n\n### Is this bug related to Nuxt or Vue?\n\nVue\n\n### Version\n\nv3.1.3\n\n### Reproduction\n\nhttps://codesandbox.io/p/sandbox/modal-close-not-working-kc99r3\n\n### Description\n\nThe scoped slots `content`, `header`, `body` and `footer` in UModal are supposed to receive an object containing a close-method, as per [the docs](https://ui.nuxt.com/components/modal#slots). They do not; only an empty object is received. Due to this, the Cancel-button from the [footer-example](https://ui.nuxt.com/components/modal#with-footer-slot) in the docs does not work. Inexplicably, the example in the docs works 🤔\n\n### Additional context\n\n_No response_\n\n### Logs\n\n```shell-script\n\n```",[3247,3248,3249],{"name":3146,"color":3147},{"name":3149,"color":3150},{"name":3152,"color":3153},4266,"Modal content, header, body and footer slots not receiving the close method","2025-06-01T06:07:09Z","https://github.com/nuxt/ui/issues/4266",0.7378147,{"description":3256,"labels":3257,"number":3260,"owner":3155,"repository":3156,"state":3214,"title":3261,"updated_at":3262,"url":3263,"score":3264},"### 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```",[3258,3259],{"name":3166,"color":3167},{"name":3149,"color":3150},4249,"Show loading on delete button and close modal after deletion finishes","2025-06-01T12:38:39Z","https://github.com/nuxt/ui/issues/4249",0.74639547,["Reactive",3266],{},["Set"],["ShallowReactive",3269],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fJCy89Ei9C1TW8Gs1oZZ1Fa8OSSiYjwE3hw-o9H05vP8":-1},"/nuxt/ui/4537"]