easy-component-ui 3.0.15 → 4.0.2

package/dist/components/ea-progress.js

@@ -1,21 +1,19 @@
-var S = Object.defineProperty;
-var k = (t) => {
-  throw TypeError(t);
-};
-var P = (t, s, e) => s in t ? S(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var _ = (t, s, e) => P(t, typeof s != "symbol" ? s + "" : s, e), C = (t, s, e) => s.has(t) || k("Cannot " + e);
-var r = (t, s, e) => (C(t, s, "read from private field"), e ? e.call(t) : s.get(t)), p = (t, s, e) => s.has(t) ? k("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), h = (t, s, e, a) => (C(t, s, "write to private field"), a ? a.call(t, e) : s.set(t, e), e), d = (t, s, e) => (C(t, s, "access private method"), e);
-import { B } from "./Base.js";
-import { s as A } from "../css/ea-progress.style.js";
-const $ = `
+import { E as v } from "../core/EaBase.ts.js";
+import { q as h, a as p, C, p as b } from "../core/decorator.js";
+import { h as P } from "../utils/html.ts.js";
+import { E as _ } from "../utils/Enum.ts.js";
+import { c as g } from "../utils/bem.ts.js";
+import "./ea-icon.js";
+import { s as k } from "../css/ea-progress.style.js";
+const u = g("ea-progress"), f = `
 <svg viewBox="0 0 100 100">
-    <circle class="ea-progress__track" part="track" cx="50" cy="50" fill="none" stroke-dasharray="302px" stroke-dashoffset="0" />
-    <circle class="ea-progress__path" part="path" cx="50" cy="50" fill="none" stroke-dasharray="302px" stroke-dashoffset="0" />
+    <circle class="${u.e("track")}" part="track" cx="50" cy="50" fill="none" stroke-dasharray="302px" stroke-dashoffset="0" />
+    <circle class="${u.e("path")}" part="path" cx="50" cy="50" fill="none" stroke-dasharray="302px" stroke-dashoffset="0" />
 </svg>
-<section class="ea-progress__percentage-wrapper" part="percentage">
-    <slot class="ea-progress__percentage"></slot>
+<section class="${u.e("percentage-wrapper")}" part="percentage">
+    <slot class="${u.e("percentage")}"></slot>
 </section>
-`, q = `
+`, y = g("ea-progress"), m = `
 <svg viewBox="0 0 100 100">
     <mask id="myMask">
         <rect class="mask" width="100%" height="20%" fill="white" />
@@ -23,264 +21,282 @@ const $ = `
     <clipPath id="myClip">
         <rect class="mask" />
     </clipPath>
-    <circle class="ea-progress__track" part="track" cx="50" cy="50" fill="none" clip-path="url(#myClip)" />
-    <circle class="ea-progress__path" part="path" cx="50" cy="50" fill="none" clip-path="url(#myClip)" />
+    <circle class="${y.e("track")}" part="track" cx="50" cy="50" fill="none" clip-path="url(#myClip)" />
+    <circle class="${y.e("path")}" part="path" cx="50" cy="50" fill="none" clip-path="url(#myClip)" />
 </svg>
-<section class="ea-progress__percentage-wrapper" part="percentage">
-    <slot class="ea-progress__percentage"></slot>
+<section class="${y.e("percentage-wrapper")}" part="percentage">
+    <slot class="${y.e("percentage")}"></slot>
 </section>
 `;
-var i, g, o, u, n, y, c, w, b;
-class R extends B {
+class $ extends Event {
+  constructor(e) {
+    super("change", { bubbles: !0, composed: !0 }), this.detail = e;
+  }
+}
+var w = Object.defineProperty, S = Object.getOwnPropertyDescriptor, r = (t, e, a, c) => {
+  for (var i = c > 1 ? void 0 : c ? S(e, a) : e, l = t.length - 1, o; l >= 0; l--)
+    (o = t[l]) && (i = (c ? o(e, a, i) : o(i)) || i);
+  return c && i && w(e, a, i), i;
+};
+const x = "ea-progress", n = g(x), T = ["line", "circle", "dashboard"], E = ["success", "warning", "exception"], A = {
+  success: "circle-check",
+  warning: "triangle-exclamation",
+  exception: "circle-xmark"
+};
+let s = class extends v {
   constructor() {
-    super();
-    p(this, c);
-    /** @type {HTMLElement} */
-    p(this, i);
-    /** @type {HTMLElement} */
-    p(this, g);
-    /** @type {HTMLElement} */
-    p(this, o);
-    /** @type {HTMLElement} */
-    p(this, u);
-    /** @type {HTMLElement} */
-    p(this, n);
-    _(this, "propState", this.properties({
-      color: {
-        props: !0,
-        type: {
-          Array: () => {
-            var e, a;
-            return ((a = (e = this.props) == null ? void 0 : e.color) == null ? void 0 : a.length) > 0;
-          },
-          Function: () => {
-            var e;
-            return typeof ((e = this.props) == null ? void 0 : e.color) == "function";
-          },
-          String: () => {
-            var e;
-            return typeof this.getAttribute("color") == "string" || typeof ((e = this.props) == null ? void 0 : e.color) == "string";
-          }
-        },
-        default: () => this.getAttribute("color") || "",
-        observer: (e) => {
-          r(this, y).call(this, e, e);
-        }
-      }
-    }));
-    _(this, "state", this.properties({
-      percentage: {
-        type: Number,
-        default: 0,
-        observer: (e) => {
-          d(this, c, b).call(this, e);
-        }
-      },
-      type: {
-        type: ["line", "circle", "dashboard"],
-        default: "line",
-        observer: () => {
-          this.$render(), this.updateContainerClasslist(), d(this, c, b).call(this);
-        }
-      },
-      status: {
-        type: ["success", "exception", "warning"],
-        default: "",
-        observer: () => {
-          this.updateContainerClasslist(), d(this, c, w).call(this);
-        }
-      },
-      "stroke-width": {
-        type: String,
-        default: "8px",
-        observer: (e) => {
-          if (!CSS.supports("width", e))
-            return console.warn(
-              `[EaProgress] The width value ${e} is not supported.`
-            );
-          r(this, i).style.setProperty("--ea-progress-stroke-width", e);
-        }
-      },
-      "text-inside": {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          try {
-            e ? r(this, o).appendChild(r(this, n)) : r(this, u).appendChild(r(this, n));
-          } catch {
-          }
-          this.updateContainerClasslist();
-        }
-      },
-      indeterminate: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      duration: {
-        type: Number,
-        default: 3,
-        observer: (e) => {
-          r(this, i).style.setProperty(
-            "--ea-progress-animation-duration",
-            `${e}s`
-          );
-        }
-      },
-      striped: {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      "striped-flow": {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      size: {
-        type: String,
-        default: "126px",
-        observer: (e) => {
-          this.type !== "line" && r(this, i).style.setProperty("--ea-progress-size", e);
-        }
+    super(...arguments), this.variant = "line", this.percentage = 0, this.status = "", this.strokeWidth = "8px", this.textInside = !1, this.indeterminate = !1, this.duration = 3, this.striped = !1, this.stripedFlow = !1, this.size = "126px", this.showText = !0, this.color = "";
+  }
+  updateContainerClasslist() {
+    const t = n(
+      {
+        [this.status]: !!this.status,
+        "text-inside": this.textInside,
+        striped: this.striped
       },
-      "show-text": {
-        type: Boolean,
-        default: !0,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
+      {
+        [this.variant]: !0,
+        indeterminate: this.indeterminate && this.variant === "line",
+        "striped-flow": this.stripedFlow,
+        "show-text": this.showText
       }
-    }));
-    /**
-     * 处理颜色变化
-     * @param {string | string[] | function} color 颜色值或函数
-     * @param {number} [percentage] 百分比
-     */
-    p(this, y, (e, a = this.percentage) => {
-      if (!(!e || typeof e > "u"))
-        if (Array.isArray(e)) {
-          let l = e[0];
-          for (let f = 0; f < e.length; f++) {
-            const x = e[f];
-            if (a <= x.percentage) {
-              l = x;
-              break;
-            }
+    );
+    return this._container && (this._container.className = t), t;
+  }
+  /** 处理颜色变更，支持字符串、数组和函数三种格式 */
+  _handleColorChange(t, e = this.percentage) {
+    var a, c, i;
+    if (!(!t || typeof t > "u"))
+      if (Array.isArray(t)) {
+        let l = t[0];
+        for (let o = 0; o < t.length; o++) {
+          const d = t[o];
+          if (e <= d.percentage) {
+            l = d;
+            break;
           }
-          r(this, o).style.setProperty("--ea-progress-path-color", l == null ? void 0 : l.color);
-        } else typeof e == "string" ? r(this, o).style.setProperty("--ea-progress-path-color", e) : typeof e == "function" && r(this, o).style.setProperty(
+        }
+        (a = this._path) == null || a.style.setProperty(
           "--ea-progress-path-color",
-          e(a)
+          l == null ? void 0 : l.color
         );
-    });
-    this.stylesheet = A, this.$render();
+      } else typeof t == "string" ? (c = this._path) == null || c.style.setProperty("--ea-progress-path-color", t) : typeof t == "function" && ((i = this._path) == null || i.style.setProperty(
+        "--ea-progress-path-color",
+        t(e)
+      ));
   }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "type",
-      "percentage",
-      "status",
-      "stroke-width",
-      "text-inside",
-      "indeterminate",
-      "duration",
-      "striped",
-      "striped-flow",
-      // "width",
-      "show-text"
-    ];
+  /** 更新状态文本或图标 */
+  _updateStatusText() {
+    ["success", "exception", "warning"].includes(this.status) && !this.textInside ? this._text.innerHTML = P(
+      `<ea-icon class="${n.e("status")}" name="${A[this.status]}" part="status-icon"></ea-icon>`
+    ) : this._text.textContent = this.percentage + "%";
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    const e = this.computedClasslist(
-      "ea-progress",
-      {
-        ["--" + this.status]: this.status,
-        "--text-inside": this["text-inside"],
-        "--striped": this.striped
-      },
-      {
-        [this.type]: this.type,
-        indeterminate: this.indeterminate && this.type === "line",
-        "striped-flow": this["striped-flow"],
-        "show-text": this["show-text"]
+  /** 更新进度百分比相关的样式和事件 */
+  _updatePercentage(t = this.percentage) {
+    var c;
+    if (t < 0) {
+      this.percentage = 0;
+      return;
+    } else if (t > 100) {
+      this.percentage = 100;
+      return;
+    }
+    const e = this.querySelector("[data-percentage]"), a = {
+      line: () => t + "%",
+      circle: () => 302 * ((100 - t) / 100) + "px",
+      dashboard: () => {
+        const l = 49 - Number(this.strokeWidth.replace("px", "")) / 2, o = 2 * Math.PI * l, d = (100 - t) / 100;
+        return this._path.style.strokeDasharray = o * (270 / 360) + "px", this._track.style.strokeDasharray = o * (270 / 360) + "px", o * (270 / 360) * d + "px";
       }
-    );
-    return r(this, i).className = e, e;
+    };
+    (c = this._container) == null || c.style.setProperty(
+      "--ea-progress-percentage",
+      a[this.variant]()
+    ), this._updateStatusText(), e && (e.textContent = String(this.percentage)), this._handleColorChange(this.color, t), this.dispatchEvent(new $({ percentage: t }));
+  }
+  /** 根据 variant 重新渲染内部结构 */
+  _render() {
+    if (!this._container) return;
+    const t = {
+      line: this._lineTemplate(),
+      circle: f,
+      dashboard: m
+    };
+    this._container.innerHTML = t[this.variant], this.updateContainerClasslist();
+  }
+  /** 生成 line 类型的模板 */
+  _lineTemplate() {
+    return `
+      <section class="${n.e("track")}" part="track">
+        <section class="${n.e("path")}" part="path"></section>
+      </section>
+      <section class="${n.e("percentage-wrapper")}" part="percentage">
+        <slot class="${n.e("percentage")}"></slot>
+      </section>
+    `;
   }
-  $render() {
-    const e = {
-      line: `
-        <div class='ea-progress' part='container'>
-          <section class="ea-progress__track" part="track">
-            <section class="ea-progress__path" part="path"></section>
-          </section>
-          <section class="ea-progress__percentage-wrapper" part="percentage">
-            <slot class="ea-progress__percentage"></slot>
-          </section>
-        </div>
-      `,
-      circle: $,
-      dashboard: q
+  html() {
+    const t = {
+      line: this._lineTemplate(),
+      circle: f,
+      dashboard: m
     };
-    this.shadowRoot.innerHTML = `
-      <div class='ea-progress' part='container'>
-        ${e[this.type]}
+    return `
+      <div class="${this.updateContainerClasslist()}" part="container">
+        ${t[this.variant]}
       </div>
-    `, h(this, i, this.shadowRoot.querySelector(".ea-progress")), h(this, g, this.shadowRoot.querySelector(".ea-progress__track")), h(this, o, this.shadowRoot.querySelector(".ea-progress__path")), h(this, u, this.shadowRoot.querySelector(
-      ".ea-progress__percentage-wrapper"
-    )), h(this, n, this.shadowRoot.querySelector(".ea-progress__percentage")), this.updateContainerClasslist();
+    `;
   }
-  connectedCallback() {
-    super.connectedCallback();
+  $mount() {
+    this.setAttribute("role", this.variant === "dashboard" ? "meter" : "progressbar"), this.setAttribute("aria-valuemin", "0"), this.setAttribute("aria-valuemax", "100");
+    const t = this.getAttribute("color");
+    t && !this.color && (this.color = t), this.updateContainerClasslist();
   }
-}
-i = new WeakMap(), g = new WeakMap(), o = new WeakMap(), u = new WeakMap(), n = new WeakMap(), y = new WeakMap(), c = new WeakSet(), /**
- * 更新状态文本/图标
- */
-w = function() {
-  const e = {
-    success: "circle-check",
-    warning: "triangle-exclamation",
-    exception: "circle-xmark"
-  };
-  ["success", "exception", "warning"].includes(this.status) && !this["text-inside"] ? r(this, n).innerHTML = `<ea-icon class="ea-progress__status" name="${e[this.status]}" part="status-icon"></ea-icon>` : r(this, n).textContent = this.percentage + "%";
-}, /**
- * 更新进度条百分比
- * @param {number} [newVal] 新的百分比值
- */
-b = function(e = this.percentage) {
-  if (e < 0) return this.percentage = 0;
-  if (e > 100) return this.percentage = 100;
-  const a = this.querySelector("[data-percentage]"), l = {
-    line: () => e + "%",
-    circle: () => 302 * ((100 - e) / 100) + "px",
-    dashboard: () => {
-      const x = 49 - Number(this["stroke-width"].replace("px", "")) / 2, m = 2 * Math.PI * x, v = (100 - e) / 100;
-      return r(this, o).style.strokeDasharray = m * (270 / 360) + "px", r(this, g).style.strokeDasharray = m * (270 / 360) + "px", m * (270 / 360) * v + "px";
+};
+r([
+  h(n.cb())
+], s.prototype, "_container", 2);
+r([
+  h(n.ce("track"))
+], s.prototype, "_track", 2);
+r([
+  h(n.ce("path"))
+], s.prototype, "_path", 2);
+r([
+  h(n.ce("percentage-wrapper"))
+], s.prototype, "_percentageWrapper", 2);
+r([
+  h(n.ce("percentage"))
+], s.prototype, "_text", 2);
+r([
+  p({
+    type: _(T),
+    default: "line",
+    observer() {
+      this._render(), this.updateContainerClasslist(), this._updatePercentage(), this.setAttribute("role", this.variant === "dashboard" ? "meter" : "progressbar");
     }
-  };
-  r(this, i).style.setProperty(
-    "--ea-progress-percentage",
-    l[this.type]()
-  ), d(this, c, w).call(this), a && (a.textContent = this.percentage), r(this, y).call(this, this.color, e), this.emit("change", {
-    detail: {
-      percentage: e
+  })
+], s.prototype, "variant", 2);
+r([
+  p({
+    type: Number,
+    default: 0,
+    a11y: { ariaAttr: "aria-valuenow" },
+    observer(t) {
+      this._updatePercentage(t);
     }
-  });
-};
-window.customElements.get("ea-progress") || window.customElements.define("ea-progress", R);
+  })
+], s.prototype, "percentage", 2);
+r([
+  p({
+    type: _(E),
+    default: "",
+    observer() {
+      this.updateContainerClasslist(), this._updateStatusText();
+    }
+  })
+], s.prototype, "status", 2);
+r([
+  p({
+    type: String,
+    default: "8px",
+    observer(t) {
+      var e;
+      if (!CSS.supports("width", t))
+        return console.warn(
+          `[EaProgress] The width value ${t} is not supported.`
+        );
+      (e = this._container) == null || e.style.setProperty("--ea-progress-stroke-width", t);
+    }
+  })
+], s.prototype, "strokeWidth", 2);
+r([
+  p({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      var e, a;
+      try {
+        t ? (e = this._path) == null || e.appendChild(this._text) : (a = this._percentageWrapper) == null || a.appendChild(this._text);
+      } catch {
+      }
+      this.updateContainerClasslist();
+    }
+  })
+], s.prototype, "textInside", 2);
+r([
+  p({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], s.prototype, "indeterminate", 2);
+r([
+  p({
+    type: Number,
+    default: 3,
+    observer(t) {
+      var e;
+      (e = this._container) == null || e.style.setProperty(
+        "--ea-progress-animation-duration",
+        `${t}s`
+      );
+    }
+  })
+], s.prototype, "duration", 2);
+r([
+  p({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], s.prototype, "striped", 2);
+r([
+  p({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], s.prototype, "stripedFlow", 2);
+r([
+  p({
+    type: String,
+    default: "126px",
+    observer(t) {
+      var e;
+      this.variant !== "line" && ((e = this._container) == null || e.style.setProperty("--ea-progress-size", t));
+    }
+  })
+], s.prototype, "size", 2);
+r([
+  p({
+    type: Boolean,
+    default: !0,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], s.prototype, "showText", 2);
+r([
+  b({
+    type: Object,
+    default: "",
+    observer(t) {
+      this._handleColorChange(t, t);
+    }
+  })
+], s.prototype, "color", 2);
+s = r([
+  C(x, { styles: [k] })
+], s);
+const D = s;
 export {
-  R as EaProgress
+  s as EaProgress,
+  D as default
 };