Search Input

کامپوننت x-search-input یک ورودی جستجو پیشرفته برای فرم‌ها و لیست‌ها است که امکانات متنوعی مانند حالت‌های مختلف جستجو (ساده، Livewire، Query String)، کنترل آیکن و موقعیت آن، پیشوند و پسوند، کنترل ظاهر و پیام‌ها، قابلیت فقط‌خواندنی و غیرفعال، پیام راهنما، و ... را ارائه می‌دهد.

ویژگی‌ها

پشتیبانی از سه حالت جستجو: simple (ساده)، livewire، و qs (بر اساس query string)
امکان تعیین آیکن و موقعیت آن (icon, iconPosition)
امکان تعیین پیشوند (prefix) و پسوند (suffix)
قابلیت تعیین مقدار اولیه (value)
پشتیبانی از لیبل و فضای رزرو لیبل
کنترل placeholder و autocomplete
پشتیبانی از حالت فقط‌خواندنی (readonly) و غیرفعال (disabled)
نمایش پیام راهنما (hint) و پیام‌های سفارشی با استایل‌های مختلف
امکان شخصی‌سازی کلاس‌های CSS برای خود و کانتینر
پشتیبانی از autofocus
کنترل نمایش پیام‌های منطقی (suppressLogicMessages)
قابلیت تعیین کلید پارامتر جستجو در query string (qsParamKey)
قابلیت تعیین selector آیتم‌ها و targetId برای رفرش لیست‌ها
پشتیبانی از slot برای suffix لیبل

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

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
`mode`	`string`	`'simple'`	حالت جستجو: `simple`, `livewire`, `qs`
`targetId`	`string`	`null`	آیدی المنت هدف برای رفرش (در حالت simple و livewire اجباری)
`qsParamKey`	`string`	`'search'`	کلید پارامتر جستجو در query string (در حالت qs)
`itemsSelector`	`string`	`null`	selector آیتم‌ها (در حالت simple اجباری)
`label`	`string`	`null`	لیبل اصلی
`labelSpaceReserved`	`bool`	`false`	آیا فضای لیبل حتی بدون مقدار رزرو شود؟
`id`	`string`	`null`	شناسه یکتا برای ورودی (در صورت عدم مقداردهی، به صورت تصادفی ساخته می‌شود)
`value`	`string`	`null`	مقدار اولیه ورودی
`placeholder`	`string`	`'جستجو کنید...'`	placeholder برای ورودی
`prefix`	`string`	`null`	پیشوند
`suffix`	`string`	`null`	پسوند
`messageStyle`	`string`/`enum`	`'message'`	استایل نمایش پیام (message, tooltip, ...)
`defaultMessageType`	`string`/`enum`	`'info'`	نوع پیام پیش‌فرض (info, error, warning, ...)
`defaultMessage`	`string`	`null`	پیام پیش‌فرض برای نمایش
`disabled`	`bool`	`false`	غیرفعال بودن ورودی
`readonly`	`bool`	`false`	فقط‌خواندنی بودن ورودی
`containerClass`	`string`	`null`	کلاس CSS سفارشی برای کانتینر
`class`	`string`	`null`	کلاس CSS سفارشی برای خود ورودی
`hint`	`string`	`null`	پیام راهنما یا توضیح کوتاه
`suppressLogicMessages`	`bool`	`false`	عدم نمایش پیام‌های منطقی
`autoFocus`	`bool`	`false`	فوکوس خودکار روی ورودی
`autoComplete`	`string`	`'off'`	مقدار autocomplete برای ورودی
`icon`	`string`	`'fa-regular fa-magnifying-glass'`	کلاس آیکن جستجو (FontAwesome یا ...)
`iconPosition`	`string`	`'right'`	موقعیت آیکن: `left` یا `right`
`labelSuffixSlot`	`string`/`slot`	`null`	اسلات برای نمایش محتوای سفارشی کنار لیبل

نکات مهم

در حالت simple پراپ‌های targetId و itemsSelector اجباری هستند.
در حالت livewire فقط targetId اجباری است.
در حالت qs فقط qsParamKey اجباری است و آیکن فقط باید در سمت راست باشد.

مثال‌ها

نمونه پایه

<x-search-input label="جستجو" placeholder="جستجو کنید..." mode="qs" qs-param-key="page" />

<x-search-input
    target-id="search-container"
    items-selector=".search-list-item"
    label="جستجو"
    placeholder="جستجو کنید..."
>
    <x-slot:label-suffix-slot>
        <a href="#">استعلام</a>
    </x-slot:label-suffix-slot>
</x-search-input>

<ol id="search-container" class="mt-5">
    <li class="search-list-item">جاوا اسکریپت</li>
    <li class="search-list-item">پایتون</li>
    <li class="search-list-item">سی پلاس پلاس</li>
    <li class="search-list-item">جاوا</li>
    <li class="search-list-item">پی اچ پی</li>
    <li class="search-list-item">روبی</li>
    <li class="search-list-item">گو</li>
    <li class="search-list-item">سوئیفت</li>
    <li class="search-list-item">کاتلین</li>
    <li class="search-list-item">راست</li>
    <li class="search-list-item">تایپ اسکریپت</li>
    <li class="search-list-item">سی شارپ</li>
    <li class="search-list-item">لاراول</li>
    <li class="search-list-item">هسکل</li>
    <li class="search-list-item">پرل</li>
    <li class="search-list-item">ارلنگ</li>
    <li class="search-list-item">ریکت</li>
</ol>

ویژگی‌ها​

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

مثال‌ها​

نمونه پایه​

ویژگی‌ها

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

مثال‌ها

نمونه پایه