64 lines
1.7 KiB
Vue
64 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogFooter,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
} from '@/components/ui/alert-dialog';
|
|
import { Button } from '@/components/ui/button';
|
|
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: [];
|
|
}>();
|
|
</script>
|
|
|
|
<template>
|
|
<AlertDialog v-model:open="open">
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>{{ title }}</AlertDialogTitle>
|
|
<AlertDialogDescription v-if="description">
|
|
{{ description }}
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<slot name="content" />
|
|
<AlertDialogFooter>
|
|
<AlertDialogCancel :disabled="loading">
|
|
{{ cancelLabel }}
|
|
</AlertDialogCancel>
|
|
<Button
|
|
type="button"
|
|
:disabled="loading"
|
|
:variant="destructive ? 'destructive' : 'default'"
|
|
@click="emit('confirm')"
|
|
>
|
|
{{ loading ? 'Memproses...' : confirmLabel }}
|
|
</Button>
|
|
</AlertDialogFooter>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</template>
|