stop using Dialog.showModal (#1872)

Author: aggre

src/ui/components/Modal.vue

@@ -1,23 +1,13 @@
 <script setup lang="ts">
-import { useTemplateRef, Component as VueComponent, watch } from 'vue'
+import { Component as VueComponent } from 'vue'
 
-const props = defineProps<{
+defineProps<{
 	eoa?: string
 	modalClose?: () => void
 	isVisible: boolean
 	modalContent: VueComponent
 	attrs: { [key: string]: any }
 }>()
-
-const dialog = useTemplateRef('dialog')
-
-watch(props, () => {
-	if (props.isVisible) {
-		dialog.value?.showModal()
-	} else {
-		dialog.value?.close()
-	}
-})
 </script>
 
 <style>
@@ -43,25 +33,28 @@ html:has(dialog[open]) {
 </style>
 
 <template>
-	<dialog
-		ref="dialog"
-		class="fixed inset-0 flex items-center justify-center overflow-y-auto backdrop:bg-black/60"
-		:class="{ hidden: !isVisible }"
-	>
-		<Transition>
-			<div class="relative m-auto w-full py-4">
-				<component
-					:eoa="eoa"
-					:modalClose="modalClose"
-					v-show="isVisible"
-					:is="modalContent"
-					v-bind="attrs"
-				>
-					<template #after:description>
-						<slot name="after:description" />
-					</template>
-				</component>
-			</div>
-		</Transition>
-	</dialog>
+	<Teleport to="body">
+		<dialog
+			class="fixed inset-0 flex items-center justify-center overflow-y-auto"
+			v-show="isVisible"
+			:open="isVisible"
+		>
+			<div class="fixed inset-0 bg-black/60"></div>
+			<Transition>
+				<div class="relative m-auto w-full py-4">
+					<component
+						:eoa="eoa"
+						:modalClose="modalClose"
+						v-show="isVisible"
+						:is="modalContent"
+						v-bind="attrs"
+					>
+						<template #after:description>
+							<slot name="after:description" />
+						</template>
+					</component>
+				</div>
+			</Transition>
+		</dialog>
+	</Teleport>
 </template>