Dropdown Button

کامپوننت x-dropdown-button برای نمایش یک دکمه با منوی کشویی (dropdown) در صفحات Blade استفاده می‌شود. این کامپوننت امکان نمایش آیکن، عنوان، تعیین استایل و موقعیت منو و همچنین آیتم‌های قابل شخصی‌سازی با اکشن‌های مختلف را فراهم می‌کند. مناسب برای نمایش منوهای اکشن، تنظیمات، یا لیست گزینه‌ها به صورت جمع‌وجور و واکنش‌گرا است.

---

ویژگی‌ها

• پشتیبانی از انواع واریانت و ظاهر دکمه (variant, appearance)
• نمایش آیکن و عنوان روی دکمه با قابلیت تعیین موقعیت آیکن
• تعیین اندازه و گردی گوشه‌های دکمه
• امکان افزودن کلاس سفارشی به دکمه
• تعیین موقعیت منوی کشویی نسبت به دکمه (پایین، بالا، راست، چپ)
• تعیین حداکثر عرض منو و موقعیت افقی منو
• بستن خودکار منو پس از کلیک روی آیتم (قابل تنظیم)
• پشتیبانی از آیتم‌های منو با قابلیت لینک، آیکن، غیرفعال‌سازی، تاییدیه و ...
• کاملاً قابل شخصی‌سازی و واکنش‌گرا

---

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

x-dropdown-button

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
variant	string	'primary'	رنگ دکمه
appearance	string	'solid'	ظاهر دکمه
title	string	null	متن نمایشی روی دکمه
icon	string	null	کلاس آیکن FontAwesome (مثلاً "fa-solid fa-ellipsis-vertical")
size	string	'md'	اندازه دکمه
iconPosition	string	'left'	موقعیت آیکن (left, right)
iconRotation	bool	false	چرخش آیکون با باز و بسته شدن منوی کشویی
roundedPosition	string	'rounded'	نوع گردی گوشه‌های دکمه
roundedSize	string	null	اندازه گردی گوشه‌ها
elementClass	string	null	کلاس CSS اضافی برای دکمه
closeOnClick	bool	true	بستن منو پس از کلیک روی آیتم
id	string	null	آیدی سفارشی برای دکمه
position	string	'bottom'	موقعیت منو نسبت به دکمه (bottom, top, right, left)
menuPosition	string	'left'	موقعیت افقی منو (left, right)
maxWidth	string	'300px'	حداکثر عرض منوی کشویی

x-dropdown-item

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
id	string	null	آیدی سفارشی برای آیتم
title	string	null	متن نمایشی آیتم
href	string	null	لینک مقصد آیتم
icon	string	null	کلاس آیکن FontAwesome برای آیتم
iconPosition	string	'right'	موقعیت آیکن (left, right)
disabled	bool	false	غیرفعال کردن آیتم
elementClass	string	null	کلاس CSS اضافی برای آیتم
variant	string	'light'	واریانت آیتم (light, primary, secondary, danger, ...)
tooltip	string	null	متن راهنما هنگام هاور
disabledTooltip	string	null	متن راهنما هنگام غیرفعال بودن آیتم
targetLink	string	'_self'	target برای لینک (مثلاً _blank)
confirmation	bool	false	نمایش دیالوگ تایید قبل از اجرا
confirmationMessage	string	'آیا از انجام این عملیات اطمینان دارید؟؟'	پیام تاییدیه قبل از اجرا
confirmationType	string	'info'	نوع تاییدیه (primary, danger, warning, success, info, info-2)
confirmationIcon	string	'fa-solid fa-question'	آیکن تاییدیه
confirmButtonText	string	null	متن دکمه تایید در دیالوگ تاییدیه
cancelButtonText	string	null	متن دکمه انصراف در دیالوگ تاییدیه
confirmationConfirmCallback	string	null	تابع جاوااسکریپت برای اجرا پس از تایید
isActive	bool	false	فعال بودن آیتم (برای نمایش حالت انتخاب شده)
visibility	bool	true	نمایش/عدم نمایش آیتم در dropdown
method	string	'get'	متد HTTP برای ارسال فرم (get, post, put, patch, delete)

نکات تکمیلی

• مقدار confirmationType فقط یکی از مقادیر: primary, danger, warning, success, info, info-2 باشد.
• مقدار iconPosition فقط left یا right باشد.
• مقدار method فقط یکی از get, post, put, patch, delete باشد و پیش‌فرض get است.
• اگر همزمان href و confirmationConfirmCallback مقداردهی شوند، خطا رخ می‌دهد و فقط یکی باید مقدار داشته باشد.
• برای قرار دادن محتوای دلخواه بجای دکمه های پیشفرض در confirmation-modal از اسلات actions استفاده کنید
• برای قرار دادن محتوای دلخواه در قسمت content در confirmation-modal از اسلات content استفاده کنید
• در صورت استفاده از اسلات actions بجای نمایش دکمه های پیشفرض، برای ایجاد دکمه برای بستن confirmation-modal لازم است close-btn به عوان attribute آن المان قرار گیرد

---

نکات مهم

• پراپ position فقط یکی از 'bottom', 'top', 'right', 'left' باشد.
• پراپ menuPosition فقط 'left' یا 'right' باشد.
• اگر closeOnClick برابر false باشد، منو پس از کلیک روی آیتم بسته نمی‌شود.
• برای آیتم‌هایی که نیاز به تاییدیه دارند، پراپ‌های تاییدیه را مقداردهی کنید.
• برای شخصی‌سازی بیشتر می‌توانید از اسلات‌ها و کلاس‌های سفارشی استفاده کنید.

---

مثال‌ها

نمونه پایه

<x-dropdown-button icon="fa-solid fa-ellipsis-vertical" closeOnClick="0" position="bottom" menuPosition="right">
    <x-dropdown-item
        title="حذف"
        icon="fas fa-trash"
        elementClass="bg-white"
        variant="danger"
        tooltip="حذف امکان‌پذیر است"
    />
    <x-dropdown-item title="حذف" href="#" :confirmation="true" :disabled="true" disabledTooltip="حذف امکان‌پذیر نیست" />

    <x-dropdown-item>
        <x-switch-input name="toggle" onLabel="فعال" offLabel="غیرفعال" label="وضعیت" :labelVisibility="true" />
    </x-dropdown-item>
</x-dropdown-button>