Confirmation Modal

کامپوننت x-confirmation-modal یک مودال تاییدیه منعطف و قابل شخصی‌سازی برای نمایش پیام‌های تایید (confirmation) در پروژه‌های Blade شماست. این کامپوننت برای سناریوهایی مانند حذف، عملیات حساس یا هر جایی که نیاز به تایید کاربر دارید، کاربرد دارد و به شما اجازه می‌دهد پیام، آیکن، نوع، دکمه‌ها و ظاهر مودال را به دلخواه تنظیم کنید.

ویژگی‌ها

نمایش پیام تاییدیه با متن دلخواه
انتخاب نوع تاییدیه از بین حالت‌های آماده: primary، danger، warning، success، info
امکان تعیین آیکن تاییدیه (پیش‌فرض: علامت سوال)
قابلیت نمایش یا مخفی کردن دکمه بستن (close)
کنترل امکان بسته شدن مودال با کلیک بیرون یا دکمه ESC
شخصی‌سازی متن و کلاس دکمه تایید و دکمه انصراف
امکان افزودن کلاس CSS به کانتینر و فوتر مودال
پشتیبانی از فراخوانی تابع جاوااسکریپت پس از تایید (callback)
تعیین شناسه (id) یکتا برای هر مودال
امکان نمایش محتوای دلخواه با اسلات actions به جای نمایش دکمه های پیش فرض
امکان نمایش محتوای دلخواه در زیر پیام با اسلات content

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

نام پراپ	نوع داده	مقدار پیش‌فرض	توضیحات
`id`	`string`	—	شناسه یکتا برای مودال (اجباری)
`message`	`string`	`"آیا از انجام این عملیات اطمینان دارید؟؟"`	متن پیام تاییدیه
`closeButtonVisibility`	`boolean`	`true`	نمایش یا مخفی کردن دکمه بستن (X)
`closable`	`boolean`	`true`	امکان بسته شدن مودال با کلیک بیرون یا دکمه ESC
`type`	`string`	`"info"`	نوع تاییدیه: یکی از `primary`، `danger`، `warning`، `success`، `info`
`icon`	`string`	`"fa-solid fa-question"`	کلاس آیکن FontAwesome برای نمایش کنار پیام
`confirmButtonText`	`string`	`"تایید"`	متن دکمه تایید
`cancelButtonText`	`string`	`"انصراف"`	متن دکمه انصراف
`confirmButtonClass`	`string`	`null`	کلاس CSS اضافی برای دکمه تایید
`cancelButtonClass`	`string`	`null`	کلاس CSS اضافی برای دکمه انصراف
`footerClass`	`string`	`null`	کلاس CSS اضافی برای فوتر مودال
`containerClass`	`string`	`null`	کلاس CSS اضافی برای کانتینر مودال
`confirmCallback`	`string`	`null`	نام تابع جاوااسکریپت برای اجرا پس از تایید (مثلاً: `onConfirmDelete`)

نکات مهم

پراپ id الزامی است و باید برای هر مودال یکتا باشد.
مقدار type فقط یکی از این مقادیر باشد: primary، danger، warning، success، info.
اگر مقدار confirmButtonText یا cancelButtonText را تعیین نکنید، به ترتیب "تایید" و "انصراف" نمایش داده می‌شود.
اگر closeButtonVisibility برابر false باشد، دکمه بستن (X) نمایش داده نمی‌شود.
اگر closable برابر false باشد، مودال فقط با کلیک روی دکمه‌ها بسته می‌شود و با کلیک بیرون یا ESC بسته نمی‌شود.
اگر confirmCallback مقداردهی شود، پس از تایید، این تابع جاوااسکریپت اجرا خواهد شد.
برای نمایش مودال با دکمه، باید روی دکمه‌ی مربوطه پراپ‌های data-bs-toggle="confirmation-modal" و data-bs-target="#id" را قرار دهید.
در صورت استفاده از اسلات actions بجای نمایش دکمه های پیشفرض، برای ایجاد دکمه برای بستن confirmation-modal لازم است close-btn به عوان attribute آن المان قرار گیرد

مثال‌ها

نمونه پایه

<div>
    <x-button
        title="مودال تاییدیه"
        data-bs-target="#confirmationModal"
        variant="warning"
        data-bs-toggle="confirmation-modal"
    />

    <x-confirmation-modal
        id="confirmationModal"
        message="آیا از حذف این آیتم اطمینان دارید ؟"
        :closeButtonVisibility="false"
        type="info"
        icon="fas fa-trash"
        confirmButtonText="تائید عملیات"
        confirmButtonClass="btn-danger"
        cancelButtonText="انصراف از عملیات"
        cancelButtonClass="btn-outline-danger"
        confirmCallback="const text = 'hi'; alert(`cowsays ${text}`);"
    />
</div>

ویژگی‌ها​

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

مثال‌ها​

نمونه پایه​

ویژگی‌ها

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

مثال‌ها

نمونه پایه