You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
17 KiB
1 line
17 KiB
2 years ago
|
{"version":3,"file":"focus-trap.mjs","sources":["../../../../../../packages/components/focus-trap/src/focus-trap.vue"],"sourcesContent":["<template>\n <slot :handle-keydown=\"onKeydown\" />\n</template>\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 { 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 { key, altKey, ctrlKey, metaKey, currentTarget, shiftKey } = e\n const { loop } = props\n const isTabbing =\n key === 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 focusTra
|