vue3-masonry-css/dist/vue3-masonry.es.js

Vue Masonry component powered by CSS, dependancy free

import { defineComponent as C, useSlots as A, ref as h, computed as M, onMounted as S, nextTick as V, onBeforeUnmount as W, openBlock as I, createBlock as k, resolveDynamicComponent as z, h as p, createElementBlock as T, unref as E, renderSlot as G } from "vue";
const g = (o, e) => {
  if (typeof o == "number" || typeof o == "string")
    return Number(o);
  if (typeof o != "object")
    return 0;
  let s = 1 / 0, n = o.default ?? 0;
  for (let i in o) {
    const r = parseInt(i), c = o[i], u = parseInt(String(c));
    if (isNaN(r) || isNaN(u)) continue;
    e <= r && r <= s && (s = r, n = c);
  }
  return n;
};
function y(o, e) {
  let s = [];
  return o.forEach((n) => {
    var r, c, u;
    if (((c = (r = n.props) == null ? void 0 : r.class) == null ? void 0 : c.includes(e)) && s.push(n), Array.isArray(n.children))
      s = s.concat(y(n.children, e));
    else if (typeof n.children == "object" && typeof ((u = n.children) == null ? void 0 : u.default) == "function") {
      const d = n.children.default();
      console.log({ childNodes: d }), s = s.concat(d);
    } else n.children && typeof n.children == "object" && (s = s.concat(y([n.children], e)));
  }), s;
}
const j = /* @__PURE__ */ C({
  __name: "masonry-grid",
  props: {
    columns: { default: 2 },
    gutter: { default: 0 },
    childItemWrapper: { type: Boolean, default: !1 },
    css: { type: Boolean, default: !0 },
    tag: { default: "div" },
    class: {},
    columnTag: { default: "div" },
    columnClass: {},
    columnAttr: {},
    childTag: { default: "div" },
    childClass: {},
    childAttr: {}
  },
  setup(o) {
    const e = o, s = A(), n = h(2), i = h(0), r = h(0), c = () => {
      const t = r.value;
      r.value = (window ? window.innerWidth : null) ?? 1 / 0, t !== r.value && (u(r.value), d(r.value));
    }, u = (t) => {
      const l = g(e.columns, t), a = Math.max(1, l ?? 0);
      n.value = a;
    }, d = (t) => {
      i.value = g(e.gutter, t);
    }, _ = () => {
      const t = s.default();
      return y(t, "masonry-grid-item");
    }, b = () => {
      const t = _(), l = [];
      for (let a = 0, f = 0; a < t.length; a++, f++) {
        const m = f % n.value;
        l[m] || (l[m] = []), l[m].push(t[a]);
      }
      return l;
    }, v = M(() => typeof i.value == "number" ? `${i.value}px` : i.value), x = (t) => {
      const l = e.css ? {
        padding: `calc(${v.value} / 2)`
      } : void 0;
      return p(
        e.childTag,
        {
          style: l,
          class: e.childClass,
          attrs: e.childAttr
        },
        t
      );
    }, B = (t, l) => {
      const a = e.css ? {
        boxSizing: "border-box",
        backgroundClip: "padding-box",
        width: `${100 / n.value}%`
      } : void 0;
      return p(
        e.columnTag,
        {
          key: l,
          style: a,
          class: e.columnClass,
          attrs: e.columnAttr
        },
        t
      );
    }, N = (t) => {
      const l = e.css ? {
        display: ["-webkit-box", "-ms-flexbox", "flex"],
        margin: `calc(-${v.value} / 2)`
      } : void 0;
      return p(e.tag, { style: l, class: e.class }, t);
    }, w = h(!1), $ = () => {
      if (!w.value) return;
      const t = b(), l = t.map((a, f) => {
        const m = a.map(x);
        return B(m, `${f}-${t.length}`);
      });
      return N(l);
    };
    return S(async () => {
      await V(), c(), w.value = !0, window && window.addEventListener("resize", c);
    }), W(() => {
      window && window.removeEventListener("resize", c);
    }), (t, l) => (I(), k(z($)));
  }
}), U = ["id"], R = /* @__PURE__ */ C({
  __name: "masonry-grid-item",
  setup(o) {
    const e = crypto.randomUUID();
    return (s, n) => (I(), T("div", {
      id: E(e),
      class: "masonry-grid-item"
    }, [
      G(s.$slots, "default")
    ], 8, U));
  }
}), D = {
  install(o, e) {
    o.component((e == null ? void 0 : e.name) ?? "masonry-grid", j);
  }
};
typeof window < "u" && (window.Vue3Masonry = D);
export {
  j as MasonryGrid,
  R as MasonryGridItem,
  D as default
};