this.#items.add(element);
- element.setRole("menuitemcheckbox");
+ if (this.multiple) {
+ element.setRole("menuitemcheckbox");
+ } else {
+ element.setRole("menuitemradio");
+ }
element.addEventListener("change", () => {
+ if (!this.multiple) {
+ this.#items.forEach((item) => {
+ item.selected = item === element;
+ });
+ }
+
this.#updateValue();
});
}
this.label = this.getAttribute("label")!;
}
+ get multiple(): boolean {
+ return this.hasAttribute("multiple");
+ }
+
get label(): string {
return this.getAttribute("label")!;
}
-type Role = "menuitem" | "menuitemcheckbox";
+type Role = "menuitem" | "menuitemcheckbox" | "menuitemradio";
interface WoltlabCoreMenuItemEventMap {
beforeSelect: CustomEvent;
return;
}
+ const role = this.getAttribute("role") as Role;
+ if (role === "menuitemradio" && this.selected) {
+ return;
+ }
+
const evt = new CustomEvent("beforeSelect", {
cancelable: true,
});
if (role === "menuitem") {
this.#checkmark?.remove();
- } else if (role === "menuitemcheckbox") {
+ } else if (role === "menuitemcheckbox" || role === "menuitemradio") {
if (this.#checkmark === undefined) {
this.#checkmark = document.createElement("fa-icon");
this.#checkmark.setIcon("check");
#updateAriaSelected(): void {
const role = this.getAttribute("role") as Role;
- if (role === "menuitemcheckbox") {
+ if (role === "menuitemcheckbox" || role === "menuitemradio") {
this.setAttribute("aria-checked", String(this.selected === true));
}
}
continue;
}
this.#items.add(element);
- element.setRole("menuitemcheckbox");
+ if (this.multiple) {
+ element.setRole("menuitemcheckbox");
+ }
+ else {
+ element.setRole("menuitemradio");
+ }
element.addEventListener("change", () => {
+ if (!this.multiple) {
+ this.#items.forEach((item) => {
+ item.selected = item === element;
+ });
+ }
this.#updateValue();
});
}
this.setAttribute("role", "group");
this.label = this.getAttribute("label");
}
+ get multiple() {
+ return this.hasAttribute("multiple");
+ }
get label() {
return this.getAttribute("label");
}
if (this.disabled) {
return;
}
+ const role = this.getAttribute("role");
+ if (role === "menuitemradio" && this.selected) {
+ return;
+ }
const evt = new CustomEvent("beforeSelect", {
cancelable: true,
});
if (role === "menuitem") {
this.#checkmark?.remove();
}
- else if (role === "menuitemcheckbox") {
+ else if (role === "menuitemcheckbox" || role === "menuitemradio") {
if (this.#checkmark === undefined) {
this.#checkmark = document.createElement("fa-icon");
this.#checkmark.setIcon("check");
}
#updateAriaSelected() {
const role = this.getAttribute("role");
- if (role === "menuitemcheckbox") {
+ if (role === "menuitemcheckbox" || role === "menuitemradio") {
this.setAttribute("aria-checked", String(this.selected === true));
}
}