<template>
    <div class="cf-flex" :style="{
        alignItems: props.align,
        justifyContent: props.justify,
        flexDirection: flexDirection,
        flexWrap: props.wrap ? 'wrap' : 'nowrap',
        gap: props.gap
    }">
        <slot></slot>
    </div>
</template>

<script setup lang='ts'>
import type { Property } from 'csstype';
import { computed } from 'vue';

const props = withDefaults(defineProps<{
    align?: Property.AlignItems;
    justify?: Property.JustifyContent;
    vertical?: boolean;
    wrap?: boolean;
    gap?: string;
    reverse?: boolean;
}>(), {
    justify: 'normal',
    vertical: false,
    wrap: true
});

const flexDirection = computed(() =>
    props.vertical ?
        props.reverse ? 'column-reverse' : 'column'
        : props.reverse ? 'row-reverse' : 'row')

</script>

<style scoped>
.cf-flex
{
    display: flex;
}
</style>
