asp-smart-ui-plus-test/lib/components/pc/advanced/textoverflow-tooltip/src/textoverflow-tooltip.js

A Component Library for Vue 3

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var pluginVue_exportHelper = require('../../../../../_virtual/plugin-vue_export-helper.js');

const _sfc_main = /* @__PURE__ */ vue.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 = vue.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 = vue.resolveComponent("asp-tooltip");
      return vue.openBlock(), vue.createBlock(_component_asp_tooltip, vue.mergeProps({ content: __props.content }, __props.tooltipAttrs, { disabled: isDisabled.value }), {
        default: vue.withCtx(() => [
          vue.createElementVNode("div", {
            class: vue.normalizeClass(["text-nowrap", __props.lineClamp > 1 ? "multi-line" : "single-line"]),
            style: vue.normalizeStyle({ "-webkit-line-clamp": __props.lineClamp }),
            onMouseenter: handleShowTooltip
          }, vue.toDisplayString(__props.content), 39)
        ]),
        _: 1
      }, 16, ["content", "disabled"]);
    };
  }
});
var TextOverflowTooltip = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["__file", "E:\\code\\SmartUIPlus\\asp-packages\\components\\pc\\advanced\\textoverflow-tooltip\\src\\textoverflow-tooltip.vue"]]);

exports["default"] = TextOverflowTooltip;