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 { scrollbarHidden } from '../../../../utils/src/node/index.mjs';
import { isNumber } from 'lodash-es';

const useComposable = (define, emits) => {
  const vars = {
    spacing: { x: "", y: "" },
    //* 内间距属性
    overflow: ""
    //* overflow属性
  };
  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;
      emits("close");
    },
    //* Modal启动函数
    openModal: () => {
      var _a;
      if (!refs.open.value) {
        vars.spacing = { x: document.body.style.paddingRight, y: document.body.style.paddingBottom };
        vars.overflow = document.body.style.overflow;
        scrollbarHidden();
      }
      (_a = nodes.container.value) == null ? void 0 : _a.scrollTo({ top: 0 });
      refs.open.value = true;
      emits("open");
    },
    //* 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 }));
      },
      "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");
      },
      "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.leave, { duration: 0.5, opacity: 0, onComplete: () => done() })
          );
        }
      }
    }
  };
  return { ons, vars, refs, nodes, binds, methods, computeds };
};

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