trigger2.mjs 4.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. import { defineComponent, inject, computed, onMounted, watch, onBeforeUnmount, openBlock, createBlock, unref, mergeProps, withCtx, renderSlot, createCommentVNode } from 'vue';
  2. import { isNil } from 'lodash-unified';
  3. import { unrefElement } from '@vueuse/core';
  4. import { POPPER_INJECTION_KEY } from './constants.mjs';
  5. import { popperTriggerProps } from './trigger.mjs';
  6. import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
  7. import { useForwardRef } from '../../../hooks/use-forward-ref/index.mjs';
  8. import { isFocusable } from '../../../utils/dom/aria.mjs';
  9. import { OnlyChild } from '../../slot/src/only-child.mjs';
  10. import { isElement } from '../../../utils/types.mjs';
  11. const __default__ = defineComponent({
  12. name: "ElPopperTrigger",
  13. inheritAttrs: false
  14. });
  15. const _sfc_main = /* @__PURE__ */ defineComponent({
  16. ...__default__,
  17. props: popperTriggerProps,
  18. setup(__props, { expose }) {
  19. const props = __props;
  20. const { role, triggerRef } = inject(POPPER_INJECTION_KEY, void 0);
  21. useForwardRef(triggerRef);
  22. const ariaControls = computed(() => {
  23. return ariaHaspopup.value ? props.id : void 0;
  24. });
  25. const ariaDescribedby = computed(() => {
  26. if (role && role.value === "tooltip") {
  27. return props.open && props.id ? props.id : void 0;
  28. }
  29. return void 0;
  30. });
  31. const ariaHaspopup = computed(() => {
  32. if (role && role.value !== "tooltip") {
  33. return role.value;
  34. }
  35. return void 0;
  36. });
  37. const ariaExpanded = computed(() => {
  38. return ariaHaspopup.value ? `${props.open}` : void 0;
  39. });
  40. let virtualTriggerAriaStopWatch = void 0;
  41. const TRIGGER_ELE_EVENTS = [
  42. "onMouseenter",
  43. "onMouseleave",
  44. "onClick",
  45. "onKeydown",
  46. "onFocus",
  47. "onBlur",
  48. "onContextmenu"
  49. ];
  50. onMounted(() => {
  51. watch(() => props.virtualRef, (virtualEl) => {
  52. if (virtualEl) {
  53. triggerRef.value = unrefElement(virtualEl);
  54. }
  55. }, {
  56. immediate: true
  57. });
  58. watch(triggerRef, (el, prevEl) => {
  59. virtualTriggerAriaStopWatch == null ? void 0 : virtualTriggerAriaStopWatch();
  60. virtualTriggerAriaStopWatch = void 0;
  61. if (isElement(el)) {
  62. TRIGGER_ELE_EVENTS.forEach((eventName) => {
  63. var _a;
  64. const handler = props[eventName];
  65. if (handler) {
  66. el.addEventListener(eventName.slice(2).toLowerCase(), handler);
  67. (_a = prevEl == null ? void 0 : prevEl.removeEventListener) == null ? void 0 : _a.call(prevEl, eventName.slice(2).toLowerCase(), handler);
  68. }
  69. });
  70. if (isFocusable(el)) {
  71. virtualTriggerAriaStopWatch = watch([ariaControls, ariaDescribedby, ariaHaspopup, ariaExpanded], (watches) => {
  72. [
  73. "aria-controls",
  74. "aria-describedby",
  75. "aria-haspopup",
  76. "aria-expanded"
  77. ].forEach((key, idx) => {
  78. isNil(watches[idx]) ? el.removeAttribute(key) : el.setAttribute(key, watches[idx]);
  79. });
  80. }, { immediate: true });
  81. }
  82. }
  83. if (isElement(prevEl) && isFocusable(prevEl)) {
  84. [
  85. "aria-controls",
  86. "aria-describedby",
  87. "aria-haspopup",
  88. "aria-expanded"
  89. ].forEach((key) => prevEl.removeAttribute(key));
  90. }
  91. }, {
  92. immediate: true
  93. });
  94. });
  95. onBeforeUnmount(() => {
  96. virtualTriggerAriaStopWatch == null ? void 0 : virtualTriggerAriaStopWatch();
  97. virtualTriggerAriaStopWatch = void 0;
  98. if (triggerRef.value && isElement(triggerRef.value)) {
  99. const el = triggerRef.value;
  100. TRIGGER_ELE_EVENTS.forEach((eventName) => {
  101. const handler = props[eventName];
  102. if (handler) {
  103. el.removeEventListener(eventName.slice(2).toLowerCase(), handler);
  104. }
  105. });
  106. triggerRef.value = void 0;
  107. }
  108. });
  109. expose({
  110. triggerRef
  111. });
  112. return (_ctx, _cache) => {
  113. return !_ctx.virtualTriggering ? (openBlock(), createBlock(unref(OnlyChild), mergeProps({ key: 0 }, _ctx.$attrs, {
  114. "aria-controls": unref(ariaControls),
  115. "aria-describedby": unref(ariaDescribedby),
  116. "aria-expanded": unref(ariaExpanded),
  117. "aria-haspopup": unref(ariaHaspopup)
  118. }), {
  119. default: withCtx(() => [
  120. renderSlot(_ctx.$slots, "default")
  121. ]),
  122. _: 3
  123. }, 16, ["aria-controls", "aria-describedby", "aria-expanded", "aria-haspopup"])) : createCommentVNode("v-if", true);
  124. };
  125. }
  126. });
  127. var ElPopperTrigger = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "trigger.vue"]]);
  128. export { ElPopperTrigger as default };
  129. //# sourceMappingURL=trigger2.mjs.map