vue-amazing-ui/es/flex/Flex.vue2.js

An Amazing Vue3 UI Components Library, Using TypeScript.

import { defineComponent as i, computed as r, createElementBlock as n, openBlock as o, normalizeStyle as u, normalizeClass as d, renderSlot as s } from "vue";
const m = /* @__PURE__ */ i({
  __name: "Flex",
  props: {
    width: { default: "auto" },
    vertical: { type: Boolean, default: !1 },
    wrap: { default: "nowrap" },
    justify: { default: "normal" },
    align: { default: "normal" },
    gap: { default: "middle" }
  },
  setup(l) {
    const a = l, t = r(() => typeof a.width == "number" ? `${a.width}px` : a.width), p = r(() => {
      if (a.gap === void 0)
        return 0;
      if (typeof a.gap == "number")
        return `${a.gap}px`;
      if (Array.isArray(a.gap))
        return `${a.gap[1]}px ${a.gap[0]}px`;
      if (["small", "middle", "large"].includes(a.gap))
        return {
          small: "8px",
          middle: "16px",
          large: "24px"
        }[a.gap];
    });
    return (e, f) => (o(), n("div", {
      class: d(["flex-wrap", { "flex-vertical": e.vertical }]),
      style: u(`
      width: ${t.value};
      gap: ${p.value};
      margin-bottom: -${Array.isArray(a.gap) && e.wrap ? a.gap[1] : 0}px;
      --wrap: ${e.wrap};
      --justify: ${e.justify};
      --align: ${e.align};
    `)
    }, [
      s(e.$slots, "default", {}, void 0, !0)
    ], 6));
  }
});
export {
  m as default
};