ideaz-element
Version:
<p align="center"> <a href="" target="_blank" rel="noopener noreferrer"> <img src="./docs/public/logo.svg" alt="Ideaz Element" width="180" style="width: 180px;" /> </a> </p>
1 lines • 6.8 kB
Source Map (JSON)
{"version":3,"file":"index.mjs","sources":["../../../../../packages/element/text/src/index.tsx"],"sourcesContent":["import { resolveDynamicComponent } from '@ideaz/shared'\nimport { cutStrByFullLength, getStrFullLength, getStyle, isObject, isValid } from '@ideaz/utils'\nimport { ElTooltip } from 'element-plus'\nimport { textProps } from './text'\n\nexport default defineComponent({\n name: 'ZText',\n props: textProps,\n setup(props, { slots }) {\n const ns = useNamespace('text', ref('el'))\n const size = useFormSize()\n\n const zText = ref()\n const computedReady = ref(false)\n const oversize = ref(false)\n const computedText = ref('')\n const textRef = ref()\n const moreRef = ref()\n\n const textKls = computed<string[]>(() => [\n ns.b(),\n ns.m(props.type),\n ns.m(size.value),\n ns.is('truncated', props.truncated),\n ])\n\n const getText = () => {\n return props.value || props.text || (slots.default?.()[0].children as string)\n }\n\n const computeText = async () => {\n oversize.value = false\n computedReady.value = false\n await nextTick()\n const $text = textRef.value\n const $el = zText.value\n const $more = moreRef.value\n let n = 1000\n let text = getText()\n let height = props.height || 0\n\n // When height is undefined and lines are defined, calculate the true height, otherwise use props.height\n if (!height && props.lines) {\n const lineHeight = Number.parseInt(getStyle($el, 'lineHeight') || '', 10) || 24\n height = lineHeight * props.lines\n }\n if ($text) {\n // If length is specified, it is tailored to the specific number of words\n if (props.length) {\n const textLength = props.fullWidthRecognition ? getStrFullLength(text) : text.length\n if (textLength > props.length) {\n oversize.value = true\n $more.style.display = 'inline-block'\n text = props.fullWidthRecognition ? cutStrByFullLength(text, props.length) : text.slice(0, props.length)\n }\n }\n else {\n if ($el.offsetHeight > height) {\n oversize.value = true\n $more.style.display = 'inline-block'\n while ($el.offsetHeight > height && n > 0) {\n if ($el.offsetHeight > height * 3)\n $text.textContent = text = text.substring(0, Math.floor(text.length / 2))\n else\n $text.textContent = text = text.substring(0, text.length - 1)\n\n n--\n }\n }\n }\n }\n\n computedText.value = text\n limitShow()\n }\n\n async function limitShow() {\n computedReady.value = true\n await nextTick()\n const $text = textRef.value\n // const $el = zText.value\n if ($text)\n $text.textContent = computedText.value\n // if ($el.offsetHeight > this.height)\n // emit('on-hide')\n // else\n // this.$emit('on-show')\n }\n\n onMounted(() => {\n if (isValid(props.length) || isValid(props.lines))\n computeText()\n })\n\n return () => {\n const { tag } = props\n const tooltipConfig = isObject(props.tooltip) ? props.tooltip : {}\n return resolveDynamicComponent({\n name: tag,\n attrs: {\n class: textKls.value,\n ref: zText,\n },\n content: (() => {\n if (computedReady.value) {\n if (oversize.value) {\n return (\n <ElTooltip content={getText()} {...tooltipConfig}>\n <div>\n <span ref={textRef}>{getText()}</span>\n <span v-show={oversize.value} ref={moreRef}>...</span>\n </div>\n </ElTooltip>\n )\n }\n else {\n return (\n <>\n <span ref={textRef}>{getText()}</span>\n <span v-show={oversize.value} ref={moreRef}>...</span>\n </>\n )\n }\n }\n else {\n return (\n <>\n <span ref={textRef}>{getText()}</span>\n <span v-show={oversize.value} ref={moreRef}>...</span>\n </>\n )\n }\n })(),\n })\n }\n },\n})\n"],"names":["Text","defineComponent","name","props","slots","size","useFormSize","zText","ref","computedReady","oversize","computedText","textRef","moreRef","textKls","computed","ns","_a","computeText","$text","$el","$more","text","getText","height","getStyle","getStrFullLength","n","limitShow","onMounted","isValid","tag","tooltipConfig","isObject","resolveDynamicComponent","attrs","createVNode","ElTooltip","mergeProps","default","withDirectives","createTextVNode","vShow","Fragment"],"mappings":";;;;;;;;;;;AAKA,MAAAA,IAAA,gBAAAC,EAAA;AAAA,EACEC,MAAAA;AAAAA,EACAC,OAAAA;AAAAA;IACeC,OAAAA;AAAAA,EAAM,GAAA;kCAEnBC,IAAAC,EAAA,GAEAC,IAAAC,EAAA,GACAC,IAAAD,EAAA,EAAA,GACAE,IAAAF,EAAA,EAAA,GACAG,IAAAH,EAAA,EAAA,GACAI,IAAAJ,EAAA,GACAK,IAAAL,EAAA,GAEAM,IAAAC,EAAA,MAAA,CAAAC,EAAA,EAAA,GAAAA,EAAA,EAAAb,EAAA,IAAA,GAAAa,EAAA,EAAAX,EAAA,KAAA,GAAAW,EAAA,GAAA,aAAAb,EAAA,SAAA,CAAA,CAAA;;AAQE,aAAAA,EAAA,SAAAA,EAAA,UAAAc,IAAAb,EAAA,YAAA,gBAAAa,EAAA,KAAAb,GAAA,GAAA;AAAA,OAGFc,IAAA,YAAA;;AAIE,YAAAC,IAAAP,EAAA,OACAQ,IAAAb,EAAA,OACAc,IAAAR,EAAA;mBAEAS,IAAAC,EAAA,GACAC,IAAArB,EAAA,UAAA;AAOA,UAJA,CAAAqB,KAAArB,EAAA,UAEEqB,KADA,OAAA,SAAAC,EAAAL,GAAA,YAAA,KAAA,IAAA,EAAA,KAAA,MACAI,EAAAA,QAEFL;;AAII,WADAhB,EAAA,uBAAAuB,EAAAJ,CAAA,IAAAA,EAAA,UACAnB,EAAA,yBAEEkB,EAAAA,MAAAA,UAAAA;iBAKFD,EAAA,eAAAI;6BAEEH,EAAAA,MAAAA,UAAAA;sJAOEM;AAAAA;mBAORC,EAAAA;AAAAA;;;AAMA,YAAAT,IAAAP,EAAA;;IAQF;AAEAiB,WAAAA,EAAAA,MAAAA;AACE,OAAAC,EAAA3B,EAAA,MAAA,KAAA2B,EAAA3B,EAAA,KAAA,MAAAe,EAAA;AAAA,IAEF,CAAA,GAEA,MAAA;;QACUa,KAAAA;AAAAA,MAAI,IAAA5B,GACZ6B,IAAAC,EAAA9B,EAAA,OAAA,IAAAA,EAAA,UAAA,CAAA;AACA,aAAA+B,EAAA;AAAA,QACEhC,MAAAA;AAAAA,QACAiC,OAAAA;AAAAA;UAEE3B,KAAAA;AAAAA;qCAKI4B,EAAAC,GAAAC,EAAA;AAAA,UAAA,SAAAf,EAAA;AAAA,QAC+B,GAAAS,CAAA,GAAA;AAAA,UAAmBO,SAAAA,MAAAA,CAAAA,EAAAA,OAAAA,MAAAA,CAAAA,EAAAA,QAAAA;AAAAA;UAE1B,GAAA,CAAAhB,EAAA,CAAA,CAAA,GAAAiB,EAAAJ,EAAA,QAAA;AAAA;UACwB,GAAA,CAAAK,EAAA,KAAA,CAAA,CAAA,GAAA,CAAA,CAAAC,GAAAhC,EAAA,KAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA,QAAd,CAAA,IAMlC0B,EAAAO,GAAA,MAAA,CAAAP,EAAA,QAAA;AAAA;QAEsB,GAAA,CAAAb,EAAA,CAAA,CAAA,GAAAiB,EAAAJ,EAAA,QAAA;AAAA;QACwB,GAAA,CAAAK,EAAA,KAAA,CAAA,CAAA,GAAA,CAAA,CAAAC,GAAAhC,EAAA,KAAA,CAAA,CAAA,CAAA,CAAA,IAMhD0B,EAAAO,GAAA,MAAA,CAAAP,EAAA,QAAA;AAAA;QAEsB,GAAA,CAAAb,EAAA,CAAA,CAAA,GAAAiB,EAAAJ,EAAA,QAAA;AAAA;QACwB,GAAA,CAAAK,EAAA,KAAA,CAAA,CAAA,GAAA,CAAA,CAAAC,GAAAhC,EAAA,KAAA,CAAA,CAAA,CAAA,CAAA;AAAA,MAKpD,CAAA;AAAA;EAEJ;AACF,CAAA;"}