From a9ff36e795e58e6b768a84cbbade2b9270e8337c Mon Sep 17 00:00:00 2001
From: Pierre Jeanjean <pierre.jeanjean@xwiki.com>
Date: Mon, 27 Jan 2025 08:22:57 +0100
Subject: [PATCH] CRISTAL-83: Basic Move/Rename is possible

* Render shoelace dialogs over the sidebar
---
 ds/shoelace/src/vue/x-dialog.vue | 41 +++++++++++++++++---------------
 1 file changed, 22 insertions(+), 19 deletions(-)

diff --git a/ds/shoelace/src/vue/x-dialog.vue b/ds/shoelace/src/vue/x-dialog.vue
index 0c7b9fc17..8a519711a 100644
--- a/ds/shoelace/src/vue/x-dialog.vue
+++ b/ds/shoelace/src/vue/x-dialog.vue
@@ -39,25 +39,28 @@ const open = defineModel<boolean>();
   <span @click="click">
     <slot name="activator" />
   </span>
-  <sl-dialog
-    ref="dialog"
-    :open="open"
-    :label="title"
-    class="dialog-overview"
-    @sl-show="open = true"
-    @sl-hide="open = false"
-  >
-    <slot name="default" />
-    <!-- We use Vue3's `template` tag syntax to manage slots, but Shoelace
-         requires the (now deprecated) slot attribute. As such, we define a
-         conditional wrapper that will be bound to the sl-dialog component,
-         and will hold the contents of our own footer slot (if any). -->
-    <!-- @vue-expect-error the slot attribute is shoelace specific and is not know by the typechecker.
-    Disabling it for now as I did not find an elegant solution to declare this property. -->
-    <div v-if="$slots.footer" slot="footer" class="footer">
-      <slot name="footer" />
-    </div>
-  </sl-dialog>
+  <!-- We need to place the modal in the root node to avoid overlay issues. -->
+  <Teleport to="#xwCristalApp">
+    <sl-dialog
+      ref="dialog"
+      :open="open"
+      :label="title"
+      class="dialog-overview"
+      @sl-show="open = true"
+      @sl-hide="open = false"
+    >
+      <slot name="default" />
+      <!-- We use Vue3's `template` tag syntax to manage slots, but Shoelace
+           requires the (now deprecated) slot attribute. As such, we define a
+           conditional wrapper that will be bound to the sl-dialog component,
+           and will hold the contents of our own footer slot (if any). -->
+      <!-- @vue-expect-error the slot attribute is shoelace specific and is not know by the typechecker.
+      Disabling it for now as I did not find an elegant solution to declare this property. -->
+      <div v-if="$slots.footer" slot="footer" class="footer">
+        <slot name="footer" />
+      </div>
+    </sl-dialog>
+  </Teleport>
 </template>
 
 <style scoped>