90ff6d4b2872bcadd15d9ac4a2ee272cfa5d00528cd85dfda97c9c8b27a8774bbbbe8c3408983817e3770b5137d10642e12e56072f9323ffd64b8a2764aa54 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135
  1. import { defineComponent, inject, provide, onMounted, watch, unref, onBeforeUnmount, openBlock, createElementBlock, mergeProps, createVNode, withCtx, renderSlot } from 'vue';
  2. import { isNil } from 'lodash-unified';
  3. import ElFocusTrap from '../../focus-trap/src/focus-trap.mjs';
  4. import { POPPER_CONTENT_INJECTION_KEY } from './constants.mjs';
  5. import { popperContentProps, popperContentEmits } from './content.mjs';
  6. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  7. import { usePopperContentFocusTrap } from './composables/use-focus-trap.mjs';
  8. import { usePopperContent } from './composables/use-content.mjs';
  9. import { usePopperContentDOM } from './composables/use-content-dom.mjs';
  10. import { formItemContextKey } from '../../form/src/constants.mjs';
  11. import { NOOP } from '@vue/shared';
  12. import { isElement } from '../../../utils/types.mjs';
  13. const __default__ = defineComponent({
  14. name: "ElPopperContent"
  15. });
  16. const _sfc_main = /* @__PURE__ */ defineComponent({
  17. ...__default__,
  18. props: popperContentProps,
  19. emits: popperContentEmits,
  20. setup(__props, { expose, emit }) {
  21. const props = __props;
  22. const {
  23. focusStartRef,
  24. trapped,
  25. onFocusAfterReleased,
  26. onFocusAfterTrapped,
  27. onFocusInTrap,
  28. onFocusoutPrevented,
  29. onReleaseRequested
  30. } = usePopperContentFocusTrap(props, emit);
  31. const { attributes, arrowRef, contentRef, styles, instanceRef, role, update } = usePopperContent(props);
  32. const {
  33. ariaModal,
  34. arrowStyle,
  35. contentAttrs,
  36. contentClass,
  37. contentStyle,
  38. updateZIndex
  39. } = usePopperContentDOM(props, {
  40. styles,
  41. attributes,
  42. role
  43. });
  44. const formItemContext = inject(formItemContextKey, void 0);
  45. provide(POPPER_CONTENT_INJECTION_KEY, {
  46. arrowStyle,
  47. arrowRef
  48. });
  49. if (formItemContext) {
  50. provide(formItemContextKey, {
  51. ...formItemContext,
  52. addInputId: NOOP,
  53. removeInputId: NOOP
  54. });
  55. }
  56. let triggerTargetAriaStopWatch = void 0;
  57. const updatePopper = (shouldUpdateZIndex = true) => {
  58. update();
  59. shouldUpdateZIndex && updateZIndex();
  60. };
  61. const togglePopperAlive = () => {
  62. updatePopper(false);
  63. if (props.visible && props.focusOnShow) {
  64. trapped.value = true;
  65. } else if (props.visible === false) {
  66. trapped.value = false;
  67. }
  68. };
  69. onMounted(() => {
  70. watch(() => props.triggerTargetEl, (triggerTargetEl, prevTriggerTargetEl) => {
  71. triggerTargetAriaStopWatch == null ? void 0 : triggerTargetAriaStopWatch();
  72. triggerTargetAriaStopWatch = void 0;
  73. const el = unref(triggerTargetEl || contentRef.value);
  74. const prevEl = unref(prevTriggerTargetEl || contentRef.value);
  75. if (isElement(el)) {
  76. triggerTargetAriaStopWatch = watch([role, () => props.ariaLabel, ariaModal, () => props.id], (watches) => {
  77. ["role", "aria-label", "aria-modal", "id"].forEach((key, idx) => {
  78. isNil(watches[idx]) ? el.removeAttribute(key) : el.setAttribute(key, watches[idx]);
  79. });
  80. }, { immediate: true });
  81. }
  82. if (prevEl !== el && isElement(prevEl)) {
  83. ["role", "aria-label", "aria-modal", "id"].forEach((key) => {
  84. prevEl.removeAttribute(key);
  85. });
  86. }
  87. }, { immediate: true });
  88. watch(() => props.visible, togglePopperAlive, { immediate: true });
  89. });
  90. onBeforeUnmount(() => {
  91. triggerTargetAriaStopWatch == null ? void 0 : triggerTargetAriaStopWatch();
  92. triggerTargetAriaStopWatch = void 0;
  93. });
  94. expose({
  95. popperContentRef: contentRef,
  96. popperInstanceRef: instanceRef,
  97. updatePopper,
  98. contentStyle
  99. });
  100. return (_ctx, _cache) => {
  101. return openBlock(), createElementBlock("div", mergeProps({
  102. ref_key: "contentRef",
  103. ref: contentRef
  104. }, unref(contentAttrs), {
  105. style: unref(contentStyle),
  106. class: unref(contentClass),
  107. tabindex: "-1",
  108. onMouseenter: (e) => _ctx.$emit("mouseenter", e),
  109. onMouseleave: (e) => _ctx.$emit("mouseleave", e)
  110. }), [
  111. createVNode(unref(ElFocusTrap), {
  112. trapped: unref(trapped),
  113. "trap-on-focus-in": true,
  114. "focus-trap-el": unref(contentRef),
  115. "focus-start-el": unref(focusStartRef),
  116. onFocusAfterTrapped: unref(onFocusAfterTrapped),
  117. onFocusAfterReleased: unref(onFocusAfterReleased),
  118. onFocusin: unref(onFocusInTrap),
  119. onFocusoutPrevented: unref(onFocusoutPrevented),
  120. onReleaseRequested: unref(onReleaseRequested)
  121. }, {
  122. default: withCtx(() => [
  123. renderSlot(_ctx.$slots, "default")
  124. ]),
  125. _: 3
  126. }, 8, ["trapped", "focus-trap-el", "focus-start-el", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusin", "onFocusoutPrevented", "onReleaseRequested"])
  127. ], 16, ["onMouseenter", "onMouseleave"]);
  128. };
  129. }
  130. });
  131. var ElPopperContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "content.vue"]]);
  132. export { ElPopperContent as default };
  133. //# sourceMappingURL=content2.mjs.map