easy-component-ui 3.0.11 → 3.0.13

package/dist/components/ea-progress.js

@@ -1,21 +1,21 @@
-var _ = Object.defineProperty;
-var x = (t) => {
+var S = Object.defineProperty;
+var k = (t) => {
   throw TypeError(t);
 };
-var k = (t, s, e) => s in t ? _(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var f = (t, s, e) => k(t, typeof s != "symbol" ? s + "" : s, e), m = (t, s, e) => s.has(t) || x("Cannot " + e);
-var r = (t, s, e) => (m(t, s, "read from private field"), e ? e.call(t) : s.get(t)), c = (t, s, e) => s.has(t) ? x("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), h = (t, s, e, i) => (m(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 w } from "../css/ea-progress.style.js";
-const P = `
+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 $ = `
 <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" />
 </svg>
-<section class="ea-progress__percentage" part="percentage">
-    <slot></slot>
+<section class="ea-progress__percentage-wrapper" part="percentage">
+    <slot class="ea-progress__percentage"></slot>
 </section>
-`, S = `
+`, q = `
 <svg viewBox="0 0 100 100">
     <mask id="myMask">
         <rect class="mask" width="100%" height="20%" fill="white" />
@@ -26,29 +26,32 @@ const P = `
     <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)" />
 </svg>
-<section class="ea-progress__percentage" part="percentage">
-    <slot></slot>
+<section class="ea-progress__percentage-wrapper" part="percentage">
+    <slot class="ea-progress__percentage"></slot>
 </section>
 `;
-var a, d, o, p, u;
-class B extends v {
+var i, g, o, u, n, y, c, w, b;
+class R extends B {
   constructor() {
     super();
+    p(this, c);
     /** @type {HTMLElement} */
-    c(this, a);
+    p(this, i);
     /** @type {HTMLElement} */
-    c(this, d);
+    p(this, g);
     /** @type {HTMLElement} */
-    c(this, o);
+    p(this, o);
     /** @type {HTMLElement} */
-    c(this, p);
-    f(this, "propState", this.properties({
+    p(this, u);
+    /** @type {HTMLElement} */
+    p(this, n);
+    _(this, "propState", this.properties({
       color: {
         props: !0,
         type: {
           Array: () => {
-            var e, i;
-            return ((i = (e = this.props) == null ? void 0 : e.color) == null ? void 0 : i.length) > 0;
+            var e, a;
+            return ((a = (e = this.props) == null ? void 0 : e.color) == null ? void 0 : a.length) > 0;
           },
           Function: () => {
             var e;
@@ -61,51 +64,30 @@ class B extends v {
         },
         default: () => this.getAttribute("color") || "",
         observer: (e) => {
-          r(this, u).call(this, e, e);
+          r(this, y).call(this, e, e);
         }
       }
     }));
-    f(this, "state", this.properties({
+    _(this, "state", this.properties({
       percentage: {
         type: Number,
         default: 0,
         observer: (e) => {
-          if (e < 0) return this.percentage = 0;
-          if (e > 100) return this.percentage = 100;
-          const i = this.querySelector("[data-percentage]"), n = {
-            success: "icon-ok-circled",
-            warning: "icon-attention-circled",
-            exception: "icon-cancel-circled"
-          }, l = {
-            line: () => e + "%",
-            circle: () => 302 * ((100 - e) / 100) + "px",
-            dashboard: () => {
-              const C = 49 - Number(this["stroke-width"].replace("px", "")) / 2, y = 2 * Math.PI * C, b = (100 - e) / 100;
-              return r(this, o).style.strokeDasharray = y * (270 / 360) + "px", r(this, d).style.strokeDasharray = y * (270 / 360) + "px", y * (270 / 360) * b + "px";
-            }
-          };
-          r(this, a).style.setProperty(
-            "--ea-progress-percentage",
-            l[this.type]()
-          ), ["success", "exception", "warning"].includes(this.status) && !this["text-inside"] ? r(this, p).innerHTML = `<ea-icon class="ea-progress__status" icon="${n[this.status]}" part="status-icon"></ea-icon>` : r(this, p).textContent = e + "%", i && (i.textContent = this.percentage), r(this, u).call(this, this.color, e), this.emit("change", {
-            detail: {
-              percentage: e
-            }
-          });
+          d(this, c, b).call(this, e);
         }
       },
       type: {
         type: ["line", "circle", "dashboard"],
         default: "line",
         observer: () => {
-          this.$render(), this.updateContainerClasslist();
+          this.$render(), this.updateContainerClasslist(), d(this, c, b).call(this);
         }
       },
       status: {
         type: ["success", "exception", "warning"],
         default: "",
         observer: () => {
-          this.updateContainerClasslist();
+          this.updateContainerClasslist(), d(this, c, w).call(this);
         }
       },
       "stroke-width": {
@@ -116,7 +98,7 @@ class B extends v {
             return console.warn(
               `[EaProgress] The width value ${e} is not supported.`
             );
-          r(this, a).style.setProperty("--ea-progress-stroke-width", e);
+          r(this, i).style.setProperty("--ea-progress-stroke-width", e);
         }
       },
       "text-inside": {
@@ -124,7 +106,7 @@ class B extends v {
         default: !1,
         observer: (e) => {
           try {
-            e && r(this, o).appendChild(r(this, p));
+            e ? r(this, o).appendChild(r(this, n)) : r(this, u).appendChild(r(this, n));
           } catch {
           }
           this.updateContainerClasslist();
@@ -141,7 +123,7 @@ class B extends v {
         type: Number,
         default: 3,
         observer: (e) => {
-          r(this, a).style.setProperty(
+          r(this, i).style.setProperty(
             "--ea-progress-animation-duration",
             `${e}s`
           );
@@ -165,7 +147,7 @@ class B extends v {
         type: String,
         default: "126px",
         observer: (e) => {
-          this.type !== "line" && r(this, a).style.setProperty("--ea-progress-size", e);
+          this.type !== "line" && r(this, i).style.setProperty("--ea-progress-size", e);
         }
       },
       "show-text": {
@@ -181,24 +163,24 @@ class B extends v {
      * @param {string | string[] | function} color 颜色值或函数
      * @param {number} [percentage] 百分比
      */
-    c(this, u, (e, i = this.percentage) => {
+    p(this, y, (e, a = this.percentage) => {
       if (!(!e || typeof e > "u"))
         if (Array.isArray(e)) {
-          let n = e[0];
-          for (let l = 0; l < e.length; l++) {
-            const g = e[l];
-            if (i <= g.percentage) {
-              n = g;
+          let l = e[0];
+          for (let f = 0; f < e.length; f++) {
+            const x = e[f];
+            if (a <= x.percentage) {
+              l = x;
               break;
             }
           }
-          r(this, o).style.setProperty("--ea-progress-path-color", n == null ? void 0 : n.color);
+          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(
           "--ea-progress-path-color",
-          e(i)
+          e(a)
         );
     });
-    this.stylesheet = w, this.$render();
+    this.stylesheet = A, this.$render();
   }
   static get observedAttributes() {
     return [
@@ -230,40 +212,75 @@ class B extends v {
       },
       {
         [this.type]: this.type,
-        indeterminate: this.indeterminate && this.type === "line" && !this["striped-flow"],
+        indeterminate: this.indeterminate && this.type === "line",
         "striped-flow": this["striped-flow"],
         "show-text": this["show-text"]
       }
     );
-    return r(this, a).className = e, e;
+    return r(this, i).className = e, e;
   }
   $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 class="ea-progress__path" part="path"></section>
           </section>
-          <section class="ea-progress__percentage" part="percentage">
+          <section class="ea-progress__percentage-wrapper" part="percentage">
             <slot class="ea-progress__percentage"></slot>
           </section>
         </div>
       `,
-      circle: P,
-      dashboard: S
+      circle: $,
+      dashboard: q
     };
     this.shadowRoot.innerHTML = `
       <div class='ea-progress' part='container'>
         ${e[this.type]}
       </div>
-    `, h(this, a, this.shadowRoot.querySelector(".ea-progress")), h(this, d, this.shadowRoot.querySelector(".ea-progress__track")), h(this, o, this.shadowRoot.querySelector(".ea-progress__path")), h(this, p, this.shadowRoot.querySelector(".ea-progress__percentage slot")), this.updateContainerClasslist();
+    `, 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();
   }
 }
-a = new WeakMap(), d = new WeakMap(), o = new WeakMap(), p = new WeakMap(), u = new WeakMap();
-window.customElements.get("ea-progress") || window.customElements.define("ea-progress", B);
+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(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
+    }
+  });
+};
+window.customElements.get("ea-progress") || window.customElements.define("ea-progress", R);
 export {
-  B as EaProgress
+  R as EaProgress
 };

package/dist/components/ea-rate.js

@@ -73,7 +73,7 @@ class R extends V {
          * @param {boolean} [isSelected]
          * @returns {string}
          */
-        default: () => () => '<ea-icon icon="icon-star" part="icon"></ea-icon>',
+        default: () => () => '<ea-icon name="star" part="icon"></ea-icon>',
         /** @param {Function} cb */
         observer: (t) => {
           !t || typeof t != "function" || (e(this, r).innerHTML = e(this, v).call(this, t), e(this, c).call(this, this.value - 1));

package/dist/components/ea-result.js

@@ -2,32 +2,32 @@ var b = Object.defineProperty;
 var h = (e) => {
   throw TypeError(e);
 };
-var m = (e, s, t) => s in e ? b(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
-var p = (e, s, t) => m(e, typeof s != "symbol" ? s + "" : s, t), _ = (e, s, t) => s.has(e) || h("Cannot " + t);
-var i = (e, s, t) => (_(e, s, "read from private field"), t ? t.call(e) : s.get(e)), r = (e, s, t) => s.has(e) ? h("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), o = (e, s, t, d) => (_(e, s, "write to private field"), d ? d.call(e, t) : s.set(e, t), t);
-import { B as y } from "./Base.js";
-import { s as v } from "../css/ea-result.style.js";
-import { t as w } from "../utils/Variables.js";
-var l, a, n, u, c;
-class f extends y {
+var y = (e, s, t) => s in e ? b(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
+var p = (e, s, t) => y(e, typeof s != "symbol" ? s + "" : s, t), _ = (e, s, t) => s.has(e) || h("Cannot " + t);
+var i = (e, s, t) => (_(e, s, "read from private field"), t ? t.call(e) : s.get(e)), a = (e, s, t) => s.has(e) ? h("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), o = (e, s, t, d) => (_(e, s, "write to private field"), d ? d.call(e, t) : s.set(e, t), t);
+import { B as v } from "./Base.js";
+import { s as f } from "../css/ea-result.style.js";
+import { t as m } from "../utils/Variables.js";
+var l, r, n, u, c;
+class w extends v {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    r(this, l);
+    a(this, l);
     /** @type {HTMLElement} */
-    r(this, a);
+    a(this, r);
     /** @type {HTMLElement} */
-    r(this, n);
+    a(this, n);
     /** @type {HTMLElement} */
-    r(this, u);
+    a(this, u);
     /** @type {HTMLElement} */
-    r(this, c);
+    a(this, c);
     p(this, "state", this.properties({
       type: {
         type: ["primary", "success", "warning", "info", "error"],
         default: "",
         observer: (t) => {
-          i(this, a).setAttribute("icon", `icon-${w[t]}`), this.updateContainerClasslist();
+          i(this, r).setAttribute("name", m[t]), this.updateContainerClasslist();
         }
       },
       title: {
@@ -48,11 +48,11 @@ class f extends y {
         type: String,
         default: "",
         observer: (t) => {
-          i(this, a).setAttribute("icon", t);
+          t ? i(this, r).setAttribute("name", t) : i(this, r).setAttribute("name", m[this.type]);
         }
       }
     }));
-    this.stylesheet = v, this.$render();
+    this.stylesheet = f, this.$render();
   }
   static get observedAttributes() {
     return [...super.observedAttributes, "type", "title", "sub-title", "icon"];
@@ -85,7 +85,7 @@ class f extends y {
           <slot name="extra"></slot>
         </div>
       </div>
-    `, o(this, l, this.shadowRoot.querySelector(".ea-result")), o(this, a, this.shadowRoot.querySelector(".ea-result__default-icon")), o(this, n, this.shadowRoot.querySelector(".ea-result__title slot")), o(this, u, this.shadowRoot.querySelector(
+    `, o(this, l, this.shadowRoot.querySelector(".ea-result")), o(this, r, this.shadowRoot.querySelector(".ea-result__default-icon")), o(this, n, this.shadowRoot.querySelector(".ea-result__title slot")), o(this, u, this.shadowRoot.querySelector(
       ".ea-result__sub-title slot"
     )), o(this, c, this.shadowRoot.querySelector(".ea-result__extra slot"));
   }
@@ -93,8 +93,8 @@ class f extends y {
     super.connectedCallback();
   }
 }
-l = new WeakMap(), a = new WeakMap(), n = new WeakMap(), u = new WeakMap(), c = new WeakMap();
-window.customElements.get("ea-result") || window.customElements.define("ea-result", f);
+l = new WeakMap(), r = new WeakMap(), n = new WeakMap(), u = new WeakMap(), c = new WeakMap();
+window.customElements.get("ea-result") || window.customElements.define("ea-result", w);
 export {
-  f as EaResult
+  w as EaResult
 };