element-plus
Version:
A Component Library for Vue 3
224 lines (221 loc) • 8.01 kB
JavaScript
import { useTooltipContentProps } from './content.mjs';
import { defineComponent, ref, inject, computed, onBeforeUnmount, unref, watch, createBlock, openBlock, withCtx, createCommentVNode, Transition, withDirectives, createVNode, mergeProps, renderSlot, vShow } from 'vue';
import { computedEager, onClickOutside } from '@vueuse/core';
import '../../popper/index.mjs';
import { ElTeleport } from '../../teleport/index.mjs';
import { TOOLTIP_INJECTION_KEY } from './constants.mjs';
import { isTriggerType } from './utils.mjs';
import { usePopperContainerId } from '../../../hooks/use-popper-container/index.mjs';
import { castArray } from '../../../utils/arrays.mjs';
import _sfc_main$1 from '../../popper/src/content.vue2.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { composeEventHandlers } from '../../../utils/dom/event.mjs';
import { focusElement } from '../../../utils/dom/aria.mjs';
var _sfc_main = /* @__PURE__ */ defineComponent({
...{
name: "ElTooltipContent",
inheritAttrs: false
},
__name: "content",
props: useTooltipContentProps,
setup(__props, { expose: __expose }) {
const props = __props;
const { selector } = usePopperContainerId();
const ns = useNamespace("tooltip");
const contentRef = ref();
const popperContentRef = computedEager(() => {
var _a;
return (_a = contentRef.value) == null ? void 0 : _a.popperContentRef;
});
let stopHandle;
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") {
if (!process.env.RUN_TEST_WITH_PERSISTENT) {
return true;
}
}
return props.persistent;
});
onBeforeUnmount(() => {
stopHandle == null ? void 0 : stopHandle();
});
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 = ref(true);
const onTransitionLeave = () => {
onHide();
isFocusInsideContent() && focusElement(document.body, { preventScroll: true });
ariaHidden.value = true;
};
const stopWhenControlled = () => {
if (unref(controlled)) return true;
};
const onContentEnter = composeEventHandlers(stopWhenControlled, () => {
if (props.enterable && isTriggerType(unref(trigger), "hover")) {
onOpen();
}
});
const onContentLeave = composeEventHandlers(stopWhenControlled, () => {
if (isTriggerType(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();
};
const onBlur = () => {
if (!props.virtualTriggering) {
onClose();
}
};
const isFocusInsideContent = (event) => {
var _a;
const popperContent = (_a = contentRef.value) == null ? void 0 : _a.popperContentRef;
const activeElement = (event == null ? void 0 : event.relatedTarget) || document.activeElement;
return popperContent == null ? void 0 : popperContent.contains(activeElement);
};
watch(
() => unref(open),
(val) => {
if (!val) {
stopHandle == null ? void 0 : stopHandle();
} else {
ariaHidden.value = false;
stopHandle = onClickOutside(
popperContentRef,
() => {
if (unref(controlled)) return;
const needClose = castArray(unref(trigger)).every((item) => {
return item !== "hover" && item !== "focus";
});
if (needClose) {
onClose();
}
},
{ detectIframe: true }
);
}
},
{
flush: "post"
}
);
watch(
() => props.content,
() => {
var _a, _b;
(_b = (_a = contentRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
}
);
__expose({
/**
* @description el-popper-content component instance
*/
contentRef,
/**
* @description validate current focus event is trigger inside el-popper-content
*/
isFocusInsideContent
});
return (_ctx, _cache) => {
return openBlock(), createBlock(unref(ElTeleport), {
disabled: !__props.teleported,
to: appendTo.value
}, {
default: withCtx(() => [
shouldRender.value || !ariaHidden.value ? (openBlock(), createBlock(Transition, {
key: 0,
name: transitionClass.value,
appear: !persistentRef.value,
onAfterLeave: onTransitionLeave,
onBeforeEnter,
onAfterEnter: onAfterShow,
onBeforeLeave,
persisted: ""
}, {
default: withCtx(() => [
withDirectives(createVNode(unref(_sfc_main$1), mergeProps({
id: unref(id),
ref_key: "contentRef",
ref: contentRef
}, _ctx.$attrs, {
"aria-label": __props.ariaLabel,
"aria-hidden": ariaHidden.value,
"boundaries-padding": __props.boundariesPadding,
"fallback-placements": __props.fallbackPlacements,
"gpu-acceleration": __props.gpuAcceleration,
offset: __props.offset,
placement: __props.placement,
"popper-options": __props.popperOptions,
"arrow-offset": __props.arrowOffset,
strategy: __props.strategy,
effect: __props.effect,
enterable: __props.enterable,
pure: __props.pure,
"popper-class": __props.popperClass,
"popper-style": [__props.popperStyle, contentStyle.value],
"reference-el": __props.referenceEl,
"trigger-target-el": __props.triggerTargetEl,
visible: shouldShow.value,
"z-index": __props.zIndex,
loop: __props.loop,
onMouseenter: unref(onContentEnter),
onMouseleave: unref(onContentLeave),
onBlur,
onClose: unref(onClose)
}), {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
/* FORWARDED */
}, 16, ["id", "aria-label", "aria-hidden", "boundaries-padding", "fallback-placements", "gpu-acceleration", "offset", "placement", "popper-options", "arrow-offset", "strategy", "effect", "enterable", "pure", "popper-class", "popper-style", "reference-el", "trigger-target-el", "visible", "z-index", "loop", "onMouseenter", "onMouseleave", "onClose"]), [
[vShow, shouldShow.value]
])
]),
_: 3
/* FORWARDED */
}, 8, ["name", "appear"])) : createCommentVNode("v-if", true)
]),
_: 3
/* FORWARDED */
}, 8, ["disabled", "to"]);
};
}
});
export { _sfc_main as default };
//# sourceMappingURL=content.vue2.mjs.map