easy-component-ui 3.0.14 → 3.0.15

package/dist/components/ea-layout.js

@@ -0,0 +1,132 @@
+var a = Object.defineProperty;
+var l = (s, t, e) => t in s ? a(s, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[t] = e;
+var r = (s, t, e) => l(s, typeof t != "symbol" ? t + "" : t, e);
+import { B as o } from "./Base.js";
+import { s as n } from "../css/ea-col.style.js";
+import { s as i } from "../css/ea-row.style.js";
+class p extends o {
+  constructor() {
+    super();
+    /**
+     * @typedef {Object} State
+     * @property {Number} span 列数
+     * @property {Number} offset 列偏移
+     * @property {Number} push 列向右移动
+     * @property {Number} pull 列向左移动
+     */
+    /** @type {State} */
+    r(this, "state", this.properties({
+      span: {
+        type: Number,
+        default: 24,
+        observer: (e) => {
+          this.style.setProperty("--ea-col-span", e);
+        }
+      },
+      offset: {
+        type: Number,
+        default: 0,
+        observer: (e) => {
+          this.style.setProperty("--ea-col-offset", e);
+        }
+      },
+      push: {
+        type: Number,
+        default: 0,
+        observer: (e) => {
+          this.style.setProperty("--ea-col-push", e);
+        }
+      },
+      pull: {
+        type: Number,
+        default: 0,
+        observer: (e) => {
+          this.style.setProperty("--ea-col-pull", e);
+        }
+      },
+      tag: {
+        type: String,
+        default: "div",
+        observer: (e) => {
+        }
+      }
+    }));
+    this.stylesheet = n, this.$render();
+  }
+  static get observedAttributes() {
+    return ["span", "offset", "push", "pull", "tag"];
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+            <${this.tag} class="ea-row" part="container">
+                <slot></slot>
+            </${this.tag}>
+        `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+window.customElements.get("ea-col") || window.customElements.define("ea-col", p);
+class u extends o {
+  constructor() {
+    super();
+    /**
+     * @typedef {Object} State
+     * @property {string} gutter - 列类型
+     * @property {string} justify - 列对齐方式
+     * @property {string} align - 列对齐方式
+     */
+    /** @type {State} */
+    r(this, "state", this.properties({
+      gutter: {
+        type: Number,
+        default: 0,
+        observer: (e) => {
+          this.style.setProperty("--ea-row-gutter", e / 2 + "px");
+        }
+      },
+      justify: {
+        type: [
+          "start",
+          "end",
+          "center",
+          "space-around",
+          "space-between",
+          "space-evenly"
+        ],
+        default: "start",
+        observer: (e) => {
+          this.style.setProperty("--ea-row-justify", e);
+        }
+      },
+      align: {
+        type: ["top", "middle", "bottom"],
+        default: "",
+        observer: (e) => {
+        }
+      },
+      tag: {
+        type: String,
+        default: "div",
+        observer: (e) => {
+        }
+      }
+    }));
+    this.stylesheet = i, this.$render();
+  }
+  static get observedAttributes() {
+    return ["gutter", "justify", "align", "tag"];
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+            <${this.tag} class="ea-row" part="container">
+                <slot></slot>
+            </${this.tag}>
+        `;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+window.customElements.get("ea-row") || window.customElements.define("ea-row", u);

package/dist/components/ea-link.js

@@ -0,0 +1,101 @@
+var u = Object.defineProperty;
+var d = (t) => {
+  throw TypeError(t);
+};
+var p = (t, s, e) => s in t ? u(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var c = (t, s, e) => p(t, typeof s != "symbol" ? s + "" : s, e), h = (t, s, e) => s.has(t) || d("Cannot " + e);
+var a = (t, s, e) => (h(t, s, "read from private field"), e ? e.call(t) : s.get(t)), r = (t, s, e) => s.has(t) ? d("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), l = (t, s, e, o) => (h(t, s, "write to private field"), o ? o.call(t, e) : s.set(t, e), e);
+import { B as m } from "./Base.js";
+import { s as b } from "../css/ea-link.style.js";
+var i, n;
+class y extends m {
+  constructor() {
+    super();
+    /** @type {HTMLAnchorElement} */
+    r(this, i);
+    /** @type {HTMLElement} */
+    r(this, n);
+    /**
+     * @typedef {Object} LinkState
+     * @property {string} type
+     * @property {Boolean} disabled
+     * @property {Boolean} underline
+     * @property {string} href
+     * @property {string} icon
+     */
+    /** @type {LinkState} */
+    c(this, "state", this.properties({
+      type: {
+        type: ["normal", "primary", "success", "info", "warning", "danger"],
+        default: "normal",
+        observer: (e) => {
+          a(this, i).className = this.updateContainerClasslist();
+        }
+      },
+      disabled: {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          a(this, i).className = this.updateContainerClasslist();
+        }
+      },
+      underline: {
+        type: ["always", "hover", "never"],
+        default: "",
+        observer: (e) => {
+          a(this, i).className = this.updateContainerClasslist();
+        }
+      },
+      href: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          a(this, i).href = e;
+        }
+      },
+      icon: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          a(this, n).setAttribute("name", e), a(this, i).className = this.updateContainerClasslist();
+        }
+      }
+    }));
+    this.stylesheet = b, this.$render();
+  }
+  static get observedAttributes() {
+    return ["type", "disabled", "underline", "href", "icon"];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    var e;
+    return this.computedClasslist(
+      "ea-link",
+      {
+        ["--" + this.type]: this.type,
+        ["--underline-" + this.underline]: this.underline,
+        "--disabled": this.disabled
+      },
+      { icon: (e = this.icon) == null ? void 0 : e.length }
+    );
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <a class="ea-link" part="container" tabindex="-1">
+        <ea-icon class="ea-link__icon" part="icon"></ea-icon>
+        <slot></slot>
+      </a>
+    `, l(this, i, this.shadowRoot.querySelector(".ea-link")), l(this, n, this.shadowRoot.querySelector(".ea-link__icon"));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+i = new WeakMap(), n = new WeakMap();
+window.customElements.get("ea-link") || window.customElements.define("ea-link", y);
+export {
+  y as EaLink
+};

package/dist/components/ea-menu.js

@@ -0,0 +1,433 @@
+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 name="${e ? "angle-right" : "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
+};