various-ui/es/constants/components/loading/src/composable.mjs

This is a test version of the Vue 3 component library

import { gsap } from 'gsap';
import { ref, computed } from 'vue';

const useComposable = (define) => {
  const refs = {
    iconNode: ref()
  };
  const computeds = {
    style: computed(() => {
      if (define.zIndex) return { "z-index": define.zIndex };
      else return {};
    }),
    className: computed(() => {
      if (define.mode == "fixed") return "ui-fixed-loading";
      else return "";
    })
  };
  const methods = {
    //* 入场前动画
    entrancePreAnimation: (el) => {
      gsap.set(el, { opacity: 0 });
    },
    //* 离场动画
    departureAnimation: (el) => {
      gsap.to(el, {
        duration: 0.1,
        opacity: 0,
        onComplete: () => {
          var _a;
          if ((_a = refs.iconNode.value) == null ? void 0 : _a.$el) {
            gsap.killTweensOf(refs.iconNode.value.$el);
          }
        }
      });
    },
    //* 入场动画
    entranceAnimation: (el) => {
      var _a;
      gsap.to(el, { duration: 0.05, opacity: 1 });
      if ((_a = refs.iconNode.value) == null ? void 0 : _a.$el) {
        gsap.to(refs.iconNode.value.$el, { duration: 1, repeat: -1, ease: "none", rotation: 360 });
      }
    }
  };
  return { computeds, methods, refs };
};

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