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