100 lines
2.4 KiB
Vue
100 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
|
|
import { Button } from '~/components/pub/ui/button'
|
|
|
|
interface ConfirmationProps {
|
|
open?: boolean
|
|
title?: string
|
|
message?: string
|
|
confirmText?: string
|
|
cancelText?: string
|
|
variant?: 'default' | 'destructive' | 'warning'
|
|
size?: 'sm' | 'md' | 'lg' | 'xl'
|
|
}
|
|
|
|
interface ConfirmationEmits {
|
|
'update:open': [value: boolean]
|
|
'confirm': []
|
|
'cancel': []
|
|
}
|
|
|
|
const props = withDefaults(defineProps<ConfirmationProps>(), {
|
|
open: false,
|
|
title: 'Konfirmasi',
|
|
message: 'Apakah Anda yakin ingin melanjutkan?',
|
|
confirmText: 'Ya',
|
|
cancelText: 'Batal',
|
|
variant: 'default',
|
|
size: 'md',
|
|
})
|
|
|
|
const emit = defineEmits<ConfirmationEmits>()
|
|
|
|
const isOpen = computed({
|
|
get: () => props.open,
|
|
set: (value) => emit('update:open', value),
|
|
})
|
|
|
|
const variantClasses = computed(() => {
|
|
const variants = {
|
|
default: {
|
|
icon: 'i-lucide-help-circle',
|
|
iconColor: 'text-blue-500',
|
|
confirmVariant: 'default' as const,
|
|
},
|
|
destructive: {
|
|
icon: 'i-lucide-alert-triangle',
|
|
iconColor: 'text-red-500',
|
|
confirmVariant: 'destructive' as const,
|
|
},
|
|
warning: {
|
|
icon: 'i-lucide-alert-circle',
|
|
iconColor: 'text-yellow-500',
|
|
confirmVariant: 'default' as const,
|
|
},
|
|
}
|
|
return variants[props.variant]
|
|
})
|
|
|
|
function handleConfirm() {
|
|
emit('confirm')
|
|
emit('update:open', false)
|
|
}
|
|
|
|
function handleCancel() {
|
|
emit('cancel')
|
|
emit('update:open', false)
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<Dialog v-model:open="isOpen" :title="title" :size="size">
|
|
<div class="space-y-4">
|
|
<!-- Icon dan pesan -->
|
|
<div class="flex items-center gap-3">
|
|
<div :class="[variantClasses.icon, variantClasses.iconColor]" class="w-6 h-6 mt-1 flex-shrink-0" />
|
|
<div class="flex-1">
|
|
<p class="text-sm text-muted-foreground leading-relaxed">
|
|
{{ message }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Slot untuk konten custom -->
|
|
<div v-if="$slots.default">
|
|
<slot />
|
|
</div>
|
|
|
|
<!-- Footer buttons -->
|
|
<div class="flex justify-end gap-3 pt-4">
|
|
<Button variant="outline" @click="handleCancel">
|
|
{{ cancelText }}
|
|
</Button>
|
|
<Button :variant="variantClasses.confirmVariant" @click="handleConfirm">
|
|
{{ confirmText }}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Dialog>
|
|
</template>
|