4cb0d44782c408f95e1eab513b0533da64ef67b185f15942e1e084cabcbec0e49c3ab3234bd4d796e9945a821c75f9753a1ce2ca7f0c5580d41f50908868a8 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var dom = require('@floating-ui/dom');
  5. var visualHidden = require('../../visual-hidden/src/visual-hidden2.js');
  6. var constants = require('./constants.js');
  7. var content = require('./content.js');
  8. var common = require('./common.js');
  9. var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');
  10. var index = require('../../../hooks/use-floating/index.js');
  11. var index$1 = require('../../../hooks/use-z-index/index.js');
  12. var index$2 = require('../../../hooks/use-namespace/index.js');
  13. const __default__ = vue.defineComponent({
  14. name: "ElTooltipV2Content"
  15. });
  16. const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  17. ...__default__,
  18. props: { ...content.tooltipV2ContentProps, ...common.tooltipV2CommonProps },
  19. setup(__props) {
  20. const props = __props;
  21. const { triggerRef, contentId } = vue.inject(constants.tooltipV2RootKey);
  22. const placement = vue.ref(props.placement);
  23. const strategy = vue.ref(props.strategy);
  24. const arrowRef = vue.ref(null);
  25. const { referenceRef, contentRef, middlewareData, x, y, update } = index.useFloating({
  26. placement,
  27. strategy,
  28. middleware: vue.computed(() => {
  29. const middleware = [dom.offset(props.offset)];
  30. if (props.showArrow) {
  31. middleware.push(index.arrowMiddleware({
  32. arrowRef
  33. }));
  34. }
  35. return middleware;
  36. })
  37. });
  38. const zIndex = index$1.useZIndex().nextZIndex();
  39. const ns = index$2.useNamespace("tooltip-v2");
  40. const side = vue.computed(() => {
  41. return placement.value.split("-")[0];
  42. });
  43. const contentStyle = vue.computed(() => {
  44. return {
  45. position: vue.unref(strategy),
  46. top: `${vue.unref(y) || 0}px`,
  47. left: `${vue.unref(x) || 0}px`,
  48. zIndex
  49. };
  50. });
  51. const arrowStyle = vue.computed(() => {
  52. if (!props.showArrow)
  53. return {};
  54. const { arrow } = vue.unref(middlewareData);
  55. return {
  56. [`--${ns.namespace.value}-tooltip-v2-arrow-x`]: `${arrow == null ? void 0 : arrow.x}px` || "",
  57. [`--${ns.namespace.value}-tooltip-v2-arrow-y`]: `${arrow == null ? void 0 : arrow.y}px` || ""
  58. };
  59. });
  60. const contentClass = vue.computed(() => [
  61. ns.e("content"),
  62. ns.is("dark", props.effect === "dark"),
  63. ns.is(vue.unref(strategy)),
  64. props.contentClass
  65. ]);
  66. vue.watch(arrowRef, () => update());
  67. vue.watch(() => props.placement, (val) => placement.value = val);
  68. vue.onMounted(() => {
  69. vue.watch(() => props.reference || triggerRef.value, (el) => {
  70. referenceRef.value = el || void 0;
  71. }, {
  72. immediate: true
  73. });
  74. });
  75. vue.provide(constants.tooltipV2ContentKey, { arrowRef });
  76. return (_ctx, _cache) => {
  77. return vue.openBlock(), vue.createElementBlock("div", {
  78. ref_key: "contentRef",
  79. ref: contentRef,
  80. style: vue.normalizeStyle(vue.unref(contentStyle)),
  81. "data-tooltip-v2-root": ""
  82. }, [
  83. !_ctx.nowrap ? (vue.openBlock(), vue.createElementBlock("div", {
  84. key: 0,
  85. "data-side": vue.unref(side),
  86. class: vue.normalizeClass(vue.unref(contentClass))
  87. }, [
  88. vue.renderSlot(_ctx.$slots, "default", {
  89. contentStyle: vue.unref(contentStyle),
  90. contentClass: vue.unref(contentClass)
  91. }),
  92. vue.createVNode(vue.unref(visualHidden["default"]), {
  93. id: vue.unref(contentId),
  94. role: "tooltip"
  95. }, {
  96. default: vue.withCtx(() => [
  97. _ctx.ariaLabel ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
  98. vue.createTextVNode(vue.toDisplayString(_ctx.ariaLabel), 1)
  99. ], 64)) : vue.renderSlot(_ctx.$slots, "default", { key: 1 })
  100. ]),
  101. _: 3
  102. }, 8, ["id"]),
  103. vue.renderSlot(_ctx.$slots, "arrow", {
  104. style: vue.normalizeStyle(vue.unref(arrowStyle)),
  105. side: vue.unref(side)
  106. })
  107. ], 10, ["data-side"])) : vue.createCommentVNode("v-if", true)
  108. ], 4);
  109. };
  110. }
  111. });
  112. var TooltipV2Content = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "content.vue"]]);
  113. exports["default"] = TooltipV2Content;
  114. //# sourceMappingURL=content2.js.map