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"),_comp=require("../../ui/src/comp"),_xeUtils=_interopRequireDefault(require("xe-utils")),_ui=require("../../ui");function _interopRequireDefault(e){return e&&e.__esModule?e:{default:e}}var _default=exports.default=(0,_comp.defineVxeComponent)({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)(),p=(0,_vue.ref)(),c=(0,_vue.reactive)({resizeObserver:null,visibleLen:0}),i={refElem:v},f=(0,_vue.computed)(()=>_xeUtils.default.toNumber(u.lineClamp)),d=(0,_vue.computed)(()=>_xeUtils.default.toValueString(u.content)),r=(0,_vue.computed)(()=>u.offsetLength?_xeUtils.default.toNumber(u.offsetLength):0),s=(0,_vue.computed)(()=>{var e=c["visibleLen"],t=f.value,i=d.value,l=r.value;return 1<t&&i.length>e?i.slice(0,Math.max(1,e-3+l))+"...":i}),n={},_={xID:t,props:u,context:e,reactData:c,getRefMaps:()=>i,getComputeMaps:()=>n};const g=()=>{var e=v.value,t=p.value,i=d.value,l=f.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)c.visibleLen=i.length;else{var r=e,l=v.value,s=p.value;if(l&&s){let e=12;try{e=Math.max(10,_xeUtils.default.toNumber(getComputedStyle(s).fontSize))}catch(e){}var n=d.value;let t=Math.floor(r/e);var u=n.slice(0,t);s.textContent=u,c.visibleLen=u.length;let i=0;for(;r>s.clientWidth&&i<30;){i++;var a=Math.floor((r-s.clientWidth)/e);if(!a)break;t+=a,u=n.slice(0,t),s.textContent=u,c.visibleLen=u.length}s.textContent="",s.style.display="",s.style.position="",s.style.top="",s.style.left=""}}}else c.visibleLen=i.length},m=()=>{l("click",{})},x=()=>{var e=c["resizeObserver"],t=f.value;e||(e=v.value)&&1<t&&window.ResizeObserver&&((t=new window.ResizeObserver(_xeUtils.default.throttle(()=>{g()},300,{leading:!0,trailing:!0}))).observe(e),c.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=s.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,()=>{x(),g()}),(0,_vue.onMounted)(()=>{x(),g()}),(0,_vue.onBeforeUnmount)(()=>{var e=c["resizeObserver"],t=v.value,i=p.value;i&&(i.textContent=""),e&&(t&&e.unobserve(t),e.disconnect(),c.resizeObserver=null)}),_.renderVN=()=>{var{loading:e,status:t,title:i,underline:l}=u,r=o.value,s=a.value,n=f.value;return r.visible?(0,_vue.h)("div",{ref:v,class:["vxe-text-ellipsis",1<n?"is--multi":"is--single",{["size--"+s]:s,["theme--"+t]:t,"is--underline":l,"is--loading":e}],title:i,onClick:m},[(0,_vue.h)("span",{ref:p,class:"vxe-text-ellipsis--reality"}),h()]):(0,_ui.renderEmptyElement)(_)},_},render(){return this.renderVN()}});