tooltip2.mjs 6.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176
  1. import { defineComponent, ref, unref, toRef, computed, provide, readonly, watch, onDeactivated, openBlock, createBlock, withCtx, createVNode, renderSlot, createCommentVNode, createElementBlock, toDisplayString } from 'vue';
  2. import { ElPopper } from '../../popper/index.mjs';
  3. import '../../../utils/index.mjs';
  4. import '../../../hooks/index.mjs';
  5. import '../../../tokens/index.mjs';
  6. import { useTooltipProps, tooltipEmits, useTooltipModelToggle } from './tooltip.mjs';
  7. import ElTooltipTrigger from './trigger2.mjs';
  8. import ElTooltipContent from './content2.mjs';
  9. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  10. import { usePopperContainer } from '../../../hooks/use-popper-container/index.mjs';
  11. import { useId } from '../../../hooks/use-id/index.mjs';
  12. import { useDelayedToggle } from '../../../hooks/use-delayed-toggle/index.mjs';
  13. import { isBoolean } from '@vueuse/core';
  14. import { TOOLTIP_INJECTION_KEY } from '../../../tokens/tooltip.mjs';
  15. import ElPopperArrow from '../../popper/src/arrow2.mjs';
  16. const _hoisted_1 = ["innerHTML"];
  17. const _hoisted_2 = { key: 1 };
  18. const __default__ = defineComponent({
  19. name: "ElTooltip"
  20. });
  21. const _sfc_main = /* @__PURE__ */ defineComponent({
  22. ...__default__,
  23. props: useTooltipProps,
  24. emits: tooltipEmits,
  25. setup(__props, { expose, emit }) {
  26. const props = __props;
  27. usePopperContainer();
  28. const id = useId();
  29. const popperRef = ref();
  30. const contentRef = ref();
  31. const updatePopper = () => {
  32. var _a;
  33. const popperComponent = unref(popperRef);
  34. if (popperComponent) {
  35. (_a = popperComponent.popperInstanceRef) == null ? void 0 : _a.update();
  36. }
  37. };
  38. const open = ref(false);
  39. const toggleReason = ref();
  40. const { show, hide, hasUpdateHandler } = useTooltipModelToggle({
  41. indicator: open,
  42. toggleReason
  43. });
  44. const { onOpen, onClose } = useDelayedToggle({
  45. showAfter: toRef(props, "showAfter"),
  46. hideAfter: toRef(props, "hideAfter"),
  47. open: show,
  48. close: hide
  49. });
  50. const controlled = computed(() => isBoolean(props.visible) && !hasUpdateHandler.value);
  51. provide(TOOLTIP_INJECTION_KEY, {
  52. controlled,
  53. id,
  54. open: readonly(open),
  55. trigger: toRef(props, "trigger"),
  56. onOpen: (event) => {
  57. onOpen(event);
  58. },
  59. onClose: (event) => {
  60. onClose(event);
  61. },
  62. onToggle: (event) => {
  63. if (unref(open)) {
  64. onClose(event);
  65. } else {
  66. onOpen(event);
  67. }
  68. },
  69. onShow: () => {
  70. emit("show", toggleReason.value);
  71. },
  72. onHide: () => {
  73. emit("hide", toggleReason.value);
  74. },
  75. onBeforeShow: () => {
  76. emit("before-show", toggleReason.value);
  77. },
  78. onBeforeHide: () => {
  79. emit("before-hide", toggleReason.value);
  80. },
  81. updatePopper
  82. });
  83. watch(() => props.disabled, (disabled) => {
  84. if (disabled && open.value) {
  85. open.value = false;
  86. }
  87. });
  88. const isFocusInsideContent = () => {
  89. var _a, _b;
  90. const popperContent = (_b = (_a = contentRef.value) == null ? void 0 : _a.contentRef) == null ? void 0 : _b.popperContentRef;
  91. return popperContent && popperContent.contains(document.activeElement);
  92. };
  93. onDeactivated(() => open.value && hide());
  94. expose({
  95. popperRef,
  96. contentRef,
  97. isFocusInsideContent,
  98. updatePopper,
  99. onOpen,
  100. onClose,
  101. hide
  102. });
  103. return (_ctx, _cache) => {
  104. return openBlock(), createBlock(unref(ElPopper), {
  105. ref_key: "popperRef",
  106. ref: popperRef,
  107. role: _ctx.role
  108. }, {
  109. default: withCtx(() => [
  110. createVNode(ElTooltipTrigger, {
  111. disabled: _ctx.disabled,
  112. trigger: _ctx.trigger,
  113. "trigger-keys": _ctx.triggerKeys,
  114. "virtual-ref": _ctx.virtualRef,
  115. "virtual-triggering": _ctx.virtualTriggering
  116. }, {
  117. default: withCtx(() => [
  118. _ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("v-if", true)
  119. ]),
  120. _: 3
  121. }, 8, ["disabled", "trigger", "trigger-keys", "virtual-ref", "virtual-triggering"]),
  122. createVNode(ElTooltipContent, {
  123. ref_key: "contentRef",
  124. ref: contentRef,
  125. "aria-label": _ctx.ariaLabel,
  126. "boundaries-padding": _ctx.boundariesPadding,
  127. content: _ctx.content,
  128. disabled: _ctx.disabled,
  129. effect: _ctx.effect,
  130. enterable: _ctx.enterable,
  131. "fallback-placements": _ctx.fallbackPlacements,
  132. "hide-after": _ctx.hideAfter,
  133. "gpu-acceleration": _ctx.gpuAcceleration,
  134. offset: _ctx.offset,
  135. persistent: _ctx.persistent,
  136. "popper-class": _ctx.popperClass,
  137. "popper-style": _ctx.popperStyle,
  138. placement: _ctx.placement,
  139. "popper-options": _ctx.popperOptions,
  140. pure: _ctx.pure,
  141. "raw-content": _ctx.rawContent,
  142. "reference-el": _ctx.referenceEl,
  143. "trigger-target-el": _ctx.triggerTargetEl,
  144. "show-after": _ctx.showAfter,
  145. strategy: _ctx.strategy,
  146. teleported: _ctx.teleported,
  147. transition: _ctx.transition,
  148. "virtual-triggering": _ctx.virtualTriggering,
  149. "z-index": _ctx.zIndex,
  150. "append-to": _ctx.appendTo
  151. }, {
  152. default: withCtx(() => [
  153. renderSlot(_ctx.$slots, "content", {}, () => [
  154. _ctx.rawContent ? (openBlock(), createElementBlock("span", {
  155. key: 0,
  156. innerHTML: _ctx.content
  157. }, null, 8, _hoisted_1)) : (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(_ctx.content), 1))
  158. ]),
  159. _ctx.showArrow ? (openBlock(), createBlock(unref(ElPopperArrow), {
  160. key: 0,
  161. "arrow-offset": _ctx.arrowOffset
  162. }, null, 8, ["arrow-offset"])) : createCommentVNode("v-if", true)
  163. ]),
  164. _: 3
  165. }, 8, ["aria-label", "boundaries-padding", "content", "disabled", "effect", "enterable", "fallback-placements", "hide-after", "gpu-acceleration", "offset", "persistent", "popper-class", "popper-style", "placement", "popper-options", "pure", "raw-content", "reference-el", "trigger-target-el", "show-after", "strategy", "teleported", "transition", "virtual-triggering", "z-index", "append-to"])
  166. ]),
  167. _: 3
  168. }, 8, ["role"]);
  169. };
  170. }
  171. });
  172. var Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/tooltip/src/tooltip.vue"]]);
  173. export { Tooltip as default };
  174. //# sourceMappingURL=tooltip2.mjs.map