xiangyuan-app/src/components/nav/PaginationItem.vue

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

const themeContext = useTheme();
const themeStyles = themeContext.useThemeStyles({
  itemButton: {
    display: 'flex',
    flexGrow: 1,
    alignSelf: 'auto',
    justifyContent: 'center',
    alignContent: 'center',
    textAlign: 'center',
  },
  itemText: {
    fontSize: DynamicSize('PaginationItemTextFontSize', 26),
    textAlign: DynamicSize('PaginationItemTextAlign', 'center'),
  },
});

interface PaginationItemProps {
  text?: string;
  touchable?: boolean;
  active?: boolean;
  pressedColor?: string;
  pressedTextColor?: string;
  activeColor?: string;
  deactiveColor?: string;
  activeTextColor?: string;
  deactiveTextColor?: string;
  buttonStyle?: ViewStyle;
  textStyle?: TextStyle;
}

const emit = defineEmits([ 'click' ]);
const props = defineProps<PaginationItemProps>();
const state = ref('');
const pressed = computed(() => state.value === 'active');
</script>

<template>
  <Touchable
    :pressedColor="themeContext.resolveThemeColor(pressedColor)"
    :innerStyle="{   
      backgroundColor: themeContext.resolveThemeColor(active ? activeColor : (touchable ? deactiveColor : pressedColor)),
      ...themeStyles.itemButton.value,
      ...buttonStyle,
    }"
    :padding="[
      themeContext.getVar('PaginationItemPaddingHorizontal', 8),
      themeContext.getVar('PaginationItemPaddingVertical', 16),
    ]"
    :touchable="touchable"
    @state="(s) => state = s"
    @click="touchable && !active ? emit('click') : undefined"
  >
    <text :style="{
      ...themeStyles.itemText.value,
      ...textStyle,
      color: themeContext.resolveThemeColor(touchable ? (pressed ? pressedTextColor : (active ? activeTextColor : deactiveTextColor)) : pressedTextColor),
    }">{{ text}}</text>
  </Touchable>
</template>