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

Hongluan Business Component Library for Vue 3

{"version":3,"file":"index.mjs","sources":["../../../../../../packages/components/text-overflow/src/index.vue"],"sourcesContent":["<template>\n  <hl-popover\n    tooltip\n    popper-class=\"text-overflow-poppper\"\n    :placement=\"placement\"\n    :effect=\"effect\"\n    :disabled=\"disabled\"\n    :width=\"width\"\n  >\n    <template #reference>\n      <span\n        ref=\"textContentRef\"\n        :class=\"prefix + '-text-overflow'\"\n        v-bind=\"$attrs\"\n      >\n        <slot></slot>\n      </span>\n    </template>\n    <div class=\"text-overflow-content\" v-html=\"tooltipContent\"></div>\n  </hl-popover>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, onMounted, onBeforeUnmount, nextTick } from 'vue'\nimport { HlPopover } from 'hongluan-ui'\nimport { getStyle } from '@hongluan-business-ui/utils/dom'\nimport { usePrefix } from '@hongluan-business-ui/utils/util'\n\nimport type { PropType } from 'vue'\n\nexport default defineComponent({\n  name: 'TextOverflow',\n  components: {\n    HlPopover,\n  },\n  inheritAttrs: false,\n  props: {\n    effect: {\n      type: String as PropType<'light' | 'dark'>,\n      default: 'light',\n    },\n    placement: {\n      type: String,\n      default: 'top',\n    },\n    width: [String, Number],\n    method: {\n      type: String as PropType<'width' | 'length' | 'autoWidth'>,\n      default: 'width',\n    },\n    length: {\n      type: Number,\n      default: -1,\n    },\n  },\n  setup(props) {\n    const { prefix } = usePrefix()\n    const tooltipContent = ref(undefined)\n    const textContentRef = ref<HTMLElement>(null)\n    const disabled = ref(false)\n\n    const cutTextContent = () => {\n      unobserveDom()\n      const text = textContentRef.value.innerText || textContentRef.value.textContent\n      tooltipContent.value = text\n      if (props.method === 'length' && props.length !== -1) {\n        if (text.length > props.length) {\n          // 两边各有一个空白节点\n          textContentRef.value.childNodes[1].nodeValue = text.substr(0, props.length) + '...'\n          disabled.value = false\n        } else {\n          disabled.value = true\n        }\n      } else if (props.method === 'width' || props.method === 'autoWidth') {\n        const cellChild = textContentRef.value\n        const range = document.createRange()\n        range.setStart(cellChild, 0)\n        range.setEnd(cellChild, cellChild.childNodes.length)\n        const rangeWidth = range.getBoundingClientRect().width - 1\n        const padding = (parseInt(getStyle(cellChild, 'paddingLeft'), 10) || 0)\n          + (parseInt(getStyle(cellChild, 'paddingRight'), 10) || 0)\n        if ((rangeWidth + padding > cellChild.offsetWidth || cellChild.scrollWidth > cellChild.offsetWidth)) {\n          disabled.value = false\n        } else {\n          disabled.value = true\n        }\n      }\n      observeDom()\n    }\n\n    const observeDom = () => {\n      observer.observe(textContentRef.value, {\n        characterData: true,\n        childList: true,\n        subtree: true,\n      })\n    }\n    const unobserveDom = () => {\n      observer.disconnect()\n    }\n\n    const observer = new MutationObserver(cutTextContent)\n\n    onMounted(() => {\n      if (props.method === 'autoWidth' && props.length > 0) {\n        textContentRef.value.style.maxWidth = `${props.length}em`\n        nextTick(() => {\n          cutTextContent()\n        })\n      } else {\n        cutTextContent()\n      }\n    })\n\n    onBeforeUnmount(() => {\n      unobserveDom()\n    })\n\n    return {\n      prefix,\n      tooltipContent,\n      textContentRef,\n      disabled,\n    }\n  },\n})\n</script>\n"],"names":["_createBlock","_withCtx","_createElementVNode","_mergeProps","_renderSlot"],"mappings":";;;;;;AA8BA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA;AAAA,EAEF,cAAc;AAAA,EACd,OAAO;AAAA,IACL,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,WAAW;AAAA,MACT,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,OAAO,CAAC,QAAQ;AAAA,IAChB,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;AAAA,IAEX,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,SAAS;AAAA;AAAA;AAAA,EAGb,MAAM,OAAO;AACX,UAAM,EAAE,WAAW;AACnB,UAAM,iBAAiB,IAAI;AAC3B,UAAM,iBAAiB,IAAiB;AACxC,UAAM,WAAW,IAAI;AAErB,UAAM,iBAAiB,MAAM;AAC3B;AACA,YAAM,OAAO,eAAe,MAAM,aAAa,eAAe,MAAM;AACpE,qBAAe,QAAQ;AACvB,UAAI,MAAM,WAAW,YAAY,MAAM,WAAW,IAAI;AACpD,YAAI,KAAK,SAAS,MAAM,QAAQ;AAE9B,yBAAe,MAAM,WAAW,GAAG,YAAY,KAAK,OAAO,GAAG,MAAM,UAAU;AAC9E,mBAAS,QAAQ;AAAA,eACZ;AACL,mBAAS,QAAQ;AAAA;AAAA,iBAEV,MAAM,WAAW,WAAW,MAAM,WAAW,aAAa;AACnE,cAAM,YAAY,eAAe;AACjC,cAAM,QAAQ,SAAS;AACvB,cAAM,SAAS,WAAW;AAC1B,cAAM,OAAO,WAAW,UAAU,WAAW;AAC7C,cAAM,aAAa,MAAM,wBAAwB,QAAQ;AACzD,cAAM,UAAW,UAAS,SAAS,WAAW,gBAAgB,OAAO,eACvD,SAAS,WAAW,iBAAiB,OAAO;AAC1D,YAAK,aAAa,UAAU,UAAU,eAAe,UAAU,cAAc,UAAU,aAAc;AACnG,mBAAS,QAAQ;AAAA,eACZ;AACL,mBAAS,QAAQ;AAAA;AAAA;AAGrB;AAAA;AAGF,UAAM,aAAa,MAAM;AACvB,eAAS,QAAQ,eAAe,OAAO;AAAA,QACrC,eAAe;AAAA,QACf,WAAW;AAAA,QACX,SAAS;AAAA;AAAA;AAGb,UAAM,eAAe,MAAM;AACzB,eAAS;AAAA;AAGX,UAAM,WAAW,IAAI,iBAAiB;AAEtC,cAAU,MAAM;AACd,UAAI,MAAM,WAAW,eAAe,MAAM,SAAS,GAAG;AACpD,uBAAe,MAAM,MAAM,WAAW,GAAG,MAAM;AAC/C,iBAAS,MAAM;AACb;AAAA;AAAA,aAEG;AACL;AAAA;AAAA;AAIJ,oBAAgB,MAAM;AACpB;AAAA;AAGF,WAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AAAA;AAAA;;;;sBAzHJA,YAkBa;AAAA,IAjBX;AAAA,IACA,gBAAa;AAAA,IACZ,WAAW;AAAA,IACX,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,OAAO;AAAA;IAEG,WAASC,QAClB,MAMO;AAAA,MANPC,mBAMO,QANPC,WAMO;AAAA,QALL,KAAI;AAAA,QACH,OAAO,cAAM;AAAA,SACN,cAAM;AAAA,QAEdC,WAAa;AAAA;;qBAGjB,MAAiE;AAAA,MAAjEF,mBAAiE;AAAA,QAA5D,OAAM;AAAA,QAAwB,WAAQ;AAAA;;;;;;;;;"}