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';

const useComposable = (define, emit) => {
  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 {
        document.body.style.overflow = "";
        refs.observer.value.disconnect();
        refs.open.value = false;
        emit("close");
      }
    },
    //* Modal启动函数
    openModal: () => {
      var _a;
      if (!refs.main.value || !refs.observer.value) return;
      else {
        document.body.style.overflow = "hidden";
        (_a = refs.main.value) == null ? void 0 : _a.scrollTo({ top: 0 });
        refs.observer.value.observe(refs.main.value);
        refs.open.value = true;
        emit("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
      };
    })
  });
  return { refs, binds, methods, computeds };
};

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