vxe-pc-ui/lib/text-ellipsis/src/text-ellipsis.min.js

A vue based PC component library

"use strict";Object.defineProperty(exports,"__esModule",{value:!0}),exports.default=void 0;var _vue=require("vue"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_vue.defineComponent)({name:"VxeTextEllipsis",props:{href:String,target:String,content:[String,Number],lineClamp:[String,Number],status:String,title:[String,Number],loading:Boolean,offsetLength:[String,Number],routerLink:Object,underline:{type:Boolean,default:()=>(0,_ui.getConfig)().textEllipsis.underline},permissionCode:[String,Number],size:{type:String,default:()=>(0,_ui.getConfig)().textEllipsis.size||(0,_ui.getConfig)().size}},emits:["click"],setup(u,e){const l=e["emit"];var t=_xeUtils.default.uniqueId();const a=(0,_ui.useSize)(u)["computeSize"],o=(0,_ui.usePermission)(u)["computePermissionInfo"],v=(0,_vue.ref)(),f=(0,_vue.ref)(),p=(0,_vue.reactive)({resizeObserver:null,visibleLen:0}),i={refElem:v},d=(0,_vue.computed)(()=>_xeUtils.default.toNumber(u.lineClamp)),c=(0,_vue.computed)(()=>_xeUtils.default.toValueString(u.content)),r=(0,_vue.computed)(()=>u.offsetLength?_xeUtils.default.toNumber(u.offsetLength):0),n=(0,_vue.computed)(()=>{var e=p["visibleLen"],t=d.value,i=c.value,l=r.value;return 1<t&&i.length>e?i.slice(0,Math.max(1,e-3+l))+"...":i}),s={},_={xID:t,props:u,context:e,reactData:p,getRefMaps:()=>i,getComputeMaps:()=>s};const g=()=>{var e=v.value,t=f.value,i=c.value,l=d.value;if(e&&t){e=e.clientWidth,t=(t.style.display="block",t.style.position="absolute",t.style.top="-3000px",t.style.left="-3000px",t.textContent=i,t.offsetWidth),e=Math.floor(e*l);if(t<e)p.visibleLen=i.length;else{var r=e,l=v.value,n=f.value;if(l&&n){let e=12;try{e=Math.max(10,_xeUtils.default.toNumber(getComputedStyle(n).fontSize))}catch(e){}var s=c.value;let t=Math.floor(r/e);var u=s.slice(0,t);n.textContent=u,p.visibleLen=u.length;let i=0;for(;r>n.clientWidth&&i<30;){i++;var a=Math.floor((r-n.clientWidth)/e);if(!a)break;t+=a,u=s.slice(0,t),n.textContent=u,p.visibleLen=u.length}n.textContent="",n.style.display="",n.style.position="",n.style.top="",n.style.left=""}}}else p.visibleLen=i.length},x=()=>{l("click",{})},m=()=>{var e=p["resizeObserver"],t=d.value;e||(e=v.value)&&1<t&&window.ResizeObserver&&((t=new window.ResizeObserver(_xeUtils.default.throttle(()=>{g()},300,{leading:!0,trailing:!0}))).observe(e),p.resizeObserver=t)};Object.assign(_,{dispatchEvent:(e,t,i)=>{l(e,(0,_ui.createEvent)(i,{$textEllipsis:_},t))}},{});const h=()=>{var{routerLink:e,href:t,target:i,title:l}=u,r=n.value;return e?(0,_vue.h)((0,_vue.resolveComponent)("router-link"),{class:"vxe-text-ellipsis--link",title:l,target:i,to:e},{default(){return h()}}):t?(0,_vue.h)("a",{class:"vxe-text-ellipsis--link",href:t,target:i,title:l},r):(0,_vue.h)("span",{class:"vxe-text-ellipsis--content"},r)};return(0,_vue.watch)(()=>u.content,()=>{g()}),(0,_vue.watch)(()=>u.lineClamp,()=>{m(),g()}),(0,_vue.onMounted)(()=>{m(),g()}),(0,_vue.onBeforeUnmount)(()=>{var e=p["resizeObserver"],t=v.value,i=f.value;i&&(i.textContent=""),e&&(t&&e.unobserve(t),e.disconnect(),p.resizeObserver=null)}),_.renderVN=()=>{var{loading:e,status:t,title:i,underline:l}=u,r=o.value,n=a.value,s=d.value;return r.visible?(0,_vue.h)("div",{ref:v,class:["vxe-text-ellipsis",1<s?"is--multi":"is--single",{["size--"+n]:n,["theme--"+t]:t,"is--underline":l,"is--loading":e}],title:i,onClick:x},[(0,_vue.h)("span",{ref:f,class:"vxe-text-ellipsis--reality"}),h()]):(0,_ui.renderEmptyElement)(_)},_},render(){return this.renderVN()}});