@fluixi/devtools 0.2.0-alpha.2 → 0.2.0-alpha.4

package/dist/menu.mjs

@@ -0,0 +1,120 @@
+// src/menu.ts
+function createMenu(host, options) {
+  const doc = host.ownerDocument;
+  const root = doc.createElement("div");
+  root.className = "fx-menu";
+  const button = doc.createElement("button");
+  button.type = "button";
+  button.className = "fx-menu-button fx-dropdown-btn";
+  button.setAttribute("aria-haspopup", "true");
+  button.setAttribute("aria-expanded", "false");
+  if (options.hint) button.title = options.hint;
+  const caret = doc.createElement("div");
+  caret.className = "fx-dropdown-caret";
+  const panel = doc.createElement("div");
+  panel.className = "fx-menu-panel";
+  if (options.menuClass) {
+    panel.classList.add(...options.menuClass.split(/\s+/).filter((c) => c));
+  }
+  panel.hidden = true;
+  const boxes = /* @__PURE__ */ new Map();
+  for (const item of options.items) {
+    if (item.type === "action") {
+      const run = doc.createElement("button");
+      run.type = "button";
+      run.className = "fx-menu-action";
+      run.textContent = item.label;
+      if (item.hint) run.title = item.hint;
+      run.addEventListener("click", () => {
+        close();
+        item.onRun();
+      });
+      panel.append(run);
+      continue;
+    }
+    const box = doc.createElement("input");
+    box.type = "checkbox";
+    box.checked = item.on === true;
+    const row = doc.createElement("label");
+    if (item.hint) row.title = item.hint;
+    row.append(box, doc.createTextNode(item.label));
+    box.addEventListener("change", () => {
+      paint();
+      item.onChange(box.checked);
+    });
+    panel.append(row);
+    boxes.set(item.label, box);
+  }
+  root.append(button, panel);
+  host.append(root);
+  function paint() {
+    let on = 0;
+    for (const box of boxes.values()) if (box.checked) on++;
+    button.textContent = on ? `${options.label} · ${on}` : options.label;
+    button.appendChild(caret);
+    button.classList.toggle("on", on > 0);
+  }
+  function close() {
+    panel.hidden = true;
+    button.setAttribute("aria-expanded", "false");
+  }
+  button.addEventListener("click", (event) => {
+    event.stopPropagation();
+    panel.hidden = !panel.hidden;
+    button.setAttribute("aria-expanded", String(!panel.hidden));
+  });
+  panel.addEventListener("click", (event) => event.stopPropagation());
+  const away = () => close();
+  const key = (event) => {
+    if (event.key === "Escape") close();
+  };
+  doc.addEventListener("click", away);
+  doc.addEventListener("keydown", key);
+  paint();
+  return {
+    set(label, on) {
+      const box = boxes.get(label);
+      if (!box) return;
+      box.checked = on;
+      paint();
+    },
+    destroy() {
+      doc.removeEventListener("click", away);
+      doc.removeEventListener("keydown", key);
+      root.remove();
+    }
+  };
+}
+var MENU_CSS = `
+/* The button itself is styled by DROPDOWN_FILTER_CSS, shared with the kind filter. */
+.fx-menu { position: relative; display: inline-flex; }
+.fx-menu-button { white-space: nowrap; position: relative; padding-inline-end: 1.1rem; }
+/* hidden is display:none from the user agent, which a class setting display outranks. */
+.fx-menu-panel[hidden] { display: none; }
+.fx-menu-panel {
+  position: absolute; top: calc(100% + 4px); z-index: 40;
+  display: grid; gap: 2px; padding: 6px 8px; min-width: 150px;
+  background: var(--fx-panel, #14161c);
+  border: 1px solid var(--fx-line, #262a35); border-radius: 6px;
+  box-shadow: 0 6px 18px rgba(0, 0, 0, .38);
+}
+.fx-menu-panel:not(.fx-panel-left){ right: 0; }
+.fx-menu-panel.fx-panel-left { left: 0; }
+.fx-menu-panel label {
+  display: flex; align-items: center; gap: 6px;
+  font-size: 11px; color: var(--fx-muted, #8a90a2); cursor: pointer; user-select: none;
+}
+.fx-menu-panel label:hover { color: var(--fx-label, #e7e9ee); }
+.fx-menu-panel input { width: 11px; height: 11px; margin: 0; accent-color: var(--fx-accent, #5eead4); }
+.fx-menu-action {
+  text-align: left; padding: 2px 0; border: 0; background: none; cursor: pointer;
+  font: inherit; font-size: 11px; color: var(--fx-muted, #8a90a2);
+  /* A button does not inherit this, so an action read lowercase beside uppercase toggles. */
+  text-transform: inherit; letter-spacing: inherit;
+}
+.fx-menu-action:hover { color: var(--fx-accent, #5eead4); }
+`;
+export {
+  MENU_CSS,
+  createMenu
+};