6ba64e3b3ddf604819ab5bfb0d5d1424545dd0f6dca8be0be4cfbf2ca7abed5fefcc2e64a529fdaaab762854c33e04c7794a654ed8704df576a9fbb0508ca5 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200
  1. import { defineComponent, ref, inject, computed, onBeforeUnmount, unref, watch, openBlock, createBlock, withCtx, Transition, withDirectives, createVNode, mergeProps, renderSlot, vShow, createCommentVNode } from 'vue';
  2. import { computedEager, onClickOutside } from '@vueuse/core';
  3. import '../../popper/index.mjs';
  4. import { ElTeleport } from '../../teleport/index.mjs';
  5. import { TOOLTIP_INJECTION_KEY } from './constants.mjs';
  6. import { useTooltipContentProps } from './content.mjs';
  7. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  8. import { usePopperContainerId } from '../../../hooks/use-popper-container/index.mjs';
  9. import { castArray } from '../../../utils/arrays.mjs';
  10. import ElPopperContent from '../../popper/src/content2.mjs';
  11. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  12. import { focusElement } from '../../../utils/dom/aria.mjs';
  13. import { composeEventHandlers } from '../../../utils/dom/event.mjs';
  14. const __default__ = defineComponent({
  15. name: "ElTooltipContent",
  16. inheritAttrs: false
  17. });
  18. const _sfc_main = /* @__PURE__ */ defineComponent({
  19. ...__default__,
  20. props: useTooltipContentProps,
  21. setup(__props, { expose }) {
  22. const props = __props;
  23. const { selector } = usePopperContainerId();
  24. const ns = useNamespace("tooltip");
  25. const contentRef = ref();
  26. const popperContentRef = computedEager(() => {
  27. var _a;
  28. return (_a = contentRef.value) == null ? void 0 : _a.popperContentRef;
  29. });
  30. let stopHandle;
  31. const {
  32. controlled,
  33. id,
  34. open,
  35. trigger,
  36. onClose,
  37. onOpen,
  38. onShow,
  39. onHide,
  40. onBeforeShow,
  41. onBeforeHide
  42. } = inject(TOOLTIP_INJECTION_KEY, void 0);
  43. const transitionClass = computed(() => {
  44. return props.transition || `${ns.namespace.value}-fade-in-linear`;
  45. });
  46. const persistentRef = computed(() => {
  47. return props.persistent;
  48. });
  49. onBeforeUnmount(() => {
  50. stopHandle == null ? void 0 : stopHandle();
  51. });
  52. const shouldRender = computed(() => {
  53. return unref(persistentRef) ? true : unref(open);
  54. });
  55. const shouldShow = computed(() => {
  56. return props.disabled ? false : unref(open);
  57. });
  58. const appendTo = computed(() => {
  59. return props.appendTo || selector.value;
  60. });
  61. const contentStyle = computed(() => {
  62. var _a;
  63. return (_a = props.style) != null ? _a : {};
  64. });
  65. const ariaHidden = ref(true);
  66. const onTransitionLeave = () => {
  67. onHide();
  68. isFocusInsideContent() && focusElement(document.body, { preventScroll: true });
  69. ariaHidden.value = true;
  70. };
  71. const stopWhenControlled = () => {
  72. if (unref(controlled))
  73. return true;
  74. };
  75. const onContentEnter = composeEventHandlers(stopWhenControlled, () => {
  76. if (props.enterable && unref(trigger) === "hover") {
  77. onOpen();
  78. }
  79. });
  80. const onContentLeave = composeEventHandlers(stopWhenControlled, () => {
  81. if (unref(trigger) === "hover") {
  82. onClose();
  83. }
  84. });
  85. const onBeforeEnter = () => {
  86. var _a, _b;
  87. (_b = (_a = contentRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
  88. onBeforeShow == null ? void 0 : onBeforeShow();
  89. };
  90. const onBeforeLeave = () => {
  91. onBeforeHide == null ? void 0 : onBeforeHide();
  92. };
  93. const onAfterShow = () => {
  94. onShow();
  95. };
  96. const onBlur = () => {
  97. if (!props.virtualTriggering) {
  98. onClose();
  99. }
  100. };
  101. const isFocusInsideContent = (event) => {
  102. var _a;
  103. const popperContent = (_a = contentRef.value) == null ? void 0 : _a.popperContentRef;
  104. const activeElement = (event == null ? void 0 : event.relatedTarget) || document.activeElement;
  105. return popperContent == null ? void 0 : popperContent.contains(activeElement);
  106. };
  107. watch(() => unref(open), (val) => {
  108. if (!val) {
  109. stopHandle == null ? void 0 : stopHandle();
  110. } else {
  111. ariaHidden.value = false;
  112. stopHandle = onClickOutside(popperContentRef, () => {
  113. if (unref(controlled))
  114. return;
  115. const needClose = castArray(unref(trigger)).every((item) => {
  116. return item !== "hover" && item !== "focus";
  117. });
  118. if (needClose) {
  119. onClose();
  120. }
  121. });
  122. }
  123. }, {
  124. flush: "post"
  125. });
  126. watch(() => props.content, () => {
  127. var _a, _b;
  128. (_b = (_a = contentRef.value) == null ? void 0 : _a.updatePopper) == null ? void 0 : _b.call(_a);
  129. });
  130. expose({
  131. contentRef,
  132. isFocusInsideContent
  133. });
  134. return (_ctx, _cache) => {
  135. return openBlock(), createBlock(unref(ElTeleport), {
  136. disabled: !_ctx.teleported,
  137. to: unref(appendTo)
  138. }, {
  139. default: withCtx(() => [
  140. unref(shouldRender) || !ariaHidden.value ? (openBlock(), createBlock(Transition, {
  141. key: 0,
  142. name: unref(transitionClass),
  143. appear: !unref(persistentRef),
  144. onAfterLeave: onTransitionLeave,
  145. onBeforeEnter,
  146. onAfterEnter: onAfterShow,
  147. onBeforeLeave,
  148. persisted: ""
  149. }, {
  150. default: withCtx(() => [
  151. withDirectives(createVNode(unref(ElPopperContent), mergeProps({
  152. id: unref(id),
  153. ref_key: "contentRef",
  154. ref: contentRef
  155. }, _ctx.$attrs, {
  156. "aria-label": _ctx.ariaLabel,
  157. "aria-hidden": ariaHidden.value,
  158. "boundaries-padding": _ctx.boundariesPadding,
  159. "fallback-placements": _ctx.fallbackPlacements,
  160. "gpu-acceleration": _ctx.gpuAcceleration,
  161. offset: _ctx.offset,
  162. placement: _ctx.placement,
  163. "popper-options": _ctx.popperOptions,
  164. "arrow-offset": _ctx.arrowOffset,
  165. strategy: _ctx.strategy,
  166. effect: _ctx.effect,
  167. enterable: _ctx.enterable,
  168. pure: _ctx.pure,
  169. "popper-class": _ctx.popperClass,
  170. "popper-style": [_ctx.popperStyle, unref(contentStyle)],
  171. "reference-el": _ctx.referenceEl,
  172. "trigger-target-el": _ctx.triggerTargetEl,
  173. visible: unref(shouldShow),
  174. "z-index": _ctx.zIndex,
  175. onMouseenter: unref(onContentEnter),
  176. onMouseleave: unref(onContentLeave),
  177. onBlur,
  178. onClose: unref(onClose)
  179. }), {
  180. default: withCtx(() => [
  181. renderSlot(_ctx.$slots, "default")
  182. ]),
  183. _: 3
  184. }, 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"]), [
  185. [vShow, unref(shouldShow)]
  186. ])
  187. ]),
  188. _: 3
  189. }, 8, ["name", "appear"])) : createCommentVNode("v-if", true)
  190. ]),
  191. _: 3
  192. }, 8, ["disabled", "to"]);
  193. };
  194. }
  195. });
  196. var ElTooltipContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "content.vue"]]);
  197. export { ElTooltipContent as default };
  198. //# sourceMappingURL=content2.mjs.map