virtua/lib/vue/index.cjs

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

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