content2.mjs 7.1 KB

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