comic-plus/es/components/tooltip/src/main.vue.mjs

<p align="center"> <img width="200px" src="./logo.png"/> </p>

import { defineComponent, ref, reactive, computed, watch, openBlock, createBlock, Teleport, createVNode, Transition, withCtx, createElementBlock, normalizeClass, normalizeStyle, unref, createElementVNode, toDisplayString, createCommentVNode } from "vue";
import "../style/tooltip.css";
import { useEventListener } from "@vueuse/core";
import { getNextZIndex } from "../../../utils/config.mjs";
import { tooltipProps } from "./main.props.mjs";
import { offset, flip, shift, arrow, useFloating, autoUpdate } from "@floating-ui/vue";
const _hoisted_1 = ["data-placement"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    name: "CuTooltip"
  },
  __name: "main",
  props: tooltipProps,
  setup(__props, { expose: __expose }) {
    const props = __props;
    const visible = ref(false);
    let timer = null;
    const zIndex = ref(0);
    const tooltipOptions = reactive({
      disabled: false,
      class: void 0
    });
    const text = ref(props.content);
    const tooltipRef = ref(null);
    const arrowRef = ref(null);
    const triggerRef = ref(props.triggerRef);
    const middleware = computed(() => {
      return [offset(10), flip(), shift({ padding: 10 }), arrow({ element: arrowRef })];
    });
    const { floatingStyles, middlewareData, placement } = useFloating(triggerRef, tooltipRef, {
      placement: props.placement,
      whileElementsMounted: autoUpdate,
      middleware
    });
    function getTooltipAttribute() {
      let el = props.triggerRef;
      let disabled = el.getAttribute("tooltip-disabled");
      let className = el.getAttribute("tooltip-class");
      tooltipOptions.disabled = disabled === "false" ? false : !!disabled;
      tooltipOptions.class = className;
    }
    function onmouseleave() {
      timer = setTimeout(() => {
        visible.value = false;
        clearTime();
      }, 150);
    }
    function onmouseenter() {
      getTooltipAttribute();
      const { disabled } = tooltipOptions;
      if (disabled) return;
      clearTime();
      visible.value = true;
    }
    function clearTime() {
      clearTimeout(timer);
      timer = null;
    }
    useEventListener(tooltipRef, "mouseenter", onmouseenter);
    useEventListener(tooltipRef, "mouseleave", onmouseleave);
    useEventListener(props.triggerRef, "mouseenter", onmouseenter);
    useEventListener(props.triggerRef, "mouseleave", onmouseleave);
    watch(
      () => visible.value,
      (val) => {
        if (val) {
          zIndex.value = getNextZIndex();
        }
      }
    );
    function update(content) {
      text.value = content;
    }
    __expose({ update });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(Teleport, { to: "body" }, [
        createVNode(Transition, { name: "cu-fade" }, {
          default: withCtx(() => {
            var _a, _b;
            return [
              visible.value ? (openBlock(), createElementBlock("div", {
                key: 0,
                class: normalizeClass(["cu-tooltip", tooltipOptions.class]),
                ref_key: "tooltipRef",
                ref: tooltipRef,
                style: normalizeStyle({ ...unref(floatingStyles), zIndex: zIndex.value }),
                "data-placement": unref(placement)
              }, [
                createElementVNode("span", {
                  class: "cu-tooltip__arrow",
                  ref_key: "arrowRef",
                  ref: arrowRef,
                  style: normalizeStyle({
                    left: ((_a = unref(middlewareData).arrow) == null ? void 0 : _a.x) != null ? `${unref(middlewareData).arrow.x}px` : "",
                    top: ((_b = unref(middlewareData).arrow) == null ? void 0 : _b.y) != null ? `${unref(middlewareData).arrow.y}px` : ""
                  })
                }, null, 4),
                createElementVNode("span", null, toDisplayString(text.value), 1)
              ], 14, _hoisted_1)) : createCommentVNode("", true)
            ];
          }),
          _: 1
        })
      ]);
    };
  }
});
export {
  _sfc_main as default
};