vue-amazing-ui/es/space/Space.vue2.js

An Amazing Vue3 UI Components Library, Using TypeScript.

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