xiangyuan-gov-app/src/components/dialog/ActionSheetItem.vue

<template>
  <Touchable
    center
    direction="column"
    :touchable="!disabled"
    :innerStyle="themeStyles.item.value"
    :pressedColor="themeContext.resolveThemeColor('ActionSheetItemPressedColor', 'pressed.white')"
    @click="disabled === true ? undefined : emit('click')"
  >
    <text 
      :style="{
        ...themeStyles.itemTitle.value,
        color: themeContext.resolveThemeColor(props.disabled === true ? themeContext.resolveThemeColor('ActionSheetItemDisabledTextColor', 'grey') : props.color),
        fontWeight: bold ? 'bold' : 'normal',
      }"
    >
      {{ name }}
    </text>
    <text v-if="subname" :style="themeStyles.itemSubTitle.value">{{subname}}</text>
  </Touchable>
</template>

<script setup lang="ts">
import Touchable from '../feedback/Touchable.vue';
import { useTheme } from '../theme/ThemeDefine';
import { DynamicColor, DynamicSize } from '../theme/ThemeTools';

export interface ActionSheetItemProps {
  name: string;
  subname: string|undefined;
  bold: boolean|undefined;
  color: string|undefined;
  disabled: boolean|undefined;
}

const themeContext = useTheme();
const themeStyles = themeContext.useThemeStyles({
  item: {
    paddingTop: DynamicSize('ActionSheetItemPaddingVertical', 26),
    paddingBottom: DynamicSize('ActionSheetItemPaddingVertical', 26),
    backgroundColor: DynamicColor('ActionSheetItemBackgroundColor', 'white'),
  },
  itemTitle: {
    fontSize: DynamicSize('ActionSheetItemTitleFontSize', 32),
    color: DynamicColor('ActionSheetItemTitleColor', 'text.content'),
  },
  itemSubTitle: {
    fontSize: DynamicSize('ActionSheetItemSubTitleFontSize', 26),
    color: DynamicColor('ActionSheetItemSubTitleColor', 'text.second'),
    marginTop: DynamicSize('ActionSheetItemSubTitleMarginTop', 4),
  },
});

const emit = defineEmits([ 'click' ]);
const props = withDefaults(defineProps<ActionSheetItemProps>(), {});


</script>