Tag Input

کامپوننت x-tag-input یک ورودی پیشرفته برای جمع‌آوری و مدیریت تگ‌ها (برچسب‌ها) در فرم‌ها است. این کامپوننت امکان افزودن، حذف و مرتب‌سازی تگ‌ها را با امکانات متنوعی مانند تعیین جداکننده، تعیین حداقل و حداکثر تعداد تگ، فعال‌سازی autocomplete، تعیین پیشوند و پسوند، پیام راهنما، پیام خطا و ... فراهم می‌کند.

---

ویژگی‌ها

• افزودن و حذف تگ‌ها به صورت داینامیک
• مرتب‌سازی (drag & drop) تگ‌ها (در صورت فعال بودن)
• تعیین حداقل (min) و حداکثر (max) تعداد تگ
• تعیین حداکثر طول کل مقدار (maxLength)
• تعیین جداکننده تگ‌ها (separator)
• افزودن تگ با کلید Space علاوه بر Enter (addOnSpace)
• تعیین حداکثر عرض هر تگ (itemMaxWidth)
• فعال‌سازی autocomplete برای ورودی (autoComplete)
• تعیین پیشوند و پسوند برای ورودی (prefix, suffix)
• پشتیبانی از پیام راهنما (hint)
• نمایش پیام خطا و پیام‌های سفارشی با استایل‌های مختلف
• امکان شخصی‌سازی کلاس‌های CSS برای خود و کانتینر
• پشتیبانی از لیبل و فضای رزرو لیبل
• نمایش پیام راهنما هنگام غیرفعال بودن (disabledTooltip)
• پشتیبانی از مقدار اولیه (value)
• کنترل فعال/غیرفعال بودن ورودی (disabled)
• پشتیبانی از حالت فقط‌خواندنی (readonly)

---

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

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
name	string	—	نام فیلد (اجباری)
label	string	null	لیبل اصلی
labelSpaceReserved	bool	false	آیا فضای لیبل حتی بدون مقدار رزرو شود؟
id	string	null	شناسه یکتا برای ورودی
placeholder	string	null	placeholder برای ورودی
class	string	null	کلاس CSS سفارشی برای خود ورودی
containerClass	string	null	کلاس CSS سفارشی برای کانتینر
value	string	null	مقدار اولیه (تگ‌ها به صورت جداشده با جداکننده)
required	bool	false	اجباری بودن فیلد
readonly	bool	false	فقط‌خواندنی بودن ورودی
disabled	bool	false	غیرفعال بودن ورودی
defaultMessage	string	null	پیام پیش‌فرض برای نمایش
messageStyle	string/enum	"message"	استایل نمایش پیام (message, tooltip, ...)
defaultMessageType	string/enum	"info"	نوع پیام پیش‌فرض (info, error, warning, ...)
hint	string	null	پیام راهنما یا توضیح کوتاه
suppressLogicMessages	bool	false	عدم نمایش پیام‌های منطقی
autoComplete	bool	false	فعال‌سازی autocomplete برای ورودی
separator	string	,	جداکننده تگ‌ها
draggable	bool	true	امکان مرتب‌سازی (drag & drop) تگ‌ها
addOnSpace	bool	false	افزودن تگ با فشردن Space (مانند Enter)
min	int	null	حداقل تعداد تگ مجاز
max	int	null	حداکثر تعداد تگ مجاز
maxLength	int	null	حداکثر طول کل مقدار (مجموع تگ‌ها همراه جداکننده‌ها)
itemMaxWidth	int	null	حداکثر عرض هر تگ (بر حسب پیکسل)
prefix	string	null	پیشوند برای ورودی
suffix	string	null	پسوند برای ورودی
disabledTooltip	string	null	پیام راهنما هنگام غیرفعال بودن ورودی

---

مثال‌ها

نمونه پایه

<x-tag-input
    name="tag-test"
    label="تست"
    defaultMessage="لطفا تگ‌های مورد نظر را وارد نمایید."
    hint="شما باید حداقل یک تگ را وارد کنید."
    placeholder="تگ‌های مورد نظر را وارد کنید"
    containerClass="col-lg-6"
    value="test,0,false"
    separator="_"
/>

افزودن تگ با کلید Space

با فعال‌کردن addOnSpace، فشردن کلید Space هنگام تایپ نیز مانند Enter یک تگ جدید به لیست اضافه می‌کند (علاوه بر جداکننده و Enter).

<x-tag-input
    name="keywords"
    label="کلمات کلیدی"
    placeholder="هر کلمه را تایپ کنید و Space بزنید"
    :add-on-space="true"
/>