Text Area

کامپوننت x-textarea-input یک ورودی چندخطی (textarea) پیشرفته برای فرم‌ها است که امکانات متنوعی مانند کنترل طول، تعداد سطر، قابلیت تغییر اندازه، شمارنده کاراکتر، حالت فقط‌خواندنی، auto sizing، پیام راهنما، پیام خطا و ... را ارائه می‌دهد.

---

ویژگی‌ها

• تعیین تعداد سطر اولیه (rows)
• کنترل حداقل و حداکثر طول (minLength, maxLength)
• نمایش شمارنده کاراکتر (showMaxLength)
• قابلیت auto sizing (افزایش خودکار ارتفاع) (autoSizing)
• امکان تغییر اندازه توسط کاربر (resizable)
• پشتیبانی از حالت فقط‌خواندنی (readonly)
• پشتیبانی از trim خودکار مقدار (trim)
• پشتیبانی از autofocus
• نمایش پیام راهنما هنگام غیرفعال بودن (disabledTooltip)
• نمایش پیام خطا و پیام‌های سفارشی با استایل‌های مختلف
• امکان شخصی‌سازی کلاس‌های CSS برای خود و کانتینر
• پشتیبانی از پیام راهنما (hint)
• پشتیبانی از لیبل و فضای رزرو لیبل
• پشتیبانی از slot برای لیبل (label-suffix-slot)

---

ورودی‌های کامپوننت

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
name	string	—	نام فیلد (اجباری)
label	string	null	لیبل اصلی
labelSpaceReserved	bool	false	آیا فضای لیبل حتی بدون مقدار رزرو شود؟
id	string	null	شناسه یکتا برای ورودی
placeholder	string	null	placeholder برای ورودی
class	string	null	کلاس CSS سفارشی برای خود ورودی
containerClass	string	null	کلاس CSS سفارشی برای کانتینر
required	bool	false	اجباری بودن فیلد
autofocus	bool	false	فوکوس خودکار روی ورودی
minLength	int	null	حداقل طول مجاز
maxLength	int	null	حداکثر طول مجاز
rows	int	3	تعداد سطر اولیه
resizable	bool	false	امکان تغییر اندازه توسط کاربر
autoSizing	bool	false	افزایش خودکار ارتفاع
showMaxLength	bool	false	نمایش شمارنده کاراکتر
readonly	bool	false	فقط‌خواندنی بودن ورودی
disabled	bool	false	غیرفعال بودن ورودی
defaultMessage	string	null	پیام پیش‌فرض برای نمایش
messageStyle	string/enum	"message"	استایل نمایش پیام (message, tooltip, ...)
defaultMessageType	string/enum	"info"	نوع پیام پیش‌فرض (info, error, success, ...)
trim	bool	false	حذف فاصله‌های ابتدا و انتهای مقدار
hint	string	null	پیام راهنما یا توضیح کوتاه
suppressLogicMessages	bool	false	عدم نمایش پیام‌های منطقی
disabledTooltip	string	null	پیام راهنما هنگام غیرفعال بودن ورودی

---

مثال‌ها

نمونه پایه

<x-text-area
    name="summery"
    id="summery"
    label="توضیحات"
    placeholder="توضیحات شما"
    class="text-area-input"
    containerClass="my-5"
    defaultMessage="متن خود را بنویسید"
    defaultMessageType="warning"
    messageStyle="message"
    minLength="10"
    maxLength="50"
    rows="10"
    :resizable="true"
    :autoSizing="true"
    :showMaxLength="true"
    :trim="true"
>
    تست textarea
</x-text-area>