comic-plus/lib/components/tooltip/src/main.vue.js

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

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