From 74de5b106b1df09cb959a4b4858371beb7560544 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Fri, 16 Sep 2022 16:57:44 +0200
Subject: [PATCH] chore(Modal): improve preset

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

diff --git a/src/runtime/components/overlays/Modal.vue b/src/runtime/components/overlays/Modal.vue
index e9105498..9c971ea5 100644
--- a/src/runtime/components/overlays/Modal.vue
+++ b/src/runtime/components/overlays/Modal.vue
@@ -1,8 +1,9 @@
 <template>
   <TransitionRoot :appear="appear" :show="isOpen" as="template">
     <Dialog class="relative z-50" @close="close">
-      <div class="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      <div :class="wrapperClass">
         <TransitionChild
+          v-if="overlay"
           as="template"
           :appear="appear"
           enter="ease-out duration-300"
@@ -16,7 +17,7 @@
         </TransitionChild>
 
         <div class="fixed inset-0 overflow-y-auto">
-          <div class="flex min-h-full items-end sm:items-center justify-center p-4 text-center">
+          <div :class="containerClass">
             <TransitionChild
               as="template"
               :appear="appear"
@@ -69,6 +70,14 @@ const props = defineProps({
     type: Boolean,
     default: false
   },
+  wrapperClass: {
+    type: String,
+    default: () => $ui.modal.wrapper
+  },
+  containerClass: {
+    type: String,
+    default: () => $ui.modal.container
+  },
   baseClass: {
     type: String,
     default: () => $ui.modal.base
@@ -77,6 +86,10 @@ const props = defineProps({
     type: String,
     default: () => $ui.modal.background
   },
+  overlay: {
+    type: Boolean,
+    default: true
+  },
   overlayClass: {
     type: String,
     default: () => $ui.modal.overlay
diff --git a/src/runtime/presets/default.ts b/src/runtime/presets/default.ts
index 69e7aed7..9fba51ee 100644
--- a/src/runtime/presets/default.ts
+++ b/src/runtime/presets/default.ts
@@ -244,6 +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',
     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',