@v-c/trigger 1.0.1 → 1.0.3

package/dist/index.cjs

@@ -1,4 +1,7 @@
-Object.defineProperty(exports, "__esModule", { value: true });
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
 const require_rolldown_runtime = require("./_virtual/rolldown_runtime.cjs");
 const require_context = require("./context.cjs");
 const require_useAction = require("./hooks/useAction.cjs");
@@ -10,17 +13,13 @@ const require_useWinClick = require("./hooks/useWinClick.cjs");
 const require_index = require("./Popup/index.cjs");
 const require_index$1 = require("./UniqueProvider/index.cjs");
 let vue = require("vue");
-let __v_c_portal = require("@v-c/portal");
-__v_c_portal = require_rolldown_runtime.__toESM(__v_c_portal);
-let __v_c_resize_observer = require("@v-c/resize-observer");
-__v_c_resize_observer = require_rolldown_runtime.__toESM(__v_c_resize_observer);
-let __v_c_util = require("@v-c/util");
-let __v_c_util_dist_Dom_shadow = require("@v-c/util/dist/Dom/shadow");
-let __v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
-let __v_c_util_dist_vnode = require("@v-c/util/dist/vnode");
-function _isSlot(s) {
-	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !(0, vue.isVNode)(s);
-}
+let _v_c_portal = require("@v-c/portal");
+_v_c_portal = require_rolldown_runtime.__toESM(_v_c_portal);
+let _v_c_resize_observer = require("@v-c/resize-observer");
+let _v_c_util = require("@v-c/util");
+let _v_c_util_dist_Dom_shadow = require("@v-c/util/dist/Dom/shadow");
+let _v_c_util_dist_props_util = require("@v-c/util/dist/props-util");
+let _v_c_util_dist_vnode = require("@v-c/util/dist/vnode");
 var defaults = {
 	prefixCls: "vc-trigger-popup",
 	action: "hover",
@@ -30,7 +29,7 @@ var defaults = {
 	popupVisible: void 0,
 	defaultPopupVisible: void 0
 };
-function generateTrigger(PortalComponent = __v_c_portal.default) {
+function generateTrigger(PortalComponent = _v_c_portal.default) {
 	return /* @__PURE__ */ (0, vue.defineComponent)((props, { expose, slots, attrs }) => {
 		const mergedAutoDestroy = (0, vue.computed)(() => props.autoDestroy ?? false);
 		const openUncontrolled = (0, vue.computed)(() => props.popupVisible === void 0);
@@ -49,20 +48,20 @@ function generateTrigger(PortalComponent = __v_c_portal.default) {
 		const popupEle = (0, vue.shallowRef)(null);
 		const externalPopupRef = (0, vue.shallowRef)(null);
 		const setPopupRef = (node) => {
-			const element = (0, __v_c_util_dist_vnode.resolveToElement)(node);
+			const element = (0, _v_c_util_dist_vnode.resolveToElement)(node);
 			externalPopupRef.value = element;
 			if (popupEle.value !== element) popupEle.value = element;
 			parentContext?.value?.registerSubPopup(id, element ?? null);
 		};
-		const targetEle = (0, vue.shallowRef)(null);
+		const targetEle = (0, vue.shallowRef)();
 		const externalForwardRef = (0, vue.shallowRef)(null);
 		const setTargetRef = (node) => {
-			const element = (0, __v_c_util_dist_vnode.resolveToElement)(node);
+			const element = (0, _v_c_util_dist_vnode.resolveToElement)(node);
 			if (element && targetEle.value !== element) {
 				targetEle.value = element;
 				externalForwardRef.value = element;
 			} else if (!element) {
-				targetEle.value = null;
+				targetEle.value = void 0;
 				externalForwardRef.value = null;
 			}
 		};
@@ -75,7 +74,7 @@ function generateTrigger(PortalComponent = __v_c_portal.default) {
 		}));
 		const inPopupOrChild = (ele) => {
 			const childDOM = targetEle.value;
-			return childDOM?.contains(ele) || childDOM && (0, __v_c_util_dist_Dom_shadow.getShadowRoot)(childDOM)?.host === ele || ele === childDOM || popupEle.value?.contains(ele) || popupEle.value && (0, __v_c_util_dist_Dom_shadow.getShadowRoot)(popupEle.value)?.host === ele || ele === popupEle.value || Object.values(subPopupElements.value).some((subPopupEle) => subPopupEle?.contains(ele) || ele === subPopupEle);
+			return childDOM?.contains(ele) || childDOM && (0, _v_c_util_dist_Dom_shadow.getShadowRoot)(childDOM)?.host === ele || ele === childDOM || popupEle.value?.contains(ele) || popupEle.value && (0, _v_c_util_dist_Dom_shadow.getShadowRoot)(popupEle.value)?.host === ele || ele === popupEle.value || Object.values(subPopupElements.value).some((subPopupEle) => subPopupEle?.contains(ele) || ele === subPopupEle);
 		};
 		const innerArrow = (0, vue.computed)(() => {
 			return props.arrow ? { ...props?.arrow !== true ? props?.arrow : {} } : null;
@@ -85,9 +84,6 @@ function generateTrigger(PortalComponent = __v_c_portal.default) {
 		const mergedOpen = (0, vue.computed)(() => {
 			return props?.popupVisible ?? internalOpen.value;
 		});
-		const setMergedOpen = (nextOpen) => {
-			if (openUncontrolled.value) internalOpen.value = nextOpen;
-		};
 		const isOpen = () => mergedOpen.value;
 		(0, vue.watch)(() => props.popupVisible, async (nextVisible) => {
 			if (nextVisible !== void 0) {
@@ -116,7 +112,8 @@ function generateTrigger(PortalComponent = __v_c_portal.default) {
 				arrow: innerArrow.value,
 				getPopupContainer: props.getPopupContainer,
 				getPopupClassNameFromAlign: props.getPopupClassNameFromAlign,
-				id
+				id,
+				onEsc
 			};
 		};
 		(0, vue.watch)([mergedOpen, targetEle], () => {
@@ -126,16 +123,9 @@ function generateTrigger(PortalComponent = __v_c_portal.default) {
 			} else uniqueContext?.hide(props.mouseLeaveDelay || 0);
 		});
 		const openRef = (0, vue.shallowRef)(mergedOpen.value);
-		const lastTriggerRef = (0, vue.shallowRef)([]);
-		lastTriggerRef.value = [];
-		(0, vue.watchEffect)(() => {
-			openRef.value = mergedOpen.value;
-			if (!mergedOpen.value) lastTriggerRef.value = [];
-		});
 		const internalTriggerOpen = (nextOpen) => {
-			setMergedOpen(nextOpen);
-			if ((lastTriggerRef.value[lastTriggerRef.value.length - 1] ?? mergedOpen.value) !== nextOpen) {
-				lastTriggerRef.value.push(nextOpen);
+			if (mergedOpen.value !== nextOpen) {
+				internalOpen.value = nextOpen;
 				props?.onOpenChange?.(nextOpen);
 				props?.onPopupVisibleChange?.(nextOpen);
 			}
@@ -157,6 +147,9 @@ function generateTrigger(PortalComponent = __v_c_portal.default) {
 				internalTriggerOpen(nextOpen);
 			}, delay);
 		};
+		function onEsc({ top }) {
+			if (top) triggerOpen(false);
+		}
 		const inMotion = (0, vue.shallowRef)(false);
 		(0, vue.watch)(mergedOpen, () => {
 			if (mergedOpen.value) inMotion.value = true;
@@ -172,6 +165,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);
@@ -187,7 +181,7 @@ function generateTrigger(PortalComponent = __v_c_portal.default) {
 			if (mergedOpen.value && !builtinPlacements?.[popupPlacement]) triggerAlign();
 		});
 		const alignedClassName = (0, vue.computed)(() => {
-			return (0, __v_c_util.classNames)(require_util.getAlignPopupClassName(props.builtinPlacements, props.prefixCls, alignInfo.value, props.alignPoint), props?.getPopupClassNameFromAlign?.(alignInfo.value));
+			return (0, _v_c_util.classNames)(require_util.getAlignPopupClassName(props.builtinPlacements, props.prefixCls, alignInfo.value, props.alignPoint), props?.getPopupClassNameFromAlign?.(alignInfo.value));
 		});
 		expose({
 			nativeElement: externalForwardRef,
@@ -214,9 +208,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], () => {
@@ -225,7 +220,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()) {
@@ -307,8 +302,9 @@ function generateTrigger(PortalComponent = __v_c_portal.default) {
 		(0, vue.watchEffect)(() => {
 			rendedRef.value ||= props.forceRender || mergedOpen.value || inMotion.value;
 		});
+		(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?.() ?? [])?.[0];
 			const mergedChildrenProps = {
 				...originChildProps,
 				...cloneProps.value
@@ -339,15 +335,12 @@ function generateTrigger(PortalComponent = __v_c_portal.default) {
 				ref: setTargetRef
 			});
 			const { unique, prefixCls, popup, popupClassName, popupStyle, zIndex, fresh, onPopupClick, mask, popupMotion, maskMotion, forceRender, getPopupContainer, stretch, mobile } = props;
-			return (0, vue.createVNode)(vue.Fragment, null, [(0, vue.createVNode)(__v_c_resize_observer.default, {
-				"disabled": !mergedOpen.value,
-				"onResize": onTargetResize
-			}, _isSlot(triggerNode) ? triggerNode : { default: () => [triggerNode] }), rendedRef.value && targetEle.value && (!uniqueContext || !unique) && (0, vue.createVNode)(require_context.TriggerContextProvider, context.value, { default: () => [(0, vue.createVNode)(require_index.default, {
+			return (0, vue.createVNode)(vue.Fragment, null, [triggerNode, rendedRef.value && targetEle.value && (!uniqueContext || !unique) && (0, vue.createVNode)(require_context.TriggerContextProvider, context.value, { default: () => [(0, vue.createVNode)(require_index.default, {
 				"portal": PortalComponent,
 				"ref": setPopupRef,
 				"prefixCls": prefixCls,
 				"popup": popup,
-				"className": (0, __v_c_util.classNames)(popupClassName, !isMobile.value && alignedClassName.value),
+				"className": (0, _v_c_util.classNames)(popupClassName, !isMobile.value && alignedClassName.value),
 				"style": popupStyle,
 				"target": targetEle.value,
 				"onMouseEnter": onPopupMouseEnter,
@@ -358,6 +351,7 @@ function generateTrigger(PortalComponent = __v_c_portal.default) {
 				"keepDom": inMotion.value,
 				"fresh": fresh,
 				"onClick": onPopupClick,
+				"onEsc": onEsc,
 				"onPointerDownCapture": onPopupPointerDown,
 				"mask": mask,
 				"motion": popupMotion,
@@ -505,15 +499,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: {
@@ -542,12 +536,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
 		},
@@ -588,7 +582,7 @@ function generateTrigger(PortalComponent = __v_c_portal.default) {
 		}
 	}, defaults) });
 }
-var Trigger = generateTrigger(__v_c_portal.default);
+var Trigger = generateTrigger(_v_c_portal.default);
 var src_default = Trigger;
 exports.Trigger = Trigger;
 exports.UniqueProvider = require_index$1.default;

package/dist/index.js

@@ -7,16 +7,13 @@ import useWatch from "./hooks/useWatch.js";
 import useWinClick from "./hooks/useWinClick.js";
 import Popup_default from "./Popup/index.js";
 import UniqueProvider_default from "./UniqueProvider/index.js";
-import { Fragment, computed, createVNode, defineComponent, isVNode, mergeDefaults, nextTick, reactive, ref, shallowRef, useId, watch, watchEffect } from "vue";
+import { Fragment, computed, createVNode, defineComponent, mergeDefaults, nextTick, reactive, ref, shallowRef, useId, watch, watchEffect } from "vue";
 import Portal from "@v-c/portal";
-import ResizeObserver from "@v-c/resize-observer";
+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";
-function _isSlot(s) {
-	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
 var defaults = {
 	prefixCls: "vc-trigger-popup",
 	action: "hover",
@@ -50,7 +47,7 @@ function generateTrigger(PortalComponent = Portal) {
 			if (popupEle.value !== element) popupEle.value = element;
 			parentContext?.value?.registerSubPopup(id, element ?? null);
 		};
-		const targetEle = shallowRef(null);
+		const targetEle = shallowRef();
 		const externalForwardRef = shallowRef(null);
 		const setTargetRef = (node) => {
 			const element = resolveToElement(node);
@@ -58,7 +55,7 @@ function generateTrigger(PortalComponent = Portal) {
 				targetEle.value = element;
 				externalForwardRef.value = element;
 			} else if (!element) {
-				targetEle.value = null;
+				targetEle.value = void 0;
 				externalForwardRef.value = null;
 			}
 		};
@@ -81,9 +78,6 @@ function generateTrigger(PortalComponent = Portal) {
 		const mergedOpen = computed(() => {
 			return props?.popupVisible ?? internalOpen.value;
 		});
-		const setMergedOpen = (nextOpen) => {
-			if (openUncontrolled.value) internalOpen.value = nextOpen;
-		};
 		const isOpen = () => mergedOpen.value;
 		watch(() => props.popupVisible, async (nextVisible) => {
 			if (nextVisible !== void 0) {
@@ -112,7 +106,8 @@ function generateTrigger(PortalComponent = Portal) {
 				arrow: innerArrow.value,
 				getPopupContainer: props.getPopupContainer,
 				getPopupClassNameFromAlign: props.getPopupClassNameFromAlign,
-				id
+				id,
+				onEsc
 			};
 		};
 		watch([mergedOpen, targetEle], () => {
@@ -122,16 +117,9 @@ function generateTrigger(PortalComponent = Portal) {
 			} else uniqueContext?.hide(props.mouseLeaveDelay || 0);
 		});
 		const openRef = shallowRef(mergedOpen.value);
-		const lastTriggerRef = shallowRef([]);
-		lastTriggerRef.value = [];
-		watchEffect(() => {
-			openRef.value = mergedOpen.value;
-			if (!mergedOpen.value) lastTriggerRef.value = [];
-		});
 		const internalTriggerOpen = (nextOpen) => {
-			setMergedOpen(nextOpen);
-			if ((lastTriggerRef.value[lastTriggerRef.value.length - 1] ?? mergedOpen.value) !== nextOpen) {
-				lastTriggerRef.value.push(nextOpen);
+			if (mergedOpen.value !== nextOpen) {
+				internalOpen.value = nextOpen;
 				props?.onOpenChange?.(nextOpen);
 				props?.onPopupVisibleChange?.(nextOpen);
 			}
@@ -153,6 +141,9 @@ function generateTrigger(PortalComponent = Portal) {
 				internalTriggerOpen(nextOpen);
 			}, delay);
 		};
+		function onEsc({ top }) {
+			if (top) triggerOpen(false);
+		}
 		const inMotion = shallowRef(false);
 		watch(mergedOpen, () => {
 			if (mergedOpen.value) inMotion.value = true;
@@ -168,6 +159,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);
@@ -210,9 +202,10 @@ function generateTrigger(PortalComponent = Portal) {
 			props?.afterPopupVisibleChange?.(visible);
 		};
 		const onPrepare = () => {
+			syncTargetSize();
 			return new Promise((resolve) => {
-				syncTargetSize();
 				motionPrepareResolve.value = resolve;
+				inMotion.value = true;
 			});
 		};
 		watch([motionPrepareResolve], () => {
@@ -221,7 +214,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()) {
@@ -303,6 +296,7 @@ function generateTrigger(PortalComponent = Portal) {
 		watchEffect(() => {
 			rendedRef.value ||= props.forceRender || mergedOpen.value || inMotion.value;
 		});
+		useResizeObserver(mergedOpen, targetEle, onTargetResize);
 		return () => {
 			const child = filterEmpty(slots?.default?.() ?? [])?.[0];
 			const mergedChildrenProps = {
@@ -335,10 +329,7 @@ function generateTrigger(PortalComponent = Portal) {
 				ref: setTargetRef
 			});
 			const { unique, prefixCls, popup, popupClassName, popupStyle, zIndex, fresh, onPopupClick, mask, popupMotion, maskMotion, forceRender, getPopupContainer, stretch, mobile } = props;
-			return createVNode(Fragment, null, [createVNode(ResizeObserver, {
-				"disabled": !mergedOpen.value,
-				"onResize": onTargetResize
-			}, _isSlot(triggerNode) ? triggerNode : { default: () => [triggerNode] }), rendedRef.value && targetEle.value && (!uniqueContext || !unique) && createVNode(TriggerContextProvider, context.value, { default: () => [createVNode(Popup_default, {
+			return createVNode(Fragment, null, [triggerNode, rendedRef.value && targetEle.value && (!uniqueContext || !unique) && createVNode(TriggerContextProvider, context.value, { default: () => [createVNode(Popup_default, {
 				"portal": PortalComponent,
 				"ref": setPopupRef,
 				"prefixCls": prefixCls,
@@ -354,6 +345,7 @@ function generateTrigger(PortalComponent = Portal) {
 				"keepDom": inMotion.value,
 				"fresh": fresh,
 				"onClick": onPopupClick,
+				"onEsc": onEsc,
 				"onPointerDownCapture": onPopupPointerDown,
 				"mask": mask,
 				"motion": popupMotion,
@@ -501,15 +493,15 @@ function generateTrigger(PortalComponent = Portal) {
 		},
 		popup: {
 			type: [
+				Object,
+				Function,
 				String,
 				Number,
 				null,
 				Boolean,
-				Array,
-				Function
+				Array
 			],
 			required: true,
-			skipCheck: true,
 			default: void 0
 		},
 		popupPlacement: {
@@ -538,12 +530,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/dist/interface.cjs

@@ -0,0 +1 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });

package/dist/util.cjs

@@ -1,6 +1,8 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 function isPointsEq(a1 = [], a2 = [], isAlignPoint) {
-	if (isAlignPoint) return a1[0] === a2[0];
-	return a1[0] === a2[0] && a1[1] === a2[1];
+	const getVal = (a, index) => a[index] || "";
+	if (isAlignPoint) return getVal(a1, 0) === getVal(a2, 0);
+	return getVal(a1, 0) === getVal(a2, 0) && getVal(a1, 1) === getVal(a2, 1);
 }
 function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
 	const { points } = align;

package/dist/util.js

@@ -1,6 +1,7 @@
 function isPointsEq(a1 = [], a2 = [], isAlignPoint) {
-	if (isAlignPoint) return a1[0] === a2[0];
-	return a1[0] === a2[0] && a1[1] === a2[1];
+	const getVal = (a, index) => a[index] || "";
+	if (isAlignPoint) return getVal(a1, 0) === getVal(a2, 0);
+	return getVal(a1, 0) === getVal(a2, 0) && getVal(a1, 1) === getVal(a2, 1);
 }
 function getAlignPopupClassName(builtinPlacements, prefixCls, align, isAlignPoint) {
 	const { points } = align;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@v-c/trigger",
   "type": "module",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "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.3",
+    "@v-c/util": "^1.0.8",
+    "@v-c/resize-observer": "^1.0.4"
   },
   "scripts": {
     "build": "vite build",