35 lines
1.6 KiB
Vue
35 lines
1.6 KiB
Vue
<script setup>
|
|
defineProps({
|
|
show: Boolean,
|
|
title: { type: String, default: 'Confirmer la suppression' },
|
|
message: { type: String, default: 'Cette action est irréversible.' },
|
|
confirmLabel: { type: String, default: 'Supprimer' },
|
|
processing: Boolean,
|
|
})
|
|
|
|
defineEmits(['confirm', 'cancel'])
|
|
</script>
|
|
|
|
<template>
|
|
<Transition enter-from-class="opacity-0" enter-active-class="transition-opacity duration-150"
|
|
leave-to-class="opacity-0" leave-active-class="transition-opacity duration-150">
|
|
<div v-if="show" class="fixed inset-0 z-50 flex items-center justify-center">
|
|
<div class="absolute inset-0 bg-black/50" @click="$emit('cancel')" />
|
|
<div class="relative w-full max-w-md rounded-xl bg-white p-6 shadow-xl mx-4">
|
|
<h3 class="text-lg font-semibold text-gray-900">{{ title }}</h3>
|
|
<p class="mt-2 text-sm text-gray-600">{{ message }}</p>
|
|
<div class="mt-6 flex justify-end gap-3">
|
|
<button @click="$emit('cancel')"
|
|
class="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50 transition-colors">
|
|
Annuler
|
|
</button>
|
|
<button @click="$emit('confirm')" :disabled="processing"
|
|
class="rounded-lg bg-red-600 px-4 py-2 text-sm font-medium text-white hover:bg-red-700 disabled:opacity-50 transition-colors">
|
|
{{ processing ? 'Suppression...' : confirmLabel }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</template>
|