easy-component-ui 2.1.0 → 3.0.0

package/dist/components/ea-menu.js

@@ -0,0 +1,417 @@
+var B = Object.defineProperty;
+var q = (s) => {
+  throw TypeError(s);
+};
+var I = (s, i, e) => i in s ? B(s, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[i] = e;
+var p = (s, i, e) => I(s, typeof i != "symbol" ? i + "" : i, e), R = (s, i, e) => i.has(s) || q("Cannot " + e);
+var t = (s, i, e) => (R(s, i, "read from private field"), e ? e.call(s) : i.get(s)), r = (s, i, e) => i.has(s) ? q("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, e), a = (s, i, e, o) => (R(s, i, "write to private field"), o ? o.call(s, e) : i.set(s, e), e);
+import { B as _ } from "./Base.js";
+import { s as N } from "../css/ea-menu.style.js";
+import { s as P } from "../css/ea-menu-item.style.js";
+import { s as T } from "../css/ea-menu-item-group.style.js";
+import { s as U } from "../css/ea-sub-menu.style.js";
+var u, c, A, v, E;
+class z extends _ {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    r(this, u);
+    /** @type {AbortController} */
+    r(this, c, new AbortController());
+    p(this, "state", this.properties({
+      mode: {
+        type: ["horizontal", "vertical"],
+        default: "vertical",
+        observer: (e) => {
+          t(this, A).call(this, e), this.updateContainerClasslist();
+        }
+      },
+      "background-color": {
+        type: String,
+        default: "#ffffff",
+        observer: (e) => {
+          t(this, u).style.setProperty("--ea-menu-bg-color", e);
+        }
+      },
+      "text-color": {
+        type: String,
+        default: "#303133",
+        observer: (e) => {
+          t(this, u).style.setProperty("--ea-menu-text-color", e);
+        }
+      },
+      "active-text-color": {
+        type: String,
+        default: "#409eff",
+        observer: (e) => {
+          t(this, u).style.setProperty(
+            "--ea-menu-active-text-color",
+            e
+          );
+        }
+      },
+      "default-active": {
+        type: String,
+        default: "",
+        observer: () => {
+        }
+      },
+      // TODO: 没写😋
+      collapse: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+        }
+      }
+      // TODO: 没写disabled😋
+    }));
+    /**
+     * 更新子菜单模式
+     * @param {string} mode
+     */
+    r(this, A, (e) => {
+      this.querySelectorAll("ea-sub-menu").forEach((o) => {
+        o.setAttribute("mode", e);
+      });
+    });
+    /**
+     * 处理菜单项点击事件
+     * @param {MouseEvent} e
+     */
+    r(this, v, (e) => {
+      const o = [...this.querySelectorAll("ea-menu-item")], l = [...this.querySelectorAll("ea-sub-menu")], b = e.target.closest("ea-menu-item");
+      if (e.target.closest("ea-sub-menu") || b) {
+        const L = (H) => H.removeAttribute("active");
+        o.forEach(L), l.forEach(L);
+      }
+      b && (b.toggleAttribute("active", !0), this.emit("select", {
+        detail: {
+          index: b.index || b.getAttribute("index"),
+          target: b
+        }
+      }));
+    });
+    /**
+     * 初始化默认激活项
+     */
+    r(this, E, () => {
+      const e = this.querySelector(
+        `ea-menu-item[index="${this["default-active"]}"]`
+      );
+      e && e.click();
+    });
+    this.stylesheet = N, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "mode",
+      "background-color",
+      "text-color",
+      "active-text-color",
+      "collapse",
+      "default-active"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist(
+      "ea-menu",
+      {
+        ["--" + this.mode]: this.mode
+      },
+      {}
+    );
+    return t(this, u).className = e, e;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <ul class='ea-menu' role="menubar" part='container'>
+        <slot></slot>
+      </ul>
+    `, a(this, u, this.shadowRoot.querySelector(".ea-menu")), this.updateContainerClasslist();
+  }
+  connectedCallback() {
+    var e;
+    super.connectedCallback(), (e = t(this, c)) == null || e.abort(), a(this, c, new AbortController()), this.addEventListener("click", t(this, v), {
+      signal: t(this, c).signal
+    }), this.addEventListener("ea-sub-menu-click", t(this, v), {
+      signal: t(this, c).signal
+    }), t(this, E).call(this);
+  }
+  $beforeUnmounted() {
+    t(this, c).abort();
+  }
+}
+u = new WeakMap(), c = new WeakMap(), A = new WeakMap(), v = new WeakMap(), E = new WeakMap();
+window.customElements.get("ea-menu") || window.customElements.define("ea-menu", z);
+var f;
+class D extends _ {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    r(this, f);
+    p(this, "state", this.properties({
+      index: {
+        type: String,
+        default: "",
+        observer: () => {
+        }
+      },
+      disabled: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      active: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      }
+    }));
+    this.stylesheet = P, this.$render();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "index", "disabled", "active"];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist(
+      "ea-menu-item",
+      {},
+      {
+        disabled: this.disabled,
+        active: this.active
+      }
+    );
+    return t(this, f).className = e, e;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <li class='ea-menu-item' role="menuitem" part='container'>
+        <slot></slot>
+      </li>
+    `, a(this, f, this.shadowRoot.querySelector(".ea-menu-item"));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+f = new WeakMap();
+window.customElements.get("ea-menu-item") || window.customElements.define("ea-menu-item", D);
+var x, C, S;
+class G extends _ {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    r(this, x);
+    /** @type {HTMLSlotElement} */
+    r(this, C);
+    /** @type {AbortController} */
+    r(this, S, new AbortController());
+    p(this, "state", this.properties({
+      title: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          t(this, C).textContent = e;
+        }
+      }
+    }));
+    this.stylesheet = T, this.$render();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "title"];
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-menu-item-group' part='container'>
+        <header class='ea-menu-item-group__title' part='title'>
+          <slot name="title">${this.title}</slot>
+        </header>
+        <div class='ea-menu-item-group__content' part='content'>
+          <slot></slot>
+        </div>
+      </div>
+    `, a(this, x, this.shadowRoot.querySelector(".ea-menu-item-group")), a(this, C, this.shadowRoot.querySelector("slot[name='title']"));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+  $beforeUnmounted() {
+    t(this, S).abort();
+  }
+}
+x = new WeakMap(), C = new WeakMap(), S = new WeakMap();
+window.customElements.get("ea-menu-item-group") || window.customElements.define("ea-menu-item-group", G);
+var g, y, n, m, h, d, $, k, M, w;
+class V extends _ {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    r(this, g);
+    /** @type {HTMLElement} */
+    r(this, y);
+    /** @type {HTMLElement} */
+    r(this, n);
+    /** @type {AbortController} */
+    r(this, m, new AbortController());
+    /** @type {AbortController} */
+    r(this, h, new AbortController());
+    /** @type {AbortController} */
+    r(this, d, new AbortController());
+    p(this, "state", this.properties({
+      open: {
+        props: !0,
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      index: {
+        type: String,
+        default: "",
+        observer: () => {
+        }
+      },
+      disabled: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      active: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          this.updateContainerClasslist();
+        }
+      },
+      mode: {
+        type: ["horizontal", "vertical"],
+        default: "vertical",
+        observer: (e) => {
+          t(this, w).call(this, e), this.updateContainerClasslist();
+        }
+      }
+    }));
+    /**
+     * 菜单项点击事件
+     * @param {MouseEvent} e
+     */
+    r(this, $, (e) => {
+      e.stopImmediatePropagation(), e.preventDefault();
+      const o = e.target.closest("ea-menu-item"), l = this.closest("ea-sub-menu") === this ? this.parentElement.closest("ea-sub-menu") : this.closest("ea-sub-menu");
+      o && (this.emit("ea-sub-menu-click", {
+        detail: { index: this.index },
+        bubbles: !0
+      }), this.setAttribute("active", "true"), l && l.setAttribute("active", "true"), o.setAttribute("active", "true"));
+    });
+    /**
+     * 鼠标悬停事件
+     * @param {MouseEvent} e
+     */
+    r(this, k, () => {
+      var o;
+      (o = t(this, h)) == null || o.abort(), a(this, h, new AbortController()), this.open = !0;
+      const e = () => {
+        var l;
+        this.open = !1, (l = t(this, h)) == null || l.abort();
+      };
+      this.addEventListener("mouseleave", e, {
+        signal: t(this, h).signal
+      });
+    });
+    /**
+     * 垂直菜单折叠事件
+     */
+    r(this, M, () => {
+      this.open = !this.open, this.open || (t(this, n).style.setProperty("--ea-sub-menu-transition", "none"), t(this, n).offsetHeight, t(this, n).style.height = `${t(this, n).scrollHeight}px`, t(this, n).offsetHeight, t(this, n).style.removeProperty("--ea-sub-menu-transition")), t(this, n).style.height = `${this.open ? t(this, n).scrollHeight : 0}px`, t(this, n).addEventListener(
+        "transitionend",
+        () => {
+          t(this, n).style.height = this.open ? "100%" : 0;
+        },
+        { once: !0 }
+      );
+    });
+    /**
+     * 菜单模式切换
+     * @param {string} [mode]
+     */
+    r(this, w, (e = this.mode) => {
+      var o;
+      (o = t(this, d)) == null || o.abort(), a(this, d, new AbortController()), e === "vertical" ? t(this, y).addEventListener("click", t(this, M), {
+        signal: t(this, d).signal
+      }) : this.addEventListener("mouseenter", t(this, k), {
+        signal: t(this, d).signal
+      });
+    });
+    this.stylesheet = U, this.$render();
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "active", "index", "disabled", "mode"];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const e = this.computedClasslist(
+      "ea-sub-menu",
+      {
+        ["--" + this.mode]: this.mode
+      },
+      {
+        disabled: this.disabled,
+        active: this.active,
+        open: this.open
+      }
+    );
+    return t(this, g).className = e, e;
+  }
+  $render() {
+    var o;
+    const e = (o = this.parentElement) == null ? void 0 : o.closest("ea-sub-menu");
+    this.shadowRoot.innerHTML = `
+      <div class='ea-sub-menu' part='container'>
+        <header class='ea-sub-menu__title' part='title'>
+          <slot name='title'></slot>
+          <ea-icon icon="${e ? "icon-angle-right" : "icon-angle-down"}" class='ea-sub-menu__arrow' part='arrow'></ea-icon>
+        </header>
+        <ul class='ea-sub-menu__content' part='content'>
+          <slot></slot>
+        </ul>
+      </div>
+    `, a(this, g, this.shadowRoot.querySelector(".ea-sub-menu")), a(this, y, this.shadowRoot.querySelector(".ea-sub-menu__title")), a(this, n, this.shadowRoot.querySelector(".ea-sub-menu__content")), this.updateContainerClasslist();
+  }
+  connectedCallback() {
+    var e;
+    super.connectedCallback(), (e = t(this, m)) == null || e.abort(), a(this, m, new AbortController()), this.addEventListener("click", t(this, $), {
+      signal: t(this, m).signal
+    }), t(this, w).call(this), this.updateContainerClasslist();
+  }
+  $beforeUnmounted() {
+    var e, o, l;
+    (e = t(this, m)) == null || e.abort(), (o = t(this, h)) == null || o.abort(), (l = t(this, d)) == null || l.abort();
+  }
+}
+g = new WeakMap(), y = new WeakMap(), n = new WeakMap(), m = new WeakMap(), h = new WeakMap(), d = new WeakMap(), $ = new WeakMap(), k = new WeakMap(), M = new WeakMap(), w = new WeakMap();
+window.customElements.get("ea-sub-menu") || window.customElements.define("ea-sub-menu", V);
+export {
+  z as EaMenu,
+  D as EaMenuItem,
+  G as EaMenuItemGroup,
+  V as EaSubMenu
+};