68 lines
2.1 KiB
Vue
68 lines
2.1 KiB
Vue
<template>
|
|
<!-- Modal Backdrop -->
|
|
<div v-if="isOpen" class="fixed inset-0 bg-gray-500 bg-opacity-50 flex justify-center items-center z-50">
|
|
<!-- Modal Content -->
|
|
<div class="bg-white rounded-lg w-full max-w-md p-6">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<!-- Modal Header -->
|
|
<h2 class="text-xl font-semibold text-gray-800">{{ title }}</h2>
|
|
<button @click="close" class="text-gray-500 hover:text-gray-800">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-5 h-5">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Modal Body (can be passed as slot) -->
|
|
<div class="mb-4">
|
|
<slot></slot>
|
|
</div>
|
|
|
|
<!-- Modal Footer (Buttons) -->
|
|
<div class="flex justify-end space-x-4">
|
|
<button @click="close" class="px-4 py-2 bg-gray-300 rounded-lg text-gray-700 hover:bg-gray-400">Cancel</button>
|
|
<button @click="confirmAction" class="px-4 py-2 bg-blue-500 rounded-lg text-white hover:bg-blue-600">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
|
|
// Props for passing title and handling actions
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: 'Modal Title'
|
|
},
|
|
isOpen: {
|
|
type: Boolean,
|
|
required: true
|
|
}
|
|
})
|
|
|
|
// Emits to communicate with the parent component
|
|
const emit = defineEmits(['update:isOpen', 'confirm'])
|
|
|
|
const close = () => {
|
|
emit('update:isOpen', false) // Close modal when 'Cancel' or close button is clicked
|
|
}
|
|
|
|
const confirmAction = () => {
|
|
emit('confirm') // Trigger confirmation action (like saving or deleting data)
|
|
close() // Close the modal after confirming
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* Modal Styling */
|
|
button:focus {
|
|
outline: none;
|
|
}
|
|
|
|
button:hover {
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
|