68 lines
2.4 KiB
Vue
68 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogOverlay,
|
|
AlertDialogPortal,
|
|
AlertDialogRoot,
|
|
AlertDialogTitle,
|
|
} from 'reka-ui';
|
|
import Button from '@/components/ui/Button.vue';
|
|
import { useConfirm } from '@/composables/useConfirm';
|
|
import { useTranslations } from '@/composables/useVanguard';
|
|
|
|
const { request, open, close } = useConfirm();
|
|
const { __ } = useTranslations();
|
|
|
|
function accept(): void {
|
|
request.value?.accept();
|
|
close();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AlertDialogRoot v-model:open="open">
|
|
<AlertDialogPortal>
|
|
<AlertDialogOverlay class="fixed inset-0 z-40 bg-black/50" />
|
|
|
|
<AlertDialogContent
|
|
class="fixed top-1/2 left-1/2 z-50 w-[calc(100vw-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 rounded-lg bg-white p-6 shadow-xl focus:outline-none"
|
|
>
|
|
<div class="flex items-start gap-3">
|
|
<i
|
|
class="fas fa-exclamation-triangle mt-1 text-xl"
|
|
:class="request?.severity === 'danger' ? 'text-red-500' : 'text-primary-600'"
|
|
aria-hidden="true"
|
|
/>
|
|
|
|
<div class="flex-1">
|
|
<AlertDialogTitle class="text-lg font-medium text-slate-800">
|
|
{{ request?.header || __('Please Confirm') }}
|
|
</AlertDialogTitle>
|
|
|
|
<AlertDialogDescription class="mt-1 text-slate-600">
|
|
{{ request?.message }}
|
|
</AlertDialogDescription>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-6 flex justify-end gap-2">
|
|
<AlertDialogCancel as-child>
|
|
<Button :label="request?.cancelLabel || __('Cancel')" severity="secondary" outlined />
|
|
</AlertDialogCancel>
|
|
|
|
<AlertDialogAction as-child>
|
|
<Button
|
|
:label="request?.confirmLabel || __('Yes, delete it!')"
|
|
:severity="request?.severity ?? 'danger'"
|
|
@click="accept"
|
|
/>
|
|
</AlertDialogAction>
|
|
</div>
|
|
</AlertDialogContent>
|
|
</AlertDialogPortal>
|
|
</AlertDialogRoot>
|
|
</template>
|