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 k, createBlock as z, openBlock as I, resolveDynamicComponent as T, h as p, createElementBlock as W, unref as E, renderSlot as G } from "vue";
const g = (r, e) => {
  if (typeof r == "number" || typeof r == "string")
    return Number(r);
  if (typeof r != "object")
    return 0;
  let s = 1 / 0, n = r.default ?? 0;
  for (let i in r) {
    const o = parseInt(i), c = r[i], u = parseInt(String(c));
    if (isNaN(o) || isNaN(u)) continue;
    e <= o && o <= s && (s = o, n = c);
  }
  return n;
};
function y(r, e) {
  let s = [];
  return r.forEach((n) => {
    var o, c, u;
    if (((c = (o = n.props) == null ? void 0 : o.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 m = n.children.default();
      s = s.concat(m);
    } 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 },
    css: { type: Boolean, default: !0 },
    tag: { default: "div" },
    class: {},
    columnTag: { default: "div" },
    columnClass: {},
    columnAttr: {},
    childTag: { default: "div" },
    childClass: {},
    childAttr: {}
  },
  setup(r) {
    const e = r, s = A(), n = h(2), i = h(0), o = h(0), c = () => {
      const t = o.value;
      o.value = (window ? window.innerWidth : null) ?? 1 / 0, t !== o.value && (u(o.value), m(o.value));
    }, u = (t) => {
      const l = g(e.columns, t), a = Math.max(1, l ?? 0);
      n.value = a;
    }, m = (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 d = f % n.value;
        l[d] || (l[d] = []), l[d].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
      );
    }, N = (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
      );
    }, B = (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 d = a.map(x);
        return N(d, `${f}-${t.length}`);
      });
      return B(l);
    };
    return S(async () => {
      await V(), c(), w.value = !0, window && window.addEventListener("resize", c);
    }), k(() => {
      window && window.removeEventListener("resize", c);
    }), (t, l) => (I(), z(T($)));
  }
}), U = ["id"], R = /* @__PURE__ */ C({
  __name: "masonry-grid-item",
  setup(r) {
    const e = crypto.randomUUID();
    return (s, n) => (I(), W("div", {
      id: E(e),
      class: "masonry-grid-item"
    }, [
      G(s.$slots, "default")
    ], 8, U));
  }
}), D = {
  install(r, e) {
    r.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
};