minnan/src/components/form/NumberInputBox.vue

<template>
  <Touchable
    :innerStyle="{
      ...themeStyles.box.value,
      marginHorizontal: themeContext.resolveSize(gutter),
      flex: autoSize ? '1 1 100%' : undefined,
      ...finalBoxStyle,
      ...boxStyle,
    }"
    :setCursor="false"
    :pressedColor="themeContext.resolveThemeColor('pressed.white')"
    :touchable="!disableKeyPad"
    direction="column"
    @click="emit('click')"
  >
    <text 
      :style="{
        ...themeStyles.text.value,
        ...textStyle,
      }"
    >
      {{ value ? (isPassword ? '●' : value) : '&nbsp;'}}
    </text>
    <view 
      v-if="!value && active && showCursur" class="number-input-cursor"
      :style="themeStyles.inputCursor.value"
    />
  </Touchable>
</template>

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

export interface NumberInputBoxProps {
  value?: string,
  index: number,
  active: boolean,
  autoSize: boolean,
  isPassword: boolean,
  disableKeyPad: boolean,
  showCursur: boolean,
  gutter: number,
  boxStyle?: ViewStyle,
  textStyle?: TextStyle,
  borderWidth: number,
  borderType: NumberInputBorderType,
  borderColor: string,
  activeBorderColor: string,
}

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

const themeContext = useTheme();
const themeStyles = themeContext.useThemeStyles({
  box: {
    display: 'flex',
    position: 'relative',
    paddingVertical: DynamicSize('NumberInputBoxPaddingVertical', 24),
    paddingHorizontal: DynamicSize('NumberInputBoxPaddingHorizontal', 16),
    borderRadius: DynamicSize('NumberInputBoxBorderRadius', 20),
    flexDirection: 'row',
    flexShrink: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: DynamicSize('NumberInputTextFontSize', 36),
    width: DynamicSize('NumberInputTextWidth', 40),
    textAlign: 'center',
    color: DynamicColor('NumberInputTextColor', 'text.content'),
  },
  inputCursor: {
    position: 'absolute',
    top: DynamicSize('NumberInputCursorLeft', '50%'),
    left: DynamicSize('NumberInputCursorLeft', '50%'),
    marginTop: DynamicSize('NumberInputCursorMarginTop', -18),
    width: DynamicSize('NumberInputCursorWidth', 3),
    marginLeft: DynamicSize('NumberInputCursorMarginLeft', -1.5),
    height: DynamicSize('NumberInputCursorHeight', 36),
    backgroundColor: DynamicColor('NumberInputCursorBackgroundColor', 'text.content'),
  },
});

const finalBoxStyle = computed(() => selectStyleType<ViewStyle, NumberInputBorderType>(props.borderType, 'box', {
  box: {
    borderStyle: 'solid',
    borderWidth: themeContext.resolveSize(props.borderWidth),
    borderColor: themeContext.resolveThemeColor(props.active ? props.activeBorderColor : props.borderColor),
  },
  underline: {
    borderWidth: themeContext.resolveSize(props.borderWidth),
    borderColor: 'transparent',
    borderBottomWidth: themeContext.resolveSize(props.borderWidth),
    borderBottomStyle: 'solid',
    borderBottomColor: themeContext.resolveThemeColor(props.active ? props.activeBorderColor : props.borderColor),
    borderRadius: 0,
  },
}) as ViewStyle);

</script>

<style lang="scss">
.number-input-cursor {
  animation: cursorBlink 1s infinite;
}

@keyframes cursorBlink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
</style>