tooltip2.js 6.7 KB

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