@v-c/trigger 1.0.3 → 1.0.6

package/dist/Popup/index.cjs

@@ -6,14 +6,12 @@ const require_rolldown_runtime = require("../_virtual/rolldown_runtime.cjs");
 const require_useOffsetStyle = require("../hooks/useOffsetStyle.cjs");
 const require_Arrow = require("./Arrow.cjs");
 const require_Mask = require("./Mask.cjs");
-const require_PopupContent = require("./PopupContent.cjs");
 let vue = require("vue");
 let _v_c_resize_observer = require("@v-c/resize-observer");
 let _v_c_util = require("@v-c/util");
 let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
 let _v_c_util_dist_utils_transition = require("@v-c/util/dist/utils/transition");
 var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, expose }) => {
-	const popupContent = (0, vue.computed)(() => typeof props.popup === "function" ? props.popup() : props.popup);
 	const { offsetX, offsetR, offsetY, offsetB, open, ready, align } = (0, _v_c_util_dist_props_util.toPropsRefs)(props, "offsetX", "offsetB", "offsetY", "offsetR", "ready", "open", "align");
 	const isNodeVisible = (0, vue.computed)(() => props.open || props.keepDom);
 	const isMobile = (0, vue.computed)(() => !!props.mobile);
@@ -51,7 +49,7 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, exp
 	(0, _v_c_resize_observer.useResizeObserver)(open, popupElementRef, onInternalResize);
 	return () => {
 		if (!show.value) return null;
-		const { onEsc, stretch, targetHeight, targetWidth, portal: Portal, forceRender, getPopupContainer, target, autoDestroy, zIndex, prefixCls, arrow, arrowPos, align: align$1, onMouseEnter, onMouseLeave, onPointerEnter, onPointerDownCapture, onClick, fresh, onPrepare, onVisibleChanged } = props;
+		const { onEsc, stretch, targetHeight, targetWidth, portal: Portal, forceRender, getPopupContainer, target, autoDestroy, zIndex, prefixCls, arrow, arrowPos, align: align$1, onMouseEnter, onMouseLeave, onPointerEnter, onPointerDownCapture, onClick, onPrepare, onVisibleChanged } = props;
 		const miscStyle = {};
 		if (stretch) {
 			if (stretch.includes("height") && targetHeight) miscStyle.height = `${targetHeight}px`;
@@ -76,9 +74,7 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, exp
 			onAfterEnter: (element) => {
 				baseTransitionProps?.onAfterEnter?.(element);
 				requestAnimationFrame(() => {
-					requestAnimationFrame(() => {
-						onVisibleChanged?.(true);
-					});
+					onVisibleChanged?.(true);
 				});
 			},
 			onAfterLeave: (element) => {
@@ -126,7 +122,7 @@ var Popup = /* @__PURE__ */ (0, vue.defineComponent)((props, { attrs, slots, exp
 				"arrow": arrow === true ? {} : arrow,
 				"arrowPos": arrowPos,
 				"align": align$1
-			}, null), (0, vue.createVNode)(require_PopupContent.default, { "cache": !open.value && !fresh }, { default: () => [popupContent.value] })]), [[vue.vShow, open.value]])] }),
+			}, null), typeof props?.popup === "function" ? props.popup() : props.popup]), [[vue.vShow, open.value]])] }),
 			slots?.default?.()
 		] });
 	};

package/dist/Popup/index.js

@@ -1,14 +1,12 @@
 import useOffsetStyle from "../hooks/useOffsetStyle.js";
 import { Arrow } from "./Arrow.js";
 import Mask_default from "./Mask.js";
-import PopupContent_default from "./PopupContent.js";
 import { Transition, computed, createVNode, defineComponent, mergeDefaults, mergeProps, nextTick, shallowRef, vShow, watchEffect, withDirectives } from "vue";
 import { useResizeObserver } from "@v-c/resize-observer";
 import { classNames } from "@v-c/util";
 import { toPropsRefs } from "@v-c/util/dist/props-util";
 import { getTransitionProps } from "@v-c/util/dist/utils/transition";
 var Popup_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expose }) => {
-	const popupContent = computed(() => typeof props.popup === "function" ? props.popup() : props.popup);
 	const { offsetX, offsetR, offsetY, offsetB, open, ready, align } = toPropsRefs(props, "offsetX", "offsetB", "offsetY", "offsetR", "ready", "open", "align");
 	const isNodeVisible = computed(() => props.open || props.keepDom);
 	const isMobile = computed(() => !!props.mobile);
@@ -46,7 +44,7 @@ var Popup_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expo
 	useResizeObserver(open, popupElementRef, onInternalResize);
 	return () => {
 		if (!show.value) return null;
-		const { onEsc, stretch, targetHeight, targetWidth, portal: Portal, forceRender, getPopupContainer, target, autoDestroy, zIndex, prefixCls, arrow, arrowPos, align: align$1, onMouseEnter, onMouseLeave, onPointerEnter, onPointerDownCapture, onClick, fresh, onPrepare, onVisibleChanged } = props;
+		const { onEsc, stretch, targetHeight, targetWidth, portal: Portal, forceRender, getPopupContainer, target, autoDestroy, zIndex, prefixCls, arrow, arrowPos, align: align$1, onMouseEnter, onMouseLeave, onPointerEnter, onPointerDownCapture, onClick, onPrepare, onVisibleChanged } = props;
 		const miscStyle = {};
 		if (stretch) {
 			if (stretch.includes("height") && targetHeight) miscStyle.height = `${targetHeight}px`;
@@ -71,9 +69,7 @@ var Popup_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expo
 			onAfterEnter: (element) => {
 				baseTransitionProps?.onAfterEnter?.(element);
 				requestAnimationFrame(() => {
-					requestAnimationFrame(() => {
-						onVisibleChanged?.(true);
-					});
+					onVisibleChanged?.(true);
 				});
 			},
 			onAfterLeave: (element) => {
@@ -121,7 +117,7 @@ var Popup_default = /* @__PURE__ */ defineComponent((props, { attrs, slots, expo
 				"arrow": arrow === true ? {} : arrow,
 				"arrowPos": arrowPos,
 				"align": align$1
-			}, null), createVNode(PopupContent_default, { "cache": !open.value && !fresh }, { default: () => [popupContent.value] })]), [[vShow, open.value]])] }),
+			}, null), typeof props?.popup === "function" ? props.popup() : props.popup]), [[vShow, open.value]])] }),
 			slots?.default?.()
 		] });
 	};

package/dist/UniqueProvider/UniqueContainer.cjs

@@ -15,8 +15,9 @@ var UniqueContainer = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
 	(0, vue.watchEffect)(() => {
 		if (ready.value) cachedOffsetStyleRef.value = offsetStyle.value;
 	});
-	(0, vue.watch)(open, (nextVisible) => {
-		if (nextVisible) motionVisible.value = true;
+	const mergedOffsetStyle = (0, vue.computed)(() => {
+		if (cachedOffsetStyleRef.value && Object.keys(cachedOffsetStyleRef.value).length > 0) return cachedOffsetStyleRef.value;
+		return offsetStyle.value;
 	});
 	return () => {
 		const { popupSize, motion, prefixCls, uniqueContainerClassName, arrowPos, uniqueContainerStyle } = props;
@@ -26,35 +27,32 @@ var UniqueContainer = /* @__PURE__ */ (0, vue.defineComponent)((props) => {
 			sizeStyle.height = `${popupSize.height}px`;
 		}
 		const baseTransitionProps = (0, _v_c_util_dist_utils_transition.getTransitionProps)(motion?.name, motion);
-		const mergedTransitionProps = {
+		const containerCls = `${prefixCls}-unique-container`;
+		return (0, vue.createVNode)(vue.Transition, {
 			...baseTransitionProps,
-			onBeforeEnter: (element) => {
-				motionVisible.value = true;
-				baseTransitionProps.onBeforeEnter?.(element);
-			},
 			onAfterEnter: (element) => {
 				motionVisible.value = true;
 				baseTransitionProps.onAfterEnter?.(element);
 			},
 			onAfterLeave: (element) => {
 				motionVisible.value = false;
-				cachedOffsetStyleRef.value = {};
 				baseTransitionProps.onAfterLeave?.(element);
 			}
-		};
-		const containerCls = `${prefixCls}-unique-container`;
-		return (0, vue.createVNode)(vue.Transition, mergedTransitionProps, { default: () => [(0, vue.withDirectives)((0, vue.createVNode)("div", {
+		}, { default: () => [(0, vue.withDirectives)((0, vue.createVNode)("div", {
 			"class": [
 				containerCls,
 				uniqueContainerClassName,
-				{ [`${containerCls}-visible`]: motionVisible.value }
+				{
+					[`${containerCls}-visible`]: motionVisible.value,
+					[`${containerCls}-hidden`]: !open.value
+				}
 			],
 			"style": [
 				{
 					"--arrow-x": `${arrowPos?.x || 0}px`,
 					"--arrow-y": `${arrowPos?.y || 0}px`
 				},
-				cachedOffsetStyleRef.value,
+				mergedOffsetStyle.value,
 				sizeStyle,
 				uniqueContainerStyle
 			]

package/dist/UniqueProvider/UniqueContainer.js

@@ -1,5 +1,5 @@
 import useOffsetStyle from "../hooks/useOffsetStyle.js";
-import { Transition, createVNode, defineComponent, shallowRef, vShow, watch, watchEffect, withDirectives } from "vue";
+import { Transition, computed, createVNode, defineComponent, shallowRef, vShow, 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,9 @@ var UniqueContainer_default = /* @__PURE__ */ defineComponent((props) => {
 	watchEffect(() => {
 		if (ready.value) cachedOffsetStyleRef.value = offsetStyle.value;
 	});
-	watch(open, (nextVisible) => {
-		if (nextVisible) motionVisible.value = true;
+	const mergedOffsetStyle = computed(() => {
+		if (cachedOffsetStyleRef.value && Object.keys(cachedOffsetStyleRef.value).length > 0) return cachedOffsetStyleRef.value;
+		return offsetStyle.value;
 	});
 	return () => {
 		const { popupSize, motion, prefixCls, uniqueContainerClassName, arrowPos, uniqueContainerStyle } = props;
@@ -21,35 +22,32 @@ var UniqueContainer_default = /* @__PURE__ */ defineComponent((props) => {
 			sizeStyle.height = `${popupSize.height}px`;
 		}
 		const baseTransitionProps = getTransitionProps(motion?.name, motion);
-		const mergedTransitionProps = {
+		const containerCls = `${prefixCls}-unique-container`;
+		return createVNode(Transition, {
 			...baseTransitionProps,
-			onBeforeEnter: (element) => {
-				motionVisible.value = true;
-				baseTransitionProps.onBeforeEnter?.(element);
-			},
 			onAfterEnter: (element) => {
 				motionVisible.value = true;
 				baseTransitionProps.onAfterEnter?.(element);
 			},
 			onAfterLeave: (element) => {
 				motionVisible.value = false;
-				cachedOffsetStyleRef.value = {};
 				baseTransitionProps.onAfterLeave?.(element);
 			}
-		};
-		const containerCls = `${prefixCls}-unique-container`;
-		return createVNode(Transition, mergedTransitionProps, { default: () => [withDirectives(createVNode("div", {
+		}, { default: () => [withDirectives(createVNode("div", {
 			"class": [
 				containerCls,
 				uniqueContainerClassName,
-				{ [`${containerCls}-visible`]: motionVisible.value }
+				{
+					[`${containerCls}-visible`]: motionVisible.value,
+					[`${containerCls}-hidden`]: !open.value
+				}
 			],
 			"style": [
 				{
 					"--arrow-x": `${arrowPos?.x || 0}px`,
 					"--arrow-y": `${arrowPos?.y || 0}px`
 				},
-				cachedOffsetStyleRef.value,
+				mergedOffsetStyle.value,
 				sizeStyle,
 				uniqueContainerStyle
 			]

package/dist/hooks/useAlign.cjs

@@ -172,8 +172,8 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
 			const popupHeight = popupRect.height;
 			const popupWidth = popupRect.width;
 			const popupMirrorRect = rawPopupMirrorRect;
-			const scaleX$1 = require_util.toNum(Math.floor(popupWidth / parseFloat(width) * 1e3) / 1e3);
-			const scaleY$1 = require_util.toNum(Math.floor(popupHeight / parseFloat(height) * 1e3) / 1e3);
+			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);

package/dist/hooks/useAlign.js

@@ -166,8 +166,8 @@ function useAlign(open, popupEle, target, placement, builtinPlacements, popupAli
 			const popupHeight = popupRect.height;
 			const popupWidth = popupRect.width;
 			const popupMirrorRect = rawPopupMirrorRect;
-			const scaleX$1 = toNum(Math.floor(popupWidth / parseFloat(width) * 1e3) / 1e3);
-			const scaleY$1 = toNum(Math.floor(popupHeight / parseFloat(height) * 1e3) / 1e3);
+			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);

package/dist/hooks/useOffsetStyle.cjs

@@ -13,7 +13,6 @@ function useOffsetStyle(isMobile, ready, open, align, offsetR, offsetB, offsetX,
 			right: AUTO,
 			bottom: AUTO
 		};
-		if (!ready.value && open.value) return {};
 		if (!isMobile.value && (ready.value || !open.value)) {
 			const { points } = align.value ?? {};
 			const dynamicInset = align.value?.dynamicInset || align.value?._experimental?.dynamicInset;

package/dist/hooks/useOffsetStyle.js

@@ -8,7 +8,6 @@ function useOffsetStyle(isMobile, ready, open, align, offsetR, offsetB, offsetX,
 			right: AUTO,
 			bottom: AUTO
 		};
-		if (!ready.value && open.value) return {};
 		if (!isMobile.value && (ready.value || !open.value)) {
 			const { points } = align.value ?? {};
 			const dynamicInset = align.value?.dynamicInset || align.value?._experimental?.dynamicInset;

package/dist/hooks/useWatch.cjs

@@ -11,8 +11,8 @@ function useWatch(open, target, popup, onAlign, onScroll) {
 		target,
 		popup
 	], async (_n, _o, onCleanup) => {
-		await (0, vue.nextTick)();
 		if (open.value && target.value && popup.value) {
+			await (0, vue.nextTick)();
 			const targetElement = target.value;
 			const popupElement = popup.value;
 			const targetScrollList = require_util.collectScroller(targetElement);
@@ -39,6 +39,6 @@ function useWatch(open, target, popup, onAlign, onScroll) {
 				});
 			});
 		}
-	});
+	}, { flush: "post" });
 }
 exports.default = useWatch;

package/dist/hooks/useWatch.js

@@ -6,8 +6,8 @@ function useWatch(open, target, popup, onAlign, onScroll) {
 		target,
 		popup
 	], async (_n, _o, onCleanup) => {
-		await nextTick();
 		if (open.value && target.value && popup.value) {
+			await nextTick();
 			const targetElement = target.value;
 			const popupElement = popup.value;
 			const targetScrollList = collectScroller(targetElement);
@@ -34,6 +34,6 @@ function useWatch(open, target, popup, onAlign, onScroll) {
 				});
 			});
 		}
-	});
+	}, { flush: "post" });
 }
 export { useWatch as default };

package/dist/index.cjs

@@ -304,7 +304,7 @@ function generateTrigger(PortalComponent = _v_c_portal.default) {
 		});
 		(0, _v_c_resize_observer.useResizeObserver)(mergedOpen, targetEle, onTargetResize);
 		return () => {
-			const child = (0, _v_c_util_dist_props_util.filterEmpty)(slots?.default?.() ?? [])?.[0];
+			const child = (0, _v_c_util_dist_props_util.filterEmpty)(slots?.default?.({ open: mergedOpen.value }) ?? [])?.[0];
 			const mergedChildrenProps = {
 				...originChildProps,
 				...cloneProps.value

package/dist/index.js

@@ -298,7 +298,7 @@ function generateTrigger(PortalComponent = Portal) {
 		});
 		useResizeObserver(mergedOpen, targetEle, onTargetResize);
 		return () => {
-			const child = filterEmpty(slots?.default?.() ?? [])?.[0];
+			const child = filterEmpty(slots?.default?.({ open: mergedOpen.value }) ?? [])?.[0];
 			const mergedChildrenProps = {
 				...originChildProps,
 				...cloneProps.value

package/package.json

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