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 lines
11 KiB
1 lines
11 KiB
{"ast":null,"code":"import { shallowRef, onMounted, onUpdated, watch } from 'vue';\nimport { useEventListener } from '@vueuse/core';\nimport { useNamespace } from '../../../../hooks/use-namespace/index.mjs';\nimport { EVENT_CODE } from '../../../../constants/aria.mjs';\nfunction useKeydown({\n el$\n}, store) {\n const ns = useNamespace(\"tree\");\n const treeItems = shallowRef([]);\n const checkboxItems = shallowRef([]);\n onMounted(() => {\n initTabIndex();\n });\n onUpdated(() => {\n treeItems.value = Array.from(el$.value.querySelectorAll(\"[role=treeitem]\"));\n checkboxItems.value = Array.from(el$.value.querySelectorAll(\"input[type=checkbox]\"));\n });\n watch(checkboxItems, val => {\n val.forEach(checkbox => {\n checkbox.setAttribute(\"tabindex\", \"-1\");\n });\n });\n const handleKeydown = ev => {\n const currentItem = ev.target;\n if (!currentItem.className.includes(ns.b(\"node\"))) return;\n const code = ev.code;\n treeItems.value = Array.from(el$.value.querySelectorAll(`.${ns.is(\"focusable\")}[role=treeitem]`));\n const currentIndex = treeItems.value.indexOf(currentItem);\n let nextIndex;\n if ([EVENT_CODE.up, EVENT_CODE.down].includes(code)) {\n ev.preventDefault();\n if (code === EVENT_CODE.up) {\n nextIndex = currentIndex === -1 ? 0 : currentIndex !== 0 ? currentIndex - 1 : treeItems.value.length - 1;\n const startIndex = nextIndex;\n while (true) {\n if (store.value.getNode(treeItems.value[nextIndex].dataset.key).canFocus) break;\n nextIndex--;\n if (nextIndex === startIndex) {\n nextIndex = -1;\n break;\n }\n if (nextIndex < 0) {\n nextIndex = treeItems.value.length - 1;\n }\n }\n } else {\n nextIndex = currentIndex === -1 ? 0 : currentIndex < treeItems.value.length - 1 ? currentIndex + 1 : 0;\n const startIndex = nextIndex;\n while (true) {\n if (store.value.getNode(treeItems.value[nextIndex].dataset.key).canFocus) break;\n nextIndex++;\n if (nextIndex === startIndex) {\n nextIndex = -1;\n break;\n }\n if (nextIndex >= treeItems.value.length) {\n nextIndex = 0;\n }\n }\n }\n nextIndex !== -1 && treeItems.value[nextIndex].focus();\n }\n if ([EVENT_CODE.left, EVENT_CODE.right].includes(code)) {\n ev.preventDefault();\n currentItem.click();\n }\n const hasInput = currentItem.querySelector('[type=\"checkbox\"]');\n if ([EVENT_CODE.enter, EVENT_CODE.numpadEnter, EVENT_CODE.space].includes(code) && hasInput) {\n ev.preventDefault();\n hasInput.click();\n }\n };\n useEventListener(el$, \"keydown\", handleKeydown);\n const initTabIndex = () => {\n var _a;\n treeItems.value = Array.from(el$.value.querySelectorAll(`.${ns.is(\"focusable\")}[role=treeitem]`));\n checkboxItems.value = Array.from(el$.value.querySelectorAll(\"input[type=checkbox]\"));\n const checkedItem = el$.value.querySelectorAll(`.${ns.is(\"checked\")}[role=treeitem]`);\n if (checkedItem.length) {\n checkedItem[0].setAttribute(\"tabindex\", \"0\");\n return;\n }\n (_a = treeItems.value[0]) == null ? void 0 : _a.setAttribute(\"tabindex\", \"0\");\n };\n}\nexport { useKeydown };","map":{"version":3,"names":["useKeydown","el$","store","ns","useNamespace","treeItems","shallowRef","checkboxItems","onMounted","initTabIndex","onUpdated","value","Array","from","querySelectorAll","watch","val","forEach","checkbox","setAttribute","handleKeydown","ev","currentItem","target","className","includes","b","code","is","currentIndex","indexOf","nextIndex","EVENT_CODE","up","down","preventDefault","length","startIndex","getNode","dataset","key","canFocus","focus","left","right","click","hasInput","querySelector","enter","numpadEnter","space","useEventListener","_a","checkedItem"],"sources":["../../../../../../../packages/components/tree/src/model/useKeydown.ts"],"sourcesContent":["// @ts-nocheck\nimport { onMounted, onUpdated, shallowRef, watch } from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { EVENT_CODE } from '@element-plus/constants'\nimport { useNamespace } from '@element-plus/hooks'\nimport type TreeStore from './tree-store'\n\nimport type { Ref } from 'vue'\nimport type { Nullable } from '@element-plus/utils'\n\ninterface UseKeydownOption {\n el$: Ref<HTMLElement>\n}\nexport function useKeydown({ el$ }: UseKeydownOption, store: Ref<TreeStore>) {\n const ns = useNamespace('tree')\n\n const treeItems = shallowRef<Nullable<HTMLElement>[]>([])\n const checkboxItems = shallowRef<Nullable<HTMLElement>[]>([])\n\n onMounted(() => {\n initTabIndex()\n })\n\n onUpdated(() => {\n treeItems.value = Array.from(el$.value.querySelectorAll('[role=treeitem]'))\n checkboxItems.value = Array.from(\n el$.value.querySelectorAll('input[type=checkbox]')\n )\n })\n\n watch(checkboxItems, (val) => {\n val.forEach((checkbox) => {\n checkbox.setAttribute('tabindex', '-1')\n })\n })\n\n const handleKeydown = (ev: KeyboardEvent): void => {\n const currentItem = ev.target as HTMLElement\n if (!currentItem.className.includes(ns.b('node'))) return\n const code = ev.code\n treeItems.value = Array.from(\n el$.value.querySelectorAll(`.${ns.is('focusable')}[role=treeitem]`)\n )\n const currentIndex = treeItems.value.indexOf(currentItem)\n let nextIndex\n if ([EVENT_CODE.up, EVENT_CODE.down].includes(code)) {\n ev.preventDefault()\n if (code === EVENT_CODE.up) {\n nextIndex =\n currentIndex === -1\n ? 0\n : currentIndex !== 0\n ? currentIndex - 1\n : treeItems.value.length - 1\n const startIndex = nextIndex\n while (true) {\n if (\n store.value.getNode(treeItems.value[nextIndex].dataset.key).canFocus\n )\n break\n nextIndex--\n if (nextIndex === startIndex) {\n nextIndex = -1\n break\n }\n if (nextIndex < 0) {\n nextIndex = treeItems.value.length - 1\n }\n }\n } else {\n nextIndex =\n currentIndex === -1\n ? 0\n : currentIndex < treeItems.value.length - 1\n ? currentIndex + 1\n : 0\n const startIndex = nextIndex\n while (true) {\n if (\n store.value.getNode(treeItems.value[nextIndex].dataset.key).canFocus\n )\n break\n nextIndex++\n if (nextIndex === startIndex) {\n nextIndex = -1\n break\n }\n if (nextIndex >= treeItems.value.length) {\n nextIndex = 0\n }\n }\n }\n nextIndex !== -1 && treeItems.value[nextIndex].focus()\n }\n if ([EVENT_CODE.left, EVENT_CODE.right].includes(code)) {\n ev.preventDefault()\n currentItem.click()\n }\n const hasInput = currentItem.querySelector(\n '[type=\"checkbox\"]'\n ) as Nullable<HTMLInputElement>\n if (\n [EVENT_CODE.enter, EVENT_CODE.numpadEnter, EVENT_CODE.space].includes(\n code\n ) &&\n hasInput\n ) {\n ev.preventDefault()\n hasInput.click()\n }\n }\n\n useEventListener(el$, 'keydown', handleKeydown)\n\n const initTabIndex = (): void => {\n treeItems.value = Array.from(\n el$.value.querySelectorAll(`.${ns.is('focusable')}[role=treeitem]`)\n )\n checkboxItems.value = Array.from(\n el$.value.querySelectorAll('input[type=checkbox]')\n )\n const checkedItem = el$.value.querySelectorAll(\n `.${ns.is('checked')}[role=treeitem]`\n )\n if (checkedItem.length) {\n checkedItem[0].setAttribute('tabindex', '0')\n return\n }\n treeItems.value[0]?.setAttribute('tabindex', '0')\n }\n}\n"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]}
|