| 1 |
- import{d as A,b as R,$ as f,k as re,j as G,az as le,x as J,am as de,w as M,ar as ue,aq as ce,ak as he}from"./@vue-cb50a1c4.js";const T={FRONT:"FRONT",BEHIND:"BEHIND"},m={INIT:"INIT",FIXED:"FIXED",DYNAMIC:"DYNAMIC"},Y=2;class fe{constructor(e,i){this.init(e,i)}init(e,i){this.param=e,this.callUpdate=i,this.sizes=new Map,this.firstRangeTotalSize=0,this.firstRangeAverageSize=0,this.lastCalcIndex=0,this.fixedSizeValue=0,this.calcType=m.INIT,this.offset=0,this.direction="",this.range=Object.create(null),e&&this.checkRange(0,e.keeps-1)}destroy(){this.init(null,null)}getRange(){const e=Object.create(null);return e.start=this.range.start,e.end=this.range.end,e.padFront=this.range.padFront,e.padBehind=this.range.padBehind,e}isBehind(){return this.direction===T.BEHIND}isFront(){return this.direction===T.FRONT}getOffset(e){return(e<1?0:this.getIndexOffset(e))+this.param.slotHeaderSize}updateParam(e,i){this.param&&e in this.param&&(e==="uniqueIds"&&this.sizes.forEach((a,n)=>{i.includes(n)||this.sizes.delete(n)}),this.param[e]=i)}saveSize(e,i){this.sizes.set(e,i),this.calcType===m.INIT?(this.fixedSizeValue=i,this.calcType=m.FIXED):this.calcType===m.FIXED&&this.fixedSizeValue!==i&&(this.calcType=m.DYNAMIC,delete this.fixedSizeValue),this.calcType!==m.FIXED&&typeof this.firstRangeTotalSize<"u"&&(this.sizes.size<Math.min(this.param.keeps,this.param.uniqueIds.length)?(this.firstRangeTotalSize=[...this.sizes.values()].reduce((a,n)=>a+n,0),this.firstRangeAverageSize=Math.round(this.firstRangeTotalSize/this.sizes.size)):delete this.firstRangeTotalSize)}handleDataSourcesChange(){let e=this.range.start;this.isFront()?e=e-Y:this.isBehind()&&(e=e+Y),e=Math.max(e,0),this.updateRange(this.range.start,this.getEndByStart(e))}handleSlotSizeChange(){this.handleDataSourcesChange()}handleScroll(e){this.direction=e<this.offset?T.FRONT:T.BEHIND,this.offset=e,this.param&&(this.direction===T.FRONT?this.handleFront():this.direction===T.BEHIND&&this.handleBehind())}handleFront(){const e=this.getScrollOvers();if(e>this.range.start)return;const i=Math.max(e-this.param.buffer,0);this.checkRange(i,this.getEndByStart(i))}handleBehind(){const e=this.getScrollOvers();e<this.range.start+this.param.buffer||this.checkRange(e,this.getEndByStart(e))}getScrollOvers(){const e=this.offset-this.param.slotHeaderSize;if(e<=0)return 0;if(this.isFixedType())return Math.floor(e/this.fixedSizeValue);let i=0,a=0,n=0,d=this.param.uniqueIds.length;for(;i<=d;){if(a=i+Math.floor((d-i)/2),n=this.getIndexOffset(a),n===e)return a;n<e?i=a+1:n>e&&(d=a-1)}return i>0?--i:0}getIndexOffset(e){if(!e)return 0;let i=0,a=0;for(let n=0;n<e;n++)a=this.sizes.get(this.param.uniqueIds[n]),i=i+(typeof a=="number"?a:this.getEstimateSize());return this.lastCalcIndex=Math.max(this.lastCalcIndex,e-1),this.lastCalcIndex=Math.min(this.lastCalcIndex,this.getLastIndex()),i}isFixedType(){return this.calcType===m.FIXED}getLastIndex(){return this.param.uniqueIds.length-1}checkRange(e,i){const a=this.param.keeps;this.param.uniqueIds.length<=a?(e=0,i=this.getLastIndex()):i-e<a-1&&(e=i-a+1),this.range.start!==e&&this.updateRange(e,i)}updateRange(e,i){this.range.start=e,this.range.end=i,this.range.padFront=this.getPadFront(),this.range.padBehind=this.getPadBehind(),this.callUpdate(this.getRange())}getEndByStart(e){const i=e+this.param.keeps-1;return Math.min(i,this.getLastIndex())}getPadFront(){return this.isFixedType()?this.fixedSizeValue*this.range.start:this.getIndexOffset(this.range.start)}getPadBehind(){const e=this.range.end,i=this.getLastIndex();return this.isFixedType()?(i-e)*this.fixedSizeValue:this.lastCalcIndex===i?this.getIndexOffset(i)-this.getIndexOffset(e):(i-e)*this.getEstimateSize()}getEstimateSize(){return this.isFixedType()?this.fixedSizeValue:this.firstRangeAverageSize||this.param.estimateSize}}const ge={dataKey:{type:[String,Function],required:!0},dataSources:{type:Array,required:!0,default:()=>[]},dataComponent:{type:[Object,Function],required:!0},keeps:{type:Number,default:30},extraProps:{type:[Object,Function]},estimateSize:{type:Number,default:50},direction:{type:String,default:"vertical"},start:{type:Number,default:0},offset:{type:Number,default:0},topThreshold:{type:Number,default:0},bottomThreshold:{type:Number,default:0},pageMode:{type:Boolean,default:!1},rootTag:{type:String,default:"div"},wrapTag:{type:String,default:"div"},wrapClass:{type:String,default:"wrap"},wrapStyle:{type:Object},itemTag:{type:String,default:"div"},itemClass:{type:String,default:""},itemClassAdd:{type:Function},itemStyle:{type:Object},headerTag:{type:String,default:"div"},headerClass:{type:String,default:""},headerStyle:{type:Object},footerTag:{type:String,default:"div"},footerClass:{type:String,default:""},footerStyle:{type:Object},itemScopedSlots:{type:Object}},pe={index:{type:Number},event:{type:String},tag:{type:String},horizontal:{type:Boolean},source:{type:Object},component:{type:[Object,Function]},uniqueKey:{type:[String,Number]},extraProps:{type:Object},scopedSlots:{type:Object}},Se={event:{type:String},uniqueKey:{type:String},tag:{type:String},horizontal:{type:Boolean}},Q=(s,e,i)=>{let a=null;const n=re(()=>s.horizontal?"offsetWidth":"offsetHeight"),d=()=>e.value?e.value[n.value]:0,c=()=>{const{event:u,uniqueKey:S,hasInitial:r}=s;i(u,S,d(),r)};G(()=>{typeof ResizeObserver<"u"&&(a=new ResizeObserver(()=>{c()}),e.value&&a.observe(e.value))}),le(()=>{c()}),J(()=>{a&&(a.disconnect(),a=null)})},me=A({name:"VirtualListItem",props:pe,emits:["itemResize"],setup(s,{emit:e}){const i=R(null);return Q(s,i,e),()=>{const{tag:a,component:n,extraProps:d={},index:c,source:u,scopedSlots:S={},uniqueKey:r}=s,N={...d,source:u,index:c};return f(a,{key:r,ref:i},{default:()=>[f(n,de(N,{scopedSlots:S}),null)]})}}}),W=A({name:"VirtualListSlot",props:Se,emits:["slotResize"],setup(s,{slots:e,emit:i}){const a=R(null);return Q(s,a,i),()=>{const{tag:n,uniqueKey:d}=s;return f(n,{ref:a,key:d},{default:()=>{var c;return[(c=e.default)==null?void 0:c.call(e)]}})}}});function H(s){return typeof s=="function"||Object.prototype.toString.call(s)==="[object Object]"&&!he(s)}var E;(function(s){s.ITEM="itemResize",s.SLOT="slotResize"})(E||(E={}));var I;(function(s){s.HEADER="thead",s.FOOTER="tfoot"})(I||(I={}));const ze=A({name:"VirtualList",props:ge,setup(s,{emit:e,slots:i,expose:a}){const n=s.direction==="horizontal",d=n?"scrollLeft":"scrollTop",c=R(null),u=R(),S=R(null);let r;M(()=>s.dataSources.length,()=>{r.updateParam("uniqueIds",K()),r.handleDataSourcesChange()}),M(()=>s.keeps,t=>{r.updateParam("keeps",t),r.handleSlotSizeChange()}),M(()=>s.start,t=>{w(t)}),M(()=>s.offset,t=>y(t));const N=t=>r.sizes.get(t),B=()=>s.pageMode?document.documentElement[d]||document.body[d]:u.value?Math.ceil(u.value[d]):0,D=()=>{const t=n?"clientWidth":"clientHeight";return s.pageMode?document.documentElement[t]||document.body[t]:u.value?Math.ceil(u.value[t]):0},P=()=>{const t=n?"scrollWidth":"scrollHeight";return s.pageMode?document.documentElement[t]||document.body[t]:u.value?Math.ceil(u.value[t]):0},Z=(t,o,l,h)=>{e("scroll",h,r.getRange()),r.isFront()&&s.dataSources.length&&t-s.topThreshold<=0?e("totop"):r.isBehind()&&t+o+s.bottomThreshold>=l&&e("tobottom")},q=t=>{const o=B(),l=D(),h=P();o<0||o+l>h+1||!h||(r.handleScroll(o),Z(o,l,h,t))},K=()=>{const{dataKey:t,dataSources:o=[]}=s;return o.map(l=>typeof t=="function"?t(l):l[t])},ee=t=>{c.value=t},te=()=>{r=new fe({slotHeaderSize:0,slotFooterSize:0,keeps:s.keeps,estimateSize:s.estimateSize,buffer:Math.round(s.keeps/3),uniqueIds:K()},ee),c.value=r.getRange()},w=t=>{if(t>=s.dataSources.length-1)k();else{const o=r.getOffset(t);y(o)}},y=t=>{s.pageMode?(document.body[d]=t,document.documentElement[d]=t):u.value&&(u.value[d]=t)},se=()=>{const t=[],{start:o,end:l}=c.value,{dataSources:h,dataKey:z,itemClass:V,itemTag:j,itemStyle:b,extraProps:v,dataComponent:x,itemScopedSlots:L}=s;for(let g=o;g<=l;g++){const p=h[g];if(p){const O=typeof z=="function"?z(p):p[z],C=typeof v=="function"?v(p):v,F=typeof x=="function"?x(p):x;typeof O=="string"||typeof O=="number"?t.push(f(me,{index:g,tag:j,event:E.ITEM,horizontal:n,uniqueKey:O,source:p,extraProps:C,component:F,scopedSlots:L,style:b,class:`${V}${s.itemClassAdd?" "+s.itemClassAdd(g):""}`,onItemResize:ie},null)):console.warn(`Cannot get the data-key '${z}' from data-sources.`)}else console.warn(`Cannot get the index '${g}' from data-sources.`)}return t},ie=(t,o)=>{r.saveSize(t,o),e("resized",t,o)},$=(t,o,l)=>{t===I.HEADER?r.updateParam("slotHeaderSize",o):t===I.FOOTER&&r.updateParam("slotFooterSize",o),l&&r.handleSlotSizeChange()},k=()=>{if(S.value){const t=S.value[n?"offsetLeft":"offsetTop"];y(t),setTimeout(()=>{B()+D()<P()&&k()},3)}},ae=()=>{if(u.value){const t=u.value.getBoundingClientRect(),{defaultView:o}=u.value.ownerDocument,l=n?t.left+o.pageXOffset:t.top+o.pageYOffset;r.updateParam("slotHeaderSize",l)}},ne=()=>r.sizes.size;return ue(()=>{te()}),ce(()=>{y(r.offset)}),G(()=>{s.start?w(s.start):s.offset&&y(s.offset),s.pageMode&&(ae(),document.addEventListener("scroll",q,{passive:!1}))}),J(()=>{r.destroy(),s.pageMode&&document.removeEventListener("scroll",q)}),a({scrollToBottom:k,getSizes:ne,getSize:N,getOffset:B,getScrollSize:P,getClientSize:D,scrollToOffset:y,scrollToIndex:w}),()=>{let t,o,l;const{pageMode:h,rootTag:z,wrapTag:V,wrapClass:j,wrapStyle:b,headerTag:v,headerClass:x,headerStyle:L,footerTag:g,footerClass:p,footerStyle:O}=s,{padFront:C,padBehind:F}=c.value,X={padding:n?`0px ${F}px 0px ${C}px`:`${C}px 0px ${F}px`},oe=b?Object.assign({},b,X):X,{header:_,footer:U}=i;return f(z,{ref:u,onScroll:!h&&q},{default:()=>[_&&f(W,{class:x,style:L,tag:v,event:E.SLOT,uniqueKey:I.HEADER,onSlotResize:$},H(t=_())?t:{default:()=>[t]}),f(V,{class:j,style:oe},H(o=se())?o:{default:()=>[o]}),U&&f(W,{class:p,style:O,tag:g,event:E.SLOT,uniqueKey:I.FOOTER,onSlotResize:$},H(l=U())?l:{default:()=>[l]}),f("div",{ref:S,style:{width:n?"0px":"100%",height:n?"100%":"0px"}},null)]})}}});export{ze as V};
|
