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

This is a test version of the Vue 3 component library

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

const useComposable = (define, emit) => {
  const refs = {
    open: ref(false)
  };
  const nodes = {
    main: ref(),
    container: ref()
  };
  const computeds = {
    site: computed(() => {
      switch (define.direction) {
        case "top":
          return { leave: { yPercent: -100 }, enter: { yPercent: 0 } };
        case "left":
          return { leave: { xPercent: -100 }, enter: { xPercent: 0 } };
        case "right":
          return { leave: { xPercent: 100 }, enter: { xPercent: 0 } };
        default:
          return { leave: { yPercent: 100 }, enter: { yPercent: 0 } };
      }
    })
  };
  const methods = {
    //* Modal关闭函数
    closeModal: () => {
      refs.open.value = false;
      emit("close");
      document.body.style.overflow = "";
      if (document.body.scrollHeight > document.body.offsetHeight) {
        document.body.style.paddingRight = "";
      }
    },
    //* Modal启动函数
    openModal: () => {
      var _a;
      (_a = nodes.container.value) == null ? void 0 : _a.scrollTo({ top: 0 });
      refs.open.value = true;
      emit("open");
      const size = document.body.offsetWidth - document.body.clientWidth;
      document.body.style.overflow = "hidden";
      if (document.body.scrollHeight > document.body.offsetHeight) {
        document.body.style.paddingRight = `${size}px`;
      }
    },
    //* Modal滚动条函数
    scrollTo: (options) => {
      var _a;
      (_a = nodes.container.value) == null ? void 0 : _a.scrollTo(options);
    }
  };
  const binds = reactive({
    content: computed(() => {
      return { style: { padding: define.spacing } };
    }),
    container: computed(() => {
      const result = {
        width: "100vw",
        height: "100vh"
      };
      if (define.direction == "right" || define.direction == "left") {
        result.width = isNumber(define.width) ? define.width + "px" : define.width;
        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;
        }
        result.top = "0";
        if (define.direction == "left") result.left = "0";
        else {
          result.right = "0";
        }
      } else {
        result.height = isNumber(define.height) ? define.height + "px" : define.height;
        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;
        }
        result.left = "0";
        if (define.direction == "bottom") result.bottom = "0";
        else {
          result.top = "0";
        }
      }
      return { style: result };
    })
  });
  const ons = {
    animation: {
      "before-enter": () => {
        nodes.container.value && gsap.set(nodes.container.value, Object.assign(computeds.site.value.leave, { opacity: 0 }));
      },
      "enter": (_el, done) => {
        if (nodes.container.value) {
          gsap.to(
            nodes.container.value,
            Object.assign(computeds.site.value.enter, { duration: 0.5, opacity: 1, onComplete: () => done() })
          );
        }
      },
      "leave": (_el, done) => {
        if (nodes.container.value) {
          gsap.to(
            nodes.container.value,
            Object.assign(computeds.site.value.enter, { duration: 0.5, opacity: 0, onComplete: () => done() })
          );
        }
      }
    }
  };
  return { ons, refs, nodes, binds, methods, computeds };
};

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