easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-avatar.js

@@ -1,14 +1,10 @@
-var m = Object.defineProperty;
-var v = (e) => {
-  throw TypeError(e);
-};
-var g = (e, s, t) => s in e ? m(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
-var f = (e, s, t) => g(e, typeof s != "symbol" ? s + "" : s, t), p = (e, s, t) => s.has(e) || v("Cannot " + t);
-var r = (e, s, t) => (p(e, s, "read from private field"), t ? t.call(e) : s.get(e)), n = (e, s, t) => s.has(e) ? v("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), h = (e, s, t, a) => (p(e, s, "write to private field"), a ? a.call(e, t) : s.set(e, t), t);
-import { B as y } from "./Base.js";
-import { E as b } from "../utils/Utils.js";
-import { s as w } from "../css/ea-avatar.style.js";
-const u = `
+import { E as u } from "../core/EaBase.ts.js";
+import { q as v, C as d, a as c } from "../core/decorator.js";
+import { h as l } from "../utils/html.ts.js";
+import { s as g } from "../css/ea-avatar.style.js";
+import "./ea-icon.js";
+import { c as _ } from "../utils/bem.ts.js";
+const f = `
     <svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
         <defs>
             <clipPath id="a">
@@ -19,7 +15,7 @@ const u = `
         <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 = `
+`, y = `
     <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" />
@@ -28,137 +24,186 @@ const u = `
         <path d="M55 45L40 70h5 30z" fill="#c0c4cc" />
     </svg>
 `;
-var o, i;
-class C extends y {
+var C = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (t, e, r, s) => {
+  for (var n = s > 1 ? void 0 : s ? b(e, r) : e, h = t.length - 1, p; h >= 0; h--)
+    (p = t[h]) && (n = (s ? p(e, r, n) : p(n)) || n);
+  return s && n && C(e, r, n), n;
+};
+const m = "ea-avatar", o = _(m);
+let a = class extends u {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    n(this, o);
-    /** @type {AbortController} */
-    n(this, i);
-    f(this, "state", this.properties({
-      icon: {
-        type: String,
-        default: "",
-        observer: (t) => {
-          t ? r(this, o).innerHTML = `<ea-icon class="ea-avatar__icon" name="${t}" part="icon-avatar"></ea-icon>` : r(this, o).innerHTML = `<slot>${u}</slot>`;
-        }
-      },
-      shape: {
-        type: ["circle", "square"],
-        default: "circle",
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      size: {
-        type: String,
-        default: "default",
-        observer: (t) => {
-          const a = b.Enum.hasEnum(
-            ["default", "small", "large"],
-            t
-          ), c = CSS.supports("width", t);
-          if (!a && !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",
-            a ? `var(--ea-avatar-size-${t})` : t
-          );
-        }
-      },
-      src: {
-        type: String,
-        default: "",
-        observer: (t) => {
-          var c;
-          (c = r(this, i)) == null || c.abort(), h(this, i, new AbortController());
-          const a = new Image();
-          a.src = t, a.addEventListener(
-            "load",
-            () => {
-              var l;
-              r(this, o).innerHTML = `<img class="ea-avatar__img" src="${t}" alt="${this.alt}" srcset="${this["src-set"]}" part="img-avatar" />`, (l = r(this, i)) == null || l.abort();
-            },
-            { signal: r(this, i).signal }
-          ), a.addEventListener(
-            "error",
-            () => {
-              var d;
-              const l = r(this, o).querySelector("slot");
-              l && (l.innerHTML = S), this.emit("error"), (d = r(this, i)) == null || d.abort();
-            },
-            { signal: r(this, i).signal }
-          );
-        }
-      },
-      "src-set": {
-        type: String,
-        default: "",
-        observer: (t) => {
-          const a = this.shadowRoot.querySelector(".ea-avatar__img");
-          a && (a.srcset = t);
-        }
+    super(...arguments), this.icon = "", this.shape = "circle", this.size = "default", this.src = "", this.srcSet = "", this.alt = "", this.fit = "cover";
+  }
+  // ==================== 方法 ====================
+  /**
+   * 更新容器类名
+   */
+  updateContainerClasslist() {
+    const t = o({ [this.shape]: !0 });
+    return this._container && (this._container.className = t), t;
+  }
+  /**
+   * 渲染回退内容（icon 或默认 slot）
+   */
+  _renderFallback() {
+    this.icon ? this._container.innerHTML = l(
+      `<ea-icon class="${o.e("icon")}" name="${this.icon}" part="icon-avatar"></ea-icon>`
+    ) : this._container.innerHTML = l(`<slot>${f}</slot>`);
+  }
+  /**
+   * 加载并渲染图片
+   * 先通过隐藏 Image 预加载，成功后再插入 DOM，避免破图闪烁
+   * @param src 图片源地址
+   */
+  _loadImage(t) {
+    var r;
+    (r = this._srcController) == null || r.abort(), this._srcController = new AbortController();
+    const e = new Image();
+    e.src = t, e.addEventListener(
+      "load",
+      () => {
+        var s;
+        this._renderImage(t), (s = this._srcController) == null || s.abort();
       },
-      alt: {
-        type: String,
-        default: "",
-        observer: (t) => {
-          const a = this.shadowRoot.querySelector(".ea-avatar__img");
-          a && (a.alt = t);
-        }
+      { signal: this._srcController.signal }
+    ), e.addEventListener(
+      "error",
+      () => {
+        var s;
+        this._container.innerHTML = l(`<slot>${y}</slot>`), this.emit("error"), (s = this._srcController) == null || s.abort();
       },
-      fit: {
-        type: ["fill", "contain", "cover", "none", "scale-down"],
-        default: "cover",
-        observer: (t) => {
-          this.style.setProperty("--ea-avatar-fit", t);
-        }
-      }
-    }));
-    this.stylesheet = w, this.$render();
+      { signal: this._srcController.signal }
+    );
   }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "icon",
-      "shape",
-      "size",
-      "src",
-      "src-set",
-      "alt",
-      "fit"
-    ];
+  /**
+   * 渲染图片元素到 DOM
+   * @param src 图片源地址
+   */
+  _renderImage(t) {
+    const e = document.createElement("img");
+    e.className = o.e("img"), e.src = t, e.alt = this.alt, e.srcset = this.srcSet, e.setAttribute("part", "img-avatar"), this._container.innerHTML = "", this._container.appendChild(e);
   }
   /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
+   * 获取内容 HTML
    */
-  updateContainerClasslist() {
-    const t = this.computedClasslist("ea-avatar", {
-      ["--" + this.shape]: this.shape
-    });
-    return r(this, o).className = t, t;
+  _getContentHtml() {
+    return this.src ? "" : this.icon ? `<ea-icon class="${o.e("icon")}" name="${this.icon}" part="icon-avatar"></ea-icon>` : `<slot>${f}</slot>`;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class="ea-avatar" part='container'>
-        <slot>${u}</slot>
+  /**
+   * 渲染模板
+   */
+  html() {
+    const t = this.updateContainerClasslist(), e = this._getContentHtml();
+    return `
+      <div class="${t}" part="container">
+        ${e}
       </div>
-    `, h(this, o, this.shadowRoot.querySelector(".ea-avatar")), this.updateContainerClasslist();
+    `;
   }
-  connectedCallback() {
-    super.connectedCallback();
+  // ==================== 生命周期 ====================
+  $mount() {
+    this.updateContainerClasslist(), this.src && this._loadImage(this.src);
   }
-  $beforeUnmounted() {
+  $beforeUnmount() {
     var t;
-    (t = r(this, i)) == null || t.abort();
+    (t = this._srcController) == null || t.abort();
   }
-}
-o = new WeakMap(), i = new WeakMap();
-window.customElements.get("ea-avatar") || window.customElements.define("ea-avatar", C);
+};
+i([
+  v(o.cb())
+], a.prototype, "_container", 2);
+i([
+  c({
+    type: String,
+    default: "",
+    observer(t) {
+      this.src || (t ? this._container.innerHTML = l(
+        `<ea-icon class="${o.e("icon")}" name="${t}" part="icon-avatar"></ea-icon>`
+      ) : this._container.innerHTML = l(`<slot>${f}</slot>`));
+    }
+  })
+], a.prototype, "icon", 2);
+i([
+  c({
+    type: ["circle", "square"],
+    default: "circle",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], a.prototype, "shape", 2);
+i([
+  c({
+    type: String,
+    default: "default",
+    observer(t) {
+      const r = ["default", "small", "large"].includes(
+        t
+      ), s = CSS.supports("width", t);
+      if (!r && !s) {
+        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",
+          "var(--ea-avatar-size-default)"
+        );
+        return;
+      }
+      this.style.setProperty(
+        "--ea-avatar-size",
+        r ? `var(--ea-avatar-size-${t})` : t
+      );
+    }
+  })
+], a.prototype, "size", 2);
+i([
+  c({
+    type: String,
+    default: "",
+    observer(t) {
+      var e;
+      t ? this._loadImage(t) : ((e = this._srcController) == null || e.abort(), this._renderFallback());
+    }
+  })
+], a.prototype, "src", 2);
+i([
+  c({
+    type: String,
+    default: "",
+    observer(t) {
+      var r;
+      const e = (r = this._container) == null ? void 0 : r.querySelector(
+        o.ce("img")
+      );
+      e && (e.srcset = t);
+    }
+  })
+], a.prototype, "srcSet", 2);
+i([
+  c({
+    type: String,
+    default: "",
+    observer(t) {
+      var r;
+      const e = (r = this._container) == null ? void 0 : r.querySelector(
+        o.ce("img")
+      );
+      e && (e.alt = t);
+    }
+  })
+], a.prototype, "alt", 2);
+i([
+  c({
+    type: ["fill", "contain", "cover", "none", "scale-down"],
+    default: "cover",
+    observer(t) {
+      this.style.setProperty("--ea-avatar-fit", t);
+    }
+  })
+], a.prototype, "fit", 2);
+a = i([
+  d(m, { styles: [g] })
+], a);
 export {
-  C as EaAvatar
+  a as EaAvatar
 };

package/dist/components/ea-backtop.js

@@ -1,136 +1,143 @@
-var m = Object.defineProperty;
-var p = (e) => {
-  throw TypeError(e);
+import { E as d } from "../core/EaBase.ts.js";
+import { q as _, l as p, C as u, a as n } from "../core/decorator.js";
+import { s as y } from "../css/ea-backtop.style.js";
+import { c as g } from "../utils/bem.ts.js";
+var f = Object.defineProperty, m = Object.getOwnPropertyDescriptor, r = (t, e, i, a) => {
+  for (var l = a > 1 ? void 0 : a ? m(e, i) : e, c = t.length - 1, h; c >= 0; c--)
+    (h = t[c]) && (l = (a ? h(e, i, l) : h(l)) || l);
+  return a && l && f(e, i, l), l;
 };
-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 {
+const b = "ea-backtop", s = g(b);
+let o = class extends d {
   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"
-    ];
+    super(...arguments), this.target = "window", this.visibilityHeight = 200, this.right = "40px", this.bottom = "40px", this.smooth = !0;
   }
   /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
+   * 更新容器类名
    */
   updateContainerClasslist() {
-    const t = o(this, h).call(this), i = this.computedClasslist(
-      "ea-backtop",
-      {
-        // ['--' + this.type]: this.type,
+    const t = this._getCurrentScrollTop(), e = s({}, { visible: t > this.visibilityHeight });
+    return this._container && (this._container.className = e), e;
+  }
+  /**
+   * 获取当前滚动位置
+   * @returns 当前滚动高度
+   */
+  _getCurrentScrollTop() {
+    const t = document.querySelector(this.target);
+    return t ? t.scrollTop : window.scrollY;
+  }
+  /**
+   * 滚动事件处理
+   */
+  _handleScroll() {
+    var i;
+    const e = this._getCurrentScrollTop() > this.visibilityHeight;
+    this._container.setAttribute("tabindex", e ? "0" : "-1"), e ? (this._container.classList.add(s.s("before-enter")), this._container.offsetWidth, this.updateContainerClasslist()) : ((i = this._beforeLeaveAbortController) == null || i.abort(), this._beforeLeaveAbortController = new AbortController(), this._container.classList.add(s.s("before-leave")), this._container.addEventListener(
+      "transitionend",
+      () => {
+        this.updateContainerClasslist();
       },
-      {
-        visible: t > this["visibility-height"]
-      }
-    );
-    return o(this, r).className = i, i;
+      { once: !0, signal: this._beforeLeaveAbortController.signal }
+    ));
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-backtop' part='container'>
+  /**
+   * 绑定自定义目标的滚动监听
+   */
+  _bindTargetScroll() {
+    var t;
+    if ((t = this._targetScrollAbortController) == null || t.abort(), this._targetScrollAbortController = new AbortController(), this.target !== "window") {
+      const e = document.querySelector(this.target);
+      e && e.addEventListener("scroll", () => this._handleScroll(), {
+        signal: this._targetScrollAbortController.signal
+      });
+    }
+  }
+  /**
+   * 渲染模板
+   */
+  html() {
+    return `
+      <div class="${s()}" part="container" role="button" tabindex="-1" aria-label="Back to top">
         <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
+  _handleClick() {
+    this._scrollToTop();
+  }
+  _handleKeydown(t) {
+    (t.key === "Enter" || t.key === " ") && (t.preventDefault(), this._scrollToTop());
+  }
+  /** 滚动到顶部 */
+  _scrollToTop() {
+    (document.querySelector(this.target) || window).scrollTo({
+      top: 0,
+      behavior: this.smooth ? "smooth" : "auto"
     });
   }
-  $beforeUnmounted() {
-    var t, i;
-    (t = o(this, l)) == null || t.abort(), (i = o(this, n)) == null || i.abort();
+  _onWindowScroll() {
+    this.target === "window" && this._handleScroll();
   }
-}
-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);
+  $mount() {
+    this.updateContainerClasslist(), this._bindTargetScroll(), this._handleScroll();
+  }
+  $beforeUnmount() {
+    var t, e;
+    (t = this._beforeLeaveAbortController) == null || t.abort(), (e = this._targetScrollAbortController) == null || e.abort();
+  }
+};
+r([
+  _(s.cb())
+], o.prototype, "_container", 2);
+r([
+  n({
+    type: String,
+    default: "window"
+  })
+], o.prototype, "target", 2);
+r([
+  n({
+    type: Number,
+    default: 200
+  })
+], o.prototype, "visibilityHeight", 2);
+r([
+  n({
+    type: String,
+    default: "40px",
+    observer(t) {
+      this.style.setProperty("--ea-backtop-right", t);
+    }
+  })
+], o.prototype, "right", 2);
+r([
+  n({
+    type: String,
+    default: "40px",
+    observer(t) {
+      this.style.setProperty("--ea-backtop-bottom", t);
+    }
+  })
+], o.prototype, "bottom", 2);
+r([
+  n({
+    type: Boolean,
+    default: !0
+  })
+], o.prototype, "smooth", 2);
+r([
+  p("click", s.cb())
+], o.prototype, "_handleClick", 1);
+r([
+  p("keydown", s.cb())
+], o.prototype, "_handleKeydown", 1);
+r([
+  p("scroll", "window")
+], o.prototype, "_onWindowScroll", 1);
+o = r([
+  u(b, { styles: [y] })
+], o);
 export {
-  w as EaBacktop
+  o as EaBacktop
 };