wc-flow-layout/dist/index.cjs

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

"use strict";function r(t,e,s,i){if(s==="a"&&!i)throw new TypeError("Private accessor was defined without a getter");if(typeof e=="function"?t!==e||!i:!e.has(t))throw new TypeError("Cannot read private member from an object whose class did not declare it");return s==="m"?i:s==="a"?i.call(t):i?i.value:e.get(t)}function c(t,e,s,i,o){if(i==="m")throw new TypeError("Private method is not writable");if(i==="a"&&!o)throw new TypeError("Private accessor was defined without a setter");if(typeof e=="function"?t!==e||!o:!e.has(t))throw new TypeError("Cannot write private member to an object whose class did not declare it");return i==="a"?o.call(t,s):o?o.value=s:e.set(t,s),s}function O(t,e){e===void 0&&(e={});var s=e.insertAt;if(!(!t||typeof document>"u")){var i=document.head||document.getElementsByTagName("head")[0],o=document.createElement("style");o.type="text/css",s==="top"&&i.firstChild?i.insertBefore(o,i.firstChild):i.appendChild(o),o.styleSheet?o.styleSheet.cssText=t:o.appendChild(document.createTextNode(t))}}var k=`wc-flow-layout {\r
  position: relative;\r
  display: block;\r
  box-sizing: content-box !important;\r
}\r
      \r
wc-flow-layout > * {\r
  position: absolute;\r
  box-sizing: border-box;\r
}\r
`;O(k);function I(t){let e=0;for(let s=0;s<t.length;s++)e=t[e]<=t[s]?e:s;return e}function L(t,{getW:e,setW:s,getH:i,setH:o,getPad:C,setX:A,setY:H,getChildren:M},{cols:b,gap:p}){const[m,P,v,_]=C(t),u=M(t),E=u.length;if(E){const x=(e(t)-p*(b-1)-(_+P))/b;Array.prototype.forEach.call(u,n=>s(n,x));const j=Array.prototype.map.call(u,n=>i(n)),g=Array(b).fill(m);for(let n=0;n<E;n++){const T=u[n],w=I(g);H(T,g[w]),A(T,_+(x+p)*w),g[w]+=j[n]+p}o(t,Math.max(...g)-p+v)}else o(t,m+v)}var y,a,f,l,d,W;class h extends HTMLElement{constructor(){super(),y.add(this),Object.defineProperty(this,"_fl_w",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),Object.defineProperty(this,"_fl_h",{enumerable:!0,configurable:!0,writable:!0,value:void 0}),a.set(this,void 0),f.set(this,void 0),l.set(this,void 0),d.set(this,!1)}get gap(){return+(this.getAttribute("gap")||h.default_props.gap)}set gap(e){this.setAttribute("gap",e+"")}get cols(){return+(this.getAttribute("cols")||h.default_props.cols)}set cols(e){this.setAttribute("cols",e+"")}connectedCallback(){c(this,a,new ResizeObserver(e=>e.some(({target:s})=>s._fl_w!=s.offsetWidth||s._fl_h!=s.offsetHeight)&&this.relayout()),"f"),r(this,a,"f").observe(this),Array.prototype.forEach.call(this.children,e=>r(this,a,"f").observe(e)),this.relayout(),c(this,f,new MutationObserver(e=>{e.forEach(s=>{s.addedNodes.forEach(i=>i instanceof HTMLElement&&r(this,a,"f").observe(i)),s.removedNodes.forEach(i=>i instanceof HTMLElement&&r(this,a,"f").unobserve(i))}),this.relayout()}),"f"),r(this,f,"f").observe(this,{childList:!0,attributes:!1}),c(this,l,new MutationObserver(()=>this.relayout()),"f"),r(this,l,"f").observe(this,{childList:!1,attributes:!0})}disconnectedCallback(){r(this,a,"f").disconnect(),r(this,f,"f").disconnect(),r(this,l,"f").disconnect()}relayout(){r(this,d,"f")||(c(this,d,!0,"f"),requestAnimationFrame(()=>{r(this,y,"m",W).call(this),c(this,d,!1,"f")}))}}a=new WeakMap,f=new WeakMap,l=new WeakMap,d=new WeakMap,y=new WeakSet,W=function(){L(this,{getW:t=>t.offsetWidth,setW:(t,e)=>t.style.width=e+"px",getH:t=>(t._fl_w=t.offsetWidth,t._fl_h=t.offsetHeight),setH:(t,e)=>t.style.height=e+"px",getPad:t=>{const e=getComputedStyle(t);return[parseInt(e.paddingTop),parseInt(e.paddingRight),-parseInt(e.paddingTop),parseInt(e.paddingLeft)]},setX:(t,e)=>t.style.left=e+"px",setY:(t,e)=>t.style.top=e+"px",getChildren:t=>t.children},{cols:this.cols,gap:this.gap}),this._fl_w=this.offsetWidth,this._fl_h=this.offsetHeight,r(this,l,"f").takeRecords()},Object.defineProperty(h,"default_props",{enumerable:!0,configurable:!0,writable:!0,value:Object.freeze({cols:2,gap:4})}),customElements.define("wc-flow-layout",h),exports.FlowLayout=h;