easy-component-ui 3.0.12 → 3.0.14

package/dist/components/ea-tooltip.js

@@ -1,121 +0,0 @@
-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

@@ -1,544 +0,0 @@
-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
-};