Improve modal behavior (#1871)

* fix modal behavior

* 3.22.5

Author: aggre

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@devprotocol/clubs-core",
-	"version": "3.22.4",
+	"version": "3.22.5",
 	"description": "Core library for Clubs",
 	"main": "dist/index.mjs",
 	"exports": {

src/ui/components/Checkout/ModalCheckout.vue

@@ -123,7 +123,9 @@ onMounted(async () => {
 </style>
 
 <template>
-	<div class="@container/clb_result_modal">
+	<div
+		class="m-auto w-full max-w-screen-lg rounded-xl bg-white p-4 text-black shadow @container/clb_result_modal"
+	>
 		<div
 			class="bg-color-navy relative mb-6 flex h-auto min-h-52 w-full flex-col items-center justify-center overflow-hidden rounded-md border border-black p-2 @xl/clb_result_modal:h-96 @xl/clb_result_modal:min-h-0 @xl/clb_result_modal:p-8"
 		>
@@ -138,12 +140,6 @@ onMounted(async () => {
 				>
 			</h3>
 			<!-- image -->
-			<img
-				:src="image?.src"
-				:width="image?.width"
-				:height="image?.height"
-				class="z-10 max-h-60 min-h-full max-w-60 object-contain @xl/clb_result_modal:max-h-none @xl/clb_result_modal:max-w-xl"
-			/>
 			<img
 				v-if="!image && imageSrc"
 				:src="imageSrc"

src/ui/components/Modal.vue

@@ -1,68 +1,26 @@
 <script setup lang="ts">
-import { Component as VueComponent } from 'vue'
+import { useTemplateRef, Component as VueComponent, watch } from 'vue'
 
-defineProps<{
+const props = defineProps<{
 	eoa?: string
 	modalClose?: () => void
 	isVisible: boolean
 	modalContent: VueComponent
 	attrs: { [key: string]: any }
 }>()
-</script>
-
-<style>
-.modal-container {
-	position: fixed;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	display: flex;
-	justify-content: center;
-	align-items: flex-end;
-	z-index: 10;
-}
-
-@media (min-width: 1024px) {
-	.modal-container {
-		align-items: center;
-	}
-}
 
-.modal-overlay {
-	position: fixed;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	background: rgba(0, 0, 0, 0.6);
-	z-index: -1;
-}
-
-.modal-content {
-	display: flex;
-	flex-direction: column;
-	padding: 1rem;
-	width: 100%;
-	max-width: 64rem;
-	background: white;
-	border-top-left-radius: 0.5rem;
-	border-top-right-radius: 0.5rem;
-	border-bottom-left-radius: 0;
-	border-bottom-right-radius: 0;
-	box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
-
-	max-height: 80vh;
-	overflow-y: auto;
-}
+const dialog = useTemplateRef('dialog')
 
-@media (min-width: 1024px) {
-	.modal-content {
-		border-bottom-left-radius: 0.5rem;
-		border-bottom-right-radius: 0.5rem;
+watch(props, () => {
+	if (props.isVisible) {
+		dialog.value?.showModal()
+	} else {
+		dialog.value?.close()
 	}
-}
+})
+</script>
 
+<style>
 .v-enter-active {
 	transition: transform 600ms cubic-bezier(0.07, 1.28, 0.5, 1);
 }
@@ -79,36 +37,34 @@ defineProps<{
 	transform: translate(0, 0);
 }
 
-html:has(#modal-container[data-active='true']) {
+html:has(dialog[open]) {
 	overflow: hidden;
 }
 </style>
 
 <template>
 	<div>
-		<Teleport to="body">
-			<div
-				id="modal-container"
-				v-show="isVisible"
-				class="modal-container"
-				:data-active="isVisible"
-			>
-				<div class="modal-overlay"></div>
-				<Transition>
+		<dialog
+			ref="dialog"
+			class="fixed inset-0 flex items-center justify-center overflow-y-auto"
+			:class="{ hidden: !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"
-						class="modal-content"
 						:is="modalContent"
 						v-bind="attrs"
 					>
 						<template #after:description>
 							<slot name="after:description" />
 						</template>
 					</component>
-				</Transition>
-			</div>
-		</Teleport>
+				</div>
+			</Transition>
+		</dialog>
 	</div>
 </template>