feat(useTextareaAutosize): added styleTarget option to style other element

[jd-solanki]

Description

When detachStyles is true styles won't get applied to the textarea. You can use textareaScrollHeight ref returned by this composable to apply the height instead. This is useful in cases where we have custom UI for textarea as in Anu or any other textarea customization.

Related PR in Anu: jd-solanki/anu#37

With this PR merged we can set the height of textarea wrapper based on the height of the actual textarea content.

Additional context

This is just not specific to Anu, this is useful even if someone has a custom UI for textarea.

---

What is the purpose of this pull request?

• Bug fix
• New Feature
• Documentation update
• Other

Before submitting the PR, please make sure you do the following

• Read the Contributing Guidelines.
• Read the Pull Request Guidelines.
• Check that there isn't already a PR that solves the problem the same way to avoid creating a duplicate.
• Provide a description in this PR that addresses what the PR is solving, or reference the issue that it solves (e.g. fixes #123).
• Ideally, include relevant tests that fail without this PR but pass with it.

[jd-solanki]

Hi @antfu
According to your comment in discord, I have provided styleTarget option instead of detachStyles.

This was a nice improvement that reduces # of lines. Thanks for the suggestion.

demo.vue code if you want to play:

<script setup lang="ts">
import { useTextareaAutosize } from '@vueuse/core'
import { ref } from 'vue'

// const { textarea, input } = useTextareaAutosize()

// --

const wrapper = ref()
const textareaCustom = ref()
const { input: wrapperInput } = useTextareaAutosize({
  element: textareaCustom,
  styleTarget: wrapper,
})
</script>

<template>
  <div>
    <span>Type, the textarea will grow:</span>
    <div ref="wrapper" class="textarea-container outline outline-color-[tomato]">
      <textarea ref="textareaCustom" v-model="wrapperInput" class="!m-0 w-full h-full !shadow-none" />
    </div>
    {{ wrapperInput }}
    <!-- <textarea
      ref="textarea"
      v-model="input"
      class="resize-none"
      placeholder="What's on your mind?"
    /> -->
  </div>
</template>

[antfu]

Suggested change

	textareaScrollHeight.value = textarea.value?.scrollHeight
	// If style target is provided update its height
	if (options?.styleTarget)
	unref(options.styleTarget).style.height = `${textareaScrollHeight.value}px`
	// else update textarea's height by updating height variable
	else height = `${textareaScrollHeight.value}px`
	textarea.value!.style.height = height
	textareaScrollHeight.value = textarea.value?.scrollHeight
	const styleTarget = unref(options?.styleTarget) || textarea.value
	styleTarget!.style.height = height

Do you mean by this? In the previous implementation textarea's style seems always applied (L39)

[jd-solanki]

Hi @antfu

Thanks for your review. I tried your suggested changes but it isn't working because we have to reset the style of textarea so textarea can be rendered as normal (like height isn't modified).

P.S. notice the textarea's white background isn't filling the outline/wrapper