From 74a6bca2b334f54b99294be8848f345e69ff1141 Mon Sep 17 00:00:00 2001
From: Benjamin Canac <canacb1@gmail.com>
Date: Wed, 31 Jul 2024 15:28:28 +0200
Subject: [PATCH] feat(Input/Textarea): expose ref

---
 docs/content/3.components/form.md     | 2 +-
 docs/content/3.components/input.md    | 8 ++++++++
 docs/content/3.components/textarea.md | 8 ++++++++
 src/runtime/components/Input.vue      | 4 ++++
 src/runtime/components/InputMenu.vue  | 4 ++++
 src/runtime/components/Textarea.vue   | 4 ++++
 6 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/docs/content/3.components/form.md b/docs/content/3.components/form.md
index ae19171a..89dd9489 100644
--- a/docs/content/3.components/form.md
+++ b/docs/content/3.components/form.md
@@ -24,7 +24,7 @@ links:
 
 :component-events
 
-### Exposed
+### Expose
 
 When accessing the component via a template ref, you can use the following:
 
diff --git a/docs/content/3.components/input.md b/docs/content/3.components/input.md
index 75afcbcb..fd35626e 100644
--- a/docs/content/3.components/input.md
+++ b/docs/content/3.components/input.md
@@ -183,6 +183,14 @@ props:
 
 :component-events
 
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `inputRef`{lang="ts-type"} | `Ref<HTMLInputElement \| null>`{lang="ts-type"} |
+
 ## Theme
 
 :component-theme
diff --git a/docs/content/3.components/textarea.md b/docs/content/3.components/textarea.md
index eb62b94e..16cb8de0 100644
--- a/docs/content/3.components/textarea.md
+++ b/docs/content/3.components/textarea.md
@@ -144,6 +144,14 @@ props:
 
 :component-events
 
+### Expose
+
+When accessing the component via a template ref, you can use the following:
+
+| Name | Type |
+| ---- | ---- |
+| `textareaRef`{lang="ts-type"} | `Ref<HTMLTextAreaElement \| null>`{lang="ts-type"} |
+
 ## Theme
 
 :component-theme
diff --git a/src/runtime/components/Input.vue b/src/runtime/components/Input.vue
index 9ca99d51..edbe2996 100644
--- a/src/runtime/components/Input.vue
+++ b/src/runtime/components/Input.vue
@@ -133,6 +133,10 @@ function onBlur(event: FocusEvent) {
   emits('blur', event)
 }
 
+defineExpose({
+  inputRef
+})
+
 onMounted(() => {
   setTimeout(() => {
     autoFocus()
diff --git a/src/runtime/components/InputMenu.vue b/src/runtime/components/InputMenu.vue
index a795ca42..193dba99 100644
--- a/src/runtime/components/InputMenu.vue
+++ b/src/runtime/components/InputMenu.vue
@@ -228,6 +228,10 @@ function onUpdateOpen(value: boolean) {
     emits('focus', event)
   }
 }
+
+defineExpose({
+  inputRef
+})
 </script>
 
 <template>
diff --git a/src/runtime/components/Textarea.vue b/src/runtime/components/Textarea.vue
index 99d50d2b..6c493fe1 100644
--- a/src/runtime/components/Textarea.vue
+++ b/src/runtime/components/Textarea.vue
@@ -151,6 +151,10 @@ watch(() => modelValue, () => {
   nextTick(autoResize)
 })
 
+defineExpose({
+  textareaRef
+})
+
 onMounted(() => {
   setTimeout(() => {
     autoResize()