67 lines
1.8 KiB
Vue
67 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from '@/components/ui/alert-dialog';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const open = defineModel<boolean>('open', { default: false });
|
|
|
|
withDefaults(
|
|
defineProps<{
|
|
title: string;
|
|
description?: string;
|
|
confirmLabel?: string;
|
|
cancelLabel?: string;
|
|
destructive?: boolean;
|
|
loading?: boolean;
|
|
}>(),
|
|
{
|
|
confirmLabel: 'Ya, Lanjutkan',
|
|
cancelLabel: 'Batal',
|
|
destructive: false,
|
|
loading: false,
|
|
},
|
|
);
|
|
|
|
const emit = defineEmits<{
|
|
confirm: [];
|
|
}>();
|
|
|
|
function handleConfirm(event: Event) {
|
|
event.preventDefault();
|
|
emit('confirm');
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<AlertDialog v-model:open="open">
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>{{ title }}</AlertDialogTitle>
|
|
<AlertDialogDescription v-if="description">
|
|
{{ description }}
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel :disabled="loading">
|
|
{{ cancelLabel }}
|
|
</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
:disabled="loading"
|
|
:class="cn(destructive && 'bg-destructive text-white hover:bg-destructive/90')"
|
|
@click="handleConfirm"
|
|
>
|
|
{{ loading ? 'Memproses...' : confirmLabel }}
|
|
</AlertDialogAction>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</template>
|