chore(Modal): improve preset

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

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',