@vuesax-alpha/nightly/es/components/dialog/src/composables/use-dialog.mjs

A Component Library for Vue 3

import { ref, watch, nextTick, computed, onMounted } from 'vue';
import { isClient, useTimeoutFn } from '@vueuse/core';
import '../../../../hooks/index.mjs';
import '../../../../constants/index.mjs';
import '../../../../utils/index.mjs';
import { useNamespace } from '../../../../hooks/use-namespace/index.mjs';
import { useZIndex } from '../../../../hooks/use-z-index/index.mjs';
import { useVuesaxBaseComponent } from '../../../../hooks/use-base-component/index.mjs';
import { useColor } from '../../../../hooks/use-common-props/index.mjs';
import { UPDATE_MODEL_EVENT } from '../../../../constants/event.mjs';
import { useLockscreen } from '../../../../hooks/use-lockscreen/index.mjs';
import { getVsColor } from '../../../../utils/color.mjs';

const useDialog = (props, emit) => {
  const rebound = ref(false);
  const visible = ref(false);
  const closed = ref(false);
  const ns = useNamespace("dialog");
  const { nextZIndex } = useZIndex();
  const vsBaseClasses = useVuesaxBaseComponent(useColor());
  const zIndex = ref(nextZIndex());
  const afterEnter = () => {
    emit("opened");
  };
  const beforeLeave = () => {
    emit("close");
  };
  const afterLeave = () => {
    emit("closed");
    emit(UPDATE_MODEL_EVENT, false);
  };
  const doOpen = () => {
    if (!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;
      useTimeoutFn(() => rebound.value = false, 300);
      return;
    }
    close();
  };
  if (props.lockScroll) {
    useLockscreen(visible);
  }
  watch(
    () => props.modelValue,
    (val) => {
      if (val) {
        closed.value = false;
        rebound.value = true;
        open();
        zIndex.value = nextZIndex();
        if (props.lockScroll) {
          document.body.style.overflow = "hidden";
        }
        nextTick(() => {
          emit("open");
        });
      } else {
        rebound.value = false;
        if (props.lockScroll) {
          document.body.style.overflow = "";
        }
        if (visible.value) {
          close();
        }
      }
    }
  );
  const dialogKls = 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 = computed(() => ({
    width: props.width,
    ...ns.cssVar({
      color: getVsColor(props.color)
    })
  }));
  onMounted(() => {
    if (props.modelValue) {
      visible.value = true;
      open();
    }
  });
  return {
    afterEnter,
    afterLeave,
    beforeLeave,
    handleClose,
    close,
    doClose,
    zIndex,
    closed,
    visible,
    dialogKls,
    dialogStyles
  };
};

export { useDialog };
//# sourceMappingURL=use-dialog.mjs.map