vue3-use-modal/dist/use-modal.es.js

vue3-use-modal is vue3(vue-next) plugin that provide easy use of modal. It is not only component based but also lets using modal either asynchronous or synchronous behavior.

var __defProp = Object.defineProperty;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
  for (var prop in b || (b = {}))
    if (__hasOwnProp.call(b, prop))
      __defNormalProp(a, prop, b[prop]);
  if (__getOwnPropSymbols)
    for (var prop of __getOwnPropSymbols(b)) {
      if (__propIsEnum.call(b, prop))
        __defNormalProp(a, prop, b[prop]);
    }
  return a;
};
import { defineComponent, ref, openBlock, createElementBlock, Fragment, renderList, createBlock, resolveDynamicComponent, mergeProps, markRaw, createApp } from "vue";
const err = (msg) => {
  throw new Error(`useModal Error: ${msg}`);
};
const modalKey = Symbol("modal_key");
class ModalProxy {
  constructor(key) {
    if (key !== modalKey)
      err(`Invalid construct key ${key}`);
    return this;
  }
  static getInstance() {
    if (this.modalProxy)
      return this.modalProxy;
    else {
      this.modalProxy = new ModalProxy(modalKey);
      return this.modalProxy;
    }
  }
  setModalExposed(exposed) {
    this.modalExposed = exposed;
    return this;
  }
  addModal(params) {
    var _a;
    if (typeof window === "undefined")
      return;
    return (_a = this.modalExposed) == null ? void 0 : _a.addModal(params);
  }
  closeModal(key) {
    var _a;
    if (typeof window === "undefined")
      return;
    return (_a = this.modalExposed) == null ? void 0 : _a.closeModal({ key });
  }
}
const useModal = () => ModalProxy.getInstance();
const _sfc_main = /* @__PURE__ */ defineComponent({
  setup(__props, { expose }) {
    const id = ref(0);
    const modals = ref([]);
    const addModal = ({ key, component, props = {} }) => {
      if (!component)
        err("Invalid component was passed.");
      return new Promise((resolve, reject) => {
        modals.value.push({
          key,
          id: id.value++,
          component: markRaw(component),
          props,
          resolve,
          reject
        });
      });
    };
    const closeModal = ({ id: id2, key }) => {
      if (key)
        modals.value = modals.value.filter(({ key: _key }) => key !== _key);
      else
        modals.value = modals.value.filter(({ id: _id }) => id2 !== _id);
    };
    const onResolve = (value, id2, resolve) => {
      resolve(value);
      closeModal({ id: id2 });
    };
    const onReject = (reason, id2, reject) => {
      reject(reason);
      closeModal({ id: id2 });
    };
    expose({
      addModal,
      closeModal
    });
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", null, [
        (openBlock(true), createElementBlock(Fragment, null, renderList(modals.value, (modal) => {
          return openBlock(), createBlock(resolveDynamicComponent(modal.component), mergeProps({
            key: modal.id
          }, modal.props, {
            onResolve: (value) => onResolve(value, modal.id, modal.resolve),
            onReject: (value) => onReject(value, modal.id, modal.reject),
            onClose: () => closeModal({ id: modal.id })
          }), null, 16, ["onResolve", "onReject", "onClose"]);
        }), 128))
      ]);
    };
  }
});
const createModalEl = () => {
  if (!document)
    err("No document.");
  const modalEl = document.createElement("div");
  modalEl.setAttribute("id", "modal");
  document.body.prepend(modalEl);
  return modalEl;
};
var ModalPlugin = {
  install(app) {
    const modalEl = createModalEl();
    const modalContainer = createApp(_sfc_main);
    const modalProxy = ModalProxy.getInstance();
    const exposed = modalContainer.mount(modalEl);
    modalProxy.setModalExposed(exposed);
    app.config.globalProperties.$modal = modalProxy;
    modalContainer.config.globalProperties = __spreadValues(__spreadValues({}, modalContainer.config.globalProperties), app.config.globalProperties);
  }
};
export { ModalPlugin, useModal };