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

An Amazing Vue3 UI Components Library, Using TypeScript.

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