vue3-masonry-css/dist/vue3-masonry.umd.js

Vue Masonry component powered by CSS, dependancy free

(function(c,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(c=typeof globalThis<"u"?globalThis:c||self,e(c.Vue3Masonry={},c.Vue))})(this,function(c,e){"use strict";const w=(r,t)=>{if(typeof r=="number"||typeof r=="string")return Number(r);if(typeof r!="object")return 0;let o=1/0,s=r.default??0;for(let u in r){const i=parseInt(u),a=r[u],f=parseInt(String(a));if(isNaN(i)||isNaN(f))continue;t<=i&&i<=o&&(o=i,s=a)}return s};function y(r,t){let o=[];return r.forEach(s=>{var i,a,f;if(((a=(i=s.props)==null?void 0:i.class)==null?void 0:a.includes(t))&&o.push(s),Array.isArray(s.children))o=o.concat(y(s.children,t));else if(typeof s.children=="object"&&typeof((f=s.children)==null?void 0:f.default)=="function"){const h=s.children.default();o=o.concat(h)}else s.children&&typeof s.children=="object"&&(o=o.concat(y([s.children],t)))}),o}const g=e.defineComponent({__name:"masonry-grid",props:{columns:{default:2},gutter:{default:0},css:{type:Boolean,default:!0},tag:{default:"div"},class:{},columnTag:{default:"div"},columnClass:{},columnAttr:{},childTag:{default:"div"},childClass:{},childAttr:{}},setup(r){const t=r,o=e.useSlots(),s=e.ref(2),u=e.ref(0),i=e.ref(0),a=()=>{const n=i.value;i.value=(window?window.innerWidth:null)??1/0,n!==i.value&&(f(i.value),h(i.value))},f=n=>{const l=w(t.columns,n),d=Math.max(1,l??0);s.value=d},h=n=>{u.value=w(t.gutter,n)},x=()=>{const n=o.default();return y(n,"masonry-grid-item")},B=()=>{const n=x(),l=[];for(let d=0,p=0;d<n.length;d++,p++){const m=p%s.value;l[m]||(l[m]=[]),l[m].push(n[d])}return l},_=e.computed(()=>typeof u.value=="number"?`${u.value}px`:u.value),M=n=>{const l=t.css?{padding:`calc(${_.value} / 2)`}:void 0;return e.h(t.childTag,{style:l,class:t.childClass,attrs:t.childAttr},n)},N=(n,l)=>{const d=t.css?{boxSizing:"border-box",backgroundClip:"padding-box",width:`${100/s.value}%`}:void 0;return e.h(t.columnTag,{key:l,style:d,class:t.columnClass,attrs:t.columnAttr},n)},S=n=>{const l=t.css?{display:["-webkit-box","-ms-flexbox","flex"],margin:`calc(-${_.value} / 2)`}:void 0;return e.h(t.tag,{style:l,class:t.class},n)},b=e.ref(!1),T=()=>{if(!b.value)return;const n=B(),l=n.map((d,p)=>{const m=d.map(M);return N(m,`${p}-${n.length}`)});return S(l)};return e.onMounted(async()=>{await e.nextTick(),a(),b.value=!0,window&&window.addEventListener("resize",a)}),e.onBeforeUnmount(()=>{window&&window.removeEventListener("resize",a)}),(n,l)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(T)))}}),I=["id"],v=e.defineComponent({__name:"masonry-grid-item",setup(r){const t=crypto.randomUUID();return(o,s)=>(e.openBlock(),e.createElementBlock("div",{id:e.unref(t),class:"masonry-grid-item"},[e.renderSlot(o.$slots,"default")],8,I))}}),C={install(r,t){r.component((t==null?void 0:t.name)??"masonry-grid",g)}};typeof window<"u"&&(window.Vue3Masonry=C),c.MasonryGrid=g,c.MasonryGridItem=v,c.default=C,Object.defineProperties(c,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});