vue3-plock/dist/water-fall.cjs

## Installation

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue");function p(a){const t=e.reactive({columns:1,gap:1}),{columns:n,gap:r,medias:l}=a;if(!l)return u(0);const c=l.map(o=>window.matchMedia(`(min-width: ${o}px)`)),s=()=>{let o=0;c.forEach(m=>{m.matches&&o++});const i=Math.min(c.length-1,o);u(i)};s();for(let o of c)o.addEventListener("change",s);e.onUnmounted(()=>{for(let o of c)o.removeEventListener("change",s)});function u(o){return t.columns=n[o],t.gap=r[o],t}return t}function f(a=[],t=3){const n=[];for(let r=0;r<a.length;r+=t){const l=a.slice(r,r+t);n.push(l)}return n}function d(a=[],t=3){const n=Array.from({length:t},()=>[]);for(let r=0;r<t;r++)for(let l=0;l<a.length;l+=1)a[l][r]&&n[r].push(a[l][r]);return n}const g=e.defineComponent({__name:"fall-row",props:{gap:{type:String,require:!0}},setup(a){const t=a;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))}}),h=e.defineComponent({__name:"water-fall",props:{data:{type:Array,default:()=>[],require:!0},config:{type:Object,default:()=>({}),require:!0}},setup(a){const t=a,n=p(t.config),r=f(t.data,n.columns),l=d(r,n.columns);return(c,s)=>(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(l),(u,o)=>(e.openBlock(),e.createBlock(g,{key:o,gap:e.unref(n).gap+"px"},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(u,(i,m)=>e.renderSlot(c.$slots,"default",{key:m,src:i})),128))]),_:2},1032,["gap"]))),128))],4))}});exports.waterFall=h;