Color Input

کامپوننت x-color-input برای انتخاب رنگ در فرم‌ها با امکانات پیشرفته و قابل شخصی‌سازی استفاده می‌شود. این کامپوننت از ویژگی‌هایی مانند نمایش لیبل، حالت فقط‌خواندنی، غیرفعال، پشتیبانی از رنگ‌های پیشنهادی (preset)، نمایش پیام راهنما، کنترل ظاهر و رفتار و نمایش خطا پشتیبانی می‌کند.

---

ویژگی‌ها

• پشتیبانی از لیبل اصلی و فضای رزرو لیبل
• امکان تعیین مقدار اولیه (value)
• قابلیت فقط‌خواندنی (readonly) و غیرفعال (disabled)
• پشتیبانی از رنگ‌های پیشنهادی (presetColors) و حالت فقط انتخاب از پیش‌فرض‌ها (onlyPresets)
• پشتیبانی از پیشوند (prefix) و پسوند (suffix) برای ورودی
• نمایش پیام راهنما هنگام غیرفعال بودن (disabledTooltip)
• نمایش پیام خطا و پیام‌های سفارشی با استایل‌های مختلف
• امکان شخصی‌سازی کلاس‌های CSS برای خود ورودی و کانتینر
• پشتیبانی از پیام راهنما (hint)
• کنترل نمایش پیام‌های منطقی (suppressLogicMessages)

---

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

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

---

مثال‌ها

نمونه پایه

<x-color-input
    name="color_palette1"
    label="انتخاب رنگ"
    id="colorPalette1"
    prefix="HEX"
    container-class="col-md-6"
    :only-presets="true"
/>

<x-color-input
        name="color_palette"
        label="انتخاب رنگ"
        id="colorPalette"
        container-class="col-md-6"
        prefix="HEX"
        :preset-colors="['#ffcc00', 'red']"
>
    <x-slot:label-suffix-slot>
        <a href="#">استعلام</a>
    </x-slot:label-suffix-slot>
</x-color-input>