feat: add local mode for the dialog

- allows fixing dialog to closest relative parent

Author: MichaelGitArt

packages/dialog/src/components/GDialog.vue

@@ -2,17 +2,20 @@
   <slot name="activator" v-bind="activatorAttrs" />
 
   <template v-if="activatedOnce">
-    <Teleport to="body">
+    <Teleport to="body" :disabled="local">
       <GDialogOverlay
         v-if="!fullscreen"
         ref="overlay"
         :active="isActive"
-        :deactivating="deactivating"
         :active-z-index="activeZIndex"
         :background="overlayBackground"
+        :deactivating="deactivating"
+        :local="local"
         @click="onClickOutside"
       />
+    </Teleport>
 
+    <Teleport to="body" :disabled="local">
       <Transition :name="transition">
         <div
           v-show="isActive"
@@ -58,6 +61,7 @@ export default defineComponent({
     GDialogContent,
   },
 
+  inheritAttrs: false,
   props: {
     background: {
       type: [Boolean, String],
@@ -129,6 +133,15 @@ export default defineComponent({
       type: [String, Number],
       default: 'auto',
     },
+
+    /**
+     * enables local mode for the dialog.
+     * dialog is fixed to first "position: relative;" parant
+     */
+    local: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   emits: {
@@ -172,6 +185,7 @@ export default defineComponent({
       {
         'g-dialog-frame--active': isActive.value,
         'g-dialog-frame--fullscreen': props.fullscreen,
+        'g-dialog-frame--local': props.local,
       },
     ])
 
@@ -189,6 +203,9 @@ export default defineComponent({
     })
 
     watch(isActive, (active) => {
+      if(props.local)
+        return
+
       if(active) {
         disableScroll()
       } else {
@@ -246,6 +263,10 @@ export default defineComponent({
   outline: none;
   pointer-events: none;
   z-index: 201;
+
+  &--local {
+    position: absolute;
+  }
 }
 
 .g-dialog-transition {

packages/dialog/src/components/GDialogContent.vue

@@ -125,7 +125,7 @@ export default defineComponent({
   background: v-bind('computedBackground');
   border-radius: v-bind('computedBorderRadius');
 
-  &:not(#{$dialog}--depressed) {
+  &:not(#{$dialog}--depressed):not(#{$dialog}--fullscreen) {
     box-shadow: var(--content-shadow)
   }
 

packages/dialog/src/components/GDialogOverlay.vue

@@ -28,14 +28,19 @@ export default defineComponent({
       required: true,
     },
 
+    background: {
+      type: [Boolean, String],
+      required: true,
+    },
+
     deactivating: {
       type: Boolean,
       required: true,
     },
 
-    background: {
-      type: [Boolean, String],
-      required: true,
+    local: {
+      type: Boolean,
+      default: false,
     },
   },
 
@@ -49,6 +54,7 @@ export default defineComponent({
       'g-dialog-overlay',
       {
         'g-dialog-overlay--active': props.active && !props.deactivating,
+        'g-dialog-overlay--local': props.local,
       },
     ])
 
@@ -95,6 +101,10 @@ export default defineComponent({
   &--active {
     pointer-events: auto;
   }
+
+  &--local {
+    position: absolute;
+  }
 }
 
 .fade {