@reliability-design/web 1.0.2

package/dist/components/rel-menu/rel-menu.ts

@@ -0,0 +1,319 @@
+import { LitElement, html, css } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+
+export type MenuType = "default" | "checkbox" | "arrow";
+
+export interface MenuItem {
+  label: string;
+  active?: boolean;
+  checked?: boolean;
+  disabled?: boolean;
+  submenu?: MenuItem[];
+  open?: boolean;
+}
+
+@customElement("rel-menu")
+export class RelMenu extends LitElement {
+  @property({ type: String }) type: MenuType = "default";
+
+  @property({ type: Array }) items: MenuItem[] = [];
+
+  @state() private focusedIndex: number = 0;
+
+  static styles = css`
+    :host {
+      display: inline-block;
+    }
+
+    .rel-menu {
+      position: relative;
+      display: inline-block;
+      background: var(--rel-colors-white);
+      border-radius: var(--rel-borders-radius-border-radius-300);
+      box-shadow: var(--rel-shadows-shadow-300);
+      min-width: 220px;
+      font-family: var(--rel-fontFamilies-primary);
+      font-size: var(--rel-fontSizes-sm);
+      padding: var(--rel-spacing-space-3xs) 0;
+      outline: none;
+    }
+
+    .rel-menu-item {
+      position: relative;
+      display: flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-xs);
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+      line-height: var(--rel-lineHeights-sm);
+      cursor: pointer;
+      transition: background 0.15s ease, color 0.15s ease;
+      user-select: none;
+    }
+
+    .rel-menu-item:hover {
+      background: var(--rel-colors-gray-border);
+    }
+
+    .rel-menu-item:active {
+      background: var(--rel-colors-gray-tertiary);
+    }
+
+    .rel-menu-item.active {
+      background: var(--rel-colors-gray-tertiary);
+    }
+
+    .rel-menu-item.disabled {
+      background-color: var(--rel-colors-gray-light);
+      color: var(--rel-colors-gray-placeholder);
+      cursor: not-allowed;
+    }
+
+    .rel-menu-item[data-focused="true"] {
+      border-top: var(--rel-borders-width-stroke-200) solid var(--rel-colors-gray-primary);
+      border-bottom: var(--rel-borders-width-stroke-200) solid var(--rel-colors-gray-primary);
+    }
+
+    .menu-check-row {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--rel-spacing-space-2xs);
+      width: 100%;
+    }
+
+    .menu-checkbox {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+    }
+
+    .menu-checkbox:disabled {
+      cursor: not-allowed;
+    }
+
+    .menu-label {
+      flex: 1 1 auto;
+    }
+
+    .chevron {
+      font-size: var(--rel-fontSizes-lg);
+      opacity: 0.75;
+      transform: translateY(1px);
+    }
+
+    .rel-submenu {
+      position: absolute;
+      top: calc(-1 * var(--rel-spacing-space-3xs));
+      left: calc(100% + var(--rel-spacing-space-2xs));
+      min-width: 200px;
+      background: var(--rel-colors-white);
+      border-radius: var(--rel-borders-radius-border-radius-300);
+      box-shadow: var(--rel-shadows-shadow-300);
+      padding: var(--rel-spacing-space-3xs) 0;
+      display: none;
+      z-index: 20;
+    }
+
+    .rel-submenu.visible {
+      display: block;
+    }
+
+    .rel-submenu .rel-menu-item {
+      padding: var(--rel-spacing-space-xs) var(--rel-spacing-space-sm);
+    }
+  `;
+
+  connectedCallback() {
+    super.connectedCallback();
+    document.addEventListener("click", this.handleDocumentClick);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    document.removeEventListener("click", this.handleDocumentClick);
+  }
+
+  private handleDocumentClick = (e: MouseEvent) => {
+    const path = e.composedPath() as HTMLElement[];
+    const hit = path.some((n) => n?.classList?.contains("rel-menu"));
+    if (!hit) {
+      this.items.forEach((i) => (i.open = false));
+      this.requestUpdate();
+    }
+  };
+
+  private onItemEnter(item: MenuItem) {
+    if (this.type === "arrow" && item.submenu?.length) {
+      this.items.forEach((i) => {
+        if (i !== item) i.open = false;
+      });
+      item.open = true;
+      this.requestUpdate();
+    }
+  }
+
+  private onItemLeave(_item: MenuItem) {
+    // Keep open so user can move into submenu
+  }
+
+  private onItemClick(item: MenuItem, index: number, ev?: Event) {
+    ev?.stopPropagation();
+    if (item.disabled) return;
+
+    this.focusedIndex = index;
+
+    if (this.type === "checkbox") {
+      item.checked = !item.checked;
+      this.dispatchEvent(
+        new CustomEvent("item-checked", {
+          detail: { item, checked: item.checked },
+          bubbles: true,
+          composed: true,
+        })
+      );
+      this.requestUpdate();
+      return;
+    }
+
+    if (this.type === "arrow" && item.submenu?.length) {
+      const next = !item.open;
+      this.items.forEach((i) => (i.open = false));
+      item.open = next;
+      this.requestUpdate();
+      return;
+    }
+
+    // Default: set active
+    this.items.forEach((i) => (i.active = false));
+    item.active = true;
+    this.dispatchEvent(
+      new CustomEvent("item-selected", {
+        detail: { item },
+        bubbles: true,
+        composed: true,
+      })
+    );
+    this.requestUpdate();
+  }
+
+  private onSubClick(parent: MenuItem, sub: MenuItem, ev?: Event) {
+    ev?.stopPropagation();
+    this.items.forEach((i) => {
+      i.active = false;
+      i.submenu?.forEach((s) => (s.active = false));
+    });
+    sub.active = true;
+    parent.open = false;
+    this.dispatchEvent(
+      new CustomEvent("submenu-selected", {
+        detail: { parent, sub },
+        bubbles: true,
+        composed: true,
+      })
+    );
+    this.requestUpdate();
+  }
+
+  private toggleCheckbox(item: MenuItem, ev: Event) {
+    ev.stopPropagation();
+    if (!item.disabled) {
+      item.checked = !item.checked;
+      this.dispatchEvent(
+        new CustomEvent("item-checked", {
+          detail: { item, checked: item.checked },
+          bubbles: true,
+          composed: true,
+        })
+      );
+      this.requestUpdate();
+    }
+  }
+
+  private onKeydown(ev: KeyboardEvent) {
+    const last = this.items.length - 1;
+
+    if (ev.key === "ArrowDown") {
+      this.focusedIndex = Math.min(last, this.focusedIndex + 1);
+      ev.preventDefault();
+    } else if (ev.key === "ArrowUp") {
+      this.focusedIndex = Math.max(0, this.focusedIndex - 1);
+      ev.preventDefault();
+    } else if (ev.key === "ArrowRight") {
+      const item = this.items[this.focusedIndex];
+      if (this.type === "arrow" && item?.submenu?.length) {
+        item.open = true;
+        this.requestUpdate();
+      }
+    } else if (ev.key === "ArrowLeft" || ev.key === "Escape") {
+      this.items.forEach((i) => (i.open = false));
+      this.requestUpdate();
+    } else if (ev.key === "Enter" || ev.key === " ") {
+      const item = this.items[this.focusedIndex];
+      this.onItemClick(item, this.focusedIndex);
+      ev.preventDefault();
+    }
+  }
+
+  private renderMenuItem(item: MenuItem, index: number) {
+    const isFocused = this.focusedIndex === index;
+
+    return html`
+      <div
+        class="rel-menu-item ${item.active ? "active" : ""} ${item.disabled ? "disabled" : ""}"
+        role="menuitem"
+        ?data-focused="${isFocused}"
+        @mouseenter="${() => this.onItemEnter(item)}"
+        @mouseleave="${() => this.onItemLeave(item)}"
+        @click="${(e: Event) => this.onItemClick(item, index, e)}">
+        ${this.type === "checkbox"
+          ? html`
+              <div class="menu-check-row">
+                <input
+                  class="menu-checkbox"
+                  type="checkbox"
+                  .checked="${item.checked || false}"
+                  ?disabled="${item.disabled}"
+                  @click="${(e: Event) => this.toggleCheckbox(item, e)}" />
+                <span class="menu-label">${item.label}</span>
+              </div>
+            `
+          : html`
+              <span class="menu-label">${item.label}</span>
+              ${this.type === "arrow" && item.submenu?.length
+                ? html`<span class="chevron">▸</span>`
+                : ""}
+            `}
+        ${this.type === "arrow" && item.submenu?.length
+          ? html`
+              <div
+                class="rel-submenu ${item.open ? "visible" : ""}"
+                @click="${(e: Event) => e.stopPropagation()}">
+                ${item.submenu.map(
+                  (sub) => html`
+                    <div
+                      class="rel-menu-item ${sub.active ? "active" : ""}"
+                      role="menuitem"
+                      @click="${(e: Event) => this.onSubClick(item, sub, e)}">
+                      <span class="menu-label">${sub.label}</span>
+                    </div>
+                  `
+                )}
+              </div>
+            `
+          : ""}
+      </div>
+    `;
+  }
+
+  render() {
+    return html`
+      <div
+        class="rel-menu"
+        role="menu"
+        tabindex="0"
+        @keydown="${this.onKeydown}"
+        @click="${(e: Event) => e.stopPropagation()}">
+        ${this.items.map((item, index) => this.renderMenuItem(item, index))}
+      </div>
+    `;
+  }
+}