vexip-ui/es/components/grid/grid.mjs

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

import { defineComponent as d, computed as i, provide as m, reactive as g, toRef as y, h as b } from "vue";
import { useProps as $, useNameHelper as A } from "@vexip-ui/config";
import { gridProps as j } from "./props.mjs";
import { GRID_STATE as w } from "./symbol.mjs";
const o = /^\d+$/, x = Object.freeze([
  "start",
  "end",
  "center",
  "space-around",
  "space-between",
  "space-evenly"
]), R = Object.freeze(["top", "middle", "bottom", "stretch"]), T = d({
  name: "Grid",
  props: j,
  setup(f, { slots: s }) {
    const t = $("grid", f, {
      tag: "div",
      gap: 0,
      rows: "none",
      columns: 24,
      autoRows: "auto",
      autoColumns: "auto",
      dense: !1,
      justify: {
        default: "start",
        validator: (r) => x.includes(r)
      },
      align: {
        default: "stretch",
        validator: (r) => R.includes(r)
      },
      cellFlex: !1
    }), n = A("grid"), p = i(() => ({
      [n.b()]: !0,
      [n.bm(t.justify)]: !0,
      [n.bm("inherit")]: t.inherit,
      [n.bm(t.align)]: t.align !== "stretch",
      [n.bm("dense")]: t.dense
    })), c = i(() => {
      const r = {};
      return t.gap && (r.gap = Array.isArray(t.gap) ? `${t.gap[0]}px ${t.gap[1]}px` : `${t.gap}px`), r.gridTemplateColumns = u(t.columns), t.rows !== "none" && (r.gridTemplateRows = u(t.rows)), t.autoRows !== "auto" && (r.gridAutoRows = a(t.autoRows)), t.autoColumns !== "auto" && (r.gridAutoColumns = a(t.autoColumns)), r;
    }), l = i(() => t.cellFlex === !0 ? {
      justify: "start",
      align: "top"
    } : t.cellFlex ? {
      justify: "start",
      align: "top",
      ...t.cellFlex
    } : !1);
    m(w, g({ cellFlex: l, columns: y(t, "columns") }));
    function u(r) {
      return typeof r == "number" ? `repeat(${r}, 1fr)` : typeof r == "string" ? o.test(r.trim()) ? `repeat(${r}, 1fr)` : r : Array.isArray(r) ? r.map((e) => typeof e == "number" ? `${e}fr` : typeof e == "string" && o.test(e.trim()) ? `${e}fr` : e).join(" ") : r;
    }
    function a(r) {
      return typeof r == "number" ? `${r}fr` : typeof r == "string" ? o.test(r.trim()) ? `repeat(${r}, 1fr)` : r : Array.isArray(r) ? r.map((e) => typeof e == "number" ? `${e}fr` : typeof e == "string" && o.test(e.trim()) ? `${e}fr` : e).join(" ") : r;
    }
    return () => b(
      t.tag || "div",
      {
        class: p.value,
        style: c.value
      },
      {
        default: () => {
          var r;
          return (r = s.default) == null ? void 0 : r.call(s);
        }
      }
    );
  }
});
export {
  T as default
};
//# sourceMappingURL=grid.mjs.map