easy-component-ui 3.0.12 → 3.0.14

package/dist/components/ea-menu.js

@@ -1,433 +0,0 @@
-var I = Object.defineProperty;
-var R = (s) => {
-  throw TypeError(s);
-};
-var N = (s, i, e) => i in s ? I(s, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[i] = e;
-var p = (s, i, e) => N(s, typeof i != "symbol" ? i + "" : i, e), H = (s, i, e) => i.has(s) || R("Cannot " + e);
-var t = (s, i, e) => (H(s, i, "read from private field"), e ? e.call(s) : i.get(s)), r = (s, i, e) => i.has(s) ? R("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, e), a = (s, i, e, o) => (H(s, i, "write to private field"), o ? o.call(s, e) : i.set(s, e), e);
-import { B as q } from "./Base.js";
-import { s as P } from "../css/ea-menu.style.js";
-import { s as T } from "../css/ea-menu-item.style.js";
-import { s as U } from "../css/ea-menu-item-group.style.js";
-import { s as z } from "../css/ea-sub-menu.style.js";
-var u, c, E, v, x;
-class D extends q {
-  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, E).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, E, (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 = (B) => B.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, x, () => {
-      const e = this.querySelector(
-        `ea-menu-item[index="${this["default-active"]}"]`
-      );
-      e && e.click();
-    });
-    this.stylesheet = P, 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, x).call(this);
-  }
-  $beforeUnmounted() {
-    t(this, c).abort();
-  }
-}
-u = new WeakMap(), c = new WeakMap(), E = new WeakMap(), v = new WeakMap(), x = new WeakMap();
-window.customElements.get("ea-menu") || window.customElements.define("ea-menu", D);
-var f;
-class G extends q {
-  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 = T, 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", G);
-var S, C, $;
-class V extends q {
-  constructor() {
-    super();
-    /** @type {HTMLElement} */
-    r(this, S);
-    /** @type {HTMLSlotElement} */
-    r(this, C);
-    /** @type {AbortController} */
-    r(this, $, new AbortController());
-    p(this, "state", this.properties({
-      title: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, C).textContent = e;
-        }
-      }
-    }));
-    this.stylesheet = U, 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, S, this.shadowRoot.querySelector(".ea-menu-item-group")), a(this, C, this.shadowRoot.querySelector("slot[name='title']"));
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  $beforeUnmounted() {
-    t(this, $).abort();
-  }
-}
-S = new WeakMap(), C = new WeakMap(), $ = new WeakMap();
-window.customElements.get("ea-menu-item-group") || window.customElements.define("ea-menu-item-group", V);
-var g, y, w, n, m, h, d, k, M, _, A;
-class j extends q {
-  constructor() {
-    super();
-    /** @type {HTMLElement} */
-    r(this, g);
-    /** @type {HTMLElement} */
-    r(this, y);
-    /** @type {HTMLSlotElement} */
-    r(this, w);
-    /** @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, A).call(this, e), this.updateContainerClasslist();
-        }
-      },
-      label: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, w).textContent = e;
-        }
-      }
-    }));
-    /**
-     * 菜单项点击事件
-     * @param {MouseEvent} e
-     */
-    r(this, k, (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, M, () => {
-      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, _, () => {
-      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, A, (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, _), {
-        signal: t(this, d).signal
-      }) : this.addEventListener("mouseenter", t(this, M), {
-        signal: t(this, d).signal
-      });
-    });
-    this.stylesheet = z, this.$render();
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "active",
-      "index",
-      "disabled",
-      "mode",
-      "label"
-    ];
-  }
-  /**
-   * 获取 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, w, this.shadowRoot.querySelector("slot[name='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, k), {
-      signal: t(this, m).signal
-    }), t(this, A).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(), w = new WeakMap(), n = new WeakMap(), m = new WeakMap(), h = new WeakMap(), d = new WeakMap(), k = new WeakMap(), M = new WeakMap(), _ = new WeakMap(), A = new WeakMap();
-window.customElements.get("ea-sub-menu") || window.customElements.define("ea-sub-menu", j);
-export {
-  D as EaMenu,
-  G as EaMenuItem,
-  V as EaMenuItemGroup,
-  j as EaSubMenu
-};