easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-tour.js

@@ -1,277 +1,58 @@
-var et = Object.defineProperty;
-var O = (a) => {
-  throw TypeError(a);
-};
-var st = (a, r, t) => r in a ? et(a, r, { enumerable: !0, configurable: !0, writable: !0, value: t }) : a[r] = t;
-var z = (a, r, t) => st(a, typeof r != "symbol" ? r + "" : r, t), F = (a, r, t) => r.has(a) || O("Cannot " + t);
-var e = (a, r, t) => (F(a, r, "read from private field"), t ? t.call(a) : r.get(a)), n = (a, r, t) => r.has(a) ? O("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(a) : r.set(a, t), l = (a, r, t, s) => (F(a, r, "write to private field"), s ? s.call(a, t) : r.set(a, t), t), Q = (a, r, t) => (F(a, r, "access private method"), t);
-import { B as X } from "./Base.js";
-import { s as ot } from "../css/ea-tour.style.js";
+import { E as S } from "../core/EaBase.ts.js";
+import { q as c, a as f, C as P, l as v } from "../core/decorator.js";
+import { E as C } from "../utils/Enum.ts.js";
+import { s as N } from "../css/ea-tour.style.js";
+import { c as $ } from "../utils/bem.ts.js";
+import { h as I } from "../utils/html.ts.js";
+import "./ea-icon.js";
 import "./ea-button.js";
-import { s as it } from "../css/ea-tour-step.style.js";
-import { E as rt } from "../utils/Utils.js";
-const at = (a, r = 0) => {
-  const t = a.getBoundingClientRect();
-  return t.top > 0 && t.left > 0 && t.bottom <= window.innerHeight - r && t.right <= window.innerWidth - r;
+import { s as q } from "../css/ea-tour-step.style.js";
+var D = Object.defineProperty, O = Object.getOwnPropertyDescriptor, u = (t, e, o, i) => {
+  for (var s = i > 1 ? void 0 : i ? O(e, o) : e, d = t.length - 1, a; d >= 0; d--)
+    (a = t[d]) && (s = (i ? a(e, o, s) : a(s)) || s);
+  return i && s && D(e, o, s), s;
+};
+const T = "ea-tour", x = $(T), W = [
+  "top",
+  "top-start",
+  "top-end",
+  "bottom",
+  "bottom-start",
+  "bottom-end",
+  "left",
+  "left-start",
+  "left-end",
+  "right",
+  "right-start",
+  "right-end"
+], j = (t, e = 0) => {
+  const o = t.getBoundingClientRect();
+  return o.top > 0 && o.left > 0 && o.bottom <= window.innerHeight - e && o.right <= window.innerWidth - e;
 };
-var T, u, E, k, S, A, p, y, m, D, I, W, q;
-class nt extends X {
+let l = class extends S {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    n(this, T);
-    /** @type {HTMLElement} */
-    n(this, u);
-    /** @type {HTMLElement} */
-    n(this, E);
-    /** @type {HTMLElement} */
-    n(this, k);
-    /** @type {HTMLElement} */
-    n(this, S);
-    /** @type {HTMLElement} */
-    n(this, A);
-    /** @type {AbortController} */
-    n(this, p);
-    n(this, y, {
-      /** @type {AbortController} */
-      currentChangeAbortController: null
-    });
-    n(this, m, {
+    super(...arguments), this._currentChangeAbortController = null, this._appendHandled = !1, this._states = {
       isChildrenLoaded: !1,
-      isCenter: !1,
-      queueTask: [],
-      originalPlacement: []
-    });
-    z(this, "state", this.properties({
-      "append-to": {
-        type: String,
-        default: "body",
-        observer: () => {
-        }
-      },
-      visible: {
-        type: Boolean,
-        default: "",
-        observer: async (t) => {
-          var s;
-          if (e(this, m).isChildrenLoaded || (await customElements.whenDefined("ea-tour-step"), e(this, m).isChildrenLoaded = !0), (s = e(this, y).currentChangeAbortController) == null || s.abort(), this.current = 0, t) {
-            e(this, y).currentChangeAbortController = new AbortController();
-            const o = () => {
-              e(this, q).call(this, this.current);
-            };
-            this.mask && (document.body.style.overflow = "hidden"), e(this, q).call(this, this.current), window.addEventListener("resize", o, {
-              signal: e(this, y).currentChangeAbortController.signal
-            }), window.addEventListener("scroll", o, {
-              signal: e(this, y).currentChangeAbortController.signal
-            });
-          } else
-            this.mask && (document.body.style.overflow = "auto");
-          this.updateContainerClasslist();
-        }
-      },
-      gap: {
-        type: Number,
-        default: 6,
-        observer: () => {
-        }
-      },
-      current: {
-        type: Number,
-        default: 0,
-        observer: async (t) => {
-          e(this, m).isChildrenLoaded || (await customElements.whenDefined("ea-tour-step"), e(this, m).isChildrenLoaded = !0);
-          const s = [...this.querySelectorAll("ea-tour-step")];
-          if (s.length !== 0) {
-            if (t < 0) {
-              this.current = 0;
-              return;
-            } else if (t >= s.length) {
-              this.visible = !1;
-              return;
-            }
-            s.forEach((o, g) => {
-              o.style.setProperty(
-                "--ea-tour-step-visible",
-                g === t ? "block" : "none"
-              );
-            }), e(this, q).call(this, t);
-          }
-        }
-      },
-      mask: {
-        type: Boolean,
-        default: !0,
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      type: {
-        type: ["default", "primary"],
-        default: "default",
-        /** @param {"default" | "primary"} newVal */
-        observer: (t) => {
-          this.querySelectorAll("ea-tour-step").forEach((s) => {
-            t === "primary" ? s.setAttribute("type", t) : s.removeAttribute("type");
-          });
-        }
-      },
-      placement: {
-        type: [
-          "top",
-          "top-start",
-          "top-end",
-          "bottom",
-          "bottom-start",
-          "bottom-end",
-          "left",
-          "left-start",
-          "left-end",
-          "right",
-          "right-start",
-          "right-end"
-        ],
-        default: "bottom",
-        observer: (t) => {
-          this.querySelectorAll("ea-tour-step").forEach((s) => {
-            s.getAttribute("placement") || s.setAttribute("placement", t);
-          });
-        }
-      }
-    }));
-    /**
-     * 处理 append-to 属性
-     * @param {string} selector
-     */
-    n(this, D, async (t) => {
-      await customElements.whenDefined("ea-tour");
-      const s = document.querySelector(t);
-      s || console.warn(`[EaTour] append-to ${t} not found.`, this), s ? s.appendChild(this) : document.body.appendChild(this);
-    });
-    /**
-     * 当未传入目标元素时，居中处理
-     */
-    n(this, I, () => {
-      const t = [...this.querySelectorAll("ea-tour-step")];
-      e(this, m).isCenter = !0, t[this.current].setAttribute("center", !0), e(this, u).style.width = "0px", e(this, u).style.height = "0px", e(this, u).style.x = "0px", e(this, u).style.y = "0px", e(this, E).style.height = "100%", e(this, k).style.x = "0", e(this, S).style.y = "0", e(this, A).style.width = "100%", this.updateContainerClasslist();
-    });
-    /**
-     * 更新 提示元素 的位置
-     * @param {HTMLElement} target 目标元素，即被聚焦的元素
-     * @param {import("../ea-tour-step").EaTourStep} step 提示元素，即 step 元素
-     * @returns {void}
-     */
-    n(this, W, (t, s) => {
-      var K;
-      const { width: o, height: g, x: v, y: N, top: d, bottom: x, left: h } = t.getBoundingClientRect(), i = this.gap * 2, c = s.clientWidth || s.offsetWidth || 520, b = s.clientHeight || s.offsetHeight || 0, Z = window.innerWidth, V = window.innerHeight, tt = {
-        top: {
-          top: d - b - i,
-          left: h - c / 2 + i
-        },
-        "top-start": {
-          top: d - b - i,
-          left: h - i
-        },
-        "top-end": {
-          top: d - b - i,
-          left: h - c + o + i
-        },
-        right: {
-          top: d - i - b / 2 + g / 2,
-          left: h + o + i
-        },
-        "right-start": {
-          top: d - i,
-          left: h + o + i
-        },
-        "right-end": {
-          top: d - b / 2 - i,
-          left: h + o + i
-        },
-        bottom: {
-          top: x + i,
-          left: h - c / 2 + i
-        },
-        "bottom-start": {
-          top: x + i,
-          left: h - i
-        },
-        "bottom-end": {
-          top: x + i,
-          left: h - c + o + i
-        },
-        left: {
-          top: d - i - b / 2 + g / 2,
-          left: h - c - i * 2
-        },
-        "left-start": {
-          top: d - i,
-          left: h - c - i * 2
-        },
-        "left-end": {
-          top: d - b / 2 - i,
-          left: h - c - i * 2
-        }
-      }, J = s.placement || ((K = s.getAttribute) == null ? void 0 : K.call(s, "placement")) || this.placement, j = tt[J];
-      if (!j) {
-        console.warn(`[EaTourStep] placement ${J} is not supported.`);
-        return;
-      }
-      let w = Number(j.top), _ = Number(j.left);
-      w < 0 ? w = Math.max(w, N + i + g) : w + b > V && (w = Math.min(w, N - b - i)), _ < 0 ? _ = Math.max(_, v + o + i) : _ + c > Z && (_ = Math.min(_, v - c - i)), s.style.left = `${_}px`, s.style.top = `${w}px`;
-    });
-    /**
-     * 更新 提示容器 的位置
-     * @param {number} [current] 当前步骤
-     */
-    n(this, q, (t = this.current) => {
-      const s = [...this.querySelectorAll("ea-tour-step")], o = this.gap / 2, g = s[t].getAttribute("target"), v = document.querySelector(g);
-      if (s[t].removeAttribute("center"), e(this, m).isCenter = !1, g) {
-        if (!v)
-          return console.warn(
-            `[EaTour] target ${g} not found`,
-            s[t]
-          );
-      } else return e(this, I).call(this);
-      at(v) || window.scrollTo({
-        top: v.getBoundingClientRect().top
-      });
-      const { width: N, height: d, x, y: h, right: i, bottom: c } = v.getBoundingClientRect();
-      e(this, u).style.width = `${N + this.gap}px`, e(this, u).style.height = `${d + this.gap}px`, e(this, u).style.x = `${x - o}px`, e(this, u).style.y = `${h - o}px`, e(this, E).style.height = `${h - o}px`, e(this, k).style.x = `${i + o}px`, e(this, S).style.y = `${c + o}px`, e(this, A).style.width = `${x - o}px`, e(this, W).call(this, v, s[t]);
-    });
-    this.stylesheet = ot, this.$render(), e(this, D).call(this, this["append-to"]);
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "append-to",
-      "visible",
-      "current",
-      "gap",
-      "mask",
-      "type",
-      "placement"
-    ];
+      isCenter: !1
+    }, this.appendTo = "body", this.visible = !1, this.gap = 6, this.current = 0, this.mask = !0, this.variant = "default", this.placement = "bottom";
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
+  /** 更新容器类名 */
   updateContainerClasslist() {
-    const t = this.computedClasslist(
-      "ea-tour",
+    const t = x(
       {},
       {
         visible: this.visible,
         mask: this.mask,
-        center: e(this, m).isCenter
+        center: this._states.isCenter
       }
     );
-    return e(this, T).className = t, t;
+    return this._container.className = t, t;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class="ea-tour">
-        <svg class="ea-tour__svg">
+  /** 渲染模板 */
+  html() {
+    return `
+      <div class='${x()}'>
+        <svg class='ea-tour__svg'>
           <defs>
             <mask id="reverseMask">
               <rect x="0" y="0" width="100%" height="100%" fill="white" />
@@ -288,170 +69,359 @@ class nt extends X {
       <div class="ea-tour__content">
         <slot></slot>
       </div>
-    `, l(this, T, this.shadowRoot.querySelector(".ea-tour")), l(this, u, this.shadowRoot.querySelector(".ea-tour__hollow")), l(this, E, this.shadowRoot.querySelector(".ea-tour__divider.top-mask")), l(this, k, this.shadowRoot.querySelector(
-      ".ea-tour__divider.right-mask"
-    )), l(this, S, this.shadowRoot.querySelector(
-      ".ea-tour__divider.bottom-mask"
-    )), l(this, A, this.shadowRoot.querySelector(
-      ".ea-tour__divider.left-mask"
-    ));
+    `;
+  }
+  /** 将组件挂载到指定容器 */
+  _handleAppendTo(t) {
+    if (this._appendHandled) return;
+    const e = document.querySelector(t);
+    e || console.warn(`[EaTour] append-to ${t} not found.`, this), e && e !== this.parentElement ? (this._appendHandled = !0, e.appendChild(this)) : e || (this._appendHandled = !0, document.body.appendChild(this));
+  }
+  /** 处理居中显示模式 */
+  _handleCenterPosition() {
+    const t = [
+      ...this.querySelectorAll("ea-tour-step")
+    ];
+    this._states.isCenter = !0, t[this.current].setAttribute("center", "true"), this._hollow.style.width = "0px", this._hollow.style.height = "0px", this._hollow.setAttribute("x", "0px"), this._hollow.setAttribute("y", "0px"), this._topMask.setAttribute("height", "100%"), this._rightMask.setAttribute("x", "0"), this._bottomMask.setAttribute("y", "0"), this._leftMask.setAttribute("width", "100%"), this.updateContainerClasslist();
+  }
+  /**
+   * 更新步骤弹出位置
+   * @param target - 目标元素
+   * @param step - 步骤元素
+   */
+  _updateStepPosition(t, e) {
+    var k;
+    const { width: o, height: i, x: s, y: d, top: a, bottom: y, left: p } = t.getBoundingClientRect(), r = this.gap * 2, _ = e.clientWidth || e.offsetWidth || 520, m = e.clientHeight || e.offsetHeight || 0, B = window.innerWidth, H = window.innerHeight, L = {
+      top: {
+        top: a - m - r,
+        left: p - _ / 2 + r
+      },
+      "top-start": {
+        top: a - m - r,
+        left: p - r
+      },
+      "top-end": {
+        top: a - m - r,
+        left: p - _ + o + r
+      },
+      right: {
+        top: a - r - m / 2 + i / 2,
+        left: p + o + r
+      },
+      "right-start": {
+        top: a - r,
+        left: p + o + r
+      },
+      "right-end": {
+        top: a - m / 2 - r,
+        left: p + o + r
+      },
+      bottom: {
+        top: y + r,
+        left: p - _ / 2 + r
+      },
+      "bottom-start": {
+        top: y + r,
+        left: p - r
+      },
+      "bottom-end": {
+        top: y + r,
+        left: p - _ + o + r
+      },
+      left: {
+        top: a - r - m / 2 + i / 2,
+        left: p - _ - r * 2
+      },
+      "left-start": {
+        top: a - r,
+        left: p - _ - r * 2
+      },
+      "left-end": {
+        top: a - m / 2 - r,
+        left: p - _ - r * 2
+      }
+    }, E = e.placement || ((k = e.getAttribute) == null ? void 0 : k.call(e, "placement")) || this.placement, w = L[E];
+    if (!w) {
+      console.warn(`[EaTourStep] placement ${E} is not supported.`);
+      return;
+    }
+    let b = Number(w.top), g = Number(w.left);
+    b < 0 ? b = Math.max(b, d + r + i) : b + m > H && (b = Math.min(b, d - m - r)), g < 0 ? g = Math.max(g, s + o + r) : g + _ > B && (g = Math.min(g, s - _ - r)), e.style.left = `${g}px`, e.style.top = `${b}px`;
+  }
+  /**
+   * 更新镂空区域位置
+   * @param current - 当前步骤索引
+   */
+  _updateHollowPosition(t = this.current) {
+    const e = [
+      ...this.querySelectorAll("ea-tour-step")
+    ], o = this.gap / 2, i = e[t].getAttribute("target"), s = document.querySelector(
+      i
+    );
+    if (e[t].removeAttribute("center"), this._states.isCenter = !1, i) {
+      if (!s)
+        return console.warn(
+          `[EaTour] target ${i} not found`,
+          e[t]
+        );
+    } else return this._handleCenterPosition();
+    j(s) || window.scrollTo({
+      top: s.getBoundingClientRect().top
+    });
+    const { width: d, height: a, x: y, y: p, right: r, bottom: _ } = s.getBoundingClientRect();
+    this._hollow.style.width = `${d + this.gap}px`, this._hollow.style.height = `${a + this.gap}px`, this._hollow.setAttribute("x", `${y - o}px`), this._hollow.setAttribute("y", `${p - o}px`), this._topMask.setAttribute("height", `${p - o}px`), this._rightMask.setAttribute("x", `${r + o}px`), this._bottomMask.setAttribute("y", `${_ + o}px`), this._leftMask.setAttribute("width", `${y - o}px`), this._updateStepPosition(s, e[t]);
+  }
+  /** 更新所有步骤的指示器 */
+  _updateStepIndicators() {
+    const t = [...this.querySelectorAll("ea-tour-step")];
+    t.forEach((e) => {
+      typeof e.updateIndicators == "function" && e.updateIndicators(t);
+    });
   }
-  connectedCallback() {
-    var s;
-    super.connectedCallback();
+  async _handleSlotChange() {
+    await customElements.whenDefined("ea-tour-step"), this._updateStepIndicators();
+  }
+  $mount() {
+    var e;
+    this._handleAppendTo(this.appendTo), this.updateContainerClasslist();
     const t = () => {
-      this.emit("change", {
-        detail: { current: this.current },
-        bubbles: !0,
-        composed: !0
+      this.emit("ea-tour-change", {
+        detail: { current: this.current }
       });
     };
-    (s = e(this, p)) == null || s.abort(), l(this, p, new AbortController()), this.addEventListener(
+    (e = this._abortController) == null || e.abort(), this._abortController = new AbortController(), this.addEventListener(
       "ea-close",
       () => {
         this.visible = !1;
       },
-      { signal: e(this, p).signal }
+      { signal: this._abortController.signal }
     ), this.addEventListener(
-      "next",
+      "ea-tour-step-next",
       (o) => {
         o.preventDefault(), o.stopImmediatePropagation(), o.stopPropagation(), this.current++, t();
       },
-      { signal: e(this, p).signal }
+      { signal: this._abortController.signal }
     ), this.addEventListener(
-      "previous",
+      "ea-tour-step-previous",
       (o) => {
         o.preventDefault(), o.stopImmediatePropagation(), o.stopPropagation(), this.current--, t();
       },
-      { signal: e(this, p).signal }
+      { signal: this._abortController.signal }
     ), this.addEventListener(
-      "finish",
+      "ea-show",
       () => {
-        this.visible = !1;
+        var i;
+        const o = [...this.querySelectorAll("ea-tour-step")];
+        if (o[this.current]) {
+          const s = (i = o[this.current].shadowRoot) == null ? void 0 : i.querySelector(".ea-tour-step");
+          s && s.focus();
+        }
+      },
+      { signal: this._abortController.signal }
+    ), this.addEventListener(
+      "ea-tour-step-finish",
+      () => {
+        this.visible = !1, this.emit("ea-tour-finish");
       },
-      { signal: e(this, p).signal }
+      { signal: this._abortController.signal }
     );
   }
-  $beforeUnmounted() {
-    var t;
-    (t = e(this, p)) == null || t.abort();
-    for (const s in e(this, y))
-      e(this, y)[s] = null;
+  $beforeUnmount() {
+    var t, e;
+    (t = this._abortController) == null || t.abort(), (e = this._currentChangeAbortController) == null || e.abort(), this._currentChangeAbortController = null;
   }
-}
-T = new WeakMap(), u = new WeakMap(), E = new WeakMap(), k = new WeakMap(), S = new WeakMap(), A = new WeakMap(), p = new WeakMap(), y = new WeakMap(), m = new WeakMap(), D = new WeakMap(), I = new WeakMap(), W = new WeakMap(), q = new WeakMap();
-window.customElements.get("ea-tour") || window.customElements.define("ea-tour", nt);
-class lt extends Event {
-  constructor(r) {
-    super("ea-close", {
-      bubbles: !0,
-      composed: !0
-    }), this.detail = r;
-  }
-}
-var M, B, H, $, L, R, P, f, C, G, Y, U;
-class ht extends X {
-  constructor() {
-    super();
-    n(this, C);
-    /** @type {HTMLElement} */
-    n(this, M);
-    /** @type {HTMLElement} */
-    n(this, B);
-    /** @type {HTMLSlotElement} */
-    n(this, H);
-    /** @type {EaButton} */
-    n(this, $);
-    /** @type {EaButton} */
-    n(this, L);
-    /** @type {EaButton} */
-    n(this, R);
-    /** @type {EaButton} */
-    n(this, P);
-    /** @type {AbortController} */
-    n(this, f);
-    z(this, "state", this.properties({
-      title: {
-        type: String,
-        default: "",
-        observer: (t) => {
-          e(this, B).textContent = t;
-        }
-      },
-      target: {
-        type: String,
-        default: "",
-        observer: async (t) => {
-          if (t !== "" && (await customElements.whenDefined("ea-tour-step"), !document.querySelector(t)))
-            return console.warn(
-              `[EaTour] target ${t} not a valid element selector.`,
-              this
-            );
-        }
-      },
-      type: {
-        type: ["default", "primary"],
-        default: "default",
-        observer: (t) => {
-          e(this, U).call(this, t), this.updateContainerClasslist();
-        }
-      },
-      placement: {
-        type: [
-          "top",
-          "top-start",
-          "top-end",
-          "bottom",
-          "bottom-start",
-          "bottom-end",
-          "left",
-          "left-start",
-          "left-end",
-          "right",
-          "right-start",
-          "right-end"
-        ],
-        default: "bottom",
-        observer: (t) => {
+};
+u([
+  c(x.cb())
+], l.prototype, "_container", 2);
+u([
+  c(".ea-tour__hollow")
+], l.prototype, "_hollow", 2);
+u([
+  c(".ea-tour__divider.top-mask")
+], l.prototype, "_topMask", 2);
+u([
+  c(".ea-tour__divider.right-mask")
+], l.prototype, "_rightMask", 2);
+u([
+  c(".ea-tour__divider.bottom-mask")
+], l.prototype, "_bottomMask", 2);
+u([
+  c(".ea-tour__divider.left-mask")
+], l.prototype, "_leftMask", 2);
+u([
+  f({
+    type: String,
+    default: "body",
+    observer(t) {
+      this._handleAppendTo(t);
+    }
+  })
+], l.prototype, "appendTo", 2);
+u([
+  f({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      var e;
+      if (this._states.isChildrenLoaded || customElements.whenDefined("ea-tour-step").then(() => {
+        this._states.isChildrenLoaded = !0;
+      }), (e = this._currentChangeAbortController) == null || e.abort(), this.current = 0, t) {
+        this._currentChangeAbortController = new AbortController();
+        const o = () => {
+          this._updateHollowPosition(this.current);
+        };
+        this.mask && (document.body.style.overflow = "hidden"), this._updateHollowPosition(this.current), window.addEventListener("resize", o, {
+          signal: this._currentChangeAbortController.signal
+        }), window.addEventListener("scroll", o, {
+          signal: this._currentChangeAbortController.signal
+        });
+      } else
+        this.mask && (document.body.style.overflow = "auto");
+      this.updateContainerClasslist();
+    }
+  })
+], l.prototype, "visible", 2);
+u([
+  f({
+    type: Number,
+    default: 6
+  })
+], l.prototype, "gap", 2);
+u([
+  f({
+    type: Number,
+    default: 0,
+    observer(t) {
+      this._states.isChildrenLoaded || customElements.whenDefined("ea-tour-step").then(() => {
+        this._states.isChildrenLoaded = !0;
+      });
+      const e = [
+        ...this.querySelectorAll("ea-tour-step")
+      ];
+      if (e.length !== 0) {
+        if (t < 0) {
+          this.current = 0;
+          return;
+        } else if (t >= e.length) {
+          this.visible = !1;
+          return;
         }
+        e.forEach((o, i) => {
+          o.style.setProperty(
+            "--ea-tour-step-visible",
+            i === t ? "block" : "none"
+          );
+        }), this._updateHollowPosition(t);
       }
-    }));
-    /**
-     * 按钮类型切换
-     * @param {'default' | 'primary'} type
-     */
-    n(this, U, (t) => {
-      [e(this, $), e(this, L), e(this, R)].forEach((o) => {
-        t === "primary" ? o.setAttribute("type", "primary") : o.removeAttribute("type");
+    }
+  })
+], l.prototype, "current", 2);
+u([
+  f({
+    type: Boolean,
+    default: !0,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], l.prototype, "mask", 2);
+u([
+  f({
+    type: C(["default", "primary"]),
+    default: "default",
+    observer(t) {
+      this.querySelectorAll("ea-tour-step").forEach((e) => {
+        t === "primary" ? e.setAttribute("variant", t) : e.removeAttribute("variant");
+      });
+    }
+  })
+], l.prototype, "variant", 2);
+u([
+  f({
+    type: C(W),
+    default: "bottom",
+    observer(t) {
+      this.querySelectorAll("ea-tour-step").forEach((e) => {
+        e.getAttribute("placement") || e.setAttribute("placement", t);
       });
+    }
+  })
+], l.prototype, "placement", 2);
+u([
+  v("slotchange", ".ea-tour__content slot")
+], l.prototype, "_handleSlotChange", 1);
+l = u([
+  P(T, { styles: [N] })
+], l);
+class R extends Event {
+  constructor(e) {
+    super("ea-close", { bubbles: !0, cancelable: !0, composed: !0 }), this.detail = e;
+  }
+}
+var F = Object.defineProperty, G = Object.getOwnPropertyDescriptor, h = (t, e, o, i) => {
+  for (var s = i > 1 ? void 0 : i ? G(e, o) : e, d = t.length - 1, a; d >= 0; d--)
+    (a = t[d]) && (s = (i ? a(e, o, s) : a(s)) || s);
+  return i && s && F(e, o, s), s;
+};
+const M = "ea-tour-step", A = $(M), U = [
+  "top",
+  "top-start",
+  "top-end",
+  "bottom",
+  "bottom-start",
+  "bottom-end",
+  "left",
+  "left-start",
+  "left-end",
+  "right",
+  "right-start",
+  "right-end"
+];
+let n = class extends S {
+  constructor() {
+    super(...arguments), this.heading = "", this.target = "", this.variant = "default", this.placement = "bottom";
+  }
+  get _hostContentTour() {
+    try {
+      return this.closest("ea-tour");
+    } catch {
+      return null;
+    }
+  }
+  /** 更新容器类名 */
+  updateContainerClasslist() {
+    const t = A({
+      primary: this.variant === "primary"
     });
-    this.stylesheet = it, this.$render();
+    return this._container.className = t, t;
   }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "title",
-      "target",
-      "type",
-      "placement"
-    ];
+  /**
+   * 渲染指示器 HTML
+   * @param tourItems - 所有步骤元素数组
+   * @returns 指示器 HTML 字符串
+   */
+  _renderIndicators(t) {
+    return I(
+      Array.from(t, (e) => `<span class="ea-tour-step__indicator ${e === this ? "is-active" : ""}" part="indicator"></span>`).join("")
+    );
   }
   /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
+   * 更新按钮类型
+   * @param type - 按钮样式类型
    */
-  updateContainerClasslist() {
-    const t = this.computedClasslist("ea-tour-step", {
-      ["--" + this.type]: this.type
+  _handleBtnTypeChange(t) {
+    [this._previousBtn, this._nextBtn, this._finishBtn].forEach((o) => {
+      t === "primary" ? o.setAttribute("variant", "primary") : o.removeAttribute("variant");
     });
-    return e(this, M).className = t, t;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class='ea-tour-step' part='container'>
+  /** 渲染模板 */
+  html() {
+    return `
+      <div class='${A()}' part='container' role='dialog' aria-modal='true' tabindex='-1'>
         <header class='ea-tour-step__header' part='header'>
           <slot name='header'></slot>
-          <ea-icon class='ea-tour-step__close-icon' part='close-icon' name="xmark"></ea-icon>
+          <ea-icon class='ea-tour-step__close-icon' part='close-icon' name="xmark" aria-label="close"></ea-icon>
         </header>
         <main class='ea-tour-step__content' part='content'>
           <slot></slot>
@@ -469,76 +439,122 @@ class ht extends X {
           </div>
         </footer>
       </div>
-    `, l(this, M, this.shadowRoot.querySelector(".ea-tour-step")), l(this, B, this.shadowRoot.querySelector(".ea-tour-step__header slot")), l(this, H, this.shadowRoot.querySelector(
-      "slot[name='indicator']"
-    )), l(this, L, this.shadowRoot.querySelector(".ea-tour-step__next")), l(this, $, this.shadowRoot.querySelector(
-      ".ea-tour-step__previous"
-    )), l(this, R, this.shadowRoot.querySelector(".ea-tour-step__finish")), l(this, P, this.shadowRoot.querySelector(
-      ".ea-tour-step__close-icon"
-    ));
+    `;
   }
-  async connectedCallback() {
-    var t;
-    super.connectedCallback(), await customElements.whenDefined("ea-tour"), (t = e(this, f)) == null || t.abort(), l(this, f, new AbortController()), e(this, H).innerHTML = Q(this, C, Y).call(this, e(this, C, G).querySelectorAll("ea-tour-step")), e(this, P).addEventListener(
-      "click",
-      () => {
-        const s = [...e(this, C, G).children].findIndex(
-          (o) => o === this
-        );
-        this.dispatchEvent(
-          new lt({
-            current: s
-          })
-        );
-      },
-      { signal: e(this, f).signal }
-    ), e(this, L).addEventListener(
-      "click",
-      () => {
-        this.emit("next", { bubbles: !0 });
-      },
-      { signal: e(this, f).signal }
-    ), e(this, $).addEventListener(
-      "click",
-      () => {
-        this.emit("previous", { bubbles: !0 });
-      },
-      { signal: e(this, f).signal }
-    ), e(this, R).addEventListener(
-      "click",
-      () => {
-        this.emit("finish", { bubbles: !0 });
-      },
-      { signal: e(this, f).signal }
+  _handleCloseIconClick() {
+    var e;
+    const t = [...((e = this._hostContentTour) == null ? void 0 : e.children) || []].findIndex(
+      (o) => o === this
+    );
+    this.dispatchEvent(
+      new R({
+        current: t
+      })
     );
   }
-  $beforeUnmounted() {
+  _handleNextClick() {
+    this.emit("ea-tour-step-next", { bubbles: !0 });
+  }
+  _handlePreviousClick() {
+    this.emit("ea-tour-step-previous", { bubbles: !0 });
+  }
+  _handleFinishClick() {
+    this.emit("ea-tour-step-finish", { bubbles: !0 });
+  }
+  /**
+   * 更新步骤指示器
+   * @param allSteps - 所有步骤元素数组
+   */
+  updateIndicators(t) {
+    this._indicatorSlot && (this._indicatorSlot.innerHTML = this._renderIndicators(t));
+  }
+  async $mount() {
     var t;
-    (t = e(this, f)) == null || t.abort();
+    await customElements.whenDefined("ea-tour"), (t = this._abortController) == null || t.abort(), this._abortController = new AbortController();
   }
-}
-M = new WeakMap(), B = new WeakMap(), H = new WeakMap(), $ = new WeakMap(), L = new WeakMap(), R = new WeakMap(), P = new WeakMap(), f = new WeakMap(), C = new WeakSet(), G = function() {
-  try {
-    return this.closest("ea-tour");
-  } catch {
-    return null;
+  $beforeUnmount() {
+    var t;
+    (t = this._abortController) == null || t.abort();
   }
-}, /**
- * 渲染指示器节点的字符串
- * @param {HTMLElement[]} tourItems
- * @returns {string}
- */
-Y = function(t) {
-  return Array.from(
-    t,
-    (s) => rt.EaElement.h("span", null, {
-      class: ["ea-tour-step__indicator", s === this ? "is-active" : ""],
-      part: "indicator"
-    })
-  ).join("");
-}, U = new WeakMap();
-window.customElements.get("ea-tour-step") || window.customElements.define("ea-tour-step", ht);
+};
+h([
+  c(A.cb())
+], n.prototype, "_container", 2);
+h([
+  c(".ea-tour-step__header slot")
+], n.prototype, "_title", 2);
+h([
+  c("slot[name='indicator']")
+], n.prototype, "_indicatorSlot", 2);
+h([
+  c(".ea-tour-step__next")
+], n.prototype, "_nextBtn", 2);
+h([
+  c(".ea-tour-step__previous")
+], n.prototype, "_previousBtn", 2);
+h([
+  c(".ea-tour-step__finish")
+], n.prototype, "_finishBtn", 2);
+h([
+  c(".ea-tour-step__close-icon")
+], n.prototype, "_closeIcon", 2);
+h([
+  f({
+    type: String,
+    default: "",
+    observer(t) {
+      this._title.textContent = t;
+    }
+  })
+], n.prototype, "heading", 2);
+h([
+  f({
+    type: String,
+    default: "",
+    observer(t) {
+      t !== "" && customElements.whenDefined("ea-tour-step").then(() => {
+        if (!document.querySelector(t))
+          return console.warn(
+            `[EaTour] target ${t} not a valid element selector.`,
+            this
+          );
+      });
+    }
+  })
+], n.prototype, "target", 2);
+h([
+  f({
+    type: C(["default", "primary"]),
+    default: "default",
+    observer(t) {
+      this._handleBtnTypeChange(t), this.updateContainerClasslist();
+    }
+  })
+], n.prototype, "variant", 2);
+h([
+  f({
+    type: C(U),
+    default: "bottom"
+  })
+], n.prototype, "placement", 2);
+h([
+  v("click", ".ea-tour-step__close-icon")
+], n.prototype, "_handleCloseIconClick", 1);
+h([
+  v("click", ".ea-tour-step__next")
+], n.prototype, "_handleNextClick", 1);
+h([
+  v("click", ".ea-tour-step__previous")
+], n.prototype, "_handlePreviousClick", 1);
+h([
+  v("click", ".ea-tour-step__finish")
+], n.prototype, "_handleFinishClick", 1);
+n = h([
+  P(M, { styles: [q] })
+], n);
+const et = { EaTour: l, EaTourStep: n };
 export {
-  nt as EaTour,
-  ht as EaTourStep
+  l as EaTour,
+  n as EaTourStep,
+  et as default
 };