From 0ff501d4aa28b64a11a3d9a6101e3f997a9e9795 Mon Sep 17 00:00:00 2001
From: Cristiano Magro <cristiano.magro@vola.it>
Date: Tue, 07 Jan 2025 18:29:08 +0100
Subject: [PATCH] teleport per spostare il dialog in una posizione consona nel DOM
---
10 - course project/xno-prj-cmp-01-starting-setup/src/components/UI/BaseDialog.vue | 88 ++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 88 insertions(+), 0 deletions(-)
diff --git a/10 - course project/xno-prj-cmp-01-starting-setup/src/components/UI/BaseDialog.vue b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/UI/BaseDialog.vue
new file mode 100644
index 0000000..0e692bb
--- /dev/null
+++ b/10 - course project/xno-prj-cmp-01-starting-setup/src/components/UI/BaseDialog.vue
@@ -0,0 +1,88 @@
+<template>
+ <teleport to="body">
+ <div @click="$emit('close')"></div>
+ <dialog open>
+ <header>
+ <slot name="header">
+ <h2>{{ title }}</h2>
+ </slot>
+ </header>
+ <section>
+ <slot></slot>
+ </section>
+ <menu>
+ <slot name="action">
+ <base-button @click="$emit('close')"></base-button>
+ </slot>
+ </menu>
+ </dialog>
+ </teleport>
+</template>
+
+<script>
+export default {
+ // props: ['title'],
+ props: {
+ title: {
+ type: String,
+ required: false,
+ },
+ },
+ emits: ['close'],
+};
+</script>
+
+<style scoped>
+div {
+ position: fixed;
+ top: 0;
+ left: 0;
+ height: 100vh;
+ width: 100%;
+ background-color: rgba(0, 0, 0, 0.75);
+ z-index: 10;
+}
+
+dialog {
+ position: fixed;
+ top: 20vh;
+ left: 10%;
+ width: 80%;
+ z-index: 100;
+ border-radius: 12px;
+ border: none;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
+ padding: 0;
+ margin: 0;
+ overflow: hidden;
+}
+
+header {
+ background-color: #3a0061;
+ color: white;
+ width: 100%;
+ padding: 1rem;
+}
+
+header h2 {
+ margin: 0;
+}
+
+section {
+ padding: 1rem;
+}
+
+menu {
+ padding: 1rem;
+ display: flex;
+ justify-content: flex-end;
+ margin: 0;
+}
+
+@media (min-width: 768px) {
+ dialog {
+ left: calc(50% - 20rem);
+ width: 40rem;
+ }
+}
+</style>
--
Gitblit v1.8.0