import { defineComponent, computed } from 'vue';
import getAllChildren from './utils/getAllChildren.js';
const space = defineComponent({
    name: 'space',
    props: {
        justify: {
            type: String,
        },
        align: {
            type: String,
            default: 'center',
        },
        vertical: {
            type: Boolean,
        },
        gap: {
            type: Number,
            default: 20,
        },
    },
    setup(props, { slots }) {
        const spaceStyle = computed(() => {
            return {
                'align-items': props.vertical ? '' : props.align,
                'justify-content': props.justify,
                'flex-flow': props.vertical ? 'column nowrap' : 'auto',
            };
        });
        const spaceGap = computed(() => {
            return props.gap + 'px';
        });
        // const children = slots.default?.() || []  useless
        const horizontalClass = computed(() => {
            return {
                'margin-top': 0,
                'margin-bottom': 0,
                'margin-right': spaceGap.value,
            };
        });
        const verticalClass = computed(() => {
            return {
                'margin-left': 0,
                'margin-right': 0,
                'margin-bottom': spaceGap.value,
            };
        });
        const LastElementStyle = computed(() => {
            return props.vertical ? { 'margin-bottom': 0 } : { 'margin-right': 0 };
        });
        return {
            spaceStyle,
            verticalClass,
            horizontalClass,
            LastElementStyle,
        };
    },
    render() {
        const { spaceStyle, verticalClass, horizontalClass, LastElementStyle, vertical, } = this;
        const children = getAllChildren(this.$slots.default());
        return (<div class="u-space" style={spaceStyle}>
        {children.map((child, index) => (<div style={[
                    vertical ? verticalClass : horizontalClass,
                    index == children.length - 1 && LastElementStyle,
                ]}>
            {child}
          </div>))}
      </div>);
    },
});
export default space;