@inkline/inkline/plugins/toast.mjs

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.

import { createApp } from "vue";
import {
  defaultToastContainerId,
  toastService,
  InklineKey,
  InklineToastKey,
  toastEventBus
} from "@inkline/inkline/constants";
import { IToastContainer } from "@inkline/inkline/components/IToastContainer";
import { IconsPlugin } from "@inkline/inkline/plugins";
export const ToastPlugin = {
  install: (app, { inkline }) => {
    app.config.globalProperties.$toast = toastService;
    app.provide(InklineToastKey, toastService);
    if (typeof window === "undefined") {
      return;
    }
    const containerId = defaultToastContainerId;
    const containerDataAttribute = `data-${containerId}`;
    let container = document.querySelector(`#${containerId}`);
    if (!container) {
      container = document.createElement("div");
      container.id = containerId;
      document.body.appendChild(container);
    }
    if (!container.hasAttribute(containerDataAttribute)) {
      const toastApp = createApp(IToastContainer, {
        eventBus: toastEventBus
      });
      toastApp.provide(InklineKey, inkline);
      toastApp.use(IconsPlugin);
      container.setAttribute(containerDataAttribute, "");
      toastApp.mount(container);
    }
  }
};