Update: 2026-07-13 22:23:21

2026-07-13 22:23:22 +03:00
parent fd3f4a365a
commit c6f48a1f91
45 changed files with 3533 additions and 36 deletions
@@ -0,0 +1,41 @@
+<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>