@sollentson/masonry-layout/dist/masonry-layout2.js

Masonry Layout Vue component

import { defineComponent as M, useCssVars as _, useSlots as A, ref as s, computed as E, onMounted as I, nextTick as $, watch as b, openBlock as n, createElementBlock as a, normalizeStyle as v, Fragment as g, renderList as h, createBlock as x, TransitionGroup as w, withCtx as H, resolveDynamicComponent as S } from "vue";
import { useMutationObserver as D } from "@vueuse/core";
const T = /* @__PURE__ */ M({
  __name: "Masonry",
  props: {
    timing: { default: "ease" },
    duration: { default: "0.3s" },
    offsetY: { default: "5px" },
    offsetX: { default: "5px" },
    columns: { default: 3 }
  },
  setup(k) {
    _((e) => ({
      "2bc98f3e": e.duration,
      "616ad718": e.timing
    }));
    const u = k, i = A(), m = s([]), p = s(), c = s(0), f = s(0), l = E(() => {
      var e, t;
      return (t = (e = i.default) == null ? void 0 : e.call(i)[0]) == null ? void 0 : t.children;
    }), C = () => {
      const e = Array.from({ length: u.columns }, () => 0);
      for (let t = 0; t < u.columns; t++) {
        const o = document.getElementById(`list-${t}`);
        o && (e[t] = [...o.children].reduce((r, d) => r + d.offsetHeight, 0));
      }
      c.value = e.indexOf(Math.min(...e));
    }, y = () => {
      l.value && Array.isArray(l.value) && l.value[f.value] && (m.value[c.value].push(l.value[f.value]), f.value++);
    };
    return I(async () => {
      m.value = Array.from({ length: u.columns }, () => []), await $(y);
    }), b([c, l], y), D(p, C, { childList: !0, subtree: !0 }), (e, t) => (n(), a("div", {
      ref_key: "masonry",
      ref: p,
      style: v({
        gap: e.offsetX,
        display: "flex"
      })
    }, [
      (n(!0), a(g, null, h(m.value, (o, r) => (n(), x(w, {
        id: `list-${r}`,
        key: `list-${r}`,
        style: {
          padding: 0,
          margin: 0,
          flex: 1
        },
        name: "masonry",
        tag: "ul"
      }, {
        default: H(() => [
          (n(!0), a(g, null, h(o, (d, B) => (n(), a("li", {
            key: `item-${B}`,
            style: v({
              marginBottom: e.offsetY,
              flexDirection: "column",
              display: "flex"
            })
          }, [
            (n(), x(S(d)))
          ], 4))), 128))
        ]),
        _: 2
      }, 1032, ["id"]))), 128))
    ], 4));
  }
});
export {
  T as default
};