xiangyuan-app/src/components/dialog/PopupTitle.vue

<script setup lang="ts">
import IconButton from '../basic/IconButton.vue';
import FlexRow from '../layout/FlexRow.vue';
import { selectStyleType } from '../theme/ThemeTools';
import { useTheme } from '../theme/ThemeDefine';
import Text from '../basic/Text.vue';

defineProps({
  top: {
    type: Boolean,
    default: false,
  },
  relative: {
    type: Boolean,
    default: false,
  },
  title: {
    type: String,
    default: '',
  },
  closeable: {
    type: Boolean,
    default: false,
  },
  closeIcon: {
    type: [String,Boolean],
    default: 'close',
  },
  closeIconSize: {
    type: Number,
    default: 36,
  },
  closeIconPosition: {
    type: String,
    default: 'right',
  },
})

const emit = defineEmits([ 'close' ])

const theme = useTheme();

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

<template>
  <FlexRow
    pointerEvents="none"
    innerClass="nana-popup-title"
    :innerStyle="{
      position: relative ? 'relative' : 'absolute',
      display: (closeable === true && closeIcon !== false) ? 'flex' : 'none',
      top: top ? 0 : undefined,
      bottom: top ? undefined : 0,
      alignItems: 'center',
      justifyContent: 'space-between',
      flexDirection:  selectStyleType(closeIconPosition, 'right', { left: 'row-reverse', right: 'row' }),
    }"
  >
    <IconButton 
      v-if="closeable === true && closeIcon"
      :size="closeIconSize || theme.resolveThemeSize('PopupCloseIconSize', 25)"
      :innerStyle="{ pointerEvents: 'auto' }"
    />
    <Text :text="title" />
    <IconButton 
      v-if="closeable === true && closeIcon"
      :icon="(closeIcon as string) || theme.resolveThemeSize('PopupCloseIconName', 'close')!"
      :size="closeIconSize || theme.resolveThemeSize('PopupCloseIconSize', 25)"
      :color="theme.resolveThemeSize('PopupCloseIconColor', 'text.content')"
      :innerStyle="{ pointerEvents: 'auto' }"
      @click="emit('close')"
    />
  </FlexRow>
</template>

<style>
.nana-popup-title {
  z-index: 110;
  left: 0;
  right: 0;
  align-items: center;
  padding: 20rpx 20rpx;
}
</style>