various-ui/es/components/tooltip/default/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 { relativeContainerBody } from '../../../../utils/src/dispose/boundary/src/relativeContainerBody.mjs';
import { tooltip } from '../../../../utils/src/animation/index.mjs';

const useComposable = (define, emits) => {
  const vars = {
    observer: void 0
  };
  const refs = {
    active: ref(false),
    //* 激活状态
    visible: ref(false),
    //* 隐藏状态
    visibleTimer: ref()
    //* 隐藏状态延迟器
  };
  const nodes = {
    container: ref(),
    triangle: ref(),
    tooltip: ref()
  };
  const methods = {
    //* 视图控制器 显示
    show: () => {
      refs.visibleTimer.value && clearTimeout(refs.visibleTimer.value);
      refs.visibleTimer.value = void 0;
      refs.visible.value = true;
      nextTick(() => {
        var _a;
        if (!nodes.container.value || !nodes.tooltip.value) return;
        else {
          append(document.body, nodes.tooltip.value);
          (_a = vars.observer) == null ? void 0 : _a.disconnect();
          vars.observer = new ResizeObserver(() => {
            if (!nodes.container.value || !nodes.tooltip.value) return;
            else {
              const data = { container: nodes.container.value, triangle: nodes.triangle.value, view: nodes.tooltip.value };
              relativeContainerBody(data, {
                direction: define.direction,
                offset: define.offset,
                align: define.align,
                width: define.width
              });
            }
          });
          vars.observer.observe(document.documentElement);
        }
      });
    },
    //* 视图控制器 隐藏
    hidden: (delay = 200) => {
      refs.visibleTimer.value && clearTimeout(refs.visibleTimer.value);
      refs.visibleTimer.value = setTimeout(() => {
        var _a;
        refs.visible.value = false;
        (_a = vars.observer) == null ? void 0 : _a.disconnect();
      }, 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: {
      //* 鼠标点击事件
      click: () => !define.disabled && define.trigger == "click" && methods.show(),
      //* 鼠标移入事件
      mouseenter: () => !define.disabled && define.trigger == "hover" && methods.show(),
      //* 鼠标移出事件
      mouseleave: () => !define.disabled && (define.trigger == "hover" || define.trigger == "click") && methods.hidden()
    },
    content: {
      //* 鼠标移入事件
      mouseenter: () => !define.disabled && (define.trigger == "hover" || define.trigger == "click") && methods.show(),
      //* 鼠标移出事件
      mouseleave: () => !define.disabled && (define.trigger == "hover" || define.trigger == "click") && methods.hidden()
    }
  };
  return { ons, vars, refs, nodes, methods, computeds };
};

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