yuang-framework-ui-pc/es/ele-tooltip/index.js

yuang-framework-ui-pc Library

import { defineComponent, ref, computed, resolveComponent, createBlock, openBlock, mergeProps, withCtx, renderSlot, createCommentVNode, createElementBlock, normalizeStyle, createTextVNode, toDisplayString } from "vue";
import { ElTooltip } from "element-plus";
import { omit } from "../utils/core";
import { tooltipEmits, tooltipProps } from "./props";
const _sfc_main = defineComponent({
  name: "EleTooltip",
  components: { ElTooltip },
  props: tooltipProps,
  emits: tooltipEmits,
  setup(props, { emit }) {
    const tooltipRef = ref();
    const rootProps = computed(() => {
      const options = omit(props, [
        "content",
        "bodyStyle",
        "bg",
        "arrowBg",
        "width",
        "isPopover",
        "onUpdate:visible",
        "onBeforeShow",
        "onBeforeHide",
        "onBefore-show",
        "onBefore-hide",
        "onShow",
        "onHide",
        "onOpen",
        "onClose"
      ]);
      const classes = ["ele-popper"];
      if (props.isPopover && props.effect === "light") {
        classes.push("ele-popover");
      } else {
        classes.push("ele-tooltip");
      }
      if (typeof props.popperClass === "string" && props.popperClass) {
        classes.push(props.popperClass);
      }
      options.popperClass = classes.join(" ");
      const style = {};
      if (props.bg || props.arrowBg) {
        options.effect = "dark";
        if (props.bg) {
          style["--ele-tooltip-bg"] = props.bg;
        }
        if (props.arrowBg) {
          style["--ele-tooltip-arrow-bg"] = props.arrowBg;
        }
      }
      const { width, popperStyle } = props;
      if (width != null) {
        style.width = typeof width === "string" ? width : `${width}px`;
      }
      if (!popperStyle) {
        options.popperStyle = style;
      } else if (Array.isArray(popperStyle)) {
        options.popperStyle = [style, ...popperStyle];
      } else {
        options.popperStyle = [style, popperStyle];
      }
      return options;
    });
    const popperRef = computed(
      () => {
        var _a;
        return (_a = tooltipRef.value) == null ? void 0 : _a.popperRef;
      }
    );
    const contentRef = computed(() => {
      var _a;
      return (_a = tooltipRef.value) == null ? void 0 : _a.contentRef;
    });
    const isFocusInsideContent = () => {
      tooltipRef.value && tooltipRef.value.isFocusInsideContent();
    };
    const updatePopper = () => {
      tooltipRef.value && tooltipRef.value.updatePopper();
    };
    const handleOpen = (opt) => {
      tooltipRef.value && tooltipRef.value.onOpen(opt);
    };
    const handleClose = (opt) => {
      tooltipRef.value && tooltipRef.value.onClose(opt);
    };
    const hide = (opt) => {
      tooltipRef.value && tooltipRef.value.hide(opt);
    };
    const handleUpdateVisible = (visible) => {
      emit("update:visible", visible);
    };
    const handlePopBeforeShow = (e) => {
      emit("before-show", e);
    };
    const handlePopBeforeHide = (e) => {
      emit("before-hide", e);
    };
    const handlePopShow = (e) => {
      emit("show", e);
    };
    const handlePopHide = (e) => {
      emit("hide", e);
    };
    const handlePopOpen = (e) => {
      emit("open", e);
    };
    const handlePopClose = (e) => {
      emit("close", e);
    };
    return {
      tooltipRef,
      rootProps,
      popperRef,
      contentRef,
      isFocusInsideContent,
      updatePopper,
      handleOpen,
      handleClose,
      hide,
      handleUpdateVisible,
      handlePopBeforeShow,
      handlePopBeforeHide,
      handlePopShow,
      handlePopHide,
      handlePopOpen,
      handlePopClose
    };
  }
});
const _export_sfc = (sfc, props) => {
  const target = sfc.__vccOpts || sfc;
  for (const [key, val] of props) {
    target[key] = val;
  }
  return target;
};
const _hoisted_1 = ["innerHTML"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_ElTooltip = resolveComponent("ElTooltip");
  return openBlock(), createBlock(_component_ElTooltip, mergeProps(_ctx.rootProps, {
    ref: "tooltipRef",
    "onUpdate:visible": _ctx.handleUpdateVisible,
    onBeforeShow: _ctx.handlePopBeforeShow,
    onBeforeHide: _ctx.handlePopBeforeHide,
    onShow: _ctx.handlePopShow,
    onHide: _ctx.handlePopHide,
    onOpen: _ctx.handlePopOpen,
    onClose: _ctx.handlePopClose
  }), {
    content: withCtx(() => [
      renderSlot(_ctx.$slots, "body", {}, () => [
        _ctx.rawContent && _ctx.content != null && _ctx.content != "" ? (openBlock(), createElementBlock("div", {
          key: 0,
          innerHTML: _ctx.content,
          class: "ele-tooltip-body",
          style: normalizeStyle(_ctx.bodyStyle)
        }, null, 12, _hoisted_1)) : (openBlock(), createElementBlock("div", {
          key: 1,
          class: "ele-tooltip-body",
          style: normalizeStyle(_ctx.bodyStyle)
        }, [
          renderSlot(_ctx.$slots, "content", {}, () => [
            createTextVNode(toDisplayString(_ctx.content), 1)
          ])
        ], 4))
      ])
    ]),
    default: withCtx(() => [
      _ctx.$slots.default ? renderSlot(_ctx.$slots, "default", { key: 0 }) : createCommentVNode("", true)
    ]),
    _: 3
  }, 16, ["onUpdate:visible", "onBeforeShow", "onBeforeHide", "onShow", "onHide", "onOpen", "onClose"]);
}
const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export {
  index as default
};