You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
paopao-ce/web/dist/assets/v3-infinite-loading-fcb59c3...

2 lines
2.8 KiB

import{r as v,R as B,j as H,H as L,o as b,c as h,S as p,L as j,O as u,a as d,M as g,w as y,y as C,U as N,V as O}from"./@vue-ca177dbe.js";const x=(e,o)=>{const t=e.__vccOpts||e;for(const[n,a]of o)t[n]=a;return t},V={},$=e=>(N("data-v-259be2b2"),e=e(),O(),e),M={class:"container"},R=$(()=>d("div",{class:"spinner"},null,-1)),T=[R];function U(e,o){return b(),h("div",M,T)}const D=x(V,[["render",U],["__scopeId","data-v-259be2b2"],["__file","/home/oumoussa/side-projects/infinite/src/components/Spinner.vue"]]),z=e=>({loading(){e.value="loading"},loaded(){e.value="loaded"},complete(){e.value="complete"},error(){e.value="error"}}),A=(e,o,t)=>()=>{const n=t.parentEl||document.documentElement;t.prevHeight=n.scrollHeight,o.loading(),e("infinite",o)},F=(e,o)=>{const t=e.getBoundingClientRect();if(!o)return t.top>=0&&t.bottom<=window.innerHeight;const n=o.getBoundingClientRect();return t.top>=n.top&&t.bottom<=n.bottom},_=e=>{e.parentEl=document.querySelector(e.target)||null;let o=`0px 0px ${e.distance}px 0px`;e.top&&(o=`${e.distance}px 0px 0px 0px`);const t=new IntersectionObserver(n=>{n[0].isIntersecting&&(e.firstload&&e.emit(),e.firstload=!0)},{root:e.parentEl,rootMargin:o});return t.observe(e.infiniteLoading.value),t},G={class:"state-error"},K={__name:"InfiniteLoading",props:{top:{type:Boolean,required:!1},target:{type:[String,Boolean],required:!1},distance:{type:Number,required:!1,default:0},identifier:{required:!1},firstload:{type:Boolean,required:!1,default:!0},slots:{type:Object,required:!1}},emits:["infinite"],setup(e,{emit:o}){const t=e;let n=null;const a=v(null),s=v("ready"),{top:m,firstload:E,target:k,distance:I}=t,{identifier:f}=B(t),r={infiniteLoading:a,target:k,top:m,firstload:E,distance:I,prevHeight:0,parentEl:null};r.emit=A(o,z(s),r);const S=()=>y(s,async i=>{const l=r.parentEl||document.documentElement;await C(),i=="loaded"&&m&&(l.scrollTop=l.scrollHeight-r.prevHeight),i=="loaded"&&F(a.value,r.parentEl)&&r.emit(),i=="complete"&&n.disconnect()}),q=()=>y(f,()=>{s.value="ready",n.disconnect(),n=_(r)});return H(()=>{n=_(r),S(),f&&q()}),L(()=>{n.disconnect()}),(i,l)=>(b(),h("div",{ref_key:"infiniteLoading",ref:a},[s.value=="loading"?p(i.$slots,"spinner",{key:0},()=>[j(D)],!0):u("v-if",!0),s.value=="complete"?p(i.$slots,"complete",{key:1},()=>{var c;return[d("span",null,g(((c=e.slots)==null?void 0:c.complete)||"No more results!"),1)]},!0):u("v-if",!0),s.value=="error"?p(i.$slots,"error",{key:2,retry:r.emit},()=>{var c;return[d("span",G,[d("span",null,g(((c=e.slots)==null?void 0:c.error)||"Oops something went wrong!"),1),d("button",{class:"retry",onClick:l[0]||(l[0]=(...w)=>r.emit&&r.emit(...w))}," retry ")])]},!0):u("v-if",!0)],512))}},J=x(K,[["__scopeId","data-v-9d82030b"],["__file","/home/oumoussa/side-projects/infinite/src/components/InfiniteLoading.vue"]]);export{J as K};