various-ui/es/components/modal/default/src/composable.mjs

This is a test version of the Vue 3 component library

import { ref, computed, nextTick, reactive } from 'vue';
import '../../../../utils/index.mjs';
import { isNumber } from 'lodash-es';
import { scrollbarHidden } from '../../../../utils/src/node/index.mjs';

const useComposable = (define, emits) => {
  const vars = {
    spacing: { x: "", y: "" },
    //* 内间距属性
    overflow: ""
    //* overflow属性
  };
  const refs = {
    open: ref(false),
    main: ref(),
    observer: ref(),
    container: ref()
  };
  const computeds = {
    //* 主体样式
    mainStyle: computed(() => {
      return {
        padding: define.margin,
        zIndex: define.zIndex
      };
    }),
    //* 容器样式
    containerStyle: computed(() => {
      const result = {
        width: isNumber(define.width) ? define.width + "px" : define.width,
        height: isNumber(define.height) ? define.height + "px" : define.height,
        padding: define.spacing
      };
      if (define.minHeight) result["min-height"] = isNumber(define.minHeight) ? define.minHeight + "px" : define.minHeight;
      if (define.maxHeight) result["max-height"] = isNumber(define.maxHeight) ? define.maxHeight + "px" : define.maxHeight;
      if (define.minWidth) result["min-width"] = isNumber(define.minWidth) ? define.minWidth + "px" : define.minWidth;
      if (define.maxWidth) {
        result["max-width"] = isNumber(define.maxWidth) ? define.maxWidth + "px" : define.maxWidth;
      }
      return result;
    })
  };
  const methods = {
    //* 窗口初始化函数
    resizeHandler: () => {
      nextTick(() => {
        if (!refs.container.value || !refs.main.value) return;
        if (refs.container.value.offsetHeight >= window.innerHeight) {
          refs.main.value.style.alignItems = "flex-start";
        } else {
          refs.main.value.style.alignItems = "center";
        }
      });
    },
    //* Modal关闭函数
    closeModal: () => {
      if (!refs.main.value || !refs.observer.value) return;
      else {
        refs.observer.value.disconnect();
        refs.open.value = false;
        emits("close");
      }
    },
    //* Modal启动函数
    openModal: () => {
      var _a;
      if (!refs.main.value || !refs.observer.value) return;
      else {
        if (!refs.open.value) {
          vars.spacing = { x: document.body.style.paddingRight, y: document.body.style.paddingBottom };
          vars.overflow = document.body.style.overflow;
          scrollbarHidden();
        }
        (_a = refs.main.value) == null ? void 0 : _a.scrollTo({ top: 0 });
        refs.observer.value.observe(refs.main.value);
        refs.open.value = true;
        emits("open");
      }
    },
    //* Modal滚动条函数
    scrollTo: (options) => {
      var _a;
      (_a = refs.main.value) == null ? void 0 : _a.scrollTo(options);
    }
  };
  const binds = reactive({
    main: computed(() => {
      return {
        style: computeds.mainStyle.value,
        class: define.classExtraName
      };
    })
  });
  const ons = {
    animation: {
      "after-leave": () => {
        document.body.style.overflow = vars.overflow;
        document.body.style.paddingRight = vars.spacing.x;
        document.body.style.paddingBottom = vars.spacing.y;
        emits("after-leave");
      }
    }
  };
  return { ons, vars, refs, binds, methods, computeds };
};

export { useComposable };
//# sourceMappingURL=composable.mjs.map