UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 13.7 kB
{"version":3,"file":"content2.mjs","sources":["../../../../../../packages/components/popper/src/content.vue"],"sourcesContent":["<template>\n <div\n ref=\"popperContentRef\"\n :style=\"contentStyle\"\n :class=\"contentClass\"\n tabindex=\"-1\"\n @mouseenter=\"(e) => $emit('mouseenter', e)\"\n @mouseleave=\"(e) => $emit('mouseleave', e)\"\n >\n <el-focus-trap\n :trapped=\"trapped\"\n :trap-on-focus-in=\"true\"\n :focus-trap-el=\"popperContentRef\"\n :focus-start-el=\"focusStartRef\"\n @focus-after-trapped=\"onFocusAfterTrapped\"\n @focus-after-released=\"onFocusAfterReleased\"\n @focusin=\"onFocusInTrap\"\n @focusout-prevented=\"onFocusoutPrevented\"\n @release-requested=\"onReleaseRequested\"\n >\n <slot />\n </el-focus-trap>\n </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n computed,\n inject,\n onBeforeUnmount,\n onMounted,\n provide,\n ref,\n unref,\n watch,\n} from 'vue'\nimport { NOOP } from '@vue/shared'\nimport { isNil } from 'lodash-unified'\nimport { createPopper } from '@popperjs/core'\nimport ElFocusTrap from '@element-plus/components/focus-trap'\nimport { useNamespace, useZIndex } from '@element-plus/hooks'\nimport {\n POPPER_CONTENT_INJECTION_KEY,\n POPPER_INJECTION_KEY,\n formItemContextKey,\n} from '@element-plus/tokens'\nimport { isElement } from '@element-plus/utils'\nimport { popperContentEmits, popperContentProps } from './content'\nimport { buildPopperOptions, unwrapMeasurableEl } from './utils'\n\nimport type { WatchStopHandle } from 'vue'\nimport type { CreatePopperInstanceParams } from './content'\n\ndefineOptions({\n name: 'ElPopperContent',\n})\n\nconst emit = defineEmits(popperContentEmits)\n\nconst props = defineProps(popperContentProps)\n\nconst { popperInstanceRef, contentRef, triggerRef, role } = inject(\n POPPER_INJECTION_KEY,\n undefined\n)!\nconst formItemContext = inject(formItemContextKey, undefined)\nconst { nextZIndex } = useZIndex()\nconst ns = useNamespace('popper')\nconst popperContentRef = ref<HTMLElement>()\nconst focusStartRef = ref<'container' | 'first' | HTMLElement>('first')\nconst arrowRef = ref<HTMLElement>()\nconst arrowOffset = ref<number>()\nprovide(POPPER_CONTENT_INJECTION_KEY, {\n arrowRef,\n arrowOffset,\n})\n\nif (\n formItemContext &&\n (formItemContext.addInputId || formItemContext.removeInputId)\n) {\n // disallow auto-id from inside popper content\n provide(formItemContextKey, {\n ...formItemContext,\n addInputId: NOOP,\n removeInputId: NOOP,\n })\n}\n\nconst contentZIndex = ref<number>(props.zIndex || nextZIndex())\nconst trapped = ref<boolean>(false)\n\nlet triggerTargetAriaStopWatch: WatchStopHandle | undefined = undefined\n\nconst computedReference = computed(\n () => unwrapMeasurableEl(props.referenceEl) || unref(triggerRef)\n)\n\nconst contentStyle = computed(\n () => [{ zIndex: unref(contentZIndex) }, props.popperStyle] as any\n)\n\nconst contentClass = computed(() => [\n ns.b(),\n ns.is('pure', props.pure),\n ns.is(props.effect),\n props.popperClass,\n])\n\nconst ariaModal = computed<string | undefined>(() => {\n return role && role.value === 'dialog' ? 'false' : undefined\n})\n\nconst createPopperInstance = ({\n referenceEl,\n popperContentEl,\n arrowEl,\n}: CreatePopperInstanceParams) => {\n const options = buildPopperOptions(props, {\n arrowEl,\n arrowOffset: unref(arrowOffset),\n })\n\n return createPopper(referenceEl, popperContentEl, options)\n}\n\nconst updatePopper = (shouldUpdateZIndex = true) => {\n unref(popperInstanceRef)?.update()\n shouldUpdateZIndex && (contentZIndex.value = props.zIndex || nextZIndex())\n}\n\nconst togglePopperAlive = () => {\n const monitorable = { name: 'eventListeners', enabled: props.visible }\n unref(popperInstanceRef)?.setOptions?.((options) => ({\n ...options,\n modifiers: [...(options.modifiers || []), monitorable],\n }))\n updatePopper(false)\n if (props.visible && props.focusOnShow) {\n trapped.value = true\n } else if (props.visible === false) {\n trapped.value = false\n }\n}\n\nconst onFocusAfterTrapped = () => {\n emit('focus')\n}\n\nconst onFocusAfterReleased = (event: CustomEvent) => {\n if (event.detail?.focusReason !== 'pointer') {\n focusStartRef.value = 'first'\n emit('blur')\n }\n}\n\nconst onFocusInTrap = (event: FocusEvent) => {\n if (props.visible && !trapped.value) {\n if (event.target) {\n focusStartRef.value = event.target as typeof focusStartRef.value\n }\n trapped.value = true\n }\n}\n\nconst onFocusoutPrevented = (event: CustomEvent) => {\n if (!props.trapping) {\n if (event.detail.focusReason === 'pointer') {\n event.preventDefault()\n }\n trapped.value = false\n }\n}\n\nconst onReleaseRequested = () => {\n trapped.value = false\n emit('close')\n}\n\nonMounted(() => {\n let updateHandle: WatchStopHandle\n watch(\n computedReference,\n (referenceEl) => {\n updateHandle?.()\n const popperInstance = unref(popperInstanceRef)\n popperInstance?.destroy?.()\n if (referenceEl) {\n const popperContentEl = unref(popperContentRef)!\n contentRef.value = popperContentEl\n\n popperInstanceRef.value = createPopperInstance({\n referenceEl,\n popperContentEl,\n arrowEl: unref(arrowRef),\n })\n\n updateHandle = watch(\n () => referenceEl.getBoundingClientRect(),\n () => updatePopper(),\n {\n immediate: true,\n }\n )\n } else {\n popperInstanceRef.value = undefined\n }\n },\n {\n immediate: true,\n }\n )\n\n watch(\n () => props.triggerTargetEl,\n (triggerTargetEl, prevTriggerTargetEl) => {\n triggerTargetAriaStopWatch?.()\n triggerTargetAriaStopWatch = undefined\n\n const el = unref(triggerTargetEl || popperContentRef.value)\n const prevEl = unref(prevTriggerTargetEl || popperContentRef.value)\n\n if (isElement(el)) {\n triggerTargetAriaStopWatch = watch(\n [role, () => props.ariaLabel, ariaModal, () => props.id],\n (watches) => {\n ;['role', 'aria-label', 'aria-modal', 'id'].forEach((key, idx) => {\n isNil(watches[idx])\n ? el.removeAttribute(key)\n : el.setAttribute(key, watches[idx]!)\n })\n },\n { immediate: true }\n )\n }\n if (prevEl !== el && isElement(prevEl)) {\n ;['role', 'aria-label', 'aria-modal', 'id'].forEach((key) => {\n prevEl.removeAttribute(key)\n })\n }\n },\n { immediate: true }\n )\n\n watch(() => props.visible, togglePopperAlive, { immediate: true })\n\n watch(\n () =>\n buildPopperOptions(props, {\n arrowEl: unref(arrowRef),\n arrowOffset: unref(arrowOffset),\n }),\n (option) => popperInstanceRef.value?.setOptions(option)\n )\n})\n\nonBeforeUnmount(() => {\n triggerTargetAriaStopWatch?.()\n triggerTargetAriaStopWatch = undefined\n})\n\ndefineExpose({\n /**\n * @description popper content element\n */\n popperContentRef,\n /**\n * @description popperjs instance\n */\n popperInstanceRef,\n /**\n * @description method for updating popper\n */\n updatePopper,\n\n /**\n * @description content style\n */\n contentStyle,\n})\n</script>\n"],"names":[],"mappings":"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"}