import { w as withInstall } from "../badge/index2.js";
import { defineComponent, computed, h, renderSlot, isVNode, Comment, Fragment, createTextVNode } from "vue";
var index = /* @__PURE__ */ (() => ".layui-space{display:inline-flex}.layui-space-horizontal .layui-space-item{display:flex;align-items:center}.layui-space-vertical{flex-direction:column}.layui-space-wrap{flex-wrap:wrap}.layui-space-fill{display:flex}.layui-space-align-start{align-items:flex-start}.layui-space-align-center{align-items:center}.layui-space-align-end{align-items:flex-end}.layui-space-align-baseline{align-items:baseline}.layui-space-item{width:inherit}\n")();
const _sfc_main = defineComponent({
  name: "LaySpace",
  props: {
    align: {
      type: String
    },
    direction: {
      type: String,
      default: "horizontal"
    },
    fill: {
      type: Boolean,
      default: false
    },
    size: {
      type: [Number, String, Array],
      default: "sm"
    },
    wrap: {
      type: Boolean,
      default: false
    }
  },
  setup(props, { slots }) {
    const computAlign = computed(() => {
      var _a;
      return (_a = props.align) != null ? _a : props.direction === "horizontal" ? "center" : "";
    });
    const spaceClass = computed(() => [
      "layui-space",
      {
        [`layui-space-align-${computAlign.value}`]: computAlign.value,
        [`layui-space-${props.direction}`]: props.direction,
        [`layui-space-wrap`]: props.wrap,
        [`layui-space-fill`]: props.fill
      }
    ]);
    const spaceStyle = computed(() => {
      const sizeMap = { xs: "4px", sm: "8px", md: "16px", lg: "24px" };
      let gap = "";
      if (Array.isArray(props.size)) {
        gap = props.size.map((size) => {
          if (typeof size === "number") {
            return `${size}px`;
          }
          if (typeof size === "string") {
            return sizeMap[size] || size;
          }
          return size;
        }).join(" ");
      } else if (typeof props.size === "string") {
        gap = sizeMap[props.size] || props.size;
      } else if (typeof props.size === "number") {
        gap = `${props.size}px`;
      }
      return {
        gap
      };
    });
    const itemStyle = computed(() => [
      props.fill ? { flexGrow: 1, minWidth: "100%" } : {}
    ]);
    const extractChildren = () => {
      const result = [];
      const children = renderSlot(slots, "default").children;
      const elementData = Array.isArray(children) ? [...children] : [];
      while (elementData.length) {
        const vnode = elementData.shift();
        if (vnode === null)
          continue;
        if (Array.isArray(vnode)) {
          elementData.unshift(...vnode);
        }
        if (!isVNode(vnode) || vnode.type === Comment)
          continue;
        if (vnode.type === Fragment && Array.isArray(vnode.children)) {
          elementData.unshift(vnode.children);
        } else if (typeof vnode === "string" || typeof vnode === "number") {
          result.push(createTextVNode(vnode));
        } else {
          result.push(vnode);
        }
      }
      return result;
    };
    return () => {
      const children = extractChildren();
      return h("div", {
        class: spaceClass.value,
        style: spaceStyle.value
      }, children.map((child, index2) => {
        var _a;
        return h("div", {
          key: (_a = child.key) != null ? _a : `item-${index2}`,
          class: "layui-space-item",
          style: itemStyle.value
        }, h(child));
      }));
    };
  }
});
const component = withInstall(_sfc_main);
export { component as default };