@extclp/vexip-ui/es/components/notice/index.mjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

var C = Object.defineProperty;
var R = (c, e, t) => e in c ? C(c, e, { enumerable: !0, configurable: !0, writable: !0, value: t }) : c[e] = t;
var s = (c, e, t) => R(c, typeof e != "symbol" ? e + "" : e, t);
import { render as y, createApp as x, createVNode as I, markRaw as N } from "vue";
import "./notice.vue.mjs";
import { unrefElement as T, proxyExposed as k } from "@vexip-ui/hooks";
import { toNumber as L, isNull as j, destroyObject as F, isClient as h, noop as O, isObject as $ } from "@vexip-ui/utils";
import E from "./notice.vue2.mjs";
const A = [
  "top-right",
  "top-left",
  "bottom-right",
  "bottom-left"
];
let D = 1;
function P() {
  return `notice-${D++}`;
}
class p {
  constructor(e = {}) {
    s(this, "name");
    s(this, "defaults");
    s(this, "open");
    s(this, "primary");
    s(this, "info");
    s(this, "success");
    s(this, "warning");
    s(this, "error");
    s(this, "_mountedApp");
    s(this, "_instance");
    s(this, "_innerApp");
    s(this, "_container");
    s(this, "_wrapper");
    s(this, "_mountedEl");
    s(this, "_installed");
    s(this, "_configRecord");
    e = {
      ...e,
      marker: !!e.marker,
      duration: e.duration ? L(e.duration) : 4e3
    }, this._mountedApp = null, this._instance = null, this._innerApp = null, this._container = null, this._wrapper = null, this._mountedEl = null, this._installed = !1, this._configRecord = null, this.name = "Notice", this.defaults = {}, this.config(e), this.open = (t, n, i) => this._open(null, t, n, i), this.primary = (t, n, i) => this._open("primary", t, n, i), this.info = (t, n, i) => this._open("info", t, n, i), this.success = (t, n, i) => this._open("success", t, n, i), this.warning = (t, n, i) => this._open("warning", t, n, i), this.error = (t, n, i) => this._open("error", t, n, i);
  }
  judge(e, t, n, i) {
    e ? this.success(t, i) : this.error(n, i);
  }
  close(e) {
    var t;
    j(e) ? this.clear() : (t = this._getInstance()) == null || t.remove(e);
  }
  config({ placement: e, startOffset: t, itemGap: n, ...i }) {
    if (this._configRecord = { placement: e, startOffset: t, itemGap: n }, this.defaults = { ...this.defaults, ...i }, this._installed) {
      const o = this._getInstance();
      o && (e && o.config({
        placement: A.includes(e) ? e : A[0]
      }), o.config({ startOffset: t, itemGap: n }));
    }
  }
  clone() {
    const e = new p(this.defaults);
    return e._mountedApp = this._mountedApp, e._configRecord = this._configRecord, e._installed = this._installed, e;
  }
  clear() {
    var e;
    (e = this._getInstance()) == null || e.clear();
  }
  destroy() {
    var e, t;
    this._mountedEl && ((e = this._wrapper) == null || e.removeChild(this._mountedEl)), (t = this._innerApp) == null || t.unmount(), this._container && y(null, this._container), F(this);
  }
  isDestroyed() {
    return !1;
  }
  install(e, t = {}) {
    const { property: n, ...i } = t;
    this._mountedApp = e, this._installed = !0, this.config({ ...this._configRecord, ...i }), (n || !e.config.globalProperties.$notice) && (e.config.globalProperties[n || "$notice"] = this);
  }
  transferTo(e) {
    if (!h) return;
    const t = T(e);
    t && (this._wrapper = t, this._instance ? this._mountedEl && this._wrapper.appendChild(this._mountedEl) : this._getInstance());
  }
  _getInstance() {
    if (!this._instance && h) {
      if (!this._mountedApp)
        console.warn("[vexip-ui:Notice]: App missing, the plugin maybe not installed."), this._container = document.createElement("div"), this._innerApp = x(E), this._instance = this._innerApp.mount(this._container);
      else {
        const e = I(E, null, null);
        this._container = document.createElement("div"), e.appContext = this._mountedApp._context, y(e, this._container), this._instance = k(e);
      }
      this._mountedEl = this._container.firstElementChild, (this._wrapper || document.body).appendChild(this._mountedEl);
    }
    return this._instance;
  }
  _open(e, t, n, i) {
    if (!h)
      return O;
    let o;
    $(t) ? o = t : typeof n == "number" ? o = { title: t, duration: n } : n ? o = { title: t, content: n, duration: i } : o = { title: t, duration: i };
    const u = o.key ?? P(), a = this._getInstance();
    let l;
    const _ = o.onClose, v = () => {
      if (clearTimeout(l), typeof _ == "function")
        return _();
    }, f = o.onEnter, w = () => {
      if (o.liveOnEnter && clearTimeout(l), typeof f == "function")
        return f();
    }, d = o.onLeave, b = () => {
      if (o.liveOnEnter && (clearTimeout(l), m()), typeof d == "function")
        return d();
    }, r = {
      ...this.defaults,
      ...o,
      key: u,
      type: e ?? o.type,
      onClose: v,
      onEnter: w,
      onLeave: b
    };
    r.icon && typeof r.icon != "function" && (r.icon = N(r.icon)), a.add(r), m();
    function m() {
      const g = typeof r.duration == "number" ? r.duration : 4e3;
      g >= 500 && (l = setTimeout(() => {
        a.remove(u);
      }, g));
    }
    return () => {
      clearTimeout(l), a.remove(u);
    };
  }
}
const H = new p();
export {
  H as Notice,
  p as NoticeManager
};
//# sourceMappingURL=index.mjs.map