adrema-form/src/components/Popup.vue

24 lines
858 B
Vue

<template>
<div class="flex fixed top-0 left-0 w-full h-full items-center justify-center p-6 z-40 bg-black/40" @click.self="emit('close')">
<div class="rounded bg-white p-4 shadow-2xl ring-1 ring-gray-900/5 relative text-gray-600 max-w-2xl max-h-full overflow-auto">
<h2 class="font-arvo text-primary text-sm md:text-base" v-if="heading" v-text="heading"></h2>
<slot></slot>
<a class="absolute block mt-3 mr-3 right-0 top-0" href="#" @click.prevent="emit('close')">
<close-icon class="text-gray-700 w-5 h-5"></close-icon>
</a>
</div>
</div>
</template>
<script setup>
import CloseIcon from './icons/CloseIcon.vue';
const emit = defineEmits(['close']);
const props = defineProps({
heading: {
required: false,
default: () => '',
},
});
</script>