@yeger/vue-masonry-wall/dist/index.mjs

Responsive masonry layout with SSR support and zero dependencies for Vue 3.

import { defineComponent as h, ref as p, nextTick as C, onBeforeUnmount as M, onMounted as v, watch as W, toRefs as B, openBlock as n, createElementBlock as o, normalizeStyle as f, Fragment as d, renderList as y, unref as S, renderSlot as $, createTextVNode as b, toDisplayString as T } from "vue";
import { useMasonryWall as z } from "@yeger/vue-masonry-wall-core";
const D = ["data-index"], E = /* @__PURE__ */ h({
  __name: "masonry-wall",
  props: {
    columnWidth: { default: 400 },
    items: {},
    gap: { default: 0 },
    rtl: { type: Boolean, default: !1 },
    ssrColumns: { default: 0 },
    scrollContainer: { default: null },
    minColumns: { default: 1 },
    maxColumns: {},
    keyMapper: {}
  },
  emits: ["redraw", "redrawSkip"],
  setup(t, { emit: s }) {
    const c = t, g = s, r = p([]), i = p(), { getColumnWidthTarget: k } = z({
      columns: r,
      emit: g,
      nextTick: C,
      onBeforeUnmount: M,
      onMounted: v,
      vue: 3,
      wall: i,
      watch: W,
      ...B(c)
    });
    return (e, F) => (n(), o("div", {
      ref_key: "wall",
      ref: i,
      class: "masonry-wall",
      style: f({ display: "flex", gap: `${e.gap}px` })
    }, [
      (n(!0), o(d, null, y(r.value, (w, a) => (n(), o("div", {
        key: a,
        class: "masonry-column",
        "data-index": a,
        style: f({
          display: "flex",
          "flex-basis": `${S(k)(a)}px`,
          "flex-direction": "column",
          "flex-grow": 1,
          gap: `${e.gap}px`,
          height: [
            "-webkit-max-content",
            "-moz-max-content",
            "max-content"
          ],
          "min-width": 0
        })
      }, [
        (n(!0), o(d, null, y(w, (l, m) => {
          var u;
          return n(), o("div", {
            key: ((u = e.keyMapper) == null ? void 0 : u.call(e, e.items[l], a, m, l)) ?? l,
            class: "masonry-item"
          }, [
            $(e.$slots, "default", {
              item: e.items[l],
              column: a,
              row: m,
              index: l
            }, () => [
              b(T(e.items[l]), 1)
            ])
          ]);
        }), 128))
      ], 12, D))), 128))
    ], 4));
  }
}), R = /* @__PURE__ */ (() => {
  const t = E;
  return t.install = (s) => {
    s.component("MasonryWall", t);
  }, t;
})();
export {
  R as default
};