1
This commit is contained in:
200
admin/node_modules/element-plus/es/components/tooltip/src/content2.mjs
generated
vendored
Normal file
200
admin/node_modules/element-plus/es/components/tooltip/src/content2.mjs
generated
vendored
Normal file
@@ -0,0 +1,200 @@
|
||||
import { defineComponent, ref, inject, computed, onBeforeUnmount, unref, watch, openBlock, createBlock, withCtx, Transition, withDirectives, createVNode, mergeProps, renderSlot, vShow, createCommentVNode } 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 { useTooltipContentProps } from './content.mjs';
|
||||
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
|
||||
import { usePopperContainerId } from '../../../hooks/use-popper-container/index.mjs';
|
||||
import { castArray } from '../../../utils/arrays.mjs';
|
||||
import ElPopperContent from '../../popper/src/content2.mjs';
|
||||
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
|
||||
import { focusElement } from '../../../utils/dom/aria.mjs';
|
||||
import { composeEventHandlers } from '../../../utils/dom/event.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();
|
||||
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(() => {
|
||||
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 && 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();
|
||||
};
|
||||
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();
|
||||
}
|
||||
});
|
||||
}
|
||||
}, {
|
||||
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,
|
||||
isFocusInsideContent
|
||||
});
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createBlock(unref(ElTeleport), {
|
||||
disabled: !_ctx.teleported,
|
||||
to: unref(appendTo)
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
unref(shouldRender) || !ariaHidden.value ? (openBlock(), createBlock(Transition, {
|
||||
key: 0,
|
||||
name: unref(transitionClass),
|
||||
appear: !unref(persistentRef),
|
||||
onAfterLeave: onTransitionLeave,
|
||||
onBeforeEnter,
|
||||
onAfterEnter: onAfterShow,
|
||||
onBeforeLeave,
|
||||
persisted: ""
|
||||
}, {
|
||||
default: withCtx(() => [
|
||||
withDirectives(createVNode(unref(ElPopperContent), mergeProps({
|
||||
id: unref(id),
|
||||
ref_key: "contentRef",
|
||||
ref: contentRef
|
||||
}, _ctx.$attrs, {
|
||||
"aria-label": _ctx.ariaLabel,
|
||||
"aria-hidden": ariaHidden.value,
|
||||
"boundaries-padding": _ctx.boundariesPadding,
|
||||
"fallback-placements": _ctx.fallbackPlacements,
|
||||
"gpu-acceleration": _ctx.gpuAcceleration,
|
||||
offset: _ctx.offset,
|
||||
placement: _ctx.placement,
|
||||
"popper-options": _ctx.popperOptions,
|
||||
"arrow-offset": _ctx.arrowOffset,
|
||||
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(() => [
|
||||
renderSlot(_ctx.$slots, "default")
|
||||
]),
|
||||
_: 3
|
||||
}, 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", "onMouseenter", "onMouseleave", "onClose"]), [
|
||||
[vShow, unref(shouldShow)]
|
||||
])
|
||||
]),
|
||||
_: 3
|
||||
}, 8, ["name", "appear"])) : createCommentVNode("v-if", true)
|
||||
]),
|
||||
_: 3
|
||||
}, 8, ["disabled", "to"]);
|
||||
};
|
||||
}
|
||||
});
|
||||
var ElTooltipContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "content.vue"]]);
|
||||
|
||||
export { ElTooltipContent as default };
|
||||
//# sourceMappingURL=content2.mjs.map
|
||||
Reference in New Issue
Block a user