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

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

docs/components/content/examples/ModalExampleFullscreen.vue

@@ -0,0 +1,33 @@
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <UModal v-model="isOpen" fullscreen>
+      <UCard
+        :ui="{
+          base: 'h-full flex flex-col',
+          rounded: '',
+          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+          body: {
+            base: 'grow'
+          }
+        }"
+      >
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Modal
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+          </div>
+        </template>
+
+        <Placeholder class="h-full" />
+      </UCard>
+    </UModal>
+  </div>
+</template>

docs/content/6.overlays/1.modal.md

@@ -178,6 +178,52 @@ defineShortcuts({
 </script>
 ```
 
+### Fullscreen
+
+Set the `fullscreen` prop to `true` to enable it.
+
+::component-example
+#default
+:modal-example-fullscreen
+
+#code
+```vue
+<script setup>
+const isOpen = ref(false)
+</script>
+
+<template>
+  <div>
+    <UButton label="Open" @click="isOpen = true" />
+
+    <UModal v-model="isOpen" fullscreen>
+      <UCard
+        :ui="{
+          base: 'h-full flex flex-col',
+          rounded: '',
+          divide: 'divide-y divide-gray-100 dark:divide-gray-800',
+          body: {
+            base: 'grow'
+          }
+        }"
+      >
+        <template #header>
+          <div class="flex items-center justify-between">
+            <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
+              Modal
+            </h3>
+            <UButton color="gray" variant="ghost" icon="i-heroicons-x-mark-20-solid" class="-my-1" @click="isOpen = false" />
+          </div>
+        </template>
+
+        <Placeholder class="h-full" />
+      </UCard>
+    </UModal>
+  </div>
+</template>
+```
+::
+
 ## Props
 
 :component-props

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