UNPKG

element-plus

Version:

A Component Library for Vue 3

1 lines 4.49 kB
{"version":3,"file":"index.mjs","sources":["../../../../../packages/directives/trap-focus/index.ts"],"sourcesContent":["import { nextTick } from 'vue'\nimport { getEventCode, obtainAllFocusableElements } from '@element-plus/utils'\nimport { EVENT_CODE } from '@element-plus/constants'\n\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 code = getEventCode(e)\n const focusableElement =\n FOCUS_STACK[FOCUS_STACK.length - 1][FOCUSABLE_CHILDREN]\n if (focusableElement.length > 0 && 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 puppeteer\n if (process.env.NODE_ENV === 'test') {\n const index = focusableElement.indexOf(e.target as HTMLElement)\n if (index !== -1) {\n focusableElement[goingBackward ? index - 1 : index + 1]?.focus()\n }\n }\n }\n}\n\nconst TrapFocus: ObjectDirective = {\n beforeMount(el: TrapFocusElement) {\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: TrapFocusElement) {\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}\n\nexport default TrapFocus\n"],"names":[],"mappings":";;;;;AAMO,MAAM,kBAAA,GAAqB;AAC3B,MAAM,kBAAA,GAAqB;AAOlC,MAAM,cAAkC,EAAC;AAEzC,MAAM,aAAA,GAAgB,CAAC,CAAA,KAAqB;AAhB5C,EAAA,IAAA,EAAA;AAkBE,EAAA,IAAI,WAAA,CAAY,WAAW,CAAA,EAAG;AAC9B,EAAA,MAAM,IAAA,GAAO,aAAa,CAAC,CAAA;AAC3B,EAAA,MAAM,mBACJ,WAAA,CAAY,WAAA,CAAY,MAAA,GAAS,CAAC,EAAE,kBAAkB,CAAA;AACxD,EAAA,IAAI,gBAAA,CAAiB,MAAA,GAAS,CAAA,IAAK,IAAA,KAAS,WAAW,GAAA,EAAK;AAC1D,IAAA,IAAI,gBAAA,CAAiB,WAAW,CAAA,EAAG;AACjC,MAAA,CAAA,CAAE,cAAA,EAAe;AACjB,MAAA,IAAI,QAAA,CAAS,aAAA,KAAkB,gBAAA,CAAiB,CAAC,CAAA,EAAG;AAClD,QAAA,gBAAA,CAAiB,CAAC,EAAE,KAAA,EAAM;AAAA,MAC5B;AACA,MAAA;AAAA,IACF;AACA,IAAA,MAAM,gBAAgB,CAAA,CAAE,QAAA;AACxB,IAAA,MAAM,OAAA,GAAU,CAAA,CAAE,MAAA,KAAW,gBAAA,CAAiB,CAAC,CAAA;AAC/C,IAAA,MAAM,SAAS,CAAA,CAAE,MAAA,KAAW,gBAAA,CAAiB,gBAAA,CAAiB,SAAS,CAAC,CAAA;AACxE,IAAA,IAAI,WAAW,aAAA,EAAe;AAC5B,MAAA,CAAA,CAAE,cAAA,EAAe;AACjB,MAAA,gBAAA,CAAiB,gBAAA,CAAiB,MAAA,GAAS,CAAC,CAAA,CAAE,KAAA,EAAM;AAAA,IACtD;AACA,IAAA,IAAI,MAAA,IAAU,CAAC,aAAA,EAAe;AAC5B,MAAA,CAAA,CAAE,cAAA,EAAe;AACjB,MAAA,gBAAA,CAAiB,CAAC,EAAE,KAAA,EAAM;AAAA,IAC5B;AAIA,IAAA,IAAI,OAAA,CAAQ,GAAA,CAAI,QAAA,KAAa,MAAA,EAAQ;AACnC,MAAA,MAAM,KAAA,GAAQ,gBAAA,CAAiB,OAAA,CAAQ,CAAA,CAAE,MAAqB,CAAA;AAC9D,MAAA,IAAI,UAAU,EAAA,EAAI;AAChB,QAAA,CAAA,EAAA,GAAA,gBAAA,CAAiB,gBAAgB,KAAA,GAAQ,CAAA,GAAI,KAAA,GAAQ,CAAC,MAAtD,IAAA,GAAA,MAAA,GAAA,EAAA,CAAyD,KAAA,EAAA;AAAA,MAC3D;AAAA,IACF;AAAA,EACF;AACF,CAAA;AAEA,MAAM,SAAA,GAA6B;AAAA,EACjC,YAAY,EAAA,EAAsB;AAChC,IAAA,EAAA,CAAG,kBAAkB,CAAA,GAAI,0BAAA,CAA2B,EAAE,CAAA;AACtD,IAAA,WAAA,CAAY,KAAK,EAAE,CAAA;AACnB,IAAA,IAAI,WAAA,CAAY,UAAU,CAAA,EAAG;AAC3B,MAAA,QAAA,CAAS,gBAAA,CAAiB,WAAW,aAAa,CAAA;AAAA,IACpD;AAAA,EACF,CAAA;AAAA,EACA,QAAQ,EAAA,EAAsB;AAC5B,IAAA,QAAA,CAAS,MAAM;AACb,MAAA,EAAA,CAAG,kBAAkB,CAAA,GAAI,0BAAA,CAA2B,EAAE,CAAA;AAAA,IACxD,CAAC,CAAA;AAAA,EACH,CAAA;AAAA,EACA,SAAA,GAAY;AACV,IAAA,WAAA,CAAY,KAAA,EAAM;AAClB,IAAA,IAAI,WAAA,CAAY,WAAW,CAAA,EAAG;AAC5B,MAAA,QAAA,CAAS,mBAAA,CAAoB,WAAW,aAAa,CAAA;AAAA,IACvD;AAAA,EACF;AACF;;;;"}