minnan/src/components/display/PreviewItem.vue

<template>
  <FlexRow justify="space-between" align="flex-start" :gap="gap" :padding="[margin??0,0]">
    <FlexRow :width="titleWidth">
      <Text v-bind="titleProps" :color="titleColor" :text="title" />
    </FlexRow>
    <template v-if="valueType === 'text'">
      <FlexCol v-if="Array.isArray(value)">
        <Text 
          v-for="(item,k) in value"
          :key="k" 
          v-bind="valueProps"
          :color="valueColor"
          :text="item"
        />
      </FlexCol>
      <Text v-else v-bind="valueProps" :color="valueColor" :text="value || emptyText" />
    </template>
    
    <template v-else-if="valueType === 'image'">
      <FlexRow v-if="Array.isArray(value)" wrap>
        <Image 
          v-for="(item,k) in value" 
          :key="k" 
          :width="100" 
          :height="100"
          :radius="12"
          round
          v-bind="(valueProps as ImageProps)" 
          :src="item"
          clickPreview
        />
      </FlexRow>
      <Image 
        v-else
        :width="100"
        :height="100"
        :radius="12"
        round
        v-bind="(valueProps as ImageProps)"
        :src="value"
        clickPreview
      />
    </template>
  </FlexRow>
</template>

<script setup lang="ts">
import FlexRow from '../layout/FlexRow.vue';
import Text,{ type TextProps } from '../basic/Text.vue';
import FlexCol from '../layout/FlexCol.vue';
import Image, { type ImageProps } from '../basic/Image.vue';

export type PreviewItemType = 'text' | 'image';

const props = withDefaults(defineProps<{
  title?: string,
  titleColor?: string,
  titleWidth?: string|number,
  titleProps?: TextProps,
  value?: string | string[],
  valueColor?: string,
  valueType?: PreviewItemType,
  valueProps?: TextProps|ImageProps,
  emptyText?: string,
  gap?: number,
  margin?: number,
}>(), {
  emptyText: '空',
  valueType: 'text',
});

</script>