CRISTAL-83: Basic Move/Rename is possible

* Render shoelace dialogs over the sidebar
xwiki-contrib · Jan 27, 2025 · a9ff36e · a9ff36e
1 parent 2f954e2
commit a9ff36e
Showing 1 changed file with 22 additions and 19 deletions.
diff --git 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>