hongluan-business-ui/lib/components/modeless-dialog/src/use-modeless-dialog.js

Hongluan Business Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var hongluanUi = require('hongluan-ui');
var html2canvas = require('html2canvas');
var core = require('@vueuse/core');
var isServer = require('../../../utils/isServer.js');
var useRestoreActive = require('../../../utils/use-restore-active.js');
var manager = require('./manager.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var html2canvas__default = /*#__PURE__*/_interopDefaultLegacy(html2canvas);

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 } = hongluanUi.useZIndex();
  const visible = vue.ref(false);
  const shown = vue.ref(true);
  const closed = vue.ref(false);
  const maximize = vue.ref(false);
  const collapse = vue.ref(false);
  const zIndex = vue.ref(props.zIndex || nextZIndex());
  const innerClass = vue.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 } = vue.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 } = core.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 } = core.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["default"]) {
      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__default["default"](targetRef.value).then((canvas) => {
        manager.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);
      manager.ModelessDialogManager.triggerEvent(COLLAPSE_EVENT, props.id);
    });
  }
  function handleMaximize() {
    if (props.showMaximize) {
      maximizeDialog();
    }
  }
  function maximizeDialog() {
    maximize.value = !maximize.value;
    emit(MAX_EVENT, collapse.value);
  }
  useRestoreActive.useRestoreActive(visible);
  vue.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();
      }
    }
  });
  vue.onMounted(() => {
    if (props.modelValue) {
      visible.value = true;
      open();
    }
  });
  return {
    afterEnter,
    afterLeave,
    beforeLeave,
    handleClose,
    handleCollapse,
    collapseDialog,
    handleMaximize,
    maximizeDialog,
    closed,
    shown,
    visible,
    collapse,
    maximize,
    zIndex,
    innerClass
  };
};

exports.CLOSED_EVENT = CLOSED_EVENT;
exports.CLOSE_EVENT = CLOSE_EVENT;
exports.COLLAPSE_EVENT = COLLAPSE_EVENT;
exports.MAX_EVENT = MAX_EVENT;
exports.OPENED_EVENT = OPENED_EVENT;
exports.OPEN_EVENT = OPEN_EVENT;
exports.UPDATE_MODEL_EVENT = UPDATE_MODEL_EVENT;
exports.useDialog = useDialog;
//# sourceMappingURL=use-modeless-dialog.js.map