easy-component-ui 3.0.14 → 4.0.2

package/dist/components/ea-avatar.js

@@ -0,0 +1,209 @@
+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">
+                <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>
+`, 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" />
+        <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 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(...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();
+      },
+      { 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();
+      },
+      { signal: this._srcController.signal }
+    );
+  }
+  /**
+   * 渲染图片元素到 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);
+  }
+  /**
+   * 获取内容 HTML
+   */
+  _getContentHtml() {
+    return this.src ? "" : this.icon ? `<ea-icon class="${o.e("icon")}" name="${this.icon}" part="icon-avatar"></ea-icon>` : `<slot>${f}</slot>`;
+  }
+  /**
+   * 渲染模板
+   */
+  html() {
+    const t = this.updateContainerClasslist(), e = this._getContentHtml();
+    return `
+      <div class="${t}" part="container">
+        ${e}
+      </div>
+    `;
+  }
+  // ==================== 生命周期 ====================
+  $mount() {
+    this.updateContainerClasslist(), this.src && this._loadImage(this.src);
+  }
+  $beforeUnmount() {
+    var t;
+    (t = this._srcController) == null || t.abort();
+  }
+};
+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 {
+  a as EaAvatar
+};

package/dist/components/ea-backtop.js

@@ -0,0 +1,143 @@
+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;
+};
+const b = "ea-backtop", s = g(b);
+let o = class extends d {
+  constructor() {
+    super(...arguments), this.target = "window", this.visibilityHeight = 200, this.right = "40px", this.bottom = "40px", this.smooth = !0;
+  }
+  /**
+   * 更新容器类名
+   */
+  updateContainerClasslist() {
+    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();
+      },
+      { once: !0, signal: this._beforeLeaveAbortController.signal }
+    ));
+  }
+  /**
+   * 绑定自定义目标的滚动监听
+   */
+  _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>
+    `;
+  }
+  _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"
+    });
+  }
+  _onWindowScroll() {
+    this.target === "window" && this._handleScroll();
+  }
+  $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 {
+  o as EaBacktop
+};

package/dist/components/ea-badge.js

@@ -0,0 +1,145 @@
+import { E as f } from "../core/EaBase.ts.js";
+import { q as h, a, C as m } from "../core/decorator.js";
+import { E as y } from "../utils/Enum.ts.js";
+import { V as v } from "../core/constants.js";
+import { s as b } from "../css/ea-badge.style.js";
+import { c as _ } from "../utils/bem.ts.js";
+var C = Object.defineProperty, N = Object.getOwnPropertyDescriptor, o = (t, e, i, n) => {
+  for (var r = n > 1 ? void 0 : n ? N(e, i) : e, l = t.length - 1, p; l >= 0; l--)
+    (p = t[l]) && (r = (n ? p(e, i, r) : p(r)) || r);
+  return n && r && C(e, i, r), r;
+};
+const c = "ea-badge", u = _(c), d = "danger";
+let s = class extends f {
+  constructor() {
+    super(...arguments), this.value = "", this.max = 1 / 0, this.variant = d, this.color = "", this.isDot = !1, this.dataHidden = !1, this.offsetX = 0, this.offsetY = 0, this.showZero = !0;
+  }
+  updateContainerClasslist() {
+    const t = this.dataHidden || !this.showZero && Number(this.value) === 0, e = u(
+      { [this.variant]: this.variant !== d },
+      { dot: this.isDot, hidden: t }
+    );
+    return this._container && (this._container.className = e), e;
+  }
+  _computedValue(t) {
+    if (!this.showZero && Number(t) === 0) return "";
+    const e = Number(t);
+    return !isNaN(e) && e > this.max ? `${this.max}+` : t;
+  }
+  _updateContent(t) {
+    var p;
+    const e = this._computedValue(t), i = (p = this.shadowRoot) == null ? void 0 : p.querySelector("[data-value]");
+    if (i) {
+      i.textContent = e;
+      return;
+    }
+    const n = this.querySelector("[slot='content']");
+    if (!n) {
+      this._content.textContent = e;
+      return;
+    }
+    const r = n.cloneNode(!0), l = r.querySelector("[data-value]");
+    l && (l.textContent = e), this._content.innerHTML = r.innerHTML;
+  }
+  html() {
+    return `
+      <div class="${u()}" part="container">
+        <sup class="${u.e("content")}" part="content" aria-hidden="true"></sup>
+        <slot></slot>
+      </div>
+    `;
+  }
+  $mount() {
+    this.updateContainerClasslist(), this.isDot || this._updateContent(this.value);
+  }
+};
+o([
+  h(u.cb())
+], s.prototype, "_container", 2);
+o([
+  h(u.ce("content"))
+], s.prototype, "_content", 2);
+o([
+  a({
+    type: String,
+    default: "",
+    observer(t) {
+      this.isDot || this._updateContent(t);
+    }
+  })
+], s.prototype, "value", 2);
+o([
+  a({
+    type: Number,
+    default: 1 / 0
+  })
+], s.prototype, "max", 2);
+o([
+  a({
+    type: y(v),
+    default: d,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], s.prototype, "variant", 2);
+o([
+  a({
+    type: String,
+    default: "",
+    observer(t) {
+      this.style.setProperty("--ea-badge-color", t);
+    }
+  })
+], s.prototype, "color", 2);
+o([
+  a({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], s.prototype, "isDot", 2);
+o([
+  a({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      this._content.ariaHidden = String(t), this._content.hidden = t, this.updateContainerClasslist();
+    }
+  })
+], s.prototype, "dataHidden", 2);
+o([
+  a({
+    type: Number,
+    default: 0,
+    observer(t) {
+      this.style.setProperty("--ea-badge-offset-x", -t + "px");
+    }
+  })
+], s.prototype, "offsetX", 2);
+o([
+  a({
+    type: Number,
+    default: 0,
+    observer(t) {
+      this.style.setProperty("--ea-badge-offset-y", t + "px");
+    }
+  })
+], s.prototype, "offsetY", 2);
+o([
+  a({
+    type: Boolean,
+    default: !0,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], s.prototype, "showZero", 2);
+s = o([
+  m(c, { styles: [b] })
+], s);
+export {
+  s as EaBadge
+};

package/dist/components/ea-breadcrumb.js

@@ -0,0 +1,147 @@
+import { E as f } from "../core/EaBase.ts.js";
+import { q as u, C as d, a as _, l as y } from "../core/decorator.js";
+import { s as v } from "../css/ea-breadcrumb.style.js";
+import { c as b } from "../utils/bem.ts.js";
+import { s as $ } from "../css/ea-breadcrumb-item.style.js";
+var g = Object.defineProperty, E = Object.getOwnPropertyDescriptor, p = (t, r, s, a) => {
+  for (var e = a > 1 ? void 0 : a ? E(r, s) : r, o = t.length - 1, l; o >= 0; o--)
+    (l = t[o]) && (e = (a ? l(r, s, e) : l(e)) || e);
+  return a && e && g(r, s, e), e;
+};
+const C = "ea-breadcrumb", m = b(C);
+let i = class extends f {
+  constructor() {
+    super(...arguments), this.separator = "/";
+  }
+  updateContainerClasslist() {
+    const t = m();
+    return this._container && (this._container.className = t), t;
+  }
+  /**
+   * 获取分隔符元素，优先使用 separator slot 中的自定义内容
+   * @param defaultSeparator - 默认分隔符文本
+   * @returns 分隔符 DOM 元素
+   */
+  _getSeparatorItem(t = this.separator) {
+    const r = this.shadowRoot.querySelector("#separatorSlot");
+    let s = r == null ? void 0 : r.assignedElements()[0];
+    return s || (s = document.createElement("span"), s.setAttribute("slot", "separator"), s.innerText = t), s;
+  }
+  /**
+   * 渲染分隔符到非末尾的面包屑项中，并标记最后一项为当前页
+   */
+  _renderSeparator() {
+    const t = this.shadowRoot.querySelector("#defaultSlot");
+    if (!t) return;
+    const r = [...t.assignedElements()].filter(
+      (a) => a.tagName.toLowerCase() === "ea-breadcrumb-item"
+    ), s = this._getSeparatorItem(this.separator);
+    r.forEach((a, e) => {
+      const o = e === r.length - 1;
+      !o && !a.querySelector("[slot='separator']") && a.appendChild(s.cloneNode(!0)), o ? a.setAttribute("aria-current", "page") : a.removeAttribute("aria-current");
+    });
+  }
+  html() {
+    return `
+      <nav aria-label="Breadcrumb">
+        <ol class="${m()}" part="container" role="list">
+          <slot id="defaultSlot"></slot>
+        </ol>
+      </nav>
+      <slot id="separatorSlot" name="separator"></slot>
+    `;
+  }
+  _handleSlotChange() {
+    this._renderSeparator();
+  }
+  $mount() {
+    this.updateContainerClasslist(), this._renderSeparator();
+  }
+};
+p([
+  u(m.cb())
+], i.prototype, "_container", 2);
+p([
+  u("#defaultSlot")
+], i.prototype, "_defaultSlot", 2);
+p([
+  _({
+    type: String,
+    default: "/",
+    observer() {
+      this._renderSeparator();
+    }
+  })
+], i.prototype, "separator", 2);
+p([
+  y("slotchange", "#defaultSlot")
+], i.prototype, "_handleSlotChange", 1);
+i = p([
+  d(C, { styles: [v] })
+], i);
+var N = Object.defineProperty, w = Object.getOwnPropertyDescriptor, h = (t, r, s, a) => {
+  for (var e = a > 1 ? void 0 : a ? w(r, s) : r, o = t.length - 1, l; o >= 0; o--)
+    (l = t[o]) && (e = (a ? l(r, s, e) : l(e)) || e);
+  return a && e && N(r, s, e), e;
+};
+const S = "ea-breadcrumb-item", n = b(S);
+let c = class extends f {
+  constructor() {
+    super(...arguments), this.href = "";
+  }
+  updateContainerClasslist() {
+    const t = n();
+    return this._container && (this._container.className = t), t;
+  }
+  /**
+   * 根据 href 属性重新渲染内容元素，切换 a/span 标签
+   */
+  _renderContent() {
+    if (!this._container) return;
+    const t = !!this.href, r = t ? "a" : "span", s = t ? n.s("link") : "", a = this._container.querySelector(n.ce("content"));
+    if (a) {
+      const e = document.createElement(r);
+      e.className = [n.e("content"), s].filter(Boolean).join(" "), e.setAttribute("part", "content"), t && (e.href = this.href), e.innerHTML = "<slot></slot>", a.replaceWith(e);
+    }
+  }
+  html() {
+    const t = !!this.href, r = t ? "a" : "span", s = t ? n.s("link") : "";
+    return `
+      <li class="${n()}" part="container" role="listitem">
+        <${r} class="${n.e("content")} ${s}" part="content" ${t ? `href="${this.href}"` : ""}>
+          <slot></slot>
+        </${r}>
+        <span class="${n.e("separator")}" part="separator" aria-hidden="true">
+          <slot name="separator"></slot>
+        </span>
+      </li>
+    `;
+  }
+  $mount() {
+    this.updateContainerClasslist();
+  }
+};
+h([
+  u(n.cb())
+], c.prototype, "_container", 2);
+h([
+  u(n.ce("content"))
+], c.prototype, "_content", 2);
+h([
+  _({
+    type: String,
+    default: "",
+    observer() {
+      this._renderContent();
+    }
+  })
+], c.prototype, "href", 2);
+c = h([
+  d(S, { styles: [$] })
+], c);
+const j = { EaBreadcrumb: i, EaBreadcrumbItem: c };
+export {
+  i as EaBreadcrumb,
+  c as EaBreadcrumbItem,
+  j as default
+};