chore: improve Modal / Slideover preset

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

src/runtime/components/overlays/Slideover.vue

@@ -1,12 +1,6 @@
 <template>
   <TransitionRoot as="template" :appear="appear" :show="isOpen">
-    <Dialog
+    <Dialog :class="[wrapperClass, { 'justify-end': side === 'right' }]" @close="isOpen = false">
-      class="fixed inset-0 flex z-40"
-      :class="{
-        '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

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: {