various-ui/es/components/tooltip/follow/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 = {
    event: ref(),
    //* Event缓存
    active: ref(false),
    //* 激活状态
    visible: ref(false),
    //* 隐藏状态
    visibleTimer: ref()
    //* 隐藏状态延迟器
  };
  const nodes = {
    tooltip: ref()
  };
  const methods = {
    //* 视图控制器 显示
    show: (ev, initialization) => {
      refs.visibleTimer.value && clearTimeout(refs.visibleTimer.value);
      refs.visibleTimer.value = void 0;
      refs.visible.value = true;
      nextTick(() => {
        if (ev && nodes.tooltip.value) {
          refs.event.value = ev;
          append(document.body, nodes.tooltip.value);
          relativeMouseBody(ev, nodes.tooltip.value, {
            offsetX: define.offsetX,
            offsetY: define.offsetY,
            initialization
          });
        }
      });
    },
    //* 视图控制器 隐藏
    hidden: (delay = 200) => {
      refs.visibleTimer.value && clearTimeout(refs.visibleTimer.value);
      refs.visibleTimer.value = setTimeout(() => {
        refs.visible.value = false;
      }, delay);
    }
  };
  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");
      }
    }),
    container: {
      mouseenter: (ev) => !define.disabled && methods.show(ev, true),
      mouseleave: () => !define.disabled && methods.hidden(),
      mousemove: (ev) => !define.disabled && methods.show(ev)
    },
    content: {
      mouseleave: () => !define.disabled && methods.hidden(),
      mouseenter: () => {
        if (!define.disabled) {
          refs.visible.value = true;
          refs.event.value && methods.show(refs.event.value);
        }
      }
    }
  };
  return { ons, refs, nodes, methods, computeds };
};

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