136 lines
5.0 KiB
JavaScript
136 lines
5.0 KiB
JavaScript
import { defineComponent, inject, provide, onMounted, watch, unref, onBeforeUnmount, openBlock, createElementBlock, mergeProps, createVNode, withCtx, renderSlot } from 'vue';
|
|
import { isNil } from 'lodash-unified';
|
|
import ElFocusTrap from '../../focus-trap/src/focus-trap.mjs';
|
|
import { POPPER_CONTENT_INJECTION_KEY } from './constants.mjs';
|
|
import { popperContentProps, popperContentEmits } from './content.mjs';
|
|
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
|
|
import { usePopperContentFocusTrap } from './composables/use-focus-trap.mjs';
|
|
import { usePopperContent } from './composables/use-content.mjs';
|
|
import { usePopperContentDOM } from './composables/use-content-dom.mjs';
|
|
import { formItemContextKey } from '../../form/src/constants.mjs';
|
|
import { NOOP } from '@vue/shared';
|
|
import { isElement } from '../../../utils/types.mjs';
|
|
|
|
const __default__ = defineComponent({
|
|
name: "ElPopperContent"
|
|
});
|
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
...__default__,
|
|
props: popperContentProps,
|
|
emits: popperContentEmits,
|
|
setup(__props, { expose, emit }) {
|
|
const props = __props;
|
|
const {
|
|
focusStartRef,
|
|
trapped,
|
|
onFocusAfterReleased,
|
|
onFocusAfterTrapped,
|
|
onFocusInTrap,
|
|
onFocusoutPrevented,
|
|
onReleaseRequested
|
|
} = usePopperContentFocusTrap(props, emit);
|
|
const { attributes, arrowRef, contentRef, styles, instanceRef, role, update } = usePopperContent(props);
|
|
const {
|
|
ariaModal,
|
|
arrowStyle,
|
|
contentAttrs,
|
|
contentClass,
|
|
contentStyle,
|
|
updateZIndex
|
|
} = usePopperContentDOM(props, {
|
|
styles,
|
|
attributes,
|
|
role
|
|
});
|
|
const formItemContext = inject(formItemContextKey, void 0);
|
|
provide(POPPER_CONTENT_INJECTION_KEY, {
|
|
arrowStyle,
|
|
arrowRef
|
|
});
|
|
if (formItemContext) {
|
|
provide(formItemContextKey, {
|
|
...formItemContext,
|
|
addInputId: NOOP,
|
|
removeInputId: NOOP
|
|
});
|
|
}
|
|
let triggerTargetAriaStopWatch = void 0;
|
|
const updatePopper = (shouldUpdateZIndex = true) => {
|
|
update();
|
|
shouldUpdateZIndex && updateZIndex();
|
|
};
|
|
const togglePopperAlive = () => {
|
|
updatePopper(false);
|
|
if (props.visible && props.focusOnShow) {
|
|
trapped.value = true;
|
|
} else if (props.visible === false) {
|
|
trapped.value = false;
|
|
}
|
|
};
|
|
onMounted(() => {
|
|
watch(() => props.triggerTargetEl, (triggerTargetEl, prevTriggerTargetEl) => {
|
|
triggerTargetAriaStopWatch == null ? void 0 : triggerTargetAriaStopWatch();
|
|
triggerTargetAriaStopWatch = void 0;
|
|
const el = unref(triggerTargetEl || contentRef.value);
|
|
const prevEl = unref(prevTriggerTargetEl || contentRef.value);
|
|
if (isElement(el)) {
|
|
triggerTargetAriaStopWatch = watch([role, () => props.ariaLabel, ariaModal, () => props.id], (watches) => {
|
|
["role", "aria-label", "aria-modal", "id"].forEach((key, idx) => {
|
|
isNil(watches[idx]) ? el.removeAttribute(key) : el.setAttribute(key, watches[idx]);
|
|
});
|
|
}, { immediate: true });
|
|
}
|
|
if (prevEl !== el && isElement(prevEl)) {
|
|
["role", "aria-label", "aria-modal", "id"].forEach((key) => {
|
|
prevEl.removeAttribute(key);
|
|
});
|
|
}
|
|
}, { immediate: true });
|
|
watch(() => props.visible, togglePopperAlive, { immediate: true });
|
|
});
|
|
onBeforeUnmount(() => {
|
|
triggerTargetAriaStopWatch == null ? void 0 : triggerTargetAriaStopWatch();
|
|
triggerTargetAriaStopWatch = void 0;
|
|
});
|
|
expose({
|
|
popperContentRef: contentRef,
|
|
popperInstanceRef: instanceRef,
|
|
updatePopper,
|
|
contentStyle
|
|
});
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createElementBlock("div", mergeProps({
|
|
ref_key: "contentRef",
|
|
ref: contentRef
|
|
}, unref(contentAttrs), {
|
|
style: unref(contentStyle),
|
|
class: unref(contentClass),
|
|
tabindex: "-1",
|
|
onMouseenter: (e) => _ctx.$emit("mouseenter", e),
|
|
onMouseleave: (e) => _ctx.$emit("mouseleave", e)
|
|
}), [
|
|
createVNode(unref(ElFocusTrap), {
|
|
trapped: unref(trapped),
|
|
"trap-on-focus-in": true,
|
|
"focus-trap-el": unref(contentRef),
|
|
"focus-start-el": unref(focusStartRef),
|
|
onFocusAfterTrapped: unref(onFocusAfterTrapped),
|
|
onFocusAfterReleased: unref(onFocusAfterReleased),
|
|
onFocusin: unref(onFocusInTrap),
|
|
onFocusoutPrevented: unref(onFocusoutPrevented),
|
|
onReleaseRequested: unref(onReleaseRequested)
|
|
}, {
|
|
default: withCtx(() => [
|
|
renderSlot(_ctx.$slots, "default")
|
|
]),
|
|
_: 3
|
|
}, 8, ["trapped", "focus-trap-el", "focus-start-el", "onFocusAfterTrapped", "onFocusAfterReleased", "onFocusin", "onFocusoutPrevented", "onReleaseRequested"])
|
|
], 16, ["onMouseenter", "onMouseleave"]);
|
|
};
|
|
}
|
|
});
|
|
var ElPopperContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "content.vue"]]);
|
|
|
|
export { ElPopperContent as default };
|
|
//# sourceMappingURL=content2.mjs.map
|