easy-component-ui 3.0.11 → 3.0.13

package/dist/components/ea-steps.js

@@ -1,65 +1,64 @@
-var x = Object.defineProperty;
-var g = (e) => {
-  throw TypeError(e);
+var $ = Object.defineProperty;
+var q = (s) => {
+  throw TypeError(s);
 };
-var q = (e, s, t) => s in e ? x(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
-var S = (e, s, t) => q(e, typeof s != "symbol" ? s + "" : s, t), A = (e, s, t) => s.has(e) || g("Cannot " + t);
-var i = (e, s, t) => (A(e, s, "read from private field"), t ? t.call(e) : s.get(e)), a = (e, s, t) => s.has(e) ? g("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), c = (e, s, t, r) => (A(e, s, "write to private field"), r ? r.call(e, t) : s.set(e, t), t);
-import { B as _ } from "./Base.js";
-import { s as E } from "../css/ea-step.style.js";
-import { s as R } from "../css/ea-steps.style.js";
-var n, p, h, y, l, d, m, v;
-class $ extends _ {
+var B = (s, i, t) => i in s ? $(s, i, { enumerable: !0, configurable: !0, writable: !0, value: t }) : s[i] = t;
+var x = (s, i, t) => B(s, typeof i != "symbol" ? i + "" : i, t), E = (s, i, t) => i.has(s) || q("Cannot " + t);
+var e = (s, i, t) => (E(s, i, "read from private field"), t ? t.call(s) : i.get(s)), o = (s, i, t) => i.has(s) ? q("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, t), n = (s, i, t, r) => (E(s, i, "write to private field"), r ? r.call(s, t) : i.set(s, t), t);
+import { B as R } from "./Base.js";
+import { s as N } from "../css/ea-step.style.js";
+import { s as k } from "../css/ea-steps.style.js";
+var l, p, u, C, c, m, b, S, A;
+class I extends R {
   constructor() {
     super();
-    a(this, n);
+    o(this, l);
     /** @type {HTMLElement} */
-    a(this, h);
+    o(this, u);
     /** @type {HTMLElement} */
-    a(this, y);
+    o(this, C);
     /** @type {HTMLElement} */
-    a(this, l);
+    o(this, c);
     /** @type {HTMLElement} */
-    a(this, d);
+    o(this, m);
     /** @type {HTMLElement} */
-    a(this, m);
+    o(this, b);
     /** @type {AbortController} */
-    a(this, v, new AbortController());
-    S(this, "state", this.properties({
+    o(this, S, new AbortController());
+    x(this, "state", this.properties({
       title: {
         type: String,
         default: "",
         observer: (t) => {
-          i(this, d).textContent = t;
+          e(this, m).textContent = t;
         }
       },
       description: {
         type: String,
         default: "",
         observer: (t) => {
-          i(this, m).textContent = t;
+          e(this, b).textContent = t;
         }
       },
       icon: {
         type: String,
         default: "",
         observer: (t) => {
-          i(this, l).setAttribute("icon", t);
+          e(this, c).setAttribute("name", t);
         }
       },
       status: {
         type: ["", "wait", "process", "finish", "error", "success"],
         default: "",
         observer: (t) => {
-          var r;
-          this.updateContainerClasslist(), !this.icon && (t === ((r = i(this, n, p)) == null ? void 0 : r.getAttribute("finish-status")) ? (i(this, l).setAttribute("icon", "icon-ok"), i(this, l).textContent = "") : (i(this, l).setAttribute("icon", ""), i(this, l).textContent = this.index + 1));
+          this.updateContainerClasslist(), !this.icon && e(this, A).call(this, t);
         }
       },
       index: {
         type: Number,
         default: () => {
           var r;
-          const t = (r = i(this, n, p)) == null ? void 0 : r.querySelectorAll("ea-step");
+          const t = (r = e(this, l, p)) == null ? void 0 : r.querySelectorAll("ea-step");
           return t ? Array.from(t).indexOf(this) : 0;
         },
         observer: () => {
@@ -69,7 +68,7 @@ class $ extends _ {
         type: Boolean,
         default: () => {
           var t;
-          return !!((t = i(this, n, p)) != null && t.hasAttribute("simple"));
+          return !!((t = e(this, l, p)) != null && t.hasAttribute("simple"));
         },
         observer: () => {
         }
@@ -78,7 +77,7 @@ class $ extends _ {
         type: Boolean,
         default: () => {
           var t;
-          return !!((t = i(this, n, p)) != null && t.hasAttribute("align-center"));
+          return !!((t = e(this, l, p)) != null && t.hasAttribute("align-center"));
         },
         observer: () => {
           this.updateContainerClasslist();
@@ -88,14 +87,22 @@ class $ extends _ {
         type: ["vertical", "horizontal"],
         default: () => {
           var t;
-          return ((t = i(this, n, p)) == null ? void 0 : t.getAttribute("direction")) || "horizontal";
+          return ((t = e(this, l, p)) == null ? void 0 : t.getAttribute("direction")) || "horizontal";
         },
         observer: () => {
           this.updateContainerClasslist();
         }
       }
     }));
-    this.stylesheet = E, this.$render();
+    /**
+     * 更新步骤状态
+     * @param {string} status 活动步骤状态
+     */
+    o(this, A, (t = this.status) => {
+      var r;
+      t === ((r = e(this, l, p)) == null ? void 0 : r.getAttribute("finish-status")) ? (e(this, c).setAttribute("name", "check"), e(this, c).textContent = "") : (e(this, c).setAttribute("name", ""), e(this, c).textContent = this.index + 1);
+    });
+    this.stylesheet = N, this.$render();
   }
   static get observedAttributes() {
     return [
@@ -124,14 +131,14 @@ class $ extends _ {
         icon: this.icon,
         simple: this.simple,
         last: (() => {
-          var o;
-          const r = (o = i(this, n, p)) == null ? void 0 : o.querySelectorAll("ea-step");
+          var a;
+          const r = (a = e(this, l, p)) == null ? void 0 : a.querySelectorAll("ea-step");
           return r ? r.length - 1 === this.index : !1;
         })(),
         first: this.index === 0
       }
     );
-    return i(this, h) && (i(this, h).className = t), t;
+    return e(this, u) && (e(this, u).className = t), t;
   }
   $render() {
     this.shadowRoot.innerHTML = `
@@ -156,7 +163,7 @@ class $ extends _ {
           <slot name="simple-arrow"></slot>
         </span>
       </div>
-    `, c(this, h, this.shadowRoot.querySelector(".ea-step")), c(this, y, this.shadowRoot.querySelector('slot[name="icon"]')), c(this, l, this.shadowRoot.querySelector(".ea-step__icon")), c(this, d, this.shadowRoot.querySelector('slot[name="title"]')), c(this, m, this.shadowRoot.querySelector(
+    `, n(this, u, this.shadowRoot.querySelector(".ea-step")), n(this, C, this.shadowRoot.querySelector('slot[name="icon"]')), n(this, c, this.shadowRoot.querySelector(".ea-step__icon")), n(this, m, this.shadowRoot.querySelector('slot[name="title"]')), n(this, b, this.shadowRoot.querySelector(
       'slot[name="description"]'
     )), this.updateContainerClasslist();
   }
@@ -164,26 +171,28 @@ class $ extends _ {
     super.connectedCallback();
   }
   $beforeUnmounted() {
-    i(this, v).abort();
+    e(this, S).abort();
   }
 }
-n = new WeakSet(), p = function() {
+l = new WeakSet(), p = function() {
   try {
     return this.closest("ea-steps");
   } catch {
     return null;
   }
-}, h = new WeakMap(), y = new WeakMap(), l = new WeakMap(), d = new WeakMap(), m = new WeakMap(), v = new WeakMap();
-window.customElements.get("ea-step") || window.customElements.define("ea-step", $);
-var b, w, C;
-class B extends _ {
+}, u = new WeakMap(), C = new WeakMap(), c = new WeakMap(), m = new WeakMap(), b = new WeakMap(), S = new WeakMap(), A = new WeakMap();
+window.customElements.get("ea-step") || window.customElements.define("ea-step", I);
+var f, y, h, v, w, _;
+class L extends R {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    a(this, b);
+    o(this, f);
+    /** @type {HTMLSlotElement} */
+    o(this, y);
     /** @type {AbortController} */
-    a(this, w, new AbortController());
-    S(this, "state", this.properties({
+    o(this, h, new AbortController());
+    x(this, "state", this.properties({
       space: {
         type: String,
         default: "50%",
@@ -203,7 +212,7 @@ class B extends _ {
         type: Number,
         default: 0,
         observer: (t) => {
-          i(this, C).call(this, t);
+          e(this, v).call(this, t);
         }
       },
       "process-status": {
@@ -228,25 +237,7 @@ class B extends _ {
         type: Boolean,
         default: !1,
         observer: (t) => {
-          const r = [...this.querySelectorAll("ea-step")];
-          t ? r.forEach((o) => {
-            var u;
-            try {
-              (u = o.querySelector('[slot="simple-arrow"]')) == null || u.remove();
-            } catch {
-            }
-            try {
-              const f = document.createElement("ea-icon");
-              f.setAttribute("slot", "simple-arrow"), f.setAttribute("icon", "icon-angle-right"), f.part = "simple-arrow", o.appendChild(f);
-            } catch {
-            }
-          }) : r.forEach((o) => {
-            var u;
-            try {
-              (u = o.querySelector('[slot="simple-arrow"]')) == null || u.remove();
-            } catch {
-            }
-          }), this.updateContainerClasslist();
+          e(this, w).call(this, t), this.updateContainerClasslist();
         }
       }
     }));
@@ -254,12 +245,47 @@ class B extends _ {
      * 更新步骤状态
      * @param {number} active
      */
-    a(this, C, (t) => {
-      [...this.querySelectorAll("ea-step")].forEach((o) => {
-        o.index < t ? o.setAttribute("status", this["finish-status"]) : o.index > t ? o.setAttribute("status", "wait") : o.setAttribute("status", this["process-status"]);
+    o(this, v, (t) => {
+      [...this.querySelectorAll("ea-step")].forEach((a) => {
+        a.index < t ? a.setAttribute("status", this["finish-status"]) : a.index > t ? a.setAttribute("status", "wait") : a.setAttribute("status", this["process-status"]);
+      });
+    });
+    /**
+     * 更新简单步骤状态
+     * @param {boolean} isSimple
+     */
+    o(this, w, (t = this.simple) => {
+      const r = [...this.querySelectorAll("ea-step")];
+      t ? r.forEach((a) => {
+        var d;
+        try {
+          (d = a.querySelector('[slot="simple-arrow"]')) == null || d.remove();
+        } catch {
+        }
+        try {
+          const g = document.createElement("ea-icon");
+          g.setAttribute("slot", "simple-arrow"), g.setAttribute("name", "angle-right"), g.part = "simple-arrow", a.appendChild(g);
+        } catch {
+        }
+      }) : r.forEach((a) => {
+        var d;
+        try {
+          (d = a.querySelector('[slot="simple-arrow"]')) == null || d.remove();
+        } catch {
+        }
       });
     });
-    this.stylesheet = R, this.$render();
+    /**
+     * 处理 slot 变化
+     * 更新所有子 ea-step 组件的 index、first、last 状态和 status
+     */
+    o(this, _, () => {
+      const t = [...this.querySelectorAll("ea-step")];
+      t.forEach((r, a) => {
+        r.index = a, r.toggleAttribute("first", a === 0), r.toggleAttribute("last", a === t.length - 1);
+      }), e(this, v).call(this, this.active), e(this, w).call(this);
+    });
+    this.stylesheet = k, this.$render();
   }
   static get observedAttributes() {
     return [
@@ -288,25 +314,33 @@ class B extends _ {
         "align-center": this["align-center"]
       }
     );
-    return i(this, b).className = t, t;
+    return e(this, f).className = t, t;
   }
   $render() {
     this.shadowRoot.innerHTML = `
       <div class='ea-steps' part='container'>
         <slot></slot>
       </div>
-    `, c(this, b, this.shadowRoot.querySelector(".ea-steps"));
+    `, n(this, f, this.shadowRoot.querySelector(".ea-steps")), n(this, y, this.shadowRoot.querySelector("slot"));
   }
   connectedCallback() {
-    super.connectedCallback();
+    var t;
+    super.connectedCallback(), (t = e(this, h)) == null || t.abort(), n(this, h, new AbortController()), e(this, y).addEventListener(
+      "slotchange",
+      () => {
+        e(this, _).call(this);
+      },
+      { signal: e(this, h).signal }
+    );
   }
   $beforeUnmounted() {
-    i(this, w).abort();
+    var t;
+    (t = e(this, h)) == null || t.abort();
   }
 }
-b = new WeakMap(), w = new WeakMap(), C = new WeakMap();
-window.customElements.get("ea-steps") || window.customElements.define("ea-steps", B);
+f = new WeakMap(), y = new WeakMap(), h = new WeakMap(), v = new WeakMap(), w = new WeakMap(), _ = new WeakMap();
+window.customElements.get("ea-steps") || window.customElements.define("ea-steps", L);
 export {
-  $ as EaStep,
-  B as EaSteps
+  I as EaStep,
+  L as EaSteps
 };