@sdata/web-vue 3.17.0 → 3.19.0

package/es/trigger/index.d.ts

@@ -3,6 +3,9 @@ import type { SDOptions } from '../_utils/types';
 import _Trigger from './trigger';
 declare const Trigger: {
     new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<import("vue").ExtractPropTypes<{
+        floatingOptions: {
+            type: import("vue").PropType<import(".").FloatingOptions>;
+        };
         popupVisible: {
             type: BooleanConstructor;
             default: undefined;
@@ -159,10 +162,10 @@ declare const Trigger: {
         };
     }>> & Readonly<{
         onHide?: (() => any) | undefined;
+        onShow?: (() => any) | undefined;
         onResize?: (() => any) | undefined;
         "onUpdate:popupVisible"?: ((_visible: boolean) => any) | undefined;
         onPopupVisibleChange?: ((_visible: boolean) => any) | undefined;
-        onShow?: (() => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
         'update:popupVisible': (_visible: boolean) => true;
         popupVisibleChange: (_visible: boolean) => true;
@@ -170,12 +173,11 @@ declare const Trigger: {
         hide: () => true;
         resize: () => true;
     }, import("vue").PublicProps, {
-        autoFitPosition: boolean;
+        position: "left" | "right" | "bottom" | "top" | "tl" | "tr" | "bl" | "br" | "lt" | "lb" | "rt" | "rb";
+        disabled: boolean;
         popupVisible: boolean;
         defaultPopupVisible: boolean;
         trigger: "hover" | "click" | "focus" | "contextMenu" | ("hover" | "click" | "focus" | "contextMenu")[];
-        position: "top" | "tl" | "tr" | "bottom" | "bl" | "br" | "left" | "lt" | "lb" | "right" | "rt" | "rb";
-        disabled: boolean;
         popupOffset: number;
         showArrow: boolean;
         alignPoint: boolean;
@@ -194,12 +196,13 @@ declare const Trigger: {
         updateAtScroll: boolean;
         autoFitTransformOrigin: boolean;
         hideEmpty: boolean;
+        autoFitPosition: boolean;
         renderToBody: boolean;
         preventFocus: boolean;
         scrollToClose: boolean;
         scrollToCloseDistance: number;
         escToClose: boolean;
-        ariaHasPopup: boolean | "dialog" | "menu" | "listbox" | "tree" | "grid";
+        ariaHasPopup: boolean | "listbox" | "grid" | "menu" | "dialog" | "tree";
         ariaDescribedbyPopup: boolean;
     }, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
@@ -209,6 +212,9 @@ declare const Trigger: {
         M: {};
         Defaults: {};
     }, Readonly<import("vue").ExtractPropTypes<{
+        floatingOptions: {
+            type: import("vue").PropType<import(".").FloatingOptions>;
+        };
         popupVisible: {
             type: BooleanConstructor;
             default: undefined;
@@ -365,17 +371,16 @@ declare const Trigger: {
         };
     }>> & Readonly<{
         onHide?: (() => any) | undefined;
+        onShow?: (() => any) | undefined;
         onResize?: (() => any) | undefined;
         "onUpdate:popupVisible"?: ((_visible: boolean) => any) | undefined;
         onPopupVisibleChange?: ((_visible: boolean) => any) | undefined;
-        onShow?: (() => any) | undefined;
     }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, {
-        autoFitPosition: boolean;
+        position: "left" | "right" | "bottom" | "top" | "tl" | "tr" | "bl" | "br" | "lt" | "lb" | "rt" | "rb";
+        disabled: boolean;
         popupVisible: boolean;
         defaultPopupVisible: boolean;
         trigger: "hover" | "click" | "focus" | "contextMenu" | ("hover" | "click" | "focus" | "contextMenu")[];
-        position: "top" | "tl" | "tr" | "bottom" | "bl" | "br" | "left" | "lt" | "lb" | "right" | "rt" | "rb";
-        disabled: boolean;
         popupOffset: number;
         showArrow: boolean;
         alignPoint: boolean;
@@ -394,18 +399,22 @@ declare const Trigger: {
         updateAtScroll: boolean;
         autoFitTransformOrigin: boolean;
         hideEmpty: boolean;
+        autoFitPosition: boolean;
         renderToBody: boolean;
         preventFocus: boolean;
         scrollToClose: boolean;
         scrollToCloseDistance: number;
         escToClose: boolean;
-        ariaHasPopup: boolean | "dialog" | "menu" | "listbox" | "tree" | "grid";
+        ariaHasPopup: boolean | "listbox" | "grid" | "menu" | "dialog" | "tree";
         ariaDescribedbyPopup: boolean;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
     __isSuspense?: never;
 } & import("vue").ComponentOptionsBase<Readonly<import("vue").ExtractPropTypes<{
+    floatingOptions: {
+        type: import("vue").PropType<import(".").FloatingOptions>;
+    };
     popupVisible: {
         type: BooleanConstructor;
         default: undefined;
@@ -562,10 +571,10 @@ declare const Trigger: {
     };
 }>> & Readonly<{
     onHide?: (() => any) | undefined;
+    onShow?: (() => any) | undefined;
     onResize?: (() => any) | undefined;
     "onUpdate:popupVisible"?: ((_visible: boolean) => any) | undefined;
     onPopupVisibleChange?: ((_visible: boolean) => any) | undefined;
-    onShow?: (() => any) | undefined;
 }>, () => import("vue/jsx-runtime").JSX.Element, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     'update:popupVisible': (_visible: boolean) => true;
     popupVisibleChange: (_visible: boolean) => true;
@@ -573,12 +582,11 @@ declare const Trigger: {
     hide: () => true;
     resize: () => true;
 }, string, {
-    autoFitPosition: boolean;
+    position: "left" | "right" | "bottom" | "top" | "tl" | "tr" | "bl" | "br" | "lt" | "lb" | "rt" | "rb";
+    disabled: boolean;
     popupVisible: boolean;
     defaultPopupVisible: boolean;
     trigger: "hover" | "click" | "focus" | "contextMenu" | ("hover" | "click" | "focus" | "contextMenu")[];
-    position: "top" | "tl" | "tr" | "bottom" | "bl" | "br" | "left" | "lt" | "lb" | "right" | "rt" | "rb";
-    disabled: boolean;
     popupOffset: number;
     showArrow: boolean;
     alignPoint: boolean;
@@ -597,12 +605,13 @@ declare const Trigger: {
     updateAtScroll: boolean;
     autoFitTransformOrigin: boolean;
     hideEmpty: boolean;
+    autoFitPosition: boolean;
     renderToBody: boolean;
     preventFocus: boolean;
     scrollToClose: boolean;
     scrollToCloseDistance: number;
     escToClose: boolean;
-    ariaHasPopup: boolean | "dialog" | "menu" | "listbox" | "tree" | "grid";
+    ariaHasPopup: boolean | "listbox" | "grid" | "menu" | "dialog" | "tree";
     ariaDescribedbyPopup: boolean;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & {
     install: (app: App, options?: SDOptions) => void;
@@ -610,4 +619,5 @@ declare const Trigger: {
 export type TriggerInstance = InstanceType<typeof _Trigger>;
 export type { TriggerEvent, TriggerPosition } from '../_utils/constant';
 export type { TriggerProps, TriggerPopupTranslate } from './interface';
+export type { FloatingOptions } from '../_utils/floating';
 export default Trigger;

package/es/trigger/interface.d.ts

@@ -1,10 +1,12 @@
 import { CSSProperties } from 'vue';
+import type { FloatingOptions } from '../_utils/floating';
 import type { ClassName } from '../_utils/types';
 import { TriggerEvent, TriggerPosition } from '../_utils/constant';
 export type TriggerPopupTranslate = [number, number] | {
     [key in TriggerPosition]?: [number, number];
 };
 export interface TriggerProps {
+    floatingOptions?: FloatingOptions;
     popupVisible?: boolean;
     defaultPopupVisible?: boolean;
     trigger?: TriggerEvent;

package/es/trigger/trigger.d.ts

@@ -1,7 +1,11 @@
 import type { PropType, CSSProperties } from 'vue';
 import type { TriggerEvent, TriggerPosition } from '../_utils/constant';
+import type { FloatingOptions } from '../_utils/floating';
 import { TriggerPopupTranslate } from './interface';
 declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    floatingOptions: {
+        type: PropType<FloatingOptions>;
+    };
     popupVisible: {
         type: BooleanConstructor;
         default: undefined;
@@ -163,6 +167,9 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     hide: () => true;
     resize: () => true;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    floatingOptions: {
+        type: PropType<FloatingOptions>;
+    };
     popupVisible: {
         type: BooleanConstructor;
         default: undefined;
@@ -319,17 +326,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     };
 }>> & Readonly<{
     onHide?: (() => any) | undefined;
+    onShow?: (() => any) | undefined;
     onResize?: (() => any) | undefined;
     "onUpdate:popupVisible"?: ((_visible: boolean) => any) | undefined;
     onPopupVisibleChange?: ((_visible: boolean) => any) | undefined;
-    onShow?: (() => any) | undefined;
 }>, {
-    autoFitPosition: boolean;
+    position: "left" | "right" | "bottom" | "top" | "tl" | "tr" | "bl" | "br" | "lt" | "lb" | "rt" | "rb";
+    disabled: boolean;
     popupVisible: boolean;
     defaultPopupVisible: boolean;
     trigger: "hover" | "click" | "focus" | "contextMenu" | ("hover" | "click" | "focus" | "contextMenu")[];
-    position: "top" | "tl" | "tr" | "bottom" | "bl" | "br" | "left" | "lt" | "lb" | "right" | "rt" | "rb";
-    disabled: boolean;
     popupOffset: number;
     showArrow: boolean;
     alignPoint: boolean;
@@ -348,12 +354,13 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     updateAtScroll: boolean;
     autoFitTransformOrigin: boolean;
     hideEmpty: boolean;
+    autoFitPosition: boolean;
     renderToBody: boolean;
     preventFocus: boolean;
     scrollToClose: boolean;
     scrollToCloseDistance: number;
     escToClose: boolean;
-    ariaHasPopup: boolean | "dialog" | "menu" | "listbox" | "tree" | "grid";
+    ariaHasPopup: boolean | "listbox" | "grid" | "menu" | "dialog" | "tree";
     ariaDescribedbyPopup: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/es/trigger/trigger.js

@@ -1,5 +1,5 @@
 import { configProviderInjectionKey, themePopupContainerInjectionKey } from "../config-provider/context.js";
-import { _objectSpread2 } from "../_virtual/_@oxc-project_runtime@0.133.0/helpers/esm/objectSpread2.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/objectSpread2.js";
 import { getPrefixCls } from "../_utils/global-config.js";
 import { isEmptyChildren, mergeFirstChild } from "../_utils/vue-utils.js";
 import { off, on } from "../_utils/dom.js";
@@ -13,9 +13,11 @@ import usePickSlots from "../_hooks/use-pick-slots.js";
 import usePopupManager from "../_hooks/use-popup-manager.js";
 import { useResizeObserver as useResizeObserver$1 } from "../_hooks/use-resize-observer.js";
 import { useTeleportContainer } from "../_hooks/use-teleport-container.js";
+import { createFloatingOptions } from "../_utils/floating.js";
 import { triggerInjectionKey } from "./context.js";
-import { getArrowStyle, getElementScrollRect, getPopupStyle, getScrollElements, getTransformOrigin } from "./utils.js";
-import { Fragment, Teleport, Transition, computed, createVNode, defineComponent, getCurrentInstance, inject, mergeProps, nextTick, onBeforeUnmount, onDeactivated, onMounted, onUpdated, provide, reactive, ref, vShow, watch, withDirectives } from "vue";
+import { getScrollElements, getTransformOrigin } from "./utils.js";
+import { Fragment, Teleport, Transition, computed, createVNode, defineComponent, getCurrentInstance, inject, mergeProps, nextTick, onBeforeUnmount, onDeactivated, onMounted, provide, reactive, ref, vShow, watch, withDirectives } from "vue";
+import { arrow, autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/vue";
 import { onClickOutside, useEventListener } from "@vueuse/core";
 //#region components/trigger/trigger.tsx
 var TRIGGER_EVENTS = [
@@ -26,10 +28,68 @@ var TRIGGER_EVENTS = [
 	"onFocusout",
 	"onContextmenu"
 ];
+var toFloatingPlacement = (position) => {
+	return {
+		top: "top",
+		tl: "top-start",
+		tr: "top-end",
+		bottom: "bottom",
+		bl: "bottom-start",
+		br: "bottom-end",
+		left: "left",
+		lt: "left-start",
+		lb: "left-end",
+		right: "right",
+		rt: "right-start",
+		rb: "right-end"
+	}[position];
+};
+var fromFloatingPlacement = (placement) => {
+	return {
+		"top": "top",
+		"top-start": "tl",
+		"top-end": "tr",
+		"bottom": "bottom",
+		"bottom-start": "bl",
+		"bottom-end": "br",
+		"left": "left",
+		"left-start": "lt",
+		"left-end": "lb",
+		"right": "right",
+		"right-start": "rt",
+		"right-end": "rb"
+	}[placement];
+};
+var getArrowFloatingStyle = (placement, data, customStyle) => {
+	const side = placement.split("-")[0];
+	const staticSide = {
+		top: "bottom",
+		right: "left",
+		bottom: "top",
+		left: "right"
+	}[side];
+	const transforms = {
+		top: "translateY(50%) rotate(45deg)",
+		right: "translateX(-50%) rotate(45deg)",
+		bottom: "translateY(-50%) rotate(45deg)",
+		left: "translateX(50%) rotate(45deg)"
+	};
+	return _objectSpread2(_objectSpread2({}, customStyle), {}, {
+		left: (data === null || data === void 0 ? void 0 : data.x) == null ? void 0 : `${data.x}px`,
+		top: (data === null || data === void 0 ? void 0 : data.y) == null ? void 0 : `${data.y}px`,
+		[staticSide]: 0,
+		transform: transforms[side]
+	});
+};
 var trigger_default = /* @__PURE__ */ defineComponent({
 	name: "Trigger",
 	inheritAttrs: false,
 	props: {
+		/**
+		* @zh Floating UI Vue 的完整配置。与旧定位参数冲突时以此配置为准。
+		* @en Complete Floating UI Vue options. These options take precedence over legacy positioning props.
+		*/
+		floatingOptions: { type: Object },
 		/**
 		* @zh 弹出框是否可见
 		* @en Whether the popup is visible
@@ -374,9 +434,6 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 		const popupRef = ref();
 		const popupVisible = ref(props.defaultPopupVisible);
 		const popupPosition = ref(props.position);
-		const popupStyle = ref({});
-		const transformStyle = ref({});
-		const arrowStyle = ref({});
 		const arrowRef = ref();
 		const mousePosition = ref({
 			top: 0,
@@ -388,6 +445,63 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 			var _props$popupVisible;
 			return (_props$popupVisible = props.popupVisible) !== null && _props$popupVisible !== void 0 ? _props$popupVisible : popupVisible.value;
 		});
+		const pointReference = {
+			getBoundingClientRect: () => {
+				const { left, top } = mousePosition.value;
+				return {
+					x: left,
+					y: top,
+					top,
+					right: left,
+					bottom: top,
+					left,
+					width: 0,
+					height: 0
+				};
+			},
+			get contextElement() {
+				return firstElement.value;
+			}
+		};
+		const floatingReference = computed(() => {
+			var _firstElement$value;
+			return props.alignPoint ? pointReference : (_firstElement$value = firstElement.value) !== null && _firstElement$value !== void 0 ? _firstElement$value : null;
+		});
+		const floatingElement = computed(() => computedVisible.value ? popupRef.value : null);
+		const legacyMiddleware = computed(() => {
+			var _props$popupTranslate;
+			const middleware = [offset(props.popupOffset)];
+			const translate = Array.isArray(props.popupTranslate) ? props.popupTranslate : (_props$popupTranslate = props.popupTranslate) === null || _props$popupTranslate === void 0 ? void 0 : _props$popupTranslate[props.position];
+			if (translate) middleware.push({
+				name: "sdTriggerTranslate",
+				options: translate,
+				fn: ({ x, y }) => ({
+					x: x + translate[0],
+					y: y + translate[1]
+				})
+			});
+			if (props.autoFitPosition) middleware.push(flip(), shift());
+			if (props.showArrow) middleware.push(arrow({ element: arrowRef }));
+			return middleware;
+		});
+		const defaultWhileElementsMounted = (reference, floating, update) => autoUpdate(reference, floating, update, {
+			ancestorScroll: props.updateAtScroll || Boolean(configCtx === null || configCtx === void 0 ? void 0 : configCtx.updateAtScroll),
+			ancestorResize: true,
+			elementResize: props.autoFixPosition,
+			layoutShift: props.autoFixPosition
+		});
+		const { floatingStyles, placement: floatingPlacement, middlewareData, isPositioned, update: updateFloatingPosition } = useFloating(floatingReference, floatingElement, createFloatingOptions(() => props.floatingOptions, {
+			open: computedVisible,
+			placement: () => toFloatingPlacement(props.position),
+			middleware: legacyMiddleware,
+			whileElementsMounted: defaultWhileElementsMounted
+		}));
+		const mergedPopupStyle = computed(() => _objectSpread2(_objectSpread2(_objectSpread2(_objectSpread2({}, props.popupStyle), props.autoFitPopupMinWidth && firstElement.value ? { minWidth: `${firstElement.value.getBoundingClientRect().width}px` } : {}), props.autoFitPopupWidth && firstElement.value ? { width: `${firstElement.value.getBoundingClientRect().width}px` } : {}), floatingStyles.value));
+		const transformStyle = computed(() => props.autoFitTransformOrigin ? { transformOrigin: getTransformOrigin(popupPosition.value) } : {});
+		const arrowStyle = computed(() => getArrowFloatingStyle(floatingPlacement.value, middlewareData.value.arrow, props.arrowStyle));
+		watch(floatingPlacement, (placement) => {
+			popupPosition.value = fromFloatingPlacement(placement);
+		}, { immediate: true });
 		const firstChildAria = computed(() => {
 			const aria = {};
 			if (props.ariaHasPopup !== void 0) {
@@ -422,45 +536,13 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 		};
 		const updateMousePosition = (e) => {
 			if (props.alignPoint) {
-				const { pageX, pageY } = e;
+				const { clientX, clientY } = e;
 				mousePosition.value = {
-					top: pageY,
-					left: pageX
+					top: clientY,
+					left: clientX
 				};
 			}
 		};
-		const updatePopupStyle = () => {
-			if (!firstElement.value || !popupRef.value || !containerRef.value) return;
-			const containerRect = containerRef.value.getBoundingClientRect();
-			const triggerRect = props.alignPoint ? {
-				top: mousePosition.value.top,
-				bottom: mousePosition.value.top,
-				left: mousePosition.value.left,
-				right: mousePosition.value.left,
-				scrollTop: mousePosition.value.top,
-				scrollBottom: mousePosition.value.top,
-				scrollLeft: mousePosition.value.left,
-				scrollRight: mousePosition.value.left,
-				width: 0,
-				height: 0
-			} : getElementScrollRect(firstElement.value, containerRect);
-			const getPopupRect = () => getElementScrollRect(popupRef.value, containerRect);
-			const popupRect = getPopupRect();
-			const { style, position } = getPopupStyle(props.position, containerRect, triggerRect, popupRect, {
-				offset: props.popupOffset,
-				translate: props.popupTranslate,
-				customStyle: props.popupStyle,
-				autoFitPosition: props.autoFitPosition
-			});
-			if (props.autoFitTransformOrigin) transformStyle.value = { transformOrigin: getTransformOrigin(position) };
-			if (props.autoFitPopupMinWidth) style.minWidth = `${triggerRect.width}px`;
-			else if (props.autoFitPopupWidth) style.width = `${triggerRect.width}px`;
-			if (popupPosition.value !== position) popupPosition.value = position;
-			popupStyle.value = style;
-			if (props.showArrow) nextTick(() => {
-				arrowStyle.value = getArrowStyle(position, triggerRect, getPopupRect(), { customStyle: props.arrowStyle });
-			});
-		};
 		const changeVisible = (visible, delay) => {
 			if (visible === computedVisible.value && delayTimer === 0) return;
 			const update = () => {
@@ -468,7 +550,7 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 				emit("update:popupVisible", visible);
 				emit("popupVisibleChange", visible);
 				if (visible) nextTick(() => {
-					updatePopupStyle();
+					updateFloatingPosition();
 				});
 			};
 			if (!visible) {
@@ -600,12 +682,11 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 			return Math.abs(newScrollTop - scrollTop) >= props.scrollToCloseDistance || Math.abs(newScrollLeft - scrollLeft) >= props.scrollToCloseDistance;
 		};
 		const handleScroll = throttleByRaf((e) => {
-			if (computedVisible.value) if (props.scrollToClose || (configCtx === null || configCtx === void 0 ? void 0 : configCtx.scrollToClose)) {
+			if (computedVisible.value && (props.scrollToClose || (configCtx === null || configCtx === void 0 ? void 0 : configCtx.scrollToClose))) {
 				const element = e.target;
 				if (!scrollPosition) scrollPosition = [element.scrollTop, element.scrollLeft];
 				if (isExceedThreshold(scrollPosition, element)) changeVisible(false);
-				else updatePopupStyle();
-			} else updatePopupStyle();
+			}
 		});
 		const removeWindowScroll = () => {
 			off(window, "scroll", onWindowScroll);
@@ -620,7 +701,7 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 			}
 		});
 		const handleResize = () => {
-			if (computedVisible.value) updatePopupStyle();
+			if (computedVisible.value) updateFloatingPosition();
 		};
 		const onTargetResize = () => {
 			handleResize();
@@ -655,7 +736,7 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 			if (value) mounted.value = true;
 		});
 		watch(() => [props.autoFitPopupWidth, props.autoFitPopupMinWidth], () => {
-			if (computedVisible.value) updatePopupStyle();
+			if (computedVisible.value) updateFloatingPosition();
 		});
 		const { createResizeObserver, destroyResizeObserver } = useResizeObserver$1({
 			elementRef: containerRef,
@@ -664,16 +745,13 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 		onMounted(() => {
 			createResizeObserver();
 			if (computedVisible.value) {
-				updatePopupStyle();
+				updateFloatingPosition();
 				if (props.updateAtScroll || (configCtx === null || configCtx === void 0 ? void 0 : configCtx.updateAtScroll)) {
 					scrollElements = getScrollElements(firstElement.value);
 					for (const item of scrollElements) item.addEventListener("scroll", handleScroll);
 				}
 			}
 		});
-		onUpdated(() => {
-			if (computedVisible.value) updatePopupStyle();
-		});
 		onDeactivated(() => {
 			changeVisible(false);
 		});
@@ -720,7 +798,7 @@ var trigger_default = /* @__PURE__ */ defineComponent({
 				"id": popupId,
 				"ref": popupRef,
 				"class": [`${prefixCls}-popup`, `${prefixCls}-position-${popupPosition.value}`],
-				"style": _objectSpread2(_objectSpread2({}, popupStyle.value), {}, {
+				"style": _objectSpread2(_objectSpread2(_objectSpread2({}, mergedPopupStyle.value), isPositioned.value ? {} : { visibility: "hidden" }), {}, {
 					zIndex: zIndex.value,
 					pointerEvents: isAnimation.value ? "none" : "auto"
 				}),

package/es/trigger/utils.d.ts

@@ -1,51 +1,4 @@
-import type { CSSProperties } from 'vue';
 import type { TriggerPosition } from '../_utils/constant';
-import type { TriggerPopupTranslate } from './interface';
-export interface ElementRect {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-    width: number;
-    height: number;
-}
-interface ScrollRect {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-    scrollTop: number;
-    scrollBottom: number;
-    scrollLeft: number;
-    scrollRight: number;
-    width: number;
-    height: number;
-}
-export declare const getElementScrollRect: (element: HTMLElement, containerRect: DOMRect) => {
-    top: number;
-    bottom: number;
-    left: number;
-    right: number;
-    scrollTop: number;
-    scrollBottom: number;
-    scrollLeft: number;
-    scrollRight: number;
-    width: number;
-    height: number;
-};
 export declare const getTransformOrigin: (position: TriggerPosition) => string;
-export declare const getPopupStyle: (position: TriggerPosition, containerRect: DOMRect, triggerRect: ScrollRect, popupRect: ScrollRect, { offset, translate, customStyle, autoFitPosition, }?: {
-    offset?: number;
-    translate?: TriggerPopupTranslate;
-    customStyle?: CSSProperties;
-    autoFitPosition?: boolean;
-}) => {
-    style: CSSProperties;
-    position: TriggerPosition;
-};
-export declare const getArrowStyle: (position: TriggerPosition, triggerRect: ScrollRect, popupRect: ScrollRect, { customStyle, }: {
-    customStyle?: CSSProperties;
-}) => CSSProperties;
 export declare const isScrollElement: (element: HTMLElement) => boolean;
 export declare const getScrollElements: (container: HTMLElement | undefined) => HTMLElement[];
-export {};