vuestic-ui
Version:
Vue 3 UI Framework
136 lines (135 loc) • 4.64 kB
JavaScript
const useTreeKeyboardNavigation = (props, methods) => {
const { emit, toggleNode, toggleCheckbox } = methods;
const isElementExpanded = (currentElement) => (currentElement == null ? void 0 : currentElement.getAttribute("aria-expanded")) === "true";
const getParentElement = (currentElement) => {
var _a;
return ((_a = currentElement == null ? void 0 : currentElement.parentElement) == null ? void 0 : _a.closest(".va-tree-node")) || null;
};
const getPreviousElement = (currentElement) => currentElement == null ? void 0 : currentElement.previousElementSibling;
const findPreviousElement = (currentElement) => {
if (!currentElement) {
return null;
}
let previousElement = getPreviousElement(currentElement);
let lastChildElement = isElementExpanded(previousElement) && getLastChildElement(previousElement);
if (lastChildElement) {
do {
if (isElementExpanded(lastChildElement)) {
lastChildElement = getLastChildElement(lastChildElement);
if (lastChildElement) {
continue;
} else {
break;
}
} else {
previousElement = lastChildElement;
break;
}
} while (true);
}
if (!previousElement) {
return getParentElement(currentElement);
}
return previousElement;
};
const getNextElement = (currentElement) => currentElement == null ? void 0 : currentElement.nextElementSibling;
const findNextElement = (currentElement) => {
if (!currentElement) {
return null;
}
let nextElement = getNextElement(currentElement);
const isCurrentExpanded = isElementExpanded(currentElement);
if (!nextElement) {
let parentElement = getParentElement(currentElement);
do {
if (!getNextElement(parentElement)) {
parentElement = getParentElement(parentElement);
if (!parentElement) {
break;
} else {
continue;
}
} else {
nextElement = getNextElement(parentElement);
break;
}
} while (true);
}
if (isCurrentExpanded) {
return getFirstChildElement(currentElement);
}
return nextElement;
};
const getFirstChildElement = (currentElement) => {
var _a;
return ((_a = currentElement == null ? void 0 : currentElement.querySelector(".va-tree-node-children")) == null ? void 0 : _a.firstElementChild) || null;
};
const getLastChildElement = (currentElement) => {
var _a;
return ((_a = currentElement == null ? void 0 : currentElement.querySelector(".va-tree-node-children")) == null ? void 0 : _a.lastElementChild) || null;
};
const onHorizontalMove = (currentElement, dir, node) => {
var _a, _b;
const isCurrentElementExpanded = isElementExpanded(currentElement);
if (dir === "left") {
if (isCurrentElementExpanded) {
toggleNode(node);
} else {
(_a = getParentElement(currentElement)) == null ? void 0 : _a.focus();
}
} else {
if (!isCurrentElementExpanded) {
toggleNode(node);
} else {
(_b = getFirstChildElement(currentElement)) == null ? void 0 : _b.focus();
}
}
};
const onVerticalMove = (currentElement, dir) => {
var _a, _b;
if (dir === "up") {
(_a = findPreviousElement(currentElement)) == null ? void 0 : _a.focus();
} else {
(_b = findNextElement(currentElement)) == null ? void 0 : _b.focus();
}
};
const handleKeyboardNavigation = (event, node) => {
const currentElement = event.target;
switch (event.code) {
case "ArrowUp":
onVerticalMove(currentElement, "up");
break;
case "ArrowRight":
onHorizontalMove(currentElement, "right", node);
break;
case "ArrowDown":
onVerticalMove(currentElement, "down");
break;
case "ArrowLeft":
onHorizontalMove(currentElement, "left", node);
break;
case "Space":
if (props.selectable) {
const state = typeof node.checked !== "undefined" ? !node.checked : null;
toggleCheckbox(node, state);
} else {
emit("update:selected", node);
}
break;
case "Escape":
if (!props.selectable) {
emit("update:selected", null);
}
currentElement.blur();
break;
default:
currentElement.blur();
}
};
return { handleKeyboardNavigation };
};
const useTreeKeyboardNavigation$1 = useTreeKeyboardNavigation;
export {
useTreeKeyboardNavigation$1 as u
};
//# sourceMappingURL=useTreeKeyboardNavigation.js.map