From 3c8d6cd01dfafed5844c376f52adbdda0c814420 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Tue, 13 May 2025 17:18:06 +0200
Subject: [PATCH] fix(Input/Textarea): handle generic types

Resolves nuxt/ui-pro#887
---
 src/runtime/components/Input.vue    | 14 +++++++-------
 src/runtime/components/Textarea.vue | 14 +++++++-------
 2 files changed, 14 insertions(+), 14 deletions(-)

diff --git a/src/runtime/components/Input.vue b/src/runtime/components/Input.vue
index b91319e3..7840a1f1 100644
--- a/src/runtime/components/Input.vue
+++ b/src/runtime/components/Input.vue
@@ -4,7 +4,7 @@ import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/input'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import type { AvatarProps } from '../types'
-import type { ComponentConfig } from '../types/utils'
+import type { AcceptableValue, ComponentConfig } from '../types/utils'
 
 type Input = ComponentConfig<typeof theme, AppConfig, 'input'>
 
@@ -42,8 +42,8 @@ export interface InputProps extends UseComponentIconsProps {
   ui?: Input['slots']
 }
 
-export interface InputEmits {
-  (e: 'update:modelValue', payload: string | number): void
+export interface InputEmits<T extends AcceptableValue = AcceptableValue> {
+  (e: 'update:modelValue', payload: T): void
   (e: 'blur', event: FocusEvent): void
   (e: 'change', event: Event): void
 }
@@ -55,7 +55,7 @@ export interface InputSlots {
 }
 </script>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends AcceptableValue">
 import { ref, computed, onMounted } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
@@ -74,10 +74,10 @@ const props = withDefaults(defineProps<InputProps>(), {
   autocomplete: 'off',
   autofocusDelay: 0
 })
-const emits = defineEmits<InputEmits>()
+const emits = defineEmits<InputEmits<T>>()
 const slots = defineSlots<InputSlots>()
 
-const [modelValue, modelModifiers] = defineModel<string | number | null>()
+const [modelValue, modelModifiers] = defineModel<T>()
 
 const appConfig = useAppConfig() as Input['AppConfig']
 const { emitFormBlur, emitFormInput, emitFormChange, size: formGroupSize, color, id, name, highlight, disabled, emitFormFocus, ariaAttrs } = useFormField<InputProps>(props, { deferInputValidation: true })
@@ -114,7 +114,7 @@ function updateInput(value: string | null) {
     value ||= null
   }
 
-  modelValue.value = value
+  modelValue.value = value as T
   emitFormInput()
 }
 
diff --git a/src/runtime/components/Textarea.vue b/src/runtime/components/Textarea.vue
index b8fac484..51ab3959 100644
--- a/src/runtime/components/Textarea.vue
+++ b/src/runtime/components/Textarea.vue
@@ -3,7 +3,7 @@ import type { AppConfig } from '@nuxt/schema'
 import theme from '#build/ui/textarea'
 import type { UseComponentIconsProps } from '../composables/useComponentIcons'
 import type { AvatarProps } from '../types'
-import type { ComponentConfig } from '../types/utils'
+import type { AcceptableValue, ComponentConfig } from '../types/utils'
 
 type Textarea = ComponentConfig<typeof theme, AppConfig, 'textarea'>
 
@@ -43,8 +43,8 @@ export interface TextareaProps extends UseComponentIconsProps {
   ui?: Textarea['slots']
 }
 
-export interface TextareaEmits {
-  (e: 'update:modelValue', payload: string | number): void
+export interface TextareaEmits<T extends AcceptableValue = AcceptableValue> {
+  (e: 'update:modelValue', payload: T): void
   (e: 'blur', event: FocusEvent): void
   (e: 'change', event: Event): void
 }
@@ -56,7 +56,7 @@ export interface TextareaSlots {
 }
 </script>
 
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends AcceptableValue">
 import { ref, computed, onMounted, nextTick, watch } from 'vue'
 import { Primitive } from 'reka-ui'
 import { useAppConfig } from '#imports'
@@ -73,10 +73,10 @@ const props = withDefaults(defineProps<TextareaProps>(), {
   autofocusDelay: 0,
   autoresizeDelay: 0
 })
+const emits = defineEmits<TextareaEmits<T>>()
 const slots = defineSlots<TextareaSlots>()
-const emits = defineEmits<TextareaEmits>()
 
-const [modelValue, modelModifiers] = defineModel<string | number | null>()
+const [modelValue, modelModifiers] = defineModel<T>()
 
 const appConfig = useAppConfig() as Textarea['AppConfig']
 const { emitFormFocus, emitFormBlur, emitFormInput, emitFormChange, size, color, id, name, highlight, disabled, ariaAttrs } = useFormField<TextareaProps>(props, { deferInputValidation: true })
@@ -109,7 +109,7 @@ function updateInput(value: string | null) {
     value ||= null
   }
 
-  modelValue.value = value
+  modelValue.value = value as T
   emitFormInput()
 }