opnform/client/components/global/Modal.vue

176 lines
3.9 KiB
Vue
Raw Normal View History

2023-12-09 14:47:03 +00:00
<template>
2023-12-14 15:53:05 +00:00
<Teleport to="body">
2023-12-20 12:51:39 +00:00
<transition @leave="onLeave">
<div v-if="show" ref="backdrop"
2023-12-09 14:47:03 +00:00
class="fixed z-30 top-0 inset-0 px-4 sm:px-0 flex items-top justify-center bg-gray-700/75 w-full h-screen overflow-y-scroll"
:class="{'backdrop-blur-sm':backdropBlur}"
@click.self="close"
>
2023-12-20 12:51:39 +00:00
<div ref="content"
2023-12-09 14:47:03 +00:00
class="self-start bg-white dark:bg-notion-dark w-full relative p-4 md:p-6 my-6 rounded-xl shadow-xl"
:class="maxWidthClass"
>
<div v-if="closeable" class="absolute top-4 right-4">
2023-12-24 08:51:22 +00:00
<button class="text-gray-500 hover:text-gray-900 cursor-pointer" @click="close()">
2023-12-09 14:47:03 +00:00
<svg class="h-6 w-6" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M18 6L6 18M6 6L18 18" stroke="currentColor" stroke-width="2" stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
</button>
</div>
<div class="sm:flex sm:flex-col sm:items-start">
<div v-if="$slots.hasOwnProperty('icon')" class="flex w-full justify-center mb-4">
2023-12-09 14:47:03 +00:00
<div class="w-14 h-14 rounded-full flex justify-center items-center"
:class="'bg-'+iconColor+'-100 text-'+iconColor+'-600'"
>
<slot name="icon"/>
</div>
</div>
<div class="mt-3 text-center sm:mt-0 w-full">
<h2 v-if="$slots.hasOwnProperty('title')"
2023-12-09 14:47:03 +00:00
class="text-2xl font-semibold text-center text-gray-900"
>
<slot name="title"/>
</h2>
</div>
</div>
<div class="w-full">
<slot/>
</div>
2023-12-20 12:51:39 +00:00
<div v-if="$slots.hasOwnProperty('footer')" class="px-6 py-4 bg-gray-100 text-right">
2023-12-09 14:47:03 +00:00
<slot name="footer"/>
</div>
</div>
</div>
</transition>
2023-12-14 15:53:05 +00:00
</Teleport>
2023-12-09 14:47:03 +00:00
</template>
2023-12-19 18:42:02 +00:00
<script setup>
import {watch} from "vue";
2023-12-09 14:47:03 +00:00
2023-12-19 18:42:02 +00:00
const props = defineProps({
show: {
default: false
},
backdropBlur: {
type: Boolean,
default: false
},
iconColor: {
default: 'blue'
2023-12-09 14:47:03 +00:00
},
2023-12-19 18:42:02 +00:00
maxWidth: {
default: '2xl'
},
closeable: {
default: true
}
})
2023-12-09 14:47:03 +00:00
2023-12-19 18:42:02 +00:00
const emits = defineEmits(['close'])
2023-12-09 14:47:03 +00:00
2023-12-19 18:42:02 +00:00
useHead({
bodyAttrs: {
class: {
'overflow-hidden': props.show
2023-12-09 14:47:03 +00:00
}
2023-12-19 18:42:02 +00:00
}
})
2023-12-09 14:47:03 +00:00
2023-12-19 18:42:02 +00:00
const closeOnEscape = (e) => {
if (e.key === 'Escape' && this.show) {
this.close()
}
}
2023-12-09 14:47:03 +00:00
2023-12-19 18:42:02 +00:00
onMounted(() => {
if (process.server) return
document.addEventListener('keydown', closeOnEscape)
initMotions()
2023-12-19 18:42:02 +00:00
})
2023-12-09 14:47:03 +00:00
2023-12-19 18:42:02 +00:00
onBeforeUnmount(() => {
if (process.server) return
document.removeEventListener('keydown', closeOnEscape)
})
2023-12-09 14:47:03 +00:00
2023-12-19 18:42:02 +00:00
const maxWidthClass = computed(() => {
return {
sm: 'sm:max-w-sm',
md: 'sm:max-w-md',
lg: 'sm:max-w-lg',
xl: 'sm:max-w-xl',
'2xl': 'sm:max-w-2xl'
}[props.maxWidth]
})
2023-12-20 12:51:39 +00:00
const motionFadeIn = {
initial: {
opacity: 0,
transition: {
delay: 100,
duration: 200,
ease: 'easeIn'
2023-12-09 14:47:03 +00:00
}
2023-12-20 12:51:39 +00:00
},
enter: {
opacity: 1,
transition: {
duration: 200
2023-12-09 14:47:03 +00:00
}
2023-12-19 18:42:02 +00:00
}
2023-12-20 12:51:39 +00:00
}
2023-12-09 14:47:03 +00:00
2023-12-20 12:51:39 +00:00
const motionSlideBottom = {
initial: {
y: 150,
opacity: 0,
transition: {
ease: 'easeIn',
duration: 200
}
},
enter: {
y: 0,
opacity: 1,
transition: {
duration: 250,
ease: 'easeOut',
delay: 100
2023-12-09 14:47:03 +00:00
}
}
2023-12-20 12:51:39 +00:00
}
const onLeave = (el, done) => {
contentMotion.value.leave(()=>{})
backdropMotion.value.leave(done)
}
2023-12-19 18:42:02 +00:00
const close = () => {
if (props.closeable) {
emits('close')
}
2023-12-09 14:47:03 +00:00
}
2023-12-20 12:51:39 +00:00
const backdrop = ref(null)
const content = ref(null)
const backdropMotion = ref(null)
const contentMotion = ref(null)
const initMotions = () => {
if (props.show) {
2023-12-20 12:51:39 +00:00
nextTick(() => {
backdropMotion.value = useMotion(backdrop.value, motionFadeIn)
contentMotion.value = useMotion(content.value, motionSlideBottom)
})
}
}
watch(() => props.show, initMotions)
2023-12-20 12:51:39 +00:00
2023-12-09 14:47:03 +00:00
</script>