@chahindb7/vue-masonry-wall/dist/vue-masonry-wall.umd.js

Responsive masonry layout with SSR support and zero dependencies for Vue 3 (modified by Chahin).

(function(e,m){typeof exports=="object"&&typeof module<"u"?module.exports=m(require("vue")):typeof define=="function"&&define.amd?define(["vue"],m):(e=typeof globalThis<"u"?globalThis:e||self,e.MasonryWall=m(e.Vue))})(this,function(e){"use strict";function m(l,a){try{let o;return(...i)=>{o!==void 0&&clearTimeout(o),o=setTimeout(()=>l(...i),a)}}catch(o){console.error("Error debouncing",o)}}function _({columns:l,columnWidth:a,emit:o,gap:i,items:s,maxColumns:u,minColumns:y,nextTick:f,onBeforeUnmount:b,onMounted:B,rtl:d,scrollContainer:c,ssrColumns:w,vue:$,wall:k,watch:T}){function v(r,t,n,h){try{const g=R(n);return h+t+g<=r?v(r,t,n+1,h+t+g):n}catch(g){console.error("Error counting iteratively",g)}}function R(r){try{const t=Array.isArray(a.value)?a.value:[a.value];return t[r%t.length]}catch(t){console.error("Error getting column width target",t)}}function A(){try{const r=v(k.value.getBoundingClientRect().width,i.value,0,-i.value),t=L(D(r));return t>0?t:1}catch(r){console.error("Error getting column count",r)}}function D(r){try{const t=u==null?void 0:u.value;return t&&r>t?t:r}catch(t){console.error("Error getting below max",t)}}function L(r){try{const t=y==null?void 0:y.value;return t&&r<t?t:r}catch(t){console.error("Error getting above min",t)}}let x=0;async function z(r,t){try{if(r>=s.value.length||(await f(),x!==t))return;const n=[...k.value.children];d.value&&n.reverse();const h=n.reduce((g,M)=>M.getBoundingClientRect().height<g.getBoundingClientRect().height?M:g);l.value[+h.dataset.index].push(r),await z(r+1,t)}catch(n){console.error("Error filling columns",n)}}async function E(r=!1){try{const t=A();if(l.value.length===t&&!r){o($===2?"redraw-skip":"redrawSkip");return}l.value=S(t);const n=c==null?void 0:c.value,h=n?n.scrollTop:window.scrollY;await z(0,++x),n&&n instanceof HTMLElement&&(n==null||n.scrollBy({top:h-n.scrollTop})),o("redraw")}catch(t){console.error("Error redrawing",t)}}const p=typeof ResizeObserver>"u"?void 0:new ResizeObserver(m(()=>E()));if(B(()=>{E(),p==null||p.observe(k.value)}),b(()=>p==null?void 0:p.unobserve(k.value)),T([s,d],()=>E(!0)),T([a,i,y,u],()=>E()),w.value>0){console.log("Creating SSR columns");try{const r=S(w.value);console.log("SSR columns created",r),s.value.forEach((t,n)=>r[n%w.value].push(n)),console.log("SSR columns filled",r),l.value=[[0],[1],[2],[]]}catch(r){console.error("Error creating SSR columns",r)}}return{getColumnWidthTarget:R}}function S(l){try{return Array.from({length:l}).map(()=>[])}catch(a){return console.error("Error creating columns",a),[]}}const j={style:{"margin-bottom":"10px",color:"black"}},V=["data-index"];return e.defineComponent({__name:"MasonryWall",props:{columnWidth:{default:400},items:{},gap:{default:0},rtl:{type:Boolean,default:!1},ssrColumns:{default:0},scrollContainer:{default:null},minColumns:{default:1},maxColumns:{},keyMapper:{}},emits:["redraw","redrawSkip"],setup(l,{emit:a}){const o=l,i=a,s=e.ref([]),u=e.ref();console.log("zjzzjzjzjzzj");const{getColumnWidthTarget:y}=_({columns:s,emit:i,nextTick:e.nextTick,onBeforeUnmount:e.onBeforeUnmount,onMounted:e.onMounted,vue:3,wall:u,watch:e.watch,...e.toRefs(o)});return(f,b)=>(e.openBlock(),e.createElementBlock("div",null,[e.createElementVNode("div",j,e.toDisplayString(s.value),1),e.createElementVNode("div",{ref_key:"wall",ref:u,class:"masonry-wall",style:e.normalizeStyle({display:"flex",gap:`${f.gap}px`})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(s.value,(B,d)=>(e.openBlock(),e.createElementBlock("div",{key:d,class:"masonry-column","data-index":d,style:e.normalizeStyle({display:"flex","flex-basis":`${e.unref(y)(d)}px`,"flex-direction":"column","flex-grow":1,gap:`${f.gap}px`,height:["-webkit-max-content","-moz-max-content","max-content"],"min-width":0})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(B,(c,w)=>(e.openBlock(),e.createElementBlock("div",{key:c,class:"masonry-item"},[e.renderSlot(f.$slots,"default",{item:f.items[c],column:d,row:w,index:c},()=>[e.createTextVNode(e.toDisplayString(f.items[c]),1)])]))),128))],12,V))),128))],4)]))}})});
//# sourceMappingURL=vue-masonry-wall.umd.js.map