minnan/src/components/dynamic/group/FormGroup.vue

<template>
  <FlexCol 
    :innerClass="[
      'dynamic-form-group', 
      {
        'collapsed': collapsed,
        'collapsible': collapsible,
        'plain': plain,
      }
    ]"
    :innerStyle="dynamicFormGroupStyle"
  >
    <Touchable
      v-if="title" 
      innerClass="title" 
      direction="row"
      :innerStyle="dynamicFormGroupTitleWraperStyle"
      @click="collapsible ? collapsed = !collapsed : null"
    >
      <span :style="dynamicFormGroupTitleStyle">{{ title }}</span>
      <FlexRow align="center">
        <text :style="dynamicFormGroupTitleStyle" v-show="collapsed">点击展开更多</text>
        <Icon 
          v-if="collapsible"
          :size="theme.resolveThemeSize('DynamicFormGroupIconSize', 22)" 
          icon="arrow-down"
          innerClass="collapsible-icon"
        />
      </FlexRow>
    </Touchable>
    <Row v-if="!collapsed" :justify="(justify as any)" :gutter="gutter">
      <slot />
    </Row>
  </FlexCol>
</template>

<script lang="ts" setup>
import { computed, ref } from "vue";
import Row from "@/components/layout/grid/Row.vue";
import Icon from "@/components/basic/Icon.vue";
import { useTheme } from "@/components/theme/ThemeDefine";
import FlexRow from "@/components/layout/FlexRow.vue";
import Touchable from "@/components/feedback/Touchable.vue";
import FlexCol from "@/components/layout/FlexCol.vue";

const props = defineProps({
  /**
   * 标题
   */
  title: {
    type: String,
    default: "",
  },
  /**
   * 栅格间隔 px
   */
  gutter: {
    type: Number,
    default: null,
  },
  /**
   * flex 布局下的水平排列方式：start end center space-around space-between
   */
  justify: {
    type: String,
    default: "start",
  },
  /**
   * 是否可折叠
   */
  collapsible: {
    type: Boolean,
    default: false,
  },
  /**
   * 是否为朴素样式
   */
  plain: {
    type: Boolean,
    default: false,
  },
  /**
   * 是否默认折叠
   */
  collapsed: {
    type: Boolean,
    default: false,
  },
});
const theme = useTheme();

const collapsed = ref(props.collapsed);
const dynamicFormGroupStyle = computed(() => ({
  backgroundColor: theme.resolveThemeColor('DynamicFormGroupBackgroundColor', 'white'),
  borderRadius: theme.resolveThemeSize('DynamicFormGroupBorderRadius', 10),
  padding: `${theme.resolveThemeSize('DynamicFormGroupPaddingVertical', 10)} ${theme.resolveThemeSize('DynamicFormGroupPaddingHorizontal', 0)}`,
  marginBottom: theme.resolveThemeSize('DynamicFormGroupMarginBottom', 12),
})); 
const dynamicFormGroupTitleWraperStyle = computed(() => ({
  marginBottom: theme.resolveThemeSize('DynamicFormGroupTitleMarginBottom', 12),
})); 
const dynamicFormGroupTitleStyle = computed(() => ({
  fontSize: theme.resolveThemeSize('DynamicFormGroupTitleFontSize', 25),
  color: theme.resolveThemeColor('DynamicFormGroupTitleColor', 'text.second')
})); 

defineOptions({
  options: {
    virtualHost: true,
    inheritAttrs: false,
    styleIsolation: 'shared',
  }
})
</script>

<style lang="scss">
.dynamic-form-group {
  &.collapsed {
    .collapsible-icon {
      transform: rotate(0deg);
    }
  }
  &.collapsible {
    .title {
      cursor: pointer;
    }
  }
  .collapsible-icon {
    transform: rotate(180deg);
    transition: transform 0.3s ease-in-out;
  }
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .title-right {
      display: flex;
      flex-direction: row;
      align-items: center;
    }
  }

  &.plain {
    padding: 0;
    background-color: transparent;
  }
}
</style>