Url Input

کامپوننت x-url-input یک ورودی تک‌خطی مخصوص دریافت URL است که امکانات متنوعی مانند کنترل طول، پیشنهادها (suggestion)، پیشوند و پسوند، trim خودکار، پیام راهنما، پیام خطا، کنترل اتوکامپلیت، فقط‌خواندنی بودن، و ... را ارائه می‌دهد.

---

ویژگی‌ها

• پشتیبانی از لیبل و فضای رزرو لیبل
• تعیین مقدار اولیه (value)
• تعیین placeholder
• کنترل اتوکامپلیت (autoComplete)
• پشتیبانی از پیشوند (prefix) و پسوند (suffix)
• کنترل حداقل و حداکثر طول (minLength, maxLength)
• trim خودکار مقدار (trim)
• فوکوس خودکار (autoFocus)
• فقط‌خواندنی بودن (readonly)
• نمایش پیام راهنما هنگام غیرفعال بودن (disabledTooltip)
• نمایش پیام خطا و پیام‌های سفارشی با استایل‌های مختلف
• امکان شخصی‌سازی کلاس‌های CSS برای خود و کانتینر
• پشتیبانی از پیام راهنما (hint)
• پشتیبانی از slot برای suffix لیبل (labelSuffixSlot)
• غیرفعال یا فقط‌خواندنی بودن ورودی
• پیشنهادهای ورودی (suggestion)
• اعتبارسنجی با regex (expression)

---

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

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

---

مثال‌ها

نمونه پایه

<x-url-input
    name="آدرس سایت"
    id="link1"
    label="آدرس سایت"
    value="https://example.com"
    placeholder="لطفا آدرس خود را وارد کنید"
    prefix="$"
    suffix="USD"
    message-style="message"
    default-message-type="warning"
    default-message="لطفا آدرس را به درستی وارد نمایید"
    min-length="4"
    max-length="30"
    :trim="true"
    :suggestion="['https://example.com', 'https://test.com']"
    container-class="col-md-6"
    hint="آدرس را به خوبی وارد کنید"
/>