@v-c/trigger 1.0.0 → 1.0.2

package/dist/Popup/index.cjs

@@ -72,7 +72,11 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, exp
 			},
 			onAfterEnter: (element) => {
 				baseTransitionProps?.onAfterEnter?.(element);
-				onVisibleChanged?.(true);
+				requestAnimationFrame(() => {
+					requestAnimationFrame(() => {
+						onVisibleChanged?.(true);
+					});
+				});
 			},
 			onAfterLeave: (element) => {
 				baseTransitionProps.onAfterLeave?.(element);
@@ -137,7 +141,7 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, exp
 		default: void 0
 	},
 	style: {
-		type: null,
+		type: Object,
 		required: false,
 		default: void 0
 	},
@@ -148,7 +152,6 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, exp
 		default: void 0
 	},
 	target: {
-		type: null,
 		required: true,
 		default: void 0
 	},
@@ -248,7 +251,6 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, exp
 		default: void 0
 	},
 	portal: {
-		type: null,
 		required: true,
 		default: void 0
 	},
@@ -278,7 +280,6 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, exp
 		default: void 0
 	},
 	onAlign: {
-		type: null,
 		required: true,
 		default: void 0
 	},
@@ -303,7 +304,6 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, exp
 		default: void 0
 	},
 	onResize: {
-		type: null,
 		required: false,
 		default: void 0
 	},

package/dist/Popup/index.js

@@ -69,7 +69,11 @@ var Popup_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expo
 			},
 			onAfterEnter: (element) => {
 				baseTransitionProps?.onAfterEnter?.(element);
-				onVisibleChanged?.(true);
+				requestAnimationFrame(() => {
+					requestAnimationFrame(() => {
+						onVisibleChanged?.(true);
+					});
+				});
 			},
 			onAfterLeave: (element) => {
 				baseTransitionProps.onAfterLeave?.(element);
@@ -134,7 +138,7 @@ var Popup_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expo
 		default: void 0
 	},
 	style: {
-		type: null,
+		type: Object,
 		required: false,
 		default: void 0
 	},
@@ -145,7 +149,6 @@ var Popup_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expo
 		default: void 0
 	},
 	target: {
-		type: null,
 		required: true,
 		default: void 0
 	},
@@ -245,7 +248,6 @@ var Popup_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expo
 		default: void 0
 	},
 	portal: {
-		type: null,
 		required: true,
 		default: void 0
 	},
@@ -275,7 +277,6 @@ var Popup_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expo
 		default: void 0
 	},
 	onAlign: {
-		type: null,
 		required: true,
 		default: void 0
 	},
@@ -300,7 +301,6 @@ var Popup_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expo
 		default: void 0
 	},
 	onResize: {
-		type: null,
 		required: false,
 		default: void 0
 	},

package/dist/UniqueProvider/UniqueContainer.cjs

@@ -12,8 +12,7 @@ var UniqueContainer = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
 	(0, vue.watchEffect)(() => {
 		if (ready.value) cachedOffsetStyleRef.value = offsetStyle.value;
 	});
-	(0, vue.watch)(open, async (nextVisible) => {
-		await (0, vue.nextTick)();
+	(0, vue.watch)(open, (nextVisible) => {
 		if (nextVisible) motionVisible.value = true;
 	});
 	return () => {
@@ -36,6 +35,7 @@ var UniqueContainer = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
 			},
 			onAfterLeave: (element) => {
 				motionVisible.value = false;
+				cachedOffsetStyleRef.value = {};
 				baseTransitionProps.onAfterLeave?.(element);
 			}
 		};
@@ -124,7 +124,7 @@ var UniqueContainer = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
 		default: void 0
 	},
 	uniqueContainerStyle: {
-		type: null,
+		type: Object,
 		required: false,
 		default: void 0
 	}

package/dist/UniqueProvider/UniqueContainer.js

@@ -1,5 +1,5 @@
 import useOffsetStyle from "../hooks/useOffsetStyle.js";
-import { Transition, createVNode, defineComponent, nextTick, shallowRef, vShow, watch, watchEffect, withDirectives } from "vue";
+import { Transition, createVNode, defineComponent, shallowRef, vShow, watch, watchEffect, withDirectives } from "vue";
 import { toPropsRefs } from "@v-c/util/dist/props-util";
 import { getTransitionProps } from "@v-c/util/dist/utils/transition";
 var UniqueContainer_default = /* @__PURE__ */ defineComponent((props) => {
@@ -10,8 +10,7 @@ var UniqueContainer_default = /* @__PURE__ */ defineComponent((props) => {
 	watchEffect(() => {
 		if (ready.value) cachedOffsetStyleRef.value = offsetStyle.value;
 	});
-	watch(open, async (nextVisible) => {
-		await nextTick();
+	watch(open, (nextVisible) => {
 		if (nextVisible) motionVisible.value = true;
 	});
 	return () => {
@@ -34,6 +33,7 @@ var UniqueContainer_default = /* @__PURE__ */ defineComponent((props) => {
 			},
 			onAfterLeave: (element) => {
 				motionVisible.value = false;
+				cachedOffsetStyleRef.value = {};
 				baseTransitionProps.onAfterLeave?.(element);
 			}
 		};
@@ -122,7 +122,7 @@ var UniqueContainer_default = /* @__PURE__ */ defineComponent((props) => {
 		default: void 0
 	},
 	uniqueContainerStyle: {
-		type: null,
+		type: Object,
 		required: false,
 		default: void 0
 	}

package/dist/UniqueProvider/index.cjs

@@ -55,10 +55,19 @@ var UniqueProvider = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots })
 			trigger(false);
 		}, delay);
 	};
+	const [ready, offsetX, offsetY, offsetR, offsetB, arrowX, arrowY, , , alignInfo, onAlign] = require_useAlign.default(open, popupEle, (0, vue.computed)(() => mergedOptions.value?.target), (0, vue.computed)(() => mergedOptions.value?.popupPlacement), (0, vue.computed)(() => mergedOptions.value?.builtinPlacements || {}), (0, vue.computed)(() => mergedOptions.value?.popupAlign), void 0, (0, vue.ref)(false));
+	const inMotion = (0, vue.shallowRef)(false);
+	(0, vue.watch)(open, () => {
+		if (open.value) inMotion.value = true;
+	});
+	const triggerAlign = () => {
+		if (!inMotion.value) onAlign();
+	};
 	const onVisibleChanged = (visible) => {
 		onTargetVisibleChanged(visible);
+		inMotion.value = false;
+		onAlign();
 	};
-	const [ready, offsetX, offsetY, offsetR, offsetB, arrowX, arrowY, , , alignInfo, onAlign] = require_useAlign.default(open, popupEle, (0, vue.computed)(() => mergedOptions.value?.target), (0, vue.computed)(() => mergedOptions.value?.popupPlacement), (0, vue.computed)(() => mergedOptions.value?.builtinPlacements || {}), (0, vue.computed)(() => mergedOptions.value?.popupAlign), void 0, (0, vue.ref)(false));
 	const alignedClassName = (0, vue.computed)(() => {
 		if (!mergedOptions.value) return "";
 		return (0, __v_c_util.classNames)(require_util.getAlignPopupClassName(mergedOptions.value?.builtinPlacements || {}, mergedOptions.value.prefixCls || "", alignInfo.value, false), mergedOptions.value?.getPopupClassNameFromAlign?.(alignInfo.value));
@@ -69,7 +78,7 @@ var UniqueProvider = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots })
 	};
 	(0, vue.watch)(() => mergedOptions.value?.target, () => {
 		onAlign();
-	}, { immediate: true });
+	});
 	const onPrepare = () => {
 		onAlign();
 		return Promise.resolve();
@@ -103,7 +112,7 @@ var UniqueProvider = /* @__PURE__ */ (0, vue.defineComponent)((props, { slots })
 			"offsetY": offsetY.value,
 			"offsetR": offsetR.value,
 			"offsetB": offsetB.value,
-			"onAlign": onAlign,
+			"onAlign": triggerAlign,
 			"onPrepare": onPrepare,
 			"onResize": (size) => {
 				popupSize.value = {

package/dist/UniqueProvider/index.js

@@ -52,10 +52,19 @@ var UniqueProvider_default = /* @__PURE__ */ defineComponent((props, { slots })
 			trigger(false);
 		}, delay);
 	};
+	const [ready, offsetX, offsetY, offsetR, offsetB, arrowX, arrowY, , , alignInfo, onAlign] = useAlign(open, popupEle, computed(() => mergedOptions.value?.target), computed(() => mergedOptions.value?.popupPlacement), computed(() => mergedOptions.value?.builtinPlacements || {}), computed(() => mergedOptions.value?.popupAlign), void 0, ref(false));
+	const inMotion = shallowRef(false);
+	watch(open, () => {
+		if (open.value) inMotion.value = true;
+	});
+	const triggerAlign = () => {
+		if (!inMotion.value) onAlign();
+	};
 	const onVisibleChanged = (visible) => {
 		onTargetVisibleChanged(visible);
+		inMotion.value = false;
+		onAlign();
 	};
-	const [ready, offsetX, offsetY, offsetR, offsetB, arrowX, arrowY, , , alignInfo, onAlign] = useAlign(open, popupEle, computed(() => mergedOptions.value?.target), computed(() => mergedOptions.value?.popupPlacement), computed(() => mergedOptions.value?.builtinPlacements || {}), computed(() => mergedOptions.value?.popupAlign), void 0, ref(false));
 	const alignedClassName = computed(() => {
 		if (!mergedOptions.value) return "";
 		return classNames(getAlignPopupClassName(mergedOptions.value?.builtinPlacements || {}, mergedOptions.value.prefixCls || "", alignInfo.value, false), mergedOptions.value?.getPopupClassNameFromAlign?.(alignInfo.value));
@@ -66,7 +75,7 @@ var UniqueProvider_default = /* @__PURE__ */ defineComponent((props, { slots })
 	};
 	watch(() => mergedOptions.value?.target, () => {
 		onAlign();
-	}, { immediate: true });
+	});
 	const onPrepare = () => {
 		onAlign();
 		return Promise.resolve();
@@ -100,7 +109,7 @@ var UniqueProvider_default = /* @__PURE__ */ defineComponent((props, { slots })
 			"offsetY": offsetY.value,
 			"offsetR": offsetR.value,
 			"offsetB": offsetB.value,
-			"onAlign": onAlign,
+			"onAlign": triggerAlign,
 			"onPrepare": onPrepare,
 			"onResize": (size) => {
 				popupSize.value = {

package/dist/UniqueProvider/useTargetState.cjs

@@ -11,7 +11,6 @@ function useTargetState() {
 		if (nextOptions === false) {
 			pendingOptionsRef.value = null;
 			open.value = false;
-			isAnimating.value = false;
 		} else if (isAnimating.value && wasOpen) pendingOptionsRef.value = nextOptions;
 		else {
 			open.value = true;

package/dist/UniqueProvider/useTargetState.js

@@ -9,7 +9,6 @@ function useTargetState() {
 		if (nextOptions === false) {
 			pendingOptionsRef.value = null;
 			open.value = false;
-			isAnimating.value = false;
 		} else if (isAnimating.value && wasOpen) pendingOptionsRef.value = nextOptions;
 		else {
 			open.value = true;

package/dist/hooks/useAlign.cjs

@@ -5,7 +5,6 @@ let vue = require("vue");
 let __v_c_util_dist_Dom_findDOMNode = require("@v-c/util/dist/Dom/findDOMNode");
 let __v_c_util_dist_Dom_isVisible = require("@v-c/util/dist/Dom/isVisible");
 __v_c_util_dist_Dom_isVisible = require_rolldown_runtime.__toESM(__v_c_util_dist_Dom_isVisible);
-let __v_c_util_dist_raf = require("@v-c/util/dist/raf");
 function getUnitOffset(size, offset = 0) {
 	const offsetStr = `${offset}`;
 	const cells = offsetStr.match(/^(.*)\%$/);
@@ -47,46 +46,6 @@ function reversePoints(points, index) {
 		return point;
 	}).join("");
 }
-function parseOriginValue(value, size, axis) {
-	const fallback = size / 2;
-	if (!value) return fallback;
-	const val = value.trim();
-	if (!val) return fallback;
-	if (val.endsWith("%")) return size * (parseFloat(val) / 100);
-	if (val.endsWith("px")) return parseFloat(val);
-	if (val === "center") return fallback;
-	if (axis === "x") {
-		if (val === "left") return 0;
-		if (val === "right") return size;
-	} else if (axis === "y") {
-		if (val === "top") return 0;
-		if (val === "bottom") return size;
-	}
-	const num = parseFloat(val);
-	return Number.isNaN(num) ? fallback : num;
-}
-function getTransformOriginPoint(origin, width, height) {
-	const [originX = "50%", originY = "50%"] = origin?.split(/\s+/).filter(Boolean) ?? [];
-	return [parseOriginValue(originX, width, "x"), parseOriginValue(originY, height, "y")];
-}
-function normalizeRect(rect, scaleX, scaleY, originX, originY) {
-	const rawX = rect.x ?? rect.left;
-	const rawY = rect.y ?? rect.top;
-	const width = rect.width / scaleX;
-	const height = rect.height / scaleY;
-	const x = rawX - (1 - scaleX) * originX;
-	const y = rawY - (1 - scaleY) * originY;
-	return {
-		x,
-		y,
-		width,
-		height,
-		left: x,
-		top: y,
-		right: x + width,
-		bottom: y + height
-	};
-}
 function shouldSwitchPlacement(isOverflow, isVisibleFirst, newVisibleArea, originVisibleArea, newRecommendArea, originRecommendArea) {
 	if (isOverflow) return newVisibleArea > originVisibleArea || newVisibleArea === originVisibleArea && (!isVisibleFirst || newRecommendArea >= originRecommendArea);
 	return newVisibleArea > originVisibleArea || isVisibleFirst && newVisibleArea === originVisibleArea && newRecommendArea > originRecommendArea;
@@ -113,7 +72,9 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
 	const resetFlipCache = () => {
 		prevFlipRef.value = {};
 	};
-	const _onAlign = () => {
+	let cacheTargetRect = null;
+	const _onAlign = (cache = false) => {
+		if (cache && !cacheTargetRect) return;
 		if (popupEle.value && target.value && open.value && !mobile?.value) {
 			const popupElement = popupEle.value;
 			const doc = popupElement.ownerDocument;
@@ -148,7 +109,12 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
 				height: 0
 			};
 			else {
-				const rect = target.value.getBoundingClientRect();
+				const targetRectInfo = target.value.getBoundingClientRect();
+				const rect = cache ? Object.assign(targetRectInfo, cacheTargetRect ?? {}) : targetRectInfo;
+				if (!cache) cacheTargetRect = {
+					width: rect.width,
+					height: rect.height
+				};
 				rect.x = rect.x ?? rect.left;
 				rect.y = rect.y ?? rect.top;
 				targetRect = {
@@ -194,20 +160,16 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
 			popupElement.style.bottom = originBottom;
 			popupElement.style.overflow = originOverflow;
 			popupElement.parentElement?.removeChild(placeholderElement);
-			const widthValue = parseFloat(popupComputedStyle.width);
-			const heightValue = parseFloat(popupComputedStyle.height);
-			const baseWidth = !Number.isNaN(widthValue) && widthValue > 0 ? widthValue : popupElement.offsetWidth;
-			const baseHeight = !Number.isNaN(heightValue) && heightValue > 0 ? heightValue : popupElement.offsetHeight;
-			const safeBaseWidth = baseWidth || rawPopupRect.width || 1;
-			const safeBaseHeight = baseHeight || rawPopupRect.height || 1;
-			const scaleX$1 = require_util.toNum(Math.round(rawPopupRect.width / safeBaseWidth * 1e3) / 1e3);
-			const scaleY$1 = require_util.toNum(Math.round(rawPopupRect.height / safeBaseHeight * 1e3) / 1e3);
-			if (scaleX$1 === 0 || scaleY$1 === 0 || (0, __v_c_util_dist_Dom_findDOMNode.isDOM)(target) && !(0, __v_c_util_dist_Dom_isVisible.default)(target)) return;
-			const [originX, originY] = getTransformOriginPoint(popupComputedStyle.transformOrigin, safeBaseWidth, safeBaseHeight);
-			const popupRect = normalizeRect(rawPopupRect, scaleX$1, scaleY$1, originX, originY);
-			const popupMirrorRect = normalizeRect(rawPopupMirrorRect, scaleX$1, scaleY$1, originX, originY);
+			const popupRect = rawPopupRect;
+			popupRect.x = popupRect.x ?? popupRect.left;
+			popupRect.y = popupRect.y ?? popupRect.top;
+			const { height, width } = popupComputedStyle;
 			const popupHeight = popupRect.height;
 			const popupWidth = popupRect.width;
+			const popupMirrorRect = rawPopupMirrorRect;
+			const scaleX$1 = require_util.toNum(Math.round(popupWidth / parseFloat(width) * 1e3) / 1e3);
+			const scaleY$1 = require_util.toNum(Math.round(popupHeight / parseFloat(height) * 1e3) / 1e3);
+			if (scaleX$1 === 0 || scaleY$1 === 0 || (0, __v_c_util_dist_Dom_findDOMNode.isDOM)(target) && !(0, __v_c_util_dist_Dom_isVisible.default)(target)) return;
 			const { offset, targetOffset } = placementInfo;
 			let [popupOffsetX, popupOffsetY] = getNumberOffset(popupRect, offset);
 			const [targetOffsetX, targetOffsetY] = getNumberOffset(targetRect, targetOffset);
@@ -352,12 +314,12 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
 			}
 			const nextOffsetInfo = {
 				ready: true,
-				offsetX: nextOffsetX,
-				offsetY: nextOffsetY,
-				offsetR: offsetX4Right,
-				offsetB: offsetY4Bottom,
-				arrowX: nextArrowX,
-				arrowY: nextArrowY,
+				offsetX: nextOffsetX / scaleX$1,
+				offsetY: nextOffsetY / scaleY$1,
+				offsetR: offsetX4Right / scaleX$1,
+				offsetB: offsetY4Bottom / scaleY$1,
+				arrowX: nextArrowX / scaleX$1,
+				arrowY: nextArrowY / scaleY$1,
 				scaleX: scaleX$1,
 				scaleY: scaleY$1,
 				align: nextAlignInfo
@@ -365,12 +327,12 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
 			Object.assign(offsetInfo, nextOffsetInfo);
 		}
 	};
-	const onAlign = (0, __v_c_util_dist_raf.rafDebounce)(_onAlign);
-	const triggerAlign = () => {
+	const onAlign = _onAlign;
+	const triggerAlign = (cache) => {
 		alignCountRef.value += 1;
 		const id = alignCountRef.value;
 		Promise.resolve().then(() => {
-			if (alignCountRef.value === id) onAlign();
+			if (alignCountRef.value === id) onAlign(cache);
 		});
 	};
 	(0, vue.watch)(popupEle, async (ele) => {

package/dist/hooks/useAlign.d.ts

@@ -1,4 +1,4 @@
 import { Ref } from 'vue';
 import { TriggerProps } from '../index.tsx';
 import { AlignType } from '../interface';
-export default function useAlign(open: Ref<boolean>, popupEle: Ref<HTMLElement>, target: Ref<HTMLElement | [x: number, y: number]>, placement: Ref<string>, builtinPlacements: Ref<any>, popupAlign?: Ref<AlignType | undefined>, onPopupAlign?: TriggerProps['onPopupAlign'], mobile?: Ref<boolean | undefined>): readonly [Ref<boolean, boolean>, Ref<number, number>, Ref<number, number>, Ref<number, number>, Ref<number, number>, Ref<number, number>, Ref<number, number>, Ref<number, number>, Ref<number, number>, Ref<any, any>, () => void];
+export default function useAlign(open: Ref<boolean>, popupEle: Ref<HTMLElement>, target: Ref<HTMLElement | [x: number, y: number]>, placement: Ref<string>, builtinPlacements: Ref<any>, popupAlign?: Ref<AlignType | undefined>, onPopupAlign?: TriggerProps['onPopupAlign'], mobile?: Ref<boolean | undefined>): readonly [Ref<boolean, boolean>, Ref<number, number>, Ref<number, number>, Ref<number, number>, Ref<number, number>, Ref<number, number>, Ref<number, number>, Ref<number, number>, Ref<number, number>, Ref<any, any>, (cache?: boolean) => void];

package/dist/hooks/useAlign.js

@@ -2,7 +2,6 @@ import { collectScroller, getVisibleArea, getWin, toNum } from "../util.js";
 import { computed, nextTick, reactive, ref, shallowRef, toRefs, watch } from "vue";
 import { isDOM } from "@v-c/util/dist/Dom/findDOMNode";
 import isVisible from "@v-c/util/dist/Dom/isVisible";
-import { rafDebounce } from "@v-c/util/dist/raf";
 function getUnitOffset(size, offset = 0) {
 	const offsetStr = `${offset}`;
 	const cells = offsetStr.match(/^(.*)\%$/);
@@ -44,46 +43,6 @@ function reversePoints(points, index) {
 		return point;
 	}).join("");
 }
-function parseOriginValue(value, size, axis) {
-	const fallback = size / 2;
-	if (!value) return fallback;
-	const val = value.trim();
-	if (!val) return fallback;
-	if (val.endsWith("%")) return size * (parseFloat(val) / 100);
-	if (val.endsWith("px")) return parseFloat(val);
-	if (val === "center") return fallback;
-	if (axis === "x") {
-		if (val === "left") return 0;
-		if (val === "right") return size;
-	} else if (axis === "y") {
-		if (val === "top") return 0;
-		if (val === "bottom") return size;
-	}
-	const num = parseFloat(val);
-	return Number.isNaN(num) ? fallback : num;
-}
-function getTransformOriginPoint(origin, width, height) {
-	const [originX = "50%", originY = "50%"] = origin?.split(/\s+/).filter(Boolean) ?? [];
-	return [parseOriginValue(originX, width, "x"), parseOriginValue(originY, height, "y")];
-}
-function normalizeRect(rect, scaleX, scaleY, originX, originY) {
-	const rawX = rect.x ?? rect.left;
-	const rawY = rect.y ?? rect.top;
-	const width = rect.width / scaleX;
-	const height = rect.height / scaleY;
-	const x = rawX - (1 - scaleX) * originX;
-	const y = rawY - (1 - scaleY) * originY;
-	return {
-		x,
-		y,
-		width,
-		height,
-		left: x,
-		top: y,
-		right: x + width,
-		bottom: y + height
-	};
-}
 function shouldSwitchPlacement(isOverflow, isVisibleFirst, newVisibleArea, originVisibleArea, newRecommendArea, originRecommendArea) {
 	if (isOverflow) return newVisibleArea > originVisibleArea || newVisibleArea === originVisibleArea && (!isVisibleFirst || newRecommendArea >= originRecommendArea);
 	return newVisibleArea > originVisibleArea || isVisibleFirst && newVisibleArea === originVisibleArea && newRecommendArea > originRecommendArea;
@@ -110,7 +69,9 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
 	const resetFlipCache = () => {
 		prevFlipRef.value = {};
 	};
-	const _onAlign = () => {
+	let cacheTargetRect = null;
+	const _onAlign = (cache = false) => {
+		if (cache && !cacheTargetRect) return;
 		if (popupEle.value && target.value && open.value && !mobile?.value) {
 			const popupElement = popupEle.value;
 			const doc = popupElement.ownerDocument;
@@ -145,7 +106,12 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
 				height: 0
 			};
 			else {
-				const rect = target.value.getBoundingClientRect();
+				const targetRectInfo = target.value.getBoundingClientRect();
+				const rect = cache ? Object.assign(targetRectInfo, cacheTargetRect ?? {}) : targetRectInfo;
+				if (!cache) cacheTargetRect = {
+					width: rect.width,
+					height: rect.height
+				};
 				rect.x = rect.x ?? rect.left;
 				rect.y = rect.y ?? rect.top;
 				targetRect = {
@@ -191,20 +157,16 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
 			popupElement.style.bottom = originBottom;
 			popupElement.style.overflow = originOverflow;
 			popupElement.parentElement?.removeChild(placeholderElement);
-			const widthValue = parseFloat(popupComputedStyle.width);
-			const heightValue = parseFloat(popupComputedStyle.height);
-			const baseWidth = !Number.isNaN(widthValue) && widthValue > 0 ? widthValue : popupElement.offsetWidth;
-			const baseHeight = !Number.isNaN(heightValue) && heightValue > 0 ? heightValue : popupElement.offsetHeight;
-			const safeBaseWidth = baseWidth || rawPopupRect.width || 1;
-			const safeBaseHeight = baseHeight || rawPopupRect.height || 1;
-			const scaleX$1 = toNum(Math.round(rawPopupRect.width / safeBaseWidth * 1e3) / 1e3);
-			const scaleY$1 = toNum(Math.round(rawPopupRect.height / safeBaseHeight * 1e3) / 1e3);
-			if (scaleX$1 === 0 || scaleY$1 === 0 || isDOM(target) && !isVisible(target)) return;
-			const [originX, originY] = getTransformOriginPoint(popupComputedStyle.transformOrigin, safeBaseWidth, safeBaseHeight);
-			const popupRect = normalizeRect(rawPopupRect, scaleX$1, scaleY$1, originX, originY);
-			const popupMirrorRect = normalizeRect(rawPopupMirrorRect, scaleX$1, scaleY$1, originX, originY);
+			const popupRect = rawPopupRect;
+			popupRect.x = popupRect.x ?? popupRect.left;
+			popupRect.y = popupRect.y ?? popupRect.top;
+			const { height, width } = popupComputedStyle;
 			const popupHeight = popupRect.height;
 			const popupWidth = popupRect.width;
+			const popupMirrorRect = rawPopupMirrorRect;
+			const scaleX$1 = toNum(Math.round(popupWidth / parseFloat(width) * 1e3) / 1e3);
+			const scaleY$1 = toNum(Math.round(popupHeight / parseFloat(height) * 1e3) / 1e3);
+			if (scaleX$1 === 0 || scaleY$1 === 0 || isDOM(target) && !isVisible(target)) return;
 			const { offset, targetOffset } = placementInfo;
 			let [popupOffsetX, popupOffsetY] = getNumberOffset(popupRect, offset);
 			const [targetOffsetX, targetOffsetY] = getNumberOffset(targetRect, targetOffset);
@@ -349,12 +311,12 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
 			}
 			const nextOffsetInfo = {
 				ready: true,
-				offsetX: nextOffsetX,
-				offsetY: nextOffsetY,
-				offsetR: offsetX4Right,
-				offsetB: offsetY4Bottom,
-				arrowX: nextArrowX,
-				arrowY: nextArrowY,
+				offsetX: nextOffsetX / scaleX$1,
+				offsetY: nextOffsetY / scaleY$1,
+				offsetR: offsetX4Right / scaleX$1,
+				offsetB: offsetY4Bottom / scaleY$1,
+				arrowX: nextArrowX / scaleX$1,
+				arrowY: nextArrowY / scaleY$1,
 				scaleX: scaleX$1,
 				scaleY: scaleY$1,
 				align: nextAlignInfo
@@ -362,12 +324,12 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
 			Object.assign(offsetInfo, nextOffsetInfo);
 		}
 	};
-	const onAlign = rafDebounce(_onAlign);
-	const triggerAlign = () => {
+	const onAlign = _onAlign;
+	const triggerAlign = (cache) => {
 		alignCountRef.value += 1;
 		const id = alignCountRef.value;
 		Promise.resolve().then(() => {
-			if (alignCountRef.value === id) onAlign();
+			if (alignCountRef.value === id) onAlign(cache);
 		});
 	};
 	watch(popupEle, async (ele) => {

package/dist/index.cjs

@@ -158,8 +158,7 @@ function generateTrigger(PortalComponent = __v_c_portal.default) {
 			}, delay);
 		};
 		const inMotion = (0, vue.shallowRef)(false);
-		(0, vue.watch)(mergedOpen, async () => {
-			await (0, vue.nextTick)();
+		(0, vue.watch)(mergedOpen, () => {
 			if (mergedOpen.value) inMotion.value = true;
 		});
 		const motionPrepareResolve = (0, vue.shallowRef)();
@@ -173,6 +172,7 @@ function generateTrigger(PortalComponent = __v_c_portal.default) {
 		const clickToHide = (0, vue.computed)(() => hideActions.value?.has("click") || hideActions.value?.has("contextmenu"));
 		const triggerAlign = () => {
 			if (!inMotion.value) onAlign();
+			else onAlign(true);
 		};
 		const onScroll = () => {
 			if (openRef.value && props?.alignPoint && clickToHide.value) triggerOpen(false);
@@ -215,9 +215,10 @@ function generateTrigger(PortalComponent = __v_c_portal.default) {
 			props?.afterPopupVisibleChange?.(visible);
 		};
 		const onPrepare = () => {
+			syncTargetSize();
 			return new Promise((resolve) => {
-				syncTargetSize();
 				motionPrepareResolve.value = resolve;
+				inMotion.value = true;
 			});
 		};
 		(0, vue.watch)([motionPrepareResolve], () => {
@@ -226,7 +227,7 @@ function generateTrigger(PortalComponent = __v_c_portal.default) {
 				motionPrepareResolve.value();
 				motionPrepareResolve.value = void 0;
 			}
-		});
+		}, { flush: "post" });
 		function wrapperAction(target, eventName, nextOpen, delay, callback, ignoreCheck) {
 			target[eventName] = (event, ...args) => {
 				if (!ignoreCheck || !ignoreCheck()) {
@@ -506,15 +507,15 @@ function generateTrigger(PortalComponent = __v_c_portal.default) {
 		},
 		popup: {
 			type: [
+				Object,
+				Function,
 				String,
 				Number,
 				null,
 				Boolean,
-				Array,
-				Function
+				Array
 			],
 			required: true,
-			skipCheck: true,
 			default: void 0
 		},
 		popupPlacement: {
@@ -543,12 +544,12 @@ function generateTrigger(PortalComponent = __v_c_portal.default) {
 			default: void 0
 		},
 		uniqueContainerStyle: {
-			type: null,
+			type: Object,
 			required: false,
 			default: void 0
 		},
 		popupStyle: {
-			type: null,
+			type: Object,
 			required: false,
 			default: void 0
 		},

package/dist/index.js

@@ -154,8 +154,7 @@ function generateTrigger(PortalComponent = Portal) {
 			}, delay);
 		};
 		const inMotion = shallowRef(false);
-		watch(mergedOpen, async () => {
-			await nextTick();
+		watch(mergedOpen, () => {
 			if (mergedOpen.value) inMotion.value = true;
 		});
 		const motionPrepareResolve = shallowRef();
@@ -169,6 +168,7 @@ function generateTrigger(PortalComponent = Portal) {
 		const clickToHide = computed(() => hideActions.value?.has("click") || hideActions.value?.has("contextmenu"));
 		const triggerAlign = () => {
 			if (!inMotion.value) onAlign();
+			else onAlign(true);
 		};
 		const onScroll = () => {
 			if (openRef.value && props?.alignPoint && clickToHide.value) triggerOpen(false);
@@ -211,9 +211,10 @@ function generateTrigger(PortalComponent = Portal) {
 			props?.afterPopupVisibleChange?.(visible);
 		};
 		const onPrepare = () => {
+			syncTargetSize();
 			return new Promise((resolve) => {
-				syncTargetSize();
 				motionPrepareResolve.value = resolve;
+				inMotion.value = true;
 			});
 		};
 		watch([motionPrepareResolve], () => {
@@ -222,7 +223,7 @@ function generateTrigger(PortalComponent = Portal) {
 				motionPrepareResolve.value();
 				motionPrepareResolve.value = void 0;
 			}
-		});
+		}, { flush: "post" });
 		function wrapperAction(target, eventName, nextOpen, delay, callback, ignoreCheck) {
 			target[eventName] = (event, ...args) => {
 				if (!ignoreCheck || !ignoreCheck()) {
@@ -502,15 +503,15 @@ function generateTrigger(PortalComponent = Portal) {
 		},
 		popup: {
 			type: [
+				Object,
+				Function,
 				String,
 				Number,
 				null,
 				Boolean,
-				Array,
-				Function
+				Array
 			],
 			required: true,
-			skipCheck: true,
 			default: void 0
 		},
 		popupPlacement: {
@@ -539,12 +540,12 @@ function generateTrigger(PortalComponent = Portal) {
 			default: void 0
 		},
 		uniqueContainerStyle: {
-			type: null,
+			type: Object,
 			required: false,
 			default: void 0
 		},
 		popupStyle: {
-			type: null,
+			type: Object,
 			required: false,
 			default: void 0
 		},

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/trigger",
   "type": "module",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -29,9 +29,9 @@
     "vue": "^3.0.0"
   },
   "dependencies": {
-    "@v-c/portal": "^1.0.0",
-    "@v-c/resize-observer": "^1.0.0",
-    "@v-c/util": "^1.0.0"
+    "@v-c/portal": "^1.0.1",
+    "@v-c/resize-observer": "^1.0.3",
+    "@v-c/util": "^1.0.3"
   },
   "scripts": {
     "build": "vite build",