import { defineComponent, ref, inject, computed, onBeforeUnmount, unref, watch, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, withDirectives, mergeProps, renderSlot, createCommentVNode, vShow } from 'vue';
|
import { onClickOutside } from '@vueuse/core';
|
import '../../../hooks/index.mjs';
|
import '../../../utils/index.mjs';
|
import '../../popper/index.mjs';
|
import { TOOLTIP_INJECTION_KEY } from './constants.mjs';
|
import { useTooltipContentProps } from './content.mjs';
|
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
|
import { usePopperContainerId } from '../../../hooks/use-popper-container/index.mjs';
|
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
|
import { composeEventHandlers } from '../../../utils/dom/event.mjs';
|
import ElPopperContent from '../../popper/src/content2.mjs';
|
|
const __default__ = defineComponent({
|
name: "ElTooltipContent",
|
inheritAttrs: false
|
});
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
...__default__,
|
props: useTooltipContentProps,
|
setup(__props, { expose }) {
|
const props = __props;
|
const { selector } = usePopperContainerId();
|
const ns = useNamespace("tooltip");
|
const contentRef = ref(null);
|
const destroyed = ref(false);
|
const {
|
controlled,
|
id,
|
open,
|
trigger,
|
onClose,
|
onOpen,
|
onShow,
|
onHide,
|
onBeforeShow,
|
onBeforeHide
|
} = inject(TOOLTIP_INJECTION_KEY, void 0);
|
const transitionClass = computed(() => {
|
return props.transition || `${ns.namespace.value}-fade-in-linear`;
|
});
|
const persistentRef = computed(() => {
|
if (process.env.NODE_ENV === "test") {
|
return true;
|
}
|
return props.persistent;
|
});
|
onBeforeUnmount(() => {
|
destroyed.value = true;
|
});
|
const shouldRender = computed(() => {
|
return unref(persistentRef) ? true : unref(open);
|
});
|
const shouldShow = computed(() => {
|
return props.disabled ? false : unref(open);
|
});
|
const appendTo = computed(() => {
|
return props.appendTo || selector.value;
|
});
|
const contentStyle = computed(() => {
|
var _a;
|
return (_a = props.style) != null ? _a : {};
|
});
|
const ariaHidden = computed(() => !unref(open));
|
const onTransitionLeave = () => {
|
onHide();
|
};
|
const stopWhenControlled = () => {
|
if (unref(controlled))
|
return true;
|
};
|
const onContentEnter = composeEventHandlers(stopWhenControlled, () => {
|
if (props.enterable && unref(trigger) === "hover") {
|
onOpen();
|
}
|
});
|
const onContentLeave = composeEventHandlers(stopWhenControlled, () => {
|
if (unref(trigger) === "hover") {
|
onClose();
|
}
|
});
|
const onBeforeEnter = () => {
|
var _a, _b;
|
(_b = (_a = contentRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
|
onBeforeShow == null ? void 0 : onBeforeShow();
|
};
|
const onBeforeLeave = () => {
|
onBeforeHide == null ? void 0 : onBeforeHide();
|
};
|
const onAfterShow = () => {
|
onShow();
|
stopHandle = onClickOutside(computed(() => {
|
var _a;
|
return (_a = contentRef.value) == null ? void 0 : _a.popperContentRef;
|
}), () => {
|
if (unref(controlled))
|
return;
|
const $trigger = unref(trigger);
|
if ($trigger !== "hover") {
|
onClose();
|
}
|
});
|
};
|
const onBlur = () => {
|
if (!props.virtualTriggering) {
|
onClose();
|
}
|
};
|
let stopHandle;
|
watch(() => unref(open), (val) => {
|
if (!val) {
|
stopHandle == null ? void 0 : stopHandle();
|
}
|
}, {
|
flush: "post"
|
});
|
watch(() => props.content, () => {
|
var _a, _b;
|
(_b = (_a = contentRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
|
});
|
expose({
|
contentRef
|
});
|
return (_ctx, _cache) => {
|
return openBlock(), createBlock(Teleport, {
|
disabled: !_ctx.teleported,
|
to: unref(appendTo)
|
}, [
|
createVNode(Transition, {
|
name: unref(transitionClass),
|
onAfterLeave: onTransitionLeave,
|
onBeforeEnter,
|
onAfterEnter: onAfterShow,
|
onBeforeLeave
|
}, {
|
default: withCtx(() => [
|
unref(shouldRender) ? withDirectives((openBlock(), createBlock(unref(ElPopperContent), mergeProps({
|
key: 0,
|
id: unref(id),
|
ref_key: "contentRef",
|
ref: contentRef
|
}, _ctx.$attrs, {
|
"aria-label": _ctx.ariaLabel,
|
"aria-hidden": unref(ariaHidden),
|
"boundaries-padding": _ctx.boundariesPadding,
|
"fallback-placements": _ctx.fallbackPlacements,
|
"gpu-acceleration": _ctx.gpuAcceleration,
|
offset: _ctx.offset,
|
placement: _ctx.placement,
|
"popper-options": _ctx.popperOptions,
|
strategy: _ctx.strategy,
|
effect: _ctx.effect,
|
enterable: _ctx.enterable,
|
pure: _ctx.pure,
|
"popper-class": _ctx.popperClass,
|
"popper-style": [_ctx.popperStyle, unref(contentStyle)],
|
"reference-el": _ctx.referenceEl,
|
"trigger-target-el": _ctx.triggerTargetEl,
|
visible: unref(shouldShow),
|
"z-index": _ctx.zIndex,
|
onMouseenter: unref(onContentEnter),
|
onMouseleave: unref(onContentLeave),
|
onBlur,
|
onClose: unref(onClose)
|
}), {
|
default: withCtx(() => [
|
!destroyed.value ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("v-if", true)
|
]),
|
_: 3
|
}, 16, ["id", "aria-label", "aria-hidden", "boundaries-padding", "fallback-placements", "gpu-acceleration", "offset", "placement", "popper-options", "strategy", "effect", "enterable", "pure", "popper-class", "popper-style", "reference-el", "trigger-target-el", "visible", "z-index", "onMouseenter", "onMouseleave", "onClose"])), [
|
[vShow, unref(shouldShow)]
|
]) : createCommentVNode("v-if", true)
|
]),
|
_: 3
|
}, 8, ["name"])
|
], 8, ["disabled", "to"]);
|
};
|
}
|
});
|
var ElTooltipContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/tooltip/src/content.vue"]]);
|
|
export { ElTooltipContent as default };
|
//# sourceMappingURL=content2.mjs.map
|
