fix: UNotify: improve notification positioning logic and add fallback for delayed page load

itsJohnnyGrid · itsJohnnyGrid · commit 391edbc48292 · 2025-12-17T23:39:57.000+08:00
- Introduced `waitForPageElement` to handle scenarios where the target page element is not immediately available.
- Adjusted `setPosition` to handle dynamic offsets with fallback logic.
- Minor style adjustment for `wrapper` class.
diff --git a/src/ui.text-notify/UNotify.vue b/src/ui.text-notify/UNotify.vue
@@ -44,7 +44,7 @@ onMounted(() => {
   window.addEventListener("notifyEnd", onNotifyEnd);
   window.addEventListener("notifyClearAll", onClearAll);
 
-  setPosition();
+  waitForPageElement();
 });
 
 onBeforeUnmount(() => {
@@ -86,12 +86,37 @@ function getOffsetWidth(selector: string): number {
   return element ? (element as HTMLElement).offsetWidth : 0;
 }
 
+function waitForPageElement() {
+  const positionClasses = vuelessConfig.components?.UNotify?.positionClasses;
+  const pageClass = positionClasses?.page || config.value?.positionClasses?.page;
+  const maxWaitTime = 2000;
+  const startTime = Date.now();
+
+  function checkAndSetPosition() {
+    const element = document.querySelector(pageClass);
+
+    if (element) {
+      setPosition();
+
+      return;
+    }
+
+    if (Date.now() - startTime < maxWaitTime) {
+      requestAnimationFrame(checkAndSetPosition);
+    } else {
+      setPosition();
+    }
+  }
+
+  checkAndSetPosition();
+}
+
 function setPosition() {
   const positionClasses = vuelessConfig.components?.UNotify?.positionClasses;
   const pageClass = positionClasses?.page || config.value?.positionClasses?.page;
   const asideClass = positionClasses?.aside || config.value?.positionClasses?.aside;
-  const pageWidth = getOffsetWidth(`${pageClass}`);
-  const asideWidth = getOffsetWidth(`${asideClass}`);
+  const pageWidth = getOffsetWidth(`.${pageClass}`);
+  const asideWidth = getOffsetWidth(`.${asideClass}`);
   const notifyWidth = notificationsWrapperRef.value?.$el.offsetWidth || 0;
 
   const styles: Record<string, string> = {
@@ -104,15 +129,13 @@ function setPosition() {
   styles[props.yPosition] = "0px";
 
   if (props.xPosition === NotificationPosition.Center) {
-    styles.left = `calc(50% - ${notifyWidth / 2}px)`;
+    styles.left = pageWidth
+      ? `${asideWidth + pageWidth / 2 - notifyWidth / 2}px`
+      : `calc(50% - ${notifyWidth / 2}px)`;
   } else {
     styles[props.xPosition] = "0px";
   }
 
-  if (pageWidth && props.xPosition !== NotificationPosition.Right) {
-    styles.left = `${asideWidth + pageWidth / 2 - notifyWidth / 2}px`;
-  }
-
   notifyPositionStyles.value = styles;
 }
 
diff --git a/src/ui.text-notify/config.ts b/src/ui.text-notify/config.ts
@@ -1,5 +1,5 @@
 export default /*tw*/ {
-  wrapper: "absolute overflow-visible md:w-[22rem]",
+  wrapper: "mt-3 absolute overflow-visible md:w-[22rem]",
   transitionGroup: {
     moveClass: "transition duration-500",
     enterActiveClass: "transition duration-500",
