vuux/dist/es/Notification/src/service.mjs

Vue3 Nuxt3 Nuxt4 组件库

import { Utils as f } from "@vuux/utils";
class i {
  static list = [];
  /**
   * 创建通知
   */
  static create(e) {
    const { title: s, text: t, color: o = "var(--app-theme)", duration: a = 3e3, position: l = "top-right", type: v = "info", showProgress: u = !0, showClose: y = !0 } = e, n = document.createElement("div");
    n.classList.add("app-notification", l), n.style.background = o;
    const m = document.createElement("div");
    m.classList.add("notification-data");
    const r = document.createElement("div");
    if (r.classList.add("notification-info"), s) {
      const d = document.createElement("div");
      d.classList.add("is-title"), d.textContent = s, r.appendChild(d);
    }
    if (t) {
      const d = document.createElement("div");
      d.classList.add("is-text"), d.textContent = t, r.appendChild(d);
    }
    let c = null;
    y && (c = document.createElement("div"), c.classList.add("notification-close"), c.textContent = "✕", c.addEventListener("click", () => i.remove(n)));
    let p = null;
    return u && (p = document.createElement("div"), p.classList.add("notification-progress")), m.appendChild(r), c && m.appendChild(c), n.appendChild(m), p && n.appendChild(p), document.body.appendChild(n), i.list.push(n), i.reflow(l), i.autoClose(n, a, p), n;
  }
  /**
   * 自动关闭通知
   */
  static async autoClose(e, s, t) {
    t && (t.style.width = "100%", t.style.transition = "none", requestAnimationFrame(() => {
      t.style.transition = `width ${s}ms linear`, t.style.width = "0%";
    })), await f.wait(s), e.classList.add("is-hide"), await f.wait(300), i.remove(e);
  }
  /**
   * 移除通知
   */
  static remove(e) {
    const s = i.list.indexOf(e);
    s >= 0 && (i.list.splice(s, 1), document.body.removeChild(e));
    const t = Array.from(e.classList).find((o) => ["top-left", "top-right", "bottom-left", "bottom-right"].includes(o));
    t && i.reflow(t);
  }
  /**
   * 重排相同位置的通知
   */
  static reflow(e) {
    const s = i.list.filter((a) => a.classList.contains(e)), t = e.startsWith("top");
    let o = 10;
    for (let a = 0; a < s.length; a++) {
      const l = s[a];
      t ? (l.style.top = `${o}px`, l.style.bottom = "") : (l.style.bottom = `${o}px`, l.style.top = ""), o += l.offsetHeight + 10;
    }
  }
}
const x = (h) => i.create(h);
export {
  x as default
};