hongluan-business-ui/es/components/text-overflow/src/index.mjs

Hongluan Business Component Library for Vue 3

import { defineComponent, ref, onMounted, nextTick, onBeforeUnmount, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, mergeProps, renderSlot } from 'vue';
import { HlPopover } from 'hongluan-ui';
import { getStyle } from '../../../utils/dom.mjs';
import { usePrefix } from '../../../utils/util.mjs';
import _export_sfc from '../../../_virtual/plugin-vue_export-helper.mjs';

const _sfc_main = defineComponent({
  name: "TextOverflow",
  components: {
    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 } = usePrefix();
    const tooltipContent = ref(void 0);
    const textContentRef = ref(null);
    const disabled = 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(getStyle(cellChild, "paddingLeft"), 10) || 0) + (parseInt(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);
    onMounted(() => {
      if (props.method === "autoWidth" && props.length > 0) {
        textContentRef.value.style.maxWidth = `${props.length}em`;
        nextTick(() => {
          cutTextContent();
        });
      } else {
        cutTextContent();
      }
    });
    onBeforeUnmount(() => {
      unobserveDom();
    });
    return {
      prefix,
      tooltipContent,
      textContentRef,
      disabled
    };
  }
});
const _hoisted_1 = ["innerHTML"];
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
  const _component_hl_popover = resolveComponent("hl-popover");
  return openBlock(), createBlock(_component_hl_popover, {
    tooltip: "",
    "popper-class": "text-overflow-poppper",
    placement: _ctx.placement,
    effect: _ctx.effect,
    disabled: _ctx.disabled,
    width: _ctx.width
  }, {
    reference: withCtx(() => [
      createElementVNode("span", mergeProps({
        ref: "textContentRef",
        class: _ctx.prefix + "-text-overflow"
      }, _ctx.$attrs), [
        renderSlot(_ctx.$slots, "default")
      ], 16)
    ]),
    default: withCtx(() => [
      createElementVNode("div", {
        class: "text-overflow-content",
        innerHTML: _ctx.tooltipContent
      }, null, 8, _hoisted_1)
    ]),
    _: 3
  }, 8, ["placement", "effect", "disabled", "width"]);
}
var TextOverflow = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

export { TextOverflow as default };
//# sourceMappingURL=index.mjs.map