hongluan-business-ui/es/components/modeless-dialog/src/manager.mjs

Hongluan Business Component Library for Vue 3

import { createVNode, render, isReactive, watch, isVNode } from 'vue';
import isServer from '../../../utils/isServer.mjs';
import { useZIndex, usePanelProps } from 'hongluan-ui';
import ModelessDialog from './modeless-dialog.mjs';

const ModelessDialogInstances = {};
const ModelessDialogListeners = [];
let seed = 1;
const { nextZIndex } = useZIndex();
function show(options = {}) {
  if (isServer)
    return;
  if (ModelessDialogInstances[options.id])
    return ModelessDialogInstances[options.id];
  const id = options.id || `modeless_dialog_${seed++}`;
  const props = {
    zIndex: nextZIndex(),
    ...options,
    id,
    modelValue: true
  };
  const container = document.createElement("div");
  const slots = {};
  if (props.header) {
    slots.header = () => props.header;
  }
  if (props.body) {
    slots.default = () => props.body;
  }
  if (props.footer) {
    slots.footer = () => props.footer;
  }
  const vm = createVNode(ModelessDialog, props, Object.keys(slots).length ? slots : null);
  vm.props.onDestroy = () => {
    ModelessDialogInstances[id] = null;
    delete ModelessDialogInstances[id];
  };
  render(vm, container);
  const proxy = vm.component.proxy;
  if (isReactive(options)) {
    watch(options, (newVal) => {
      Object.assign(vm.component.props, options);
      if (isVNode(newVal.header)) {
        vm.component.slots.header = () => [newVal.header];
      }
      if (isVNode(newVal.body)) {
        vm.component.slots.default = () => [newVal.body];
      }
      if (isVNode(newVal.footer)) {
        vm.component.slots.footer = () => [newVal.footer];
      }
      const {
        panelStyle,
        panelClass,
        headerClass: panelHeaderClass,
        bodyClass: panelBodyClass,
        footerClass: panelFooterClass
      } = usePanelProps(newVal);
      Object.assign(proxy, { panelClass, panelStyle, panelHeaderClass, panelBodyClass, panelFooterClass });
      vm.component.proxy.$forceUpdate();
    });
  }
  const returnVal = {
    close: () => {
      proxy.visible = false;
      proxy.$emit("destroy");
    },
    toggleShow: (shown) => {
      proxy.shown = shown != null ? shown : !proxy.shown;
    },
    toggleCollapse: (collapsable) => {
      proxy.collapseDialog(collapsable);
    },
    toggleMaximize: (maximizable) => {
      proxy.maximizeDialog(maximizable);
    },
    isShown: () => {
      return proxy.shown;
    },
    isClosed: () => {
      return !!ModelessDialogInstances[id];
    },
    isCollapsed: () => {
      return proxy.collapse;
    },
    isMaximized: () => {
      return proxy.maximize;
    },
    title: props.title,
    snapshot: props.snapshot
  };
  ModelessDialogInstances[id] = returnVal;
  return returnVal;
}
function callAllDialogMethods(name, ...args) {
  for (const vm of Object.values(ModelessDialogInstances)) {
    vm[name](...args);
  }
}
function closeAll() {
  callAllDialogMethods("close");
}
function showAll() {
  callAllDialogMethods("toggleShow", true);
}
function hideAll() {
  callAllDialogMethods("toggleShow", false);
}
function collapseAll() {
  callAllDialogMethods("toggleCollapse", true);
}
function expandAll() {
  callAllDialogMethods("toggleCollapse", false);
}
function get(id) {
  return ModelessDialogInstances[id];
}
function has(id) {
  return !!ModelessDialogInstances[id];
}
function addEventListener(listener) {
  !ModelessDialogListeners.includes(listener) && ModelessDialogListeners.push(listener);
  return () => {
    ModelessDialogListeners.splice(ModelessDialogListeners.indexOf(listener), 1);
  };
}
function triggerEvent(name, id) {
  id && ModelessDialogListeners.forEach((listener) => {
    if (listener[name]) {
      listener[name](id);
    }
  });
}
const ModelessDialogManager = {
  get,
  has,
  show,
  closeAll,
  showAll,
  hideAll,
  collapseAll,
  expandAll,
  addEventListener,
  triggerEvent
};

export { ModelessDialogManager };
//# sourceMappingURL=manager.mjs.map