vue3-plock/dist/water-fall.js

## Installation

import { reactive as x, onUnmounted as C, defineComponent as h, openBlock as l, createElementBlock as m, normalizeStyle as y, renderSlot as _, unref as c, Fragment as d, renderList as g, createBlock as w, withCtx as k } from "vue";
function v(o) {
  const e = x({
    columns: 1,
    gap: 1
  }), { columns: t, gap: n, medias: a } = o;
  if (!a)
    return i(0);
  const s = a.map(
    (r) => window.matchMedia(`(min-width: ${r}px)`)
  ), u = () => {
    let r = 0;
    s.forEach((f) => {
      f.matches && r++;
    });
    const p = Math.min(s.length - 1, r);
    i(p);
  };
  u();
  for (let r of s)
    r.addEventListener("change", u);
  C(() => {
    for (let r of s)
      r.removeEventListener("change", u);
  });
  function i(r) {
    return e.columns = t[r], e.gap = n[r], e;
  }
  return e;
}
function $(o = [], e = 3) {
  const t = [];
  for (let n = 0; n < o.length; n += e) {
    const a = o.slice(n, n + e);
    t.push(a);
  }
  return t;
}
function E(o = [], e = 3) {
  const t = Array.from({ length: e }, () => []);
  for (let n = 0; n < e; n++)
    for (let a = 0; a < o.length; a += 1)
      o[a][n] && t[n].push(o[a][n]);
  return t;
}
const S = /* @__PURE__ */ h({
  __name: "fall-row",
  props: {
    gap: {
      type: String,
      require: !0
    }
  },
  setup(o) {
    const e = o;
    return (t, n) => (l(), m("div", {
      style: y({
        display: "grid",
        rowGap: e.gap,
        gridTemplateColumns: "minmax(0, 1fr)"
      })
    }, [
      _(t.$slots, "default")
    ], 4));
  }
}), B = /* @__PURE__ */ h({
  __name: "water-fall",
  props: {
    data: {
      type: Array,
      default: () => [],
      require: !0
    },
    config: {
      type: Object,
      default: () => ({}),
      require: !0
    }
  },
  setup(o) {
    const e = o, t = v(e.config), n = $(e.data, t.columns), a = E(n, t.columns);
    return (s, u) => (l(), m("div", {
      style: y({
        display: "grid",
        alignItems: "start",
        gridColumnGap: c(t).gap + "px",
        gridTemplateColumns: `repeat(${c(t).columns}, minmax(0, 1fr))`
      })
    }, [
      (l(!0), m(d, null, g(c(a), (i, r) => (l(), w(S, {
        key: r,
        gap: c(t).gap + "px"
      }, {
        default: k(() => [
          (l(!0), m(d, null, g(i, (p, f) => _(s.$slots, "default", {
            key: f,
            src: p
          })), 128))
        ]),
        _: 2
      }, 1032, ["gap"]))), 128))
    ], 4));
  }
});
export {
  B as waterFall
};