easy-component-ui 3.0.12 → 3.0.14

package/dist/components/ea-message-box.js

@@ -1,624 +0,0 @@
-var U = Object.defineProperty;
-var O = (i) => {
-  throw TypeError(i);
-};
-var z = (i, s, e) => s in i ? U(i, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[s] = e;
-var H = (i, s, e) => z(i, typeof s != "symbol" ? s + "" : s, e), I = (i, s, e) => s.has(i) || O("Cannot " + e);
-var t = (i, s, e) => (I(i, s, "read from private field"), e ? e.call(i) : s.get(i)), o = (i, s, e) => s.has(i) ? O("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(i) : s.set(i, e), l = (i, s, e, n) => (I(i, s, "write to private field"), n ? n.call(i, e) : s.set(i, e), e);
-import { EaOverlay as V } from "./ea-overlay.js";
-import "./ea-input.js";
-import { s as N } from "../css/ea-message-box.style.js";
-import { t as K } from "../utils/timeout.js";
-import { E as $ } from "../utils/Utils.js";
-var p, f, v, y, g, B, C, a, _, E, r, h, c, u, b, S, L, T, w, M;
-class D extends V {
-  constructor() {
-    super(...arguments);
-    /** @type {HTMLElement} */
-    o(this, p);
-    /** @type {HTMLElement} */
-    o(this, f);
-    /** @type {HTMLElement} */
-    o(this, v);
-    /** @type {HTMLElement} */
-    o(this, y);
-    /** @type {HTMLElement} */
-    o(this, g);
-    /** @type {HTMLElement} */
-    o(this, B);
-    /** @type {HTMLElement} */
-    o(this, C);
-    /** @type {HTMLInputElement} */
-    o(this, a);
-    /** @type {HTMLElement} */
-    o(this, _);
-    /** @type {HTMLElement} */
-    o(this, E);
-    /** @type {HTMLElement} */
-    o(this, r);
-    /** @type {HTMLElement} */
-    o(this, h);
-    /** @type {AbortController} */
-    o(this, c);
-    o(this, u, {
-      inputPattern: null,
-      dangerouslyUseHTMLString: !1,
-      confirmButtonLoading: !1
-    });
-    H(this, "state", this.properties({
-      boxType: {
-        type: ["alert", "confirm", "prompt", "personalized"],
-        default: "personalized",
-        observer: async (e) => {
-          const n = this.shadowRoot.querySelector(
-            ".ea-overlay__content"
-          );
-          t(this, S).call(this, e, n), t(this, p).className = this.updateContainerClasslist();
-        }
-      },
-      visible: {
-        type: Boolean,
-        default: !1,
-        observer: async (e) => {
-          this.status = e, t(this, p).className = this.updateContainerClasslist();
-        }
-      },
-      title: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, v).textContent = e;
-        }
-      },
-      message: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          this.dangerouslyUseHTMLString ? t(this, C).innerHTML = e : t(this, C).textContent = e;
-        }
-      },
-      type: {
-        type: ["primary", "success", "info", "warning", "error"],
-        default: "",
-        observer: (e) => {
-          const n = {
-            primary: "info",
-            success: "ok-circled",
-            info: "info",
-            warning: "attention-alt",
-            error: "cancel-circled"
-          };
-          this.icon = `icon-${n[e]}`, t(this, p).className = this.updateContainerClasslist();
-        }
-      },
-      icon: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, y) && (t(this, y).icon = e);
-        }
-      },
-      closeIcon: {
-        type: String,
-        default: "icon-cancel",
-        observer: (e) => {
-          t(this, g).icon = e;
-        }
-      },
-      showClose: {
-        type: Boolean,
-        default: !0,
-        observer: (e) => {
-          t(this, g).style.display = e ? "block" : "none";
-        }
-      },
-      showCancelButton: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          t(this, h) && (t(this, h).style.display = e ? "inline-block" : "none");
-        }
-      },
-      showConfirmButton: {
-        type: Boolean,
-        default: !0,
-        observer: (e) => {
-          t(this, r) && (t(this, r).style.display = e ? "inline-block" : "none");
-        }
-      },
-      confirmButtonText: {
-        type: String,
-        default: "OK",
-        observer: (e) => {
-          t(this, r).textContent = e;
-        }
-      },
-      closeOnPressEscape: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-        }
-      },
-      center: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          t(this, p).className = this.updateContainerClasslist();
-        }
-      },
-      roundButton: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          t(this, r) && t(this, r).setAttribute("round", e), t(this, h) && t(this, h).setAttribute("round", e);
-        }
-      },
-      buttonSize: {
-        type: ["small", "medium", "large"],
-        default: "medium",
-        observer: (e) => {
-          t(this, r) && t(this, r).setAttribute("size", e), t(this, h) && t(this, h).setAttribute("size", e);
-        }
-      },
-      showInput: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          t(this, a).style.display = e ? "block" : "none";
-        }
-      },
-      inputPlaceholder: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, a) && (t(this, a).placeholder = e);
-        }
-      },
-      inputType: {
-        type: String,
-        default: "text",
-        observer: (e) => {
-          t(this, a) && (t(this, a).type = e);
-        }
-      },
-      inputValue: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, a) && (t(this, a).value = e);
-        }
-      },
-      inputErrorMessage: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, a) && this.inputPattern && (t(this, _).textContent = e);
-        }
-      },
-      draggable: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          t(this, p).className = this.updateContainerClasslist();
-        }
-      }
-    }));
-    /**
-     * 派发事件
-     * @param {string} customEventName 自定义事件名称
-     * @param {object} detail 自定义事件详情
-     */
-    o(this, b, (e, n) => {
-      this.emit(e, {
-        detail: n,
-        bubbles: !0,
-        composed: !0
-      });
-    });
-    o(this, S, (e, n) => {
-      n.innerHTML = `
-      <div class="ea-message-box-main" part="container">
-        <header class="ea-message-box-main__header" part="header">
-          <div class="ea-message-box-main__title-container" part="title-wrap">
-            <ea-icon class="ea-message-box-main__type-icon" part="type-icon"></ea-icon>
-            <span class="ea-message-box-main__title" part="title"></span>
-          </div>
-          <ea-icon class="ea-message-box-main__icon-close" icon="icon-cancel" part="close-icon"></ea-icon>
-        </header>
-        <main class="ea-message-box-main__content" part="content">
-          <div class="ea-message-box-main__description" part="description"></div>
-          <ea-input class="ea-message-box-main__input" part="input"></ea-input>
-          <div class="ea-message-box-main__invalid-message" part="invalid-message"></div>
-        </main>
-        <footer class="ea-message-box-main__footer" part="footer">
-          <ea-button class="ea-message-box-main__cancel-button" part="cancel-button">Cancel</ea-button>
-          <ea-button class="ea-message-box-main__confirm-button" type="primary" part="confirm-button">OK</ea-button>
-        </footer>
-      </div>
-    `, l(this, p, this.shadowRoot.querySelector(".ea-overlay")), l(this, f, this.shadowRoot.querySelector(
-        ".ea-message-box-main__header"
-      )), l(this, v, this.shadowRoot.querySelector(".ea-message-box-main__title")), l(this, y, this.shadowRoot.querySelector(
-        ".ea-message-box-main__type-icon"
-      )), l(this, g, this.shadowRoot.querySelector(
-        ".ea-message-box-main__icon-close"
-      )), l(this, B, this.shadowRoot.querySelector(
-        ".ea-message-box-main__content"
-      )), l(this, E, this.shadowRoot.querySelector(
-        ".ea-message-box-main__footer"
-      )), l(this, h, this.shadowRoot.querySelector(
-        ".ea-message-box-main__cancel-button"
-      )), l(this, r, this.shadowRoot.querySelector(
-        ".ea-message-box-main__confirm-button"
-      )), l(this, C, this.shadowRoot.querySelector(
-        ".ea-message-box-main__description"
-      )), l(this, a, this.shadowRoot.querySelector(".ea-message-box-main__input")), l(this, _, this.shadowRoot.querySelector(
-        ".ea-message-box-main__invalid-message"
-      )), t(this, a) && K(() => {
-        t(this, a).focus();
-      }, 0);
-    });
-    /**
-     * 处理带有匹配规则的输入框输入
-     * @returns {Promise<boolean>} Promise.
-     */
-    o(this, L, () => new Promise((e, n) => {
-      if (!t(this, a) || !this.inputPattern) return e(!0);
-      const d = this.inputPattern.test(t(this, a).value);
-      t(this, p).classList.toggle("is-invalid", !d), d ? e(!0) : n(
-        new Error(
-          `[EaMessageBox] ${this["input-error-message"] || "input pattern is not valid."}`
-        )
-      );
-    }));
-    /**
-     * 初始化确认事件
-     */
-    o(this, T, async () => {
-      var e;
-      try {
-        await t(this, L).call(this), (e = t(this, c)) == null || e.abort(), t(this, b).call(this, "confirm");
-      } catch {
-      }
-    });
-    /**
-     * 触发取消事件
-     */
-    o(this, w, () => {
-      this.distinguishCancelAndClose ? t(this, b).call(this, "message-close") : t(this, b).call(this, "cancel");
-    });
-    /**
-     * 初始化拖拽事件
-     */
-    o(this, M, (e) => {
-      if (!t(this, f).contains(e.target) || t(this, f) === e.target)
-        return;
-      const n = new AbortController(), d = this.shadowRoot.querySelector(
-        ".ea-overlay__content"
-      );
-      window.addEventListener(
-        "mousemove",
-        (x) => {
-          d.style.left = x.clientX + "px", d.style.top = x.clientY + "px";
-        },
-        {
-          signal: n.signal
-        }
-      ), window.addEventListener(
-        "mouseup",
-        () => {
-          n.abort();
-        },
-        { signal: n.signal }
-      );
-    });
-  }
-  // ------- inputPattern -------
-  // #region
-  get inputPattern() {
-    return t(this, u).inputPattern;
-  }
-  set inputPattern(e) {
-    t(this, u).inputPattern = e;
-  }
-  // #endregion
-  // ------- end -------
-  // ------- dangerouslyUseHTMLString -------
-  // #region
-  get dangerouslyUseHTMLString() {
-    return t(this, u).dangerouslyUseHTMLString;
-  }
-  set dangerouslyUseHTMLString(e) {
-    t(this, u).dangerouslyUseHTMLString = e;
-  }
-  // #endregion
-  // ------- end -------
-  // ------- confirmButtonLoading -------
-  // #region
-  get confirmButtonLoading() {
-    return t(this, u).confirmButtonLoading;
-  }
-  set confirmButtonLoading(e) {
-    t(this, u).confirmButtonLoading = e, t(this, r) && (t(this, a).disabled = e, t(this, r).loading = e);
-  }
-  // #endregion
-  // ------- end -------
-  // ------- distinguishCancelAndClose -------
-  // #region
-  get distinguishCancelAndClose() {
-    return t(this, u).distinguishCancelAndClose;
-  }
-  set distinguishCancelAndClose(e) {
-    t(this, u).distinguishCancelAndClose = e;
-  }
-  // #endregion
-  // ------- end -------
-  static get observedAttributes() {
-    return $.Array.toLowerCamelCase([
-      ...super.observedAttributes,
-      "boxType",
-      "visible",
-      "title",
-      "message",
-      "type",
-      "icon",
-      "showClose",
-      "closeIcon",
-      "showCancelButton",
-      "showConfirmButton",
-      "cancelButtonText",
-      "confirmButtonText",
-      "closeOnClickModal",
-      "center",
-      "roundButton",
-      "buttonSize",
-      "closeOnPressEscape",
-      "showInput",
-      "inputPlaceholder",
-      "inputType",
-      "inputValue",
-      // "inputPattern",
-      "inputErrorMessage",
-      "draggable"
-    ]);
-  }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    var e;
-    return `${super.updateContainerClasslist()} ${this.computedClasslist(
-      "ea-message-box",
-      {
-        "--visible": this.visible,
-        "--center": this.center,
-        [`--${this.type}`]: this.type,
-        "--draggable": this.draggable
-      },
-      {
-        invalid: t(this, a) && ((e = t(this, a)) == null ? void 0 : e.invalid),
-        [`${this["box-type"]}-box`]: this["box-type"]
-      }
-    )}`;
-  }
-  connectedCallback() {
-    var e;
-    this.setAttribute("role", "dialog"), this["content-width"] = "100%", this["content-max-width"] = "420px", this["content-height"] = "auto", super.connectedCallback(), this.assignedStyle(N), (e = t(this, c)) == null || e.abort(), l(this, c, new AbortController()), t(this, r) && t(this, r).addEventListener("click", t(this, T), {
-      signal: t(this, c).signal
-    }), this["show-close"] && t(this, g).addEventListener(
-      "click",
-      t(this, w),
-      { signal: t(this, c).signal }
-    ), t(this, h) && t(this, h).addEventListener(
-      "click",
-      () => {
-        var n;
-        (n = t(this, c)) == null || n.abort(), t(this, b).call(this, "cancel");
-      },
-      { signal: t(this, c).signal }
-    ), this["close-on-press-escape"] && this.addEventListener(
-      "keydown",
-      (n) => {
-        n.key === "Escape" && t(this, w).call(this);
-      },
-      { signal: t(this, c).signal }
-    ), this.addEventListener("close", t(this, w), {
-      signal: t(this, c).signal
-    }), this.draggable && this.shadowRoot.addEventListener("mousedown", t(this, M), {
-      signal: t(this, c).signal
-    });
-  }
-  $beforeUnmounted() {
-    var e;
-    (e = t(this, c)) == null || e.abort();
-  }
-}
-p = new WeakMap(), f = new WeakMap(), v = new WeakMap(), y = new WeakMap(), g = new WeakMap(), B = new WeakMap(), C = new WeakMap(), a = new WeakMap(), _ = new WeakMap(), E = new WeakMap(), r = new WeakMap(), h = new WeakMap(), c = new WeakMap(), u = new WeakMap(), b = new WeakMap(), S = new WeakMap(), L = new WeakMap(), T = new WeakMap(), w = new WeakMap(), M = new WeakMap();
-window.customElements.get("ea-message-box") || window.customElements.define("ea-message-box", D);
-var P, A, k, q;
-class X {
-  /**
-   *
-   * @param {MessageBoxOptions} options
-   */
-  constructor(s) {
-    /** @type {MessageBoxOptions} */
-    o(this, P, {
-      boxType: "personalized",
-      distinguishCancelAndClose: !1,
-      title: "",
-      dangerouslyUseHTMLString: !1,
-      message: "",
-      icon: "",
-      type: "primary",
-      closeIcon: "icon-cancel",
-      showClose: !0,
-      // lockScroll: true,
-      showCancelButton: !1,
-      showConfirmButton: !0,
-      confirmButtonLoading: !1,
-      cancelButtonText: "Cancel",
-      confirmButtonText: "OK",
-      closeOnClickModal: !0,
-      closeOnPressEscape: !1,
-      showInput: !1,
-      inputPlaceholder: "",
-      inputType: "text",
-      inputValue: "",
-      inputPattern: null,
-      //   inputValidator: null,
-      inputErrorMessage: "",
-      center: !1,
-      draggable: !1,
-      roundButton: !1,
-      buttonSize: "medium",
-      appendTo: "body",
-      beforeClose: null
-    });
-    o(this, A, [
-      "inputPattern",
-      "inputValidator",
-      "beforeClose",
-      "confirmButtonLoading",
-      "dangerouslyUseHTMLString",
-      "distinguishCancelAndClose"
-    ]);
-    /**
-     * 元素添加
-     * @param {HTMLElement} el
-     * @param {String | HTMLElement} appendTo
-     */
-    o(this, k, (s, e) => {
-      if (e instanceof HTMLElement)
-        e.appendChild(s);
-      else {
-        const n = document.querySelector(e);
-        n ? n.appendChild(s) : document.body.appendChild(s);
-      }
-    });
-    /**
-     * 元素渲染
-     * @param {MessageBoxOptions} options
-     * @returns
-     */
-    o(this, q, (s) => {
-      const e = document.createElement("ea-message-box");
-      for (const n in s)
-        if (t(this, A).includes(n))
-          e[n] = s[n];
-        else {
-          const d = $.String.toLowerCamelCase(n);
-          e.setAttribute(d, s[n]);
-        }
-      return e;
-    });
-    s = Object.assign(
-      { boxType: s.boxType },
-      t(this, P),
-      s
-    );
-    const e = t(this, q).call(this, s);
-    this.instance = e, t(this, k).call(this, e, s.appendTo);
-  }
-}
-P = new WeakMap(), A = new WeakMap(), k = new WeakMap(), q = new WeakMap();
-const m = (i) => {
-  const s = new AbortController(), e = new X(i).instance;
-  return e.visible = !0, e.addEventListener(
-    "closed",
-    () => {
-      e.remove(), s.abort();
-    },
-    { signal: s.signal }
-  ), new Promise((n, d) => {
-    e.addEventListener(
-      "confirm",
-      async (x) => {
-        if (i.beforeClose)
-          try {
-            await i.beforeClose(
-              "confirm",
-              e,
-              () => e.hide()
-            );
-          } catch {
-          }
-        else
-          e.hide();
-        n("confirm");
-      },
-      { signal: s.signal }
-    ), e.addEventListener(
-      "cancel",
-      async (x) => {
-        if (i.beforeClose)
-          try {
-            await i.beforeClose(
-              "cancel",
-              e,
-              () => e.hide()
-            );
-          } catch {
-          }
-        else
-          e.hide();
-        d("cancel");
-      },
-      { signal: s.signal }
-    ), e.addEventListener(
-      "message-close",
-      async (x) => {
-        if (i.beforeClose)
-          try {
-            await i.beforeClose(
-              "close",
-              e,
-              () => e.hide()
-            );
-          } catch {
-          }
-        else
-          e.hide();
-        d("close");
-      },
-      {
-        signal: s.signal
-      }
-    );
-  });
-};
-m.alert = (i = "", s = "", e = "") => m({
-  message: i,
-  title: s,
-  closeOnClickModal: !1,
-  showConfirmButton: !0,
-  boxType: "alert",
-  ...e
-});
-m.confirm = (i = "", s = "", e = "") => m({
-  message: i,
-  title: s,
-  showConfirmButton: !0,
-  showCancelButton: !0,
-  closeOnPressEscape: !0,
-  boxType: "confirm",
-  ...e
-});
-m.prompt = (i = "", s = "", e = "") => m({
-  message: i,
-  title: s,
-  showConfirmButton: !0,
-  showCancelButton: !0,
-  showInput: !0,
-  closeOnPressEscape: !0,
-  boxType: "prompt",
-  ...e
-});
-window.$alert = m.alert;
-window.$confirm = m.confirm;
-window.$prompt = m.prompt;
-window.$msgbox = m;
-export {
-  m as EaMessageBox,
-  D as EaMessageBoxElement
-};