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

Responsive adaptive neuro-grid layout for Vue 3

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