@wyxos/vibe 2.1.8 → 2.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/index.cjs +1 -1
- package/lib/index.js +538 -533
- package/package.json +1 -1
package/lib/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),ct={mode:"default",pageSize:20,backfillRequestDelayMs:2e3,enterStaggerMs:40,page:1,itemWidth:300,prefetchThresholdPx:200,gapX:16,gapY:16,headerHeight:0,footerHeight:0,overscanPx:600},Rt={key:0,"data-testid":"masonry-loader-spinner",class:"absolute inset-0 flex items-center justify-center"},Vt={key:1,"data-testid":"masonry-loader-error",class:"absolute inset-0 flex flex-col items-center justify-center gap-2 p-3"},Ct=["src","width","height","alt"],zt=["poster"],Ht=["src"],lt=e.defineComponent({__name:"MasonryLoader",props:{item:{},timeoutMs:{default:15e3}},emits:["success","error"],setup(l,{emit:y}){const c=l,s=y,u=e.ref(null),h=e.ref(!1),f=e.ref(!1),i=e.ref(!1),g=e.ref(0),p=e.computed(()=>{const B=c.item?.width,S=c.item?.height;return{aspectRatio:`${B} / ${S}`}}),b=e.computed(()=>c.item?.type==="image");let M=null,I=null;function T(){I!=null&&(window.clearTimeout(I),I=null)}function F(){T();const B=typeof c.timeoutMs=="number"&&Number.isFinite(c.timeoutMs)?c.timeoutMs:0;B<=0||(I=window.setTimeout(()=>{h.value&&(f.value||i.value||q(new Error("timeout")))},B))}function A(){h.value||(h.value=!0,f.value=!1,i.value=!1,F())}e.onMounted(()=>{if(typeof IntersectionObserver>"u"){A();return}M=new IntersectionObserver(B=>{for(const S of B)if(S.isIntersecting&&!((S.intersectionRatio??0)<.5)){A(),M?.disconnect(),M=null;return}},{threshold:[0,.5,1]}),u.value&&M.observe(u.value)}),e.onUnmounted(()=>{M?.disconnect(),M=null,T()});function P(){f.value||(f.value=!0,i.value=!1,T(),s("success",c.item))}function q(B){i.value||(f.value=!1,i.value=!0,T(),s("error",{item:c.item,error:B}))}function z(){h.value&&(f.value=!1,i.value=!1,g.value+=1,F())}return(B,S)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"rootEl",ref:u,class:"relative bg-slate-100",style:e.normalizeStyle(p.value)},[h.value&&!f.value&&!i.value?(e.openBlock(),e.createElementBlock("div",Rt,S[2]||(S[2]=[e.createElementVNode("svg",{class:"h-5 w-5 animate-spin text-slate-500",viewBox:"0 0 24 24","aria-hidden":"true"},[e.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",fill:"none",stroke:"currentColor","stroke-width":"4"}),e.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"})],-1)]))):h.value&&i.value?(e.openBlock(),e.createElementBlock("div",Vt,[S[3]||(S[3]=e.createElementVNode("p",{class:"text-center text-xs font-medium text-red-700"},"Failed to load",-1)),e.createElementVNode("button",{type:"button","data-testid":"masonry-loader-retry",class:"inline-flex items-center rounded-md border border-slate-200 bg-white px-2 py-1 text-xs font-medium text-slate-700",onClick:z}," Retry ")])):e.createCommentVNode("",!0),h.value&&b.value&&!i.value?(e.openBlock(),e.createElementBlock("img",{key:c.item.id+":img:"+g.value,class:e.normalizeClass(["h-full w-full object-cover transition-opacity duration-300",f.value?"opacity-100":"opacity-0"]),src:c.item.preview,width:c.item.width,height:c.item.height,loading:"lazy",alt:c.item.id,onLoad:P,onError:S[0]||(S[0]=V=>q(V))},null,42,Ct)):h.value&&!i.value?(e.openBlock(),e.createElementBlock("video",{key:c.item.id+":vid:"+g.value,class:e.normalizeClass(["h-full w-full object-cover transition-opacity duration-300",f.value?"opacity-100":"opacity-0"]),poster:c.item.preview,controls:"",preload:"metadata",onLoadedmetadata:P,onError:S[1]||(S[1]=V=>q(V))},[e.createElementVNode("source",{src:c.item.original,type:"video/mp4"},null,8,Ht)],42,zt)):e.createCommentVNode("",!0)],4))}}),ft=Symbol("masonryItemRegistry");function Lt(l,y){return!l||l<=0||!y||y<=0?1:Math.max(1,Math.floor(l/y))}function qt(l,y,c,s=0){if(!l||l<=0||!y||y<=0)return c;const u=typeof s=="number"&&s>0?s:0,h=Math.max(0,y-1)*u,f=l-h;return!f||f<=0?c:f/y}function Dt(l,y){const c=l?.width,s=l?.height;return typeof c=="number"&&typeof s=="number"&&c>0&&s>0?s/c*y:y}function dt(l){return Number.isFinite(l)&&l>0?Math.floor(l):1}function Ee(l){return Number.isFinite(l)&&l>0?Math.floor(l):0}function Ot(l){async function y(s){const u=Ee(s);if(u<=0)return;l.stats.value={...l.stats.value,cooldownMsTotal:u,cooldownMsRemaining:u};const h=Date.now(),f=100;await new Promise(i=>{const g=setInterval(()=>{const p=Date.now()-h,b=Math.max(0,u-p);l.stats.value={...l.stats.value,cooldownMsTotal:u,cooldownMsRemaining:b},b<=0&&(clearInterval(g),i())},f)})}async function c(s){const u=dt(l.getPageSize()),h=l.isEnabled(),f=Ee(l.getRequestDelayMs()),i=[];let g=0;l.buffer.value.length&&(g=l.buffer.value.length,i.push(...l.buffer.value),l.buffer.value=[]),l.stats.value={...l.stats.value,enabled:h,isBackfillActive:!1,isRequestInFlight:!1,requestPage:null,cooldownMsTotal:f,cooldownMsRemaining:0,progress:{collected:0,target:0},pageSize:u,bufferSize:0};const p=[];let b=s,M=0,I=!1;for(;i.length<u&&b!=null;){const A=b;I&&(l.stats.value={...l.stats.value,enabled:h,isBackfillActive:!0,isRequestInFlight:!0,requestPage:A,progress:{collected:Math.min(i.length,u),target:u},cooldownMsTotal:f,cooldownMsRemaining:0,pageSize:u});const P=await l.getContent(A);p.push(A),I&&(l.stats.value={...l.stats.value,enabled:h,isBackfillActive:!0,isRequestInFlight:!1,requestPage:null}),M+=P.items.length,l.markEnterFromLeft(P.items),i.push(...P.items),b=P.nextPage,!I&&i.length<u&&b!=null?(I=!0,l.stats.value={...l.stats.value,enabled:h,isBackfillActive:!0,isRequestInFlight:!1,requestPage:null,progress:{collected:Math.min(i.length,u),target:u},cooldownMsTotal:f,cooldownMsRemaining:0,pageSize:u}):I&&(l.stats.value={...l.stats.value,enabled:h,isBackfillActive:!0,progress:{collected:Math.min(i.length,u),target:u}}),I&&i.length<u&&b!=null&&await y(f)}const T=i.slice(0,u),F=i.slice(u);return l.buffer.value=F,l.stats.value={...l.stats.value,enabled:h,isBackfillActive:!1,isRequestInFlight:!1,requestPage:null,progress:{collected:0,target:0},cooldownMsTotal:f,cooldownMsRemaining:0,pageSize:u,bufferSize:F.length,lastBatch:{startPage:s,pages:p,usedFromBuffer:g,fetchedFromNetwork:M,collectedTotal:i.length,emitted:T.length,carried:F.length},totals:{pagesFetched:l.stats.value.totals.pagesFetched+p.length,itemsFetchedFromNetwork:l.stats.value.totals.itemsFetchedFromNetwork+M}},{batchItems:T,pages:p,nextPage:b}}return{loadBackfillBatch:c}}function $t(l){const y=l.columnCount,c=l.columnWidth,s=l.gapX,u=l.gapY,h=l.headerHeight,f=l.footerHeight,i=l.bucketPx,g=Array.from({length:y},()=>0),p=new Array(l.items.length),b=new Array(l.items.length),M=new Map,I=new Map;let T=0;for(let F=0;F<l.items.length;F+=1){const A=l.items[F];A?.id&&I.set(A.id,F);let P=0;for(let _=1;_<g.length;_+=1)g[_]<g[P]&&(P=_);const q=P*(c+s),z=g[P],B=Dt(A,c)+h+f;p[F]={x:q,y:z},b[F]=B,g[P]=z+B+u,T=Math.max(T,z+B);const S=Math.floor(z/i),V=Math.floor((z+B)/i);for(let _=S;_<=V;_+=1){const U=M.get(_);U?U.push(F):M.set(_,[F])}}return{positions:p,heights:b,buckets:M,contentHeight:T,indexById:I}}function Yt(l){const y=l.itemCount;if(!y)return[];if(l.viewportHeight<=0)return Array.from({length:y},(g,p)=>p);const c=Math.max(0,l.scrollTop-l.overscanPx),s=l.scrollTop+l.viewportHeight+l.overscanPx,u=Math.floor(c/l.bucketPx),h=Math.floor(s/l.bucketPx),f=new Set;for(let g=u;g<=h;g+=1){const p=l.buckets.get(g);if(p)for(const b of p)f.add(b)}const i=Array.from(f);return i.sort((g,p)=>g-p),i}const Xt={class:"hidden"},jt={key:0,class:"flex h-full items-center justify-center"},Wt={key:1,class:"text-sm font-medium text-red-700"},Gt={class:"relative"},Ut={key:0,class:"pointer-events-auto absolute inset-0"},Kt={class:"relative"},Jt={key:0,class:"pointer-events-auto absolute inset-0"},Qt={class:"mt-4 pb-2 text-center text-xs text-slate-600"},Zt={key:0,class:"inline-flex items-center justify-center gap-2"},en={key:1},tn={key:2},at=100,nn=200,rt=600,st=300,it=600,ut=600,on=400,ln=5,an=1e3,mt=e.defineComponent({inheritAttrs:!1,__name:"Masonry",props:e.mergeDefaults({getContent:{},mode:{},pageSize:{},backfillRequestDelayMs:{},enterStaggerMs:{},items:{},page:{},restoredPages:{},itemWidth:{},prefetchThresholdPx:{},gapX:{},gapY:{},headerHeight:{},footerHeight:{},overscanPx:{}},ct),emits:["update:items","preloaded","failures"],setup(l,{expose:y,emit:c}){const s=l,u=c,h=e.useAttrs(),f=e.defineComponent({name:"SlotRenderer",props:{slotFn:{type:Function,required:!1},slotProps:{type:Object,required:!0}},setup(t){return()=>{const n=t.slotFn;return n?n(t.slotProps):null}}}),i=e.shallowRef(null);e.provide(ft,t=>{i.value||(i.value=t)});const g=[],p=[];let b=null,M=null;function I(){if(!g.length)return;const t=g.splice(0,g.length);u("preloaded",t)}function T(){if(!p.length)return;const t=p.splice(0,p.length);u("failures",t)}function F(){b||(b=setTimeout(()=>{b=null,I()},at))}function A(){M||(M=setTimeout(()=>{M=null,T()},at))}function P(t){i.value?.onPreloaded?.(t),g.push(t),F()}function q(t){i.value?.onFailed?.(t),p.push(t),A()}e.onMounted(()=>{if(!i.value)throw new Error("[Masonry] Missing <MasonryItem> definition. Add <MasonryItem> as a child of <Masonry>.")});const z=e.computed(()=>{const{class:t,...n}=h;return n}),B=e.ref(null),S=e.ref(0),V=e.ref(0),_=e.ref(0);let U;const K=e.computed(()=>s.gapX),Ie=e.computed(()=>s.gapY);function Fe(t){if(!t)return 0;const n=Math.max(0,K.value);return Math.max(0,t.clientWidth-n)}const J=e.computed(()=>s.headerHeight),Q=e.computed(()=>s.footerHeight),ve=e.computed(()=>i.value?.header),he=e.computed(()=>i.value?.footer),ge=e.computed(()=>i.value?.overlay),Ne=e.computed(()=>!!ve.value),Pe=e.computed(()=>!!he.value),Te=e.computed(()=>!!ge.value),_e=e.computed(()=>{if(J.value>0)return{height:`${J.value}px`}}),Ae=e.computed(()=>{if(Q.value>0)return{height:`${Q.value}px`}}),ne=e.ref([]),pe=e.ref([]),Re=e.ref(new Map),Ve=e.ref(0),ie=e.ref(new Map);function Ce(t){const n=typeof t=="number"&&Number.isFinite(t)?t:0;return Ke.value+Math.max(0,n)}const D=e.ref(new Set),O=e.ref(new Set),ue=new Set,oe=e.ref(new Map);function ht(t){return Number.isFinite(t)?Math.max(0,Math.min(250,t)):0}function gt(t){if(!O.value.has(t))return;const n=oe.value.get(t)??0;if(!(n<=0))return`${n}ms`}const ce=e.ref(new Map),H=e.ref(new Set),L=e.ref([]);function pt(t){const n=ce.value.get(t);return n||{dx:0,dy:0}}function yt(t){if(O.value.has(t))return`transform ${it}ms ease-out`;if(H.value.has(t))return`transform ${st}ms ease-out`}function wt(t){const o=m.value[t]?.id,a=ne.value[t]??{x:0,y:0},r=pe.value[t]??0,d=r>0?r:re.value,v=a.x,x=o&&D.value.has(o)?Ce(d):a.y,k=o?pt(o):{dx:0,dy:0};return`translate3d(${v+k.dx}px,${x+k.dy}px,0)`}function Z(t){(typeof requestAnimationFrame=="function"?requestAnimationFrame:o=>setTimeout(()=>o(0),0))(()=>t())}function xt(t){Z(()=>Z(t))}const ze=new Set;function He(t){return typeof t=="number"&&Number.isFinite(t)&&t>0}function ye(t){if(!Array.isArray(t)||t.length===0)return;const n=new Set(D.value);let o=!1;for(const a of t){const r=a?.id;if(r){if(!ze.has(r)){const d=a?.width,v=a?.height;(!He(d)||!He(v))&&(ze.add(r),console.warn(`[Masonry] Item "${r}" has invalid dimensions (width=${String(d)}, height=${String(v)}); layout expects { id, width, height }.`))}n.has(r)||(n.add(r),o=!0)}}o&&(D.value=n)}function Le(){const t=new Map;for(const n of Me.value){const a=m.value[n]?.id;if(!a)continue;const r=ne.value[n];r&&t.set(a,{x:r.x,y:r.y})}return t}function qe(t,n){if(!t.size)return;const o=new Map,a=[];for(const[d,v]of t.entries()){if(n?.has(d))continue;const x=ie.value.get(d);if(x==null)continue;const k=ne.value[x];if(!k)continue;const w=v.x-k.x,R=v.y-k.y;(w||R)&&(o.set(d,{dx:w,dy:R}),a.push(d))}if(!o.size)return;ce.value=o;const r=new Set(H.value);for(const d of a)r.delete(d);H.value=r,Z(()=>{H.value=new Set([...H.value,...a]),Z(()=>{ce.value=new Map})}),setTimeout(()=>{const d=new Set(H.value);for(const v of a)d.delete(v);H.value=d},st)}const $=e.ref(!0),Y=e.ref(!1),ee=e.ref("");let N=0;function De(t){return t instanceof Error&&t.name==="AbortError"}function Oe(){const t=new Error("aborted");return t.name="AbortError",t}function kt(t){return new Promise(n=>setTimeout(n,t))}async function $e(t,n){let o=0;for(;;){if(n!==N)throw Oe();try{return await s.getContent(t)}catch(a){if(n!==N)throw Oe();if(o>=ln)throw a;o+=1,await kt(o*an)}}}const C=e.ref([]),Ye=e.ref([]),we=e.ref([]),E=e.ref(s.page),fe=e.ref([]);let X=null,j=null,de=0;function bt(t){let n=-1;for(const o of t){const a=o?.originalIndex;le(a)&&a>n&&(n=a)}de=n+1}function te(t){for(const n of t)!n||typeof n!="object"||n.id&&n.originalIndex==null&&(n.originalIndex=de,de+=1)}const W=new Map,G=[];function le(t){return typeof t=="number"&&Number.isFinite(t)}function Mt(t,n){if(!n.length)return t;const o=new Set;for(const v of t){const x=v?.id;x&&o.add(x)}const a=[];for(const v of n){const x=v?.id;x&&(o.has(x)||(a.push(v),o.add(x)))}if(!a.length)return t;const r=a.slice().sort((v,x)=>{const k=le(v.originalIndex)?v.originalIndex:Number.POSITIVE_INFINITY,w=le(x.originalIndex)?x.originalIndex:Number.POSITIVE_INFINITY;return k-w}),d=t.slice();for(const v of r){const x=v.originalIndex;if(!le(x)){d.push(v);continue}let k=0,w=d.length;for(;k<w;){const R=k+w>>1,se=d[R]?.originalIndex;(le(se)?se:Number.POSITIVE_INFINITY)<=x?k=R+1:w=R}d.splice(k,0,v)}return d}async function Xe(t){if(!t.length)return;ye(t);const n=Le();m.value=Mt(m.value,t),await e.nextTick(),qe(n)}async function St(t){const o=(Array.isArray(t)?t:[t]).map(ke).filter(Boolean);if(!o.length)return;const a=[];for(const r of o){const d=W.get(r);d&&a.push(d)}if(a.length){await Xe(a);for(const r of a)r?.id&&W.delete(r.id)}}async function Bt(){const t=G.pop();if(!t?.length)return;const n=[];for(const o of t){const a=W.get(o);a&&n.push(a)}if(n.length){await Xe(n);for(const o of n)o?.id&&W.delete(o.id)}}function Et(t){const o=(Array.isArray(t)?t:[t]).map(ke).filter(Boolean);if(!o.length)return;const a=new Set(o);for(const r of a)W.delete(r);for(let r=G.length-1;r>=0;r-=1){const v=G[r].filter(x=>!a.has(x));v.length?G[r]=v:G.splice(r,1)}}const xe=e.shallowRef({enabled:!1,isBackfillActive:!1,isRequestInFlight:!1,requestPage:null,progress:{collected:0,target:0},cooldownMsRemaining:0,cooldownMsTotal:2e3,pageSize:20,bufferSize:0,lastBatch:null,totals:{pagesFetched:0,itemsFetchedFromNetwork:0}}),je=Ot({getContent:t=>$e(t,N),markEnterFromLeft:ye,buffer:fe,stats:xe,isEnabled:()=>s.mode==="backfill",getPageSize:()=>s.pageSize,getRequestDelayMs:()=>s.backfillRequestDelayMs}),me=e.computed(()=>s.items!==void 0);e.watch(()=>s.items,t=>{me.value&&(we.value=Array.isArray(t)?t:[])},{immediate:!0});const m=e.computed({get(){return me.value?we.value:Ye.value},set(t){me.value?(we.value=t,u("update:items",t)):Ye.value=t}}),ae=e.ref(!1);async function We(t){const n=await $e(t,N);return te(n.items),ye(n.items),{items:n.items,nextPage:n.nextPage}}function ke(t){return t?typeof t=="string"?t:t?.id:null}async function Ge(t){const o=(Array.isArray(t)?t:[t]).map(ke).filter(Boolean);if(!o.length)return;const a=new Set(o),r=[];for(const k of a){const w=ie.value.get(k);if(w==null)continue;const R=m.value[w];R&&(W.set(k,R),r.push(k))}r.length&&G.push(r);const d=Le(),v=re.value,x=[];for(const k of a){const w=ie.value.get(k);if(w==null)continue;const R=m.value[w];if(!R)continue;const se=ne.value[w]??{x:0,y:0},ot=pe.value[w]??v;x.push({id:k,item:R,fromX:se.x,fromY:se.y,width:v,height:ot,leaving:!0})}if(x.length&&(L.value=[...L.value,...x]),m.value=m.value.filter(k=>{const w=k?.id;return!w||!a.has(w)}),await e.nextTick(),qe(d,a),x.length){const k=new Set(x.map(w=>w.id));Z(()=>{L.value=L.value.map(w=>k.has(w.id)?{...w,leaving:!1}:w),setTimeout(()=>{L.value=L.value.filter(w=>!k.has(w.id))},ut)})}}async function be(t){return Ge(t)}function It(){N+=1,X=null,j=null,$.value=!1,Y.value=!1}y({remove:Ge,restore:St,undo:Bt,forget:Et,loadNextPage:Je,cancel:It,get pagesLoaded(){return C.value},set pagesLoaded(t){C.value=t},get nextPage(){return E.value},set nextPage(t){E.value=t},get isLoading(){return $.value||Y.value},get hasReachedEnd(){return s.mode!=="backfill"?E.value==null:E.value==null&&fe.value.length===0},get backfillStats(){return xe.value}});function Ue(){const t=$t({items:m.value,columnCount:Be.value,columnWidth:re.value,gapX:K.value,gapY:Ie.value,headerHeight:J.value,footerHeight:Q.value,bucketPx:rt});ne.value=t.positions,pe.value=t.heights,Re.value=t.buckets,Ve.value=t.contentHeight,ie.value=t.indexById}const Ke=e.computed(()=>Math.max(Ve.value,V.value)+nn),Me=e.computed(()=>Yt({itemCount:m.value.length,viewportHeight:V.value,scrollTop:_.value,overscanPx:s.overscanPx,bucketPx:rt,buckets:Re.value}));e.watch(Me,t=>{if(!t?.length)return;const n=[];for(const a of t){const r=m.value[a]?.id;r&&D.value.has(r)&&(ue.has(r)||(ue.add(r),n.push(r)))}if(!n.length)return;const o=n.length>1?ht(s.enterStaggerMs):0;if(o>0){const a=new Map(oe.value);for(let r=0;r<n.length;r+=1){const d=n[r],v=Math.min(r*o,on);a.set(d,v)}oe.value=a}Z(()=>{const a=new Set(O.value);for(const r of n)a.add(r);O.value=a}),xt(()=>{const a=new Set(D.value);for(const r of n)a.delete(r);D.value=a,setTimeout(()=>{const r=new Set(O.value),d=new Map(oe.value);for(const v of n)r.delete(v),ue.delete(v),d.delete(v);O.value=r,oe.value=d},it)})},{flush:"post"});async function Je(){if(X)return X;if($.value||Y.value||s.mode!=="backfill"&&E.value==null||s.mode==="backfill"&&E.value==null&&fe.value.length===0)return;const t=N;let n=null;return n=(async()=>{try{if(Y.value=!0,ee.value="",s.mode==="backfill"){const r=await je.loadBackfillBatch(E.value);if(t!==N)return;r.pages.length&&(C.value=[...C.value,...r.pages]),te(r.batchItems),m.value=[...m.value,...r.batchItems],E.value=r.nextPage;return}const o=E.value;if(o==null)return;const a=await We(o);if(t!==N)return;C.value=[...C.value,o],te(a.items),m.value=[...m.value,...a.items],E.value=a.nextPage}catch(o){if(t!==N||De(o))return;ee.value=o instanceof Error?o.message:String(o)}finally{t===N&&(Y.value=!1),X===n&&(X=null)}})(),X=n,n}function Ft(){const t=B.value;if(!t)return;_.value=t.scrollTop,V.value=t.clientHeight,t.scrollHeight-(t.scrollTop+t.clientHeight)<=s.prefetchThresholdPx&&Je()}function Qe(){return B.value}function Ze(t){S.value=Fe(t),V.value=t.clientHeight}function Nt(){typeof ResizeObserver>"u"||(U=new ResizeObserver(()=>{const t=Qe();t&&Ze(t)}))}function Pt(){return{enabled:s.mode==="backfill",isBackfillActive:!1,isRequestInFlight:!1,requestPage:null,progress:{collected:0,target:0},cooldownMsRemaining:0,cooldownMsTotal:Ee(s.backfillRequestDelayMs),pageSize:dt(s.pageSize),bufferSize:0,lastBatch:null,totals:{pagesFetched:0,itemsFetchedFromNetwork:0}}}function et(){N+=1,X=null,j=null,de=0,W.clear(),G.length=0,D.value=new Set,O.value=new Set,ue.clear(),ce.value=new Map,H.value=new Set,L.value=[],C.value=[],E.value=null,fe.value=[],xe.value=Pt(),$.value=!0,Y.value=!1,ee.value=""}function tt(t){et(),m.value=[],E.value=t}function Tt(t){const n=Array.isArray(t)?t:[t],o=[],a=new Set;for(const r of n){if(r==null)continue;const d=typeof r=="string"?`s:${r}`:`n:${String(r)}`;a.has(d)||(a.add(d),o.push(r))}return o}function Se(t){et(),C.value=t?Tt(t):[],E.value=s.page,$.value=!1,bt(m.value),te(m.value)}async function nt(t){if(j)return j;const n=N;let o=null;return o=(async()=>{try{if(s.mode==="backfill"){const a=await je.loadBackfillBatch(t);if(n!==N)return;C.value=a.pages.length?a.pages:[t],te(a.batchItems),m.value=a.batchItems,E.value=a.nextPage}else{const a=await We(t);if(n!==N)return;C.value=[t],te(a.items),m.value=a.items,E.value=a.nextPage}}catch(a){if(n!==N||De(a))return;ee.value=a instanceof Error?a.message:String(a)}finally{n===N&&($.value=!1),j===o&&(j=null)}})(),j=o,o}function _t(){const t=Qe();t&&(Ze(t),_.value=t.scrollTop,U?.observe(t))}e.onMounted(async()=>{if(Nt(),_t(),s.restoredPages!=null){ae.value=!0,Se(s.restoredPages);return}if(me.value&&m.value.length>0){ae.value=!0,Se();return}ae.value=!1,tt(s.page),await nt(s.page)}),e.onUnmounted(()=>{U?.disconnect(),b&&(clearTimeout(b),b=null),M&&(clearTimeout(M),M=null),I(),T()}),e.watch(()=>s.page,async t=>{if(ae.value){E.value=t;return}tt(t),await nt(t)}),e.watch(()=>s.restoredPages,t=>{t&&(ae.value=!0,Se(t))}),e.watch(K,()=>{const t=B.value;t&&(S.value=Fe(t))},{immediate:!1});const Be=e.computed(()=>Lt(S.value,s.itemWidth)),re=e.computed(()=>qt(S.value,Be.value,s.itemWidth,K.value));e.watch([Be,re,K,Ie,J,Q],()=>{Ue()},{immediate:!0}),e.watch(()=>[m.value,m.value.length],()=>Ue(),{immediate:!0});const At=e.computed(()=>["mt-8 flex min-h-0 flex-1 flex-col rounded-2xl border border-slate-200/70 bg-white/70 p-5 shadow-sm backdrop-blur",h.class]);return(t,n)=>(e.openBlock(),e.createElementBlock("section",e.mergeProps(z.value,{class:At.value}),[e.createElementVNode("div",Xt,[e.renderSlot(t.$slots,"default")]),e.createElementVNode("div",{ref_key:"scrollViewportRef",ref:B,"data-testid":"items-scroll-container",class:"mt-4 min-h-0 flex-1 overflow-auto",style:e.normalizeStyle({paddingRight:K.value+"px"}),onScroll:Ft},[$.value?(e.openBlock(),e.createElementBlock("div",jt,n[0]||(n[0]=[e.createElementVNode("div",{class:"inline-flex items-center gap-3 text-sm text-slate-600"},[e.createElementVNode("svg",{class:"h-5 w-5 animate-spin text-slate-500",viewBox:"0 0 24 24","aria-hidden":"true"},[e.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",fill:"none",stroke:"currentColor","stroke-width":"4"}),e.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"})]),e.createElementVNode("span",null,"Loading…")],-1)]))):ee.value?(e.openBlock(),e.createElementBlock("p",Wt,"Error: "+e.toDisplayString(ee.value),1)):(e.openBlock(),e.createElementBlock("div",{key:2,class:"relative",style:e.normalizeStyle({height:Ke.value+"px"})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Me.value,o=>(e.openBlock(),e.createElementBlock("article",{key:m.value[o].id,"data-testid":"item-card",class:"absolute overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm",style:e.normalizeStyle({width:re.value+"px",transition:yt(m.value[o].id),transitionDelay:gt(m.value[o].id),transform:wt(o)})},[Ne.value||J.value>0?(e.openBlock(),e.createElementBlock("div",{key:0,"data-testid":"item-header-container",class:"w-full",style:e.normalizeStyle(_e.value)},[e.createVNode(e.unref(f),{"slot-fn":ve.value,"slot-props":{item:m.value[o],remove:()=>be(m.value[o])}},null,8,["slot-fn","slot-props"])],4)):e.createCommentVNode("",!0),e.createElementVNode("div",Gt,[e.createVNode(lt,{item:m.value[o],onSuccess:P,onError:q},null,8,["item"]),Te.value?(e.openBlock(),e.createElementBlock("div",Ut,[e.createVNode(e.unref(f),{"slot-fn":ge.value,"slot-props":{item:m.value[o],remove:()=>be(m.value[o])}},null,8,["slot-fn","slot-props"])])):e.createCommentVNode("",!0)]),Pe.value||Q.value>0?(e.openBlock(),e.createElementBlock("div",{key:1,"data-testid":"item-footer-container",class:"w-full",style:e.normalizeStyle(Ae.value)},[e.createVNode(e.unref(f),{"slot-fn":he.value,"slot-props":{item:m.value[o],remove:()=>be(m.value[o])}},null,8,["slot-fn","slot-props"])],4)):e.createCommentVNode("",!0)],4))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(L.value,o=>(e.openBlock(),e.createElementBlock("article",{key:o.id+":leaving","data-testid":"item-card-leaving",class:"pointer-events-none absolute overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm",style:e.normalizeStyle({width:o.width+"px",transition:"transform "+ut+"ms ease-out",transform:o.leaving?"translate3d("+o.fromX+"px,"+o.fromY+"px,0)":"translate3d("+o.fromX+"px,"+Ce(o.height)+"px,0)"})},[Ne.value||J.value>0?(e.openBlock(),e.createElementBlock("div",{key:0,"data-testid":"item-header-container",class:"w-full",style:e.normalizeStyle(_e.value)},[e.createVNode(e.unref(f),{"slot-fn":ve.value,"slot-props":{item:o.item,remove:()=>{}}},null,8,["slot-fn","slot-props"])],4)):e.createCommentVNode("",!0),e.createElementVNode("div",Kt,[e.createVNode(lt,{item:o.item},null,8,["item"]),Te.value?(e.openBlock(),e.createElementBlock("div",Jt,[e.createVNode(e.unref(f),{"slot-fn":ge.value,"slot-props":{item:o.item,remove:()=>{}}},null,8,["slot-fn","slot-props"])])):e.createCommentVNode("",!0)]),Pe.value||Q.value>0?(e.openBlock(),e.createElementBlock("div",{key:1,"data-testid":"item-footer-container",class:"w-full",style:e.normalizeStyle(Ae.value)},[e.createVNode(e.unref(f),{"slot-fn":he.value,"slot-props":{item:o.item,remove:()=>{}}},null,8,["slot-fn","slot-props"])],4)):e.createCommentVNode("",!0)],4))),128))],4)),e.createElementVNode("div",Qt,[Y.value?(e.openBlock(),e.createElementBlock("span",Zt,n[1]||(n[1]=[e.createElementVNode("svg",{class:"h-4 w-4 animate-spin text-slate-500",viewBox:"0 0 24 24","aria-hidden":"true"},[e.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",fill:"none",stroke:"currentColor","stroke-width":"4"}),e.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"})],-1),e.createElementVNode("span",null,"Loading more…",-1)]))):E.value==null?(e.openBlock(),e.createElementBlock("span",en,"End of list")):(e.openBlock(),e.createElementBlock("span",tn,"Scroll to load page "+e.toDisplayString(E.value),1))])],36)],16))}}),vt=e.defineComponent({name:"MasonryItem",setup(l,{slots:y,attrs:c}){const s=e.inject(ft,null);if(!s)return()=>null;const u=c.onPreloaded,h=c.onFailed,f=y.overlay,i=y.default;return s({header:y.header,overlay:f??i,footer:y.footer,onPreloaded:typeof u=="function"?u:Array.isArray(u)?g=>{for(const p of u)typeof p=="function"&&p(g)}:void 0,onFailed:typeof h=="function"?h:Array.isArray(h)?g=>{for(const p of h)typeof p=="function"&&p(g)}:void 0}),()=>null}}),rn={install(l){l.component("Masonry",mt),l.component("MasonryItem",vt)}};exports.Masonry=mt;exports.MasonryItem=vt;exports.VibePlugin=rn;exports.masonryDefaults=ct;
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),dt={mode:"default",pageSize:20,backfillRequestDelayMs:2e3,enterStaggerMs:40,page:1,itemWidth:300,prefetchThresholdPx:200,gapX:16,gapY:16,headerHeight:0,footerHeight:0,overscanPx:600},Ht={key:0,"data-testid":"masonry-loader-spinner",class:"absolute inset-0 flex items-center justify-center"},Lt={key:1,"data-testid":"masonry-loader-error",class:"absolute inset-0 flex flex-col items-center justify-center gap-2 p-3"},qt=["src","width","height","alt"],Dt=["poster"],Ot=["src"],rt=e.defineComponent({__name:"MasonryLoader",props:{item:{},timeoutMs:{default:15e3}},emits:["success","error"],setup(l,{emit:y}){const f=l,s=y,u=e.ref(null),h=e.ref(!1),d=e.ref(!1),i=e.ref(!1),g=e.ref(0),p=e.computed(()=>{const B=f.item?.width,S=f.item?.height;return{aspectRatio:`${B} / ${S}`}}),x=e.computed(()=>f.item?.type==="image");let b=null,F=null;function _(){F!=null&&(window.clearTimeout(F),F=null)}function N(){_();const B=typeof f.timeoutMs=="number"&&Number.isFinite(f.timeoutMs)?f.timeoutMs:0;B<=0||(F=window.setTimeout(()=>{h.value&&(d.value||i.value||D(new Error("timeout")))},B))}function R(){h.value||(h.value=!0,d.value=!1,i.value=!1,N())}e.onMounted(()=>{if(typeof IntersectionObserver>"u"){R();return}b=new IntersectionObserver(B=>{for(const S of B)if(S.isIntersecting&&!((S.intersectionRatio??0)<.5)){R(),b?.disconnect(),b=null;return}},{threshold:[0,.5,1]}),u.value&&b.observe(u.value)}),e.onUnmounted(()=>{b?.disconnect(),b=null,_()});function T(){d.value||(d.value=!0,i.value=!1,_(),s("success",f.item))}function D(B){i.value||(d.value=!1,i.value=!0,_(),s("error",{item:f.item,error:B}))}function z(){h.value&&(d.value=!1,i.value=!1,g.value+=1,N())}return(B,S)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"rootEl",ref:u,class:"relative bg-slate-100",style:e.normalizeStyle(p.value)},[h.value&&!d.value&&!i.value?(e.openBlock(),e.createElementBlock("div",Ht,S[2]||(S[2]=[e.createElementVNode("svg",{class:"h-5 w-5 animate-spin text-slate-500",viewBox:"0 0 24 24","aria-hidden":"true"},[e.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",fill:"none",stroke:"currentColor","stroke-width":"4"}),e.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"})],-1)]))):h.value&&i.value?(e.openBlock(),e.createElementBlock("div",Lt,[S[3]||(S[3]=e.createElementVNode("p",{class:"text-center text-xs font-medium text-red-700"},"Failed to load",-1)),e.createElementVNode("button",{type:"button","data-testid":"masonry-loader-retry",class:"inline-flex items-center rounded-md border border-slate-200 bg-white px-2 py-1 text-xs font-medium text-slate-700",onClick:z}," Retry ")])):e.createCommentVNode("",!0),h.value&&x.value&&!i.value?(e.openBlock(),e.createElementBlock("img",{key:f.item.id+":img:"+g.value,class:e.normalizeClass(["h-full w-full object-cover transition-opacity duration-300",d.value?"opacity-100":"opacity-0"]),src:f.item.preview,width:f.item.width,height:f.item.height,loading:"lazy",alt:f.item.id,onLoad:T,onError:S[0]||(S[0]=V=>D(V))},null,42,qt)):h.value&&!i.value?(e.openBlock(),e.createElementBlock("video",{key:f.item.id+":vid:"+g.value,class:e.normalizeClass(["h-full w-full object-cover transition-opacity duration-300",d.value?"opacity-100":"opacity-0"]),poster:f.item.preview,controls:"",preload:"metadata",onLoadedmetadata:T,onError:S[1]||(S[1]=V=>D(V))},[e.createElementVNode("source",{src:f.item.original,type:"video/mp4"},null,8,Ot)],42,Dt)):e.createCommentVNode("",!0)],4))}}),mt=Symbol("masonryItemRegistry");function Yt(l,y){return!l||l<=0||!y||y<=0?1:Math.max(1,Math.floor(l/y))}function $t(l,y,f,s=0){if(!l||l<=0||!y||y<=0)return f;const u=typeof s=="number"&&s>0?s:0,h=Math.max(0,y-1)*u,d=l-h;return!d||d<=0?f:d/y}function Xt(l,y){const f=l?.width,s=l?.height;return typeof f=="number"&&typeof s=="number"&&f>0&&s>0?s/f*y:y}function vt(l){return Number.isFinite(l)&&l>0?Math.floor(l):1}function Ne(l){return Number.isFinite(l)&&l>0?Math.floor(l):0}function jt(l){async function y(s){const u=Ne(s);if(u<=0)return;l.stats.value={...l.stats.value,cooldownMsTotal:u,cooldownMsRemaining:u};const h=Date.now(),d=100;await new Promise(i=>{const g=setInterval(()=>{const p=Date.now()-h,x=Math.max(0,u-p);l.stats.value={...l.stats.value,cooldownMsTotal:u,cooldownMsRemaining:x},x<=0&&(clearInterval(g),i())},d)})}async function f(s){const u=vt(l.getPageSize()),h=l.isEnabled(),d=Ne(l.getRequestDelayMs()),i=[];let g=0;l.buffer.value.length&&(g=l.buffer.value.length,i.push(...l.buffer.value),l.buffer.value=[]),l.stats.value={...l.stats.value,enabled:h,isBackfillActive:!1,isRequestInFlight:!1,requestPage:null,cooldownMsTotal:d,cooldownMsRemaining:0,progress:{collected:0,target:0},pageSize:u,bufferSize:0};const p=[];let x=s,b=0,F=!1;for(;i.length<u&&x!=null;){const R=x;F&&(l.stats.value={...l.stats.value,enabled:h,isBackfillActive:!0,isRequestInFlight:!0,requestPage:R,progress:{collected:Math.min(i.length,u),target:u},cooldownMsTotal:d,cooldownMsRemaining:0,pageSize:u});const T=await l.getContent(R);p.push(R),F&&(l.stats.value={...l.stats.value,enabled:h,isBackfillActive:!0,isRequestInFlight:!1,requestPage:null}),b+=T.items.length,l.markEnterFromLeft(T.items),i.push(...T.items),x=T.nextPage,!F&&i.length<u&&x!=null?(F=!0,l.stats.value={...l.stats.value,enabled:h,isBackfillActive:!0,isRequestInFlight:!1,requestPage:null,progress:{collected:Math.min(i.length,u),target:u},cooldownMsTotal:d,cooldownMsRemaining:0,pageSize:u}):F&&(l.stats.value={...l.stats.value,enabled:h,isBackfillActive:!0,progress:{collected:Math.min(i.length,u),target:u}}),F&&i.length<u&&x!=null&&await y(d)}const _=i.slice(0,u),N=i.slice(u);return l.buffer.value=N,l.stats.value={...l.stats.value,enabled:h,isBackfillActive:!1,isRequestInFlight:!1,requestPage:null,progress:{collected:0,target:0},cooldownMsTotal:d,cooldownMsRemaining:0,pageSize:u,bufferSize:N.length,lastBatch:{startPage:s,pages:p,usedFromBuffer:g,fetchedFromNetwork:b,collectedTotal:i.length,emitted:_.length,carried:N.length},totals:{pagesFetched:l.stats.value.totals.pagesFetched+p.length,itemsFetchedFromNetwork:l.stats.value.totals.itemsFetchedFromNetwork+b}},{batchItems:_,pages:p,nextPage:x}}return{loadBackfillBatch:f}}function Wt(l){const y=l.columnCount,f=l.columnWidth,s=l.gapX,u=l.gapY,h=l.headerHeight,d=l.footerHeight,i=l.bucketPx,g=Array.from({length:y},()=>0),p=new Array(l.items.length),x=new Array(l.items.length),b=new Map,F=new Map;let _=0;for(let N=0;N<l.items.length;N+=1){const R=l.items[N];R?.id&&F.set(R.id,N);let T=0;for(let A=1;A<g.length;A+=1)g[A]<g[T]&&(T=A);const D=T*(f+s),z=g[T],B=Xt(R,f)+h+d;p[N]={x:D,y:z},x[N]=B,g[T]=z+B+u,_=Math.max(_,z+B);const S=Math.floor(z/i),V=Math.floor((z+B)/i);for(let A=S;A<=V;A+=1){const K=b.get(A);K?K.push(N):b.set(A,[N])}}return{positions:p,heights:x,buckets:b,contentHeight:_,indexById:F}}function Gt(l){const y=l.itemCount;if(!y)return[];if(l.viewportHeight<=0)return Array.from({length:y},(g,p)=>p);const f=Math.max(0,l.scrollTop-l.overscanPx),s=l.scrollTop+l.viewportHeight+l.overscanPx,u=Math.floor(f/l.bucketPx),h=Math.floor(s/l.bucketPx),d=new Set;for(let g=u;g<=h;g+=1){const p=l.buckets.get(g);if(p)for(const x of p)d.add(x)}const i=Array.from(d);return i.sort((g,p)=>g-p),i}const Ut={class:"hidden"},Kt={key:0,class:"flex h-full items-center justify-center"},Jt={key:1,class:"text-sm font-medium text-red-700"},Qt={class:"relative"},Zt={key:0,class:"pointer-events-auto absolute inset-0"},en={class:"relative"},tn={key:0,class:"pointer-events-auto absolute inset-0"},nn={class:"mt-4 pb-2 text-center text-xs text-slate-600"},on={key:0,class:"inline-flex items-center justify-center gap-2"},ln={key:1},an={key:2},st=100,rn=200,it=600,ut=300,ct=600,ft=600,sn=400,un=5,cn=1e3,ht=e.defineComponent({inheritAttrs:!1,__name:"Masonry",props:e.mergeDefaults({getContent:{},mode:{},pageSize:{},backfillRequestDelayMs:{},enterStaggerMs:{},items:{},page:{},restoredPages:{},itemWidth:{},prefetchThresholdPx:{},gapX:{},gapY:{},headerHeight:{},footerHeight:{},overscanPx:{}},dt),emits:["update:items","preloaded","failures"],setup(l,{expose:y,emit:f}){const s=l,u=f,h=e.useAttrs(),d=e.defineComponent({name:"SlotRenderer",props:{slotFn:{type:Function,required:!1},slotProps:{type:Object,required:!0}},setup(t){return()=>{const n=t.slotFn;return n?n(t.slotProps):null}}}),i=e.shallowRef(null);e.provide(mt,t=>{i.value||(i.value=t)});const g=[],p=[];let x=null,b=null;function F(){if(!g.length)return;const t=g.splice(0,g.length);u("preloaded",t)}function _(){if(!p.length)return;const t=p.splice(0,p.length);u("failures",t)}function N(){x||(x=setTimeout(()=>{x=null,F()},st))}function R(){b||(b=setTimeout(()=>{b=null,_()},st))}function T(t){i.value?.onPreloaded?.(t),g.push(t),N()}function D(t){i.value?.onFailed?.(t),p.push(t),R()}e.onMounted(()=>{if(!i.value)throw new Error("[Masonry] Missing <MasonryItem> definition. Add <MasonryItem> as a child of <Masonry>.")});const z=e.computed(()=>{const{class:t,...n}=h;return n}),B=e.ref(null),S=e.ref(0),V=e.ref(0),A=e.ref(0);let K;const J=e.computed(()=>s.gapX),Pe=e.computed(()=>s.gapY);function Te(t){if(!t)return 0;const n=Math.max(0,J.value);return Math.max(0,t.clientWidth-n)}const Q=e.computed(()=>s.headerHeight),Z=e.computed(()=>s.footerHeight),he=e.computed(()=>i.value?.header),ge=e.computed(()=>i.value?.footer),pe=e.computed(()=>i.value?.overlay),_e=e.computed(()=>!!he.value),Ae=e.computed(()=>!!ge.value),Re=e.computed(()=>!!pe.value),Ve=e.computed(()=>{if(Q.value>0)return{height:`${Q.value}px`}}),Ce=e.computed(()=>{if(Z.value>0)return{height:`${Z.value}px`}}),oe=e.ref([]),ye=e.ref([]),ze=e.ref(new Map),He=e.ref(0),ie=e.ref(new Map);function pt(t){const n=typeof t=="number"&&Number.isFinite(t)?t:0;return Qe.value+Math.max(0,n)}const O=e.ref(new Set),Y=e.ref(new Set),ue=new Set,le=e.ref(new Map);function yt(t){return Number.isFinite(t)?Math.max(0,Math.min(250,t)):0}function wt(t){if(!Y.value.has(t))return;const n=le.value.get(t)??0;if(!(n<=0))return`${n}ms`}const ce=e.ref(new Map),H=e.ref(new Set),L=e.ref([]);function xt(t){const n=ce.value.get(t);return n||{dx:0,dy:0}}function kt(t){if(Y.value.has(t))return`transform ${ct}ms ease-out`;if(H.value.has(t))return`transform ${ut}ms ease-out`}function bt(t){const o=v.value[t]?.id,a=oe.value[t]??{x:0,y:0},r=ye.value[t]??0,c=r>0?r:se.value,m=a.x,k=o&&O.value.has(o)?pt(c):a.y,E=o?xt(o):{dx:0,dy:0};return`translate3d(${m+E.dx}px,${k+E.dy}px,0)`}function ee(t){(typeof requestAnimationFrame=="function"?requestAnimationFrame:o=>setTimeout(()=>o(0),0))(()=>t())}function St(t){ee(()=>ee(t))}const Le=new Set;function qe(t){return typeof t=="number"&&Number.isFinite(t)&&t>0}function we(t){if(!Array.isArray(t)||t.length===0)return;const n=new Set(O.value);let o=!1;for(const a of t){const r=a?.id;if(r){if(!Le.has(r)){const c=a?.width,m=a?.height;(!qe(c)||!qe(m))&&(Le.add(r),console.warn(`[Masonry] Item "${r}" has invalid dimensions (width=${String(c)}, height=${String(m)}); layout expects { id, width, height }.`))}n.has(r)||(n.add(r),o=!0)}}o&&(O.value=n)}function De(){const t=new Map;for(const n of Ee.value){const a=v.value[n]?.id;if(!a)continue;const r=oe.value[n];r&&t.set(a,{x:r.x,y:r.y})}return t}function Oe(t,n){if(!t.size)return;const o=new Map,a=[];for(const[c,m]of t.entries()){if(n?.has(c))continue;const k=ie.value.get(c);if(k==null)continue;const E=oe.value[k];if(!E)continue;const M=m.x-E.x,w=m.y-E.y;(M||w)&&(o.set(c,{dx:M,dy:w}),a.push(c))}if(!o.size)return;ce.value=o;const r=new Set(H.value);for(const c of a)r.delete(c);H.value=r,ee(()=>{H.value=new Set([...H.value,...a]),ee(()=>{ce.value=new Map})}),setTimeout(()=>{const c=new Set(H.value);for(const m of a)c.delete(m);H.value=c},ut)}const $=e.ref(!0),X=e.ref(!1),te=e.ref("");let P=0,xe=0,ke=0;function Ye(t){return t instanceof Error&&t.name==="AbortError"}function $e(){const t=new Error("aborted");return t.name="AbortError",t}function Mt(t){return new Promise(n=>setTimeout(n,t))}async function Xe(t,n){let o=0;for(;;){if(n!==P)throw $e();try{return await s.getContent(t)}catch(a){if(n!==P)throw $e();if(o>=un)throw a;o+=1,await Mt(o*cn)}}}const C=e.ref([]),je=e.ref([]),be=e.ref([]),I=e.ref(s.page),fe=e.ref([]);let j=null,W=null,de=0;function Bt(t){let n=-1;for(const o of t){const a=o?.originalIndex;ae(a)&&a>n&&(n=a)}de=n+1}function ne(t){for(const n of t)!n||typeof n!="object"||n.id&&n.originalIndex==null&&(n.originalIndex=de,de+=1)}const G=new Map,U=[];function ae(t){return typeof t=="number"&&Number.isFinite(t)}function Et(t,n){if(!n.length)return t;const o=new Set;for(const m of t){const k=m?.id;k&&o.add(k)}const a=[];for(const m of n){const k=m?.id;k&&(o.has(k)||(a.push(m),o.add(k)))}if(!a.length)return t;const r=a.slice().sort((m,k)=>{const E=ae(m.originalIndex)?m.originalIndex:Number.POSITIVE_INFINITY,M=ae(k.originalIndex)?k.originalIndex:Number.POSITIVE_INFINITY;return E-M}),c=t.slice();for(const m of r){const k=m.originalIndex;if(!ae(k)){c.push(m);continue}let E=0,M=c.length;for(;E<M;){const w=E+M>>1,q=c[w]?.originalIndex;(ae(q)?q:Number.POSITIVE_INFINITY)<=k?E=w+1:M=w}c.splice(E,0,m)}return c}async function We(t){if(!t.length)return;we(t);const n=De();v.value=Et(v.value,t),await e.nextTick(),Oe(n)}async function It(t){const o=(Array.isArray(t)?t:[t]).map(Me).filter(Boolean);if(!o.length)return;const a=[];for(const r of o){const c=G.get(r);c&&a.push(c)}if(a.length){await We(a);for(const r of a)r?.id&&G.delete(r.id)}}async function Ft(){const t=U.pop();if(!t?.length)return;const n=[];for(const o of t){const a=G.get(o);a&&n.push(a)}if(n.length){await We(n);for(const o of n)o?.id&&G.delete(o.id)}}function Nt(t){const o=(Array.isArray(t)?t:[t]).map(Me).filter(Boolean);if(!o.length)return;const a=new Set(o);for(const r of a)G.delete(r);for(let r=U.length-1;r>=0;r-=1){const m=U[r].filter(k=>!a.has(k));m.length?U[r]=m:U.splice(r,1)}}const Se=e.shallowRef({enabled:!1,isBackfillActive:!1,isRequestInFlight:!1,requestPage:null,progress:{collected:0,target:0},cooldownMsRemaining:0,cooldownMsTotal:2e3,pageSize:20,bufferSize:0,lastBatch:null,totals:{pagesFetched:0,itemsFetchedFromNetwork:0}}),Ge=jt({getContent:t=>Xe(t,P),markEnterFromLeft:we,buffer:fe,stats:Se,isEnabled:()=>s.mode==="backfill",getPageSize:()=>s.pageSize,getRequestDelayMs:()=>s.backfillRequestDelayMs}),me=e.computed(()=>s.items!==void 0);e.watch(()=>s.items,t=>{me.value&&(be.value=Array.isArray(t)?t:[])},{immediate:!0});const v=e.computed({get(){return me.value?be.value:je.value},set(t){me.value?(be.value=t,u("update:items",t)):je.value=t}}),re=e.ref(!1);async function Ue(t){const n=await Xe(t,P);return ne(n.items),we(n.items),{items:n.items,nextPage:n.nextPage}}function Me(t){return t?typeof t=="string"?t:t?.id:null}async function Ke(t){const o=(Array.isArray(t)?t:[t]).map(Me).filter(Boolean);if(!o.length)return;const a=new Set(o),r=[];for(const M of a){const w=ie.value.get(M);if(w==null)continue;const q=v.value[w];q&&(G.set(M,q),r.push(M))}r.length&&U.push(r);const c=De(),m=se.value,k=A.value+V.value,E=[];for(const M of a){const w=ie.value.get(M);if(w==null)continue;const q=v.value[w];if(!q)continue;const ve=oe.value[w]??{x:0,y:0},at=ye.value[w]??m,zt=Math.max(ve.y,k);E.push({id:M,item:q,fromX:ve.x,fromY:ve.y,toY:zt+Math.max(0,at),width:m,height:at,leaving:!0})}if(E.length&&(L.value=[...L.value,...E]),v.value=v.value.filter(M=>{const w=M?.id;return!w||!a.has(w)}),await e.nextTick(),Oe(c,a),E.length){const M=new Set(E.map(w=>w.id));ee(()=>{L.value=L.value.map(w=>M.has(w.id)?{...w,leaving:!1}:w),setTimeout(()=>{L.value=L.value.filter(w=>!M.has(w.id))},ft)})}}async function Be(t){return Ke(t)}function Pt(){P+=1,j=null,W=null,$.value=!1,X.value=!1}y({remove:Ke,restore:It,undo:Ft,forget:Nt,loadNextPage:Ze,cancel:Pt,get pagesLoaded(){return C.value},set pagesLoaded(t){C.value=t},get nextPage(){return I.value},set nextPage(t){I.value=t},get isLoading(){return $.value||X.value},get hasReachedEnd(){return s.mode!=="backfill"?I.value==null:I.value==null&&fe.value.length===0},get backfillStats(){return Se.value}});function Je(){const t=Wt({items:v.value,columnCount:Fe.value,columnWidth:se.value,gapX:J.value,gapY:Pe.value,headerHeight:Q.value,footerHeight:Z.value,bucketPx:it});oe.value=t.positions,ye.value=t.heights,ze.value=t.buckets,He.value=t.contentHeight,ie.value=t.indexById}const Qe=e.computed(()=>Math.max(He.value,V.value)+rn),Ee=e.computed(()=>Gt({itemCount:v.value.length,viewportHeight:V.value,scrollTop:A.value,overscanPx:s.overscanPx,bucketPx:it,buckets:ze.value}));e.watch(Ee,t=>{if(!t?.length)return;const n=[];for(const a of t){const r=v.value[a]?.id;r&&O.value.has(r)&&(ue.has(r)||(ue.add(r),n.push(r)))}if(!n.length)return;const o=n.length>1?yt(s.enterStaggerMs):0;if(o>0){const a=new Map(le.value);for(let r=0;r<n.length;r+=1){const c=n[r],m=Math.min(r*o,sn);a.set(c,m)}le.value=a}ee(()=>{const a=new Set(Y.value);for(const r of n)a.add(r);Y.value=a}),St(()=>{const a=new Set(O.value);for(const r of n)a.delete(r);O.value=a,setTimeout(()=>{const r=new Set(Y.value),c=new Map(le.value);for(const m of n)r.delete(m),ue.delete(m),c.delete(m);Y.value=r,le.value=c},ct)})},{flush:"post"});async function Ze(){if(j)return j;if($.value||X.value||s.mode!=="backfill"&&I.value==null||s.mode==="backfill"&&I.value==null&&fe.value.length===0)return;const t=P;let n=null;return n=(async()=>{try{if(X.value=!0,te.value="",s.mode==="backfill"){const r=await Ge.loadBackfillBatch(I.value);if(t!==P)return;r.pages.length&&(C.value=[...C.value,...r.pages]),ne(r.batchItems),v.value=[...v.value,...r.batchItems],I.value=r.nextPage;return}const o=I.value;if(o==null)return;const a=await Ue(o);if(t!==P)return;C.value=[...C.value,o],ne(a.items),v.value=[...v.value,...a.items],I.value=a.nextPage}catch(o){if(t!==P||Ye(o))return;te.value=o instanceof Error?o.message:String(o)}finally{t===P&&(X.value=!1),j===n&&(j=null)}})(),j=n,n}function Tt(){const t=B.value;if(!t)return;const n=t.scrollTop,o=t.clientHeight,a=t.scrollHeight;A.value=n,V.value=o;const r=xe,c=ke,m=c>0&&a<c;if(xe=n,ke=a,m&&n<=r)return;a-(n+o)<=s.prefetchThresholdPx&&Ze()}function et(){return B.value}function tt(t){S.value=Te(t),V.value=t.clientHeight}function _t(){typeof ResizeObserver>"u"||(K=new ResizeObserver(()=>{const t=et();t&&tt(t)}))}function At(){return{enabled:s.mode==="backfill",isBackfillActive:!1,isRequestInFlight:!1,requestPage:null,progress:{collected:0,target:0},cooldownMsRemaining:0,cooldownMsTotal:Ne(s.backfillRequestDelayMs),pageSize:vt(s.pageSize),bufferSize:0,lastBatch:null,totals:{pagesFetched:0,itemsFetchedFromNetwork:0}}}function nt(){P+=1,j=null,W=null,xe=0,ke=0,de=0,G.clear(),U.length=0,O.value=new Set,Y.value=new Set,ue.clear(),ce.value=new Map,H.value=new Set,L.value=[],C.value=[],I.value=null,fe.value=[],Se.value=At(),$.value=!0,X.value=!1,te.value=""}function ot(t){nt(),v.value=[],I.value=t}function Rt(t){const n=Array.isArray(t)?t:[t],o=[],a=new Set;for(const r of n){if(r==null)continue;const c=typeof r=="string"?`s:${r}`:`n:${String(r)}`;a.has(c)||(a.add(c),o.push(r))}return o}function Ie(t){nt(),C.value=t?Rt(t):[],I.value=s.page,$.value=!1,Bt(v.value),ne(v.value)}async function lt(t){if(W)return W;const n=P;let o=null;return o=(async()=>{try{if(s.mode==="backfill"){const a=await Ge.loadBackfillBatch(t);if(n!==P)return;C.value=a.pages.length?a.pages:[t],ne(a.batchItems),v.value=a.batchItems,I.value=a.nextPage}else{const a=await Ue(t);if(n!==P)return;C.value=[t],ne(a.items),v.value=a.items,I.value=a.nextPage}}catch(a){if(n!==P||Ye(a))return;te.value=a instanceof Error?a.message:String(a)}finally{n===P&&($.value=!1),W===o&&(W=null)}})(),W=o,o}function Vt(){const t=et();t&&(tt(t),A.value=t.scrollTop,K?.observe(t))}e.onMounted(async()=>{if(_t(),Vt(),s.restoredPages!=null){re.value=!0,Ie(s.restoredPages);return}if(me.value&&v.value.length>0){re.value=!0,Ie();return}re.value=!1,ot(s.page),await lt(s.page)}),e.onUnmounted(()=>{K?.disconnect(),x&&(clearTimeout(x),x=null),b&&(clearTimeout(b),b=null),F(),_()}),e.watch(()=>s.page,async t=>{if(re.value){I.value=t;return}ot(t),await lt(t)}),e.watch(()=>s.restoredPages,t=>{t&&(re.value=!0,Ie(t))}),e.watch(J,()=>{const t=B.value;t&&(S.value=Te(t))},{immediate:!1});const Fe=e.computed(()=>Yt(S.value,s.itemWidth)),se=e.computed(()=>$t(S.value,Fe.value,s.itemWidth,J.value));e.watch([Fe,se,J,Pe,Q,Z],()=>{Je()},{immediate:!0}),e.watch(()=>[v.value,v.value.length],()=>Je(),{immediate:!0});const Ct=e.computed(()=>["mt-8 flex min-h-0 flex-1 flex-col rounded-2xl border border-slate-200/70 bg-white/70 p-5 shadow-sm backdrop-blur",h.class]);return(t,n)=>(e.openBlock(),e.createElementBlock("section",e.mergeProps(z.value,{class:Ct.value}),[e.createElementVNode("div",Ut,[e.renderSlot(t.$slots,"default")]),e.createElementVNode("div",{ref_key:"scrollViewportRef",ref:B,"data-testid":"items-scroll-container",class:"mt-4 min-h-0 flex-1 overflow-auto",style:e.normalizeStyle({paddingRight:J.value+"px"}),onScroll:Tt},[$.value?(e.openBlock(),e.createElementBlock("div",Kt,n[0]||(n[0]=[e.createElementVNode("div",{class:"inline-flex items-center gap-3 text-sm text-slate-600"},[e.createElementVNode("svg",{class:"h-5 w-5 animate-spin text-slate-500",viewBox:"0 0 24 24","aria-hidden":"true"},[e.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",fill:"none",stroke:"currentColor","stroke-width":"4"}),e.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"})]),e.createElementVNode("span",null,"Loading…")],-1)]))):te.value?(e.openBlock(),e.createElementBlock("p",Jt,"Error: "+e.toDisplayString(te.value),1)):(e.openBlock(),e.createElementBlock("div",{key:2,class:"relative",style:e.normalizeStyle({height:Qe.value+"px"})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(Ee.value,o=>(e.openBlock(),e.createElementBlock("article",{key:v.value[o].id,"data-testid":"item-card",class:"absolute overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm",style:e.normalizeStyle({width:se.value+"px",transition:kt(v.value[o].id),transitionDelay:wt(v.value[o].id),transform:bt(o)})},[_e.value||Q.value>0?(e.openBlock(),e.createElementBlock("div",{key:0,"data-testid":"item-header-container",class:"w-full",style:e.normalizeStyle(Ve.value)},[e.createVNode(e.unref(d),{"slot-fn":he.value,"slot-props":{item:v.value[o],remove:()=>Be(v.value[o])}},null,8,["slot-fn","slot-props"])],4)):e.createCommentVNode("",!0),e.createElementVNode("div",Qt,[e.createVNode(rt,{item:v.value[o],onSuccess:T,onError:D},null,8,["item"]),Re.value?(e.openBlock(),e.createElementBlock("div",Zt,[e.createVNode(e.unref(d),{"slot-fn":pe.value,"slot-props":{item:v.value[o],remove:()=>Be(v.value[o])}},null,8,["slot-fn","slot-props"])])):e.createCommentVNode("",!0)]),Ae.value||Z.value>0?(e.openBlock(),e.createElementBlock("div",{key:1,"data-testid":"item-footer-container",class:"w-full",style:e.normalizeStyle(Ce.value)},[e.createVNode(e.unref(d),{"slot-fn":ge.value,"slot-props":{item:v.value[o],remove:()=>Be(v.value[o])}},null,8,["slot-fn","slot-props"])],4)):e.createCommentVNode("",!0)],4))),128)),(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(L.value,o=>(e.openBlock(),e.createElementBlock("article",{key:o.id+":leaving","data-testid":"item-card-leaving",class:"pointer-events-none absolute overflow-hidden rounded-xl border border-slate-200/60 bg-white shadow-sm",style:e.normalizeStyle({width:o.width+"px",transition:"transform "+ft+"ms ease-out",transform:o.leaving?"translate3d("+o.fromX+"px,"+o.fromY+"px,0)":"translate3d("+o.fromX+"px,"+o.toY+"px,0)"})},[_e.value||Q.value>0?(e.openBlock(),e.createElementBlock("div",{key:0,"data-testid":"item-header-container",class:"w-full",style:e.normalizeStyle(Ve.value)},[e.createVNode(e.unref(d),{"slot-fn":he.value,"slot-props":{item:o.item,remove:()=>{}}},null,8,["slot-fn","slot-props"])],4)):e.createCommentVNode("",!0),e.createElementVNode("div",en,[e.createVNode(rt,{item:o.item},null,8,["item"]),Re.value?(e.openBlock(),e.createElementBlock("div",tn,[e.createVNode(e.unref(d),{"slot-fn":pe.value,"slot-props":{item:o.item,remove:()=>{}}},null,8,["slot-fn","slot-props"])])):e.createCommentVNode("",!0)]),Ae.value||Z.value>0?(e.openBlock(),e.createElementBlock("div",{key:1,"data-testid":"item-footer-container",class:"w-full",style:e.normalizeStyle(Ce.value)},[e.createVNode(e.unref(d),{"slot-fn":ge.value,"slot-props":{item:o.item,remove:()=>{}}},null,8,["slot-fn","slot-props"])],4)):e.createCommentVNode("",!0)],4))),128))],4)),e.createElementVNode("div",nn,[X.value?(e.openBlock(),e.createElementBlock("span",on,n[1]||(n[1]=[e.createElementVNode("svg",{class:"h-4 w-4 animate-spin text-slate-500",viewBox:"0 0 24 24","aria-hidden":"true"},[e.createElementVNode("circle",{class:"opacity-25",cx:"12",cy:"12",r:"10",fill:"none",stroke:"currentColor","stroke-width":"4"}),e.createElementVNode("path",{class:"opacity-75",fill:"currentColor",d:"M4 12a8 8 0 0 1 8-8v4a4 4 0 0 0-4 4H4z"})],-1),e.createElementVNode("span",null,"Loading more…",-1)]))):I.value==null?(e.openBlock(),e.createElementBlock("span",ln,"End of list")):(e.openBlock(),e.createElementBlock("span",an,"Scroll to load page "+e.toDisplayString(I.value),1))])],36)],16))}}),gt=e.defineComponent({name:"MasonryItem",setup(l,{slots:y,attrs:f}){const s=e.inject(mt,null);if(!s)return()=>null;const u=f.onPreloaded,h=f.onFailed,d=y.overlay,i=y.default;return s({header:y.header,overlay:d??i,footer:y.footer,onPreloaded:typeof u=="function"?u:Array.isArray(u)?g=>{for(const p of u)typeof p=="function"&&p(g)}:void 0,onFailed:typeof h=="function"?h:Array.isArray(h)?g=>{for(const p of h)typeof p=="function"&&p(g)}:void 0}),()=>null}}),fn={install(l){l.component("Masonry",ht),l.component("MasonryItem",gt)}};exports.Masonry=ht;exports.MasonryItem=gt;exports.VibePlugin=fn;exports.masonryDefaults=dt;
|