<template>
	<view class="ch-flex" :class="flexClassList">
		<slot></slot>
	</view>
</template>

<script setup>
import { computed, defineProps } from 'vue'

const props = defineProps([
	'direction',
	'wrap',
	'justify',
	'items',
	'align'
])

const flexClassList = computed(() => {
	const direction = props.direction ? `ch-flex--${props.direction}` : '';
	const wrap = props.wrap ? `ch-flex--${props.wrap}` : '';
	const justify = props.justify ? `ch-flex--justify-${props.justify}` : '';
	const items = props.items ? `ch-flex--items-${props.items}` : '';
	const align = props.align ? `ch-flex--algin-${props.align}` : '';
	return Array.from(new Set([direction, wrap, justify, items, align])).join(' ');
})
</script>

<style lang="scss" scoped>
@import './ch-flex.scss';
</style>