<template>
  <FlexView
    v-bind="props"
    direction="row"
    :innerStyle="{
      display: inline ? 'flex-inline' : 'flex',
      flex: flex,
      flexWrap: wrap ? 'wrap' : 'nowrap',
      gap: resolveThemeSize(gutter),
      ...(innerStyle || {}),
    }"
  >
    <slot />
  </FlexView>
</template>

<script setup lang="ts">
/** 
 * 24列栅格行组件。
 */
import { useTheme } from '@/components/theme/ThemeDefine';
import type { FlexProps } from '../FlexView.vue';
import FlexView from '../FlexView.vue';

export interface RowProps extends FlexProps {
  /**
   * 列元素之间的间距（单位为 px）
   */
  gutter?: number;
  /**
   * 是否自动换行，默认 true
   */
  wrap?: boolean;
  /**
   * 行内元素
   */
  inline?: boolean,
}

defineOptions({
  options: {
    virtualHost: true,
  }
})

const props = withDefaults(defineProps<RowProps>(), {
  /**
   * 列元素之间的间距（单位为rpx）
   */
  gutter: 0,
  flex: 1,
  wrap: true,
  inline: false,
})

const { resolveThemeSize } = useTheme();
</script>