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

Hongluan Business Component Library for Vue 3

import { ref, computed, getCurrentInstance, watch, onMounted } from 'vue';
import { useZIndex } from 'hongluan-ui';
import html2canvas from 'html2canvas';
import { useTimeoutFn } from '@vueuse/core';
import isServer from '../../../utils/isServer.mjs';
import { useRestoreActive } from '../../../utils/use-restore-active.mjs';
import { ModelessDialogManager } from './manager.mjs';

const CLOSE_EVENT = "close";
const OPEN_EVENT = "open";
const CLOSED_EVENT = "closed";
const OPENED_EVENT = "opened";
const COLLAPSE_EVENT = "collapse";
const MAX_EVENT = "maximize";
const UPDATE_MODEL_EVENT = "update:modelValue";
const useDialog = (props, targetRef) => {
  const { nextZIndex } = useZIndex();
  const visible = ref(false);
  const shown = ref(true);
  const closed = ref(false);
  const maximize = ref(false);
  const collapse = ref(false);
  const zIndex = ref(props.zIndex || nextZIndex());
  const innerClass = computed(() => {
    const clazz = {};
    if (maximize.value) {
      clazz.fullscreen = maximize.value;
    }
    if (collapse.value) {
      clazz.collapsed = collapse.value;
    }
    return clazz;
  });
  let stopOpenTimer = void 0;
  let stopCloseTimer = void 0;
  const { emit } = getCurrentInstance();
  function afterEnter() {
    emit(OPENED_EVENT);
  }
  function afterLeave() {
    emit(CLOSED_EVENT);
    emit(UPDATE_MODEL_EVENT, false);
  }
  function beforeLeave() {
    emit(CLOSE_EVENT);
  }
  function open() {
    stopCloseTimer == null ? void 0 : stopCloseTimer();
    stopOpenTimer == null ? void 0 : stopOpenTimer();
    if (props.openDelay && props.openDelay > 0) {
      ({ stop: stopOpenTimer } = useTimeoutFn(() => doOpen(), props.openDelay));
    } else {
      doOpen();
    }
  }
  function close() {
    stopOpenTimer == null ? void 0 : stopOpenTimer();
    stopCloseTimer == null ? void 0 : stopCloseTimer();
    if (props.closeDelay && props.closeDelay > 0) {
      ({ stop: stopCloseTimer } = useTimeoutFn(() => doClose(), props.closeDelay));
    } else {
      doClose();
    }
  }
  function hide(shouldCancel) {
    if (shouldCancel)
      return;
    closed.value = true;
    visible.value = false;
  }
  function handleClose() {
    if (props.beforeClose) {
      props.beforeClose(hide);
    } else {
      close();
    }
  }
  function doOpen() {
    if (isServer) {
      return;
    }
    visible.value = true;
  }
  function doClose() {
    visible.value = false;
    emit("destroy");
  }
  function handleCollapse() {
    if (props.showCollapse) {
      collapseDialog();
    }
  }
  function collapseDialog(collapsable) {
    let p;
    if (props.useDock && props.snapshot === true) {
      p = html2canvas(targetRef.value).then((canvas) => {
        ModelessDialogManager.get(props.id).snapshot = { type: "image", url: canvas.toDataURL("image/png") };
      });
    } else {
      p = Promise.resolve();
    }
    p.finally(() => {
      if (props.useDock) {
        shown.value = !shown.value;
      } else {
        collapse.value = collapsable != null ? collapsable : !collapse.value;
      }
      emit(COLLAPSE_EVENT, props.useDock ? shown.value : collapse.value);
      ModelessDialogManager.triggerEvent(COLLAPSE_EVENT, props.id);
    });
  }
  function handleMaximize() {
    if (props.showMaximize) {
      maximizeDialog();
    }
  }
  function maximizeDialog() {
    maximize.value = !maximize.value;
    emit(MAX_EVENT, collapse.value);
  }
  useRestoreActive(visible);
  watch(() => props.modelValue, (val) => {
    if (val) {
      closed.value = false;
      open();
      emit(OPEN_EVENT);
      zIndex.value = props.zIndex ? Number(zIndex.value) + 1 : nextZIndex();
    } else {
      if (visible.value) {
        close();
      }
    }
  });
  onMounted(() => {
    if (props.modelValue) {
      visible.value = true;
      open();
    }
  });
  return {
    afterEnter,
    afterLeave,
    beforeLeave,
    handleClose,
    handleCollapse,
    collapseDialog,
    handleMaximize,
    maximizeDialog,
    closed,
    shown,
    visible,
    collapse,
    maximize,
    zIndex,
    innerClass
  };
};

export { CLOSED_EVENT, CLOSE_EVENT, COLLAPSE_EVENT, MAX_EVENT, OPENED_EVENT, OPEN_EVENT, UPDATE_MODEL_EVENT, useDialog };
//# sourceMappingURL=use-modeless-dialog.mjs.map