Vue showModal util

showModal.js

import Vue from 'vue';

export const showModal = function(comp, props = {}) {
  let resolve, $el;
  const modalContainer = new Vue({
    render(h) {
      return h(comp, {
        props: {
          ...props,
          handleFinish,
          handleClose,
        },
      });
    },
  });
  function removeElement() {
    if(!$el) return;
    document.body.removeChild($el);
    modalContainer.$destroy();
    $el = null;
  }
  function handleFinish(data = null) {
    removeElement();
    resolve({ ok: true, data });
  }
  function handleClose() {
    removeElement();
    resolve({ ok: false });
  }
  modalContainer.$mount();
  $el = modalContainer.$el;
  document.body.appendChild($el);
  const promise = new Promise(r => resolve = r);
  promise.dismiss = handleClose;
  return promise;
};

export default showModal;