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

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

import { defineComponent as c, ref as u, nextTick as f, onBeforeUnmount as m, onMounted as p, watch as d, toRefs as _ } from "vue";
import { useMasonryWall as y } from "@yeger/vue-masonry-wall-core";
const h = /* @__PURE__ */ c({
  __name: "masonry-wall",
  props: {
    columnWidth: { default: 400 },
    items: null,
    gap: { default: 0 },
    rtl: { type: [Boolean, null], default: !1 },
    ssrColumns: { default: 0 },
    scrollContainer: { default: null },
    minColumns: { default: 1 },
    maxColumns: { default: void 0 },
    keyMapper: null
  },
  emits: ["redraw", "redraw-skip"],
  setup(e, { emit: t }) {
    const n = e, l = u([]), r = u(), { getColumnWidthTarget: a } = y({
      columns: l,
      emit: t,
      nextTick: f,
      onBeforeUnmount: m,
      onMounted: p,
      vue: 2,
      wall: r,
      watch: d,
      ..._(n)
    });
    return { __sfc: !0, props: n, emit: t, columns: l, wall: r, getColumnWidthTarget: a, heightStyle: ["-webkit-max-content", "-moz-max-content", "max-content"] };
  }
});
function g(e, t, n, l, r, a, o, i) {
  var s = typeof e == "function" ? e.options : e;
  return s.render = t, s.staticRenderFns = n, s._compiled = !0, {
    exports: e,
    options: s
  };
}
var w = function() {
  var t = this, n = t._self._c, l = t._self._setupProxy;
  return n("div", { ref: "wall", staticClass: "masonry-wall", style: { display: "flex", gap: `${t.gap}px` } }, t._l(l.columns, function(r, a) {
    return n("div", { key: a, staticClass: "masonry-column", style: {
      display: "flex",
      "flex-basis": `${l.getColumnWidthTarget(a)}px`,
      "flex-direction": "column",
      "flex-grow": 1,
      gap: `${t.gap}px`,
      height: l.heightStyle,
      "min-width": 0
    }, attrs: { "data-index": a } }, t._l(r, function(o, i) {
      var s;
      return n("div", { key: ((s = t.keyMapper) == null ? void 0 : s.call(t, t.items[o], a, i, o)) ?? o, staticClass: "masonry-item" }, [t._t("default", function() {
        return [t._v(" " + t._s(t.items[o]) + " ")];
      }, { item: t.items[o], index: o })], 2);
    }), 0);
  }), 0);
}, C = [], v = /* @__PURE__ */ g(
  h,
  w,
  C
);
const x = v.exports, W = /* @__PURE__ */ (() => {
  const e = x;
  return e.install = (t) => {
    t.component("MasonryWall", e);
  }, e;
})();
export {
  W as default
};