From 7da11ccec088206b26abe6a86a7d0c5c290e586f Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Sun, 9 Oct 2022 21:35:53 +0200
Subject: [PATCH] chore: improve `Modal` / `Slideover` preset

---
 src/runtime/components/overlays/Modal.vue     |  8 ++++++--
 src/runtime/components/overlays/Slideover.vue | 12 +++++-------
 src/runtime/presets/default.ts                |  4 +++-
 3 files changed, 14 insertions(+), 10 deletions(-)

diff --git a/src/runtime/components/overlays/Modal.vue b/src/runtime/components/overlays/Modal.vue
index 4640c1d3..2c352ab1 100644
--- a/src/runtime/components/overlays/Modal.vue
+++ b/src/runtime/components/overlays/Modal.vue
@@ -1,6 +1,6 @@
 <template>
   <TransitionRoot :appear="appear" :show="isOpen" as="template">
-    <Dialog class="relative z-50" @close="close">
+    <Dialog :class="wrapperClass" @close="close">
       <TransitionChild
         v-if="overlay"
         as="template"
@@ -10,7 +10,7 @@
         <div class="fixed inset-0 transition-opacity" :class="overlayBackgroundClass" />
       </TransitionChild>
 
-      <div :class="wrapperClass">
+      <div :class="innerClass">
         <div :class="containerClass">
           <TransitionChild
             as="template"
@@ -62,6 +62,10 @@ const props = defineProps({
     type: String,
     default: () => $ui.modal.wrapper
   },
+  innerClass: {
+    type: String,
+    default: () => $ui.modal.inner
+  },
   containerClass: {
     type: String,
     default: () => $ui.modal.container
diff --git a/src/runtime/components/overlays/Slideover.vue b/src/runtime/components/overlays/Slideover.vue
index 1837df16..2c00b267 100644
--- a/src/runtime/components/overlays/Slideover.vue
+++ b/src/runtime/components/overlays/Slideover.vue
@@ -1,12 +1,6 @@
 <template>
   <TransitionRoot as="template" :appear="appear" :show="isOpen">
-    <Dialog
-      class="fixed inset-0 flex z-40"
-      :class="{
-        'justify-end': side === 'right'
-      }"
-      @close="isOpen = false"
-    >
+    <Dialog :class="[wrapperClass, { 'justify-end': side === 'right' }]" @close="isOpen = false">
       <TransitionChild
         v-if="overlay"
         as="template"
@@ -53,6 +47,10 @@ const props = defineProps({
     default: 'left',
     validator: (value: string) => ['left', 'right'].includes(value)
   },
+  wrapperClass: {
+    type: String,
+    default: () => $ui.slideover.wrapper
+  },
   baseClass: {
     type: String,
     default: () => $ui.slideover.base
diff --git a/src/runtime/presets/default.ts b/src/runtime/presets/default.ts
index 0d0cec6f..bd7a5e4e 100644
--- a/src/runtime/presets/default.ts
+++ b/src/runtime/presets/default.ts
@@ -250,7 +250,8 @@ export default (variantColors: string[]) => {
   }
 
   const modal = {
-    wrapper: 'fixed inset-0 overflow-y-auto',
+    wrapper: 'relative z-50',
+    inner: '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',
@@ -422,6 +423,7 @@ export default (variantColors: string[]) => {
   }
 
   const slideover = {
+    wrapper: 'fixed inset-0 flex z-40',
     overlay: {
       background: 'bg-gray-500/75 dark:bg-gray-600/75',
       transition: {