easy-component-ui 3.0.15 → 4.0.2

package/dist/components/ea-steps.js

@@ -1,346 +1,310 @@
-var $ = Object.defineProperty;
-var q = (s) => {
-  throw TypeError(s);
+import { E as y } from "../core/EaBase.ts.js";
+import { q as d, a as o, C as g, l as v } from "../core/decorator.js";
+import { E as f } from "../utils/Enum.ts.js";
+import { s as b } from "../css/ea-step.style.js";
+import "./ea-icon.js";
+import { c as _ } from "../utils/bem.ts.js";
+import { s as A } from "../css/ea-steps.style.js";
+var E = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, n = (t, s, e, r) => {
+  for (var i = r > 1 ? void 0 : r ? $(s, e) : s, h = t.length - 1, u; h >= 0; h--)
+    (u = t[h]) && (i = (r ? u(s, e, i) : u(i)) || i);
+  return r && i && E(s, e, i), i;
 };
-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 {
+const S = "ea-step", l = _(S);
+let a = class extends y {
   constructor() {
-    super();
-    o(this, l);
-    /** @type {HTMLElement} */
-    o(this, u);
-    /** @type {HTMLElement} */
-    o(this, C);
-    /** @type {HTMLElement} */
-    o(this, c);
-    /** @type {HTMLElement} */
-    o(this, m);
-    /** @type {HTMLElement} */
-    o(this, b);
-    /** @type {AbortController} */
-    o(this, S, new AbortController());
-    x(this, "state", this.properties({
-      title: {
-        type: String,
-        default: "",
-        observer: (t) => {
-          e(this, m).textContent = t;
-        }
-      },
-      description: {
-        type: String,
-        default: "",
-        observer: (t) => {
-          e(this, b).textContent = t;
-        }
-      },
-      icon: {
-        type: String,
-        default: "",
-        observer: (t) => {
-          e(this, c).setAttribute("name", t);
-        }
-      },
-      status: {
-        type: ["", "wait", "process", "finish", "error", "success"],
-        default: "",
-        observer: (t) => {
-          this.updateContainerClasslist(), !this.icon && e(this, A).call(this, t);
-        }
-      },
-      index: {
-        type: Number,
-        default: () => {
-          var r;
-          const t = (r = e(this, l, p)) == null ? void 0 : r.querySelectorAll("ea-step");
-          return t ? Array.from(t).indexOf(this) : 0;
-        },
-        observer: () => {
-        }
-      },
-      simple: {
-        type: Boolean,
-        default: () => {
-          var t;
-          return !!((t = e(this, l, p)) != null && t.hasAttribute("simple"));
-        },
-        observer: () => {
-        }
-      },
-      "align-center": {
-        type: Boolean,
-        default: () => {
-          var t;
-          return !!((t = e(this, l, p)) != null && t.hasAttribute("align-center"));
-        },
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      direction: {
-        type: ["vertical", "horizontal"],
-        default: () => {
-          var t;
-          return ((t = e(this, l, p)) == null ? void 0 : t.getAttribute("direction")) || "horizontal";
-        },
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      }
-    }));
-    /**
-     * 更新步骤状态
-     * @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();
+    super(...arguments), this.heading = "", this.description = "", this.icon = "", this.status = "", this.index = 0, this.simple = !1, this.alignCenter = !1, this.direction = "horizontal";
   }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "title",
-      "description",
-      "icon",
-      "status",
-      "index",
-      "active"
-    ];
+  get _hostContextSteps() {
+    try {
+      return this.closest("ea-steps");
+    } catch {
+      return null;
+    }
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
+  /** 更新容器类名 */
   updateContainerClasslist() {
-    const t = this.computedClasslist(
-      "ea-step",
+    var r;
+    const t = (r = this._hostContextSteps) == null ? void 0 : r.querySelectorAll("ea-step"), s = t ? t.length - 1 === this.index : !1, e = l(
       {
-        ["--" + this.direction]: this.direction
+        [this.direction]: !!this.direction
       },
       {
-        [this.status]: this.status,
-        "align-center": this["align-center"],
-        icon: this.icon,
+        [this.status]: !!this.status,
+        "align-center": this.alignCenter,
+        icon: !!this.icon,
         simple: this.simple,
-        last: (() => {
-          var a;
-          const r = (a = e(this, l, p)) == null ? void 0 : a.querySelectorAll("ea-step");
-          return r ? r.length - 1 === this.index : !1;
-        })(),
+        last: s,
         first: this.index === 0
       }
     );
-    return e(this, u) && (e(this, u).className = t), t;
+    return this._container && (this._container.className = e), e;
+  }
+  /** 根据 status 更新图标显示 */
+  _updateStatus(t = this.status) {
+    var s;
+    t === ((s = this._hostContextSteps) == null ? void 0 : s.getAttribute("finish-status")) ? (this._stepIcon.setAttribute("name", "check"), this._stepIcon.textContent = "") : (this._stepIcon.setAttribute("name", ""), this._stepIcon.textContent = String(this.index + 1));
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-step' part='container'>
-        <section class="ea-step__head" part="head">
-          <div class="ea-step__icon-wrapper" part="icon-wrapper">
+  /** 根据 status 更新 aria-current 属性 */
+  _updateAriaCurrent(t = this.status) {
+    this._container && (t === "process" ? this._container.setAttribute("aria-current", "step") : this._container.removeAttribute("aria-current"));
+  }
+  html() {
+    return `
+      <div class='${l()}' part='container' role='listitem'>
+        <section class="${l.e("head")}" part="head">
+          <div class="${l.e("icon-wrapper")}" part="icon-wrapper">
             <slot name="icon">
-              <ea-icon class="ea-step__icon" part="icon"></ea-icon>
+              <ea-icon class="${l.e("icon")}" part="icon"></ea-icon>
             </slot>
           </div>
-          <div class="ea-step__tail" part="tail"></div>
+          <div class="${l.e("tail")}" part="tail"></div>
         </section>
-        <section class="ea-step__main" part="main">
-          <div class="ea-step__title" part="title">
-            <slot name="title"></slot>
+        <section class="${l.e("main")}" part="main">
+          <div class="${l.e("heading")}" part="heading">
+            <slot name="heading"></slot>
           </div>
-          <div class="ea-step__description" part="description">
+          <div class="${l.e("description")}" part="description">
             <slot name="description"></slot>
           </div>
         </section>
-        <span class="ea-step__simple-arrow" part="simple-arrow">
+        <span class="${l.e("simple-arrow")}" part="simple-arrow">
           <slot name="simple-arrow"></slot>
         </span>
       </div>
-    `, 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();
-  }
-  connectedCallback() {
-    super.connectedCallback();
-  }
-  $beforeUnmounted() {
-    e(this, S).abort();
+    `;
   }
-}
-l = new WeakSet(), p = function() {
-  try {
-    return this.closest("ea-steps");
-  } catch {
-    return null;
+  $mount() {
+    this.updateContainerClasslist(), this._updateAriaCurrent();
   }
-}, 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 {
+};
+n([
+  d(l.cb())
+], a.prototype, "_container", 2);
+n([
+  d(l.ce("icon"))
+], a.prototype, "_stepIcon", 2);
+n([
+  d('slot[name="heading"]')
+], a.prototype, "_headingSlot", 2);
+n([
+  d('slot[name="description"]')
+], a.prototype, "_descriptionSlot", 2);
+n([
+  o({
+    type: String,
+    default: "",
+    observer(t) {
+      this._headingSlot.textContent = t;
+    }
+  })
+], a.prototype, "heading", 2);
+n([
+  o({
+    type: String,
+    default: "",
+    observer(t) {
+      this._descriptionSlot.textContent = t;
+    }
+  })
+], a.prototype, "description", 2);
+n([
+  o({
+    type: String,
+    default: "",
+    observer(t) {
+      this._stepIcon.setAttribute("name", t);
+    }
+  })
+], a.prototype, "icon", 2);
+n([
+  o({
+    type: f(["", "wait", "process", "finish", "error", "success"]),
+    default: "",
+    observer(t) {
+      this.updateContainerClasslist(), this._updateAriaCurrent(t), !this.icon && this._updateStatus(t);
+    }
+  })
+], a.prototype, "status", 2);
+n([
+  o({
+    type: Number,
+    default: 0
+  })
+], a.prototype, "index", 2);
+n([
+  o({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], a.prototype, "simple", 2);
+n([
+  o({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], a.prototype, "alignCenter", 2);
+n([
+  o({
+    type: String,
+    default: "horizontal",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], a.prototype, "direction", 2);
+a = n([
+  g(S, { styles: [b] })
+], a);
+var x = Object.defineProperty, w = Object.getOwnPropertyDescriptor, c = (t, s, e, r) => {
+  for (var i = r > 1 ? void 0 : r ? w(s, e) : s, h = t.length - 1, u; h >= 0; h--)
+    (u = t[h]) && (i = (r ? u(s, e, i) : u(i)) || i);
+  return r && i && x(s, e, i), i;
+};
+const C = "ea-steps", m = _(C);
+let p = class extends y {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    o(this, f);
-    /** @type {HTMLSlotElement} */
-    o(this, y);
-    /** @type {AbortController} */
-    o(this, h, new AbortController());
-    x(this, "state", this.properties({
-      space: {
-        type: String,
-        default: "50%",
-        observer: (t) => {
-          this.style.setProperty("--ea-step-tail-spacing", t);
-        }
-      },
-      //   TODO: 没写😋
-      // direction: {
-      //   type: ["vertical", "horizontal"],
-      //   default: "horizontal",
-      //   observer: (newVal) => {
-      //     this.updateContainerClasslist();
-      //   },
-      // },
-      active: {
-        type: Number,
-        default: 0,
-        observer: (t) => {
-          e(this, v).call(this, t);
-        }
-      },
-      "process-status": {
-        type: ["wait", "process", "finish", "error", "success"],
-        default: "process",
-        observer: () => {
-        }
-      },
-      "finish-status": {
-        type: ["wait", "process", "finish", "error", "success"],
-        default: "finish",
-        observer: () => {
-        }
-      },
-      "align-center": {
-        type: Boolean,
-        default: !1,
-        observer: () => {
-        }
-      },
-      simple: {
-        type: Boolean,
-        default: !1,
-        observer: (t) => {
-          e(this, w).call(this, t), this.updateContainerClasslist();
-        }
-      }
-    }));
-    /**
-     * 更新步骤状态
-     * @param {number} active
-     */
-    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 {
-        }
-      });
-    });
-    /**
-     * 处理 slot 变化
-     * 更新所有子 ea-step 组件的 index、first、last 状态和 status
-     */
-    o(this, _, () => {
+    super(...arguments), this.space = "50%", this.active = 0, this.processStatus = "process", this.finishStatus = "finish", this.alignCenter = !1, this.simple = !1, this.direction = "horizontal", this._handleSlotChange = () => {
       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 [
-      ...super.observedAttributes,
-      "space",
-      "direction",
-      "active",
-      "process-status",
-      "finish-status",
-      "align-center",
-      "simple"
-    ];
+      t.forEach((s, e) => {
+        s.index = e, s.toggleAttribute("first", e === 0), s.toggleAttribute("last", e === t.length - 1), s.toggleAttribute("simple", this.simple), s.toggleAttribute("align-center", this.alignCenter), s.setAttribute("direction", this.direction);
+      }), this._updateStepStatus(this.active), this._updateSimpleStatus();
+    };
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
+  /** 更新容器类名 */
   updateContainerClasslist() {
-    const t = this.computedClasslist(
-      "ea-steps",
-      {
-        // ["--" + this.direction]: this.direction,
-      },
+    const t = m(
+      {},
       {
         simple: this.simple,
-        "align-center": this["align-center"]
+        "align-center": this.alignCenter
       }
     );
-    return e(this, f).className = t, t;
+    return this._container && (this._container.className = t), t;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-steps' part='container'>
+  /** 根据 active 更新子 step 的 status */
+  _updateStepStatus(t = this.active) {
+    [...this.querySelectorAll("ea-step")].forEach((e) => {
+      e.index < t ? e.setAttribute("status", this.finishStatus) : e.index > t ? e.setAttribute("status", "wait") : e.setAttribute("status", this.processStatus);
+    });
+  }
+  /** 更新简洁模式下的箭头图标 */
+  _updateSimpleStatus(t = this.simple) {
+    const s = [...this.querySelectorAll("ea-step")];
+    t ? s.forEach((e) => {
+      var r;
+      try {
+        (r = e.querySelector('[slot="simple-arrow"]')) == null || r.remove();
+      } catch {
+      }
+      try {
+        const i = document.createElement("ea-icon");
+        i.setAttribute("slot", "simple-arrow"), i.setAttribute("name", "angle-right"), i.part = "simple-arrow", e.appendChild(i);
+      } catch {
+      }
+    }) : s.forEach((e) => {
+      var r;
+      try {
+        (r = e.querySelector('[slot="simple-arrow"]')) == null || r.remove();
+      } catch {
+      }
+    });
+  }
+  html() {
+    return `
+      <div class='${m()}' part='container' role='list'>
         <slot></slot>
       </div>
-    `, n(this, f, this.shadowRoot.querySelector(".ea-steps")), n(this, y, this.shadowRoot.querySelector("slot"));
+    `;
   }
-  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 }
-    );
+  _onSlotChange() {
+    this._handleSlotChange();
   }
-  $beforeUnmounted() {
-    var t;
-    (t = e(this, h)) == null || t.abort();
+  $mount() {
+    this.updateContainerClasslist();
   }
-}
-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);
+};
+c([
+  d(m.cb())
+], p.prototype, "_container", 2);
+c([
+  o({
+    type: String,
+    default: "50%",
+    observer(t) {
+      this.style.setProperty("--ea-step-tail-spacing", t);
+    }
+  })
+], p.prototype, "space", 2);
+c([
+  o({
+    type: Number,
+    default: 0,
+    observer(t) {
+      this._updateStepStatus(t);
+    }
+  })
+], p.prototype, "active", 2);
+c([
+  o({
+    type: f(["wait", "process", "finish", "error", "success"]),
+    default: "process"
+  })
+], p.prototype, "processStatus", 2);
+c([
+  o({
+    type: f(["wait", "process", "finish", "error", "success"]),
+    default: "finish"
+  })
+], p.prototype, "finishStatus", 2);
+c([
+  o({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      [...this.querySelectorAll("ea-step")].forEach((e) => {
+        e.toggleAttribute("align-center", t);
+      }), this.updateContainerClasslist();
+    }
+  })
+], p.prototype, "alignCenter", 2);
+c([
+  o({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      [...this.querySelectorAll("ea-step")].forEach((e) => {
+        e.toggleAttribute("simple", t);
+      }), this._updateSimpleStatus(t), this.updateContainerClasslist();
+    }
+  })
+], p.prototype, "simple", 2);
+c([
+  o({
+    type: f(["vertical", "horizontal"]),
+    default: "horizontal",
+    observer(t) {
+      [...this.querySelectorAll("ea-step")].forEach((e) => {
+        e.setAttribute("direction", t);
+      });
+    }
+  })
+], p.prototype, "direction", 2);
+c([
+  v("slotchange", "slot")
+], p.prototype, "_onSlotChange", 1);
+p = c([
+  g(C, { styles: [A] })
+], p);
+const j = { EaStep: a, EaSteps: p };
 export {
-  I as EaStep,
-  L as EaSteps
+  a as EaStep,
+  p as EaSteps,
+  j as default
 };