easy-component-ui 2.1.0 → 3.0.0

package/dist/components/ea-tooltip.js

@@ -0,0 +1,121 @@
+var w = Object.defineProperty;
+var b = (e) => {
+  throw TypeError(e);
+};
+var y = (e, s, t) => s in e ? w(e, s, { enumerable: !0, configurable: !0, writable: !0, value: t }) : e[s] = t;
+var E = (e, s, t) => y(e, typeof s != "symbol" ? s + "" : s, t), C = (e, s, t) => s.has(e) || b("Cannot " + t);
+var o = (e, s, t) => (C(e, s, "read from private field"), t ? t.call(e) : s.get(e)), r = (e, s, t) => s.has(e) ? b("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, t), l = (e, s, t, i) => (C(e, s, "write to private field"), i ? i.call(e, t) : s.set(e, t), t);
+import { EaPopper as k } from "./ea-popper.js";
+import { s as x } from "../css/ea-tooltip.style.js";
+var d, c, p, h, n, m, u, g, f;
+class L extends k {
+  constructor() {
+    super();
+    /** @type {HTMLElement} */
+    r(this, d);
+    /** @type {HTMLElement} */
+    r(this, c);
+    /** @type {HTMLElement} */
+    r(this, p);
+    /** @type {HTMLElement} */
+    r(this, h);
+    /** @type {AbortController} */
+    r(this, n);
+    r(this, m);
+    E(this, "state", this.properties({
+      trigger: {
+        type: ["click", "focus", "hover", "contextmenu", "customized"],
+        default: "hover",
+        observer: (t) => {
+        }
+      },
+      visible: {
+        type: Boolean,
+        default: !1,
+        observer: (t) => {
+          this.status = t;
+        }
+      },
+      effect: {
+        type: ["dark", "light", "customized"],
+        default: "dark",
+        observer: (t) => {
+          t !== "customized" && (o(this, d).className = this.updateContainerClasslist());
+        }
+      },
+      content: {
+        type: String,
+        default: "",
+        observer: (t) => {
+          if (o(this, h))
+            o(this, h).innerText = t;
+          else {
+            const i = document.createElement("div"), a = o(this, c).querySelector("slot");
+            i.classList.add("ea-tooltip__content"), i.part = "content", i.innerText = t, o(this, c).appendChild(i), l(this, h, i), a.remove();
+          }
+        }
+      }
+    }));
+    r(this, u, {
+      hover: () => {
+        this.addEventListener("mouseover", (t) => {
+          this.show(), this.addEventListener("mouseout", (i) => {
+            this.hide();
+          }, { once: !0 });
+        }, { signal: o(this, n).signal });
+      },
+      click: () => {
+        this.addEventListener("click", () => {
+          this.toggle();
+        }, { signal: o(this, n).signal });
+      },
+      focus: () => {
+        this.addEventListener("focus", () => {
+          this.show(), this.addEventListener("blur", (t) => {
+            this.hide();
+          }, { once: !0 });
+        }, { signal: o(this, n).signal });
+      },
+      contextmenu: () => {
+        this.addEventListener("contextmenu", (t) => {
+          t.preventDefault();
+          const i = new AbortController();
+          this.show(), window.addEventListener("click", (a) => {
+            this.contains(a.target) || (i.abort(), this.hide());
+          }, { signal: i.signal });
+        }, { signal: o(this, n).signal });
+      }
+    });
+    r(this, g, () => {
+      const t = new AbortController();
+      l(this, n, t), this.assignedStyle(x);
+    });
+    r(this, f, () => {
+      var i, a;
+      if (this.trigger === "customized") return;
+      const t = Object.keys(o(this, u)).find((v) => this.trigger === v);
+      (a = (i = o(this, u))[t || "hover"]) == null || a.call(i), t || console.warn(`[EaPopper] trigger event ${this.trigger} is not exist`);
+    });
+    l(this, d, this.shadowRoot.querySelector(".ea-popper")), l(this, c, this.shadowRoot.querySelector(".ea-popper__original")), l(this, p, this.shadowRoot.querySelector(".ea-popper__reference"));
+  }
+  static get observedAttributes() {
+    return [...super.observedAttributes, "trigger", "content", "visible", "effect"];
+  }
+  updateContainerClasslist() {
+    return `${super.updateContainerClasslist()} ${this.computedClasslist("ea-tooltip", {
+      ["--" + this.effect]: this.effect && this.effect !== "customized"
+    })}`;
+  }
+  connectedCallback() {
+    super.connectedCallback(), o(this, g).call(this), o(this, f).call(this);
+  }
+  $beforeUnmounted() {
+    var t;
+    super.$beforeUnmounted(), (t = o(this, n)) == null || t.abort();
+  }
+}
+d = new WeakMap(), c = new WeakMap(), p = new WeakMap(), h = new WeakMap(), n = new WeakMap(), m = new WeakMap(), u = new WeakMap(), g = new WeakMap(), f = new WeakMap();
+window.customElements.get("ea-tooltip") || window.customElements.define("ea-tooltip", L);
+export {
+  L as EaTooltip
+};

package/dist/components/ea-tour.js

@@ -0,0 +1,544 @@
+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 "./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;
+};
+var T, u, E, k, S, A, p, y, m, D, I, W, q;
+class nt extends X {
+  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, {
+      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: c, bottom: x, left: h } = t.getBoundingClientRect(), i = this.gap * 2, d = s.clientWidth || s.offsetWidth || 520, b = s.clientHeight || s.offsetHeight || 0, Z = window.innerWidth, V = window.innerHeight, tt = {
+        top: {
+          top: c - b - i,
+          left: h - d / 2 + i
+        },
+        "top-start": {
+          top: c - b - i,
+          left: h - i
+        },
+        "top-end": {
+          top: c - b - i,
+          left: h - d + o + i
+        },
+        right: {
+          top: c - i - b / 2 + g / 2,
+          left: h + o + i
+        },
+        "right-start": {
+          top: c - i,
+          left: h + o + i
+        },
+        "right-end": {
+          top: c - b / 2 - i,
+          left: h + o + i
+        },
+        bottom: {
+          top: x + i,
+          left: h - d / 2 + i
+        },
+        "bottom-start": {
+          top: x + i,
+          left: h - i
+        },
+        "bottom-end": {
+          top: x + i,
+          left: h - d + o + i
+        },
+        left: {
+          top: c - i - b / 2 + g / 2,
+          left: h - d - i * 2
+        },
+        "left-start": {
+          top: c - i,
+          left: h - d - i * 2
+        },
+        "left-end": {
+          top: c - b / 2 - i,
+          left: h - d - 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) : _ + d > Z && (_ = Math.min(_, v - d - 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: c, x, y: h, right: i, bottom: d } = v.getBoundingClientRect();
+      e(this, u).style.width = `${N + this.gap}px`, e(this, u).style.height = `${c + 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 = `${d + 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"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const t = this.computedClasslist(
+      "ea-tour",
+      {},
+      {
+        visible: this.visible,
+        mask: this.mask,
+        center: e(this, m).isCenter
+      }
+    );
+    return e(this, T).className = t, t;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class="ea-tour">
+        <svg class="ea-tour__svg">
+          <defs>
+            <mask id="reverseMask">
+              <rect x="0" y="0" width="100%" height="100%" fill="white" />
+              <rect class="ea-tour__hollow" part="hollow" x="50" y="50" width="100px" height="100px" fill="black" />
+            </mask>
+          </defs>
+          <rect class='ea-tour__mask' x="0" y="0" width="100%" height="100%" mask="url(#reverseMask)"></rect>
+          <rect class="ea-tour__divider top-mask" x="0" y="0" width="100%" height="50px"></rect>
+          <rect class="ea-tour__divider right-mask" x="150px" y="0" width="100%" height="100%"></rect>
+          <rect class="ea-tour__divider bottom-mask" x="0" y="150px" width="100%" height="100%"></rect>
+          <rect class="ea-tour__divider left-mask" x="0" y="0" width="50px" height="100%"></rect>
+        </svg>
+      </div>
+      <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"
+    ));
+  }
+  connectedCallback() {
+    var s;
+    super.connectedCallback();
+    const t = () => {
+      this.emit("change", {
+        detail: { current: this.current },
+        bubbles: !0,
+        composed: !0
+      });
+    };
+    (s = e(this, p)) == null || s.abort(), l(this, p, new AbortController()), this.addEventListener(
+      "ea-close",
+      () => {
+        this.visible = !1;
+      },
+      { signal: e(this, p).signal }
+    ), this.addEventListener(
+      "next",
+      (o) => {
+        o.preventDefault(), o.stopImmediatePropagation(), o.stopPropagation(), this.current++, t();
+      },
+      { signal: e(this, p).signal }
+    ), this.addEventListener(
+      "previous",
+      (o) => {
+        o.preventDefault(), o.stopImmediatePropagation(), o.stopPropagation(), this.current--, t();
+      },
+      { signal: e(this, p).signal }
+    ), this.addEventListener(
+      "finish",
+      () => {
+        this.visible = !1;
+      },
+      { signal: e(this, p).signal }
+    );
+  }
+  $beforeUnmounted() {
+    var t;
+    (t = e(this, p)) == null || t.abort();
+    for (const s in e(this, y))
+      e(this, y)[s] = 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) => {
+        }
+      }
+    }));
+    /**
+     * 按钮类型切换
+     * @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");
+      });
+    });
+    this.stylesheet = it, this.$render();
+  }
+  static get observedAttributes() {
+    return [
+      ...super.observedAttributes,
+      "title",
+      "target",
+      "type",
+      "placement"
+    ];
+  }
+  /**
+   * 获取 classlist 列表
+   * @return {string} 属性值
+   */
+  updateContainerClasslist() {
+    const t = this.computedClasslist("ea-tour-step", {
+      ["--" + this.type]: this.type
+    });
+    return e(this, M).className = t, t;
+  }
+  $render() {
+    this.shadowRoot.innerHTML = `
+      <div class='ea-tour-step' part='container'>
+        <header class='ea-tour-step__header' part='header'>
+          <slot name='header'></slot>
+          <ea-icon class='ea-tour-step__close-icon' part='close-icon' icon="icon-cancel"></ea-icon>
+        </header>
+        <main class='ea-tour-step__content' part='content'>
+          <slot></slot>
+        </main>
+        <footer class='ea-tour-step__footer' part='footer'>
+          <div class='ea-tour-step__indicator-group' part='indicator-group'>
+            <slot name='indicator'></slot>
+          </div>
+          <div class='ea-tour-step__switch-group' part='switch-group'>
+            <slot name='footer'>
+              <ea-button class="ea-tour-step__btn ea-tour-step__previous" part="previous">Previous</ea-button>
+              <ea-button class="ea-tour-step__btn ea-tour-step__next" part="next">Next</ea-button>
+              <ea-button class="ea-tour-step__btn ea-tour-step__finish" part="finish">Finish</ea-button>
+            </slot>
+          </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 }
+    );
+  }
+  $beforeUnmounted() {
+    var t;
+    (t = e(this, f)) == null || t.abort();
+  }
+}
+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;
+  }
+}, /**
+ * 渲染指示器节点的字符串
+ * @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);
+export {
+  nt as EaTour,
+  ht as EaTourStep
+};