feat(textarea): Added autosize with vueUse useTextareaAutosize

[ManUtopiK]

No description provided.

[jd-solanki]

Hi,

Thanks for the PR. This is really useful ❤️

I reviewed it in time I get and found that the initial value of v-model doesn't bind it however we can do this using:

const { textarea, input } = useTextareaAutosize({
  input: props.modelValue,
})

However, the main problem is we don't have just textarea. Our border styles are from its parent wrapper and scrollHeight should get calculated from textarea element.

I tried updating your PR but I think we need a few changes in VueUse that allows us to pass two separate elements just like we have. Styling element (out input wrapper) & actual textarea our textarea in ATextarea component.

---

To access the input wrapper from ATextarea I will expose it in the next commit. Moreover to access that wrapper useTextareaAutosize should be used in onMounted hook (to access baseInput.value.refInputWrapper). Once we use useTextareaAutosize it will bring back onInput & value usage on ATextarea.

Hence, there's some work we need to do on VueUse side if they approve and later on we need to update this PR.

I will create new PR/issue tomorrow on VueUse regarding this.

Thanks :)

[ManUtopiK]

I found that the initial value of v-model doesn't bind it

I didn't see that!
Using watch argument of useTextareaAutosize do the job!

[ManUtopiK]

I added the ability to limit height.
I'm not sure assigning a number to autoresize is a good choice. Maybe we can add a maxHeight prop instead.

Also, I found an issue with height prop. min-h-32 overwrite height if the value is lower than h-32.
min-h-32 should be removed if height is defined.
:autosize=10 works if min-h-32 is removed.
Maybe I can fix this issue in this pull request?

Furthermore, mixing pixel value and class value for height and autosize is not straightforward.
I don't know how to deal with that...

[jd-solanki]

autosize shouldn't accept number, textarea should update its height according to content just like demo in VueUse.

Let me create a PR in VueUse and will look into this further. Can you please revert back the previous commit as that was not needed and there is some typo/weird code?

[husayt]

Hi, can this now be merged since the referenced issue in vueuse has been resolved.

[jd-solanki]

Yes, I noticed that and added it to the project board 😇

Just give me some time to update the project board.

[jd-solanki]

Hi @ManUtopiK

Thanks so much for your efforts. We now have SFC instead of TSX so have to do it in a separate commit.

Thanks for your contribution 🙏🏻