@inkline/inkline/plugins/modal.js

Inkline is the intuitive UI Components library that gives you a developer-friendly foundation for building high-quality, accessible, and customizable Vue.js 3 Design Systems.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ModalPlugin = void 0;
var _vue = require("vue");
var _constants = require("@inkline/inkline/constants");
var _IModalContainer = require("@inkline/inkline/components/IModalContainer");
var _icons = require("@inkline/inkline/plugins/icons");
const ModalPlugin = exports.ModalPlugin = {
  install: (app, {
    inkline
  }) => {
    app.config.globalProperties.$modal = _constants.modalService;
    app.provide(_constants.InklineModalKey, _constants.modalService);
    if (typeof window === "undefined") {
      return;
    }
    const containerId = _constants.defaultModalContainerId;
    const containerDataAttrbiute = `data-${containerId}`;
    let container = document.querySelector(`#${containerId}`);
    if (!container) {
      container = document.createElement("div");
      container.id = containerId;
      document.body.appendChild(container);
    }
    if (!container.hasAttribute(containerDataAttrbiute)) {
      const modalApp = (0, _vue.createApp)(_IModalContainer.IModalContainer, {
        eventBus: _constants.modalEventBus
      });
      modalApp.provide(_constants.InklineKey, inkline);
      modalApp.use(_icons.IconsPlugin);
      container.setAttribute(containerDataAttrbiute, "");
      modalApp.mount(container);
    }
  }
};