easy-component-ui 3.0.11 → 3.0.13

package/dist/components/ea-message.js

@@ -1,80 +1,91 @@
-var R = Object.defineProperty;
-var T = (t) => {
-  throw TypeError(t);
+var U = Object.defineProperty;
+var $ = (i) => {
+  throw TypeError(i);
 };
-var q = (t, s, e) => s in t ? R(t, s, { enumerable: !0, configurable: !0, writable: !0, value: e }) : t[s] = e;
-var S = (t, s, e) => q(t, typeof s != "symbol" ? s + "" : s, e), _ = (t, s, e) => s.has(t) || T("Cannot " + e);
-var i = (t, s, e) => (_(t, s, "read from private field"), e ? e.call(t) : s.get(t)), n = (t, s, e) => s.has(t) ? T("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, e), d = (t, s, e, a) => (_(t, s, "write to private field"), a ? a.call(t, e) : s.set(t, e), e);
-import { B as U } from "./Base.js";
-import { s as $ } from "../css/ea-message.style.js";
-import { t as B } from "../utils/timeout.js";
-var o, u, m, y, r, f, l, b, w;
-class N extends U {
+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 {
   constructor() {
     super();
     /** @type {HTMLElement} */
-    n(this, o);
+    o(this, r);
     /** @type {HTMLElement} */
-    n(this, u);
+    o(this, u);
     /** @type {HTMLElement} */
-    n(this, m);
+    o(this, m);
     /** @type {HTMLElement} */
-    n(this, y);
+    o(this, f);
     /** @type {AbortController} */
-    n(this, r);
-    n(this, f, {
+    o(this, d);
+    /** @type {AbortController} */
+    o(this, a);
+    o(this, b, {
       dangerouslyUseHTMLString: !1
     });
-    S(this, "state", this.properties({
+    T(this, "state", this.properties({
       type: {
+        props: !0,
         type: ["primary", "success", "warning", "info", "error"],
         default: "info",
         observer: (e) => {
-          const a = {
-            success: "icon-ok-circled",
-            error: "icon-cancel-circled",
-            warning: "icon-attention-alt",
-            info: "icon-info",
-            primary: "icon-info"
+          const n = {
+            success: "circle-check",
+            error: "circle-xmark",
+            warning: "triangle-exclamation",
+            info: "circle-info",
+            primary: "circle-info"
           };
-          i(this, u).icon = a[e], i(this, o).className = this.updateContainerClasslist();
+          s(this, u).name = n[e], this.updateContainerClasslist();
         }
       },
       visible: {
+        props: !0,
         type: Boolean,
         default: !1,
         observer: async (e) => {
-          var a;
-          (a = i(this, r)) == null || a.abort(), d(this, r, new AbortController()), e ? (i(this, b).call(this), i(this, o).className = this.updateContainerClasslist(), i(this, l).call(this, "show"), i(this, o).offsetWidth, i(this, o).classList.add("ea-message--is-show"), i(this, o).addEventListener(
+          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",
             () => {
-              i(this, l).call(this, "shown");
+              s(this, l).call(this, "shown");
             },
-            { once: !0, signal: i(this, r).signal }
-          )) : (i(this, w).call(this), i(this, o).classList.add("ea-message--before-hide"), i(this, l).call(this, "hide"), i(this, o).addEventListener(
+            { 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",
             () => {
-              i(this, o).className = this.updateContainerClasslist(), i(this, l).call(this, "hidden");
+              this.updateContainerClasslist(), s(this, l).call(this, "hidden");
             },
-            { once: !0, signal: i(this, r).signal }
+            { once: !0, signal: s(this, a).signal }
           ));
         }
       },
       message: {
+        props: !0,
         type: String,
         default: "",
         observer: (e) => {
-          this.dangerouslyUseHTMLString ? i(this, m).innerHTML = e : i(this, m).innerText = e;
+          this.dangerouslyUseHTMLString ? s(this, m).innerHTML = e : s(this, m).innerText = e;
         }
       },
       showClose: {
+        props: !0,
         type: Boolean,
         default: !1,
-        observer: () => {
-          i(this, o).className = this.updateContainerClasslist();
+        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: {
+        props: !0,
         type: [
           "top",
           "top-left",
@@ -86,166 +97,218 @@ class N extends U {
         ],
         default: "top",
         observer: () => {
-          this.className = this.updateContainerClasslist();
+          this.updateContainerClasslist();
+        }
+      },
+      icon: {
+        props: !0,
+        type: String,
+        default: "",
+        observer: (e) => {
+          s(this, u).name = e, this.updateContainerClasslist();
         }
       }
     }));
-    n(this, l, (e, a) => {
+    /**
+     * 触发冒泡事件
+     * @param {string} customEventName - 自定义事件名称
+     * @param {string} detail - 事件详情
+     */
+    o(this, l, (e, n) => {
       this.emit(e, {
-        detail: a,
+        detail: n,
         bubbles: !0,
         composed: !0
       });
     });
-    S(this, "close", () => {
-      this.visible = !1, i(this, l).call(this, "close");
+    /**
+     * 关闭消息（公共方法）
+     */
+    T(this, "close", () => {
+      this.visible = !1, s(this, l).call(this, "close");
     });
-    n(this, b, () => {
+    /**
+     * 关闭按钮点击事件处理
+     */
+    o(this, C, () => {
+      this.close();
+    });
+    /**
+     * 初始化消息位置
+     */
+    o(this, w, () => {
       const e = document.querySelectorAll(
         `ea-message[placement="${this.placement}"]`
       );
       if (e.length <= 1) return;
-      const a = e[e.length - 2], c = a.style.getPropertyValue("--ea-message-y"), h = a.shadowRoot.querySelector(".ea-message").getBoundingClientRect();
+      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", "")) + h.height + 8}px`
+        `${Number(c.replace("px", "")) + p.height + 8}px`
       );
     });
-    n(this, w, () => {
+    /**
+     * 隐藏消息
+     */
+    o(this, v, () => {
       const e = [
         ...document.querySelectorAll(`ea-message[placement="${this.placement}"]`)
-      ], a = e.findIndex((h) => h === this), c = e.slice(a + 1), H = i(this, o).getBoundingClientRect().height;
-      c.forEach((h, A) => {
-        const x = Number(
-          h.style.getPropertyValue("--ea-message-y").replace("px", "")
+      ], 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", "")
         );
-        h.style.setProperty("--ea-message-y", `${x - H - 8}px`);
+        p.style.setProperty("--ea-message-y", `${q - x - 8}px`);
       });
     });
-    this.stylesheet = $, this.$render();
+    this.stylesheet = I, this.$render();
   }
   // ------- dangerouslyUseHTMLString -------
   // #region
   get dangerouslyUseHTMLString() {
-    return i(this, f).dangerouslyUseHTMLString;
+    return s(this, b).dangerouslyUseHTMLString;
   }
   set dangerouslyUseHTMLString(e) {
-    i(this, f).dangerouslyUseHTMLString = e;
+    s(this, b).dangerouslyUseHTMLString = e;
   }
   // #endregion
   // ------- end -------
   static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "type",
-      "visible",
-      "message",
-      "showClose",
-      "placement"
-    ];
+    return [...super.observedAttributes, "placement"];
   }
   /**
    * 获取 classlist 列表
    * @return {string} 属性值
    */
   updateContainerClasslist() {
-    return this.computedClasslist("ea-message", {
-      "--visible": this.visible,
-      ["--" + this.type]: this.type,
-      "--show-close": this.showClose,
-      ["--" + this.placement]: this.placement
-    });
+    const e = this.computedClasslist(
+      this.ns.b(),
+      {
+        ["--" + this.type]: this.type,
+        ["--" + this.placement]: this.placement,
+        "--visible": this.visible,
+        "--show-close": this.showClose
+      },
+      {}
+    );
+    return s(this, r) && (s(this, r).className = e), e;
   }
   $render() {
-    this.shadowRoot.innerHTML = `
-      <div class="ea-message" part="container">
-        <ea-icon class="ea-message__icon" part="icon"></ea-icon>
-        <div class="ea-message__content" part="content-wrap"></div>
-        <ea-icon class="ea-message__icon-close" icon="icon-cancel" part="close-icon"></ea-icon>
+    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>
       </div>
-    `, d(this, o, this.shadowRoot.querySelector(".ea-message")), d(this, u, this.shadowRoot.querySelector(".ea-message__icon")), d(this, m, this.shadowRoot.querySelector(
-      ".ea-message__content"
-    )), d(this, y, this.shadowRoot.querySelector(
-      ".ea-message__icon-close"
-    ));
+    `), 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")));
   }
   connectedCallback() {
-    super.connectedCallback(), this.showClose && i(this, y).addEventListener("click", this.close);
+    super.connectedCallback();
   }
   $beforeUnmounted() {
-    var e;
-    (e = i(this, r)) == null || e.abort();
+    var e, n;
+    (e = s(this, d)) == null || e.abort(), (n = s(this, a)) == null || n.abort();
   }
 }
-o = new WeakMap(), u = new WeakMap(), m = new WeakMap(), y = new WeakMap(), r = new WeakMap(), f = new WeakMap(), l = new WeakMap(), b = new WeakMap(), w = new WeakMap();
-window.customElements.get("ea-message") || window.customElements.define("ea-message", N);
-var C, v, E, M, L;
+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
    */
-  constructor(s) {
-    n(this, C, ["dangerouslyUseHTMLString", "message", "placement", "type", "showClose", "duration", "offset"]);
-    n(this, v, (s) => {
+  constructor(t) {
+    o(this, E, [
+      "dangerouslyUseHTMLString",
+      "message",
+      "placement",
+      "type",
+      "showClose",
+      "duration",
+      "offset",
+      "icon"
+    ]);
+    /**
+     * 渲染消息实例
+     * @param {EaMessageOptions} options
+     * @return {HTMLElement}
+     */
+    o(this, M, (t) => {
       const e = document.createElement("ea-message");
-      if (s instanceof String)
-        e.message = s;
-      else if (s instanceof Object)
-        for (const a in s)
-          e[a] = s[a];
+      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.");
+        console.warn(
+          "[EaMessage] TypeError: options must be a string or an object."
+        );
       return e;
     });
-    n(this, E, (s, e = 3e3) => {
-      e <= 0 || B(() => {
-        s.visible = !1;
+    /**
+     * 处理 duration 属性
+     */
+    o(this, L, (t, e = 3e3) => {
+      e <= 0 || N(() => {
+        t.visible = !1;
       }, e);
     });
-    n(this, M, (s, e) => {
+    /**
+     * 处理 appendTo 属性
+     */
+    o(this, S, (t, e) => {
       if (e instanceof HTMLElement)
-        e.appendChild(s);
+        e.appendChild(t);
       else {
-        const a = document.querySelector(e);
-        a ? a.appendChild(s) : document.body.appendChild(s);
+        const n = document.querySelector(e);
+        n ? n.appendChild(t) : document.body.appendChild(t);
       }
     });
-    n(this, L, (s, e) => {
-      s.addEventListener("hidden", (a) => {
-        e == null || e(a), s.remove();
-      }, { once: !0 });
+    /**
+     * 处理 hide 属性
+     */
+    o(this, H, (t, e) => {
+      t.addEventListener(
+        "hidden",
+        (n) => {
+          e == null || e(n), t.remove();
+        },
+        { once: !0 }
+      );
     });
-    this.options = i(this, C).reduce((a, c) => (s[c] && (a[c] = s[c]), a), {}), this.options.placement = this.options.placement || "top";
-    const e = i(this, v).call(this, this.options);
-    i(this, M).call(this, e, s.appendTo), i(this, E).call(this, e, s.duration), i(this, L).call(this, e, s.onClose), e.visible = !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;
   }
 }
-C = new WeakMap(), v = new WeakMap(), E = new WeakMap(), M = new WeakMap(), L = new WeakMap();
-const p = (t) => {
-  new g(t);
+E = new WeakMap(), M = new WeakMap(), L = new WeakMap(), S = new WeakMap(), H = new WeakMap();
+const y = (i) => {
+  new g(i);
 };
-p.primary = (t) => new g({
-  message: t,
+y.primary = (i) => new g({
+  message: i,
   type: "primary"
 });
-p.success = (t) => new g({
-  message: t,
+y.success = (i) => new g({
+  message: i,
   type: "success"
 });
-p.warning = (t) => new g({
-  message: t,
+y.warning = (i) => new g({
+  message: i,
   type: "warning"
 });
-p.info = (t) => new g({
-  message: t,
+y.info = (i) => new g({
+  message: i,
   type: "info"
 });
-p.error = (t) => new g({
-  message: t,
+y.error = (i) => new g({
+  message: i,
   type: "error"
 });
-window.$message = p;
+window.$message = y;
 export {
-  p as EaMessage,
-  N as EaMessageElement
+  y as EaMessage,
+  j as EaMessageElement
 };