asp-smart-ui-plus-test/es/components/pc/advanced/textoverflow-tooltip/src/textoverflow-tooltip.mjs

A Component Library for Vue 3

import { defineComponent, ref, resolveComponent, openBlock, createBlock, mergeProps, withCtx, createElementVNode, normalizeClass, normalizeStyle, toDisplayString } from 'vue';
import _export_sfc from '../../../../../_virtual/plugin-vue_export-helper.mjs';

const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "textoverflow-tooltip",
  props: {
    tooltipAttrs: { type: null, required: false, default: () => ({}) },
    content: { type: String, required: true, default: "" },
    lineClamp: { type: Number, required: false, default: 1 }
  },
  setup(__props) {
    const props = __props;
    const isDisabled = ref(true);
    function handleShowTooltip(e) {
      if (props.lineClamp > 1) {
        handleMultilineToolTip(e);
      } else {
        handleSinglineToolTip(e);
      }
    }
    function handleMultilineToolTip(e) {
      var _a, _b, _c, _d, _e;
      const clientHeight = (_a = e == null ? void 0 : e.target) == null ? void 0 : _a.clientHeight;
      const scrollHeight = (_b = e == null ? void 0 : e.target) == null ? void 0 : _b.scrollHeight;
      const arrList = Array.from((_c = e.target) == null ? void 0 : _c.classList);
      if (scrollHeight > clientHeight) {
        isDisabled.value = false;
        if (!arrList.includes("link-text-hover")) {
          ;
          (_d = e == null ? void 0 : e.target) == null ? void 0 : _d.classList.add("link-text-hover");
        }
      } else {
        ;
        (_e = e == null ? void 0 : e.target) == null ? void 0 : _e.classList.remove("link-text-hover");
        isDisabled.value = true;
      }
    }
    function handleSinglineToolTip(e) {
      const eObj = e == null ? void 0 : e.target;
      const clientWidth = eObj.clientWidth;
      const scrollWidth = eObj.scrollWidth;
      if (scrollWidth > clientWidth) {
        isDisabled.value = false;
      } else {
        isDisabled.value = true;
      }
    }
    return (_ctx, _cache) => {
      const _component_asp_tooltip = resolveComponent("asp-tooltip");
      return openBlock(), createBlock(_component_asp_tooltip, mergeProps({ content: __props.content }, __props.tooltipAttrs, { disabled: isDisabled.value }), {
        default: withCtx(() => [
          createElementVNode("div", {
            class: normalizeClass(["text-nowrap", __props.lineClamp > 1 ? "multi-line" : "single-line"]),
            style: normalizeStyle({ "-webkit-line-clamp": __props.lineClamp }),
            onMouseenter: handleShowTooltip
          }, toDisplayString(__props.content), 39)
        ]),
        _: 1
      }, 16, ["content", "disabled"]);
    };
  }
});
var TextOverflowTooltip = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "E:\\code\\SmartUIPlus\\asp-packages\\components\\pc\\advanced\\textoverflow-tooltip\\src\\textoverflow-tooltip.vue"]]);

export { TextOverflowTooltip as default };