Coltura/frontend/modules/core/components/RoleDeleteModal.vue

<template>
    <Teleport to="body">
        <Transition name="fade">
            <div
                v-if="modelValue"
                class="fixed inset-0 z-50 flex items-center justify-center bg-black/50"
                @click.self="cancel"
            >
                <div class="w-full max-w-md rounded-lg bg-white p-6 shadow-xl">
                    <h3 class="text-lg font-semibold text-neutral-900">
                        {{ t('admin.roles.delete.title') }}
                    </h3>
                    <p class="mt-3 text-sm text-neutral-600">
                        {{ t('admin.roles.delete.message', { label: roleLabel }) }}
                    </p>
                    <div class="mt-6 flex justify-end gap-3">
                        <MalioButton
                            :label="t('common.cancel')"
                            variant="secondary"
                            @click="cancel"
                        />
                        <MalioButton
                            :label="t('common.delete')"
                            variant="danger"
                            icon-name="mdi:delete-outline"
                            icon-position="left"
                            :disabled="loading"
                            @click="confirm"
                        />
                    </div>
                </div>
            </div>
        </Transition>
    </Teleport>
</template>

<script setup lang="ts">
const { t } = useI18n()

defineProps<{
    modelValue: boolean
    roleLabel: string
    loading: boolean
}>()

const emit = defineEmits<{
    'update:modelValue': [value: boolean]
    confirm: []
}>()

// Ferme la modale sans confirmer
function cancel() {
    emit('update:modelValue', false)
}

// Emet l'evenement de confirmation de suppression
function confirm() {
    emit('confirm')
}

// Fermer la modale avec la touche Escape
function onKeydown(e: KeyboardEvent) {
    if (e.key === 'Escape') cancel()
}

onMounted(() => document.addEventListener('keydown', onKeydown))
onUnmounted(() => document.removeEventListener('keydown', onKeydown))
</script>

<style scoped>
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.2s ease;
}
.fade-enter-from,
.fade-leave-to {
    opacity: 0;
}
</style>