sajjadtalkhabi
92 lines
2.1 KiB
Vue
92 lines
2.1 KiB
Vue
<template>
|
|
<BasicModal min-width="0" max-width="640px" width="95%" :show-close-button="false">
|
|
<template #default="{ data }">
|
|
<div class="confirm-modal">
|
|
<h3 class="confirm-modal__title">{{ data?.title || 'تأیید حذف' }}</h3>
|
|
|
|
<div class="confirm-modal__message">
|
|
<span v-if="data?.message" v-html="data.message" />
|
|
<span v-else>این عمل غیرقابل بازگشت است. آیا از حذف اطمینان دارید؟</span>
|
|
</div>
|
|
|
|
<div class="confirm-modal__actions">
|
|
<BaseButton
|
|
variant="transparent"
|
|
text="منصرف شدم"
|
|
text-class=""
|
|
custom-class="confirm-modal__btn confirm-modal__btn--cancel"
|
|
@click="cancel(data)"
|
|
/>
|
|
<BaseButton
|
|
variant="primary"
|
|
text="تایید"
|
|
:loading="!!data?.confirmLoading"
|
|
custom-class="confirm-modal__btn confirm-modal__btn--confirm"
|
|
@click="confirm(data)"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</BasicModal>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { useModalStore } from '@/store/modal'
|
|
import BasicModal from '@/components/BasicModal.vue'
|
|
import BaseButton from '@/components/BaseButton.vue'
|
|
|
|
defineOptions({ name: 'ConfirmModal' })
|
|
|
|
const { closeModal } = useModalStore()
|
|
|
|
const confirm = (data) => {
|
|
data?.onConfirm?.()
|
|
if (!data?.keepOpenOnConfirm) closeModal('ConfirmModal')
|
|
}
|
|
|
|
const cancel = (data) => {
|
|
data?.onCancel?.()
|
|
closeModal('ConfirmModal')
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.confirm-modal {
|
|
padding: 1.5rem;
|
|
|
|
&__title {
|
|
font-family: var(--font-family-fa);
|
|
font-weight: 700;
|
|
font-size: 1.25rem;
|
|
color: #1f2937;
|
|
text-align: center;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
&__message {
|
|
margin-bottom: 1.5rem;
|
|
font-family: var(--font-family-fa);
|
|
text-align: center;
|
|
|
|
:deep(p) {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
&__actions {
|
|
display: flex;
|
|
gap: 0.75rem;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
&__btn {
|
|
min-width: 100px;
|
|
padding: 0.5rem 1.5rem;
|
|
|
|
&--confirm {
|
|
padding-inline: 1.5rem 2.5rem;
|
|
}
|
|
}
|
|
}
|
|
</style>
|