conflict-nuxt-4/app/components/auto-import/ConfirmModal.vue
2026-02-12 11:24:27 +03:30

46 lines
1.6 KiB
Vue
Executable File

<!-- ~/components/global/GlobalConfirm.vue -->
<template>
<Teleport to="body">
<div
v-if="state.isOpen"
class="fixed inset-0 z-[1001] flex items-center justify-center bg-black/40 pointer-events-auto"
@click="actions.ucoCancelConfirmModal"
>
<div
class="relative bg-white dark:bg-gray-800 rounded-lg shadow-xl p-6 max-w-sm w-full mx-4 pointer-events-auto"
@click.stop
>
<h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-2">
{{ state.title }}
</h3>
<p class="text-gray-600 dark:text-gray-300 mb-6">
{{ state.message }}
</p>
<div class="flex justify-end gap-3">
<button
type="button"
class="px-4 py-2 text-sm font-medium text-gray-700 bg-gray-100 hover:bg-gray-200 rounded-md dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600 transition pointer-events-auto"
@click="actions.ucoCancelConfirmModal"
>
انصراف
</button>
<button
type="button"
class="px-4 py-2 text-sm font-medium text-white bg-primary hover:bg-primary-700 rounded-md transition pointer-events-auto"
@click="actions.ucoConfirm"
>
تأیید
</button>
</div>
</div>
</div>
</Teleport>
</template>
<script setup>
import { useConfirmState, useConfirmActions } from "~/composables/useConfirm";
const state = useConfirmState();
const actions = useConfirmActions();
</script>