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.

0 lines
6.7 KiB

1 month ago
  1. {"ast":null,"code":"import { nextTick } from 'vue';\nimport { obtainAllFocusableElements } from '../../utils/dom/aria.mjs';\nimport { EVENT_CODE } from '../../constants/aria.mjs';\nconst FOCUSABLE_CHILDREN = \"_trap-focus-children\";\nconst TRAP_FOCUS_HANDLER = \"_trap-focus-handler\";\nconst FOCUS_STACK = [];\nconst FOCUS_HANDLER = e => {\n var _a;\n if (FOCUS_STACK.length === 0) return;\n const focusableElement = FOCUS_STACK[FOCUS_STACK.length - 1][FOCUSABLE_CHILDREN];\n if (focusableElement.length > 0 && e.code === EVENT_CODE.tab) {\n if (focusableElement.length === 1) {\n e.preventDefault();\n if (document.activeElement !== focusableElement[0]) {\n focusableElement[0].focus();\n }\n return;\n }\n const goingBackward = e.shiftKey;\n const isFirst = e.target === focusableElement[0];\n const isLast = e.target === focusableElement[focusableElement.length - 1];\n if (isFirst && goingBackward) {\n e.preventDefault();\n focusableElement[focusableElement.length - 1].focus();\n }\n if (isLast && !goingBackward) {\n e.preventDefault();\n focusableElement[0].focus();\n }\n if (process.env.NODE_ENV === \"test\") {\n const index = focusableElement.indexOf(e.target);\n if (index !== -1) {\n (_a = focusableElement[goingBackward ? index - 1 : index + 1]) == null ? void 0 : _a.focus();\n }\n }\n }\n};\nconst TrapFocus = {\n beforeMount(el) {\n el[FOCUSABLE_CHILDREN] = obtainAllFocusableElements(el);\n FOCUS_STACK.push(el);\n if (FOCUS_STACK.length <= 1) {\n document.addEventListener(\"keydown\", FOCUS_HANDLER);\n }\n },\n updated(el) {\n nextTick(() => {\n el[FOCUSABLE_CHILDREN] = obtainAllFocusableElements(el);\n });\n },\n unmounted() {\n FOCUS_STACK.shift();\n if (FOCUS_STACK.length === 0) {\n document.removeEventListener(\"keydown\", FOCUS_HANDLER);\n }\n }\n};\nexport { FOCUSABLE_CHILDREN, TRAP_FOCUS_HANDLER, TrapFocus as default };","map":{"version":3,"names":["FOCUSABLE_CHILDREN","TRAP_FOCUS_HANDLER","FOCUS_STACK","FOCUS_HANDLER","e","_a","length","focusableElement","code","EVENT_CODE","tab","preventDefault","document","activeElement","focus","goingBackward","shiftKey","isFirst","target","isLast","process","env","NODE_ENV","index","indexOf","TrapFocus","beforeMount","el","obtainAllFocusableElements","push","addEventListener","updated","nextTick","unmounted","shift","removeEventListener"],"sources":["../../../../../packages/directives/trap-focus/index.ts"],"sourcesContent":["import { nextTick } from 'vue'\nimport { obtainAllFocusableElements } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport type { ObjectDirective } from 'vue'\n\nexport const FOCUSABLE_CHILDREN = '_trap-focus-children'\nexport const TRAP_FOCUS_HANDLER = '_trap-focus-handler'\n\nexport interface TrapFocusElement extends HTMLElement {\n [FOCUSABLE_CHILDREN]: HTMLElement[]\n [TRAP_FOCUS_HANDLER]: (e: KeyboardEvent) => void\n}\n\nconst FOCUS_STACK: TrapFocusElement[] = []\n\nconst FOCUS_HANDLER = (e: KeyboardEvent) => {\n // Getting the top layer.\n if (FOCUS_STACK.length === 0) return\n const focusableElement =\n FOCUS_STACK[FOCUS_STACK.length - 1][FOCUSABLE_CHILDREN]\n if (focusableElement.length > 0 && e.code === EVENT_CODE.tab) {\n if (focusableElement.length === 1) {\n e.preventDefault()\n if (document.activeElement !== focusableElement[0]) {\n focusableElement[0].focus()\n }\n return\n }\n const goingBackward = e.shiftKey\n const isFirst = e.target === focusableElement[0]\n const isLast = e.target === focusableElement[focusableElement.length - 1]\n if (isFirst && goingBackward) {\n e.preventDefault()\n focusableElement[focusableElement.length - 1].focus()\n }\n if (isLast && !goingBackward) {\n e.preventDefault()\n focusableElement[0].focus()\n }\n\n // the is critical since jsdom did not implement user actions, you can only mock it\n // DELETE ME: when testing env switches to pu