@vuesax-alpha/nightly/lib/components/dialog/src/composables/use-dialog.js

A Component Library for Vue 3

'use strict';

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

var vue = require('vue');
var core = require('@vueuse/core');
require('../../../../hooks/index.js');
require('../../../../constants/index.js');
require('../../../../utils/index.js');
var index = require('../../../../hooks/use-namespace/index.js');
var index$1 = require('../../../../hooks/use-z-index/index.js');
var index$2 = require('../../../../hooks/use-base-component/index.js');
var index$3 = require('../../../../hooks/use-common-props/index.js');
var event = require('../../../../constants/event.js');
var index$4 = require('../../../../hooks/use-lockscreen/index.js');
var color = require('../../../../utils/color.js');

const useDialog = (props, emit) => {
  const rebound = vue.ref(false);
  const visible = vue.ref(false);
  const closed = vue.ref(false);
  const ns = index.useNamespace("dialog");
  const { nextZIndex } = index$1.useZIndex();
  const vsBaseClasses = index$2.useVuesaxBaseComponent(index$3.useColor());
  const zIndex = vue.ref(nextZIndex());
  const afterEnter = () => {
    emit("opened");
  };
  const beforeLeave = () => {
    emit("close");
  };
  const afterLeave = () => {
    emit("closed");
    emit(event.UPDATE_MODEL_EVENT, false);
  };
  const doOpen = () => {
    if (!core.isClient)
      return;
    visible.value = true;
  };
  const doClose = () => {
    visible.value = false;
  };
  const open = () => {
    doOpen();
  };
  const close = () => {
    const hide = (shouldCancel) => {
      if (shouldCancel)
        return;
      closed.value = true;
      visible.value = false;
    };
    if (props.beforeClose) {
      props.beforeClose(hide);
    } else {
      doClose();
    }
  };
  const handleClose = () => {
    if (props.preventClose) {
      rebound.value = true;
      core.useTimeoutFn(() => rebound.value = false, 300);
      return;
    }
    close();
  };
  if (props.lockScroll) {
    index$4.useLockscreen(visible);
  }
  vue.watch(
    () => props.modelValue,
    (val) => {
      if (val) {
        closed.value = false;
        rebound.value = true;
        open();
        zIndex.value = nextZIndex();
        if (props.lockScroll) {
          document.body.style.overflow = "hidden";
        }
        vue.nextTick(() => {
          emit("open");
        });
      } else {
        rebound.value = false;
        if (props.lockScroll) {
          document.body.style.overflow = "";
        }
        if (visible.value) {
          close();
        }
      }
    }
  );
  const dialogKls = vue.computed(() => [
    ns.b("original"),
    vsBaseClasses,
    ns.m(props.shape),
    {
      [ns.m("rebound")]: rebound.value,
      [ns.m("not-padding")]: props.notPadding,
      [ns.m("auto-width")]: props.autoWidth,
      [ns.m("scroll")]: props.scroll,
      [ns.m("loading")]: props.loading,
      [ns.m("not-center")]: props.notCenter
    }
  ]);
  const dialogStyles = vue.computed(() => ({
    width: props.width,
    ...ns.cssVar({
      color: color.getVsColor(props.color)
    })
  }));
  vue.onMounted(() => {
    if (props.modelValue) {
      visible.value = true;
      open();
    }
  });
  return {
    afterEnter,
    afterLeave,
    beforeLeave,
    handleClose,
    close,
    doClose,
    zIndex,
    closed,
    visible,
    dialogKls,
    dialogStyles
  };
};

exports.useDialog = useDialog;
//# sourceMappingURL=use-dialog.js.map