hongluan-ui
Version:
Hongluan Component Library for Vue 3
1 lines • 7.27 kB
Source Map (JSON)
{"version":3,"file":"useKeydown.mjs","sources":["../../../../../../../packages/components/tree/src/model/useKeydown.ts"],"sourcesContent":["import { onMounted, onUpdated, watch, shallowRef } from 'vue'\nimport { useEventListener } from '@vueuse/core'\nimport { EVENT_CODE } from '@hongluan-ui/constants'\n\nimport type { Ref } from 'vue'\nimport type TreeStore from './tree-store'\n\nimport type { Nullable } from '@hongluan-ui/utils'\ninterface UseKeydownOption {\n el$: Ref<HTMLElement>\n}\nexport function useKeydown({ el$ }: UseKeydownOption, store: Ref<TreeStore>) {\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(el$.value.querySelectorAll('input[type=checkbox]'))\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.indexOf('tree-node') === -1) return\n const code = ev.code\n treeItems.value = Array.from(el$.value.querySelectorAll('.is-focusable[role=treeitem]'))\n const currentIndex = treeItems.value.indexOf(currentItem)\n let nextIndex\n if ([EVENT_CODE.up, EVENT_CODE.down].indexOf(code) > -1) {\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].indexOf(code) > -1) {\n ev.preventDefault()\n currentItem.click()\n }\n const hasInput = currentItem.querySelector('[type=\"checkbox\"]') as Nullable<HTMLInputElement>\n if ([EVENT_CODE.enter, EVENT_CODE.space].indexOf(code) > -1 && hasInput) {\n ev.preventDefault()\n hasInput.click()\n }\n }\n\n const initTabIndex = (): void => {\n treeItems.value = Array.from(el$.value.querySelectorAll('.is-focusable[role=treeitem]'))\n checkboxItems.value = Array.from(el$.value.querySelectorAll('input[type=checkbox]'))\n const checkedItem = el$.value.querySelectorAll('.is-checked[role=treeitem]')\n if (checkedItem.length) {\n checkedItem[0].setAttribute('tabindex', '0')\n return\n }\n treeItems.value[0]?.setAttribute('tabindex', '0')\n }\n\n useEventListener(el$, 'keydown', handleKeydown)\n}\n"],"names":[],"mappings":"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"}