easy-component-ui 2.1.1 → 3.0.1

package/dist/components/ea-alert.js

@@ -0,0 +1,196 @@
+var w = Object.defineProperty;
+var y = (t) => {
+  throw TypeError(t);
+};
+var C = (t, s, e) => s in t ? w(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var m = (t, s, e) => C(t, typeof s != "symbol" ? s + "" : s, e), _ = (t, s, e) => s.has(t) || y("Cannot " + e);
+var o = (t, s, e) => (_(t, s, "read from private field"), e ? e.call(t) : s.get(t)), i = (t, s, e) => s.has(t) ? y("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), r = (t, s, e, c) => (_(t, s, "write to private field"), c ? c.call(t, e) : s.set(t, e), e);
+import { B as g } from "./Base.js";
+import { s as S } from "../css/ea-alert.style.js";
+import { t as b } from "../utils/timeout.js";
+var a, h, f, p, d, l, n, u;
+class L extends g {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    i(this, a);
+    /** @type {HTMLElement} */
+    i(this, h);
+    /** @type {HTMLElement} */
+    i(this, f);
+    /** @type {HTMLElement} */
+    i(this, p);
+    /** @type {HTMLElement} */
+    i(this, d);
+    /** @type {HTMLElement} */
+    i(this, l);
+    /** @type {AbortController} */
+    i(this, n);
+    m(this, "state", this.properties({
+      title: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          o(this, p).innerHTML = e || '<slot name="title"></slot>';
+        }
+      },
+      description: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          o(this, d).innerHTML = e || "<slot></slot>";
+        }
+      },
+      type: {
+        type: ["primary", "info", "success", "warning", "error"],
+        default: "info",
+        observer: (e) => {
+          o(this, a).className = this.updateContainerClasslist();
+        }
+      },
+      effect: {
+        type: ["light", "dark"],
+        default: "light",
+        observer: (e) => {
+          o(this, a).className = this.updateContainerClasslist();
+        }
+      },
+      "close-text": {
+        type: String,
+        default: "",
+        observer: (e) => {
+          try {
+            o(this, l).textContent = e;
+          } catch {
+          }
+        }
+      },
+      closable: {
+        type: Boolean,
+        default: !0,
+        observer: (e) => {
+          o(this, l).innerHTML = e ? this["close-text"] ? this["close-text"] : '<ea-icon class="ea-alert__close-icon" icon="icon-cancel" part="close-icon"></ea-icon>' : "";
+        }
+      },
+      "show-icon": {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          const c = {
+            primary: "info",
+            success: "ok-circled",
+            info: "info",
+            warning: "attention-alt",
+            error: "cancel-circled"
+          }, v = this.querySelector("[slot=icon]");
+          o(this, h).innerHTML = e && !v ? `<ea-icon class="ea-alert__icon" icon="icon-${c[this.type]}" part="icon"></ea-icon>` : '<slot name="icon"></slot>';
+        }
+      },
+      center: {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          o(this, a).className = this.updateContainerClasslist();
+        }
+      },
+      "show-after": {
+        type: Number,
+        default: 0,
+        observer: (e) => {
+          e = Math.abs(e), o(this, a).classList.toggle("ea-alert--hide", e > 0), b(() => {
+            this.emit("open"), o(this, a).classList.remove("ea-alert--hide");
+          }, e);
+        }
+      },
+      "hide-after": {
+        type: Number,
+        default: 300,
+        observer: (e) => {
+        }
+      },
+      "auto-close": {
+        type: Number,
+        default: 0,
+        observer: (e) => {
+          e && this.isMounted && b(() => o(this, u).call(this), this["auto-close"]);
+        }
+      }
+    }));
+    i(this, u, (e) => {
+      b(() => {
+        o(this, n).abort(), o(this, a).classList.add("ea-alert--before-close"), o(this, a).addEventListener(
+          "transitionend",
+          () => {
+            this.emit("close", {
+              detail: {
+                visible: !1
+              }
+            }), this.remove();
+          },
+          { once: !0 }
+        );
+      }, this["hide-after"]);
+    });
+    this.$render(), this.stylesheet = S;
+  }
+  static get observedAttributes() {
+    return [
+      "title",
+      "description",
+      "type",
+      "effect",
+      "closable",
+      "close-text",
+      "show-icon",
+      "center",
+      "description",
+      "show-after",
+      "hide-after",
+      "auto-close"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    return this.computedClasslist("ea-alert", {
+      ["--" + this.type]: this.type,
+      ["--" + this.effect]: this.effect,
+      "--center": this.center
+    });
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-alert' part='container'>
+        <span class="ea-alert__icon-wrap" part='icon-wrap'>
+          <slot name='icon'></slot>
+        </span>
+        <div class="ea-alert__content" part='content-wrap'>
+          <span class="ea-alert__title" part='title'></span>
+          <p class="ea-alert__description" part='description'>
+            <slot></slot>
+          </p>
+          <span class="ea-alert__close-btn" part="close-btn">
+            ${this.closable ? this["close-text"] ? this["close-text"] : '<ea-icon class="ea-alert__close-icon" icon="icon-cancel" part="close-icon"></ea-icon>' : ""}
+          </span>
+        </div>
+      </div>
+    `, r(this, a, this.shadowRoot.querySelector(".ea-alert")), r(this, h, this.shadowRoot.querySelector(".ea-alert__icon-wrap")), r(this, f, this.shadowRoot.querySelector(".ea-alert__content")), r(this, p, this.shadowRoot.querySelector(".ea-alert__title")), r(this, d, this.shadowRoot.querySelector(
+      ".ea-alert__description"
+    )), r(this, l, this.shadowRoot.querySelector(".ea-alert__close-btn"));
+  }
+  connectedCallback() {
+    super.connectedCallback(), r(this, n, new AbortController()), this.closable && o(this, l).addEventListener("click", o(this, u), {
+      signal: o(this, n).signal
+    });
+  }
+  $beforeUnmounted() {
+    o(this, n).abort();
+  }
+}
+a = new WeakMap(), h = new WeakMap(), f = new WeakMap(), p = new WeakMap(), d = new WeakMap(), l = new WeakMap(), n = new WeakMap(), u = new WeakMap();
+window.customElements.get("ea-alert") || window.customElements.define("ea-alert", L);
+export {
+  L as EaAlert
+};

package/dist/components/ea-avatar.js

@@ -0,0 +1,159 @@
+var u = Object.defineProperty;
+var v = (e) => {
+  throw TypeError(e);
+};
+var g = (e, a, t) => a in e ? u(e, a, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[a] = t;
+var f = (e, a, t) => g(e, typeof a != "symbol" ? a + "" : a, t), p = (e, a, t) => a.has(e) || v("Cannot " + t);
+var r = (e, a, t) => (p(e, a, "read from private field"), t ? t.call(e) : a.get(e)), n = (e, a, t) => a.has(e) ? v("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, t), h = (e, a, t, s) => (p(e, a, "write to private field"), s ? s.call(e, t) : a.set(e, t), t);
+import { B as m } from "./Base.js";
+import { E as w } from "../utils/Utils.js";
+import { s as y } from "../css/ea-avatar.style.js";
+const b = `
+    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <defs>
+            <clipPath id="a">
+                <path d="M0 30h90v45H0z" />
+            </clipPath>
+        </defs>
+        <path fill="#c0c4cc" d="M0 0h100v100H0z" />
+        <circle cx="50" cy="35" r="15" fill="#fff" />
+        <circle cx="50" cy="82.5" r="30" fill="#fff" clip-path="url(#a)" />
+    </svg>
+`, S = `
+    <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
+        <path fill="#c0c4cc" d="M0 0h100v100H0z" />
+        <path fill="#fff" d="M20 25h60v50H20z" />
+        <circle r="7" cx="35" cy="40" fill="#c0c4cc" />
+        <path d="M35 55L25 70h-5 30z" fill="#c0c4cc" />
+        <path d="M55 45L40 70h5 30z" fill="#c0c4cc" />
+    </svg>
+`;
+var i, l;
+class C extends m {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    n(this, i);
+    /** @type {AbortController} */
+    n(this, l);
+    f(this, "state", this.properties({
+      icon: {
+        type: String,
+        default: "",
+        observer: (t) => {
+          r(this, i).innerHTML = `<ea-icon class="ea-avatar__icon" icon="${t}" part="icon-avatar"></ea-icon>`;
+        }
+      },
+      shape: {
+        type: ["circle", "square"],
+        default: "circle",
+        observer: () => {
+          r(this, i).className = this.updateContainerClasslist();
+        }
+      },
+      size: {
+        type: String,
+        default: "default",
+        observer: (t) => {
+          const s = w.Enum.hasEnum(
+            ["default", "small", "large"],
+            t
+          ), c = CSS.supports("width", t);
+          if (!s && !c)
+            return this.size = "default", console.warn(
+              "[ea-avatar] Please set size to one of [default, small, large] or a valid CSS width value"
+            );
+          this.style.setProperty(
+            "--ea-avatar-size",
+            s ? `var(--ea-avatar-size-${t})` : t
+          );
+        }
+      },
+      src: {
+        type: String,
+        default: "",
+        observer: (t) => {
+          var c;
+          (c = r(this, l)) == null || c.abort(), h(this, l, new AbortController());
+          const s = new Image();
+          s.src = t, s.addEventListener(
+            "load",
+            () => {
+              var o;
+              r(this, i).innerHTML = `<img class="ea-avatar__img" src="${t}" alt="${this.alt}" srcset="${this["src-set"]}" part="img-avatar" />`, (o = r(this, l)) == null || o.abort();
+            },
+            { signal: r(this, l).signal }
+          ), s.addEventListener(
+            "error",
+            () => {
+              var d;
+              const o = r(this, i).querySelector("slot");
+              o && (o.innerHTML = S), this.emit("error"), (d = r(this, l)) == null || d.abort();
+            },
+            { signal: r(this, l).signal }
+          );
+        }
+      },
+      "src-set": {
+        type: String,
+        default: "",
+        observer: (t) => {
+          const s = this.shadowRoot.querySelector(".ea-avatar__img");
+          s && (s.srcset = t);
+        }
+      },
+      alt: {
+        type: String,
+        default: "",
+        observer: (t) => {
+          const s = this.shadowRoot.querySelector(".ea-avatar__img");
+          s && (s.alt = t);
+        }
+      },
+      fit: {
+        type: ["fill", "contain", "cover", "none", "scale-down"],
+        default: "cover",
+        observer: (t) => {
+          this.style.setProperty("--ea-avatar-fit", t);
+        }
+      }
+    }));
+    this.stylesheet = y, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "icon",
+      "shape",
+      "size",
+      "src",
+      "src-set",
+      "alt",
+      "fit"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    return this.computedClasslist("ea-avatar", {
+      ["--" + this.shape]: this.shape
+    });
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class="ea-avatar" part='container'>
+        <slot>${b}</slot>
+      </div>
+    `, h(this, i, this.shadowRoot.querySelector(".ea-avatar"));
+  }
+  connectedCallback() {
+    super.connectedCallback(), r(this, i).className = this.updateContainerClasslist();
+  }
+}
+i = new WeakMap(), l = new WeakMap();
+window.customElements.get("ea-avatar") || window.customElements.define("ea-avatar", C);
+export {
+  C as EaAvatar
+};

package/dist/components/ea-backtop.js

@@ -0,0 +1,136 @@
+var m = Object.defineProperty;
+var p = (e) => {
+  throw TypeError(e);
+};
+var v = (e, s, t) => s in e ? m(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
+var u = (e, s, t) => v(e, typeof s != "symbol" ? s + "" : s, t), g = (e, s, t) => s.has(e) || p("Cannot " + t);
+var o = (e, s, t) => (g(e, s, "read from private field"), t ? t.call(e) : s.get(e)), a = (e, s, t) => s.has(e) ? p("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), c = (e, s, t, i) => (g(e, s, "write to private field"), i ? i.call(e, t) : s.set(e, t), t);
+import { B as y } from "./Base.js";
+import { s as f } from "../css/ea-backtop.style.js";
+var r, l, n, h, d, b;
+class w extends y {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    a(this, r);
+    /** @type {AbortController} */
+    a(this, l);
+    /** @type {AbortController} */
+    a(this, n);
+    u(this, "state", this.properties({
+      target: {
+        type: String,
+        default: "window",
+        observer: () => {
+        }
+      },
+      "visibility-height": {
+        type: Number,
+        default: 200,
+        observer: () => {
+        }
+      },
+      right: {
+        type: String,
+        default: "40px",
+        observer: (t) => {
+          this.style.setProperty("--ea-backtop-right", t);
+        }
+      },
+      bottom: {
+        type: String,
+        default: "40px",
+        observer: (t) => {
+          this.style.setProperty("--ea-backtop-bottom", t);
+        }
+      },
+      smooth: {
+        type: Boolean,
+        default: !0,
+        observer: () => {
+        }
+      }
+    }));
+    /**
+     * 获取当前滚动位置
+     * @return {number} 滚动位置
+     */
+    a(this, h, () => {
+      const t = document.querySelector(this.target);
+      return t ? t.scrollTop : window.scrollY;
+    });
+    /**
+     * 点击事件处理
+     */
+    a(this, d, () => {
+      (document.querySelector(this.target) || window).scrollTo({
+        top: 0,
+        behavior: this.smooth ? "smooth" : "auto"
+      });
+    });
+    /**
+     * 滚动事件处理
+     */
+    a(this, b, async () => {
+      var i;
+      o(this, h).call(this) > this["visibility-height"] ? (o(this, r).classList.add("before-enter"), o(this, r).offsetWidth, this.updateContainerClasslist()) : ((i = o(this, n)) == null || i.abort(), c(this, n, new AbortController()), o(this, r).classList.add("before-leave"), o(this, r).addEventListener(
+        "transitionend",
+        () => {
+          this.updateContainerClasslist();
+        },
+        { once: !0, signal: o(this, n).signal }
+      ));
+    });
+    this.stylesheet = f, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "target",
+      "visibility-height",
+      "right",
+      "bottom",
+      "smooth"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const t = o(this, h).call(this), i = this.computedClasslist(
+      "ea-backtop",
+      {
+        // ['--' + this.type]: this.type,
+      },
+      {
+        visible: t > this["visibility-height"]
+      }
+    );
+    return o(this, r).className = i, i;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-backtop' part='container'>
+        <slot></slot>
+      </div>
+    `, c(this, r, this.shadowRoot.querySelector(".ea-backtop"));
+  }
+  connectedCallback() {
+    var i;
+    super.connectedCallback(), (i = o(this, l)) == null || i.abort(), c(this, l, new AbortController()), this.addEventListener("click", o(this, d), {
+      signal: o(this, l).signal
+    }), (document.querySelector(this.target) || window).addEventListener("scroll", o(this, b), {
+      signal: o(this, l).signal
+    });
+  }
+  $beforeUnmounted() {
+    var t, i;
+    (t = o(this, l)) == null || t.abort(), (i = o(this, n)) == null || i.abort();
+  }
+}
+r = new WeakMap(), l = new WeakMap(), n = new WeakMap(), h = new WeakMap(), d = new WeakMap(), b = new WeakMap();
+window.customElements.get("ea-backtop") || window.customElements.define("ea-backtop", w);
+export {
+  w as EaBacktop
+};

package/dist/components/ea-badge.js

@@ -0,0 +1,144 @@
+var b = Object.defineProperty;
+var c = (t) => {
+  throw TypeError(t);
+};
+var y = (t, s, e) => s in t ? b(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
+var p = (t, s, e) => y(t, typeof s != "symbol" ? s + "" : s, e), f = (t, s, e) => s.has(t) || c("Cannot " + e);
+var a = (t, s, e) => (f(t, s, "read from private field"), e ? e.call(t) : s.get(t)), u = (t, s, e) => s.has(t) ? c("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), h = (t, s, e, i) => (f(t, s, "write to private field"), i ? i.call(t, e) : s.set(t, e), e);
+import { B as v } from "./Base.js";
+import { s as g } from "../css/ea-badge.style.js";
+import { E as C } from "../utils/Utils.js";
+var o, r;
+class x extends v {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    u(this, o);
+    /** @type {HTMLElement} */
+    u(this, r);
+    p(this, "state", this.properties({
+      value: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          if (this["is-dot"]) return;
+          const i = this.shadowRoot.querySelector("[data-value]"), n = this.querySelector("[slot='content']"), l = () => !this["show-zero"] && Number(e) === 0 ? (a(this, o).className = this.updateContainerClasslist(), "") : C.Number.isNumber(e) && e > this.max ? `${this.max}+` : e;
+          if (i)
+            i.textContent = l();
+          else if (n) {
+            const d = document.createElement("template");
+            if (n.querySelector("[data-value]")) {
+              d.innerHTML = n.innerHTML;
+              const m = d.content.querySelector("[data-value]");
+              m.innerText = l();
+            }
+            a(this, r).innerHTML = d.innerHTML;
+          } else
+            a(this, r).textContent = l();
+        }
+      },
+      max: {
+        type: Number,
+        default: 1 / 0,
+        observer: () => {
+        }
+      },
+      type: {
+        type: ["primary", "success", "warning", "danger", "info"],
+        default: "danger",
+        observer: () => {
+          a(this, o).className = this.updateContainerClasslist();
+        }
+      },
+      color: {
+        type: String,
+        default: "",
+        observer: (e) => {
+          this.style.setProperty("--ea-badge-color", e);
+        }
+      },
+      "is-dot": {
+        type: Boolean,
+        default: !1,
+        observer: () => {
+          a(this, o).className = this.updateContainerClasslist();
+        }
+      },
+      "data-hidden": {
+        type: Boolean,
+        default: !1,
+        observer: (e) => {
+          a(this, r).ariaHidden = e, a(this, r).hidden = e, a(this, o).className = this.updateContainerClasslist();
+        }
+      },
+      "offset-x": {
+        type: Number,
+        default: 0,
+        observer: (e) => {
+          this.style.setProperty("--ea-badge-offset-x", -e + "px");
+        }
+      },
+      "offset-y": {
+        type: Number,
+        default: 0,
+        observer: (e) => {
+          this.style.setProperty("--ea-badge-offset-y", e + "px");
+        }
+      },
+      "show-zero": {
+        type: Boolean,
+        default: !0,
+        observer: () => {
+          a(this, o).className = this.updateContainerClasslist();
+        }
+      }
+    }));
+    this.stylesheet = g, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "value",
+      "max",
+      "is-dot",
+      "data-hidden",
+      "type",
+      "show-zero",
+      "color",
+      "offset-x",
+      "offset-y"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    return this.computedClasslist(
+      "ea-badge",
+      {
+        ["--" + this.type]: this.type
+      },
+      {
+        dot: this["is-dot"],
+        hidden: this["data-hidden"] || !this["show-zero"] && Number(this.value) === 0
+      }
+    );
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-badge' part='container'>
+        <sup class="ea-badge__content" part='content'></sup>
+        <slot></slot>
+      </div>
+        `, h(this, o, this.shadowRoot.querySelector(".ea-badge")), h(this, r, this.shadowRoot.querySelector(".ea-badge__content"));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+o = new WeakMap(), r = new WeakMap();
+window.customElements.get("ea-badge") || window.customElements.define("ea-badge", x);
+export {
+  x as EaBadge
+};