vexip-ui/lib/components/overflow/overflow.cjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

"use strict";const t=require("vue");require("../resize-observer/index.cjs");const N=require("@vexip-ui/config"),T=require("@vexip-ui/utils"),D=require("./props.cjs"),q=require("../resize-observer/resize-observer.cjs");function S(m){return typeof m=="function"||Object.prototype.toString.call(m)==="[object Object]"&&!t.isVNode(m)}const _=t.defineComponent({name:"Overflow",inheritAttrs:!1,props:D.overflowProps,emits:[],setup(m,{attrs:L,slots:c,expose:P}){const n=N.useProps("overflow",m,{items:{default:null,static:!0},tag:"div",attrFlag:!1,static:!1,maxCount:0}),g=N.useNameHelper("overflow"),i=t.ref(0),v=t.ref(),W=t.ref(),w=t.ref(),A=t.computed(()=>[g.b(),g.bs("vars"),{[g.bm("inherit")]:n.inherit,[g.bm("manual")]:n.maxCount>0}]),R=t.computed(()=>n.attrFlag?n.attrFlag===!0?"hidden":n.attrFlag:!1);t.watch([()=>{var e;return(e=n.items)==null?void 0:e.length},()=>n.maxCount],()=>{t.nextTick(f)}),P({refresh:f}),t.onMounted(f);function h(e,o){R.value?o?e.removeAttribute(R.value):e.setAttribute(R.value,""):o?e.style.display="":e.style.display="none"}function V(e){const o=getComputedStyle(e),s=parseFloat(o.marginLeft)||0,a=parseFloat(o.marginRight)||0;return s+a}function H(e){const o=e instanceof Element?getComputedStyle(e):e,s=parseFloat(o.paddingLeft)||0,a=parseFloat(o.paddingRight)||0;return s+a}function M(e){return e.offsetWidth+V(e)}let z=!1,E=i.value;function f(){const e=W.value;if(!v.value||!e)return;h(e,!0);const o=v.value.children,s=o.length,a=w.value,u=s-(a?2:1);let l=!1;if(n.maxCount>0){for(let r=0;r<u;++r){const b=o[r];b.style.display=r<n.maxCount?"":"none"}n.maxCount>=u?(h(e,!1),i.value=0):(i.value=u-n.maxCount,l=i.value>0),O(l);return}const y=getComputedStyle(v.value),C=v.value.offsetWidth-H(y),d=parseFloat(y.columnGap)||0,x=V(e),j=[];let F=a?a.offsetWidth+V(a)+d:0;for(let r=0;r<u;++r){if(r<0)continue;const b=o[r];if(l){h(b,!1);continue}else h(b,!0);const k=M(b)+d;if(F+=k,j[r]=k,F>C){for(let p=r;p>=0;--p)if(i.value=u-p,F-=j[p],F+e.offsetWidth+x<=C||!p){l=!0,r=p-1,a&&(a.style.maxWidth=r===-1?`${C-e.offsetWidth}px`:"");break}}}O(l)}function O(e){E!==i.value&&(E=i.value,N.emitEvent(n.onRestChange,i.value)),W.value&&h(W.value,e),e!==z&&(z=e,N.emitEvent(n.onToggle,e))}return()=>{var y;let e;const o=n.tag||"div",s=c.default,a=n.static,u=((y=c.counter)==null?void 0:y.call(c,{count:i.value})[0])||null,l=()=>t.createVNode(o,t.mergeProps(L,{ref:v,class:A.value}),{default:()=>[s&&T.isDefined(n.items)?n.items.map((C,d)=>{const x=s({item:C,index:d})[0];return a?(x.key=d,x):t.createVNode(q,{key:d,onResize:f},{default:()=>x})}):s==null?void 0:s(),t.createVNode("span",{ref:W},[u]),c.suffix?t.createVNode(q,{onResize:f},{default:()=>[t.createVNode("div",{ref:w,class:g.be("suffix")},[c.suffix()])]}):null]});return t.createVNode(q,{onResize:f},S(e=l())?e:{default:()=>[e]})}}});module.exports=_;
//# sourceMappingURL=overflow.cjs.map