@v-c/trigger 1.0.11 → 1.0.12-beta.2

package/dist/hooks/useWatch.js

@@ -10,6 +10,7 @@ function useWatch(open, target, popup, onAlign, onScroll) {
 			await nextTick();
 			const targetElement = target.value;
 			const popupElement = popup.value;
+			if (!targetElement || !popupElement) return;
 			const targetScrollList = collectScroller(targetElement);
 			const popupScrollList = collectScroller(popupElement);
 			const win = getWin(popupElement);

package/dist/index.js

@@ -13,7 +13,7 @@ import { useResizeObserver } from "@v-c/resize-observer";
 import { classNames } from "@v-c/util";
 import { getShadowRoot } from "@v-c/util/dist/Dom/shadow";
 import { filterEmpty } from "@v-c/util/dist/props-util";
-import { resolveToElement } from "@v-c/util/dist/vnode";
+import { cloneElement, resolveToElement } from "@v-c/util/dist/vnode";
 var defaults = {
 	prefixCls: "vc-trigger-popup",
 	action: "hover",
@@ -48,11 +48,14 @@ function generateTrigger(PortalComponent = Portal) {
 			parentContext?.value?.registerSubPopup(id, element ?? null);
 		};
 		const targetEle = shallowRef();
+		const persistTargetEle = shallowRef();
+		const mergedTargetEle = computed(() => targetEle.value ?? persistTargetEle.value);
 		const externalForwardRef = shallowRef(null);
 		const setTargetRef = (node) => {
 			const element = resolveToElement(node);
 			if (element && targetEle.value !== element) {
 				targetEle.value = element;
+				persistTargetEle.value = element;
 				externalForwardRef.value = element;
 			} else if (!element) {
 				targetEle.value = void 0;
@@ -67,7 +70,7 @@ function generateTrigger(PortalComponent = Portal) {
 			...hoverActionProps.value
 		}));
 		const inPopupOrChild = (ele) => {
-			const childDOM = targetEle.value;
+			const childDOM = mergedTargetEle.value;
 			return childDOM?.contains(ele) || childDOM && getShadowRoot(childDOM)?.host === ele || ele === childDOM || popupEle.value?.contains(ele) || popupEle.value && getShadowRoot(popupEle.value)?.host === ele || ele === popupEle.value || Object.values(subPopupElements.value).some((subPopupEle) => subPopupEle?.contains(ele) || ele === subPopupEle);
 		};
 		const innerArrow = computed(() => {
@@ -88,7 +91,7 @@ function generateTrigger(PortalComponent = Portal) {
 		const getUniqueOptions = (delay = 0) => {
 			return {
 				popup: props.popup,
-				target: targetEle.value,
+				target: mergedTargetEle.value,
 				delay,
 				prefixCls: props.prefixCls,
 				popupClassName: props.popupClassName,
@@ -110,8 +113,8 @@ function generateTrigger(PortalComponent = Portal) {
 				onEsc
 			};
 		};
-		watch([mergedOpen, targetEle], () => {
-			if (uniqueContext && props.unique && targetEle.value && !openUncontrolled.value && !parentContext?.value) if (mergedOpen.value) {
+		watch([mergedOpen, mergedTargetEle], () => {
+			if (uniqueContext && props.unique && mergedTargetEle.value && !openUncontrolled.value && !parentContext?.value) if (mergedOpen.value) {
 				const enterDelay = props.mouseEnterDelay ?? 0;
 				uniqueContext?.show(getUniqueOptions(enterDelay), isOpen);
 			} else uniqueContext?.hide(props.mouseLeaveDelay || 0);
@@ -156,7 +159,7 @@ function generateTrigger(PortalComponent = Portal) {
 		const setMousePosByEvent = (event) => {
 			mousePos.value = [event.clientX, event.clientY];
 		};
-		const [ready, offsetX, offsetY, offsetR, offsetB, arrowX, arrowY, scaleX, scaleY, alignInfo, onAlign] = useAlign(mergedOpen, popupEle, computed(() => props?.alignPoint && mousePos.value !== null ? mousePos.value : targetEle.value), computed(() => props?.popupPlacement), computed(() => props?.builtinPlacements), computed(() => props?.popupAlign), props?.onPopupAlign, isMobile);
+		const [ready, offsetX, offsetY, offsetR, offsetB, arrowX, arrowY, scaleX, scaleY, alignInfo, onAlign] = useAlign(mergedOpen, popupEle, computed(() => props?.alignPoint && mousePos.value !== null ? mousePos.value : mergedTargetEle.value), computed(() => props?.popupPlacement), computed(() => props?.builtinPlacements), computed(() => props?.popupAlign), props?.onPopupAlign, isMobile);
 		const [showActions, hideActions] = useAction(computed(() => props.action), computed(() => props.showAction), computed(() => props.hideAction));
 		const clickToShow = computed(() => showActions.value?.has("click"));
 		const clickToHide = computed(() => hideActions.value?.has("click") || hideActions.value?.has("contextmenu"));
@@ -167,7 +170,7 @@ function generateTrigger(PortalComponent = Portal) {
 		const onScroll = () => {
 			if (openRef.value && props?.alignPoint && clickToHide.value) triggerOpen(false);
 		};
-		useWatch(mergedOpen, targetEle, popupEle, triggerAlign, onScroll);
+		useWatch(mergedOpen, mergedTargetEle, popupEle, triggerAlign, onScroll);
 		watch([mousePos, () => props.popupPlacement], async () => {
 			await nextTick();
 			triggerAlign();
@@ -188,8 +191,8 @@ function generateTrigger(PortalComponent = Portal) {
 		const targetWidth = shallowRef(0);
 		const targetHeight = shallowRef(0);
 		const syncTargetSize = () => {
-			if (props.stretch && targetEle.value) {
-				const rect = targetEle.value.getBoundingClientRect();
+			if (props.stretch && mergedTargetEle.value) {
+				const rect = mergedTargetEle.value.getBoundingClientRect();
 				targetWidth.value = rect.width;
 				targetHeight.value = rect.height;
 			}
@@ -326,20 +329,20 @@ function generateTrigger(PortalComponent = Portal) {
 				x: arrowX.value,
 				y: arrowY.value
 			};
-			const triggerNode = createVNode(child, {
+			const triggerNode = cloneElement(child, {
 				...mergedChildrenProps,
 				...passedProps,
 				ref: setTargetRef
-			});
+			}, true, true);
 			const { unique, prefixCls, popup, popupClassName, popupStyle, zIndex, fresh, onPopupClick, mask, popupMotion, maskMotion, forceRender, getPopupContainer, stretch, mobile } = props;
-			return createVNode(Fragment, null, [triggerNode, rendedRef.value && targetEle.value && (!uniqueContext || !unique) && createVNode(TriggerContextProvider, context.value, { default: () => [createVNode(Popup_default, {
+			return createVNode(Fragment, null, [triggerNode, rendedRef.value && mergedTargetEle.value && (!uniqueContext || !unique) && createVNode(TriggerContextProvider, context.value, { default: () => [createVNode(Popup_default, {
 				"portal": PortalComponent,
 				"ref": setPopupRef,
 				"prefixCls": prefixCls,
 				"popup": popup,
 				"className": classNames(popupClassName, !isMobile.value && alignedClassName.value),
 				"style": popupStyle,
-				"target": targetEle.value,
+				"target": mergedTargetEle.value,
 				"onMouseEnter": onPopupMouseEnter,
 				"onMouseLeave": onPopupMouseLeave,
 				"onPointerEnter": onPopupMouseEnter,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/trigger",
   "type": "module",
-  "version": "1.0.11",
+  "version": "1.0.12-beta.2",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -31,7 +31,7 @@
   "dependencies": {
     "@v-c/portal": "^1.0.7",
     "@v-c/resize-observer": "^1.0.8",
-    "@v-c/util": "^1.0.13"
+    "@v-c/util": "^1.0.17"
   },
   "scripts": {
     "build": "vite build",