feat(useTextareaAutosize): new function

packages/.vitepress/theme/styles/demo.css

@@ -101,8 +101,8 @@
     min-width: 20rem;
     font-size: 1.05rem;
     padding: 0.5em 1em 0.4em 1em;
-    border: 1px solid var(--vt-c-divider);
     border-radius: 4px;
+    box-shadow: var(--vt-c-divider) 0px 0px 0px 1px;
     margin: 0.5rem 0;
     outline: none;
     background: var(--vt-c-bg);

packages/core/index.ts

@@ -100,6 +100,7 @@ export * from './useStyleTag'
 export * from './useSwipe'
 export * from './useTemplateRefsList'
 export * from './useTextSelection'
+export * from './useTextareaAutosize'
 export * from './useThrottledRefHistory'
 export * from './useTimeAgo'
 export * from './useTimeoutPoll'

packages/core/useTextareaAutosize/demo.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { useTextareaAutosize } from '@vueuse/core'
+
+const { textarea, input } = useTextareaAutosize()
+</script>
+
+<template>
+  <div>
+    <span>Type, the textarea will grow:</span>
+    <textarea
+      ref="textarea"
+      v-model="input"
+      class="resize-none"
+      placeholder="What's on your mind?"
+    />
+  </div>
+</template>

packages/core/useTextareaAutosize/index.md

@@ -0,0 +1,24 @@
+---
+category: Browser
+---
+
+# useTextareaAutosize
+
+Automatically update the height of a textarea element depending on its content.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+const { textarea, input } = useTextareaAutosize()
+</script>
+
+<template>
+  <textarea
+    ref="textarea"
+    v-model="input"
+    class="resize-none"
+    placeholder="What's on your mind?"
+  />
+</template>
+```

packages/core/useTextareaAutosize/index.ts

@@ -0,0 +1,40 @@
+import type { MaybeRef } from '@vueuse/shared'
+import type { WatchSource } from 'vue-demi'
+import { ref, watch } from 'vue-demi'
+
+export interface UseTextareaAutosizeOptions {
+  /** Textarea element to autosize. */
+  element?: MaybeRef<HTMLTextAreaElement | undefined>
+  /** Textarea content. */
+  input?: MaybeRef<string | undefined>
+  /** Watch sources that should trigger a textarea resize. */
+  watch?: WatchSource | Array<WatchSource>
+  /** Function called when the textarea size changes. */
+  onResize?: () => void
+}
+
+export function useTextareaAutosize(options?: UseTextareaAutosizeOptions) {
+  const textarea = ref<HTMLTextAreaElement>(options?.element as any)
+  const input = ref<string>(options?.input as any)
+
+  function triggerResize() {
+    if (!textarea.value)
+      return
+
+    textarea.value!.style.height = '1px'
+    textarea.value!.style.height = `${textarea.value?.scrollHeight}px`
+
+    options?.onResize?.()
+  }
+
+  watch([input, textarea], triggerResize, { immediate: true })
+
+  if (options?.watch)
+    watch(options.watch, triggerResize, { immediate: true, deep: true })
+
+  return {
+    textarea,
+    input,
+    triggerResize,
+  }
+}