@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 u, toRefs as w, watch as C, onMounted as v, onBeforeUnmount as M, nextTick as W, createElementBlock as n, openBlock as o, normalizeStyle as p, Fragment as f, renderList as c, unref as B, renderSlot as S, createTextVNode as $, toDisplayString as b } from "vue";
import { useMasonryWall as x } from "@yeger/vue-masonry-wall-core";
const T = ["data-index"], z = /* @__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(l, { emit: s }) {
    const d = l, y = s, r = u([]), i = u(), { getColumnWidthTarget: g } = x({
      columns: r,
      emit: y,
      nextTick: W,
      onBeforeUnmount: M,
      onMounted: v,
      vue: 3,
      wall: i,
      watch: C,
      ...w(d)
    });
    return (e, _) => (o(), n("div", {
      ref_key: "wall",
      ref: i,
      class: "masonry-wall",
      style: p({ display: "flex", gap: `${e.gap}px` })
    }, [
      (o(!0), n(f, null, c(r.value, (k, a) => (o(), n("div", {
        key: a,
        class: "masonry-column",
        "data-index": a,
        style: p({
          display: "flex",
          "flex-basis": `${B(g)(a)}px`,
          "flex-direction": "column",
          "flex-grow": 1,
          gap: `${e.gap}px`,
          height: [
            "-webkit-max-content",
            "-moz-max-content",
            "max-content"
          ],
          "min-width": 0
        })
      }, [
        (o(!0), n(f, null, c(k, (t, m) => (o(), n("div", {
          key: e.keyMapper?.(e.items[t], a, m, t) ?? t,
          class: "masonry-item"
        }, [
          S(e.$slots, "default", {
            item: e.items[t],
            column: a,
            columnCount: r.value.length,
            row: m,
            index: t
          }, () => [
            $(b(e.items[t]), 1)
          ])
        ]))), 128))
      ], 12, T))), 128))
    ], 4));
  }
}), F = /* @__PURE__ */ (() => {
  const l = z;
  return l.install = (s) => {
    s.component("MasonryWall", l);
  }, l;
})();
export {
  F as default
};