easy-component-ui 3.0.14 → 4.0.2

package/dist/components/ea-message.js

@@ -0,0 +1,289 @@
+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;
+};
+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(...arguments), this.variant = f, this.visible = !1, this.message = "", this.showClose = !1, this.placement = "top", this.icon = "", this.offset = 0, this.dangerouslyUseHTMLString = !1;
+  }
+  /** 更新容器类名 */
+  updateContainerClasslist() {
+    const e = r(
+      {
+        [this.variant]: !0,
+        [this.placement]: !0
+      },
+      {
+        visible: this.visible,
+        "show-close": this.showClose
+      }
+    );
+    return this._container && (this._container.className = e), e;
+  }
+  /** 渲染模板 */
+  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>
+    `;
+  }
+  /** 关闭消息（公共方法） */
+  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`
+    );
+  }
+  /** 隐藏消息时调整后续消息位置 */
+  _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`);
+    });
+  }
+  _handleCloseIconClick() {
+    this.showClose && this.close();
+  }
+  $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) {
+    this._includeTypes = [
+      "dangerouslyUseHTMLString",
+      "message",
+      "placement",
+      "variant",
+      "showClose",
+      "duration",
+      "offset",
+      "icon"
+    ];
+    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 }
+    );
+  }
+}
+const d = (e) => {
+  new h(e);
+};
+d.primary = (e) => new h({
+  message: e,
+  variant: "primary"
+});
+d.success = (e) => new h({
+  message: e,
+  variant: "success"
+});
+d.warning = (e) => new h({
+  message: e,
+  variant: "warning"
+});
+d.info = (e) => new h({
+  message: e,
+  variant: "info"
+});
+d.danger = (e) => new h({
+  message: e,
+  variant: "danger"
+});
+d.error = (e) => new h({
+  message: e,
+  variant: "danger"
+});
+window.$message = d;
+export {
+  d as EaMessage,
+  a as EaMessageElement
+};

package/dist/components/ea-notification.js

@@ -0,0 +1,331 @@
+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;
+};
+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(...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
+      },
+      {
+        visible: this.visible,
+        "show-close": this.showClose
+      }
+    );
+    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", "")
+      );
+      o.style.setProperty(
+        "--ea-notification-y",
+        `${l - s - 8}px`
+      );
+    });
+  }
+  _handleCloseIconClick() {
+    this.showClose && this.close();
+  }
+  $mount() {
+    this.updateContainerClasslist();
+  }
+  $beforeUnmount() {
+    var t;
+    (t = this._transitionAbortController) == null || t.abort();
+  }
+};
+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",
+      "placement",
+      "variant",
+      "showClose",
+      "duration",
+      "closeIcon",
+      "zIndex",
+      "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;
+  }
+  _renderer(i) {
+    const e = document.createElement(
+      "ea-notification"
+    );
+    for (const s in i)
+      e[s] = i[s];
+    return e;
+  }
+  _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.`
+      );
+  }
+  _durationHandler(i, e = 3e3) {
+    e <= 0 || I(() => {
+      i.visible = !1;
+    }, e);
+  }
+  _hideHandler(i, e) {
+    i.addEventListener(
+      "ea-hidden",
+      (s) => {
+        e == null || e(s), i.remove();
+      },
+      { once: !0 }
+    );
+  }
+  close() {
+    this.instance.close();
+  }
+}
+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 {
+  c as EaNotification,
+  n as EaNotificationElement
+};