feat: add fullscreen mode for the GDialog

Author: MichaelGitArt

src/components/GDialog.vue

@@ -23,6 +23,7 @@
             :height="height"
             :scrollable="scrollable"
             :depressed="depressed"
+            :fullscreen="fullscreen"
           >
             <slot />
           </GDialogContent>
@@ -52,7 +53,6 @@ export default defineComponent({
   },
 
   props: {
-
     contentClass: {
       type: String,
       default: '',
@@ -66,6 +66,11 @@ export default defineComponent({
       default: false,
     },
 
+    fullscreen: {
+      type: Boolean,
+      default: false,
+    },
+
     height: {
       type: [String, Number],
       default: 'auto',
@@ -139,6 +144,7 @@ export default defineComponent({
     const { enableScroll, disableScroll } = useScroll({
       overlay: overlayElement,
       content: contentFrame,
+      fullscreen: props.fullscreen,
     })
 
     watch(isActive, (active) => {

src/components/GDialogContent.vue

@@ -24,6 +24,11 @@ export default defineComponent({
       default: false,
     },
 
+    fullscreen: {
+      type: Boolean,
+      default: false,
+    },
+
     height: {
       type: [String, Number],
       default: 'auto',
@@ -53,6 +58,7 @@ export default defineComponent({
       {
         'g-dialog-content--scrollable': props.scrollable,
         'g-dialog-content--depressed': props.depressed,
+        'g-dialog-content--fullscreen': props.fullscreen,
       },
     ])
 
@@ -69,8 +75,6 @@ export default defineComponent({
   $dialog: &;
 
   pointer-events: auto;
-  border-radius: 4px;
-  margin: 24px;
   overflow-y: auto;
   transition: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
   width: 100%;
@@ -84,11 +88,17 @@ export default defineComponent({
   }
 
   &:not(#{$dialog}--fullscreen) {
+    border-radius: 4px;
     max-height: 90%;
+    margin: 24px;
   }
 
   &--scrollable {
     display: flex;
   }
+
+  &--fullscreen {
+    height: 100%;
+  }
 }
 </style>

src/composable/scroll.ts

@@ -5,11 +5,13 @@ import { noScrollableParent, getScrollbarWidth } from '../helper/scroll.helper'
 type ScrollParams = {
   overlay: Ref<Element | undefined>
   content: Ref<Element | undefined>
+  fullscreen: boolean
 }
 
 export const useScroll = ({
   overlay,
   content,
+  fullscreen,
 }: ScrollParams) => {
   let disabled = false
   let disableType: 'byEvents' | 'byOverflow'
@@ -31,7 +33,7 @@ export const useScroll = ({
     const scrollbarWidth = getScrollbarWidth()
 
     // The mobile has a scroll bar width of 0
-    if (scrollbarWidth === 0) {
+    if (scrollbarWidth === 0 || fullscreen) {
       disableType = 'byOverflow'
       document.documentElement.classList.add('overflow-y-hidden')
     } else {