virtua/lib/vue/index.js

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