Skip to content

Commit

Permalink
chore: layer modal wrapper remove animation
Browse files Browse the repository at this point in the history
  • Loading branch information
ThomasRalee committed Jan 9, 2024
1 parent ed0481a commit 48222e6
Showing 1 changed file with 16 additions and 32 deletions.
48 changes: 16 additions & 32 deletions layer/components/ModalWrapper.vue
Original file line number Diff line number Diff line change
Expand Up @@ -40,9 +40,7 @@ function onModalClose() {
closeModal()
}
onKeyStroke('Escape', () => {
closeModal()
})
onKeyStroke('Escape', closeModal)
onClickOutside(
modalRef,
Expand All @@ -61,39 +59,25 @@ export default {
</script>

<template>
<Transition name="modal" appear>
<div
class="fixed inset-0 z-50 h-full w-full duration-300 ease-in"
:class="wrapperClass"
>
<div class="flex items-center justify-center h-full">
<div
class="fixed inset-0 z-50 h-full w-full duration-300 ease-in"
:class="wrapperClass"
>
<div class="flex items-center justify-center h-full">
<div
ref="modalRef"
class="modal-container overflow-y-hidden"
:class="$attrs.class"
>
<div
ref="modalRef"
class="modal-container overflow-y-hidden"
:class="$attrs.class"
class="max-h-screen sm:max-h-[90vh] overflow-y-auto"
:class="containerClass"
>
<div
class="max-h-screen sm:max-h-[90vh] overflow-y-auto"
:class="containerClass"
>
<div class="modal-content">
<slot :close="onModalClose" v-bind="{ isLoading }" />
</div>
<div class="modal-content">
<slot :close="onModalClose" v-bind="{ isLoading }" />
</div>
</div>
</div>
</div>
</Transition>
</div>
</template>

<style scoped>
.modal-enter-from,
.modal-leave-to {
@apply opacity-0;
}
.modal-leave-active .modal-container {
transition: 300ms cubic-bezier(0.4, 0, 1, 1);
transform: scale(0.9);
}
</style>

0 comments on commit 48222e6

Please sign in to comment.