From 38f248c24d52dcbf6d771c7732225757b76cb544 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 16 Sep 2022 17:43:43 +0200
Subject: [PATCH] chore(Modal): handle transition disable

---
 src/runtime/components/overlays/Modal.vue | 114 +++++++++++++---------
 src/runtime/presets/default.ts            |   4 +-
 2 files changed, 70 insertions(+), 48 deletions(-)

diff --git a/src/runtime/components/overlays/Modal.vue b/src/runtime/components/overlays/Modal.vue
index 9c971ea5..16c23df3 100644
--- a/src/runtime/components/overlays/Modal.vue
+++ b/src/runtime/components/overlays/Modal.vue
@@ -1,53 +1,41 @@
 <template>
   <TransitionRoot :appear="appear" :show="isOpen" as="template">
     <Dialog class="relative z-50" @close="close">
-      <div :class="wrapperClass">
-        <TransitionChild
-          v-if="overlay"
-          as="template"
-          :appear="appear"
-          enter="ease-out duration-300"
-          enter-from="opacity-0"
-          enter-to="opacity-100"
-          leave="ease-in duration-200"
-          leave-from="opacity-100"
-          leave-to="opacity-0"
-        >
-          <div class="fixed inset-0 transition-opacity" :class="overlayClass" />
-        </TransitionChild>
+      <TransitionChild
+        v-if="overlay"
+        as="template"
+        :appear="appear"
+        v-bind="overlayTransition"
+      >
+        <div class="fixed inset-0 transition-opacity" :class="overlayClass" />
+      </TransitionChild>
 
-        <div class="fixed inset-0 overflow-y-auto">
-          <div :class="containerClass">
-            <TransitionChild
-              as="template"
-              :appear="appear"
-              enter="ease-out duration-300"
-              enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-              enter-to="opacity-100 translate-y-0 sm:scale-100"
-              leave="ease-in duration-200"
-              leave-from="opacity-100 translate-y-0 sm:scale-100"
-              leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
-            >
-              <DialogPanel :class="modalClass">
-                <Card
-                  base-class=""
-                  background-class=""
-                  shadow-class=""
-                  ring-class=""
-                  rounded-class=""
-                  v-bind="$attrs"
-                >
-                  <template v-if="$slots.header" #header>
-                    <slot name="header" />
-                  </template>
-                  <slot />
-                  <template v-if="$slots.footer" #footer>
-                    <slot name="footer" />
-                  </template>
-                </Card>
-              </DialogPanel>
-            </TransitionChild>
-          </div>
+      <div :class="wrapperClass">
+        <div :class="containerClass">
+          <TransitionChild
+            as="template"
+            :appear="appear"
+            v-bind="modalTransition"
+          >
+            <DialogPanel :class="modalClass">
+              <Card
+                base-class=""
+                background-class=""
+                shadow-class=""
+                ring-class=""
+                rounded-class=""
+                v-bind="$attrs"
+              >
+                <template v-if="$slots.header" #header>
+                  <slot name="header" />
+                </template>
+                <slot />
+                <template v-if="$slots.footer" #footer>
+                  <slot name="footer" />
+                </template>
+              </Card>
+            </DialogPanel>
+          </TransitionChild>
         </div>
       </div>
     </Dialog>
@@ -109,6 +97,10 @@ const props = defineProps({
   widthClass: {
     type: String,
     default: () => $ui.modal.width
+  },
+  transition: {
+    type: Boolean,
+    default: true
   }
 })
 
@@ -134,6 +126,36 @@ const modalClass = computed(() => {
   )
 })
 
+const overlayTransition = computed(() => {
+  if (!props.transition) {
+    return {}
+  }
+
+  return {
+    enter: 'ease-out duration-300',
+    enterFrom: 'opacity-0',
+    enterTo: 'opacity-100',
+    leave: 'ease-in duration-200',
+    leaveFrom: 'opacity-100',
+    leaveTo: 'opacity-0'
+  }
+})
+
+const modalTransition = computed(() => {
+  if (!props.transition) {
+    return {}
+  }
+
+  return {
+    enter: 'ease-out duration-300',
+    enterFrom: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95',
+    enterTo: 'opacity-100 translate-y-0 sm:scale-100',
+    leave: 'ease-in duration-200',
+    leaveFrom: 'opacity-100 translate-y-0 sm:scale-100',
+    leaveTo: 'opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95'
+  }
+})
+
 function close (value: boolean) {
   isOpen.value = value
   emit('close')
diff --git a/src/runtime/presets/default.ts b/src/runtime/presets/default.ts
index 9fba51ee..cd166112 100644
--- a/src/runtime/presets/default.ts
+++ b/src/runtime/presets/default.ts
@@ -244,8 +244,8 @@ export default (variantColors: string[]) => {
   }
 
   const modal = {
-    wrapper: 'flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0',
-    container: 'flex min-h-full items-end sm:items-center justify-center p-4 text-center',
+    wrapper: 'fixed inset-0 overflow-y-auto',
+    container: 'flex min-h-full items-end sm:items-center justify-center p-4 sm:p-0 text-center',
     base: 'relative inline-block align-bottom text-left overflow-hidden transform transition-all sm:my-8 sm:align-middle w-full',
     background: 'u-bg-white',
     overlay: 'bg-gray-500/75 dark:bg-gray-600/75',