@sdata/web-vue 3.29.0 → 4.0.0

package/es/trigger/trigger.vue_vue_type_script_setup_true_lang.js

@@ -0,0 +1,642 @@
+import { configProviderInjectionKey, themePopupContainerInjectionKey } from "../config-provider/context.js";
+import _objectSpread2 from "../_virtual/_@oxc-project_runtime@0.142.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";
+import { throttleByRaf } from "../_utils/throttle-by-raf.js";
+import { KEYBOARD_KEY } from "../_utils/keyboard.js";
+import { omit } from "../_utils/omit.js";
+import client_only_default from "../_components/client-only.js";
+import { useFirstElement } from "../_hooks/use-first-element.js";
+import resize_observer_v2_default from "../_components/resize-observer-v2.js";
+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 { getScrollElements, getTransformOrigin } from "./utils.js";
+import { Fragment, Teleport, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, getCurrentInstance, inject, mergeProps, nextTick, normalizeClass, normalizeStyle, onBeforeUnmount, onDeactivated, onMounted, openBlock, provide, reactive, ref, renderSlot, unref, useAttrs, useSlots, vShow, watch, withCtx, withDirectives } from "vue";
+import { onClickOutside, useEventListener } from "@vueuse/core";
+import { arrow, autoUpdate, flip, offset, shift, useFloating } from "@floating-ui/vue";
+//#region components/trigger/trigger.vue?vue&type=script&setup=true&lang.ts
+var trigger_vue_vue_type_script_setup_true_lang_default = /*@__PURE__*/ defineComponent(_objectSpread2(_objectSpread2({}, {
+	name: "Trigger",
+	inheritAttrs: false
+}), {}, {
+	__name: "trigger",
+	props: {
+		floatingOptions: {},
+		popupVisible: {
+			type: Boolean,
+			default: void 0
+		},
+		defaultPopupVisible: {
+			type: Boolean,
+			default: false
+		},
+		trigger: { default: "hover" },
+		position: { default: "bottom" },
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		popupOffset: { default: 0 },
+		popupTranslate: {},
+		showArrow: {
+			type: Boolean,
+			default: false
+		},
+		alignPoint: {
+			type: Boolean,
+			default: false
+		},
+		popupHoverStay: {
+			type: Boolean,
+			default: true
+		},
+		blurToClose: {
+			type: Boolean,
+			default: true
+		},
+		clickToClose: {
+			type: Boolean,
+			default: true
+		},
+		clickOutsideToClose: {
+			type: Boolean,
+			default: true
+		},
+		unmountOnClose: {
+			type: Boolean,
+			default: true
+		},
+		contentClass: {},
+		contentStyle: {},
+		arrowClass: {},
+		arrowStyle: {},
+		popupStyle: {},
+		animationName: { default: "fade-in" },
+		duration: {},
+		mouseEnterDelay: { default: 100 },
+		mouseLeaveDelay: { default: 100 },
+		focusDelay: { default: 0 },
+		autoFitPopupWidth: {
+			type: Boolean,
+			default: false
+		},
+		autoFitPopupMinWidth: {
+			type: Boolean,
+			default: false
+		},
+		autoFixPosition: {
+			type: Boolean,
+			default: true
+		},
+		popupContainer: {},
+		updateAtScroll: {
+			type: Boolean,
+			default: false
+		},
+		autoFitTransformOrigin: {
+			type: Boolean,
+			default: false
+		},
+		hideEmpty: {
+			type: Boolean,
+			default: false
+		},
+		openedClass: {},
+		autoFitPosition: {
+			type: Boolean,
+			default: true
+		},
+		renderToBody: {
+			type: Boolean,
+			default: true
+		},
+		preventFocus: {
+			type: Boolean,
+			default: false
+		},
+		scrollToClose: {
+			type: Boolean,
+			default: false
+		},
+		scrollToCloseDistance: { default: 0 },
+		escToClose: {
+			type: Boolean,
+			default: false
+		},
+		ariaHasPopup: { type: [Boolean, String] },
+		ariaDescribedbyPopup: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: [
+		"update:popupVisible",
+		"popupVisibleChange",
+		"show",
+		"hide",
+		"resize"
+	],
+	setup(__props, { emit: __emit }) {
+		const TRIGGER_EVENTS = [
+			"onClick",
+			"onMouseenter",
+			"onMouseleave",
+			"onFocusin",
+			"onFocusout",
+			"onContextmenu"
+		];
+		const 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];
+		};
+		const 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];
+		};
+		const 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]
+			});
+		};
+		const props = __props;
+		const emit = __emit;
+		const VNodeRenderer = ({ content }) => content;
+		const attrs = useAttrs();
+		const slots = useSlots();
+		const triggerEventAttrs = attrs;
+		const prefixCls = getPrefixCls("trigger");
+		const popupId = `${prefixCls}-popup-${getCurrentInstance().uid}`;
+		const popupAttrs = computed(() => omit(attrs, TRIGGER_EVENTS));
+		const configCtx = inject(configProviderInjectionKey, void 0);
+		const themePopupContainer = inject(themePopupContainerInjectionKey, void 0);
+		const mergedPopupContainer = computed(() => {
+			var _props$popupContainer;
+			return (_props$popupContainer = props.popupContainer) !== null && _props$popupContainer !== void 0 ? _props$popupContainer : themePopupContainer === null || themePopupContainer === void 0 ? void 0 : themePopupContainer.value;
+		});
+		const triggerMethods = computed(() => [].concat(props.trigger));
+		const childrenRefs = /* @__PURE__ */ new Set();
+		const triggerCtx = inject(triggerInjectionKey, void 0);
+		const { children, firstElement } = useFirstElement();
+		const popupRef = ref();
+		const popupVisible = ref(props.defaultPopupVisible);
+		const popupPosition = ref(props.position);
+		const arrowRef = ref();
+		const mousePosition = ref({
+			top: 0,
+			left: 0
+		});
+		let scrollPosition = null;
+		let windowScrollPosition = null;
+		const computedVisible = computed(() => {
+			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 floatingOptions = createFloatingOptions(() => props.floatingOptions, {
+			open: computedVisible,
+			placement: () => toFloatingPlacement(props.position),
+			middleware: legacyMiddleware,
+			whileElementsMounted: defaultWhileElementsMounted
+		});
+		const { floatingStyles, placement: floatingPlacement, middlewareData, isPositioned, update: updateFloatingPosition } = useFloating(floatingReference, floatingElement, floatingOptions);
+		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) {
+				aria["aria-haspopup"] = props.ariaHasPopup === true ? "true" : props.ariaHasPopup;
+				aria["aria-expanded"] = computedVisible.value;
+				aria["aria-controls"] = computedVisible.value ? popupId : void 0;
+			}
+			if (props.ariaDescribedbyPopup) aria["aria-describedby"] = computedVisible.value ? popupId : void 0;
+			return aria;
+		});
+		const { teleportContainer, containerRef } = useTeleportContainer({
+			popupContainer: mergedPopupContainer,
+			visible: computedVisible,
+			documentContainer: true
+		});
+		const { zIndex } = usePopupManager("popup", { visible: computedVisible });
+		const syncThemePopupContainerZIndex = () => {
+			if (computedVisible.value && zIndex.value > 0 && (themePopupContainer === null || themePopupContainer === void 0 ? void 0 : themePopupContainer.value) && mergedPopupContainer.value === themePopupContainer.value) themePopupContainer.value.style.zIndex = String(zIndex.value);
+		};
+		watch([
+			computedVisible,
+			zIndex,
+			mergedPopupContainer
+		], syncThemePopupContainerZIndex, { immediate: true });
+		let delayTimer = 0;
+		let windowListener = false;
+		const cleanDelayTimer = () => {
+			if (delayTimer) {
+				window.clearTimeout(delayTimer);
+				delayTimer = 0;
+			}
+		};
+		const updateMousePosition = (event) => {
+			if (props.alignPoint) mousePosition.value = {
+				top: event.clientY,
+				left: event.clientX
+			};
+		};
+		const changeVisible = (visible, delay) => {
+			if (visible === computedVisible.value && delayTimer === 0) return;
+			const update = () => {
+				popupVisible.value = visible;
+				emit("update:popupVisible", visible);
+				emit("popupVisibleChange", visible);
+				if (visible) nextTick(updateFloatingPosition);
+			};
+			if (!visible) {
+				scrollPosition = null;
+				windowScrollPosition = null;
+			}
+			if (delay) {
+				cleanDelayTimer();
+				if (visible !== computedVisible.value) delayTimer = window.setTimeout(update, delay);
+			} else update();
+		};
+		const handleClick = (event) => {
+			var _triggerEventAttrs$on;
+			(_triggerEventAttrs$on = triggerEventAttrs.onClick) === null || _triggerEventAttrs$on === void 0 || _triggerEventAttrs$on.call(triggerEventAttrs, event);
+			if (props.disabled || computedVisible.value && !props.clickToClose) return;
+			if (triggerMethods.value.includes("click")) {
+				updateMousePosition(event);
+				changeVisible(!computedVisible.value);
+			} else if (triggerMethods.value.includes("contextMenu") && computedVisible.value) changeVisible(false);
+		};
+		const handleMouseEnter = (event) => {
+			var _triggerEventAttrs$on2;
+			(_triggerEventAttrs$on2 = triggerEventAttrs.onMouseenter) === null || _triggerEventAttrs$on2 === void 0 || _triggerEventAttrs$on2.call(triggerEventAttrs, event);
+			if (props.disabled || !triggerMethods.value.includes("hover")) return;
+			updateMousePosition(event);
+			changeVisible(true, props.mouseEnterDelay);
+		};
+		const handleMouseEnterWithContext = (event) => {
+			triggerCtx === null || triggerCtx === void 0 || triggerCtx.onMouseenter(event);
+			handleMouseEnter(event);
+		};
+		const handleMouseLeave = (event) => {
+			var _triggerEventAttrs$on3;
+			(_triggerEventAttrs$on3 = triggerEventAttrs.onMouseleave) === null || _triggerEventAttrs$on3 === void 0 || _triggerEventAttrs$on3.call(triggerEventAttrs, event);
+			if (props.disabled || !triggerMethods.value.includes("hover")) return;
+			changeVisible(false, props.mouseLeaveDelay);
+		};
+		const handleMouseLeaveWithContext = (event) => {
+			triggerCtx === null || triggerCtx === void 0 || triggerCtx.onMouseleave(event);
+			handleMouseLeave(event);
+		};
+		const handleFocusin = (event) => {
+			var _triggerEventAttrs$on4;
+			(_triggerEventAttrs$on4 = triggerEventAttrs.onFocusin) === null || _triggerEventAttrs$on4 === void 0 || _triggerEventAttrs$on4.call(triggerEventAttrs, event);
+			if (!props.disabled && triggerMethods.value.includes("focus")) changeVisible(true, props.focusDelay);
+		};
+		const handleFocusout = (event) => {
+			var _triggerEventAttrs$on5;
+			(_triggerEventAttrs$on5 = triggerEventAttrs.onFocusout) === null || _triggerEventAttrs$on5 === void 0 || _triggerEventAttrs$on5.call(triggerEventAttrs, event);
+			if (!props.disabled && triggerMethods.value.includes("focus") && props.blurToClose) changeVisible(false);
+		};
+		const handleContextmenu = (event) => {
+			var _triggerEventAttrs$on6;
+			(_triggerEventAttrs$on6 = triggerEventAttrs.onContextmenu) === null || _triggerEventAttrs$on6 === void 0 || _triggerEventAttrs$on6.call(triggerEventAttrs, event);
+			if (props.disabled || !triggerMethods.value.includes("contextMenu") || computedVisible.value && !props.clickToClose) return;
+			updateMousePosition(event);
+			changeVisible(!computedVisible.value);
+			event.preventDefault();
+		};
+		const getChildElements = () => {
+			const elements = [];
+			for (const item of childrenRefs) {
+				if (!item) continue;
+				const element = "value" in item ? item.value : item;
+				if (element) elements.push(element);
+			}
+			return elements;
+		};
+		const handleChildContextmenu = (event) => {
+			var _popupRef$value;
+			triggerCtx === null || triggerCtx === void 0 || triggerCtx.onContextmenu(event);
+			if (!props.clickOutsideToClose || !computedVisible.value) return;
+			if (!triggerMethods.value.includes("contextMenu")) return;
+			const target = event.target;
+			if ((_popupRef$value = popupRef.value) === null || _popupRef$value === void 0 ? void 0 : _popupRef$value.contains(target)) return;
+			if (getChildElements().some((element) => element.contains(target))) return;
+			changeVisible(false);
+		};
+		const handleContextmenuWithContext = (event) => {
+			triggerCtx === null || triggerCtx === void 0 || triggerCtx.onContextmenu(event);
+			handleContextmenu(event);
+		};
+		const addChildRef = (childRef) => {
+			childrenRefs.add(childRef);
+			triggerCtx === null || triggerCtx === void 0 || triggerCtx.addChildRef(childRef);
+		};
+		const removeChildRef = (childRef) => {
+			childrenRefs.delete(childRef);
+			triggerCtx === null || triggerCtx === void 0 || triggerCtx.removeChildRef(childRef);
+		};
+		provide(triggerInjectionKey, reactive({
+			onMouseenter: handleMouseEnterWithContext,
+			onMouseleave: handleMouseLeaveWithContext,
+			onContextmenu: handleChildContextmenu,
+			addChildRef,
+			removeChildRef
+		}));
+		const contentSlot = usePickSlots(slots, "content");
+		const hidePopup = computed(() => {
+			var _contentSlot$value;
+			return props.hideEmpty && isEmptyChildren((_contentSlot$value = contentSlot.value) === null || _contentSlot$value === void 0 ? void 0 : _contentSlot$value.call(contentSlot));
+		});
+		const getOutsideIgnoreElements = () => [...triggerMethods.value.includes("contextMenu") || !firstElement.value ? [] : [firstElement.value], ...getChildElements()];
+		onClickOutside(popupRef, () => {
+			if (props.clickOutsideToClose && computedVisible.value) changeVisible(false);
+		}, { ignore: getOutsideIgnoreElements });
+		const handleOutsideContextmenu = (event) => {
+			var _popupRef$value2;
+			if (!props.clickOutsideToClose || !computedVisible.value) return;
+			if (!triggerMethods.value.includes("contextMenu")) return;
+			const target = event.target;
+			if ((_popupRef$value2 = popupRef.value) === null || _popupRef$value2 === void 0 ? void 0 : _popupRef$value2.contains(target)) return;
+			if (getChildElements().some((element) => element.contains(target))) return;
+			changeVisible(false);
+		};
+		const documentRef = computed(() => typeof document === "undefined" ? void 0 : document);
+		useEventListener(documentRef, "contextmenu", handleOutsideContextmenu, { capture: true });
+		useEventListener(documentRef, "keydown", (event) => {
+			if (props.escToClose && computedVisible.value && event.key === KEYBOARD_KEY.ESC) changeVisible(false);
+		});
+		const isExceedThreshold = (oldPosition, element) => {
+			const [scrollTop, scrollLeft] = oldPosition;
+			return Math.abs(element.scrollTop - scrollTop) >= props.scrollToCloseDistance || Math.abs(element.scrollLeft - scrollLeft) >= props.scrollToCloseDistance;
+		};
+		const handleScroll = throttleByRaf((event) => {
+			if (computedVisible.value && (props.scrollToClose || (configCtx === null || configCtx === void 0 ? void 0 : configCtx.scrollToClose))) {
+				var _scrollPosition;
+				const element = event.target;
+				(_scrollPosition = scrollPosition) !== null && _scrollPosition !== void 0 || (scrollPosition = [element.scrollTop, element.scrollLeft]);
+				if (isExceedThreshold(scrollPosition, element)) changeVisible(false);
+			}
+		});
+		const removeWindowScroll = () => {
+			off(window, "scroll", onWindowScroll);
+			windowListener = false;
+		};
+		const onWindowScroll = throttleByRaf((event) => {
+			var _windowScrollPosition;
+			const element = event.target.documentElement;
+			(_windowScrollPosition = windowScrollPosition) !== null && _windowScrollPosition !== void 0 || (windowScrollPosition = [element.scrollTop, element.scrollLeft]);
+			if (isExceedThreshold(windowScrollPosition, element)) {
+				changeVisible(false);
+				removeWindowScroll();
+			}
+		});
+		const handleResize = () => {
+			if (computedVisible.value) updateFloatingPosition();
+		};
+		const onTargetResize = () => {
+			handleResize();
+			emit("resize");
+		};
+		const handlePopupMouseDown = (event) => {
+			if (props.preventFocus) event.preventDefault();
+		};
+		watch(popupRef, (element, _oldElement, onCleanup) => {
+			if (!element) return;
+			triggerCtx === null || triggerCtx === void 0 || triggerCtx.addChildRef(element);
+			onCleanup(() => triggerCtx === null || triggerCtx === void 0 ? void 0 : triggerCtx.removeChildRef(element));
+		}, { immediate: true });
+		const triggerCls = computed(() => computedVisible.value ? props.openedClass : void 0);
+		let scrollElements;
+		const mounted = ref(computedVisible.value);
+		watch(computedVisible, (value) => {
+			if (props.scrollToClose || (configCtx === null || configCtx === void 0 ? void 0 : configCtx.scrollToClose)) {
+				on(window, "scroll", onWindowScroll);
+				windowListener = true;
+			}
+			if (props.updateAtScroll || (configCtx === null || configCtx === void 0 ? void 0 : configCtx.updateAtScroll)) {
+				if (value) {
+					scrollElements = getScrollElements(firstElement.value);
+					for (const item of scrollElements) item.addEventListener("scroll", handleScroll);
+				} else if (scrollElements) {
+					for (const item of scrollElements) item.removeEventListener("scroll", handleScroll);
+					scrollElements = void 0;
+				}
+			}
+			if (value) mounted.value = true;
+		});
+		watch(() => [props.autoFitPopupWidth, props.autoFitPopupMinWidth], () => {
+			if (computedVisible.value) updateFloatingPosition();
+		});
+		const { createResizeObserver, destroyResizeObserver } = useResizeObserver$1({
+			elementRef: containerRef,
+			onResize: handleResize
+		});
+		onMounted(() => {
+			createResizeObserver();
+			if (computedVisible.value) {
+				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);
+				}
+			}
+		});
+		onDeactivated(() => changeVisible(false));
+		onBeforeUnmount(() => {
+			triggerCtx === null || triggerCtx === void 0 || triggerCtx.removeChildRef(popupRef.value);
+			destroyResizeObserver();
+			if (windowListener) removeWindowScroll();
+			if (scrollElements) {
+				for (const item of scrollElements) item.removeEventListener("scroll", handleScroll);
+				scrollElements = void 0;
+			}
+		});
+		const isAnimation = ref(false);
+		const onAnimationStart = () => {
+			isAnimation.value = true;
+		};
+		const handleShow = () => {
+			isAnimation.value = false;
+			if (computedVisible.value) emit("show");
+		};
+		const handleHide = () => {
+			isAnimation.value = false;
+			if (!computedVisible.value) {
+				mounted.value = false;
+				emit("hide");
+			}
+		};
+		const getTriggerChildren = () => {
+			var _slots$default, _slots$default2;
+			children.value = (_slots$default = (_slots$default2 = slots.default) === null || _slots$default2 === void 0 ? void 0 : _slots$default2.call(slots)) !== null && _slots$default !== void 0 ? _slots$default : [];
+			mergeFirstChild(children.value, _objectSpread2(_objectSpread2({ class: triggerCls.value }, firstChildAria.value), {}, {
+				onClick: handleClick,
+				onMouseenter: handleMouseEnter,
+				onMouseleave: handleMouseLeave,
+				onFocusin: handleFocusin,
+				onFocusout: handleFocusout,
+				onContextmenu: handleContextmenuWithContext
+			}));
+			return children.value;
+		};
+		const popupElementAttrs = computed(() => _objectSpread2({
+			"id": popupId,
+			"class": [`${prefixCls}-popup`, `${prefixCls}-position-${popupPosition.value}`],
+			"style": _objectSpread2(_objectSpread2(_objectSpread2({}, mergedPopupStyle.value), isPositioned.value ? {} : { visibility: "hidden" }), {}, {
+				zIndex: zIndex.value,
+				pointerEvents: isAnimation.value ? "none" : void 0
+			}),
+			"trigger-placement": popupPosition.value
+		}, popupAttrs.value));
+		const shouldRenderPopup = computed(() => (!props.unmountOnClose || computedVisible.value || mounted.value) && !hidePopup.value);
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock(Fragment, null, [props.autoFixPosition ? (openBlock(), createBlock(unref(resize_observer_v2_default), {
+				key: 0,
+				onResize: onTargetResize
+			}, {
+				default: withCtx(() => [createVNode(VNodeRenderer, { content: getTriggerChildren() }, null, 8, ["content"])]),
+				_: 1
+			})) : (openBlock(), createBlock(VNodeRenderer, {
+				key: 1,
+				content: getTriggerChildren()
+			}, null, 8, ["content"])), createVNode(client_only_default, null, {
+				default: withCtx(() => [(openBlock(), createBlock(Teleport, {
+					to: unref(teleportContainer),
+					disabled: !props.renderToBody
+				}, [shouldRenderPopup.value ? (openBlock(), createBlock(unref(resize_observer_v2_default), {
+					key: 0,
+					onResize: handleResize
+				}, {
+					default: withCtx(() => [createElementVNode("div", mergeProps({
+						ref_key: "popupRef",
+						ref: popupRef
+					}, popupElementAttrs.value, {
+						onMouseenter: handleMouseEnterWithContext,
+						onMouseleave: handleMouseLeaveWithContext,
+						onMousedown: handlePopupMouseDown
+					}), [createVNode(Transition, {
+						name: props.animationName,
+						duration: props.duration,
+						appear: "",
+						onBeforeEnter: onAnimationStart,
+						onAfterEnter: handleShow,
+						onBeforeLeave: onAnimationStart,
+						onAfterLeave: handleHide
+					}, {
+						default: withCtx(() => [withDirectives(createElementVNode("div", {
+							class: normalizeClass(`${unref(prefixCls)}-popup-wrapper`),
+							style: normalizeStyle(transformStyle.value)
+						}, [createElementVNode("div", {
+							class: normalizeClass([`${unref(prefixCls)}-content`, props.contentClass]),
+							style: normalizeStyle(props.contentStyle)
+						}, [renderSlot(_ctx.$slots, "content")], 6), props.showArrow ? (openBlock(), createElementBlock("div", {
+							key: 0,
+							ref_key: "arrowRef",
+							ref: arrowRef,
+							class: normalizeClass([`${unref(prefixCls)}-arrow`, props.arrowClass]),
+							style: normalizeStyle(arrowStyle.value)
+						}, null, 6)) : createCommentVNode("", true)], 6), [[vShow, computedVisible.value]])]),
+						_: 3
+					}, 8, ["name", "duration"])], 16)]),
+					_: 3
+				})) : createCommentVNode("", true)], 8, ["to", "disabled"]))]),
+				_: 3
+			})], 64);
+		};
+	}
+}));
+//#endregion
+export { trigger_vue_vue_type_script_setup_true_lang_default as default };