61 lines
1.5 KiB
Vue
61 lines
1.5 KiB
Vue
<template>
|
|
<div v-if="isOpen" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
|
|
<div class="bg-white rounded-2xl shadow-xl w-full max-w-md p-6 transform transition-all">
|
|
<h2 class="text-xl font-bold text-gray-800 mb-3 text-center">
|
|
{{ title }}
|
|
</h2>
|
|
|
|
<p class="text-gray-600 text-sm mb-6 text-center leading-relaxed" v-html="message"></p>
|
|
|
|
<div class="flex justify-center gap-3">
|
|
<button @click="$emit('cancel')"
|
|
class="px-5 py-2 rounded-lg font-semibold border border-gray-300 text-gray-700 hover:bg-gray-100 transition">
|
|
{{ cancelText }}
|
|
</button>
|
|
<button @click="$emit('confirm')"
|
|
class="px-5 py-2 rounded-lg font-semibold bg-red-500 text-white hover:bg-red-600 transition">
|
|
{{ confirmText }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
isOpen: {
|
|
type: Boolean,
|
|
required: true,
|
|
},
|
|
title: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
message: {
|
|
type: String,
|
|
required: true,
|
|
},
|
|
confirmText: {
|
|
type: String,
|
|
default: 'Ya, Konfirmasi',
|
|
},
|
|
cancelText: {
|
|
type: String,
|
|
default: 'Batal',
|
|
},
|
|
});
|
|
|
|
// Mendefinisikan events yang dapat di-emit oleh komponen
|
|
defineEmits(['confirm', 'cancel']);
|
|
</script>
|
|
|
|
<style scoped>
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: scale(0.95); }
|
|
to { opacity: 1; transform: scale(1); }
|
|
}
|
|
.animate-fadeIn {
|
|
animation: fadeIn 0.25s ease-out forwards;
|
|
}
|
|
</style>
|