67 lines
1.9 KiB
Vue
67 lines
1.9 KiB
Vue
<script setup>
|
|
import DangerButton from '@/Components/DangerButton.vue';
|
|
import Modal from '@/Components/Modal.vue';
|
|
import PrimaryButton from '@/Components/PrimaryButton.vue';
|
|
import SecondaryButton from '@/Components/SecondaryButton.vue';
|
|
|
|
defineProps({
|
|
show: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
title: {
|
|
type: String,
|
|
default: 'Confirmer la suppression',
|
|
},
|
|
message: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
confirmLabel: {
|
|
type: String,
|
|
default: 'Supprimer',
|
|
},
|
|
warning: {
|
|
type: String,
|
|
default: 'Cette action est irréversible.',
|
|
},
|
|
processing: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
danger: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
});
|
|
|
|
const emit = defineEmits(['close', 'confirm']);
|
|
</script>
|
|
|
|
<template>
|
|
<Modal :show="show" max-width="md" @close="emit('close')">
|
|
<div class="p-6">
|
|
<h2 class="text-lg font-semibold text-slate-900">
|
|
{{ title }}
|
|
</h2>
|
|
<p class="mt-2 text-sm text-slate-600">
|
|
{{ message }}
|
|
</p>
|
|
<p v-if="warning" class="mt-2 rounded-lg bg-amber-50 px-3 py-2 text-sm text-amber-800">
|
|
{{ warning }}
|
|
</p>
|
|
|
|
<div class="mt-6 flex justify-end gap-3">
|
|
<SecondaryButton type="button" :disabled="processing" @click="emit('close')">
|
|
Annuler
|
|
</SecondaryButton>
|
|
<DangerButton v-if="danger" type="button" :disabled="processing" @click="emit('confirm')">
|
|
{{ confirmLabel }}
|
|
</DangerButton>
|
|
<PrimaryButton v-else type="button" :disabled="processing" @click="emit('confirm')">
|
|
{{ confirmLabel }}
|
|
</PrimaryButton>
|
|
</div>
|
|
</div>
|
|
</Modal>
|
|
</template> |