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 r,watch as o,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,r)=>u(r,f(t,e)),m=e=>[...e].sort(((e,t)=>e-t)),_="function"==typeof queueMicrotask?queueMicrotask:e=>{Promise.resolve().then(e)},v=e=>{let t,r;return()=>(t||(t=!0,r=e()),r)},b=-1,y=(e,t,r)=>{const o=r?"unshift":"push";for(let r=0;r<t;r++)e[o](b);return e},S=(e,t)=>{const r=e.t[t];return r===b?e.o:r},g=(e,t,r)=>{const o=e.t[t]===b;return e.t[t]=r,e.i=u(t,e.i),o},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 r=e.i,o=e.u[r];for(;r<t;)o+=S(e,r),e.u[++r]=o;return e.i=t,o},z=(e,t,r=0,o=e.l-1)=>{for(;r<=o;){const n=p((r+o)/2),s=x(e,n);if(s<=t){if(s+S(e,n)>t)return n;r=n+1}else o=n-1}return h(r,0,e.l-1)},$=(e,t,r)=>{const o=t-e.l;return e.i=r?-1:u(t-1,e.i),e.l=t,o>0?(y(e.u,o),y(e.t,o,r),e.o*o):(e.u.splice(o),(r?e.t.splice(0,-o):e.t.splice(o)).reduce(((t,r)=>t-(r===b?e.o:r)),0))},w="undefined"!=typeof window,I=()=>document.documentElement,k=e=>e.ownerDocument,O=e=>e.defaultView,j=/*#__PURE__*/v((()=>!!w&&"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,r=4,o=0,n,s=!1)=>{let i=!!o,l=1,c=0,p=0,h=0,_=0,v=0,w=0,I=0,k=0,O=i?[0,f(o-1,0)]:a,j=[0,0],T=0;const B=((e,t)=>({o:t,t:y([],e),l:e,i:-1,u:y([],e)}))(e,t),q=new Set,P=()=>h-p,R=()=>P()+v+_,M=e=>((e,t,r,o)=>{if(o=u(o,e.l-1),x(e,o)<=t){const n=z(e,t+r,o);return[z(e,t,o,n),n]}{const n=z(e,t,void 0,o);return[n,z(e,t+r,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 w?[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,r)),2!==I&&(t+=f(0,r)),[f(e,0),u(t,B.l-1)]},S:()=>z(B,R()),I:()=>z(B,R()+c),k:e=>B.t[e]===b,O:()=>!!O&&B.t.slice(f(0,O[0]-1),u(B.l-1,O[1]+1)+1).includes(b),j:A,T:H,B:()=>B.l,q:()=>h,P:()=>0!==I,p:()=>c,R:()=>p,M:N,N:()=>(w=_,_=0,[w,2===k||P()+c>=N()]),A:(e,t)=>{const r=[e,t];return q.add(r),()=>{q.delete(r)}},H:(e,t)=>{let r,o,n=0;switch(e){case 1:{const e=w;w=0;const r=t-h,s=d(r);e&&s<d(e)+1||0!==k||(I=r<0?2:1),i&&(O=a,i=!1),h=t,n=4;const l=P();l>=-c&&l<=N()&&(n+=1,o=s>c);break}case 2:n=8,0!==I&&(r=!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,r])=>((2===k||(O?!i&&t<O[0]:A(t)+(0===I&&0===k?H(t):0)<P()))&&(e+=r-H(t)),e)),0));for(const[t,r]of e){const e=H(t),o=g(B,t,r);s&&(T+=o?r:r-e)}s&&c&&T>c&&(V(((e,t)=>{let r=0;const o=[];e.t.forEach(((e,n)=>{e!==b&&(o.push(e),n<t&&r++)})),e.i=-1;const n=m(o),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-r,0)})(B,z(B,R()))),s=!1),n=3,o=!0;break}case 4:c!==t&&(c=t,n=3);break;case 5:t[1]?(V($(B,t[0],!0)),k=2,n=1):($(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),r&&v&&(_+=v,v=0),q.forEach((([e,t])=>{n&e&&t(o)})))}}},P=setTimeout,R=(e,t)=>t&&j()?-e:e,M=(e,t,r,o,n,s)=>{const i=Date.now;let l=0,c=!1,u=!1,f=!1,d=!1;const p=(()=>{let t;const r=()=>{t!=a&&clearTimeout(t)},o=()=>{r(),t=P((()=>{t=a,(()=>{if(c||u)return c=!1,void p();f=!1,e.H(2)})()}),150)};return o.V=r,o})(),h=()=>{l=i(),f&&(d=!0),s&&e.H(6,s()),e.H(1,o()),p()},m=t=>{if(c||!e.P()||t.ctrlKey)return;const o=i()-l;150>o&&50<o&&(r?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,r),s,d),d=!1,s&&e.p()>e.M()&&e.H(1,o()))}}},N=e=>{let t;return{J(r){(t||(t=new(O(k(r)).ResizeObserver)(e))).observe(r)},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=r((()=>e.W.value&&e.X.j(e.D))),a=r((()=>e.W.value&&e.X.k(e.D)));return o((()=>l.value&&e.D),((t,r,o)=>{o(e.U(l.value,e.D))}),{flush:"post"}),()=>{var t;const{Y:r,G:o,K:u,Z:f}=e,d=a.value,{style:p,...h}=null!==(t=e.ee)&&void 0!==t?t:{},m={position:d&&u?void 0:"absolute",[o?"height":"width"]:"100%",[o?"top":"left"]:"0px",[o?j()?"right":"left":"top"]:c.value+"px",visibility:!d||u?"visible":"hidden",...p};return o&&(m.display="flex"),n(f,s({ref:l,style:m},h),"function"==typeof(_=r)||"[object Object]"===Object.prototype.toString.call(_)&&!i(_)?r:{default:()=>[r],_:2},16,["style"]);var _}}}),H=(e,t)=>{const r=e.key;return null!=r?r:"_"+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,b=t(),y=q(e.data.length,e.itemSize,e.overscan,e.ssrCount,0,!e.itemSize),S=((e,t)=>{let r;const o=t?"width":"height",n=new WeakMap,s=N((t=>{const s=[];for(const{target:i,contentRect:l}of t)if(i.offsetParent)if(i===r)e.H(4,l[o]);else{const e=n.get(i);e!=a&&s.push([e,l[o]])}s.length&&e.H(3,s)}));return{te(e){s.J(r=e)},re:(e,t)=>(n.set(e,t),s.J(e),()=>{n.delete(e),s.L(e)}),oe:s.C}})(y,v),g=((e,t)=>{let r,o,n;const s=t?"scrollLeft":"scrollTop",i=t?"overflowX":"overflowY",l=async(o,i)=>{if(!r)return void _((()=>l(o,i)));n&&n();const c=()=>{let t;return[new Promise(((r,o)=>{t=r,n=o,B(e)&&P(o,150)})),e.A(2,(()=>{t&&t()}))]};if(i&&T()){for(;e.H(8,o()),e.O();){const[e,t]=c();try{await e}catch(e){return}finally{t()}}r.scrollTo({[t?"left":"top"]:R(o(),t),behavior:"smooth"})}else for(;;){const[n,i]=c();try{r[s]=R(o(),t),e.H(7),await n}catch(e){return}finally{i()}}};return{ne(l){r=l,o=M(e,l,t,(()=>R(l[s],t)),((t,r,o)=>{if(o){const e=l.style,t=e[i];e[i]="hidden",P((()=>{e[i]=t}))}r?(l[s]=e.q()+t,n&&n()):l[s]+=t}))},oe(){o&&o.C()},se(e){l((()=>e))},ie(t){t+=e.q(),l((()=>t))},le(t,{align:r,smooth:o,offset:n=0}={}){if(t=h(t,0,e.B()-1),"nearest"===r){const o=e.j(t),n=e.q();if(o<n)r="start";else{if(!(o+e.T(t)>n+e.p()))return;r="end"}}l((()=>n+e.R()+e.j(t)+("end"===r?e.T(t)-e.p():"center"===r?(e.T(t)-e.p())/2:0)),o)},ce:()=>{o&&o.F()}}})(y,v),x=t(y.h()),z=y.A(1,(()=>{x.value=y.h()})),$=y.A(4,(()=>{s("scroll",y.q())})),w=y.A(8,(()=>{s("scrollEnd")})),I=r((e=>{x.value;const t=y.v();return e&&V(e,t)?e:t})),k=r((()=>x.value&&y.P())),O=r((()=>x.value&&y.M()));return l((()=>{p=!1,_((()=>{const t=e=>{S.te(e),g.ne(e)};e.scrollRef?t(e.scrollRef):t(b.value.parentElement)}))})),c((()=>{z(),$(),w(),S.oe(),g.oe()})),o((()=>e.data.length),(t=>{y.H(5,[t,e.shift])})),o((()=>e.startMargin),(e=>{y.H(6,e)}),{immediate:!0}),o([x],(()=>{g.ce()}),{flush:"post"}),u({get scrollOffset(){return y.q()},get scrollSize(){return(e=>f(e.M(),e.p()))(y)},get viewportSize(){return y.p()},findStartIndex:y.S,findEndIndex:y.I,getItemOffset:y.j,getItemSize:y.T,scrollToIndex:g.le,scrollTo:g.se,scrollBy:g.ie}),()=>{const t=e.as,r=e.item,[o,s]=I.value,l=O.value,c=[];function a(t){var o;const s=d.default({item:e.data[t],index:t})[0];return n(A,{key:H(s,t),W:x,X:y,U:S.re,D:t,Y:s,G:v,K:p,Z:r,ee:null===(o=e.itemProps)||void 0===o?void 0:o.call(e,{item:e.data[t],index:t})},null,8,["W","X","U","D","Y","G","K","Z","ee"])}for(let e=o,t=s;e<=t;e++)c.push(a(e));if(e.keepMounted){const t=[],r=[];m(e.keepMounted).forEach((e=>{e<o&&t.push(a(e)),e>s&&r.push(a(e))})),c.unshift(...t),c.push(...r)}return n(t,{ref:b,style:{overflowAnchor:"none",flex:"none",position:"relative",visibility:"hidden",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:r,expose:o,slots:s}){const l=e.horizontal,c=e=>{r("scroll",e)},a=()=>{r("scrollEnd")},u=t();return o({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 r=t?"width":"height",o=t?"innerWidth":"innerHeight",n=new WeakMap,s=N((t=>{const o=[];for(const{target:e,contentRect:s}of t){if(!e.offsetParent)continue;const t=n.get(e);t!=a&&o.push([t,s[r]])}o.length&&e.H(3,o)}));let i;return{te(t){const r=O(k(t)),n=()=>{e.H(4,r[o])};r.addEventListener("resize",n),n(),i=()=>{r.removeEventListener("resize",n)}},re:(e,t)=>(n.set(e,t),s.J(e),()=>{n.delete(e),s.L(e)}),oe(){i&&i(),s.C()}}})(m,d),b=((e,t)=>{let r,o,n;const s=(e,t,r,o,n=0)=>{const i=o?"offsetLeft":"offsetTop",l=n+(o&&j()?r.innerWidth-e[i]-e.offsetWidth:e[i]),c=e.offsetParent;return e!==t&&c?s(c,t,r,o,l):l},i=async(o,s)=>{if(!r)return void _((()=>i(o,s)));n&&n();const l=()=>{let t;return[new Promise(((r,o)=>{t=r,n=o,B(e)&&P(o,150)})),e.A(2,(()=>{t&&t()}))]},c=O(k(r));if(s&&T()){for(;e.H(8,o()),e.O();){const[e,t]=l();try{await e}catch(e){return}finally{t()}}c.scroll({[t?"left":"top"]:R(o(),t),behavior:"smooth"})}else for(;;){const[r,n]=l();try{c.scroll({[t?"left":"top"]:R(o(),t)}),e.H(7),await r}catch(e){return}finally{n()}}};return{ne(n){r=n;const i=t?"scrollX":"scrollY",l=k(n),c=O(l),a=l.body;o=M(e,c,t,(()=>R(c[i],t)),((r,o)=>{o?c.scroll({[t?"left":"top"]:e.q()+r}):c.scrollBy(t?r:0,t?0:r)}),(()=>s(n,a,c,t)))},oe(){o&&o.C(),r=void 0},ce:()=>{o&&o.F()},le(o,{align:n,smooth:l,offset:c=0}={}){if(!r)return;if(o=h(o,0,e.B()-1),"nearest"===n){const t=e.j(o),r=e.q();if(t<r)n="start";else{if(!(t+e.T(o)>r+e.p()))return;n="end"}}const a=k(r),u=O(a),f=a.documentElement,d=()=>e.p()-(t?f.clientWidth:f.clientHeight);i((()=>c+s(r,a.body,u,t)+e.j(o)+("end"===n?e.T(o)-(e.p()-d()):"center"===n?(e.T(o)-(e.p()-d()))/2:0)),l)}}})(m,d),y=t(m.h()),S=m.A(1,(()=>{y.value=m.h()})),g=m.A(4,(()=>{s("scroll")})),x=m.A(8,(()=>{s("scrollEnd")})),z=r((e=>{y.value;const t=m.v();return e&&V(e,t)?e:t})),$=r((()=>y.value&&m.P())),w=r((()=>y.value&&m.M()));return l((()=>{const e=p.value;e&&(v.te(e),b.ne(e))})),c((()=>{S(),g(),x(),v.oe(),b.oe()})),o((()=>e.data.length),(t=>{m.H(5,[t,e.shift])})),o([y],(()=>{b.ce()}),{flush:"post"}),f({findStartIndex:m.S,findEndIndex:m.I,scrollToIndex:b.le}),()=>{const t=e.as,r=e.item,[o,s]=z.value,l=w.value,c=[];for(let t=o,i=s;t<=i;t++){const o=u.default({item:e.data[t],index:t})[0];c.push(n(A,{key:H(o,t),W:y,X:m,U:v.re,D:t,Y:o,G:d,Z:r},null,8,["W","X","U","D","Y","G","Z"]))}return n(t,{ref:p,style:{overflowAnchor:"none",flex:"none",position:"relative",visibility:"hidden",width:d?l+"px":"100%",height:d?"100%":l+"px",pointerEvents:$.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