portable-dialog-v3/portable-dialog-v3.mjs

portable-dialog-v3是为了解决页面在使用弹窗时，维护弹窗数据及状态的代码可以单独抽离出来封装，防止页面弹窗过多时，代码维护困难。

import { createApp as y, h as b } from "vue";
const E = {
  top: "10vh",
  closeAnimation: !1,
  hiddenHeader: !1,
  title: "",
  fullScreen: !1,
  hiddenZoomIcon: !1,
  hiddenCloseIcon: !1,
  cancelCallback: () => {
  },
  okCallback: async () => !0
};
function N(g, C = {}, e = E) {
  let c = null, i = null, o = null, t = null, d = null, a = null, n = null, u = null;
  const l = document.createElement("div");
  l.classList.add("open-dialog-wrapper"), document.body.appendChild(l);
  const s = e.top || "10vh";
  if (l.style.top = s, l.style.left = "50%", l.style.transform = "translateX(-50%)", console.log("offsetTop", s), !e.closeAnimation) {
    const r = parseFloat(s), m = String(r).length, k = s.slice(m), v = `@keyframes portable-dialog-fade-in {
        0% {
          top: ${Number(r * 0.8).toFixed(3) + k};
          left: 50%;
          opacity: 0;
          transform: translateX(-50%);
        }
        100% {
          top: ${s};
          left: 50%;
          opacity: 1;
          transform: translateX(-50%);
        }
      }`;
    let f = document.createElement("style");
    f.setAttribute("type", "text/css"), f.innerText = v, document.getElementsByTagName("head")[0].appendChild(f);
  }
  e.hiddenHeader || (c = document.createElement("div"), c.classList.add("open-dialog-header"), l.appendChild(c), i = document.createElement("div"), i.classList.add("open-dialog-left-header"), c.appendChild(i), o = document.createElement("span"), o.classList.add("open-dialog--left-title"), o.innerText = e.title ? e.title : "", i.appendChild(o), t = document.createElement("div"), t.classList.add("open-dialog-right-header"), c.appendChild(t)), e.fullScreen ? l.classList.add("open-dialog-full-screen") : (t && !(e != null && e.hiddenZoomIcon) && (a = document.createElement("span"), a.classList.add("iconfont"), a.classList.add("icon-fullscreen-expand"), t.appendChild(a)), d = document.createElement("div"), d.classList.add("open-dialog-mask"), document.body.append(d)), t && !(e != null && e.hiddenCloseIcon) && (n = document.createElement("span"), n.classList.add("iconfont"), n.classList.add("icon-close"), t.appendChild(n));
  const p = () => {
    document.body.removeChild(l), u.unmount(), u = null, d && document.body.removeChild(d);
  }, L = () => {
    p(), e != null && e.cancelCallback && e.cancelCallback();
  };
  n && n.addEventListener("click", L), a && a.addEventListener("click", () => {
    l.classList.value.includes("open-dialog-full-screen") ? (a.classList.remove("icon-fullscreen-shrink"), a.classList.add("icon-fullscreen-expand"), l.classList.remove("open-dialog-full-screen")) : (l.classList.add("open-dialog-full-screen"), a.classList.remove("icon-fullscreen-expand"), a.classList.add("icon-fullscreen-shrink"));
  });
  const h = document.createElement("div");
  l.appendChild(h), u = y(b(g, Object.assign({
    onOk: async (r = {}) => {
      if (e != null && e.okCallback)
        try {
          await e.okCallback(r) && p();
        } catch (m) {
          console.error(m);
        }
    }
  }, C))), u.mount(h);
}
export {
  N as default
};