@inkline/inkline/controllers/OverlayController.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 { unref } from "vue";
export const OverlayController = {
  instances: {},
  stack: [],
  zIndex: 1050,
  register(instance) {
    const name = unref(instance.name);
    if (name) {
      OverlayController.instances[name] = instance;
    }
  },
  unregister(instance) {
    const name = unref(instance.name);
    if (name) {
      OverlayController.instances[name] = null;
      delete OverlayController.instances[name];
    }
  },
  open(name) {
    if (typeof window === "undefined") {
      return;
    }
    OverlayController.stack.push(name);
    const element = unref(OverlayController.instances[name].elementRef);
    if (element) {
      element.style.zIndex = OverlayController.zIndex++;
    }
  },
  close(name) {
    if (typeof window === "undefined") {
      return;
    }
    OverlayController.stack.splice(OverlayController.stack.indexOf(name), 1);
  },
  getTopOverlay() {
    const topOverlayName = OverlayController.stack.slice(-1)[0] || "";
    return OverlayController.instances[topOverlayName];
  },
  onPressEscape() {
    const topOverlay = OverlayController.getTopOverlay();
    if (topOverlay && topOverlay.closeOnPressEscape) {
      topOverlay.hide();
    }
  }
};
export default OverlayController;