element-plus
Version:
A Component Library for Vue 3
214 lines (211 loc) • 8.24 kB
JavaScript
import { defineComponent, inject, ref, provide, computed, unref, onMounted, watch, toRefs, onBeforeUnmount, openBlock, createElementBlock, normalizeStyle, normalizeClass, createVNode, withCtx, renderSlot } from 'vue';
import { NOOP } from '@vue/shared';
import { isNil } from 'lodash-unified';
import { createPopper } from '@popperjs/core';
import '../../focus-trap/index.mjs';
import '../../../hooks/index.mjs';
import '../../../tokens/index.mjs';
import '../../../utils/index.mjs';
import { usePopperContentProps, usePopperContentEmits } from './content.mjs';
import { unwrapMeasurableEl, buildPopperOptions } from './utils.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';
import { POPPER_INJECTION_KEY, POPPER_CONTENT_INJECTION_KEY } from '../../../tokens/popper.mjs';
import { formItemContextKey } from '../../../tokens/form.mjs';
import { useZIndex } from '../../../hooks/use-z-index/index.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { isElement } from '../../../utils/types.mjs';
import ElFocusTrap from '../../focus-trap/src/focus-trap.mjs';
const __default__ = {
name: "ElPopperContent"
};
const _sfc_main = /* @__PURE__ */ defineComponent({
...__default__,
props: usePopperContentProps,
emits: usePopperContentEmits,
setup(__props, { expose, emit }) {
const props = __props;
const { popperInstanceRef, contentRef, triggerRef, role } = inject(POPPER_INJECTION_KEY, void 0);
const formItemContext = inject(formItemContextKey, void 0);
const { nextZIndex } = useZIndex();
const ns = useNamespace("popper");
const popperContentRef = ref();
const focusStartRef = ref("first");
const arrowRef = ref();
const arrowOffset = ref();
provide(POPPER_CONTENT_INJECTION_KEY, {
arrowRef,
arrowOffset
});
if (formItemContext && (formItemContext.addInputId || formItemContext.removeInputId)) {
provide(formItemContextKey, {
...formItemContext,
addInputId: NOOP,
removeInputId: NOOP
});
}
const contentZIndex = ref(props.zIndex || nextZIndex());
const trapped = ref(false);
let triggerTargetAriaStopWatch = void 0;
const computedReference = computed(() => unwrapMeasurableEl(props.referenceEl) || unref(triggerRef));
const contentStyle = computed(() => [{ zIndex: unref(contentZIndex) }, props.popperStyle]);
const contentClass = computed(() => [
ns.b(),
ns.is("pure", props.pure),
ns.is(props.effect),
props.popperClass
]);
const ariaModal = computed(() => {
return role && role.value === "dialog" ? "false" : void 0;
});
const createPopperInstance = ({ referenceEl, popperContentEl, arrowEl }) => {
const options = buildPopperOptions(props, {
arrowEl,
arrowOffset: unref(arrowOffset)
});
return createPopper(referenceEl, popperContentEl, options);
};
const updatePopper = (shouldUpdateZIndex = true) => {
var _a;
(_a = unref(popperInstanceRef)) == null ? void 0 : _a.update();
shouldUpdateZIndex && (contentZIndex.value = props.zIndex || nextZIndex());
};
const togglePopperAlive = () => {
var _a, _b;
const monitorable = { name: "eventListeners", enabled: props.visible };
(_b = (_a = unref(popperInstanceRef)) == null ? void 0 : _a.setOptions) == null ? void 0 : _b.call(_a, (options) => ({
...options,
modifiers: [...options.modifiers || [], monitorable]
}));
updatePopper(false);
if (props.visible && props.focusOnShow) {
trapped.value = true;
} else if (props.visible === false) {
trapped.value = false;
}
};
const onFocusAfterTrapped = () => {
emit("focus");
};
const onFocusAfterReleased = () => {
focusStartRef.value = "first";
emit("blur");
};
const onFocusInTrap = (event) => {
var _a;
if (props.visible && !trapped.value) {
if (event.target) {
focusStartRef.value = event.target;
}
trapped.value = true;
if (event.relatedTarget) {
;
(_a = event.relatedTarget) == null ? void 0 : _a.focus();
}
}
};
const onFocusoutPrevented = () => {
if (!props.trapping) {
trapped.value = false;
}
};
const onReleaseRequested = () => {
trapped.value = false;
emit("close");
};
onMounted(() => {
let updateHandle;
watch(computedReference, (referenceEl) => {
var _a;
updateHandle == null ? void 0 : updateHandle();
const popperInstance = unref(popperInstanceRef);
(_a = popperInstance == null ? void 0 : popperInstance.destroy) == null ? void 0 : _a.call(popperInstance);
if (referenceEl) {
const popperContentEl = unref(popperContentRef);
contentRef.value = popperContentEl;
popperInstanceRef.value = createPopperInstance({
referenceEl,
popperContentEl,
arrowEl: unref(arrowRef)
});
updateHandle = watch(() => referenceEl.getBoundingClientRect(), () => updatePopper(), {
immediate: true
});
} else {
popperInstanceRef.value = void 0;
}
}, {
immediate: true
});
watch(() => props.triggerTargetEl, (triggerTargetEl, prevTriggerTargetEl) => {
triggerTargetAriaStopWatch == null ? void 0 : triggerTargetAriaStopWatch();
triggerTargetAriaStopWatch = void 0;
const el = unref(triggerTargetEl || popperContentRef.value);
const prevEl = unref(prevTriggerTargetEl || popperContentRef.value);
if (isElement(el)) {
const { ariaLabel, id } = toRefs(props);
triggerTargetAriaStopWatch = watch([role, ariaLabel, ariaModal, 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 (isElement(prevEl)) {
;
["role", "aria-label", "aria-modal", "id"].forEach((key) => {
prevEl.removeAttribute(key);
});
}
}, { immediate: true });
watch(() => props.visible, togglePopperAlive, { immediate: true });
watch(() => buildPopperOptions(props, {
arrowEl: unref(arrowRef),
arrowOffset: unref(arrowOffset)
}), (option) => {
var _a;
return (_a = popperInstanceRef.value) == null ? void 0 : _a.setOptions(option);
});
});
onBeforeUnmount(() => {
triggerTargetAriaStopWatch == null ? void 0 : triggerTargetAriaStopWatch();
triggerTargetAriaStopWatch = void 0;
});
expose({
popperContentRef,
popperInstanceRef,
updatePopper,
contentStyle
});
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
ref_key: "popperContentRef",
ref: popperContentRef,
style: normalizeStyle(unref(contentStyle)),
class: normalizeClass(unref(contentClass)),
tabindex: "-1",
onMouseenter: _cache[0] || (_cache[0] = (e) => _ctx.$emit("mouseenter", e)),
onMouseleave: _cache[1] || (_cache[1] = (e) => _ctx.$emit("mouseleave", e))
}, [
createVNode(unref(ElFocusTrap), {
trapped: trapped.value,
"trap-on-focus-in": true,
"focus-trap-el": popperContentRef.value,
"focus-start-el": focusStartRef.value,
onFocusAfterTrapped,
onFocusAfterReleased,
onFocusin: onFocusInTrap,
onFocusoutPrevented,
onReleaseRequested
}, {
default: withCtx(() => [
renderSlot(_ctx.$slots, "default")
]),
_: 3
}, 8, ["trapped", "focus-trap-el", "focus-start-el"])
], 38);
};
}
});
var ElPopperContent = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "/home/runner/work/element-plus/element-plus/packages/components/popper/src/content.vue"]]);
export { ElPopperContent as default };
//# sourceMappingURL=content2.mjs.map