return this;
}
+ addLink(label: string, href: string): this {
+ const link = document.createElement("a");
+ link.href = href;
+ link.setAttribute("role", "menuitem");
+ link.textContent = label;
+ this.#menu.append(link);
+
+ return this;
+ }
+
addDivider(): this {
const divider = document.createElement("woltlab-core-menu-separator");
this.#menu.append(divider);
import WoltlabCoreMenuGroupElement from "./woltlab-core-menu-group";
import WoltlabCoreMenuItemElement from "./woltlab-core-menu-item";
-type MenuChild = WoltlabCoreMenuGroupElement | WoltlabCoreMenuItemElement;
+type MenuChild = HTMLAnchorElement | WoltlabCoreMenuGroupElement | WoltlabCoreMenuItemElement;
interface WoltlabCoreMenuEventMap {
change: CustomEvent;
slot.addEventListener("slotchange", () => {
for (const element of slot.assignedElements()) {
- if (!(element instanceof WoltlabCoreMenuGroupElement) && !(element instanceof WoltlabCoreMenuItemElement)) {
+ if (
+ !(element instanceof HTMLAnchorElement) &&
+ !(element instanceof WoltlabCoreMenuGroupElement) &&
+ !(element instanceof WoltlabCoreMenuItemElement)
+ ) {
element.remove();
continue;
}
continue;
}
+ if (element instanceof HTMLAnchorElement) {
+ if (element.href === "" || element.href === "#") {
+ throw new Error(
+ "Anchor elements may only use for actual navigation and must contain a valid 'href' target. Use a `<woltlab-core-menu-item>` button for non navigational items.",
+ {
+ cause: { element },
+ },
+ );
+ }
+
+ element.setAttribute("role", "menuitem");
+ }
+
this.#items.add(element);
element.addEventListener("change", () => {
if (item instanceof WoltlabCoreMenuGroupElement) {
item.value = "";
- } else {
+ } else if (item instanceof WoltlabCoreMenuItemElement) {
item.selected = false;
}
});
get value(): string {
for (const item of Array.from(this.#items)) {
+ if (item instanceof HTMLAnchorElement) {
+ continue;
+ }
+
const value = item.value;
if (item instanceof WoltlabCoreMenuGroupElement) {
this.#menu.append(item);
return this;
}
+ addLink(label, href) {
+ const link = document.createElement("a");
+ link.href = href;
+ link.setAttribute("role", "menuitem");
+ link.textContent = label;
+ this.#menu.append(link);
+ return this;
+ }
addDivider() {
const divider = document.createElement("woltlab-core-menu-separator");
this.#menu.append(divider);
shadow.append(slot);
slot.addEventListener("slotchange", () => {
for (const element of slot.assignedElements()) {
- if (!(element instanceof woltlab_core_menu_group_1.default) && !(element instanceof woltlab_core_menu_item_1.default)) {
+ if (!(element instanceof HTMLAnchorElement) &&
+ !(element instanceof woltlab_core_menu_group_1.default) &&
+ !(element instanceof woltlab_core_menu_item_1.default)) {
element.remove();
continue;
}
if (this.#items.has(element)) {
continue;
}
+ if (element instanceof HTMLAnchorElement) {
+ if (element.href === "" || element.href === "#") {
+ throw new Error("Anchor elements may only use for actual navigation and must contain a valid 'href' target. Use a `<woltlab-core-menu-item>` button for non navigational items.", {
+ cause: { element },
+ });
+ }
+ element.setAttribute("role", "menuitem");
+ }
this.#items.add(element);
element.addEventListener("change", () => {
this.#items.forEach((item) => {
if (item instanceof woltlab_core_menu_group_1.default) {
item.value = "";
}
- else {
+ else if (item instanceof woltlab_core_menu_item_1.default) {
item.selected = false;
}
});
}
get value() {
for (const item of Array.from(this.#items)) {
+ if (item instanceof HTMLAnchorElement) {
+ continue;
+ }
const value = item.value;
if (item instanceof woltlab_core_menu_group_1.default) {
if (value !== "") {