vue3-plock/dist/water-fall.umd.cjs

## Installation

(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.waterFall={},i.Vue))})(this,function(i,e){"use strict";function d(l){const t=e.reactive({columns:1,gap:1}),{columns:n,gap:r,medias:a}=l;if(!a)return f(0);const s=a.map(o=>window.matchMedia(`(min-width: ${o}px)`)),c=()=>{let o=0;s.forEach(m=>{m.matches&&o++});const p=Math.min(s.length-1,o);f(p)};c();for(let o of s)o.addEventListener("change",c);e.onUnmounted(()=>{for(let o of s)o.removeEventListener("change",c)});function f(o){return t.columns=n[o],t.gap=r[o],t}return t}function u(l=[],t=3){const n=[];for(let r=0;r<l.length;r+=t){const a=l.slice(r,r+t);n.push(a)}return n}function g(l=[],t=3){const n=Array.from({length:t},()=>[]);for(let r=0;r<t;r++)for(let a=0;a<l.length;a+=1)l[a][r]&&n[r].push(l[a][r]);return n}const h=e.defineComponent({__name:"fall-row",props:{gap:{type:String,require:!0}},setup(l){const t=l;return(n,r)=>(e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle({display:"grid",rowGap:t.gap,gridTemplateColumns:"minmax(0, 1fr)"})},[e.renderSlot(n.$slots,"default")],4))}}),y=e.defineComponent({__name:"water-fall",props:{data:{type:Array,default:()=>[],require:!0},config:{type:Object,default:()=>({}),require:!0}},setup(l){const t=l,n=d(t.config),r=u(t.data,n.columns),a=g(r,n.columns);return(s,c)=>(e.openBlock(),e.createElementBlock("div",{style:e.normalizeStyle({display:"grid",alignItems:"start",gridColumnGap:e.unref(n).gap+"px",gridTemplateColumns:`repeat(${e.unref(n).columns}, minmax(0, 1fr))`})},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(e.unref(a),(f,o)=>(e.openBlock(),e.createBlock(h,{key:o,gap:e.unref(n).gap+"px"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(f,(p,m)=>e.renderSlot(s.$slots,"default",{key:m,src:p})),128))]),_:2},1032,["gap"]))),128))],4))}});i.waterFall=y,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});