easy-component-ui 3.0.15 → 4.0.3

package/dist/components/ea-notification.js

@@ -1,331 +1,331 @@
-var k = Object.defineProperty;
-var I = (s) => {
-  throw TypeError(s);
+import { E as y } from "../core/EaBase.ts.js";
+import { q as d, a as h, l as _, C, p as g } from "../core/decorator.js";
+import { h as b } from "../utils/html.ts.js";
+import { E as f } from "../utils/Enum.ts.js";
+import { b as m } from "../core/constants.js";
+import { s as v } from "../css/ea-notification.style.js";
+import "./ea-icon.js";
+import { c as E } from "../utils/bem.ts.js";
+import { t as I } from "../utils/timeout.ts.js";
+var w = Object.defineProperty, A = Object.getOwnPropertyDescriptor, a = (t, i, e, s) => {
+  for (var o = s > 1 ? void 0 : s ? A(i, e) : i, l = t.length - 1, p; l >= 0; l--)
+    (p = t[l]) && (o = (s ? p(i, e, o) : p(o)) || o);
+  return s && o && w(i, e, o), o;
 };
-var $ = (s, i, e) => i in s ? k(s, i, { enumerable: !0, configurable: !0, writable: !0, value: e }) : s[i] = e;
-var C = (s, i, e) => $(s, typeof i != "symbol" ? i + "" : i, e), R = (s, i, e) => i.has(s) || I("Cannot " + e);
-var t = (s, i, e) => (R(s, i, "read from private field"), e ? e.call(s) : i.get(s)), n = (s, i, e) => i.has(s) ? I("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, e), l = (s, i, e, o) => (R(s, i, "write to private field"), o ? o.call(s, e) : i.set(s, e), e);
-import { t as A } from "../utils/timeout.js";
-import { E as q } from "../utils/Utils.js";
-import { B } from "./Base.js";
-import { s as P } from "../css/ea-notification.style.js";
-var v, E, _, L, S, x;
-class z {
-  /**
-   * @param {EaNotificationOptions} options
-   */
-  constructor(i) {
-    n(this, v, ["dangerouslyUseHTMLString", "message"]);
-    n(this, E, ["appendTo"]);
-    n(this, _, {
-      title: "",
-      dangerouslyUseHTMLString: !1,
-      message: "",
-      icon: "",
-      type: "info",
-      duration: 3e3,
-      placement: "top-right",
-      zIndex: 0,
-      showClose: !0,
-      closeIcon: "xmark",
-      appendTo: "body"
-    });
-    /**
-     *
-     * @param {HTMLElement} el
-     * @param {EaNotificationOptions} options
-     * @returns
-     */
-    n(this, L, (i) => {
-      const e = document.createElement("ea-notification");
-      for (const o in i) {
-        if (t(this, E).includes(o)) continue;
-        const p = i[o];
-        if (t(this, v).includes(o))
-          e[o] = p;
-        else {
-          const w = q.String.toLowerCamelCase(o);
-          e.setAttribute(w, p);
-        }
-      }
-      return e;
-    });
-    /**
-     *
-     * @param {HTMLElement} el
-     * @param {HTMLElement | String} appendTo
-     * @returns
-     */
-    n(this, S, (i, e) => {
-      if (!e) return document.body.appendChild(i);
-      if (e instanceof HTMLElement)
-        e.appendChild(i);
-      else if (typeof e == "string") {
-        const o = document.querySelector(e);
-        o ? o.appendChild(i) : document.body.appendChild(i);
-      } else
-        console.warn(
-          `[EaNotification] TypeError: ${e} is not a valid element or selector.`
-        );
-    });
-    /**
-     *
-     * @param {HTMLElement} el
-     * @param {number} duration
-     * @returns
-     */
-    n(this, x, (i, e = 3e3) => {
-      i.visible = !0, i.addEventListener("hidden", () => i.remove()), e > 0 && A(() => {
-        i.visible = !1;
-      }, e);
-    });
-    C(this, "close", () => {
-      this.instance.close();
-    });
-    i = Object.assign({}, t(this, _), i);
-    const e = t(this, L).call(this, i);
-    this.instance = e, t(this, S).call(this, e, i.appendTo), t(this, x).call(this, e, i.duration);
-  }
-}
-v = new WeakMap(), E = new WeakMap(), _ = new WeakMap(), L = new WeakMap(), S = new WeakMap(), x = new WeakMap();
-const r = (s) => new z(s);
-r.primary = (s) => r({
-  ...s,
-  type: "primary"
-});
-r.success = (s) => r({
-  ...s,
-  type: "success"
-});
-r.warning = (s) => r({
-  ...s,
-  type: "warning"
-});
-r.info = (s) => r({
-  ...s,
-  type: "info"
-});
-r.error = (s) => r({
-  ...s,
-  type: "error"
-});
-var a, M, y, g, d, m, c, b, f, h, N, T, H;
-class V extends B {
+const u = "ea-notification", r = E(u), x = [
+  "primary",
+  "success",
+  "warning",
+  "info",
+  "error"
+], N = [
+  "top-right",
+  "top-left",
+  "bottom-right",
+  "bottom-left"
+];
+let n = class extends y {
   constructor() {
-    super();
-    /** @type {HTMLElement} */
-    n(this, a);
-    /** @type {HTMLElement} */
-    n(this, M);
-    /** @type {HTMLElement} */
-    n(this, y);
-    /** @type {HTMLElement} */
-    n(this, g);
-    /** @type {HTMLElement} */
-    n(this, d);
-    /** @type {HTMLElement} */
-    n(this, m);
-    /** @type {AbortController} */
-    n(this, c);
-    /** @type {AbortController} */
-    n(this, b);
-    n(this, f, {
-      dangerouslyUseHTMLString: !1,
-      message: ""
-    });
-    C(this, "state", this.properties({
-      type: {
-        type: ["primary", "success", "warning", "info", "error"],
-        default: "info",
-        observer: (e) => {
-          const o = {
-            success: "circle-check",
-            error: "circle-xmark",
-            warning: "triangle-exclamation",
-            info: "circle-info",
-            primary: "circle-info"
-          };
-          t(this, y).name = o[e], t(this, a).className = this.updateContainerClasslist();
-        }
-      },
-      title: {
-        type: String,
-        default: "",
-        observer: (e) => {
-          t(this, g).textContent = e;
-        }
-      },
-      visible: {
-        type: Boolean,
-        default: !1,
-        observer: async (e) => {
-          var o;
-          (o = t(this, c)) == null || o.abort(), l(this, c, new AbortController()), e ? (t(this, N).call(this), t(this, a).className = this.updateContainerClasslist(), t(this, h).call(this, "show"), t(this, a).offsetWidth, t(this, a).classList.add("is-show"), t(this, a).addEventListener(
-            "transitionend",
-            () => {
-              t(this, h).call(this, "shown");
-            },
-            { once: !0, signal: t(this, c).signal }
-          )) : (t(this, T).call(this), t(this, a).classList.add("is-before-hide"), t(this, h).call(this, "hide"), t(this, a).addEventListener(
-            "transitionend",
-            () => {
-              t(this, a).className = this.updateContainerClasslist(), t(this, h).call(this, "hidden");
-            },
-            { once: !0, signal: t(this, c).signal }
-          ));
-        }
-      },
-      showClose: {
-        type: Boolean,
-        default: !1,
-        observer: (e) => {
-          t(this, a).className = this.updateContainerClasslist(), t(this, d).name = this["close-icon"];
-        }
-      },
-      closeIcon: {
-        type: String,
-        default: "xmark",
-        observer: (e) => {
-          this["show-close"] && (t(this, d).name = e);
-        }
-      },
-      placement: {
-        type: ["top-right", "top-left", "bottom-right", "bottom-left"],
-        default: "top-right",
-        observer: (e) => {
-          t(this, a).className = this.updateContainerClasslist();
-        }
+    super(...arguments), this.variant = "info", this.heading = "", this.visible = !1, this.message = "", this.showClose = !1, this.closeIcon = "xmark", this.placement = "top-right", this.zIndex = 0, this.icon = "", this.dangerouslyUseHTMLString = !1;
+  }
+  updateContainerClasslist() {
+    const t = r(
+      {
+        [this.variant]: !0,
+        [this.placement]: !0
       },
-      zIndex: {
-        type: Number,
-        default: 0,
-        observer: (e) => {
-          t(this, a).style.setProperty("--z-index", e);
-        }
+      {
+        visible: this.visible,
+        "show-close": this.showClose
       }
-    }));
-    n(this, h, (e, o) => {
-      this.emit(e, {
-        detail: o,
-        bubbles: !0,
-        composed: !0
-      });
-    });
-    C(this, "close", () => {
-      this.visible = !1, t(this, h).call(this, "close");
-    });
-    n(this, N, () => {
-      const e = document.querySelectorAll(
+    );
+    return this._container && (this._container.className = t), t;
+  }
+  html() {
+    return `
+      <div class="${this.updateContainerClasslist()}" part="container" role="alert" aria-live="polite">
+        <ea-icon class="${r.e("icon")}" name="${m[this.variant]}" part="icon"></ea-icon>
+        <div class="${r.e("content")}" part="content">
+          <header class="${r.e("header")}" part="header">
+            <h2 class="${r.e("title")}" part="title"> </h2>
+            <ea-icon class="${r.e("close-icon")}" name="xmark" part="close-icon" aria-label="close"></ea-icon>
+          </header>
+          <main class="${r.e("main")}" part="main"><slot></slot> </main>
+        </div>
+      </div>
+    `;
+  }
+  close() {
+    this.visible = !1, this.emit("ea-close");
+  }
+  /** 初始化通知位置，计算堆叠偏移 */
+  _initPosition() {
+    var l;
+    const t = document.querySelectorAll(
+      `ea-notification[placement="${this.placement}"]`
+    );
+    if (t.length <= 1) return;
+    const i = t[t.length - 2], e = i.style.getPropertyValue("--ea-notification-y"), s = (l = i.shadowRoot) == null ? void 0 : l.querySelector(
+      `.${r.b()}`
+    );
+    if (!s) return;
+    const o = s.getBoundingClientRect();
+    this.style.setProperty(
+      "--ea-notification-y",
+      `${Number(e.replace("px", "")) + o.height + 8}px`
+    );
+  }
+  /** 隐藏时调整后续通知位置 */
+  _handleHide() {
+    const t = [
+      ...document.querySelectorAll(
         `ea-notification[placement="${this.placement}"]`
+      )
+    ], i = t.findIndex((o) => o === this), e = t.slice(i + 1), s = this._container.getBoundingClientRect().height;
+    e.forEach((o) => {
+      const l = Number(
+        o.style.getPropertyValue("--ea-notification-y").replace("px", "")
       );
-      if (e.length <= 1) return;
-      const o = e[e.length - 2], p = o.style.getPropertyValue("--ea-notification-y"), u = o.shadowRoot.querySelector(".ea-notification").getBoundingClientRect();
-      this.style.setProperty(
+      o.style.setProperty(
         "--ea-notification-y",
-        `${Number(p.replace("px", "")) + u.height + 8}px`
+        `${l - s - 8}px`
       );
     });
-    n(this, T, () => {
-      const e = [
-        ...document.querySelectorAll(
-          `ea-notification[placement="${this.placement}"]`
-        )
-      ], o = e.findIndex((u) => u === this), p = e.slice(o + 1), w = t(this, a).getBoundingClientRect().height;
-      p.forEach((u, O) => {
-        const U = Number(
-          u.style.getPropertyValue("--ea-notification-y").replace("px", "")
-        );
-        u.style.setProperty(
-          "--ea-notification-y",
-          `${U - w - 8}px`
-        );
-      });
-    });
-    n(this, H, () => {
-      this.visible = !1;
-    });
-    this.stylesheet = P, this.$render();
-  }
-  // ------- dangerouslyUseHTMLString -------
-  // #region
-  get dangerouslyUseHTMLString() {
-    return t(this, f).dangerouslyUseHTMLString;
   }
-  set dangerouslyUseHTMLString(e) {
-    t(this, f).dangerouslyUseHTMLString = e;
+  _handleCloseIconClick() {
+    this.showClose && this.close();
   }
-  // #endregion
-  // ------- end -------
-  // ------- message -------
-  // #region
-  get message() {
-    return t(this, f).message;
+  $mount() {
+    this.updateContainerClasslist();
   }
-  set message(e) {
-    t(this, f).message = e, this.dangerouslyUseHTMLString ? t(this, m).innerHTML = e : t(this, m).innerText = e;
+  $beforeUnmount() {
+    var t;
+    (t = this._transitionAbortController) == null || t.abort();
   }
-  // #endregion
-  // ------- end -------
-  static get observedAttributes() {
-    return q.Array.toLowerCamelCase([
-      "visible",
-      "title",
+};
+a([
+  d(r.cb())
+], n.prototype, "_container", 2);
+a([
+  d(r.ce("icon"))
+], n.prototype, "_notificationIcon", 2);
+a([
+  d(r.ce("title"))
+], n.prototype, "_title", 2);
+a([
+  d(r.ce("close-icon"))
+], n.prototype, "_closeIcon", 2);
+a([
+  d(r.ce("main"))
+], n.prototype, "_main", 2);
+a([
+  h({
+    type: f(x),
+    default: "info",
+    observer(t) {
+      this._notificationIcon.setAttribute(
+        "name",
+        this.icon || m[t]
+      ), this.updateContainerClasslist();
+    }
+  })
+], n.prototype, "variant", 2);
+a([
+  h({
+    type: String,
+    default: "",
+    observer(t) {
+      this._title.textContent = t;
+    }
+  })
+], n.prototype, "heading", 2);
+a([
+  h({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      var i;
+      (i = this._transitionAbortController) == null || i.abort(), this._transitionAbortController = new AbortController(), t ? (this._initPosition(), this.updateContainerClasslist(), this.emit("ea-show"), this._container.offsetWidth, this._container.classList.add(r.s("is-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 }
+      ));
+    }
+  })
+], n.prototype, "visible", 2);
+a([
+  h({
+    type: String,
+    default: "",
+    observer(t) {
+      this.dangerouslyUseHTMLString ? this._main.innerHTML = b(t) : this._main.textContent = t;
+    }
+  })
+], n.prototype, "message", 2);
+a([
+  h({
+    type: Boolean,
+    default: !1,
+    observer(t) {
+      this.updateContainerClasslist(), t && this._closeIcon.setAttribute("name", this.closeIcon || "xmark");
+    }
+  })
+], n.prototype, "showClose", 2);
+a([
+  h({
+    type: String,
+    default: "xmark",
+    observer(t) {
+      this.showClose && this._closeIcon.setAttribute("name", t);
+    }
+  })
+], n.prototype, "closeIcon", 2);
+a([
+  h({
+    type: f(N),
+    default: "top-right",
+    observer() {
+      this.updateContainerClasslist();
+    }
+  })
+], n.prototype, "placement", 2);
+a([
+  h({
+    type: Number,
+    default: 0,
+    observer(t) {
+      this._container.style.setProperty("--z-index", String(t));
+    }
+  })
+], n.prototype, "zIndex", 2);
+a([
+  h({
+    type: String,
+    default: "",
+    observer(t) {
+      this._notificationIcon.setAttribute(
+        "name",
+        t || m[this.variant]
+      ), this.updateContainerClasslist();
+    }
+  })
+], n.prototype, "icon", 2);
+a([
+  g({
+    type: Boolean,
+    default: !1
+  })
+], n.prototype, "dangerouslyUseHTMLString", 2);
+a([
+  _("click", r.ce("close-icon"))
+], n.prototype, "_handleCloseIconClick", 1);
+n = a([
+  C(u, { styles: [v] })
+], n);
+class T {
+  constructor(i) {
+    this._includeTypes = [
+      "heading",
       "message",
-      "type",
-      "icon",
-      "duration",
       "placement",
+      "variant",
       "showClose",
+      "duration",
+      "closeIcon",
       "zIndex",
-      "closeIcon"
-    ]);
+      "icon",
+      "dangerouslyUseHTMLString"
+    ], this._defaultOptions = {
+      heading: "",
+      dangerouslyUseHTMLString: !1,
+      message: "",
+      icon: "",
+      variant: "info",
+      duration: 3e3,
+      placement: "top-right",
+      zIndex: 0,
+      showClose: !0,
+      closeIcon: "xmark",
+      appendTo: "body"
+    };
+    const e = Object.assign({}, this._defaultOptions, i), s = this._includeTypes.reduce(
+      (l, p) => (e[p] !== void 0 && (l[p] = e[p]), l),
+      {}
+    ), o = this._renderer(s);
+    this.instance = o, this._appendToHandler(o, e.appendTo), this._durationHandler(o, e.duration), this._hideHandler(o, e.onClose), o.visible = !0;
   }
-  /**
-   * 获取 classlist 列表
-   * @return {string} 属性值
-   */
-  updateContainerClasslist() {
-    return this.computedClasslist("ea-notification", {
-      "--visible": this.visible,
-      ["--" + this.type]: this.type,
-      "--show-close": this["show-close"],
-      ["--" + this.placement]: this.placement
-    });
+  _renderer(i) {
+    const e = document.createElement(
+      "ea-notification"
+    );
+    for (const s in i)
+      e[s] = i[s];
+    return e;
   }
-  $render() {
-    this.shadowRoot.innerHTML = `
-      <div class="ea-notification" part='container'>
-        <ea-icon class="ea-notification__icon" part="icon"></ea-icon>
-        <div class="ea-notification__content">
-          <header class="ea-notification__header" part='header'>
-            <h2 class="ea-notification__title" part="title"> </h2>
-            <ea-icon class="ea-notification__close-icon" name="xmark" part='close-icon'></ea-icon>
-          </header>
-          <main class="ea-notification__main" part='main'> </main>
-        </div>
-      </div>
-        `, l(this, a, this.shadowRoot.querySelector(".ea-notification")), l(this, M, this.shadowRoot.querySelector(".ea-notification__header")), l(this, y, this.shadowRoot.querySelector(
-      ".ea-notification__icon"
-    )), l(this, g, this.shadowRoot.querySelector(".ea-notification__title")), l(this, d, this.shadowRoot.querySelector(
-      ".ea-notification__close-icon"
-    )), l(this, m, this.shadowRoot.querySelector(".ea-notification__main"));
+  _appendToHandler(i, e) {
+    if (!e) {
+      document.body.appendChild(i);
+      return;
+    }
+    if (e instanceof HTMLElement)
+      e.appendChild(i);
+    else if (typeof e == "string") {
+      const s = document.querySelector(e);
+      s ? s.appendChild(i) : document.body.appendChild(i);
+    } else
+      console.warn(
+        `[EaNotification] TypeError: ${e} is not a valid element or selector.`
+      );
   }
-  connectedCallback() {
-    super.connectedCallback();
-    const e = new AbortController();
-    l(this, b, e), this["show-close"] && t(this, d).addEventListener("click", t(this, H), {
-      signal: e.signal
-    });
+  _durationHandler(i, e = 3e3) {
+    e <= 0 || I(() => {
+      i.visible = !1;
+    }, e);
   }
-  $beforeUnmounted() {
-    var e, o;
-    (e = t(this, c)) == null || e.abort(), (o = t(this, b)) == null || o.abort();
+  _hideHandler(i, e) {
+    i.addEventListener(
+      "ea-hidden",
+      (s) => {
+        e == null || e(s), i.remove();
+      },
+      { once: !0 }
+    );
+  }
+  close() {
+    this.instance.close();
   }
 }
-a = new WeakMap(), M = new WeakMap(), y = new WeakMap(), g = new WeakMap(), d = new WeakMap(), m = new WeakMap(), c = new WeakMap(), b = new WeakMap(), f = new WeakMap(), h = new WeakMap(), N = new WeakMap(), T = new WeakMap(), H = new WeakMap();
-window.customElements.get("ea-notification") || window.customElements.define("ea-notification", V);
-window.$notify = r;
+const c = (t) => new T(t);
+c.primary = (t) => c({
+  ...t,
+  variant: "primary"
+});
+c.success = (t) => c({
+  ...t,
+  variant: "success"
+});
+c.warning = (t) => c({
+  ...t,
+  variant: "warning"
+});
+c.info = (t) => c({
+  ...t,
+  variant: "info"
+});
+c.error = (t) => c({
+  ...t,
+  variant: "error"
+});
+window.$notify = c;
 export {
-  r as EaNotification,
-  V as EaNotificationElement
+  c as EaNotification,
+  n as EaNotificationElement
 };