various-ui/es/components/tooltip/function/src/composable.mjs

This is a test version of the Vue 3 component library

import { ref, nextTick, computed } from 'vue';
import '../../../../utils/index.mjs';
import { append } from '../../../../utils/src/node/index.mjs';
import { relativeMouseBody } from '../../../../utils/src/dispose/boundary/src/relativeMouseBody.mjs';
import { tooltip } from '../../../../utils/src/animation/index.mjs';

const useComposable = (define, emits) => {
  const refs = {
    data: ref(),
    //* 数据缓存
    active: ref(false),
    //* 激活状态
    visible: ref(false),
    //* 隐藏状态
    visibleTimer: ref()
    //* 隐藏状态延迟器
  };
  const nodes = {
    tooltip: ref()
  };
  const methods = {
    //* 视图控制器 显示
    show: (align, option) => {
      refs.visibleTimer.value && clearTimeout(refs.visibleTimer.value);
      refs.visibleTimer.value = void 0;
      refs.visible.value = true;
      nextTick(() => {
        if (nodes.tooltip.value) {
          refs.data.value = { align, option };
          append(document.body, nodes.tooltip.value);
          relativeMouseBody(option, nodes.tooltip.value, {
            align: { x: option.alignX, y: align },
            offsetX: define.offsetX,
            offsetY: define.offsetY,
            initialization: option.initialization
          });
        }
      });
    },
    //* 视图控制器 隐藏
    hidden: (delay = 200) => {
      refs.visibleTimer.value && clearTimeout(refs.visibleTimer.value);
      refs.visibleTimer.value = setTimeout(() => {
        refs.visible.value = false;
      }, delay);
    },
    //* 入场前样式调整
    entrancePreAnimation: (el) => {
      gsap.set(el, { opacity: 0 });
    },
    //* 入场动画
    entranceAnimation: (el, done) => {
      gsap.to(el, { duration: 0.2, opacity: 1, onComplete: () => done() });
    },
    //* 离场动画
    departureAnimation: (el, done) => {
      gsap.to(el, { duration: 0.2, opacity: 0, onComplete: () => done() });
    }
  };
  const computeds = {
    //* 样式
    style: computed(() => {
      const result = {
        zIndex: define.zIndex || 66
      };
      if (define.width) result["max-width"] = `${define.width}px`;
      return result;
    })
  };
  const ons = {
    animation: tooltip({
      afterEnter: () => emits("after-enter"),
      afterLeave: () => emits("after-leave"),
      beforeEnter: () => {
        refs.active.value = true;
        emits("before-enter");
      },
      beforeLeave: () => {
        refs.active.value = false;
        emits("before-leave");
      }
    }),
    content: {
      mouseleave: () => define.trigger != "none" && methods.hidden(),
      mouseenter: () => {
        refs.visible.value = true;
        refs.data.value && methods.show(refs.data.value.align, refs.data.value.option);
      }
    }
  };
  return { ons, refs, nodes, methods, computeds };
};

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