From ae81a90b7378ce35afc2553f8f1a8771b24edb3f Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Sun, 21 Jan 2024 10:43:57 +0000
Subject: [PATCH] Refactor on overlay gutters

---
 components/lib/confirmpopup/ConfirmPopup.vue |  2 +-
 components/lib/overlaypanel/OverlayPanel.vue |  2 +-
 components/lib/utils/DomHandler.js           | 24 ++++++++++++--------
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/components/lib/confirmpopup/ConfirmPopup.vue b/components/lib/confirmpopup/ConfirmPopup.vue
index 9292d01e8..2cbbf1eb2 100644
--- a/components/lib/confirmpopup/ConfirmPopup.vue
+++ b/components/lib/confirmpopup/ConfirmPopup.vue
@@ -190,7 +190,7 @@ export default {
             ZIndexUtils.clear(el);
         },
         alignOverlay() {
-            DomHandler.absolutePosition(this.container, this.target);
+            DomHandler.absolutePosition(this.container, this.target, false);
 
             const containerOffset = DomHandler.getOffset(this.container);
             const targetOffset = DomHandler.getOffset(this.target);
diff --git a/components/lib/overlaypanel/OverlayPanel.vue b/components/lib/overlaypanel/OverlayPanel.vue
index e268fab2f..5f992646b 100755
--- a/components/lib/overlaypanel/OverlayPanel.vue
+++ b/components/lib/overlaypanel/OverlayPanel.vue
@@ -150,7 +150,7 @@ export default {
             }
         },
         alignOverlay() {
-            DomHandler.absolutePosition(this.container, this.target);
+            DomHandler.absolutePosition(this.container, this.target, false);
 
             const containerOffset = DomHandler.getOffset(this.container);
             const targetOffset = DomHandler.getOffset(this.target);
diff --git a/components/lib/utils/DomHandler.js b/components/lib/utils/DomHandler.js
index 45e5d5dbe..29323f0fe 100755
--- a/components/lib/utils/DomHandler.js
+++ b/components/lib/utils/DomHandler.js
@@ -294,7 +294,7 @@ export default {
         return 0;
     },
 
-    absolutePosition(element, target) {
+    absolutePosition(element, target, gutter = true) {
         if (element) {
             const elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
             const elementOuterHeight = elementDimensions.height;
@@ -305,20 +305,19 @@ export default {
             const windowScrollTop = this.getWindowScrollTop();
             const windowScrollLeft = this.getWindowScrollLeft();
             const viewport = this.getViewport();
-            let top, left;
+            let top,
+                left,
+                origin = 'top';
 
             if (targetOffset.top + targetOuterHeight + elementOuterHeight > viewport.height) {
                 top = targetOffset.top + windowScrollTop - elementOuterHeight;
-                element.style.transformOrigin = 'bottom';
-                element.style.marginTop = 'calc(var(--p-anchor-gutter) * -1)';
+                origin = 'bottom';
 
                 if (top < 0) {
                     top = windowScrollTop;
                 }
             } else {
                 top = targetOuterHeight + targetOffset.top + windowScrollTop;
-                element.style.transformOrigin = 'top';
-                element.style.marginTop = 'calc(var(--p-anchor-gutter))';
             }
 
             if (targetOffset.left + elementOuterWidth > viewport.width) left = Math.max(0, targetOffset.left + windowScrollLeft + targetOuterWidth - elementOuterWidth);
@@ -326,27 +325,30 @@ export default {
 
             element.style.top = top + 'px';
             element.style.left = left + 'px';
+            element.style.transformOrigin = origin;
+            gutter && (element.style.marginTop = origin === 'bottom' ? 'calc(var(--p-anchor-gutter) * -1)' : 'calc(var(--p-anchor-gutter))');
         }
     },
 
-    relativePosition(element, target) {
+    relativePosition(element, target, gutter = true) {
         if (element) {
             const elementDimensions = element.offsetParent ? { width: element.offsetWidth, height: element.offsetHeight } : this.getHiddenElementDimensions(element);
             const targetHeight = target.offsetHeight;
             const targetOffset = target.getBoundingClientRect();
             const viewport = this.getViewport();
-            let top, left;
+            let top,
+                left,
+                origin = 'top';
 
             if (targetOffset.top + targetHeight + elementDimensions.height > viewport.height) {
                 top = -1 * elementDimensions.height;
-                element.style.transformOrigin = 'bottom';
+                origin = 'bottom';
 
                 if (targetOffset.top + top < 0) {
                     top = -1 * targetOffset.top;
                 }
             } else {
                 top = targetHeight;
-                element.style.transformOrigin = 'top';
             }
 
             if (elementDimensions.width > viewport.width) {
@@ -362,6 +364,8 @@ export default {
 
             element.style.top = top + 'px';
             element.style.left = left + 'px';
+            element.style.transformOrigin = origin;
+            gutter && (element.style.marginTop = origin === 'bottom' ? 'calc(var(--p-anchor-gutter) * -1)' : 'calc(var(--p-anchor-gutter))');
         }
     },