723d40c5e1a8e716332289983c489bf713e36bfae854b3ae6222fe6e36d2678fa35404d8366e5885e7914a4a34859d599d7e9a6ee9919d949942f60c22ffad 6.5 KB

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