Skip to content

Commit 391edbc

Browse files
committed
fix: UNotify: improve notification positioning logic and add fallback for delayed page load
- 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.
1 parent 43f4669 commit 391edbc

File tree

2 files changed

+32
-9
lines changed

2 files changed

+32
-9
lines changed

src/ui.text-notify/UNotify.vue

Lines changed: 31 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ onMounted(() => {
4444
window.addEventListener("notifyEnd", onNotifyEnd);
4545
window.addEventListener("notifyClearAll", onClearAll);
4646
47-
setPosition();
47+
waitForPageElement();
4848
});
4949
5050
onBeforeUnmount(() => {
@@ -86,12 +86,37 @@ function getOffsetWidth(selector: string): number {
8686
return element ? (element as HTMLElement).offsetWidth : 0;
8787
}
8888
89+
function waitForPageElement() {
90+
const positionClasses = vuelessConfig.components?.UNotify?.positionClasses;
91+
const pageClass = positionClasses?.page || config.value?.positionClasses?.page;
92+
const maxWaitTime = 2000;
93+
const startTime = Date.now();
94+
95+
function checkAndSetPosition() {
96+
const element = document.querySelector(pageClass);
97+
98+
if (element) {
99+
setPosition();
100+
101+
return;
102+
}
103+
104+
if (Date.now() - startTime < maxWaitTime) {
105+
requestAnimationFrame(checkAndSetPosition);
106+
} else {
107+
setPosition();
108+
}
109+
}
110+
111+
checkAndSetPosition();
112+
}
113+
89114
function setPosition() {
90115
const positionClasses = vuelessConfig.components?.UNotify?.positionClasses;
91116
const pageClass = positionClasses?.page || config.value?.positionClasses?.page;
92117
const asideClass = positionClasses?.aside || config.value?.positionClasses?.aside;
93-
const pageWidth = getOffsetWidth(`${pageClass}`);
94-
const asideWidth = getOffsetWidth(`${asideClass}`);
118+
const pageWidth = getOffsetWidth(`.${pageClass}`);
119+
const asideWidth = getOffsetWidth(`.${asideClass}`);
95120
const notifyWidth = notificationsWrapperRef.value?.$el.offsetWidth || 0;
96121
97122
const styles: Record<string, string> = {
@@ -104,15 +129,13 @@ function setPosition() {
104129
styles[props.yPosition] = "0px";
105130
106131
if (props.xPosition === NotificationPosition.Center) {
107-
styles.left = `calc(50% - ${notifyWidth / 2}px)`;
132+
styles.left = pageWidth
133+
? `${asideWidth + pageWidth / 2 - notifyWidth / 2}px`
134+
: `calc(50% - ${notifyWidth / 2}px)`;
108135
} else {
109136
styles[props.xPosition] = "0px";
110137
}
111138
112-
if (pageWidth && props.xPosition !== NotificationPosition.Right) {
113-
styles.left = `${asideWidth + pageWidth / 2 - notifyWidth / 2}px`;
114-
}
115-
116139
notifyPositionStyles.value = styles;
117140
}
118141

src/ui.text-notify/config.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
export default /*tw*/ {
2-
wrapper: "absolute overflow-visible md:w-[22rem]",
2+
wrapper: "mt-3 absolute overflow-visible md:w-[22rem]",
33
transitionGroup: {
44
moveClass: "transition duration-500",
55
enterActiveClass: "transition duration-500",

0 commit comments

Comments
 (0)