43 lines
879 B
Vue
43 lines
879 B
Vue
|
<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>
|