easy-component-ui 2.1.0 → 3.0.0

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

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