tooltip2.mjs 6.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  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 { useDelayedToggle } from '../../../hooks/use-delayed-toggle/index.mjs';
  10. import ElPopperArrow from '../../popper/src/arrow2.mjs';
  11. import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
  12. import { useId } from '../../../hooks/use-id/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: (event) => {
  58. onOpen(event);
  59. },
  60. onClose: (event) => {
  61. onClose(event);
  62. },
  63. onToggle: (event) => {
  64. if (unref(open)) {
  65. onClose(event);
  66. } else {
  67. onOpen(event);
  68. }
  69. },
  70. onShow: () => {
  71. emit("show", toggleReason.value);
  72. },
  73. onHide: () => {
  74. emit("hide", toggleReason.value);
  75. },
  76. onBeforeShow: () => {
  77. emit("before-show", toggleReason.value);
  78. },
  79. onBeforeHide: () => {
  80. emit("before-hide", toggleReason.value);
  81. },
  82. updatePopper
  83. });
  84. watch(() => props.disabled, (disabled) => {
  85. if (disabled && open.value) {
  86. open.value = false;
  87. }
  88. });
  89. const isFocusInsideContent = (event) => {
  90. var _a;
  91. return (_a = contentRef.value) == null ? void 0 : _a.isFocusInsideContent(event);
  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": unref(kls),
  137. "popper-style": _ctx.popperStyle,
  138. placement: _ctx.placement,
  139. "popper-options": _ctx.popperOptions,
  140. "arrow-offset": _ctx.arrowOffset,
  141. pure: _ctx.pure,
  142. "raw-content": _ctx.rawContent,
  143. "reference-el": _ctx.referenceEl,
  144. "trigger-target-el": _ctx.triggerTargetEl,
  145. "show-after": _ctx.showAfter,
  146. strategy: _ctx.strategy,
  147. teleported: _ctx.teleported,
  148. transition: _ctx.transition,
  149. "virtual-triggering": _ctx.virtualTriggering,
  150. "z-index": _ctx.zIndex,
  151. "append-to": _ctx.appendTo
  152. }, {
  153. default: withCtx(() => [
  154. renderSlot(_ctx.$slots, "content", {}, () => [
  155. _ctx.rawContent ? (openBlock(), createElementBlock("span", {
  156. key: 0,
  157. innerHTML: _ctx.content
  158. }, null, 8, ["innerHTML"])) : (openBlock(), createElementBlock("span", { key: 1 }, toDisplayString(_ctx.content), 1))
  159. ]),
  160. _ctx.showArrow ? (openBlock(), createBlock(unref(ElPopperArrow), { key: 0 })) : createCommentVNode("v-if", true)
  161. ]),
  162. _: 3
  163. }, 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"])
  164. ]),
  165. _: 3
  166. }, 8, ["role"]);
  167. };
  168. }
  169. });
  170. var Tooltip = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "tooltip.vue"]]);
  171. export { Tooltip as default };
  172. //# sourceMappingURL=tooltip2.mjs.map