hongluan-business-ui/lib/components/text-overflow/src/index.js

Hongluan Business Component Library for Vue 3

'use strict';

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

var vue = require('vue');
var hongluanUi = require('hongluan-ui');
var dom = require('../../../utils/dom.js');
var util = require('../../../utils/util.js');
var pluginVue_exportHelper = require('../../../_virtual/plugin-vue_export-helper.js');

const _sfc_main = vue.defineComponent({
  name: "TextOverflow",
  components: {
    HlPopover: hongluanUi.HlPopover
  },
  inheritAttrs: false,
  props: {
    effect: {
      type: String,
      default: "light"
    },
    placement: {
      type: String,
      default: "top"
    },
    width: [String, Number],
    method: {
      type: String,
      default: "width"
    },
    length: {
      type: Number,
      default: -1
    }
  },
  setup(props) {
    const { prefix } = util.usePrefix();
    const tooltipContent = vue.ref(void 0);
    const textContentRef = vue.ref(null);
    const disabled = vue.ref(false);
    const cutTextContent = () => {
      unobserveDom();
      const text = textContentRef.value.innerText || textContentRef.value.textContent;
      tooltipContent.value = text;
      if (props.method === "length" && props.length !== -1) {
        if (text.length > props.length) {
          textContentRef.value.childNodes[1].nodeValue = text.substr(0, props.length) + "...";
          disabled.value = false;
        } else {
          disabled.value = true;
        }
      } else if (props.method === "width" || props.method === "autoWidth") {
        const cellChild = textContentRef.value;
        const range = document.createRange();
        range.setStart(cellChild, 0);
        range.setEnd(cellChild, cellChild.childNodes.length);
        const rangeWidth = range.getBoundingClientRect().width - 1;
        const padding = (parseInt(dom.getStyle(cellChild, "paddingLeft"), 10) || 0) + (parseInt(dom.getStyle(cellChild, "paddingRight"), 10) || 0);
        if (rangeWidth + padding > cellChild.offsetWidth || cellChild.scrollWidth > cellChild.offsetWidth) {
          disabled.value = false;
        } else {
          disabled.value = true;
        }
      }
      observeDom();
    };
    const observeDom = () => {
      observer.observe(textContentRef.value, {
        characterData: true,
        childList: true,
        subtree: true
      });
    };
    const unobserveDom = () => {
      observer.disconnect();
    };
    const observer = new MutationObserver(cutTextContent);
    vue.onMounted(() => {
      if (props.method === "autoWidth" && props.length > 0) {
        textContentRef.value.style.maxWidth = `${props.length}em`;
        vue.nextTick(() => {
          cutTextContent();
        });
      } else {
        cutTextContent();
      }
    });
    vue.onBeforeUnmount(() => {
      unobserveDom();
    });
    return {
      prefix,
      tooltipContent,
      textContentRef,
      disabled
    };
  }
});
const _hoisted_1 = ["innerHTML"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_hl_popover = vue.resolveComponent("hl-popover");
  return vue.openBlock(), vue.createBlock(_component_hl_popover, {
    tooltip: "",
    "popper-class": "text-overflow-poppper",
    placement: _ctx.placement,
    effect: _ctx.effect,
    disabled: _ctx.disabled,
    width: _ctx.width
  }, {
    reference: vue.withCtx(() => [
      vue.createElementVNode("span", vue.mergeProps({
        ref: "textContentRef",
        class: _ctx.prefix + "-text-overflow"
      }, _ctx.$attrs), [
        vue.renderSlot(_ctx.$slots, "default")
      ], 16)
    ]),
    default: vue.withCtx(() => [
      vue.createElementVNode("div", {
        class: "text-overflow-content",
        innerHTML: _ctx.tooltipContent
      }, null, 8, _hoisted_1)
    ]),
    _: 3
  }, 8, ["placement", "effect", "disabled", "width"]);
}
var TextOverflow = /* @__PURE__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render]]);

exports["default"] = TextOverflow;
//# sourceMappingURL=index.js.map