Email Input

کامپوننت x-email-input یک ورودی ایمیل پیشرفته برای فرم‌ها است که امکانات متنوعی مانند پیشنهاد ایمیل، پیشوند و پسوند، کنترل طول، حالت فقط‌خواندنی، تنظیم راست/چپ‌چین بودن، پیام راهنما، پیام خطا و ... را ارائه می‌دهد.

---

ویژگی‌ها

• پشتیبانی از پیشنهاد ایمیل (suggestion)
• امکان تعیین پیشوند (prefix) و پسوند (suffix)
• کنترل حداقل و حداکثر طول (minLength, maxLength)
• پشتیبانی از حالت فقط‌خواندنی (readonly)
• قابلیت تنظیم راست‌چین یا چپ‌چین بودن (textAlign)
• پشتیبانی از autofocus
• نمایش پیام راهنما هنگام غیرفعال بودن (disabledTooltip)
• نمایش پیام خطا و پیام‌های سفارشی با استایل‌های مختلف
• امکان شخصی‌سازی کلاس‌های CSS برای خود و کانتینر
• پشتیبانی از پیام راهنما (hint)
• پشتیبانی از لیبل و فضای رزرو لیبل

---

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

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
name	string	—	نام فیلد (اجباری)
label	string	null	لیبل اصلی
labelSpaceReserved	bool	false	آیا فضای لیبل حتی بدون مقدار رزرو شود؟
id	string	null	شناسه یکتا برای ورودی
value	string	null	مقدار اولیه
placeholder	string	null	placeholder برای ورودی
suggestion	array	[]	آرایه‌ای از پیشنهادهای ایمیل
prefix	string	null	پیشوند
suffix	string	null	پسوند
minLength	int	null	حداقل طول مجاز
maxLength	int	null	حداکثر طول مجاز
required	bool	false	اجباری بودن فیلد
disabled	bool	false	غیرفعال بودن ورودی
readonly	bool	false	فقط‌خواندنی بودن ورودی
messageStyle	string/enum	"message"	استایل نمایش پیام (message, tooltip, ...)
defaultMessageType	string/enum	"info"	نوع پیام پیش‌فرض (info, error, success, ...)
defaultMessage	string	null	پیام پیش‌فرض برای نمایش
textAlign	string	"left"	جهت متن ورودی (left یا right)
hint	string	null	پیام راهنما یا توضیح کوتاه
class	string	null	کلاس CSS سفارشی برای خود ورودی
containerClass	string	null	کلاس CSS سفارشی برای کانتینر
autoFocus	bool	false	فوکوس خودکار روی ورودی
disabledTooltip	string	null	پیام راهنما هنگام غیرفعال بودن ورودی

---

مثال‌ها

نمونه پایه

<x-email-input
    label="پست الکترونیکی"
    name="email"
    id="email"
    value="info@gmail.com"
    placeholder="لطفا ایمیل خود را وارد کنید"
    :suggestion="['ali@a.com', 'nima@b.com', 'reza@c.com']"
    prefix="@"
    suffix=".com"
    minLength="4"
    maxLength="20"
    trim
    messageStyle="message"
    defaultMessageType="info"
    defaultMessage="لطفا ایمیل خود را به درستی وارد کنید"
    hint="پست الکترونیکی"
    class="custom-email-class"
    containerClass="custom-container-class"
>
    <x-slot:label-suffix-slot>
        <a href="#">استعلام</a>
    </x-slot:label-suffix-slot>
</x-email-input>