virtua/lib/vue/index.mjs

A zero-config, fast and small (~3kB) virtual list (and grid) component for React, Vue, Solid and Svelte.

import{defineComponent as e,ref as t,computed as o,watch as r,createVNode as n,mergeProps as s,isVNode as i,onMounted as l,onUnmounted as c}from"vue";const a=null,{min:u,max:f,abs:d,floor:p}=Math,h=(e,t,o)=>u(o,f(t,e)),m=e=>[...e].sort(((e,t)=>e-t)),_="function"==typeof queueMicrotask?queueMicrotask:e=>{Promise.resolve().then(e)},v=e=>{let t;return()=>(e&&(t=e(),e=void 0),t)},y=-1,b=(e,t,o)=>{const r=o?"unshift":"push";for(let o=0;o<t;o++)e[r](y);return e},S=(e,t)=>{const o=e.t[t];return o===y?e.o:o},g=(e,t,o)=>{const r=e.t[t]===y;return e.t[t]=o,e.i=u(t,e.i),r},x=(e,t)=>{if(!e.l)return 0;if(e.i>=t)return e.u[t];e.i<0&&(e.u[0]=0,e.i=0);let o=e.i,r=e.u[o];for(;o<t;)r+=S(e,o),e.u[++o]=r;return e.i=t,r},z=(e,t,o=0,r=e.l-1)=>{for(;o<=r;){const n=p((o+r)/2),s=x(e,n);if(s<=t){if(s+S(e,n)>t)return n;o=n+1}else r=n-1}return h(o,0,e.l-1)},w=(e,t,o)=>{const r=t-e.l;return e.i=o?-1:u(t-1,e.i),e.l=t,r>0?(b(e.u,r),b(e.t,r,o),e.o*r):(e.u.splice(r),(o?e.t.splice(0,-r):e.t.splice(r)).reduce(((t,o)=>t-(o===y?e.o:o)),0))},$="undefined"!=typeof window,I=()=>document.documentElement,k=e=>e.ownerDocument,O=e=>e.defaultView,j=/*#__PURE__*/v((()=>!!$&&"rtl"===getComputedStyle(I()).direction)),E=/*#__PURE__*/v((()=>/iP(hone|od|ad)/.test(navigator.userAgent))),T=/*#__PURE__*/v((()=>"scrollBehavior"in I().style)),B=e=>!!e.p(),q=(e,t=40,o=4,r=0,n,s=!1)=>{let i=!!r,l=1,c=0,p=0,h=0,_=0,v=0,$=0,I=0,k=0,O=i?[0,f(r-1,0)]:a,j=[0,0],T=0;const B=((e,t)=>({o:t,t:b([],e),l:e,i:-1,u:b([],e)}))(e,t),q=new Set,P=()=>h-p,R=()=>P()+v+_,M=e=>((e,t,o,r)=>{if(r=u(r,e.l-1),x(e,r)<=t){const n=z(e,t+o,r);return[z(e,t,r,n),n]}{const n=z(e,t,void 0,r);return[n,z(e,t+o,n)]}})(B,e,c,j[0]),N=()=>(e=>e.l?x(e,e.l-1)+S(e,e.l-1):0)(B),A=e=>x(B,e)-v,H=e=>S(B,e),V=e=>{e&&(E()&&0!==I?v+=e:_+=e)};return{h:()=>l,m:()=>(e=>[e.t.slice(),e.o])(B),v:()=>{let e,t;return $?[e,t]=j:([e,t]=j=M(f(0,R())),O&&(e=u(e,O[0]),t=f(t,O[1]))),1!==I&&(e-=f(0,o)),2!==I&&(t+=f(0,o)),[f(e,0),u(t,B.l-1)]},S:()=>z(B,R()),I:()=>z(B,R()+c),k:e=>B.t[e]===y,O:()=>!!O&&B.t.slice(f(0,O[0]-1),u(B.l-1,O[1]+1)+1).includes(y),j:A,T:H,B:()=>B.l,q:()=>h,P:()=>0!==I,p:()=>c,R:()=>p,M:N,N:()=>($=_,_=0,[$,2===k||P()+c>=N()]),A:(e,t)=>{const o=[e,t];return q.add(o),()=>{q.delete(o)}},H:(e,t)=>{let o,r,n=0;switch(e){case 1:{const e=$;$=0;const o=t-h,s=d(o);e&&s<d(e)+1||0!==k||(I=o<0?2:1),i&&(O=a,i=!1),h=t,n=4;const l=P();l>=-c&&l<=N()&&(n+=1,r=s>c);break}case 2:n=8,0!==I&&(o=!0,n+=1),I=0,k=0,O=a;break;case 3:{const e=t.filter((([e,t])=>B.t[e]!==t));if(!e.length)break;V(e.reduce(((e,[t,o])=>((2===k||(O?!i&&t<O[0]:A(t)+(0===I&&0===k?H(t):0)<P()))&&(e+=o-H(t)),e)),0));for(const[t,o]of e){const e=H(t),r=g(B,t,o);s&&(T+=r?o:o-e)}s&&c&&T>c&&(V(((e,t)=>{let o=0;const r=[];e.t.forEach(((e,n)=>{e!==y&&(r.push(e),n<t&&o++)})),e.i=-1;const n=m(r),s=n.length,i=s/2|0,l=s%2==0?(n[i-1]+n[i])/2:n[i],c=e.o;return((e.o=l)-c)*f(t-o,0)})(B,z(B,R()))),s=!1),n=3,r=!0;break}case 4:c!==t&&(c=t,n=3);break;case 5:t[1]?(V(w(B,t[0],!0)),k=2,n=1):(w(B,t[0]),n=1);break;case 6:p=t;break;case 7:k=1;break;case 8:O=M(t),n=1}n&&(l=1+(2147483647&l),o&&v&&(_+=v,v=0),q.forEach((([e,t])=>{n&e&&t(r)})))}}},P=setTimeout,R=(e,t)=>t&&j()?-e:e,M=(e,t,o,r,n,s)=>{const i=Date.now;let l=0,c=!1,u=!1,f=!1,d=!1;const p=(()=>{let t;const o=()=>{t!=a&&clearTimeout(t)},r=()=>{o(),t=P((()=>{t=a,(()=>{if(c||u)return c=!1,void p();f=!1,e.H(2)})()}),150)};return r.V=o,r})(),h=()=>{l=i(),f&&(d=!0),s&&e.H(6,s()),e.H(1,r()),p()},m=t=>{if(c||!e.P()||t.ctrlKey)return;const r=i()-l;150>r&&50<r&&(o?t.deltaX:t.deltaY)&&(c=!0)},_=()=>{u=!0,f=d=!1},v=()=>{u=!1,E()&&(f=!0)};return t.addEventListener("scroll",h),t.addEventListener("wheel",m,{passive:!0}),t.addEventListener("touchstart",_,{passive:!0}),t.addEventListener("touchend",v,{passive:!0}),{C:()=>{t.removeEventListener("scroll",h),t.removeEventListener("wheel",m),t.removeEventListener("touchstart",_),t.removeEventListener("touchend",v),p.V()},F:()=>{const[t,s]=e.N();t&&(n(R(t,o),s,d),d=!1,s&&e.p()>e.M()&&e.H(1,r()))}}},N=e=>{let t;return{J(o){(t||(t=new(O(k(o)).ResizeObserver)(e))).observe(o)},L(e){t.unobserve(e)},C(){t&&t.disconnect()}}},A=/*#__PURE__*/e({props:{W:{type:Object,required:!0},X:{type:Object,required:!0},Y:{type:Object,required:!0},U:{type:Function,required:!0},D:{type:Number,required:!0},G:{type:Boolean},K:{type:Boolean},Z:{type:String,required:!0},ee:Object},setup(e){const l=t(),c=o((()=>e.W.value&&e.X.j(e.D))),a=o((()=>e.W.value&&e.X.k(e.D)));return r((()=>l.value&&e.D),((t,o,r)=>{r(e.U(l.value,e.D))}),{flush:"post"}),()=>{var t;const{Y:o,G:r,K:u,Z:f}=e,d=a.value,{style:p,...h}=null!==(t=e.ee)&&void 0!==t?t:{},m={contain:"layout style",position:d&&u?void 0:"absolute",[r?"height":"width"]:"100%",[r?"top":"left"]:"0px",[r?j()?"right":"left":"top"]:c.value+"px",visibility:!d||u?"visible":"hidden",...p};return r&&(m.display="inline-flex"),n(f,s({ref:l,style:m},h),"function"==typeof(_=o)||"[object Object]"===Object.prototype.toString.call(_)&&!i(_)?o:{default:()=>[o],_:2},16,["style"]);var _}}}),H=(e,t)=>{const o=e.key;return null!=o?o:"_"+t},V=(e,t)=>e[0]===t[0]&&e[1]===t[1],C=/*#__PURE__*/e({props:{data:{type:Array,required:!0},overscan:Number,itemSize:Number,shift:Boolean,horizontal:Boolean,startMargin:{type:Number,default:0},ssrCount:Number,scrollRef:Object,as:{type:String,default:"div"},item:{type:String,default:"div"},itemProps:Function,keepMounted:Array},emits:["scroll","scrollEnd"],setup(e,{emit:s,expose:u,slots:d}){let p=!!e.ssrCount;const v=e.horizontal,y=t(),b=q(e.data.length,e.itemSize,e.overscan,e.ssrCount,0,!e.itemSize),S=((e,t)=>{let o;const r=t?"width":"height",n=new WeakMap,s=N((t=>{const s=[];for(const{target:i,contentRect:l}of t)if(i.offsetParent)if(i===o)e.H(4,l[r]);else{const e=n.get(i);e!=a&&s.push([e,l[r]])}s.length&&e.H(3,s)}));return{te(e){s.J(o=e)},oe:(e,t)=>(n.set(e,t),s.J(e),()=>{n.delete(e),s.L(e)}),re:s.C}})(b,v),g=((e,t)=>{let o,r,n;const s=t?"scrollLeft":"scrollTop",i=t?"overflowX":"overflowY",l=async(r,i)=>{if(!o)return void _((()=>l(r,i)));n&&n();const c=()=>{let t;return[new Promise(((o,r)=>{t=o,n=r,B(e)&&P(r,150)})),e.A(2,(()=>{t&&t()}))]};if(i&&T()){for(;e.H(8,r()),e.O();){const[e,t]=c();try{await e}catch(e){return}finally{t()}}o.scrollTo({[t?"left":"top"]:R(r(),t),behavior:"smooth"})}else for(;;){const[n,i]=c();try{o[s]=R(r(),t),e.H(7),await n}catch(e){return}finally{i()}}};return{ne(l){o=l,r=M(e,l,t,(()=>R(l[s],t)),((t,o,r)=>{if(r){const e=l.style,t=e[i];e[i]="hidden",P((()=>{e[i]=t}))}o?(l[s]=e.q()+t,n&&n()):l[s]+=t}))},re(){r&&r.C()},se(e){l((()=>e))},ie(t){t+=e.q(),l((()=>t))},le(t,{align:o,smooth:r,offset:n=0}={}){if(t=h(t,0,e.B()-1),"nearest"===o){const r=e.j(t),n=e.q();if(r<n)o="start";else{if(!(r+e.T(t)>n+e.p()))return;o="end"}}l((()=>n+e.R()+e.j(t)+("end"===o?e.T(t)-e.p():"center"===o?(e.T(t)-e.p())/2:0)),r)},ce:()=>{r&&r.F()}}})(b,v),x=t(b.h()),z=b.A(1,(()=>{x.value=b.h()})),w=b.A(4,(()=>{s("scroll",b.q())})),$=b.A(8,(()=>{s("scrollEnd")})),I=o((e=>{x.value;const t=b.v();return e&&V(e,t)?e:t})),k=o((()=>x.value&&b.P())),O=o((()=>x.value&&b.M()));return l((()=>{p=!1,_((()=>{const t=e=>{S.te(e),g.ne(e)};e.scrollRef?t(e.scrollRef):t(y.value.parentElement)}))})),c((()=>{z(),w(),$(),S.re(),g.re()})),r((()=>e.data.length),(t=>{b.H(5,[t,e.shift])})),r((()=>e.startMargin),(e=>{b.H(6,e)}),{immediate:!0}),r([x],(()=>{g.ce()}),{flush:"post"}),u({get scrollOffset(){return b.q()},get scrollSize(){return(e=>f(e.M(),e.p()))(b)},get viewportSize(){return b.p()},findStartIndex:b.S,findEndIndex:b.I,getItemOffset:b.j,getItemSize:b.T,scrollToIndex:g.le,scrollTo:g.se,scrollBy:g.ie}),()=>{const t=e.as,o=e.item,[r,s]=I.value,l=O.value,c=[];function a(t){var r;const s=d.default({item:e.data[t],index:t})[0];return n(A,{key:H(s,t),W:x,X:b,U:S.oe,D:t,Y:s,G:v,K:p,Z:o,ee:null===(r=e.itemProps)||void 0===r?void 0:r.call(e,{item:e.data[t],index:t})},null,8,["W","X","U","D","Y","G","K","Z","ee"])}for(let e=r,t=s;e<=t;e++)c.push(a(e));if(e.keepMounted){const t=[],o=[];m(e.keepMounted).forEach((e=>{e<r&&t.push(a(e)),e>s&&o.push(a(e))})),c.unshift(...t),c.push(...o)}return n(t,{ref:y,style:{contain:"strict",overflowAnchor:"none",overflow:"clip",flex:"none",position:"relative",width:v?l+"px":"100%",height:v?"100%":l+"px",pointerEvents:k.value?"none":void 0}},"function"==typeof(u=c)||"[object Object]"===Object.prototype.toString.call(u)&&!i(u)?c:{default:()=>[c],_:2},8,["style"]);var u}}}),F=/*#__PURE__*/e({props:{data:{type:Array,required:!0},overscan:Number,itemSize:Number,shift:Boolean,horizontal:Boolean,ssrCount:Number,itemProps:Function,keepMounted:Array},emits:["scroll","scrollEnd"],setup(e,{emit:o,expose:r,slots:s}){const l=e.horizontal,c=e=>{o("scroll",e)},a=()=>{o("scrollEnd")},u=t();return r({get scrollOffset(){return u.value.scrollOffset},get scrollSize(){return u.value.scrollSize},get viewportSize(){return u.value.viewportSize},findStartIndex:(...e)=>u.value.findStartIndex(...e),findEndIndex:(...e)=>u.value.findEndIndex(...e),getItemOffset:(...e)=>u.value.getItemOffset(...e),getItemSize:(...e)=>u.value.getItemSize(...e),scrollToIndex:(...e)=>u.value.scrollToIndex(...e),scrollTo:(...e)=>u.value.scrollTo(...e),scrollBy:(...e)=>u.value.scrollBy(...e)}),()=>{return n("div",{style:{display:l?"inline-block":"block",[l?"overflowX":"overflowY"]:"auto",contain:"strict",width:"100%",height:"100%"}},[n(C,{ref:u,data:e.data,overscan:e.overscan,itemSize:e.itemSize,itemProps:e.itemProps,shift:e.shift,ssrCount:e.ssrCount,horizontal:l,keepMounted:e.keepMounted,onScroll:c,onScrollEnd:a},(t=s,"function"==typeof t||"[object Object]"===Object.prototype.toString.call(t)&&!i(t)?s:{default:()=>[s],_:2}),8,["data","overscan","itemSize","itemProps","shift","ssrCount","horizontal","keepMounted","onScroll","onScrollEnd"])],4);var t}}}),J=/*#__PURE__*/e({props:{data:{type:Array,required:!0},overscan:Number,itemSize:Number,shift:Boolean,horizontal:Boolean,as:{type:String,default:"div"},item:{type:String,default:"div"}},emits:["scroll","scrollEnd"],setup(e,{emit:s,slots:u,expose:f}){const d=e.horizontal,p=t(),m=q(e.data.length,e.itemSize,e.overscan,void 0,0,!e.itemSize),v=((e,t)=>{const o=t?"width":"height",r=t?"innerWidth":"innerHeight",n=new WeakMap,s=N((t=>{const r=[];for(const{target:e,contentRect:s}of t){if(!e.offsetParent)continue;const t=n.get(e);t!=a&&r.push([t,s[o]])}r.length&&e.H(3,r)}));let i;return{te(t){const o=O(k(t)),n=()=>{e.H(4,o[r])};o.addEventListener("resize",n),n(),i=()=>{o.removeEventListener("resize",n)}},oe:(e,t)=>(n.set(e,t),s.J(e),()=>{n.delete(e),s.L(e)}),re(){i&&i(),s.C()}}})(m,d),y=((e,t)=>{let o,r,n;const s=(e,t,o,r,n=0)=>{const i=r?"offsetLeft":"offsetTop",l=n+(r&&j()?o.innerWidth-e[i]-e.offsetWidth:e[i]),c=e.offsetParent;return e!==t&&c?s(c,t,o,r,l):l},i=async(r,s)=>{if(!o)return void _((()=>i(r,s)));n&&n();const l=()=>{let t;return[new Promise(((o,r)=>{t=o,n=r,B(e)&&P(r,150)})),e.A(2,(()=>{t&&t()}))]},c=O(k(o));if(s&&T()){for(;e.H(8,r()),e.O();){const[e,t]=l();try{await e}catch(e){return}finally{t()}}c.scroll({[t?"left":"top"]:R(r(),t),behavior:"smooth"})}else for(;;){const[o,n]=l();try{c.scroll({[t?"left":"top"]:R(r(),t)}),e.H(7),await o}catch(e){return}finally{n()}}};return{ne(n){o=n;const i=t?"scrollX":"scrollY",l=k(n),c=O(l),a=l.body;r=M(e,c,t,(()=>R(c[i],t)),((o,r)=>{r?c.scroll({[t?"left":"top"]:e.q()+o}):c.scrollBy(t?o:0,t?0:o)}),(()=>s(n,a,c,t)))},re(){r&&r.C(),o=void 0},ce:()=>{r&&r.F()},le(r,{align:n,smooth:l,offset:c=0}={}){if(!o)return;if(r=h(r,0,e.B()-1),"nearest"===n){const t=e.j(r),o=e.q();if(t<o)n="start";else{if(!(t+e.T(r)>o+e.p()))return;n="end"}}const a=k(o),u=O(a),f=a.documentElement,d=()=>e.p()-(t?f.clientWidth:f.clientHeight);i((()=>c+s(o,a.body,u,t)+e.j(r)+("end"===n?e.T(r)-(e.p()-d()):"center"===n?(e.T(r)-(e.p()-d()))/2:0)),l)}}})(m,d),b=t(m.h()),S=m.A(1,(()=>{b.value=m.h()})),g=m.A(4,(()=>{s("scroll")})),x=m.A(8,(()=>{s("scrollEnd")})),z=o((e=>{b.value;const t=m.v();return e&&V(e,t)?e:t})),w=o((()=>b.value&&m.P())),$=o((()=>b.value&&m.M()));return l((()=>{const e=p.value;e&&(v.te(e),y.ne(e))})),c((()=>{S(),g(),x(),v.re(),y.re()})),r((()=>e.data.length),(t=>{m.H(5,[t,e.shift])})),r([b],(()=>{y.ce()}),{flush:"post"}),f({findStartIndex:m.S,findEndIndex:m.I,scrollToIndex:y.le}),()=>{const t=e.as,o=e.item,[r,s]=z.value,l=$.value,c=[];for(let t=r,i=s;t<=i;t++){const r=u.default({item:e.data[t],index:t})[0];c.push(n(A,{key:H(r,t),W:b,X:m,U:v.oe,D:t,Y:r,G:d,Z:o},null,8,["W","X","U","D","Y","G","Z"]))}return n(t,{ref:p,style:{contain:"strict",overflowAnchor:"none",overflow:"clip",flex:"none",position:"relative",width:d?l+"px":"100%",height:d?"100%":l+"px",pointerEvents:w.value?"none":void 0}},"function"==typeof(a=c)||"[object Object]"===Object.prototype.toString.call(a)&&!i(a)?c:{default:()=>[c],_:2},8,["style"]);var a}}});export{F as VList,C as Virtualizer,J as WindowVirtualizer};
//# sourceMappingURL=index.mjs.map