various-ui/lib/components/tooltip/function/src/composable.js

This is a test version of the Vue 3 component library

'use strict';

var vue = require('vue');
require('../../../../utils/index.js');
var index = require('../../../../utils/src/node/index.js');
var relativeMouseBody = require('../../../../utils/src/dispose/boundary/src/relativeMouseBody.js');
var index$1 = require('../../../../utils/src/animation/index.js');

const useComposable = (define, emits) => {
  const refs = {
    data: vue.ref(),
    //* 数据缓存
    active: vue.ref(false),
    //* 激活状态
    visible: vue.ref(false),
    //* 隐藏状态
    visibleTimer: vue.ref()
    //* 隐藏状态延迟器
  };
  const nodes = {
    tooltip: vue.ref()
  };
  const methods = {
    //* 视图控制器 显示
    show: (align, option) => {
      refs.visibleTimer.value && clearTimeout(refs.visibleTimer.value);
      refs.visibleTimer.value = void 0;
      refs.visible.value = true;
      vue.nextTick(() => {
        if (nodes.tooltip.value) {
          refs.data.value = { align, option };
          index.append(document.body, nodes.tooltip.value);
          relativeMouseBody.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: vue.computed(() => {
      const result = {
        zIndex: define.zIndex || 66
      };
      if (define.width) result["max-width"] = `${define.width}px`;
      return result;
    })
  };
  const ons = {
    animation: index$1.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 };
};

exports.useComposable = useComposable;
//# sourceMappingURL=composable.js.map