easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-message.js

@@ -1,313 +1,289 @@
-var U = Object.defineProperty;
-var $ = (i) => {
-  throw TypeError(i);
+import { E as C } from "../core/EaBase.ts.js";
+import { q as m, a as p, l as _, C as v, p as b } from "../core/decorator.js";
+import { h as E } from "../utils/html.ts.js";
+import { E as g } from "../utils/Enum.ts.js";
+import { V as w, a as f, b as u } from "../core/constants.js";
+import { s as A } from "../css/ea-message.style.js";
+import "./ea-icon.js";
+import { c as M } from "../utils/bem.ts.js";
+import { t as P } from "../utils/timeout.ts.js";
+class T extends Event {
+  constructor(t) {
+    super("ea-close", { bubbles: !0, composed: !0 }), this.detail = t;
+  }
+}
+var L = Object.defineProperty, H = Object.getOwnPropertyDescriptor, o = (e, t, s, i) => {
+  for (var n = i > 1 ? void 0 : i ? H(t, s) : t, l = e.length - 1, c; l >= 0; l--)
+    (c = e[l]) && (n = (i ? c(t, s, n) : c(n)) || n);
+  return i && n && L(t, s, n), n;
 };
-var k = (i, t, e) => t in i ? U(i, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : i[t] = e;
-var T = (i, t, e) => k(i, typeof t != "symbol" ? t + "" : t, e), R = (i, t, e) => t.has(i) || $("Cannot " + e);
-var s = (i, t, e) => (R(i, t, "read from private field"), e ? e.call(i) : t.get(i)), o = (i, t, e) => t.has(i) ? $("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, e), h = (i, t, e, n) => (R(i, t, "write to private field"), n ? n.call(i, e) : t.set(i, e), e);
-import { n as A } from "./ea-calendar2.js";
-import { B, h as P } from "./Base.js";
-import { s as I } from "../css/ea-message.style.js";
-import { t as N } from "../utils/timeout.js";
-var r, u, m, f, d, a, b, l, C, w, v;
-class j extends B {
+const y = "ea-message", r = M(y), I = [
+  "top",
+  "top-left",
+  "top-right",
+  "bottom",
+  "bottom-left",
+  "bottom-right",
+  "middle"
+];
+let a = class extends C {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    o(this, r);
-    /** @type {HTMLElement} */
-    o(this, u);
-    /** @type {HTMLElement} */
-    o(this, m);
-    /** @type {HTMLElement} */
-    o(this, f);
-    /** @type {AbortController} */
-    o(this, d);
-    /** @type {AbortController} */
-    o(this, a);
-    o(this, b, {
-      dangerouslyUseHTMLString: !1
-    });
-    T(this, "state", this.properties({
-      type: {
-        props: !0,
-        type: ["primary", "success", "warning", "info", "error"],
-        default: "info",
-        observer: (e) => {
-          const n = {
-            success: "circle-check",
-            error: "circle-xmark",
-            warning: "triangle-exclamation",
-            info: "circle-info",
-            primary: "circle-info"
-          };
-          s(this, u).name = n[e], this.updateContainerClasslist();
-        }
-      },
-      visible: {
-        props: !0,
-        type: Boolean,
-        default: !1,
-        observer: async (e) => {
-          var n;
-          (n = s(this, a)) == null || n.abort(), h(this, a, new AbortController()), e ? (s(this, w).call(this), this.updateContainerClasslist(), s(this, l).call(this, "show"), s(this, r).offsetWidth, s(this, r).classList.add(this.ns.m("is-show")), s(this, r).addEventListener(
-            "transitionend",
-            () => {
-              s(this, l).call(this, "shown");
-            },
-            { once: !0, signal: s(this, a).signal }
-          )) : (s(this, v).call(this), s(this, r).classList.add(this.ns.m("before-hide")), s(this, l).call(this, "hide"), s(this, r).addEventListener(
-            "transitionend",
-            () => {
-              this.updateContainerClasslist(), s(this, l).call(this, "hidden");
-            },
-            { once: !0, signal: s(this, a).signal }
-          ));
-        }
-      },
-      message: {
-        props: !0,
-        type: String,
-        default: "",
-        observer: (e) => {
-          this.dangerouslyUseHTMLString ? s(this, m).innerHTML = e : s(this, m).innerText = e;
-        }
-      },
-      showClose: {
-        props: !0,
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          var n;
-          this.updateContainerClasslist(), (n = s(this, d)) == null || n.abort(), e && (h(this, d, new AbortController()), s(this, f).addEventListener("click", s(this, C), {
-            signal: s(this, d).signal
-          }));
-        }
-      },
-      placement: {
-        type: [
-          "top",
-          "top-left",
-          "top-right",
-          "bottom",
-          "bottom-left",
-          "bottom-right",
-          "middle"
-        ],
-        default: "top",
-        observer: () => {
-          this.updateContainerClasslist();
-        }
-      },
-      icon: {
-        props: !0,
-        type: String,
-        default: "",
-        observer: (e) => {
-          s(this, u).name = e, this.updateContainerClasslist();
-        }
-      }
-    }));
-    /**
-     * 触发冒泡事件
-     * @param {string} customEventName - 自定义事件名称
-     * @param {string} detail - 事件详情
-     */
-    o(this, l, (e, n) => {
-      this.emit(e, {
-        detail: n,
-        bubbles: !0,
-        composed: !0
-      });
-    });
-    /**
-     * 关闭消息（公共方法）
-     */
-    T(this, "close", () => {
-      this.visible = !1, s(this, l).call(this, "close");
-    });
-    /**
-     * 关闭按钮点击事件处理
-     */
-    o(this, C, () => {
-      this.close();
-    });
-    /**
-     * 初始化消息位置
-     */
-    o(this, w, () => {
-      const e = document.querySelectorAll(
-        `ea-message[placement="${this.placement}"]`
-      );
-      if (e.length <= 1) return;
-      const n = e[e.length - 2], c = n.style.getPropertyValue("--ea-message-y"), p = n.shadowRoot.querySelector(this.ns.cb()).getBoundingClientRect();
-      this.style.setProperty(
-        "--ea-message-y",
-        `${Number(c.replace("px", "")) + p.height + 8}px`
-      );
-    });
-    /**
-     * 隐藏消息
-     */
-    o(this, v, () => {
-      const e = [
-        ...document.querySelectorAll(`ea-message[placement="${this.placement}"]`)
-      ], n = e.findIndex((p) => p === this), c = e.slice(n + 1), x = s(this, r).getBoundingClientRect().height;
-      c.forEach((p) => {
-        const q = Number(
-          p.style.getPropertyValue("--ea-message-y").replace("px", "")
-        );
-        p.style.setProperty("--ea-message-y", `${q - x - 8}px`);
-      });
-    });
-    this.stylesheet = I, this.$render();
-  }
-  // ------- dangerouslyUseHTMLString -------
-  // #region
-  get dangerouslyUseHTMLString() {
-    return s(this, b).dangerouslyUseHTMLString;
-  }
-  set dangerouslyUseHTMLString(e) {
-    s(this, b).dangerouslyUseHTMLString = e;
-  }
-  // #endregion
-  // ------- end -------
-  static get observedAttributes() {
-    return [...super.observedAttributes, "placement"];
+    super(...arguments), this.variant = f, this.visible = !1, this.message = "", this.showClose = !1, this.placement = "top", this.icon = "", this.offset = 0, this.dangerouslyUseHTMLString = !1;
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
+  /** 更新容器类名 */
   updateContainerClasslist() {
-    const e = this.computedClasslist(
-      this.ns.b(),
+    const e = r(
       {
-        ["--" + this.type]: this.type,
-        ["--" + this.placement]: this.placement,
-        "--visible": this.visible,
-        "--show-close": this.showClose
+        [this.variant]: !0,
+        [this.placement]: !0
       },
-      {}
+      {
+        visible: this.visible,
+        "show-close": this.showClose
+      }
     );
-    return s(this, r) && (s(this, r).className = e), e;
+    return this._container && (this._container.className = e), e;
   }
-  $render() {
-    const e = A("message");
-    this.ns = e, this.shadowRoot.innerHTML = P(`
-      <div class="${e.b()}" part="container">
-        <ea-icon class="${e.e("icon")}" part="icon"></ea-icon>
-        <div class="${e.e("content")}" part="content-wrap"></div>
-        <ea-icon class="${e.e("icon-close")}" name="xmark" part="close-icon"></ea-icon>
+  /** 渲染模板 */
+  html() {
+    return `
+      <div class="${this.updateContainerClasslist()}" part="container">
+        <ea-icon class="${r.e("icon")}" name="${u[this.variant]}" part="icon"></ea-icon>
+        <div class="${r.e("content")}" part="content-wrap"></div>
+        <ea-icon class="${r.e("close-icon")}" name="xmark" part="close-icon"></ea-icon>
       </div>
-    `), h(this, r, this.shadowRoot.querySelector(e.cb())), h(this, u, this.shadowRoot.querySelector(e.ce("icon"))), h(this, m, this.shadowRoot.querySelector(e.ce("content"))), h(this, f, this.shadowRoot.querySelector(e.ce("icon-close")));
+    `;
+  }
+  /** 关闭消息（公共方法） */
+  close() {
+    this.visible = !1, this.dispatchEvent(new T({ visible: !1 }));
+  }
+  /** 初始化消息位置 */
+  _initPosition() {
+    var l;
+    const e = document.querySelectorAll(
+      `ea-message[placement="${this.placement}"]`
+    );
+    if (e.length <= 1) return;
+    const t = e[e.length - 2], s = t.style.getPropertyValue("--ea-message-y"), i = (l = t.shadowRoot) == null ? void 0 : l.querySelector(
+      r.cb()
+    );
+    if (!i) return;
+    const n = i.getBoundingClientRect();
+    this.style.setProperty(
+      "--ea-message-y",
+      `${Number(s.replace("px", "")) + n.height + 8}px`
+    );
   }
-  connectedCallback() {
-    super.connectedCallback();
+  /** 隐藏消息时调整后续消息位置 */
+  _handleHide() {
+    const e = [
+      ...document.querySelectorAll(
+        `ea-message[placement="${this.placement}"]`
+      )
+    ], t = e.findIndex((n) => n === this), s = e.slice(t + 1), i = this._container.getBoundingClientRect().height;
+    s.forEach((n) => {
+      const l = Number(
+        n.style.getPropertyValue("--ea-message-y").replace("px", "")
+      );
+      n.style.setProperty("--ea-message-y", `${l - i - 8}px`);
+    });
   }
-  $beforeUnmounted() {
-    var e, n;
-    (e = s(this, d)) == null || e.abort(), (n = s(this, a)) == null || n.abort();
+  _handleCloseIconClick() {
+    this.showClose && this.close();
   }
-}
-r = new WeakMap(), u = new WeakMap(), m = new WeakMap(), f = new WeakMap(), d = new WeakMap(), a = new WeakMap(), b = new WeakMap(), l = new WeakMap(), C = new WeakMap(), w = new WeakMap(), v = new WeakMap();
-window.customElements.get("ea-message") || window.customElements.define("ea-message", j);
-var E, M, L, S, H;
-class g {
-  /**
-   * @param {EaMessageOptions} options
-   */
+  $mount() {
+    this.setAttribute("role", "alert"), this.setAttribute("aria-live", "assertive"), this.setAttribute("aria-atomic", "true"), this.updateContainerClasslist();
+  }
+  $beforeUnmount() {
+    var e;
+    (e = this._transitionAbortController) == null || e.abort();
+  }
+};
+o([
+  m(r.cb())
+], a.prototype, "_container", 2);
+o([
+  m(r.ce("icon"))
+], a.prototype, "_messageIcon", 2);
+o([
+  m(r.ce("content"))
+], a.prototype, "_messageContent", 2);
+o([
+  m(r.ce("close-icon"))
+], a.prototype, "_messageCloseIcon", 2);
+o([
+  p({
+    type: g(w),
+    default: f,
+    observer(e) {
+      this._messageIcon.setAttribute(
+        "name",
+        this.icon || u[e]
+      ), this.updateContainerClasslist();
+    }
+  })
+], a.prototype, "variant", 2);
+o([
+  p({
+    type: Boolean,
+    default: !1,
+    observer(e) {
+      var t;
+      (t = this._transitionAbortController) == null || t.abort(), this._transitionAbortController = new AbortController(), e ? (this._initPosition(), this.updateContainerClasslist(), this.emit("ea-show"), this._container.offsetWidth, this._container.classList.add(r.s("show")), this._container.addEventListener(
+        "transitionend",
+        () => {
+          this.emit("ea-shown");
+        },
+        { once: !0, signal: this._transitionAbortController.signal }
+      )) : (this._handleHide(), this._container.classList.add(r.s("before-hide")), this.emit("ea-hide"), this._container.addEventListener(
+        "transitionend",
+        () => {
+          this.updateContainerClasslist(), this.emit("ea-hidden");
+        },
+        { once: !0, signal: this._transitionAbortController.signal }
+      ));
+    }
+  })
+], a.prototype, "visible", 2);
+o([
+  p({
+    type: String,
+    default: "",
+    observer(e) {
+      this.dangerouslyUseHTMLString ? this._messageContent.innerHTML = E(e) : this._messageContent.textContent = e;
+    }
+  })
+], a.prototype, "message", 2);
+o([
+  p({
+    type: Boolean,
+    default: !1,
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], a.prototype, "showClose", 2);
+o([
+  p({
+    type: g(I),
+    default: "top",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], a.prototype, "placement", 2);
+o([
+  p({
+    type: String,
+    default: "",
+    observer(e) {
+      this._messageIcon.setAttribute(
+        "name",
+        e || u[this.variant]
+      ), this.updateContainerClasslist();
+    }
+  })
+], a.prototype, "icon", 2);
+o([
+  p({
+    type: Number,
+    default: 0,
+    observer(e) {
+      this.style.setProperty("--ea-message-y", `${e}px`);
+    }
+  })
+], a.prototype, "offset", 2);
+o([
+  b({
+    type: Boolean,
+    default: !1
+  })
+], a.prototype, "dangerouslyUseHTMLString", 2);
+o([
+  _("click", r.ce("close-icon"))
+], a.prototype, "_handleCloseIconClick", 1);
+a = o([
+  v(y, { styles: [A] })
+], a);
+class h {
   constructor(t) {
-    o(this, E, [
+    this._includeTypes = [
       "dangerouslyUseHTMLString",
       "message",
       "placement",
-      "type",
+      "variant",
       "showClose",
       "duration",
       "offset",
       "icon"
-    ]);
-    /**
-     * 渲染消息实例
-     * @param {EaMessageOptions} options
-     * @return {HTMLElement}
-     */
-    o(this, M, (t) => {
-      const e = document.createElement("ea-message");
-      if (t instanceof String)
-        e.message = t;
-      else if (t instanceof Object)
-        for (const n in t)
-          e[n] = t[n];
-      else
-        console.warn(
-          "[EaMessage] TypeError: options must be a string or an object."
-        );
-      return e;
-    });
-    /**
-     * 处理 duration 属性
-     */
-    o(this, L, (t, e = 3e3) => {
-      e <= 0 || N(() => {
-        t.visible = !1;
-      }, e);
-    });
-    /**
-     * 处理 appendTo 属性
-     */
-    o(this, S, (t, e) => {
-      if (e instanceof HTMLElement)
-        e.appendChild(t);
-      else {
-        const n = document.querySelector(e);
-        n ? n.appendChild(t) : document.body.appendChild(t);
-      }
-    });
-    /**
-     * 处理 hide 属性
-     */
-    o(this, H, (t, e) => {
-      t.addEventListener(
-        "hidden",
-        (n) => {
-          e == null || e(n), t.remove();
-        },
-        { once: !0 }
-      );
-    });
-    this.options = s(this, E).reduce((n, c) => (t[c] && (n[c] = t[c]), n), {}), this.options.placement = this.options.placement || "top";
-    const e = s(this, M).call(this, this.options);
-    s(this, S).call(this, e, t.appendTo), s(this, L).call(this, e, t.duration), s(this, H).call(this, e, t.onClose), e.visible = !0;
+    ];
+    const s = typeof t == "string" ? { message: t } : { ...t }, i = this._includeTypes.reduce(
+      (l, c) => (s[c] !== void 0 && (l[c] = s[c]), l),
+      {}
+    );
+    i.placement = i.placement || "top";
+    const n = this._renderer(i);
+    this._appendToHandler(n, s.appendTo), this._durationHandler(n, s.duration), this._hideHandler(n, s.onClose), n.visible = !0;
+  }
+  _renderer(t) {
+    const s = document.createElement("ea-message");
+    for (const i in t)
+      s[i] = t[i];
+    return s;
+  }
+  _durationHandler(t, s = 3e3) {
+    s <= 0 || P(() => {
+      t.visible = !1;
+    }, s);
+  }
+  _appendToHandler(t, s) {
+    if (s instanceof HTMLElement)
+      s.appendChild(t);
+    else {
+      const i = s ? document.querySelector(s) : null;
+      i ? i.appendChild(t) : document.body.appendChild(t);
+    }
+  }
+  _hideHandler(t, s) {
+    t.addEventListener(
+      "ea-hidden",
+      (i) => {
+        s == null || s(i), t.remove();
+      },
+      { once: !0 }
+    );
   }
 }
-E = new WeakMap(), M = new WeakMap(), L = new WeakMap(), S = new WeakMap(), H = new WeakMap();
-const y = (i) => {
-  new g(i);
+const d = (e) => {
+  new h(e);
 };
-y.primary = (i) => new g({
-  message: i,
-  type: "primary"
+d.primary = (e) => new h({
+  message: e,
+  variant: "primary"
+});
+d.success = (e) => new h({
+  message: e,
+  variant: "success"
 });
-y.success = (i) => new g({
-  message: i,
-  type: "success"
+d.warning = (e) => new h({
+  message: e,
+  variant: "warning"
 });
-y.warning = (i) => new g({
-  message: i,
-  type: "warning"
+d.info = (e) => new h({
+  message: e,
+  variant: "info"
 });
-y.info = (i) => new g({
-  message: i,
-  type: "info"
+d.danger = (e) => new h({
+  message: e,
+  variant: "danger"
 });
-y.error = (i) => new g({
-  message: i,
-  type: "error"
+d.error = (e) => new h({
+  message: e,
+  variant: "danger"
 });
-window.$message = y;
+window.$message = d;
 export {
-  y as EaMessage,
-  j as EaMessageElement
+  d as EaMessage,
+  a as EaMessageElement
 };