xiangyuan-app/src/components/keyboard/PlateKeyBoardKey.vue

<template>
  <Touchable
    v-if="text"
    direction="column"
    :innerStyle="keyStyle"
    :pressedColor="context.keyPressedColor.value"
    :touchable="text!==''"
    @click="emit('click', text, action)"
  >
    <Icon v-if="icon" :icon="text" :innerStyle="context.keyTextStyle.value" />
    <Text v-else :innerStyle="context.keyTextStyle.value">{{ text }}</Text>
  </Touchable>
  <view
    v-else
    :style="keyStyle"
  />
</template>

<script setup lang="ts">
import { computed, inject } from 'vue';
import { useTheme } from '../theme/ThemeDefine';
import { DynamicColor, DynamicSize } from '../theme/ThemeTools';
import type { PlateKeyBoardContext } from './PlateKeyBoardInner.vue';
import FlexCol from '../layout/FlexCol.vue';
import Text from '../basic/Text.vue';
import Icon from '../basic/Icon.vue';
import Touchable from '../feedback/Touchable.vue';

export interface PlateKeyBoardKeyProps {
  text: string, 
  icon: boolean, 
  action?: string, 
  width?: number, 
  height?: number,
}

const emit = defineEmits([ 'click' ])
const props = withDefaults(defineProps<PlateKeyBoardKeyProps>(), {
  action: '', 
  width: 0, 
  height: 1,
});

const themeContext = useTheme();
const themeStyles = themeContext.useThemeStyles({
  key: {
    display: 'flex',
    flexBasis: '13%',
    width: '13%',
    height: '10rpx',
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    borderWidth: DynamicSize('PlateKeyBoardKeyBorderWidth', 2),
    borderColor: DynamicColor('PlateKeyBoardKeyBorderColor', 'border.default'),
    borderRadius: DynamicSize('PlateKeyBoardKeyBorderRadius', 10),
  },
});

const context = inject<PlateKeyBoardContext>('PlateKeyBoardContext') as PlateKeyBoardContext;

const keyStyle = computed(() => ({
  ...themeStyles.key.value,
  backgroundColor: themeContext.resolveThemeColor(context.keyColor.value),
  flexBasis: `${props.width === 0 ? (100 / context.keyColumCount.value) : props.width}%`,
  width: `${props.width === 0 ? (100 / context.keyColumCount.value) : props.width}%`,
  height: themeContext.resolveSize(context.keyHeight.value * props.height),
  minHeight: themeContext.resolveSize(context.keyHeight.value * props.height),
  margin: themeContext.resolveSize(context.keyMargin.value),
  ...context.keyStyle.value,
}));

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