vuestic-ui
Version:
Vue 3 UI Framework
76 lines (75 loc) • 1.84 kB
JavaScript
import { ref, unref } from "vue";
function isUndefined(t) {
return t === void 0;
}
const useGridKeyboardNavigation = ({
rowSize,
start,
end,
onSelected,
onFocusIndex
}) => {
const focusedCellIndex = ref(-1);
let previouslyClicked = false;
const onMousedown = () => {
previouslyClicked = true;
};
const onFocus = () => {
if (previouslyClicked) {
return;
}
previouslyClicked = false;
const index = onFocusIndex === void 0 ? unref(start) || 0 : unref(onFocusIndex);
focusedCellIndex.value = index;
};
const onBlur = () => {
previouslyClicked = false;
focusedCellIndex.value = -1;
};
const onKeydown = (e) => {
if (["ArrowRight", "ArrowLeft", "ArrowDown", "ArrowUp", "Enter", "Space"].includes(e.key)) {
e.preventDefault();
e.stopPropagation();
}
if (e.key === "Enter" || e.key === "Space") {
if (onSelected === void 0) {
return;
}
onSelected(focusedCellIndex.value);
return;
}
if (e.key === "ArrowRight") {
focusedCellIndex.value += 1;
}
if (e.key === "ArrowLeft") {
focusedCellIndex.value -= 1;
}
if (e.key === "ArrowDown") {
focusedCellIndex.value += rowSize;
}
if (e.key === "ArrowUp") {
focusedCellIndex.value -= rowSize;
}
if (!isUndefined(start) && focusedCellIndex.value < unref(start)) {
focusedCellIndex.value = unref(start);
}
if (!isUndefined(end) && focusedCellIndex.value > unref(end) - 1) {
focusedCellIndex.value = unref(end) - 1;
}
};
const containerAttributes = {
onFocus,
onKeydown,
onBlur,
onMousedown,
tabindex: 0
};
return {
focusedCellIndex,
containerAttributes
};
};
export {
useGridKeyboardNavigation as u
};
//# sourceMappingURL=grid-keyboard-navigation.mjs.map