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

Hongluan Component Library for Vue 3

'use strict';

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

var vue = require('vue');
var lodashUnified = require('lodash-unified');
var core = require('@vueuse/core');
require('../../../utils/index.js');
require('../../../constants/index.js');
require('../../../hooks/index.js');
var index = require('../../../hooks/use-id/index.js');
var index$1 = require('../../../hooks/use-z-index/index.js');
var event = require('../../../constants/event.js');
var index$2 = require('../../../hooks/use-lockscreen/index.js');

const CLOSE_EVENT = "close";
const OPEN_EVENT = "open";
const CLOSED_EVENT = "closed";
const OPENED_EVENT = "opened";
const useDialog = (props, targetRef) => {
  let lastPosition = "";
  const titleId = index.useId();
  const bodyId = index.useId();
  const visible = vue.ref(false);
  const closed = vue.ref(false);
  const rendered = vue.ref(false);
  const { nextZIndex } = index$1.useZIndex();
  const zIndex = vue.ref(props.zIndex || nextZIndex());
  let cleanup;
  let stopOpenTimer = void 0;
  let stopCloseTimer = void 0;
  const animName = vue.computed(() => {
    let name = props.animationName;
    if (props.showAs === "drawer") {
      switch (props.placement) {
        case "left":
          name = "slideRightSide";
          break;
        case "right":
          name = "slideLeftSide";
          break;
        case "bottom":
          name = "slideTopSide";
          break;
        case "top":
          name = "slideBottomSide";
          break;
        case "fullscreen":
          name = "scale";
          break;
      }
    }
    return name;
  });
  const instance = vue.getCurrentInstance();
  const emit = instance.emit;
  function afterEnter() {
    emit(OPENED_EVENT);
  }
  function afterLeave() {
    emit(CLOSED_EVENT);
    emit(event.UPDATE_MODEL_EVENT, false);
    if (props.destroyOnClose) {
      rendered.value = false;
    }
    cleanup && cleanup();
  }
  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 onModalClick() {
    if (props.closeOnClickModal) {
      handleClose();
    }
  }
  function doOpen() {
    if (!core.isClient) {
      return;
    }
    visible.value = true;
  }
  function doClose() {
    visible.value = false;
  }
  function onOpenAutoFocus() {
    emit("openAutoFocus");
  }
  function onCloseAutoFocus() {
    emit("closeAutoFocus");
  }
  function onFocusoutPrevented(event) {
    var _a;
    if (((_a = event.detail) == null ? void 0 : _a.focusReason) === "pointer") {
      event.preventDefault();
    }
  }
  if (props.lockScroll) {
    cleanup = index$2.useLockscreen(visible, false);
  }
  function onCloseRequested() {
    if (props.closeOnPressEscape) {
      handleClose();
    }
  }
  vue.watch(() => props.modelValue, (val) => {
    if (val) {
      closed.value = false;
      open();
      rendered.value = true;
      zIndex.value = lodashUnified.isUndefined(props.zIndex) ? nextZIndex() : zIndex.value++;
      vue.nextTick(() => {
        emit(OPEN_EVENT);
        if (targetRef.value) {
          targetRef.value.scrollTop = 0;
        }
      });
    } else {
      if (visible.value) {
        close();
      }
    }
  });
  vue.watch(() => props.placement, (val) => {
    if (val === "fullscreen") {
      if (!targetRef.value)
        return;
      if (val) {
        lastPosition = targetRef.value.style.transform;
        targetRef.value.style.transform = "";
      } else {
        targetRef.value.style.transform = lastPosition;
      }
    }
  });
  vue.onMounted(() => {
    if (props.modelValue) {
      visible.value = true;
      rendered.value = true;
      open();
    }
  });
  return {
    afterEnter,
    afterLeave,
    beforeLeave,
    handleClose,
    onModalClick,
    close,
    doClose,
    onOpenAutoFocus,
    onCloseAutoFocus,
    onCloseRequested,
    onFocusoutPrevented,
    titleId,
    bodyId,
    closed,
    rendered,
    animName,
    visible,
    zIndex
  };
};

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