feat(Textarea): add char counter

[maxsteinwand]

🔗 Linked issue

Resolves #971

❓ Type of change

• 📖 Documentation (updates to the documentation or readme)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

Adds a counter and persistent-counter property to the textarea to show the amount of typed chars. The counter prop can be a Boolean, Number or String. If set to a number or String the value will be parsed into the maxValue and displayed. The counter will show if the user is focusing the Textarea (VueUse useFocus) or the persistent-counter Boolean is set to true.

It also adds a slot for the counter passing the focused, letterCount and maxValue variables so that the user can fully customize the looks.

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated (UTC)
ui	❌ Failed (Inspect)		Nov 17, 2023 2:49pm

[benjamincanac]

This is a really niche feature in my opinion, not sure we should add this into the Textarea directly. Maybe an example on how to achieve this would be better?

[maxsteinwand]

@benjamincanac I added an example to the Ticket. You can close the PR then if you'd like.

[benjamincanac]

I mean we could create a full example component to add to this page: https://ui.nuxt.com/getting-started/examples instead.

The Textarea would have to be updated with only a <slot /> inside like the Input.