content2.js 5.2 KB

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