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"),C=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(v,{expose:y,emit:W}){const t=v,a=e.ref(),c=e.ref(),i=e.ref(!1),s=e.ref(!1),r=e.ref(!1),o=e.ref(),h=e.ref(),n=e.ref(),d=e.ref(!1),m=W,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(o,()=>{d.value?setTimeout(()=>{d.value=!1}):p()}),e.onMounted(()=>{p(),c.value=a.value.observeScroll});function p(){const l=o.value.scrollWidth,u=o.value.scrollHeight,x=o.value.clientWidth,S=o.value.clientHeight,$=o.value.offsetWidth;h.value=`${$+24}px`,l>x||u>S?(t.expand&&(s.value=!0),t.tooltip&&(i.value=!0)):(t.expand&&(s.value=!1),t.tooltip&&(i.value=!1))}function w(){d.value=!0,n.value!=="none"?(n.value="none",t.tooltip&&i.value&&(r.value=!0,a.value.hide()),m("expandChange",!0)):(n.value=t.line??"none",t.tooltip&&!i.value&&(r.value=!1,i.value=!0,a.value.show()),m("expandChange",!1))}function g(){r.value&&(i.value=!1)}return y({observeScroll:c}),(l,u)=>(e.openBlock(),e.createBlock(e.unref(C.default),{ref_key:"tooltipRef",ref:a,style:e.normalizeStyle(`max-width: ${f.value}`),"max-width":h.value,"content-style":{maxWidth:f.value},"tooltip-style":{padding:"8px 12px"},"transition-duration":200,onAnimationend:g},{tooltip:e.withCtx(()=>[i.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:o,class:e.normalizeClass(["ellipsis-container",[v.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]=x=>s.value?w():()=>!1)},[e.renderSlot(l.$slots,"default",{},void 0,!0)],6)]),_:3},8,["style","max-width","content-style"]))}});exports.default=k;