element-plus
Version:
A Component Library for Vue 3
107 lines (104 loc) • 3.7 kB
JavaScript
import { inject, computed, ref } from 'vue';
import '../../../utils/index.mjs';
import '../../../constants/index.mjs';
import '../../../hooks/index.mjs';
import { useNamespace } from '../../../hooks/use-namespace/index.mjs';
import { useId } from '../../../hooks/use-id/index.mjs';
import { EVENT_CODE } from '../../../constants/aria.mjs';
import { addClass } from '../../../utils/dom/style.mjs';
const useDropdown = () => {
const elDropdown = inject("elDropdown", {});
const _elDropdownSize = computed(() => elDropdown == null ? void 0 : elDropdown.dropdownSize);
return {
elDropdown,
_elDropdownSize
};
};
const initDropdownDomEvent = (dropdownChildren, triggerElm, _instance) => {
const ns = useNamespace("dropdown");
const menuItems = ref(null);
const menuItemsArray = ref(null);
const dropdownElm = ref(null);
const listId = useId();
dropdownElm.value = dropdownChildren == null ? void 0 : dropdownChildren.subTree.el;
function removeTabindex() {
var _a;
triggerElm.setAttribute("tabindex", "-1");
(_a = menuItemsArray.value) == null ? void 0 : _a.forEach((item) => {
item.setAttribute("tabindex", "-1");
});
}
function resetTabindex(ele) {
removeTabindex();
ele == null ? void 0 : ele.setAttribute("tabindex", "0");
}
function handleTriggerKeyDown(ev) {
const code = ev.code;
if ([EVENT_CODE.up, EVENT_CODE.down].includes(code)) {
removeTabindex();
resetTabindex(menuItems.value[0]);
menuItems.value[0].focus();
ev.preventDefault();
ev.stopPropagation();
} else if (code === EVENT_CODE.enter) {
_instance.handleClick();
} else if ([EVENT_CODE.tab, EVENT_CODE.esc].includes(code)) {
_instance.hide();
}
}
function handleItemKeyDown(ev) {
const code = ev.code;
const target = ev.target;
const currentIndex = menuItemsArray.value.indexOf(target);
const max = menuItemsArray.value.length - 1;
let nextIndex;
if ([EVENT_CODE.up, EVENT_CODE.down].includes(code)) {
if (code === EVENT_CODE.up) {
nextIndex = currentIndex !== 0 ? currentIndex - 1 : 0;
} else {
nextIndex = currentIndex < max ? currentIndex + 1 : max;
}
removeTabindex();
resetTabindex(menuItems.value[nextIndex]);
menuItems.value[nextIndex].focus();
ev.preventDefault();
ev.stopPropagation();
} else if (code === EVENT_CODE.enter) {
triggerElmFocus();
target.click();
if (_instance.props.hideOnClick) {
_instance.hide();
}
} else if ([EVENT_CODE.tab, EVENT_CODE.esc].includes(code)) {
_instance.hide();
triggerElmFocus();
}
}
function initAria() {
dropdownElm.value.setAttribute("id", listId.value);
triggerElm.setAttribute("aria-haspopup", "list");
triggerElm.setAttribute("aria-controls", listId.value);
if (!_instance.props.splitButton) {
triggerElm.setAttribute("role", "button");
triggerElm.setAttribute("tabindex", _instance.props.tabindex);
addClass(triggerElm, ns.b("selfdefine"));
}
}
function initEvent() {
var _a;
triggerElm == null ? void 0 : triggerElm.addEventListener("keydown", handleTriggerKeyDown);
(_a = dropdownElm.value) == null ? void 0 : _a.addEventListener("keydown", handleItemKeyDown, true);
}
function initDomOperation() {
menuItems.value = dropdownElm.value.querySelectorAll("[tabindex='-1']");
menuItemsArray.value = Array.from(menuItems.value);
initEvent();
initAria();
}
function triggerElmFocus() {
triggerElm.focus();
}
initDomOperation();
};
export { initDropdownDomEvent, useDropdown };
//# sourceMappingURL=useDropdown.mjs.map