content2.js 7.2 KB

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