1 line
10 KiB
Plaintext
1 line
10 KiB
Plaintext
{"version":3,"file":"focus-trap.vue.mjs","sources":["../../../../../../packages/components/focus-trap/src/focus-trap.vue"],"sourcesContent":["<template>\n <slot :handle-keydown=\"onKeydown\" />\n</template>\n\n<script lang=\"ts\">\nimport {\n defineComponent,\n nextTick,\n onBeforeUnmount,\n onMounted,\n provide,\n ref,\n unref,\n watch,\n} from 'vue'\nimport { isNil } from 'lodash-unified'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { useEscapeKeydown } from '@element-plus/hooks'\nimport { getEventCode, isString } from '@element-plus/utils'\nimport {\n createFocusOutPreventedEvent,\n focusFirstDescendant,\n focusableStack,\n getEdges,\n isFocusCausedByUserEvent,\n obtainAllFocusableElements,\n tryFocus,\n useFocusReason,\n} from './utils'\nimport {\n FOCUS_AFTER_RELEASED,\n FOCUS_AFTER_TRAPPED,\n FOCUS_AFTER_TRAPPED_OPTS,\n FOCUS_TRAP_INJECTION_KEY,\n ON_RELEASE_FOCUS_EVT,\n ON_TRAP_FOCUS_EVT,\n} from './tokens'\n\nimport type { PropType } from 'vue'\nimport type { FocusLayer } from './utils'\n\nexport default defineComponent({\n name: 'ElFocusTrap',\n inheritAttrs: false,\n props: {\n loop: Boolean,\n trapped: Boolean,\n focusTrapEl: Object as PropType<HTMLElement>,\n focusStartEl: {\n type: [Object, String] as PropType<'container' | 'first' | HTMLElement>,\n default: 'first',\n },\n },\n emits: [\n ON_TRAP_FOCUS_EVT,\n ON_RELEASE_FOCUS_EVT,\n 'focusin',\n 'focusout',\n 'focusout-prevented',\n 'release-requested',\n ],\n setup(props, { emit }) {\n const forwardRef = ref<HTMLElement | undefined>()\n let lastFocusBeforeTrapped: HTMLElement | null\n let lastFocusAfterTrapped: HTMLElement | null\n\n const { focusReason } = useFocusReason()\n\n useEscapeKeydown((event) => {\n if (props.trapped && !focusLayer.paused) {\n emit('release-requested', event)\n }\n })\n\n const focusLayer: FocusLayer = {\n paused: false,\n pause() {\n this.paused = true\n },\n resume() {\n this.paused = false\n },\n }\n\n const onKeydown = (e: KeyboardEvent) => {\n if (!props.loop && !props.trapped) return\n if (focusLayer.paused) return\n\n const { altKey, ctrlKey, metaKey, currentTarget, shiftKey } = e\n const { loop } = props\n const code = getEventCode(e)\n const isTabbing =\n code === EVENT_CODE.tab && !altKey && !ctrlKey && !metaKey\n\n const currentFocusingEl = document.activeElement\n if (isTabbing && currentFocusingEl) {\n const container = currentTarget as HTMLElement\n const [first, last] = getEdges(container)\n const isTabbable = first && last\n if (!isTabbable) {\n if (currentFocusingEl === container) {\n const focusoutPreventedEvent = createFocusOutPreventedEvent({\n focusReason: focusReason.value,\n })\n emit('focusout-prevented', focusoutPreventedEvent)\n if (!focusoutPreventedEvent.defaultPrevented) {\n e.preventDefault()\n }\n }\n } else {\n if (!shiftKey && currentFocusingEl === last) {\n const focusoutPreventedEvent = createFocusOutPreventedEvent({\n focusReason: focusReason.value,\n })\n emit('focusout-prevented', focusoutPreventedEvent)\n if (!focusoutPreventedEvent.defaultPrevented) {\n e.preventDefault()\n if (loop) tryFocus(first, true)\n }\n } else if (\n shiftKey &&\n [first, container].includes(currentFocusingEl as HTMLElement)\n ) {\n const focusoutPreventedEvent = createFocusOutPreventedEvent({\n focusReason: focusReason.value,\n })\n emit('focusout-prevented', focusoutPreventedEvent)\n if (!focusoutPreventedEvent.defaultPrevented) {\n e.preventDefault()\n if (loop) tryFocus(last, true)\n }\n }\n }\n }\n }\n\n provide(FOCUS_TRAP_INJECTION_KEY, {\n focusTrapRef: forwardRef,\n onKeydown,\n })\n\n watch(\n () => props.focusTrapEl,\n (focusTrapEl) => {\n if (focusTrapEl) {\n forwardRef.value = focusTrapEl\n }\n },\n { immediate: true }\n )\n\n watch([forwardRef], ([forwardRef], [oldForwardRef]) => {\n if (forwardRef) {\n forwardRef.addEventListener('keydown', onKeydown)\n forwardRef.addEventListener('focusin', onFocusIn)\n forwardRef.addEventListener('focusout', onFocusOut)\n }\n if (oldForwardRef) {\n oldForwardRef.removeEventListener('keydown', onKeydown)\n oldForwardRef.removeEventListener('focusin', onFocusIn)\n oldForwardRef.removeEventListener('focusout', onFocusOut)\n }\n })\n\n const trapOnFocus = (e: Event) => {\n emit(ON_TRAP_FOCUS_EVT, e)\n }\n const releaseOnFocus = (e: Event) => emit(ON_RELEASE_FOCUS_EVT, e)\n\n const onFocusIn = (e: FocusEvent) => {\n const trapContainer = unref(forwardRef)\n if (!trapContainer) return\n\n const target = e.target as HTMLElement | null\n const relatedTarget = e.relatedTarget as HTMLElement | null\n const isFocusedInTrap = target && trapContainer.contains(target)\n\n if (!props.trapped) {\n const isPrevFocusedInTrap =\n relatedTarget && trapContainer.contains(relatedTarget)\n if (!isPrevFocusedInTrap) {\n lastFocusBeforeTrapped = relatedTarget\n }\n }\n\n if (isFocusedInTrap) emit('focusin', e)\n\n if (focusLayer.paused) return\n\n if (props.trapped) {\n if (isFocusedInTrap) {\n lastFocusAfterTrapped = target\n } else {\n tryFocus(lastFocusAfterTrapped, true)\n }\n }\n }\n\n const onFocusOut = (e: Event) => {\n const trapContainer = unref(forwardRef)\n if (focusLayer.paused || !trapContainer) return\n\n if (props.trapped) {\n const relatedTarget = (e as FocusEvent)\n .relatedTarget as HTMLElement | null\n if (!isNil(relatedTarget) && !trapContainer.contains(relatedTarget)) {\n // Give embedded focus layer time to pause this layer before reclaiming focus\n // And only reclaim focus if it should currently be trapping\n setTimeout(() => {\n if (!focusLayer.paused && props.trapped) {\n const focusoutPreventedEvent = createFocusOutPreventedEvent({\n focusReason: focusReason.value,\n })\n emit('focusout-prevented', focusoutPreventedEvent)\n if (!focusoutPreventedEvent.defaultPrevented) {\n tryFocus(lastFocusAfterTrapped, true)\n }\n }\n }, 0)\n }\n } else {\n const target = e.target as HTMLElement | null\n const isFocusedInTrap = target && trapContainer.contains(target)\n if (!isFocusedInTrap) emit('focusout', e)\n }\n }\n\n async function startTrap() {\n // Wait for forwardRef to resolve\n await nextTick()\n const trapContainer = unref(forwardRef)\n if (trapContainer) {\n focusableStack.push(focusLayer)\n const prevFocusedElement = trapContainer.contains(\n document.activeElement\n )\n ? lastFocusBeforeTrapped\n : document.activeElement\n lastFocusBeforeTrapped = prevFocusedElement as HTMLElement | null\n const isPrevFocusContained = trapContainer.contains(prevFocusedElement)\n if (!isPrevFocusContained) {\n const focusEvent = new Event(\n FOCUS_AFTER_TRAPPED,\n FOCUS_AFTER_TRAPPED_OPTS\n )\n trapContainer.addEventListener(FOCUS_AFTER_TRAPPED, trapOnFocus)\n trapContainer.dispatchEvent(focusEvent)\n if (!focusEvent.defaultPrevented) {\n nextTick(() => {\n let focusStartEl = props.focusStartEl\n if (!isString(focusStartEl)) {\n tryFocus(focusStartEl)\n if (document.activeElement !== focusStartEl) {\n focusStartEl = 'first'\n }\n }\n if (focusStartEl === 'first') {\n focusFirstDescendant(\n obtainAllFocusableElements(trapContainer),\n true\n )\n }\n if (\n document.activeElement === prevFocusedElement ||\n focusStartEl === 'container'\n ) {\n tryFocus(trapContainer)\n }\n })\n }\n }\n }\n }\n\n function stopTrap() {\n const trapContainer = unref(forwardRef)\n\n if (trapContainer) {\n trapContainer.removeEventListener(FOCUS_AFTER_TRAPPED, trapOnFocus)\n\n const releasedEvent = new CustomEvent(FOCUS_AFTER_RELEASED, {\n ...FOCUS_AFTER_TRAPPED_OPTS,\n detail: {\n focusReason: focusReason.value,\n },\n })\n trapContainer.addEventListener(FOCUS_AFTER_RELEASED, releaseOnFocus)\n trapContainer.dispatchEvent(releasedEvent)\n if (\n !releasedEvent.defaultPrevented &&\n (focusReason.value == 'keyboard' ||\n !isFocusCausedByUserEvent() ||\n trapContainer.contains(document.activeElement))\n ) {\n tryFocus(lastFocusBeforeTrapped ?? document.body)\n }\n\n trapContainer.removeEventListener(FOCUS_AFTER_RELEASED, releaseOnFocus)\n focusableStack.remove(focusLayer)\n lastFocusBeforeTrapped = null\n lastFocusAfterTrapped = null\n }\n }\n\n onMounted(() => {\n if (props.trapped) {\n startTrap()\n }\n\n watch(\n () => props.trapped,\n (trapped) => {\n if (trapped) {\n startTrap()\n } else {\n stopTrap()\n }\n }\n )\n })\n\n onBeforeUnmount(() => {\n if (props.trapped) {\n stopTrap()\n }\n\n if (forwardRef.value) {\n forwardRef.value.removeEventListener('keydown', onKeydown)\n forwardRef.value.removeEventListener('focusin', onFocusIn)\n forwardRef.value.removeEventListener('focusout', onFocusOut)\n forwardRef.value = undefined\n }\n\n lastFocusBeforeTrapped = null\n lastFocusAfterTrapped = null\n })\n\n return {\n onKeydown,\n }\n },\n})\n</script>\n"],"names":["_renderSlot"],"mappings":";;;;;SACEA,UAAA,CAAoC,KAAA,MAAA,EAAA,SAAA,EAAA,EAA7B,aAAA,EAAgB,IAAA,CAAA,WAAS,CAAA;;;;;;"} |