minnan/src/components/basic/CellGroup.vue

<template>
  <FlexCol :style="{ width: '100%' }">
    <text v-if="title" :style="(titleSpeicalStyle as any)">
      {{ title }}
    </text>
    <view v-else-if="showTopMargin" :style="{ ...titleStyle, paddingTop: showTopMarginSize }" />
    <view :style="{
      ...(inset ? insetViewStyle as any : {}),
      ...(round ? roundViewStyle as any : {}),
    }">
      <slot />
    </view>
    <view v-if="showBottomMargin" :style="(titleSpeicalStyle as any)" />
  </FlexCol>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { propGetThemeVar, useTheme } from '../theme/ThemeDefine';
import FlexCol from '../layout/FlexCol.vue';

export interface CellGroupProp {
  /**
   * 分组标题
   */
  title?: string,
  /**
   * 是否展示为圆角卡片风格
   */
  round?: boolean,
  /**
   * 是否增加内边距
   */
  inset?: boolean,
  /**
   * 是否显示底部边距。默认否
   */
  showBottomMargin?: boolean,
  /**
   * 是否显示没有标题时顶部边距。默认是
   */
  showTopMargin?: boolean,
  /**
   * 是否显示没有标题时顶部边距大小。默认是 10rpx
   */
  showTopMarginSize?: number,
  /**
   * 标题的样式
   */
  titleStyle?: object,
  /**
   * 标题背景是否变暗
   */
  titleDark?:  boolean,
}

const theme = useTheme();

const props = withDefaults(defineProps<CellGroupProp>(), {
  titleDark: () => propGetThemeVar('CellGroupTitleDark', false),
  inset: () => propGetThemeVar('CellGroupInset', false),
  showTopMargin: () => propGetThemeVar('CellGroupShowTopMargin', true),
  showBottomMargin: () => propGetThemeVar('CellGroupShowBottomMargin', false),
  showTopMarginSize: () => propGetThemeVar('CellGroupTopMarginSize', 10),
});

const CellGroupDarkTitleBackgroundColor = computed(() => theme.resolveThemeColor('CellGroupDarkTitleBackgroundColor', 'border.light'));
const CellGroupInsetPaddingHorizontal = computed(() => theme.resolveThemeSize('CellGroupInsetPaddingHorizontal', 40));
const CellGroupPaddingHorizontal = computed(() => theme.resolveThemeSize('CellGroupPaddingHorizontal', 20));

const titleSpeicalStyle = computed(() => ({
  color: theme.resolveThemeColor('CellGroupTitleColor', 'text.second'),
  paddingTop: theme.resolveThemeSize('CellGroupTitlePaddingTop', 24),
  paddingBottom: theme.resolveThemeSize('CellGroupTitlePaddingBottom', 12),
  backgroundColor: props.titleDark ? CellGroupDarkTitleBackgroundColor.value : undefined,
  paddingLeft: props.inset ? CellGroupInsetPaddingHorizontal.value : CellGroupPaddingHorizontal.value,
  paddingRight: props.inset ? CellGroupInsetPaddingHorizontal.value : CellGroupPaddingHorizontal.value,
}));
const roundViewStyle = computed(() => ({
  borderRadius: theme.resolveThemeSize('CellGroupInsetBorderRadius', 20),
  backgroundColor: theme.resolveThemeColor('CellGroupInsetBackgroundColor', 'white'),
  overflow: 'hidden',
}));
const insetViewStyle = computed(() => ({
  position: 'relative',
  margin: `${theme.resolveThemeSize('CellGroupInsetMarginVertical', 0)} ${theme.resolveThemeSize('CellGroupInsetMarginHorizontal', 30)}`,
  flexDirection: 'column',
}));

</script>