vue-amazing-ui/lib/ellipsis/Ellipsis.vue2.cjs

An Amazing Vue3 UI Components Library, Using TypeScript.

"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("vue"),S=require("../tooltip/index.cjs"),b=require("../utils/index.cjs"),k=e.defineComponent({__name:"Ellipsis",props:{maxWidth:{default:"100%"},tooltipMaxWidth:{default:void 0},line:{default:void 0},expand:{type:Boolean,default:!1},tooltip:{type:Boolean,default:!0}},emits:["expandChange"],setup(x,{expose:W,emit:y}){const t=x,a=e.ref(),v=e.ref(),o=e.ref(!1),s=e.ref(!1),r=e.ref(!1),i=e.ref(),c=e.ref(),n=e.ref(),d=e.ref(!1),h=y,f=e.computed(()=>typeof t.maxWidth=="number"?`${t.maxWidth}px`:t.maxWidth);e.watch(()=>t.line,l=>{l!==void 0?n.value=l:n.value="none"},{immediate:!0}),e.watch(()=>[t.maxWidth,t.line,t.tooltip],()=>{p()},{deep:!0,flush:"post"}),b.useResizeObserver(i,()=>{d.value?setTimeout(()=>{d.value=!1}):p()}),e.onMounted(()=>{p(),v.value=a.value.observeScroll});function p(){const l=i.value.scrollWidth,u=i.value.scrollHeight,m=i.value.clientWidth,$=i.value.clientHeight,C=i.value.offsetWidth;c.value=`${C+24}px`,l>m||u>$?(t.expand&&(s.value=!0),t.tooltip&&(o.value=!0)):(t.expand&&(s.value=!1),t.tooltip&&(o.value=!1))}function w(){d.value=!0,n.value!=="none"?(n.value="none",t.tooltip&&o.value&&(r.value=!0,a.value.hide()),h("expandChange",!0)):(n.value=t.line??"none",t.tooltip&&!o.value&&(r.value=!1,o.value=!0,a.value.show()),h("expandChange",!1))}function g(){r.value&&(o.value=!1)}return W({observeScroll:v}),(l,u)=>(e.openBlock(),e.createBlock(e.unref(S.default),e.mergeProps({ref_key:"tooltipRef",ref:a,style:`max-width: ${f.value}`,"max-width":c.value,"content-style":{maxWidth:f.value},"tooltip-style":{padding:"8px 12px"},"transition-duration":200,onAnimationend:g},l.$attrs),{tooltip:e.withCtx(()=>[o.value?e.renderSlot(l.$slots,"tooltip",{key:0},()=>[e.renderSlot(l.$slots,"default",{},void 0,!0)],!0):e.createCommentVNode("",!0)]),default:e.withCtx(()=>[e.createElementVNode("div",{ref_key:"ellipsisRef",ref:i,class:e.normalizeClass(["m-ellipsis",[l.line?"ellipsis-line":"not-ellipsis-line",{"ellipsis-cursor-pointer":s.value}]]),style:e.normalizeStyle(`--ellipsis-max-width: ${f.value}; --ellipsis-line: ${n.value};`),onClick:u[0]||(u[0]=m=>s.value?w():()=>!1)},[e.renderSlot(l.$slots,"default",{},void 0,!0)],6)]),_:3},16,["style","max-width","content-style"]))}});exports.default=k;