Vanessa 2024-04-10 22:01:21 +08:00
parent b0fecae66e
commit d08ffd8f41
2 changed files with 8 additions and 11 deletions

View file

@ -17,13 +17,12 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[
selected.push(item.dataset.content);
});
}
const checkedName = document.querySelector('.av__panel .b3-menu__item--current[data-type="addColOptionOrCell"]')?.getAttribute("data-name") || "";
if (options) {
options.forEach(item => {
if (!key ||
(key.toLowerCase().indexOf(item.name.toLowerCase()) > -1 ||
item.name.toLowerCase().indexOf(key.toLowerCase()) > -1)) {
html += `<button data-type="addColOptionOrCell" class="b3-menu__item${checkedName === item.name ? " b3-menu__item--current" : ""}" data-name="${item.name}" draggable="true" data-color="${item.color}">
html += `<button data-type="addColOptionOrCell" class="b3-menu__item" data-name="${item.name}" draggable="true" data-color="${item.color}">
<svg class="b3-menu__icon fn__grab"><use xlink:href="#iconDrag"></use></svg>
<div class="fn__flex-1">
<span class="b3-chip" style="background-color:var(--b3-font-background${item.color});color:var(--b3-font-color${item.color})">
@ -40,7 +39,6 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[
});
}
if (!hasMatch && key) {
html = html.replace('class="b3-menu__item b3-menu__item--current"', 'class="b3-menu__item"');
const colorIndex = (options?.length || 0) % 13 + 1;
html = `<button data-type="addColOptionOrCell" class="b3-menu__item b3-menu__item--current" data-name="${key}" data-color="${colorIndex}">
<svg class="b3-menu__icon"><use xlink:href="#iconAdd"></use></svg>
@ -51,12 +49,6 @@ const filterSelectHTML = (key: string, options: { name: string, color: string }[
</div>
<span class="b3-menu__accelerator">Enter</span>
</button>${html}`;
} else if (html.indexOf("b3-menu__item--current") === -1) {
if (key) {
html = html.replace(`class="b3-menu__item" data-name="${key}"`, `class="b3-menu__item b3-menu__item--current" data-name="${key}"`);
} else {
html = html.replace('class="b3-menu__item"', 'class="b3-menu__item b3-menu__item--current"');
}
}
return html;
};
@ -423,7 +415,7 @@ export const bindSelectEvent = (protyle: IProtyle, data: IAV, menuElement: HTMLE
if (event.isComposing) {
return;
}
let currentElement = upDownHint(listElement, event, "b3-menu__item--current");
let currentElement = upDownHint(listElement, event, "b3-menu__item--current", listElement.firstElementChild);
if (event.key === "Enter") {
if (!currentElement) {
currentElement = menuElement.querySelector(".b3-menu__item--current");

View file

@ -2,8 +2,13 @@ const isNormalItem = (currentHintElement: HTMLElement, className: string) => {
return currentHintElement.classList.contains("fn__none") || !currentHintElement.classList.contains(className);
};
export const upDownHint = (listElement: Element, event: KeyboardEvent, classActiveName = "b3-list-item--focus") => {
export const upDownHint = (listElement: Element, event: KeyboardEvent, classActiveName = "b3-list-item--focus", defaultElement?: Element) => {
let currentHintElement: HTMLElement = listElement.querySelector("." + classActiveName);
if (!currentHintElement && defaultElement) {
defaultElement.classList.add(classActiveName);
defaultElement.scrollIntoView(true);
return;
}
if (!currentHintElement) {
return;
}