wc-waterfall/dist/index.cjs

wc-waterfall is a flow layout component written using web-component

"use strict";var L="wc-waterfall{position:relative;display:block;box-sizing:border-box!important;overflow:unset!important}wc-waterfall>*{position:absolute;box-sizing:border-box}";const C=t=>t.nodeType==1,N=(t,s)=>{const e=t();class r extends HTMLElement{constructor(){super(),this.$props=t();const o={};for(const l in this.$props)o[l]={get:()=>this.$props[l],set:i=>{this.$props[l]=s!=null&&s[l]?s[l](i):H(e,l,i),this.render()}};Object.defineProperties(this,o)}static get observedAttributes(){return Object.keys(e).filter(o=>O(e[o]))}attributeChangedCallback(o,l,i){this.$props[o]=s!=null&&s[o]?s[o](i):H(e,o,i)}}return r},H=(t,s,e)=>{const r=t[s];return O(r)?{number:n=>Number(n),string:n=>String(n),boolean:n=>n!=null&&n!="false"}[typeof r](e):void 0},O=t=>{const s=typeof t;return s=="number"||s=="string"||s=="boolean"};function _(t){let s=0;for(let e=0;e<t.length;e++)s=t[s]<=t[e]?s:e;return s}function M(t,{getW:s,setW:e,getH:r,setH:n,getPad:o,setX:l,setY:i,getChildren:p},{cols:c,gap:a}){const[u,y]=Array.isArray(a)?a:[a,a],[v,k,w,x]=o(t),f=p(t),E=f.length;if(E){const W=(s(t)-u*(c-1)-(x+k))/c;Array.prototype.forEach.call(f,d=>e(d,W));const I=Array.prototype.map.call(f,d=>r(d)),h=Array(c).fill(v);for(let d=0;d<E;d++){const A=f[d],b=_(h);i(A,h[b]),l(A,x+(W+u)*b),h[b]+=I[d]+y}n(t,Math.max(...h)-y+w)}else n(t,v+w)}const g=Symbol(),m=Symbol();function S(t,s){let e,r,n;function o(){e=new ResizeObserver(c=>c.some(({target:a})=>a[m]!=a.offsetWidth||a[g]!=a.offsetHeight)&&p()),e.observe(t),Array.prototype.forEach.call(t.children,c=>e.observe(c)),r=new MutationObserver(c=>{c.forEach(a=>{a.addedNodes.forEach(u=>C(u)&&e.observe(u)),a.removedNodes.forEach(u=>C(u)&&e.unobserve(u))}),p()}),r.observe(t,{childList:!0,attributes:!1}),n=new MutationObserver(()=>p()),n.observe(t,{childList:!1,attributes:!0}),p()}function l(){e.disconnect(),r.disconnect(),n.disconnect()}let i=!1;function p(){i||(i=!0,requestAnimationFrame(()=>{s(),t[m]=t.offsetWidth,t[g]=t.offsetHeight,n.takeRecords(),i=!1}))}return{relayout:p,mount:o,unmount:l}}const T=(t,s)=>S(t,()=>{M(t,{getW:e=>e.offsetWidth,setW:(e,r)=>e.style.width=r+"px",getH:e=>(e[m]=e.offsetWidth,e[g]=e.offsetHeight),setH:(e,r)=>e.style.height=r+"px",getPad:e=>{const r=getComputedStyle(e);return[parseInt(r.paddingTop),parseInt(r.paddingRight),parseInt(r.paddingBottom),parseInt(r.paddingLeft)]},setX:(e,r)=>e.style.left=r+"px",setY:(e,r)=>e.style.top=r+"px",getChildren:e=>e.children},s)});document.head.appendChild(Object.assign(document.createElement("style"),{innerText:L}));const j=()=>({cols:2,gap:4}),z={gap:t=>typeof t=="string"?t.includes(" ")?t.split(" ").map(Number):Number(t):t};class $ extends N(j,z){constructor(){super()}connectedCallback(){this._layout=T(this,this),this._layout.mount()}disconnectedCallback(){this._layout.unmount()}render(){var s;(s=this._layout)==null||s.relayout()}}customElements.get("wc-waterfall")||customElements.define("wc-waterfall",$),exports.WaterfallElement=$;