easy-component-ui 3.0.15 → 4.0.2

package/dist/components/ea-badge.js

@@ -1,144 +1,145 @@
-var b = Object.defineProperty;
-var c = (t) => {
-  throw TypeError(t);
+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;
 };
-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 {
+const c = "ea-badge", u = _(c), d = "danger";
+let s = class extends f {
   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();
+    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;
   }
-  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
-      }
+    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;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-badge' part='container'>
-        <sup class="ea-badge__content" part='content'></sup>
+  _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>
-        `, h(this, o, this.shadowRoot.querySelector(".ea-badge")), h(this, r, this.shadowRoot.querySelector(".ea-badge__content"));
+    `;
   }
-  connectedCallback() {
-    super.connectedCallback();
+  $mount() {
+    this.updateContainerClasslist(), this.isDot || this._updateContent(this.value);
   }
-}
-o = new WeakMap(), r = new WeakMap();
-window.customElements.get("ea-badge") || window.customElements.define("ea-badge", x);
+};
+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 {
-  x as EaBadge
+  s as EaBadge
 };

package/dist/components/ea-breadcrumb.js

@@ -1,148 +1,147 @@
-var E = Object.defineProperty;
-var S = (t) => {
-  throw TypeError(t);
-};
-var y = (t, r, e) => r in t ? E(t, r, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[r] = e;
-var f = (t, r, e) => y(t, typeof r != "symbol" ? r + "" : r, e), w = (t, r, e) => r.has(t) || S("Cannot " + e);
-var s = (t, r, e) => (w(t, r, "read from private field"), e ? e.call(t) : r.get(t)), a = (t, r, e) => r.has(t) ? S("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(t) : r.set(t, e), i = (t, r, e, n) => (w(t, r, "write to private field"), n ? n.call(t, e) : r.set(t, e), e);
-import { B as C } from "./Base.js";
+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 { s as R } from "../css/ea-breadcrumb-item.style.js";
-import { E as _ } from "../utils/Utils.js";
-var l, c, d, b, p;
-class $ extends C {
+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();
-    /** @type {HTMLElement} */
-    a(this, l);
-    /** @type {HTMLSlotElement} */
-    a(this, c);
-    /** @type {AbortController} */
-    a(this, d, new AbortController());
-    f(this, "state", this.properties({
-      separator: {
-        type: String,
-        default: "/",
-        observer: () => {
-        }
-      }
-    }));
-    /**
-     * 获取分隔符
-     * @param {string} defaultSeparator
-     * @returns {HTMLElement}
-     */
-    a(this, b, (e = this.separator) => {
-      let o = this.shadowRoot.querySelector("#separatorSlot").assignedElements()[0];
-      return o || (o = document.createElement("span"), o.setAttribute("slot", "separator"), o.innerText = e), o;
-    });
-    /**
-     * 渲染分隔符
-     */
-    a(this, p, () => {
-      const n = [...this.shadowRoot.querySelector("#defaultSlot").assignedElements()].filter(
-        (m) => m.tagName.toLowerCase() === "ea-breadcrumb-item"
-      ), o = s(this, b).call(this, this.separator);
-      n.forEach((m, g) => {
-        g < n.length - 1 && !m.querySelector("[slot='separator']") && m.appendChild(o.cloneNode(!0));
-      });
-    });
-    this.stylesheet = v, this.$render();
+    super(...arguments), this.separator = "/";
   }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "separator"];
+  updateContainerClasslist() {
+    const t = m();
+    return this._container && (this._container.className = t), t;
   }
   /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
+   * 获取分隔符元素，优先使用 separator slot 中的自定义内容
+   * @param defaultSeparator - 默认分隔符文本
+   * @returns 分隔符 DOM 元素
    */
-  updateContainerClasslist() {
-    const e = this.computedClasslist("ea-breadcrumb", {
-      // ['--' + this.type]: this.type,
+  _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");
     });
-    return s(this, l).className = e, e;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-        <nav class='ea-breadcrumb' part='container'>
-            <slot id="defaultSlot"></slot>
-        </nav>
-        <slot id="separatorSlot" name="separator"></slot>
-    `, i(this, l, this.shadowRoot.querySelector(".ea-breadcrumb")), i(this, c, this.shadowRoot.querySelector("#defaultSlot"));
+  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>
+    `;
   }
-  connectedCallback() {
-    super.connectedCallback(), s(this, c).addEventListener("slotchange", s(this, p), {
-      signal: s(this, d).signal
-    });
+  _handleSlotChange() {
+    this._renderSeparator();
   }
-  $beforeUnmounted() {
-    var e;
-    (e = s(this, d)) == null || e.abort();
+  $mount() {
+    this.updateContainerClasslist(), this._renderSeparator();
   }
-}
-l = new WeakMap(), c = new WeakMap(), d = new WeakMap(), b = new WeakMap(), p = new WeakMap();
-window.customElements.get("ea-breadcrumb") || window.customElements.define("ea-breadcrumb", $);
-var u, h;
-class q extends C {
+};
+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();
-    /** @type {HTMLElement} */
-    a(this, u);
-    /** @type {HTMLElement} */
-    a(this, h);
-    f(this, "state", this.properties({
-      href: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          this.$render(), s(this, h).href = this.getAttribute("href");
-        }
-      }
-    }));
-    this.stylesheet = R, this.$render();
+    super(...arguments), this.href = "";
   }
-  static get observedAttributes() {
-    return [...super.observedAttributes, "href"];
+  updateContainerClasslist() {
+    const t = n();
+    return this._container && (this._container.className = t), t;
   }
   /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
+   * 根据 href 属性重新渲染内容元素，切换 a/span 标签
    */
-  updateContainerClasslist() {
-    const e = this.computedClasslist("ea-breadcrumb-item", {
-      // ['--' + this.type]: this.type,
-    });
-    return s(this, u).className = e, e;
+  _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);
+    }
   }
-  $render() {
-    const e = _.EaElement.h(
-      this.href ? "a" : "span",
-      "ea-breadcrumb-item__content",
-      {
-        part: "content",
-        [this.href ? "href" : ""]: this.href,
-        class: ["ea-breadcrumb-item__content", this.href ? "is-link" : ""]
-      },
-      "<slot></slot>"
-    );
-    this.shadowRoot.innerHTML = `
-      <div class='ea-breadcrumb-item' part='container'>
-        ${e}
-        <span class="ea-breadcrumb-item__separator" part='separator'>
-            <slot name="separator"></slot>
+  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>
-      </div>
-    `, i(this, u, this.shadowRoot.querySelector(".ea-breadcrumb-item")), i(this, h, this.shadowRoot.querySelector(
-      ".ea-breadcrumb-item__content"
-    )), this.updateContainerClasslist();
+      </li>
+    `;
   }
-  connectedCallback() {
-    super.connectedCallback();
+  $mount() {
+    this.updateContainerClasslist();
   }
-}
-u = new WeakMap(), h = new WeakMap();
-window.customElements.get("ea-breadcrumb-item") || window.customElements.define("ea-breadcrumb-item", q);
+};
+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 {
-  $ as EaBreadcrumb,
-  q as EaBreadcrumbItem
+  i as EaBreadcrumb,
+  c as EaBreadcrumbItem,
+  j as default
 };