From 9f12d62c80ff8daedfe0504e2eabbf5108b47eae Mon Sep 17 00:00:00 2001
From: Zack Spear <hi@zackspear.com>
Date: Wed, 7 Jun 2023 11:23:04 -0700
Subject: [PATCH] refactor: improve modal animation and ux

---
 components/Modal.vue     | 20 ++++++++------------
 components/Modals.ce.vue |  4 ++--
 2 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/components/Modal.vue b/components/Modal.vue
index 2e7710f20..c76f404a3 100644
--- a/components/Modal.vue
+++ b/components/Modal.vue
@@ -10,38 +10,33 @@ export interface Props {
   showCloseX?: boolean;
   title?: string;
 }
-
 const props = withDefaults(defineProps<Props>(), {
   maxWidth: 'sm:max-w-lg',
   open: false,
   showCloseX: false,
 });
+watchEffect(() => {
+  // toggle body scrollability
+  return props.open
+    ? document.body.style.setProperty('overflow', 'hidden')
+    : document.body.style.removeProperty('overflow');
+});
 
 const emit = defineEmits(['close']);
 const closeModal = () => {
-  console.debug('[closeModal]');
   emit('close');
 };
 
 const { trapRef } = useFocusTrap();
 
 const ariaLablledById = computed((): string|undefined => props.title ? `ModalTitle-${Math.random()}`.replace('0.', '') : undefined);
-
-onMounted(() => {
-  console.debug('[onMounted]');
-  document.body.style.setProperty('overflow', 'hidden');
-});
-
-onBeforeUnmount(() => {
-  document.removeEventListener('keyup', () => {});
-  document.body.style.removeProperty('overflow');
-});
 </script>
 
 <template>
   <TransitionRoot appear :show="open" as="template">
     <div @keyup.esc="closeModal" ref="trapRef" class="fixed inset-0 z-10 overflow-y-auto" role="dialog" aria-dialog="true" :aria-labelledby="ariaLablledById" tabindex="-1">
       <TransitionChild
+        appear
         as="template"
         enter="duration-300 ease-out"
         enter-from="opacity-0"
@@ -58,6 +53,7 @@ onBeforeUnmount(() => {
       </TransitionChild>
       <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
         <TransitionChild
+          appear
           as="template"
           enter="duration-300 ease-out"
           enter-from="opacity-0 scale-95"
diff --git a/components/Modals.ce.vue b/components/Modals.ce.vue
index 10bb9de3c..92d9f495a 100644
--- a/components/Modals.ce.vue
+++ b/components/Modals.ce.vue
@@ -14,8 +14,8 @@ const { promoVisible } = storeToRefs(promoStore);
 
 <template>
   <div class="relative z-[99999]">
-    <UpcCallbackFeedback v-if="callbackFeedbackVisible" :open="callbackFeedbackVisible" />
-    <UpcPromo v-if="promoVisible" :open="promoVisible" />
+    <UpcCallbackFeedback :open="callbackFeedbackVisible" />
+    <UpcPromo :open="promoVisible" />
   </div>
 </template>