wc-waterfall/dist/index.mjs

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

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 o extends HTMLElement{constructor(){super(),this.$props=t();const n={};for(const l in this.$props)n[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,n)}static get observedAttributes(){return Object.keys(e).filter(n=>O(e[n]))}attributeChangedCallback(n,l,i){this.$props[n]=s!=null&&s[n]?s[n](i):H(e,n,i)}}return o},H=(t,s,e)=>{const o=t[s];return O(o)?{number:r=>Number(r),string:r=>String(r),boolean:r=>r!=null&&r!="false"}[typeof o](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:o,setH:r,getPad:n,setX:l,setY:i,getChildren:p},{cols:c,gap:a}){const[u,y]=Array.isArray(a)?a:[a,a],[v,k,x,w]=n(t),f=p(t),E=f.length;if(E){const W=(s(t)-u*(c-1)-(w+k))/c;Array.prototype.forEach.call(f,d=>e(d,W));const I=Array.prototype.map.call(f,d=>o(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,w+(W+u)*b),h[b]+=I[d]+y}r(t,Math.max(...h)-y+x)}else r(t,v+x)}const g=Symbol(),m=Symbol();function S(t,s){let e,o,r;function n(){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)),o=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()}),o.observe(t,{childList:!0,attributes:!1}),r=new MutationObserver(()=>p()),r.observe(t,{childList:!1,attributes:!0}),p()}function l(){e.disconnect(),o.disconnect(),r.disconnect()}let i=!1;function p(){i||(i=!0,requestAnimationFrame(()=>{s(),t[m]=t.offsetWidth,t[g]=t.offsetHeight,r.takeRecords(),i=!1}))}return{relayout:p,mount:n,unmount:l}}const T=(t,s)=>S(t,()=>{M(t,{getW:e=>e.offsetWidth,setW:(e,o)=>e.style.width=o+"px",getH:e=>(e[m]=e.offsetWidth,e[g]=e.offsetHeight),setH:(e,o)=>e.style.height=o+"px",getPad:e=>{const o=getComputedStyle(e);return[parseInt(o.paddingTop),parseInt(o.paddingRight),parseInt(o.paddingBottom),parseInt(o.paddingLeft)]},setX:(e,o)=>e.style.left=o+"px",setY:(e,o)=>e.style.top=o+"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",$);export{$ as WaterfallElement};