UNPKG

n8n-editor-ui

Version:

Workflow Editor UI for n8n

3 lines (2 loc) 2.88 kB
import{y as v,a1 as S,v as C,$ as H,o as b,f as x,r as p,e as $,k as u,g as c,t as g,C as y,x as L,aw as N,ax as j}from"./vendor-18a4b4e1.js";const h=(e,o)=>{const t=e.__vccOpts||e;for(const[n,a]of o)t[n]=a;return t},O={},V=e=>(N("data-v-259be2b2"),e=e(),j(),e),M={class:"container"},R=V(()=>c("div",{class:"spinner"},null,-1)),T=[R];function D(e,o){return b(),x("div",M,T)}const U=h(O,[["render",D],["__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:k,target:E,distance:I}=t,{identifier:f}=S(t),r={infiniteLoading:a,target:E,top:m,firstload:k,distance:I,prevHeight:0,parentEl:null};r.emit=A(o,z(s),r);const q=()=>y(s,async i=>{const l=r.parentEl||document.documentElement;await L(),i=="loaded"&&m&&(l.scrollTop=l.scrollHeight-r.prevHeight),i=="loaded"&&F(a.value,r.parentEl)&&r.emit(),i=="complete"&&n.disconnect()}),w=()=>y(f,()=>{s.value="ready",n.disconnect(),n=_(r)});return C(()=>{n=_(r),q(),f&&w()}),H(()=>{n.disconnect()}),(i,l)=>(b(),x("div",{ref_key:"infiniteLoading",ref:a},[s.value=="loading"?p(i.$slots,"spinner",{key:0},()=>[$(U)],!0):u("v-if",!0),s.value=="complete"?p(i.$slots,"complete",{key:1},()=>{var d;return[c("span",null,g(((d=e.slots)==null?void 0:d.complete)||"No more results!"),1)]},!0):u("v-if",!0),s.value=="error"?p(i.$slots,"error",{key:2,retry:r.emit},()=>{var d;return[c("span",G,[c("span",null,g(((d=e.slots)==null?void 0:d.error)||"Oops something went wrong!"),1),c("button",{class:"retry",onClick:l[0]||(l[0]=(...B)=>r.emit&&r.emit(...B))}," retry ")])]},!0):u("v-if",!0)],512))}},J=h(K,[["__scopeId","data-v-9d82030b"],["__file","/home/oumoussa/side-projects/infinite/src/components/InfiniteLoading.vue"]]);export{J as K}; //# sourceMappingURL=v3-infinite-loading-8fbfd594.js.map