vue-waterall-virtuallist/dist/index.min.js

waterfall virtuallist plugin

/*!
 * Vue-waterfall-virtualList.js v0.0.3
 * (c) 2023 Dajiaman <dajiaman@live.com>
 * Released under the MIT License.
 */
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("vue")):"function"==typeof define&&define.amd?define(["vue"],t):(e="undefined"!=typeof globalThis?globalThis:e||self)["Vue-waterfall-virtualList"]=t(e.vue)}(this,function(w){"use strict";var e={index:{type:[Number,String]},uniqueKey:{type:String},tag:{type:String,required:!0},source:{type:Object},component:{type:[Object,Function]},slotComponent:{type:Function},extraProps:{type:Object},scopedSlots:{type:Object},columnGap:{type:Number},rowGap:{type:Number}};const b=w.defineComponent({name:"waterfallVirtualListItem",props:e,data(){return{resizeObserver:void 0}},setup(u){const d=w.ref(null);return()=>{var{tag:e,component:t,source:o,slotComponent:n,index:r,columnGap:i,rowGap:a,uniqueKey:l}=u;return w.h(e||"div",{key:l,"data-key":l,ref:d,role:"listitem"},[n?w.h("div",n({item:o,index:r,scope:u})):w.h(t,{item:o,style:{paddingLeft:`${i?i/2:0}px`,paddingRight:`${i?i/2:0}px`,paddingBottom:a+"px",boxSizing:"border-box"}})])}}});return w.defineComponent({name:"waterfallVirtualList",props:{dataKey:{type:[String,Function],required:!0,default:[]},columnGap:{type:Number,default:16},rowGap:{type:Number,default:16},dataSource:{type:Array,required:!0},widthKey:{type:String,default:"width",required:!0},heightKey:{type:String,default:"height",required:!0},columnWidth:{type:Number,required:!0},dataComponent:{type:[Object,Function]},rootTag:{type:String,default:"div"},wrapTag:{type:String,default:"div"},wrapClass:{type:String,default:""},wrapStyle:{type:Object},itemTag:{type:String,default:"div"},itemClass:{type:String,default:""},itemClassAdd:{type:Function},itemStyle:{type:Object},upThreshold:{type:Number,default:200},downThreshold:{type:Number,default:200},bottomThreshold:{type:Number,default:0},footerTag:{type:String,default:"div"},footerClass:{type:String,default:"footer"},footerStyle:{type:Object}},setup(f,{slots:u,emit:i}){let t=0,d=w.ref(0),p=[],h=[],y=w.ref([]),s=w.ref(null);const{columnWidth:g,dataSource:v}=f;function o(){if(v&&0!==v.length){var e=document.documentElement.clientWidth,e=(t=e,parseInt(t/g+""));d.value!==e&&(d.value=e,l()),p=[];for(let e=0;e<d.value;e++)p.push(0)}}function a(){if(s&&s.value){var e=s.value,{downThreshold:t,upThreshold:o}=f;const n=Math.floor(window.scrollY-e.offsetTop-o),r=Math.floor(window.scrollY+window.innerHeight-e.offsetTop+t),i=[];h.map((e,t)=>{e.top>=r||e.bottom<=n||i.push(t)}),y.value=i}else y.value=Array.from({length:20},(e,t)=>t++)}w.watch(()=>v.length,()=>{l(),a()});const e=e=>{a();var t=document.documentElement.scrollTop,o=document.documentElement.clientHeight||document.body.clientHeight,n=document.documentElement.scrollHeight||document.body.scrollHeight,r=f["bottomThreshold"];n<=t+o+1+r&&i("tobottom")},n=e=>{o(),a()};function r(){if(v&&0!==v.length){h=[];var{widthKey:t,heightKey:o,columnGap:n,rowGap:r}=f;for(let e=0;e<v.length;e++){var i=v[e],i=i[o]/i[t],i=Math.floor(i*(g-n))+r,a=(a=p,Math.min.apply(null,a)),a=p.indexOf(a);p[a]+=i,h[e]={height:i,colIndex:a,top:p[a]-i,bottom:p[a]}}}}function l(){o(),r()}return l(),w.onMounted(()=>{document.addEventListener("scroll",e,{passive:!1}),window.addEventListener("resize",n,{passive:!1}),a()}),w.onUnmounted(()=>{document.removeEventListener("scroll",e),window.removeEventListener("resize",n)}),w.onActivated(()=>{document.addEventListener("scroll",e,{passive:!1}),window.addEventListener("resize",n,{passive:!1})}),w.onDeactivated(()=>{document.removeEventListener("scroll",e),window.removeEventListener("resize",n)}),()=>{e=p;var e=Math.max.apply(null,e),{rootTag:t,wrapTag:o,wrapClass:n,wrapStyle:r,footerTag:i,footerClass:a,footerStyle:l}=f;return w.h(t,{},[w.h(o,{ref:s,style:{position:"relative",width:g*d.value+"px",height:e+"px",...r},class:n,role:"list"},function(){var{dataComponent:t,itemTag:o,dataKey:n,columnGap:r,rowGap:i,itemClass:a,itemClassAdd:l}=f,u=[],d=y.value;for(let e=0;e<d.length;e++){var p=d[e],s=v[p],c=h[p],m="function"==typeof n?n(s):s[n];"string"==typeof m||"number"==typeof m?u.push(w.h(b,{index:p,uniqueKey:m,component:t,columnGap:r,rowGap:i,source:s,tag:o,style:{position:"absolute",left:"0px",top:"0px",width:g+"px",height:c.height+"px",transform:`translateX(${g*c.colIndex}px) translateY(${c.bottom-c.height}px)`},class:""+a+(l?" "+l(p):"")})):console.warn(`Cannot get the data-key '${n}' from data-sources.`)}return u}()),u.footer?w.h(i,{class:a,style:l},[w.renderSlot(u,"footer")]):null])}}})});