139a7367f7eda3cc7a637e48a89f20db8a0995196cdb1d3aec44a853def323a8c563a6f0335afd3c7e128bde0d73f3a0c75748d75d92883296ffcbbdc6bd55 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101
  1. 'use strict';
  2. Object.defineProperty(exports, '__esModule', { value: true });
  3. var vue = require('vue');
  4. var core = require('@vueuse/core');
  5. var index = require('../../../../hooks/use-namespace/index.js');
  6. var aria = require('../../../../constants/aria.js');
  7. function useKeydown({ el$ }, store) {
  8. const ns = index.useNamespace("tree");
  9. vue.onMounted(() => {
  10. initTabIndex();
  11. });
  12. vue.onUpdated(() => {
  13. const checkboxItems = Array.from(el$.value.querySelectorAll("input[type=checkbox]"));
  14. checkboxItems.forEach((checkbox) => {
  15. checkbox.setAttribute("tabindex", "-1");
  16. });
  17. });
  18. function canNodeFocus(treeItems, nextIndex) {
  19. var _a, _b;
  20. const currentNode = store.value.getNode(treeItems[nextIndex].dataset.key);
  21. return currentNode.canFocus && currentNode.visible && (((_a = currentNode.parent) == null ? void 0 : _a.expanded) || ((_b = currentNode.parent) == null ? void 0 : _b.level) === 0);
  22. }
  23. const handleKeydown = (ev) => {
  24. const currentItem = ev.target;
  25. if (!currentItem.className.includes(ns.b("node")))
  26. return;
  27. const code = ev.code;
  28. const treeItems = Array.from(el$.value.querySelectorAll(`.${ns.is("focusable")}[role=treeitem]`));
  29. const currentIndex = treeItems.indexOf(currentItem);
  30. let nextIndex;
  31. if ([aria.EVENT_CODE.up, aria.EVENT_CODE.down].includes(code)) {
  32. ev.preventDefault();
  33. if (code === aria.EVENT_CODE.up) {
  34. nextIndex = currentIndex === -1 ? 0 : currentIndex !== 0 ? currentIndex - 1 : treeItems.length - 1;
  35. const startIndex = nextIndex;
  36. while (true) {
  37. if (canNodeFocus(treeItems, nextIndex)) {
  38. break;
  39. }
  40. nextIndex--;
  41. if (nextIndex === startIndex) {
  42. nextIndex = -1;
  43. break;
  44. }
  45. if (nextIndex < 0) {
  46. nextIndex = treeItems.length - 1;
  47. }
  48. }
  49. } else {
  50. nextIndex = currentIndex === -1 ? 0 : currentIndex < treeItems.length - 1 ? currentIndex + 1 : 0;
  51. const startIndex = nextIndex;
  52. while (true) {
  53. if (canNodeFocus(treeItems, nextIndex)) {
  54. break;
  55. }
  56. nextIndex++;
  57. if (nextIndex === startIndex) {
  58. nextIndex = -1;
  59. break;
  60. }
  61. if (nextIndex >= treeItems.length) {
  62. nextIndex = 0;
  63. }
  64. }
  65. }
  66. nextIndex !== -1 && treeItems[nextIndex].focus();
  67. }
  68. if ([aria.EVENT_CODE.left, aria.EVENT_CODE.right].includes(code)) {
  69. ev.preventDefault();
  70. currentItem.click();
  71. }
  72. const hasInput = currentItem.querySelector('[type="checkbox"]');
  73. if ([aria.EVENT_CODE.enter, aria.EVENT_CODE.numpadEnter, aria.EVENT_CODE.space].includes(code) && hasInput) {
  74. ev.preventDefault();
  75. hasInput.click();
  76. }
  77. };
  78. core.useEventListener(el$, "keydown", handleKeydown);
  79. const initTabIndex = () => {
  80. var _a;
  81. if (!el$.value)
  82. return;
  83. const treeItems = Array.from(el$.value.querySelectorAll(`.${ns.is("focusable")}[role=treeitem]`));
  84. const checkboxItems = Array.from(el$.value.querySelectorAll("input[type=checkbox]"));
  85. checkboxItems.forEach((checkbox) => {
  86. checkbox.setAttribute("tabindex", "-1");
  87. });
  88. const checkedItem = el$.value.querySelectorAll(`.${ns.is("checked")}[role=treeitem]`);
  89. if (checkedItem.length) {
  90. checkedItem[0].setAttribute("tabindex", "0");
  91. return;
  92. }
  93. (_a = treeItems[0]) == null ? void 0 : _a.setAttribute("tabindex", "0");
  94. };
  95. }
  96. exports.useKeydown = useKeydown;
  97. //# sourceMappingURL=useKeydown.js.map