fix(Input/InputNumber/Textarea): make modelModifiers generic (#5361)

Author: hywax

src/runtime/components/Input.vue

@@ -43,7 +43,7 @@ export interface InputProps<T extends InputValue = InputValue> extends UseCompon
   highlight?: boolean
   modelValue?: T
   defaultValue?: T
-  modelModifiers?: ModelModifiers
+  modelModifiers?: ModelModifiers<T>
   class?: any
   ui?: Input['slots']
 }

src/runtime/components/InputNumber.vue

@@ -8,7 +8,9 @@ import type { ComponentConfig } from '../types/tv'
 
 type InputNumber = ComponentConfig<typeof theme, AppConfig, 'inputNumber'>
 
-export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange' | 'readonly'> {
+type InputNumberValue = number | null
+
+export interface InputNumberProps<T extends InputNumberValue = InputNumberValue> extends Pick<NumberFieldRootProps, 'modelValue' | 'defaultValue' | 'min' | 'max' | 'step' | 'stepSnapping' | 'disabled' | 'required' | 'id' | 'name' | 'formatOptions' | 'disableWheelChange' | 'invertWheelChange' | 'readonly'> {
   /**
    * The element or component this component should render as.
    * @defaultValue 'div'
@@ -54,7 +56,7 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
   decrementDisabled?: boolean
   autofocus?: boolean
   autofocusDelay?: number
-  modelModifiers?: Pick<ModelModifiers, 'optional'>
+  modelModifiers?: Pick<ModelModifiers<T>, 'optional'>
   /**
    * The locale to use for formatting and parsing numbers.
    * @defaultValue UApp.locale.code
@@ -64,8 +66,8 @@ export interface InputNumberProps extends Pick<NumberFieldRootProps, 'modelValue
   ui?: InputNumber['slots']
 }
 
-export interface InputNumberEmits {
-  'update:modelValue': [value: number]
+export interface InputNumberEmits<T extends InputNumberValue = InputNumberValue> {
+  'update:modelValue': [value: T]
   'blur': [event: FocusEvent]
   'change': [event: Event]
 }
@@ -76,7 +78,7 @@ export interface InputNumberSlots {
 }
 </script>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends InputNumberValue = InputNumberValue">
 import { onMounted, ref, computed } from 'vue'
 import { NumberFieldRoot, NumberFieldInput, NumberFieldDecrement, NumberFieldIncrement, useForwardPropsEmits } from 'reka-ui'
 import { reactivePick, useVModel } from '@vueuse/core'
@@ -89,23 +91,23 @@ import UButton from './Button.vue'
 
 defineOptions({ inheritAttrs: false })
 
-const props = withDefaults(defineProps<InputNumberProps>(), {
+const props = withDefaults(defineProps<InputNumberProps<T>>(), {
   orientation: 'horizontal',
   increment: true,
   decrement: true
 })
-const emits = defineEmits<InputNumberEmits>()
+const emits = defineEmits<InputNumberEmits<T>>()
 defineSlots<InputNumberSlots>()
 
-const modelValue = useVModel<InputNumberProps, 'modelValue', 'update:modelValue'>(props, 'modelValue', emits, { defaultValue: props.defaultValue })
+const modelValue = useVModel<InputNumberProps<T>, 'modelValue', 'update:modelValue'>(props, 'modelValue', emits, { defaultValue: props.defaultValue })
 
 const { t, code: codeLocale } = useLocale()
 const appConfig = useAppConfig() as InputNumber['AppConfig']
 
 const rootProps = useForwardPropsEmits(reactivePick(props, 'as', 'defaultValue', 'min', 'max', 'step', 'stepSnapping', 'formatOptions', 'disableWheelChange', 'invertWheelChange', 'readonly'), emits)
 
-const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField<InputNumberProps>(props)
-const { orientation, size: fieldGroupSize } = useFieldGroup<InputNumberProps>(props)
+const { emitFormBlur, emitFormFocus, emitFormChange, emitFormInput, id, color, size: formGroupSize, name, highlight, disabled, ariaAttrs } = useFormField<InputNumberProps<T>>(props)
+const { orientation, size: fieldGroupSize } = useFieldGroup<InputNumberProps<T>>(props)
 
 const locale = computed(() => props.locale || codeLocale.value)
 const inputSize = computed(() => fieldGroupSize.value || formGroupSize.value)

src/runtime/components/Textarea.vue

@@ -44,7 +44,7 @@ export interface TextareaProps<T extends TextareaValue = TextareaValue> extends
   highlight?: boolean
   modelValue?: T
   defaultValue?: T
-  modelModifiers?: ModelModifiers
+  modelModifiers?: ModelModifiers<T>
   class?: any
   ui?: Textarea['slots']
 }

src/runtime/types/input.ts

@@ -1,8 +1,8 @@
-export interface ModelModifiers {
-  string?: boolean
-  number?: boolean
-  trim?: boolean
+export interface ModelModifiers<T = any> {
+  string?: string extends T ? boolean : never
+  number?: number extends T ? boolean : never
+  trim?: string extends T ? boolean : never
   lazy?: boolean
-  nullable?: boolean
+  nullable?: null extends T ? boolean : never
   optional?: boolean
 }