@varlet/ui/es/space/Space.mjs

A Vue3 component library based on Material Design 2 and 3, supporting mobile and desktop.

import { defineComponent, createVNode as _createVNode } from "vue";
import { call, isArray } from "@varlet/shared";
import { createNamespace, flatFragment } from "../utils/components.mjs";
import { padStartFlex, toSizeUnit } from "../utils/elements.mjs";
import { computeMargin } from "./margin.mjs";
import { props } from "./props.mjs";


const isInternalSize = (size) => ["mini", "small", "normal", "large"].includes(size);
const {
  name,
  n,
  classes
} = createNamespace("space");
function getSize(size, isInternalSize2) {
  return isInternalSize2 ? [`var(--space-size-${size}-y)`, `var(--space-size-${size}-x)`] : isArray(size) ? size.map(toSizeUnit) : [toSizeUnit(size), toSizeUnit(size)];
}
var stdin_default = defineComponent({
  name,
  props,
  setup(props2, {
    slots
  }) {
    return () => {
      var _a;
      const {
        inline,
        justify,
        align,
        wrap,
        direction,
        size
      } = props2;
      const _children = (_a = call(slots.default)) != null ? _a : [];
      const [y, x] = getSize(size, isInternalSize(size));
      const children = flatFragment(_children);
      const lastIndex = children.length - 1;
      const spacers = children.map((child, index) => {
        var _a2;
        const margin = computeMargin(y, x, {
          direction,
          justify,
          index,
          lastIndex
        });
        return _createVNode("div", {
          "class": classes([direction === "column", n("--auto")]),
          "key": (_a2 = child.key) != null ? _a2 : void 0,
          "style": {
            margin
          }
        }, [child]);
      });
      return _createVNode("div", {
        "class": classes(n(), n("$--box"), [inline, n("--inline")]),
        "style": {
          flexDirection: direction,
          justifyContent: padStartFlex(justify),
          alignItems: padStartFlex(align),
          flexWrap: wrap ? "wrap" : "nowrap",
          margin: direction === "row" ? `calc(-1 * ${y} / 2) 0` : void 0
        }
      }, [spacers]);
    };
  }
});
export {
  stdin_default as default
};