feat(Modal): add fullscreen prop (#523)

Co-authored-by: Benjamin Canac <canacb1@gmail.com>

src/runtime/app.config.ts

@@ -877,7 +877,8 @@ const modal = {
   inner: 'fixed inset-0 overflow-y-auto',
   container: 'flex min-h-full items-end sm:items-center justify-center text-center',
   padding: 'p-4 sm:p-0',
-  base: 'relative text-left rtl:text-right overflow-hidden sm:my-8 w-full flex flex-col',
+  margin: 'sm:my-8',
+  base: 'relative text-left rtl:text-right overflow-hidden w-full flex flex-col',
   overlay: {
     base: 'fixed inset-0 transition-opacity',
     background: 'bg-gray-200/75 dark:bg-gray-800/75',

src/runtime/components/overlays/Modal.vue

@@ -8,7 +8,18 @@
       <div :class="ui.inner">
         <div :class="[ui.container, ui.padding]">
           <TransitionChild as="template" :appear="appear" v-bind="transitionClass">
-            <HDialogPanel :class="[ui.base, ui.width, ui.height, ui.background, ui.ring, ui.rounded, ui.shadow]">
+            <HDialogPanel
+              :class="[
+                ui.base,
+                ui.background,
+                ui.ring,
+                ui.shadow,
+                fullscreen ? 'w-screen' : ui.width,
+                fullscreen ? 'h-screen' : ui.height,
+                fullscreen ? 'rounded-none' : ui.rounded,
+                fullscreen ? 'm-0' : ui.margin
+              ]"
+            >
               <slot />
             </HDialogPanel>
           </TransitionChild>
@@ -58,6 +69,10 @@ export default defineComponent({
       type: Boolean,
       default: false
     },
+    fullscreen: {
+      type: Boolean,
+      default: false
+    },
     ui: {
       type: Object as PropType<Partial<typeof appConfig.ui.modal>>,
       default: () => appConfig.ui.modal