@determaer/vue-use-modal/dist/vue3-use-modal.es.js

This library was created to simplify utilization process of modal windows in Vue applications with use of async components.

(function(){"use strict";try{if(typeof document<"u"){var e=document.createElement("style");e.nonce=document.head.querySelector("meta[property=csp-nonce]")?.content,e.appendChild(document.createTextNode(".use-modal-wrapper-backdrop{position:fixed;inset:0;background-color:#0000004d;display:flex;justify-content:center;align-items:center;z-index:1000}.use-modal-wrapper-frame{background:#fff;box-shadow:2px 2px 10px 1px;max-width:300px;max-height:300px;overflow-x:auto}")),document.head.appendChild(e)}}catch(o){console.error("vite-plugin-css-injected-by-js",o)}})();
import { defineComponent as b, createElementBlock as k, openBlock as M, createElementVNode as g, renderSlot as v, ref as E, h as f, defineAsyncComponent as w, createApp as y } from "vue";
const H = { class: "use-modal-wrapper-frame" }, j = /* @__PURE__ */ b({
  __name: "Modal",
  emits: ["close"],
  setup(l, { emit: o }) {
    const t = o, n = (e) => {
      e.target instanceof HTMLElement && e.target.classList.contains("use-modal-wrapper-backdrop") && t("close");
    };
    return (e, d) => (M(), k("div", {
      class: "use-modal-wrapper-backdrop",
      onClick: n
    }, [
      g("div", H, [
        v(e.$slots, "default")
      ])
    ]));
  }
});
function D({
  component: l,
  loadingComponent: o,
  errorComponent: t,
  timeout: n,
  attrs: e,
  Modal: d,
  modalAttrs: h
}) {
  return new Promise((a) => {
    const c = document.createElement("div");
    document.body.appendChild(c);
    const s = E(/* @__PURE__ */ Object.create({})), r = () => {
      i.unmount(), document.body.removeChild(c), a(!1);
    }, m = () => {
      Object.keys(s.value).length > 0 && a(s.value), a(!0), r();
    }, _ = (u) => {
      Object.keys(u).forEach((p) => {
        s.value[p] = u[p];
      });
    }, C = b({
      render() {
        return f(
          d,
          {
            ...h,
            onClose: r,
            onSubmit: m
          },
          {
            default: () => f(
              w({
                loader: () => l,
                loadingComponent: o,
                errorComponent: t,
                timeout: n
              }),
              {
                ...e,
                onChange: _,
                onSubmit: m,
                onClose: r
              }
            )
          }
        );
      }
    }), i = y(C);
    i.mount(c);
  });
}
export {
  j as Modal,
  D as useModal
};