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

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

import { defineComponent as u, computed as a, provide as c, reactive as f, toRef as m, h as d } from "vue";
import { useProps as g, useNameHelper as v } from "@vexip-ui/config";
import { rowProps as y } from "./props.mjs";
import { ROW_STATE as b } from "./symbol.mjs";
const x = Object.freeze([
  "start",
  "end",
  "center",
  "space-around",
  "space-between",
  "space-evenly"
]), h = Object.freeze(["top", "middle", "bottom", "stretch"]), z = u({
  name: "Row",
  props: y,
  setup(n, { slots: o }) {
    const e = g("row", n, {
      tag: "div",
      gap: 0,
      justify: {
        default: "start",
        validator: (r) => x.includes(r)
      },
      align: {
        default: "top",
        validator: (r) => h.includes(r)
      },
      columnFlex: !1
    }), t = v("row"), s = a(() => [
      t.b(),
      t.bs("vars"),
      t.bm(e.justify),
      t.bm(e.align),
      {
        [t.bm("inherit")]: e.inherit
      }
    ]), l = a(() => {
      if (!e.gap) return null;
      if (typeof e.gap == "number")
        return {
          [t.cv("h-gap")]: `${e.gap}px`
        };
      if (Array.isArray(e.gap)) {
        const [r, p] = e.gap;
        return {
          [t.cv("h-gap")]: `${r}px`,
          [t.cv("v-gap")]: `${p}px`
        };
      }
      return null;
    }), i = a(() => e.columnFlex === !0 ? {
      justify: "start",
      align: "top"
    } : e.columnFlex ? {
      justify: "start",
      align: "top",
      ...e.columnFlex
    } : !1);
    return c(
      b,
      f({
        columnFlex: i,
        gap: m(e, "gap")
      })
    ), () => d(
      e.tag || "div",
      {
        class: s.value,
        style: l.value
      },
      {
        default: () => o.default && o.default()
      }
    );
  }
});
export {
  z as default
};
//# sourceMappingURL=row.mjs.map