neuro-grid-vue/dist/neuro-grid.umd.js

Responsive adaptive neuro-grid layout for Vue 3

(function(i,a){typeof exports=="object"&&typeof module<"u"?module.exports=a(require("vue")):typeof define=="function"&&define.amd?define(["vue"],a):(i=typeof globalThis<"u"?globalThis:i||self,i.NeuroGrid=a(i.Vue))})(this,function(i){"use strict";return i.defineComponent({__name:"NeuroGrid",setup(w){const f=i.ref(null),r=(t,l)=>t.dataset.size==="full"?l:t.dataset.size==="wide"?Math.min(2,l):1,u=()=>{if(!f.value)return;const t=Array.from(f.value.querySelectorAll(".neuro-block")),l=()=>{t.forEach(e=>{const n=e.scrollHeight,s=e.querySelectorAll(".mini").length,o=n+s*50;e.hasAttribute("data-size-manual")||(o>500?e.dataset.size="full":o>300?e.dataset.size="wide":e.removeAttribute("data-size"))})},h=()=>{const e=window.innerWidth<=600?1:window.innerWidth<=900?2:3;let n=0;for(let d=0;d<t.length;d++)n=(n+r(t[d],e))%e;if(e===1||n===0)return;const s=e-n,o=t.at(-1);o&&(o.style.gridColumn=`span ${r(o,e)+s}`)},p=()=>{const e=window.innerWidth<=600?1:window.innerWidth<=900?2:3;t.forEach(s=>s.style.gridColumn="");let n=0;for(let s=0;s<t.length;s++){const o=r(t[s],e);if(n+o>e){const d=e-n,c=t[s-1];c&&(c.style.gridColumn=`span ${r(c,e)+d}`),n=0}n=(n+o)%e}if(n){const s=e-n,o=t.at(-1);o&&(o.style.gridColumn=`span ${r(o,e)+s}`)}};t.forEach(e=>{e.style.gridColumn="",e.removeAttribute("data-force-row")}),l(),h(),p()},m=()=>requestAnimationFrame(u);return i.onMounted(()=>{i.nextTick(()=>{u(),window.addEventListener("resize",m)})}),i.onBeforeUnmount(()=>{window.removeEventListener("resize",m)}),(t,l)=>(i.openBlock(),i.createElementBlock("div",{class:"neuro-grid",ref_key:"gridRef",ref:f},[i.renderSlot(t.$slots,"default")],512))}})});