42 lines
1.3 KiB
Vue
42 lines
1.3 KiB
Vue
<script setup>
|
|
defineProps({
|
|
open: Boolean,
|
|
title: String,
|
|
body: String,
|
|
confirmLabel: { type: String, default: 'تأكيد' },
|
|
danger: { type: Boolean, default: false },
|
|
})
|
|
const emit = defineEmits(['confirm', 'cancel'])
|
|
</script>
|
|
|
|
<template>
|
|
<Teleport to="body">
|
|
<div v-if="open" class="overlay" @click.self="emit('cancel')">
|
|
<div class="dialog card">
|
|
<div class="dialog-body">
|
|
<h3>{{ title }}</h3>
|
|
<p>{{ body }}</p>
|
|
</div>
|
|
<div class="dialog-actions">
|
|
<button class="btn btn-ghost" @click="emit('cancel')">إلغاء</button>
|
|
<button :class="danger ? 'btn btn-danger' : 'btn btn-primary'" @click="emit('confirm')">
|
|
{{ confirmLabel }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Teleport>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.overlay {
|
|
position: fixed; inset: 0; background: rgba(10,14,20,.45); backdrop-filter: blur(2px);
|
|
display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px;
|
|
}
|
|
.dialog { width: 100%; max-width: 380px; box-shadow: var(--shadow-lg); }
|
|
.dialog-body { padding: 22px 22px 6px; }
|
|
.dialog-body h3 { font-size: 17px; margin-bottom: 8px; }
|
|
.dialog-body p { color: var(--ink-soft); font-size: 14px; margin: 0; }
|
|
.dialog-actions { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px 22px; }
|
|
</style>
|