@aotearoan/neon/dist/components/layout/grid/NeonGrid.es.js

Neon is a lightweight design library of Vue 3 components with minimal dependencies.

import { defineComponent as g, ref as S, onMounted as h, onUnmounted as $, watch as b } from "vue";
import { NeonResponsiveUtils as j } from "../../../common/utils/NeonResponsiveUtils.es.js";
const l = "neon-grid-styles-", C = g({
  name: "NeonGrid",
  props: {
    /**
     * The grid layouts
     */
    layouts: { type: Array, required: !0 },
    /**
     * Id of the grid, should be unique on the page
     */
    id: { type: String, required: !0 }
  },
  setup(o) {
    const m = S(new Set(o.layouts.map((t) => t.grid.flat()).flat())), u = (t) => {
      let e = `  .neon-grid {
    grid-template-areas: `;
      e = e + t.map((r) => `"${r.join(" ")}"`).join(`
`) + ";", e = e + `
  }
`;
      const n = [];
      e = e + t.map((r) => r.map((i) => n.indexOf(i) >= 0 ? "" : (n.push(i), `
  .${i} {
    grid-area: ${i};
  }`)).join(`
`)).join("");
      const d = new Set(t.flat().flat()), f = Array.from(m.value).filter((r) => !d.has(r));
      return e = e + f.map((r) => `

  .${r} { display: none!important; }`), e;
    }, c = (t) => {
      const e = t.grid, n = j.breakpoints[t.breakpoint];
      return `@media screen${n.length > 0 ? ` and ${n}` : ""} {
` + u(e) + `
}`;
    }, p = () => o.layouts.map((t) => c(t)).join(`
`), y = (t) => {
      const e = l + o.id;
      let n = document.getElementById(e);
      n === null && (n = document.createElement("style"), n.id = e, document.head.appendChild(n)), n.innerHTML = t;
    }, a = () => {
      const t = p();
      y(t);
    }, s = () => {
      const t = l + o.id, e = document.getElementById(t);
      e != null && e.parentNode && e.parentNode.removeChild(e);
    };
    h(() => a()), $(() => s()), b(
      () => o.layouts,
      () => {
        s(), a();
      },
      { deep: !0, immediate: !0 }
    );
  }
});
export {
  C as default
};
//# sourceMappingURL=NeonGrid.es.js.map